良 逸
良 逸

vue3: 1.如何利用 effectScope 自己实现一个青铜版pinia 一 state篇

vue3: 如何利用 effectScope 自己实现一个青铜版pinia - state篇

当下vue3如此火热，vue3的下一代轻量级状态管理工具pinia也是我们必不可少的学习对象，想要学习pinia，就要知道它的实现原理
现在我们就手把手实现一个自己的青铜版pinia

pinia的核心实现原理和 组合式api effectScope 密不可分，那么组合式api effectScope 有什么作用呢，我们可以看下官网的描述：


创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理

这段描述说明 effectScope() 执行后会创建一个副作用域，并返回一个对象，对象上面提供一个run方法和stop方法
run方法接受一个函数，函数内部执行的所有关于响应式的代码都会被捕获对应的依赖，当具有响应式代理对象属性发生变化的时候，所有依赖于该对象属性的组件都会被 重新渲染
stop函数执行则是可以使run 函数内的所有关于代理对象的响应式都失效，也就是将收集到的依赖全部释放

有点绕，没关系，我们直接上代码

第一步，先实现一个最简单的数据管理仓库模块对象

首先创建一个store对象，对象上有 state 对象，和useStore 函数
useStore 函数和pinia的useStore 的功能和使用方式类似
函数内创建一个 setup 函数，该函数和vue3的setup 函数类似
里面利用 reactive 执行创建响应式对象,并记录下来保存到 store.state 上,然后返回store.state给组件使用

那么如何让使用 store.state 的组件具有当store.state的属性值改变后而重新执行渲染功能呢
这个时候 effectScope API的作用就来了，他可以帮我们完成这个事情
effectScope() 执行得到一个 scope 对象，执行 scope.run()的时候会将传入run函数里面的函数执行，我们只需要将setup函数传入
setup函数里面的所有关于响应式对象的使用依赖都会被收集，每当一个新的组件引用 useStore 的时候都会创建一个新的 scope.run(setup) 执行,每个使用到useStore的组件都会被收集依赖
这样每个依赖到store.state的组件都能在store.state改变的时候进行重新渲染

const store = {
  state: {
    val: 0
  },
  useStore () {
    // 创建响应式的 setup 函数，效果和vue中的 setup 是一样的，都是用来收集数据响应式依赖的
    const setup = () => {
      // 让 this.state 成为响应式代理对象
      // 先判断 this.state 是否是一个reactive生成的响应式的代理对象，是的话就不需要 this.state 再次成为响应式代理对象了
      if (!Vue.isReactive(this.state)) {
        this.state = Vue.reactive(this.state)
      }
    }
    const scope = Vue.effectScope()
    // 执行run 的时候会执行setup函数，收集依赖
    scope.run(setup)
    return this.state
  }
}

然后我们创建两个子组件并使用这个store

<body>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.min.js"
    integrity="sha512-rCO3ZZnxh9j/Y725Iq2Cqr2lc9fi83zVeN3PFTUosktylZsCFjD13PDbKrzKjKO/idjM4KlMQC52AsoGFTAe6A=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  >script>
  <div id="app">div>
  <script>
    const store = {
      state: {
        val: 0
      },
      useStore () {
        // 创建响应式的setUp函数，效果和vue中的setUp 是一样的，都是用来收集数据响应式依赖的
        const setup = () => {
          // 让 this.state 成为响应式代理对象
          // 先判断 this.state 是否是一个reactive生成的响应式的代理对象，是的话就不需要 this.state 再次成为响应式代理对象了
          if (!Vue.isReactive(this.state)) {
            this.state = Vue.reactive(this.state)
          }
        }
        const scope = Vue.effectScope()
        // 执行run 的时候会执行setup函数，收集响应式依赖
        scope.run(setup)
        return this.state
      }
    }
    // 子组件1
    const childrenOne = Vue.defineComponent({
      name: 'children-one',
      setup () {
        // 为什么要执行useStore,因为要通过 useStore 内的setup 函数为该组件提供响应式的依赖搜集
        // storeA 已经是一个最基本的状态管理对象了
        // 不过我们一般不建议直接修改store的值，后续会提供actions去帮助大家更改state的值
        const storeA = store.useStore()
        const add = () => {
          storeA.val += 1
          // 也可以直接通过 store.state 去访问state对象
          // store.state.val +=1
        }
        return {
          add,
          storeA,
          store
        }
      },
      template: `
        

          
children-one

          
          

          {{storeA.val}}
          

          store: {{store.state.val}}
        

      `
    })
    // 子组件2
    const childrenTwo = Vue.defineComponent({
      name: 'children-two',
      setup () {
        const storeB = store.useStore()
        const remove = () => {
          storeB.val -= 1
        }
        return {
          remove,
          storeB
        }
      },
      template: `
        

          
children-two

          
          

          {{storeB.val}}
        

      `
    })
    
    const app = Vue.createApp({
      name: 'app',
      components: {
        'children-one': childrenOne,
        'children-two': childrenTwo,
      },
      template: `
        

          
          
        

      `
    })
    app.mount('#app')
  script>
body>

因为store.state 是具有响应式的代理对象，所以我们可以通过直接改变store.state.val 的值去更新对应组件

我们来看下效果：
vue3: 1.如何利用 effectScope 自己实现一个青铜版pinia 一 state篇_第1张图片

这样一个简单的状态管理仓库的实现就完成了，下一篇我会实现计算属性 getters

你可能感兴趣的:(vue,pinia,javascript,vue.js,前端框架)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • Vue中table合并单元格用法 weixin_30613343 javascriptViewUI
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js前端javascriptnode.jsnpm
    node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
  • vue2实现复制,粘贴功能 周bro vue.jsjavascript前端
    一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 【vite 自动配置路由】 CODER-V 前端javascriptvue.js前端软件构建
    手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • TOMCAT在POST方法提交参数丢失问题 357029540 javatomcatjsp
    摘自http://my.oschina.net/luckyi/blog/213209 昨天在解决一个BUG时发现一个奇怪的问题，一个AJAX提交数据在之前都是木有问题的，突然提交出错影响其他处理流程。 检查时发现页面处理数据较多，起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交，较少数据能够提交成功。 恢复较多数据后跟踪提交FORM DATA ，发现数
  • 在MyEclipse中增加JSP模板 删除-2008-08-18 ljy325 jspxmlMyEclipse
    在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp  目录下找到Jsp.vtl，复制一份，重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式，保存。 然后在 D:\Progr
  • JavaScript常用验证脚本总结 eksliang JavaScriptjavaScript表单验证
         转载请出自出处：http://eksliang.iteye.com/blog/2098985        下面这些验证脚本，是我在这几年开发中的总结，今天把他放出来，也算是一种分享吧，现在在我的项目中也在用！包括日期验证、比较，非空验证、身份证验证、数值验证、Email验证、电话验证等等...! &nb
  • 微软BI（4） 18289753290 微软BI SSIS
    1） Q:查看ssis里面某个控件输出的结果：  A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString()); 这是我们在包里面定义的变量 2):在关联目的端表的时候如果是一对多的关系，一定要选择唯一的那个键作为关联字段。 3) Q：ssis里面如果将多个数据源的数据插入目的端一
  • 定时对大数据量的表进行分表对数据备份 酷的飞上天空 大数据量
    工作中遇到数据库中一个表的数据量比较大，属于日志表。正常情况下是不会有查询操作的，但如果不进行分表数据太多，执行一条简单sql语句要等好几分钟。。   分表工具：linux的shell + mysql自身提供的管理命令 原理：使用一个和原表数据结构一样的表，替换原表。   linux shell内容如下： =======================开始 
  • 本质的描述与因材施教 永夜-极光 感想随笔
             不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。        我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解        &
  • 很迷茫。。。 随便小屋 随笔
    小弟我今年研一，也是从事的咱们现在最流行的专业（计算机）。本科三流学校，为了能有个更好的跳板，进入了考研大军，非常有幸能进入研究生的行业（具体学校就不说了，怕把学校的名誉给损了）。   先说一下自身的条件，本科专业软件工程。主要学习就是软件开发，几乎和计算机没有什么区别。因为学校本身三流，也就是让老师带着学生学点东西，然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说
  • 23种设计模式的意图和适用范围 aijuans 设计模式
    Factory Method 意图 定义一个用于创建对象的接口，让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。 　　适用性 当一个类不知道它所必须创建的对象的类的时候。 　　当一个类希望由它的子类来指定它所创建的对象的时候。 　　当类将创建对象的职责委托给多个帮助子类中的某一个，并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。 Abstr
  • Java中的synchronized和volatile aoyouzi javavolatilesynchronized
    说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字，又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的，working memory则是线程的工作内存，它保存有部分main memory变量的拷贝，对这些变量的更新直接发生在working memo
  • js数组的操作和this关键字 百合不是茶 js数组操作this关键字
    js数组的操作;   一:数组的创建: 1、数组的创建 var array = new Array();　//创建一个数组 var array = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]
  • 别人的阿里面试感悟 bijian1013 面试分享工作感悟阿里面试
    原文如下：http://greemranqq.iteye.com/blog/2007170         一直做企业系统，虽然也自己一直学习技术，但是感觉还是有所欠缺，准备花几个月的时间，把互联网的东西，以及一些基础更加的深入透析，结果这次比较意外，有点突然，下面分享一下感受吧！    &nb
  • 淘宝的测试框架Itest Bill_chen springmaven框架单元测试JUnit
    Itest测试框架是TaoBao测试部门开发的一套单元测试框架，以Junit4为核心， 集合DbUnit、Unitils等主流测试框架，应该算是比较好用的了。 近期项目中用了下，有关itest的具体使用如下： 1.在Maven中引入itest框架： <dependency>   <groupId>com.taobao.test</groupId&g
  • 【Java多线程二】多路条件解决生产者消费者问题 bit1129 java多线程
    package com.tom; import java.util.LinkedList; import java.util.Queue; import java.util.concurrent.ThreadLocalRandom; import java.util.concurrent.locks.Condition; import java.util.concurrent.loc
  • 汉字转拼音pinyin4j 白糖_ pinyin4j
    以前在项目中遇到汉字转拼音的情况，于是在网上找到了pinyin4j这个工具包，非常有用，别的不说了，直接下代码：   import java.util.HashSet; import java.util.Set; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin
  • org.hibernate.TransactionException: JDBC begin failed解决方案 bozch ssh数据库异常DBCP
    org.hibernate.TransactionException: JDBC begin failed:     at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68)    at org.hibernate.impl.SessionImp
  • java-并查集（Disjoint-set）-将多个集合合并成没有交集的集合 bylijinnan java
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.HashSet; import java.util.Iterator; import java.util.List; import java.util.Map; import java.ut
  • Java PrintWriter打印乱码 chenbowen00 java
    一个小程序读写文件，发现PrintWriter输出后文件存在乱码，解决办法主要统一输入输出流编码格式。 读文件： BufferedReader 从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取。 可以指定缓冲区的大小，或者可使用默认的大小。大多数情况下，默认值就足够大了。 通常，Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因
  • [天气与气候]极端气候环境 comsci 环境
          如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵......      那么地球上的国家应该做什么样的防备工作呢?  &n
  • oracle order by与union一起使用的用法 daizj UNIONoracleorder by
    当使用union操作时，排序语句必须放在最后面才正确，如下： 只能在union的最后一个子查询中使用order by，而这个order by是针对整个unioning后的结果集的。So： 如果unoin的几个子查询列名不同，如 Sql代码  select supplier_id, supplier_name  from suppliers  UNI
  • zeus持久层读写分离单元测试 deng520159 单元测试
    本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码: 1.ZeusMasterSlaveTest.java package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Assert; import org.j
  • Yii 截取字符串(UTF-8) 使用组件 dcj3sjt126com yii
    1.将Helper.php放进protected\components文件夹下。 2.调用方法：   Helper::truncate_utf8_string($content,20,false);   //不显示省略号  Helper::truncate_utf8_string($content,20);  //显示省略号  &n
  • 安装memcache及php扩展 dcj3sjt126com PHP
    安装memcache    tar zxvf memcache-2.2.5.tgz     cd memcache-2.2.5/     /usr/local/php/bin/phpize (?)    ./configure --with-php-confi
  • JsonObject 处理日期 feifeilinlin521 javajsonJsonOjbectJsonArrayJSONException
        写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException  原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说  直接上代码  &n
  • Ehcache（06）——监听器 234390216 监听器listenerehcache
    监听器          Ehcache中监听器有两种，监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中，Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。  
  • activiti 自带设计器中chrome 34版本不能打开bug的解决 jackyrong Activiti
      在acitivti modeler中，如果是chrome 34，则不能打开该设计器，其他浏览器可以， 经证实为bug，参考 http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34 修改为，找到 oryx.debug.js 在最头部增加 if (!Document.
  • 微信收货地址共享接口-终极解决 laotu5i0 微信开发
       最近要接入微信的收货地址共享接口，总是不成功，折腾了好几天，实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来，希望能给微信的接口文档起到一个辅助作用，让后面进来的开发者能快速的接入，而不需要像我们一样苦逼的浪费好几天，甚至一周的青春。各种羞辱、谩骂的话就不说了，本人还算文明。    如果你能搜到本贴，说明你已经碰到了各种 ed
  • 关于人才 netkiller.github.com 工作面试招聘netkiller人才
    关于人才 每个月我都会接到许多猎头的电话，有些猎头比较专业，但绝大多数在我看来与猎头二字还是有很大差距的。 与猎头接触多了，自然也了解了他们的工作，包括操作手法，总体上国内的猎头行业还处在初级阶段。 总结就是“盲目推荐，以量取胜”。 目前现状 许多从事人力资源工作的人，根本不懂得怎么找人才。处在人才找不到企业，企业找不到人才的尴尬处境。 企业招聘，通常是需要用人的部门提出招聘条件，由人
  • 搭建 CentOS 6 服务器 - 目录 rensanning centos
    (1) 安装CentOS ISO（desktop/minimal）、Cloud（AWS/阿里云）、Virtualization（VMWare、VirtualBox） 详细内容 (2) Linux常用命令 cd、ls、rm、chmod...... 详细内容 (3) 初始环境设置 用户管理、网络设置、安全设置...... 详细内容 (4) 常驻服务Daemon
  • 【求助】mongoDB无法更新主键 toknowme mongodb
      Query query = new Query();          query.addCriteria(new Criteria("_id").is(o.getId()));                &n
  • jquery 页面滚动到底部自动加载插件集合 xp9802 jquery
    很多社交网站都使用无限滚动的翻页技术来提高用户体验，当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件： 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。 2. jQuery Screw S
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他