前端的小刘老师
前端的小刘老师

Vue 2.0双向绑定原理的实现

Object.defineProperty方法

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体实现过程的代码如下：

  1. 定义构造函数

    function Vue(option){
    this.$el = document.querySelector(option.el);   //获取挂载节点
    this.$data = option.data;
    this.$methods = option.methods;
    this.deps = {};     //所有订阅者集合 目标格式（一对多的关系）：{msg: [订阅者1, 订阅者2, 订阅者3], info: [订阅者1, 订阅者2]}
    this.observer(this.$data);  //调用观察者
    this.compile(this.$el);     //调用指令解析器
}

  2. 定义指令解析器

    Vue.prototype.compile = function (el) {
    let nodes = el.children; //获取挂载节点的子节点
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        if (node.children.length) {
            this.compile(node) //递归获取子节点
        }
        if (node.hasAttribute('l-model')) { //当子节点存在l-model指令
            let attrVal = node.getAttribute('l-model'); //获取属性值
            node.addEventListener('input', (() => {
                this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一个订阅者
                let thisNode = node;
                return () => {
                    this.$data[attrVal] = thisNode.value //更新数据层的数据
                }
            })())
        }
        if (node.hasAttribute('l-html')) {
            let attrVal = node.getAttribute('l-html'); //获取属性值
            this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
        }
        if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {
            let attrVal = node.innerHTML.replace(/[{{|}}]/g, '');   //获取插值表达式内容
            this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
        }
        if (node.hasAttribute('l-on:click')) {
            let attrVal = node.getAttribute('l-on:click'); //获取事件触发的方法名
            node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //将this指向this.$data
        }
    }
}

  3. 定义观察者

    Vue.prototype.observer = function(data){
    for(var key in data){
        (function(that){
            let val = data[key];    //每一个数据的属性值
            that.deps[key] = [];    //初始化所有订阅者对象{msg: [订阅者], info: []}
            var watchers = that.deps[key];
            Object.defineProperty(data, key, {  //数据劫持
                get: function(){
                    return val;
                },
                set: function(newVal){  //设置值(说明有数据更新)
                    if(val !== newVal){
                        val = newVal;
                    }
                    // 通知订阅者
                    watchers.forEach(watcher=>{
                        watcher.update()
                    })
                }
            })
        })(this)
    }
}

  4. 定义订阅者

    function Watcher(el, attr, vm, attrVal) {
    this.el = el;
    this.attr = attr;
    this.vm = vm;
    this.val = attrVal;
    this.update(); //更新视图
}

  5. 更新视图

    Watcher.prototype.update = function () {
    this.el[this.attr] = this.vm.$data[this.val]
}

以上代码定义在一个Vue.js文件中，在需要使用双向绑定的地方引入即可。
尝试使用一下：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./vue.js">script>
head>
<body>
    
    <div id="app">
        <input type="text" l-model="msg" >
        <p l-html="msg">p>
        <input type="text" l-model="info" >
        <p l-html="info">p>
        <button l-on:click="clickMe">点我button>
        <p>{{msg}}p>
    div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "恭喜发财",
                info: "好好学习, 天天向上"
            },
            methods: {
                clickMe(){
                    this.msg = "我爱敲代码";
                }
            }
        })
    script>
body>
html>

你可能感兴趣的:(Vue)

  • 一篇带你搞懂 为什么Vue3比Vue2效率更高！ 一朵好运莲 前端javascriptvue.jshtml5css前端框架
    众所周知，vue3比vue2效率有很大的提升，渲染效率提升了1.3~2倍，SSR效率提升了2~3倍。那么vue3是如何提升效率的呢？目录一、静态提升二、预字符串化三、缓存事件处理函数四、BlockTree五、PatchFlag一、静态提升Vue3中的静态提升（StaticTreeHoisting）是一种编译阶段的优化技术，它能够提高组件的渲染性能。具体来说，静态提升通过以下方式工作：1、提升静态节
  • Git 将本地vue项目修改的内容提交到gitlab/github 糯米团仔 Gitgitgitlabgithub
    注意：github需要点魔法，否则无法提交成功基于gitlab已经存在该项目为前提。1、将自己分支上的代码提交到本地（1）点击更改的“+”，会将更改进行暂存，可以在暂存的更改中查看到修改的文件（2）输入本次修改的内容的简短含义，点击“√”2、切换到develop分支，并在develop分支上合并自己最新代码的分支（1）切换到develop分支-点击底部栏的同步更改（2）基于develop分支的情况
  • Vue-Router进阶相关，声明式导航，路由基本配置，编程式导航 从今开始努力学前端 vue-routervue.js前端javascript
    1.声明式导航导航高亮在鼠标点导航时，会自动为导航所在标签添加两个类分别为router-link-exact-active和router-link-activerouter-link-exact-active精确匹配只有to='/Like'生效（用得少）router-link-active模糊匹配to='/Like'to='/Like/me'to='/Like/user'to='/Like/lov
  • VUE之参数传递 三日沐水 vuevue.js前端javascript
    1、嵌套路由路由嵌套children里面的path属性不加/杠，可以参考如下代码：>>router/index.ts//创建一个路由器，并暴露出去//第一步：引入createRouterimport{createRouter,createWebHistory,createWebHashHistory}from'vue-router'//引入一个个可能呈现组件importHomefrom'@/pag
  • VUE之生命周期 三日沐水 vuevue.js前端javascript
    目录1、VUE2的生命周期1.1、创建（创建前，创建完毕）1.2、挂载（挂载前，挂载完毕）1.3、更新（更新前，更新完毕）1.4、销毁（销毁前，销毁完毕）2、VUE3的生命周期2.1、创建（setup）2.2、挂载（onBeforeMount、onMounted）2.3、更新（onBeforeUpdate、onUpdated）2.4、卸载（onBeforeUnmount、OnUnmounted）3
  • Vue学习第31天——编程式路由导航5种方法详解及案例练习（与声明式路由导航对比） 离奇6厘米 vue学习javascriptvue
    目录一、编程式路由导航1、概念2、理解3、用法二、编程式路由导航的5种方法1、push2、replace3、forward4、back5、go三、案例练习四、编程式路由导航与声明式路由导航对比一、编程式路由导航1、概念除了使用创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。2、理解不借助实现路由跳转3、用法在vue组件中，可以通过$router访问路由实例，因此
  • vue3底层原理和性能优化
    Vue3在底层原理和性能优化方面做了许多改进，以下是一些主要的优化点和原理：虚拟DOM的改进静态树提升：Vue3能够检测到静态组件（即不依赖响应式数据的组件）并将其提升到渲染函数之外，从而减少不必要的重渲染。静态属性提升：对于静态属性，Vue3也会将其提升，避免每次渲染时重新创建这些属性。响应式系统的重构Proxy-based响应式：Vue3使用了ES6的Proxy对象来实现响应式系统，相比Vue
  • 编程式路由导航的三种方法 小野晨曦 前端javascript开发语言
    什么是编程式路由导航？编程式路由导航其实就是脱离实现路由跳转。//创建一个路由器，并暴露出去//第一步：引入createRouterimport{createRouter,createWebHistory,createWebHashHistory}from'vue-router';//引入一个一个可能要呈现的组件importHomefrom'@/pages/Home.vue'importNewsf
  • 编程式导航 云水舟 javascript前端vue.jsvue
    在vue中，页面有两种导航方式，分别是声明式导航和编程式导航。其中，使用标签定义导航链接的方式属于声明式导航；编程式导航是先通过userRouter()函数获取全局路由实例，然后通过调用全局路由实力实现导航。VueRouter提供了userRouter()函数，使用它可以获取全局路由实例，示例如下：import{useRouter}from'vue-router'constrouter=useRo
  • VUE之路由Props、replace、编程式路由导航、重定向 三日沐水 vuevue.js智能路由器前端
    目录1、路由_props的配置2、路由_replaces属性3、编程式路由导航4、路由重定向1、路由_props的配置1）第一种写法，将路由收到的所有params参数作为props传给路由组件只能适用于params参数//创建一个路由器，并暴露出去//第一步：引入createRouterimport{createRouter,createWebHistory,createWebHashHistor
  • Vue进阶之Vue无代码可视化项目（六） VillanelleS TypeScriptVue3基础前端vue.js前端javascript
    Vue无代码可视化项目渲染引擎（渲染器）初版TextBlock.vueChartBlock.vueImageBlock.vueLayoutView.vue渲染器BlockRenderer.vueLayoutView.vue进一步typestypes/block.tsmock/blocks.tsstores/editor.tsblocks/BlockRenderer.vueviews/LayoutV
  • vue3+elementplus实现下拉全选+多选功能 前端小云儿 vue3知识点vue.jsjavascript前端
     下拉多选，展示全部选择      全选       点此会渗透到点击select <
  • el-menu无限递归组件完美版本 Mr.Meng_95 项目vue
    el-menu无限递归组件完美版本备注：修复菜单和子菜单高亮问题，及刷新后被点击子菜单依旧打开的bug效果代码index.vue（递归组件）importMenuSunfrom'../components/menutree.vue'exportdefault{components:{MenuSun},data(){return{menuList:[{name:'一组',id:'1',children
  • 利用jQuery实现h5播放器播放组件 我是真的不会前端 html5jqueryjavascript前端
    播放组件介绍首先会H5播放组件其实自带videoaudio标签，只需要引入添加属性就可以自动在网页上播放，同样，vue和react也有相应的播放插件。比如vue-video-player和reactnative的播放组件这里提供一个npm地址https://www.npmjs.com/package/vue-video-playerhttps://www.npmjs.com/package/rea
  • html手机端富文本,移动端富文本踩坑 weixin_39608657 html手机端富文本
    最近在做一个vue的项目。之前的前端同事离职了，和女朋友去云南潇洒去了，剩下我一个苦逼坐在电脑前哒哒哒敲代码。刚刚接手就开始做移动端富文本编辑器的需求。主管说压了半个月，尽快做出来。在网上找了不少编辑器，前段时间做过react的后台项目，用了百度的编辑器。功能很多很强，遗憾的是ios不支持flash，在移动端并不适用。因为要兼容ios和Android，而且还要在vue的项目中使用，在网上找了很多编
  • vue项目中所使用的element-UI / echarts Stephy_Yy #调研#vue学习笔记
    高清版思维导图见后台管理项目地址1.login登录页面表单在Form组件中，每一个表单域由一个Form-Item组件构成，表单域中可以放置各种类型的表单控件，包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePickerForm组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验
  • 表格组件二次封装（element+vue） syste_m_ vue.jsjavascript前端
    后端管理系统中，常用表格展示数据，统一维护，统一表格风格，二次封装一个基于elementUI中的el-table封装一个简单的表格组件。封装组件分为四部分，表单查询条件、头部操作按钮、表格数据展示、数据分页操作。一、表格组件封装1、表单查询条件封装表单项，定义name、label，表单项默认为输入框，scopedSlots为表单项插槽。//表单项queryForms:[{dataKey:'nick
  • element-plus select 滚动加载更多 日积一沙 javascript
    思路：监听select下拉面板的滚动事件，滚动到底部时，调用接口加载更多数据一、自定义指令importtype{Directive,DirectiveBinding}from"vue";interfaceElTypeextendsHTMLElement{copyData:string|number;__handleClick__:any;}constloadmore:Directive={moun
  • Vue2 和 Vue3 自定义指令比较 风继续吹.. 前端基础Vuevue.jsjavascript前端
    Vue3官网-自定义指令Vue2官网-自定义指令在Vue2和Vue3中，自定义指令可以通过全局注册和局部注册来创建。一.钩子函数比较1.Vue2钩子函数bind：只调用一次，指令第一次绑定到元素时调用inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的VNode更新时调用componentUpdated：指令所在组件的VNode及其子V
  • Vue2：父子组件间参数传递 - 单项传递和双向绑定 我是飞鸟呀 Vue前端javascript开发语言
    1、单向传递：在之前的经验中，数据通常都是从父组件通过prop单项传递给子组件，供子组件使用，但是并不修改。2、双向传递2.1子组件修改后通过事件触发传递给父组件在Vue2踩坑记录：父子间参数传递，不要尝试修改计算属性，可能无法实现响应式一文中，父组件通过prop传递给子组件，子组件接收后拷贝一份，在子组件内部修改，修改完成后，通过$emit事件触发，再将修改后的数据传递给父组件使用；2.2通过.
  • Vue Elementui 项目实战 —— 项目的环境搭建 迎风的信号旗 前端VUEvue.jselementui前端
    1.项目环境搭建1.1安装vue-cli脚手架构建工具vue-cli提供一个官方命令行工具，可用于快速搭建大型单页应用。1.全局安装脚手架cnpminstall-g@vue/cli(也可以简写成cnpmi-g@vue/cli全局安装脚手架)注意：安装制定版本的脚手架npminstall-g@vue/[email protected].全局卸载脚手架cnpmuninstall-gvue-cli用上面指令卸载不了，
  • 项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下） 小白Rachel 饿了么Vue项目总结vuejs
    说明：本总结来源于慕课网@ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！之前章节传送：项目总结：vue.js2.5饿了么APP（1）概述+项目准备项目总结：vue.js2.5饿了么APP（2）主要组件实现-头部相关组件项目总结：vue.js2.5饿了么APP（3）主要组件实现-购物车
  • vue el-table 行内拖拽 Sunny vueelementel-tablevue
    1.安装Sortable.jsnpminstallsortablejs--save2.在页面中引入：importSortablefrom‘sortablejs’-->mounted调用mounted(){this.rowDrop();},methods:{//行内拖拽rowDrop(){//此时找到的元素是要拖拽元素的父容器consttbody=document.querySelector(".e
  • vue高级组件封装 element组件二次封装 沉迷... vue3vue.jsjavascriptelementui
    vue高级组件封装element组件二次封装相关解读使用defineOptions定义组件名称使用useSlots获取插槽获取父组件传递过来的dialog组件的插槽通过循环直接通过动态插槽插入el-dialog组件中使用defineExpose暴露组件方法父组件可通过ref直接调用使用v-bind="$attrs"绑定父组件传递的属性使用v-bind="slotProps"绑定插槽属性经过这些处理
  • vue3自定义表格生成动态列 实践是最好的老师 vue.jsjavascript前端
    {{isEditing?'保存':'编辑'}}import{ref,reactive,h}from'vue';//模拟从后端获取的数据constbackendData={columns:[{label:'姓名',prop:'name',editable:true,type:'input'},{label:'年龄',prop:'age',editable:true,type:'input'},{la
  • Three.js实战项目02：vue3+three.js实现汽车展厅项目 叁拾舞 ThreeJsthree.jsVue3
    文章目录实战项目02项目预览项目创建初始化项目模型加载与展厅灯光加载汽车模型设置灯光材质设置完整项目下载实战项目02项目预览完整项目效果：项目创建创建项目：pnpmcreatevue安装包：[email protected]初始化项目修改App.js代码&#x
  • Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局 LCG元 前端vue.jsword前端
    要使用Vue实现上传Word模板、打印并设置自定义样式和布局，可以借助一些工具和库来完成这个任务。实现步骤创建Vue项目：使用VueCLI创建一个新的Vue项目。安装依赖：安装docx-templates库来处理Word模板，file-saver库用于保存生成的Word文件。创建上传组件：在Vue组件中添加文件上传功能。处理Word模板：使用docx-templates库加载并处理Word模板。设
  • 探索JavaScript前端开发：开启交互之门的神奇钥匙（二） 小周不想卷 艾思科蓝学术会议投稿javascript
    目录引言四、事件处理4.1事件类型4.2事件监听器五、实战案例：打造简易待办事项列表5.1HTML结构搭建5.2JavaScript功能实现六、进阶拓展：异步编程与Ajax6.1异步编程概念6.2Ajax原理与使用七、前沿框架：Vue.js入门窥探7.1Vue.js简介7.2基础使用示例八、总结与展望引言在当今数字化时代，互联网已然成为人们生活不可或缺的一部分，而网页作为互联网的主要载体，其用户体
  • 开源：小狐狸GPT付费AI-v1.9.3 小程序端增加【绘画】模块 百创科技 源码下载源码与教程gpt人工智能小程序
    小狐狸GPT付费AI体验系统、系统版本更新至1.9.3，源码为小程序、H5、WEB版本，购买含更新，独立版；开源、开源、开源、可二开！！200包含H5、web的vue全开源，最新版更新了：小程序端增加【绘画】模块测试环境：系统环境：CentOSLinux7.6.1810(Core)、运行环境：宝塔Linuxv7.0.3(专业版)、网站环境：Nginx1.15.10+MySQL5.6.46+PHP-
  • 列表封装-递归数据回显-全局数据挂载
    全局挂载数据某些下拉选项或者配置项是固定的，将这些数据提取到一个单独的js文件，对应页面使用只需要引入即可，这是数据共享的一种，此外还可以将数据挂载到vue.prototype中，配置原型名，完成后对应页面不用引入js文件，只需要全局使用配置名即可获取数据。//main.jsimport{getDictObj}from"@/utils/dictObj.js"Vue.prototype.$dict=
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他