JavaScript之实现一个简单的Vue示例


Posted in Javascript onJanuary 17, 2019

vue的使用相信大家都很熟练了,使用起来简单。但是大部分人不知道其内部的原理是怎么样的,今天我们就来一起实现一个简单的vue

Object.defineProperty()

实现之前我们得先看一下Object.defineProperty的实现,因为vue主要是通过数据劫持来实现的,通过getset来完成数据的读取和更新。

var obj = {name:'wclimb'}
var age = 24
Object.defineProperty(obj,'age',{
  enumerable: true, // 可枚举
  configurable: false, // 不能再define
  get () {
    return age
  },
  set (newVal) {
    console.log('我改变了',age +' -> '+newVal);
    age = newVal
  }
})

> obj.age
> 24

> obj.age = 25;
> 我改变了 24 -> 25
> 25

从上面可以看到通过get获取数据,通过set监听到数据变化执行相应操作,还是不明白的话可以去看看Object.defineProperty文档。

流程图

JavaScript之实现一个简单的Vue示例

html代码结构

<div id="wrap">
  <p v-html="test"></p>
  <input type="text" v-model="form">
  <input type="text" v-model="form">
  <button @click="changeValue">改变值</button>
  {{form}}
</div>

js调用

new Vue({
    el: '#wrap',
    data:{
      form: '这是form的值',
      test: '<strong>我是粗体</strong>',
    },
    methods:{
      changeValue(){
        console.log(this.form)
        this.form = '值被我改变了,气不气?'
      }
    }
  })

Vue结构

class Vue{
    constructor(){}
    proxyData(){}
    observer(){}
    compile(){}
    compileText(){}
  }
  class Watcher{
    constructor(){}
    update(){}
  }
  • Vue constructor 构造函数主要是数据的初始化
  • proxyData 数据代理
  • observer 劫持监听所有数据
  • compile 解析dom
  • compileText 解析dom里处理纯双花括号的操作
  • Watcher 更新视图操作

Vue constructor 初始化

class Vue{
    constructor(options = {}){
      this.$el = document.querySelector(options.el);
      let data = this.data = options.data; 
      // 代理data,使其能直接this.xxx的方式访问data,正常的话需要this.data.xxx
      Object.keys(data).forEach((key)=> {
        this.proxyData(key);
      });
      this.methods = options.methods // 事件方法
      this.watcherTask = {}; // 需要监听的任务列表
      this.observer(data); // 初始化劫持监听所有数据
      this.compile(this.$el); // 解析dom
    }
  }

上面主要是初始化操作,针对传过来的数据进行处理

proxyData 代理data

class Vue{
    constructor(options = {}){
      ......
    }
    proxyData(key){
      let that = this;
      Object.defineProperty(that, key, {
        configurable: false,
        enumerable: true,
        get () {
          return that.data[key];
        },
        set (newVal) {
          that.data[key] = newVal;
        }
      });
    }
  }

上面主要是代理data到最上层,this.xxx的方式直接访问data

observer 劫持监听

class Vue{
    constructor(options = {}){
      ......
    }
    proxyData(key){
      ......
    }
    observer(data){
      let that = this
      Object.keys(data).forEach(key=>{
        let value = data[key]
        this.watcherTask[key] = []
        Object.defineProperty(data,key,{
          configurable: false,
          enumerable: true,
          get(){
            return value
          },
          set(newValue){
            if(newValue !== value){
              value = newValue
              that.watcherTask[key].forEach(task => {
                task.update()
              })
            }
          }
        })
      })
    }
  }

同样是使用Object.defineProperty来监听数据,初始化需要订阅的数据。

把需要订阅的数据到pushwatcherTask里,等到时候需要更新的时候就可以批量更新数据了。?下面就是;
遍历订阅池,批量更新视图。

set(newValue){
    if(newValue !== value){
      value = newValue
      // 批量更新视图
      that.watcherTask[key].forEach(task => {
        task.update()
      })
    }
  }

compile 解析dom

class Vue{
    constructor(options = {}){
      ......
    }
    proxyData(key){
      ......
    }
    observer(data){
      ......
    }
    compile(el){
      var nodes = el.childNodes;
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        if(node.nodeType === 3){
          var text = node.textContent.trim();
          if (!text) continue;
          this.compileText(node,'textContent')        
        }else if(node.nodeType === 1){
          if(node.childNodes.length > 0){
            this.compile(node)
          }
          if(node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')){
            node.addEventListener('input',(()=>{
              let attrVal = node.getAttribute('v-model')
              this.watcherTask[attrVal].push(new Watcher(node,this,attrVal,'value'))
              node.removeAttribute('v-model')
              return () => {
                this.data[attrVal] = node.value
              }
            })())
          }
          if(node.hasAttribute('v-html')){
            let attrVal = node.getAttribute('v-html');
            this.watcherTask[attrVal].push(new Watcher(node,this,attrVal,'innerHTML'))
            node.removeAttribute('v-html')
          }
          this.compileText(node,'innerHTML')
          if(node.hasAttribute('@click')){
            let attrVal = node.getAttribute('@click')
            node.removeAttribute('@click')
            node.addEventListener('click',e => {
              this.methods[attrVal] && this.methods[attrVal].bind(this)()
            })
          }
        }
      }
    },
    compileText(node,type){
      let reg = /\{\{(.*?)\}\}/g, txt = node.textContent;
      if(reg.test(txt)){
        node.textContent = txt.replace(reg,(matched,value)=>{
          let tpl = this.watcherTask[value] || []
          tpl.push(new Watcher(node,this,value,type))
          if(value.split('.').length > 1){
            let v = null
            value.split('.').forEach((val,i)=>{
              v = !v ? this[val] : v[val]
            })
            return v
          }else{
            return this[value]
          }
        })
      }
    }
  }

这里代码比较多,我们拆分看你就会觉得很简单了

首先我们先遍历el元素下面的所有子节点,node.nodeType === 3 的意思是当前元素是文本节点,node.nodeType === 1 的意思是当前元素是元素节点。因为可能有的是纯文本的形式,如纯双花括号就是纯文本的文本节点,然后通过判断元素节点是否还存在子节点,如果有的话就递归调用compile方法。下面重头戏来了,我们拆开看:

if(node.hasAttribute('v-html')){
  let attrVal = node.getAttribute('v-html');
  this.watcherTask[attrVal].push(new Watcher(node,this,attrVal,'innerHTML'))
  node.removeAttribute('v-html')
}

上面这个首先判断node节点上是否有v-html这种指令,如果存在的话,我们就发布订阅,怎么发布订阅呢?只需要把当前需要订阅的数据pushwatcherTask里面,然后到时候在设置值的时候就可以批量更新了,实现双向数据绑定,也就是下面的操作

that.watcherTask[key].forEach(task => {
  task.update()
})

然后push的值是一个Watcher的实例,首先他new的时候会先执行一次,执行的操作就是去把纯双花括号 -> 1,也就是说把我们写好的模板数据更新到模板视图上。
最后把当前元素属性剔除出去,我们用Vue的时候也是看不到这种指令的,不剔除也不影响

至于Watcher是什么,看下面就知道了

Watcher

class Watcher{
  constructor(el,vm,value,type){
    this.el = el;
    this.vm = vm;
    this.value = value;
    this.type = type;
    this.update()
  }
  update(){
    this.el[this.type] = this.vm.data[this.value]
  }
}

之前发布订阅之后走了这里面的操作,意思就是把当前元素如:node.innerHTML = '这是data里面的值'、node.value = '这个是表单的数据'

那么我们为什么不直接去更新呢,还需要update做什么,不是多此一举吗?
其实update记得吗?我们在订阅池里面需要批量更新,就是通过调用Watcher原型上的update方法。

效果

在线效果地址,大家可以浏览器看一下效果,由于本人太懒了,gif效果图就先不放了,哈哈??

完整代码

完整代码已经放到github上了 -> MyVue

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
微信小程序实现上传图片功能
May 28 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
如何能分清npm cnpm npx nvm
Jan 17 #Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 #Javascript
npm 常用命令详解(小结)
Jan 17 #Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 #Javascript
vuex页面刷新后数据丢失的方法
Jan 17 #Javascript
jquery获取img的src值实例介绍
Jan 16 #jQuery
js中int和string数据类型互相转化实例
Jan 16 #Javascript
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
华为c/c++笔试题
2016/01/25 面试题
会计岗位职责
2013/11/08 职场文书
小学生暑假感言
2014/02/06 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
见习报告格式范文
2014/11/08 职场文书
计生个人工作总结
2015/02/28 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2016年寒假见闻
2015/10/10 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python