大魔王sama
大魔王sama

Vue 双向数据绑定原理（数据劫持和发布者-订阅者）


<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>
head>

<body>
  <div class="app">
    <form>
      <label for="name">
        名字：
        <input id="name" type="text" v-model="name">
      label>
      <label for="carName">
        车牌：
        <input id="carName" type="text" v-model="car.name">
      label>
      <label for="carColor">
        颜色：
        <input id="carColor" type="text" v-model="car.color">
      label>
      <button @click="reset">重置button>
    form>
    <h4>
      我的名字叫：<span v-text="name">span>，我有一辆<span v-html="car.color">span>的<span v-text="car.name">span>
    h4>
  div>

  <script>
    /*
      原理：数据劫持
      思路：
        1. 遍历数据，并利用 Object.defineProperty 进行数据劫持（根据键名）；绑定订阅者，数据发生变化时统一更新。
        2. 遍历编译 虚拟DOM 树，生成订阅者对象，绑定到数据对象上。
      对象：
        MyVm：模拟 Vue 对象
          属性：
            _el：根节点
            _data：数据
            _methods：方法
            _property：数据与订阅者对应关系（存放订阅者对象）
          功能：
            _listen：遍历数据并劫持
            _compile：编译生成订阅者
        Watcher：订阅者对象
          属性：
            _el：需要操作的节点
            _vm：vm对象
            _attr：需要操作的DOM属性
            _dataName：数据依赖
          功能：
            _update：更新订阅者
    */

    class MyVm {
      constructor({
        el,
        data,
        methods
      }) {
        this._el = document.querySelector(el)
        this._data = data
        this._methods = methods
        this._property = {}

        this._listen(this._data, this._property)
        this._compile(this._el)
      }

      _listen(data, parent) {
        const that = this
        Object.keys(data).map(key => {
          if (data.hasOwnProperty(key)) {
            let value = data[key]

            // 绑定订阅者
            parent[key] = {
              _subscriber: []
            }

            // 数据劫持
            Object.defineProperty(data, key, {
              get() {
                return value
              },
              set(newValue) {
                value = newValue
                // 更新订阅者
                parent[key]._subscriber.map(watcher => watcher._update())
              }
            })

            // 递归遍历
            if (typeof value === 'object') {
              this._listen(value, parent[key])
            }
          }
        })
      }

      _compile(root) {
        const nodeList = root.children
        if (nodeList.length != 0) {
          Object.values(nodeList).map(node => {
            // 编译 v-html 属性
            if (node.hasAttribute('v-html')) {
              // 找到对应数据
              const attr = node.getAttribute('v-html').split('.')
              let _p = this._property
              attr.map(a => {
                _p = _p[a]
              })

              // 绑定订阅者
              const watcher = new Watcher({
                el: node,
                vm: this,
                attr: 'innerHTML',
                dataName: attr
              })
              _p._subscriber.push(watcher)
            }

            // 编译 v-text 属性
            if (node.hasAttribute('v-text')) {
              // 找到对应数据
              const attr = node.getAttribute('v-text').split('.')
              let _p = this._property
              attr.map(a => {
                _p = _p[a]
              })

              // 绑定订阅者
              const watcher = new Watcher({
                el: node,
                vm: this,
                attr: 'innerText',
                dataName: attr
              })
              _p._subscriber.push(watcher)
            }

            // 编译 v-model 属性
            if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
              // 找到对应数据
              const attr = node.getAttribute('v-model').split('.')
              let _p = this._property
              attr.map(a => {
                _p = _p[a]
              })

              // 绑定订阅者
              const watcher = new Watcher({
                el: node,
                vm: this,
                attr: 'value',
                dataName: attr
              })
              _p._subscriber.push(watcher)

              // 监听事件
              node.addEventListener('input', () => {
                let _d = this._data
                attr.map((a, i) => {
                  if (i < attr.length - 1) {
                    _d = _d[a]
                  } else {
                    _d[a] = node.value
                  }
                })
              })
            }

            // 编译事件
            Object.values(node.attributes).map(attr => {
              if (attr.name.match(/^@.*/)) {
                const type = attr.name.substring(1)
                const method = node.getAttribute(attr.name)
                // 绑定事件
                node.addEventListener(type, this._methods[method].bind(this._data))
              }
            })

            // 递归遍历
            this._compile(node)
          })
        }
      }
    }

    class Watcher {
      constructor({
        el,
        vm,
        attr,
        dataName
      }) {
        this._el = el
        this._vm = vm
        this._attr = attr
        this._dataName = dataName

        // 加载默认数据
        this._update()
      }

      _update() {
        this._dataName.map(a => {
          let _d = this._vm._data
          this._dataName.map((item, index) => {
            _d = _d[item]
          })
          this._el[this._attr] = _d
        })
      }
    }

    const app = new MyVm({
      el: '.app',
      data: {
        name: '张三',
        car: {
          name: '宝马',
          color: '红色'
        }
      },
      methods: {
        reset() {
          this.name = '张三'
          this.car.name = '宝马'
          this.car.color = '白色'
        }
      }
    })
  script>
body>

html>

你可能感兴趣的:(Vue)

  • VScode保持vue语法高亮的方式 「已注销」 vscodevue.jside编辑器前端
    VScode保持vue语法高亮的方式：1.安装插件：vetur。打开VScode，Ctrl+P然后输入extinstallvetur然后回车点安装即可。2.在VSCode中使用Ctrl+Shift+P打开命令面板，输入Preferences:OpenSettings(JSON)。3.在配置对象里加上key和value1"emmet.syntaxProfiles":{2"vue-html":"htm
  • 快速开始，使用 VSCode 开发 Vue 项目如何配置语法高亮和自动格式化 dadiyang Vue学习笔记前端填坑之旅VueIDEVSCode插件配置
    关于IDE开发Vue项目，一般使用VSCode/WebStorm/Atom等IDE，推荐使用VSCode。而VSCode原生不支持Vue语法高亮和自动格式化等功能，需要通过插件来支持。安装插件点击首选项->扩展，安装以下插件：Vetur–vue必备插件，用于语法高亮和代码提示AutoCloseTag–自动完成标签，如输入时，自动添加AutoRenameTag–重命名开始或结束标签时，自动将配对的开
  • Vue.js从入门到就业[第20讲]：响应式设计与调优，一文吃透它！ bug菌¹ #滚雪球学Vuevue.jsflutter前端响应式设计Vue调优Vue入门
    本文收录于「Vue.js从入门到就业」专栏，手把手带你零基础教学Vue，从入门到就业，助你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！本文目录:前言摘要正文1.Vue.js的响应式系统原理1.1Vue.js响应式系统的核心Vue2与Vue3的响应式系统响应式数据的实现1.2Vue2与Vue3响应式系统的差异Vue2的局限性Vue3的优势1.3响应式系统
  • 使用Intro.js为Vue.js应用创建交互式引导 糖糖老师436 程序员前端javascriptvue.js开发语言
    Intro.js是一个简单易用的JavaScript库，用于创建交互式的引导教程。在Vue.js应用中，为了引导用户浏览页面并了解功能，集成Intro.js是一种常见的方法。本文将介绍如何在Vue.js应用中使用Intro.js来创建引导教程，并提供代码示例和解释。介绍Intro.jsIntro.js是一个轻量级的JavaScript库，用于创建引导教程和向用户介绍网站或应用程序的功能。它提供了丰
  • Vue项目中使用高德地图 糖糖老师436 前端程序员vue.js前端javascript
    ue项目中使用高德地图在一些简单的大屏类展示应用/网页中，经常会用到地图相关的展示场景，除了一些特殊的三维场景需要用Gis/BIM或者WebGL，一些简单的业务就可以直接使用高德地图或者百度地图来完成。本文主要讲述在Vue项目中高德地图JavaScriptAPI的引用方式以及一些简单的API的使用。演示项目使用vuecli4.0脚手架搭建项目。1.引用在高德地图发布2.0版本之前，通常只能以两种通
  • 2025年创业公司技术栈选择：React与Vue对比 硅基创想家 编程语言vue.jsreact.js前端
    前端开发、React、Vue、TypeScript有个残酷的事实：在2025年为你的技术栈挑选合适的框架，不是看哪个更酷炫或更热门，而是看哪个最契合你的特定需求。在前端开发领域，React和Vue这两大巨头正激烈竞争，吸引着你的目光。但有一点要明确：不存在“一刀切”的答案。React和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"绑定插槽属性经过这些处理
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIPHPandroidlinux
    ╔-----------------------------------╗┆                           
  • 各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。 bozch .net.net mvc
    在.net mvc5中，在执行某一操作的时候，出现了如下错误：       各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。 经查询当前的操作与错误内容无关，经过对错误信息的排查发现，事故出现在数据库迁移上。 回想过去： 在迁移之前已经对数据库进行了添加字段操作，再次进行迁移插入XXX字段的时候，就会提示如上错误。  &
  • Java 对象大小的计算 e200702084 java
                              Java对象的大小 如何计算一个对象的大小呢？    
  • Mybatis Spring 171815164 mybatis
    ApplicationContext ac = new ClassPathXmlApplicationContext("applicationContext.xml"); CustomerService userService = (CustomerService) ac.getBean("customerService"); Customer cust
  • JVM 不稳定参数 g21121 jvm
            -XX 参数被称为不稳定参数，之所以这么叫是因为此类参数的设置很容易引起JVM 性能上的差异，使JVM 存在极大的不稳定性。当然这是在非合理设置的前提下，如果此类参数设置合理讲大大提高JVM 的性能及稳定性。        可以说“不稳定参数”
  • 用户自动登录网站 永夜-极光 用户
    1.目标:实现用户登录后,再次登录就自动登录,无需用户名和密码 2.思路:将用户的信息保存为cookie            每次用户访问网站,通过filter拦截所有请求,在filter中读取所有的cookie,如果找到了保存登录信息的cookie,那么在cookie中读取登录信息,然后直接
  • centos7 安装后失去win7的引导记录 程序员是怎么炼成的 操作系统
    1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ###   在后面添加    menuentry "Windows 7 (loader) (on /dev/sda1)" { 
  • Oracle 10g 官方中文安装帮助文档以及Oracle官方中文教程文档下载 aijuans oracle
    Oracle 10g 官方中文安装帮助文档下载：http://download.csdn.net/tag/Oracle%E4%B8%AD%E6%96%87API%EF%BC%8COracle%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%EF%BC%8Coracle%E5%AD%A6%E4%B9%A0%E6%96%87%E6%A1%A3 Oracle 10g 官方中文教程
  • JavaEE开源快速开发平台G4Studio_V3.2发布了 無為子 AOPoraclemysqljavaeeG4Studio
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V3.2版本已经正式发布。大家可以通过如下地址下载。   访问G4Studio网站 http://www.g4it.org   G4Studio_V3.2版本变更日志 功能新增 (1).新增了系统右下角滑出提示窗口功能。 (2).新增了文件资源的Zip压缩和解压缩
  • Oracle常用的单行函数应用技巧总结 百合不是茶 日期函数转换函数(核心)数字函数通用函数(核心)字符函数
    单行函数;   字符函数,数字函数,日期函数,转换函数(核心),通用函数(核心) 一:字符函数: .UPPER(字符串) 将字符串转为大写 .LOWER (字符串) 将字符串转为小写 .INITCAP(字符串) 将首字母大写 .LENGTH (字符串) 字符串的长度 .REPLACE(字符串,'A','_') 将字符串字符A转换成_
  • Mockito异常测试实例 bijian1013 java单元测试mockito
    Mockito异常测试实例： package com.bijian.study; import static org.mockito.Mockito.mock; import static org.mockito.Mockito.when; import org.junit.Assert; import org.junit.Test; import org.mockito.
  • GA与量子恒道统计 Bill_chen JavaScript浏览器百度Google防火墙
    前一阵子，统计**网址时，Google Analytics（GA） 和量子恒道统计（也称量子统计），数据有较大的偏差，仔细找相关资料研究了下，总结如下：   为何GA和量子网站统计（量子统计前身为雅虎统计）结果不同？ 首先：没有一种网站统计工具能保证百分之百的准确出现该问题可能有以下几个原因：（1）不同的统计分析系统的算法机制不同；（2）统计代码放置的位置和前后
  • 【Linux命令三】Top命令 bit1129 linux命令
    Linux的Top命令类似于Windows的任务管理器，可以查看当前系统的运行情况，包括CPU、内存的使用情况等。如下是一个Top命令的执行结果：     top - 21:22:04 up 1 day, 23:49, 1 user, load average: 1.10, 1.66, 1.99 Tasks: 202 total, 4 running, 198 sl
  • spring四种依赖注入方式 白糖_ spring
      平常的java开发中，程序员在某个类中需要依赖其它类的方法，则通常是new一个依赖类再调用类实例的方法，这种开发存在的问题是new的类实例不好统一管理，spring提出了依赖注入的思想，即依赖类不由程序员实例化，而是通过spring容器帮我们new指定实例并且将实例注入到需要该对象的类中。依赖注入的另一种说法是“控制反转”，通俗的理解是：平常我们new一个实例，这个实例的控制权是我
  • angular.injector boyitech AngularJSAngularJS API
    angular.injector   描述: 创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入.   使用方法: angular.injector(modules, [strictDi])   参数详解: Param Type Details mod
  • java-同步访问一个数组Integer[10]，生产者不断地往数组放入整数1000，数组满时等待；消费者不断地将数组里面的数置零，数组空时等待 bylijinnan Integer
    public class PC { /** * 题目：生产者-消费者。 * 同步访问一个数组Integer[10]，生产者不断地往数组放入整数1000，数组满时等待；消费者不断地将数组里面的数置零，数组空时等待。 */ private static final Integer[] val=new Integer[10]; private static
  • 使用Struts2.2.1配置 Chen.H apachespringWebxmlstruts
    Struts2.2.1 需要如下 jar包: commons-fileupload-1.2.1.jar commons-io-1.3.2.jar commons-logging-1.0.4.jar freemarker-2.3.16.jar javassist-3.7.ga.jar ognl-3.0.jar spring.jar struts2-core-2.2.1.jar struts2-sp
  • [职业与教育]青春之歌 comsci 教育
           每个人都有自己的青春之歌............但是我要说的却不是青春...        大家如果在自己的职业生涯没有给自己以后创业留一点点机会,仅仅凭学历和人脉关系,是难以在竞争激烈的市场中生存下去的....   &nbs
  • oracle连接(join)中使用using关键字 daizj JOINoraclesqlusing
    在oracle连接(join)中使用using关键字 34. View the Exhibit and examine the structure of the ORDERS and ORDER_ITEMS tables. Evaluate the following SQL statement: SELECT oi.order_id, product_id, order_date FRO
  • NIO示例 daysinsun nio
    NIO服务端代码： public class NIOServer { private Selector selector; public void startServer(int port) throws IOException { ServerSocketChannel serverChannel = ServerSocketChannel.open(
  • C语言学习homework1 dcj3sjt126com chomework
    0、 课堂练习做完 1、使用sizeof计算出你所知道的所有的类型占用的空间。 int x; sizeof(x);   sizeof(int);   # include <stdio.h> int main(void) { int x1; char x2; double x3; float x4; printf(&quo
  • select in order by , mysql排序 dcj3sjt126com mysql
    If i select like this: SELECT id FROM users WHERE id IN(3,4,8,1); This by default will select users in this order 1,3,4,8, I would like to select them in the same order that i put IN() values so:
  • 页面校验-新建项目 fanxiaolong 页面校验
    $(document).ready( function() { var flag = true; $('#changeform').submit(function() { var projectScValNull = true; var s =""; var parent_id = $("#parent_id").v
  • Ehcache（02）——ehcache.xml简介 234390216 ehcacheehcache.xml简介
    ehcache.xml简介          ehcache.xml文件是用来定义Ehcache的配置信息的，更准确的来说它是定义CacheManager的配置信息的。根据之前我们在《Ehcache简介》一文中对CacheManager的介绍我们知道一切Ehcache的应用都是从CacheManager开始的。在不指定配置信
  • junit 4.11中三个新功能 jackyrong java
    junit 4.11中两个新增的功能，首先是注解中可以参数化，比如 import static org.junit.Assert.assertEquals; import java.util.Arrays; import org.junit.Test; import org.junit.runner.RunWith; import org.junit.runn
  • 国外程序员爱用苹果Mac电脑的10大理由 php教程分享 windowsPHPunixMicrosoftperl
    Mac 在国外很受欢迎，尤其是在 设计/web开发/IT 人员圈子里。普通用户喜欢 Mac 可以理解，毕竟 Mac 设计美观，简单好用，没有病毒。那么为什么专业人士也对 Mac 情有独钟呢？从个人使用经验来看我想有下面几个原因： 1、Mac OS X 是基于 Unix 的 这一点太重要了，尤其是对开发人员，至少对于我来说很重要，这意味着Unix 下一堆好用的工具都可以随手捡到。如果你是个 wi
  • 位运算、异或的实际应用 wenjinglian 位运算
    一． 位操作基础，用一张表描述位操作符的应用规则并详细解释。       二． 常用位操作小技巧，有判断奇偶、交换两数、变换符号、求绝对值。       三． 位操作与空间压缩，针对筛素数进行空间压缩。    &n
  • weblogic部署项目出现的一些问题（持续补充中……） Everyday都不同 weblogic部署失败
    好吧，weblogic的问题确实……   问题一： org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate component class: URL [zip:E:/weblogic/user_projects/domains/base_domain/serve
  • tomcat7性能调优（01） toknowme tomcat7
        Tomcat优化： 1、最大连接数最大线程等设置 <Connector port="8082" protocol="HTTP/1.1"                useBodyEncodingForURI="t
  • PO VO DAO DTO BO TO概念与区别 xp9802 javaDAO设计模式bean领域模型
    O/R Mapping 是 Object Relational Mapping（对象关系映射）的缩写。通俗点讲，就是将对象与关系数据库绑定，用对象来表示关系数据。在O/R Mapping的世界里，有两个基本的也是重要的东东需要了解，即VO，PO。 它们的关系应该是相互独立的，一个VO可以只是PO的部分，也可以是多个PO构成，同样也可以等同于一个PO（指的是他们的属性）。这样，PO独立出来，数据持
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他