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 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 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
图解上海144收音机
2021/03/02 无线电
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue slots 组件的组合/分发实例
2018/09/06 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
iview实现图片上传功能
2020/06/29 Javascript
js实现列表按字母排序
2020/08/11 Javascript
学习python 之编写简单乘法运算题
2016/02/27 Python
Python部署web开发程序的几种方法
2017/05/05 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
机修工岗位职责
2013/11/24 职场文书
自我鉴定怎么写
2014/01/12 职场文书
村创先争优活动总结
2014/08/28 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL