首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue数据驱动模拟实现1

Posted in Javascript onJanuary 11, 2017

一、前言

Vue有一核心就是数据驱动（Data Driven），允许我们采用简洁的模板语法来声明式的将数据渲染进DOM，且数据与DOM是绑定在一起的，这样当我们改变Vue实例的数据时，对应的DOM元素也就会改变了。

如下：

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
</head>
 <body>
  <div id="test">
   {{name}}
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
   var vm = new Vue({
    el: '#test',
    data: {
     name: 'Monkey'
    }
   });
  </script>  
 </body>
</html>

当我们在chrome控制台，更改vm.name时，页面中的数据也随之改变，但我们并没有与DOM直接接触，效果如下:

Vue数据驱动模拟实现1

好了，今儿的核心就是模拟上述Demo中的数据驱动。

二、模拟Vue之数据驱动

通过粗浅地走读Vue的源码，发现达到这一效果的核心思路其实就是利用ES5的defineProperty方法，监听data数据，如果数据改变，那么就对页面做相关操作。

有了大体思路，那么我们就开始一步一步实现一个简易版的Vue数据驱动吧，简称SimpleVue。

Vue实例的创建过程，如下：

var vm = new Vue({
 el: '#test',
 data: {
  name: 'Monkey'
 }
});

因此，我们也依瓢画葫芦，构建SimpleVue构造函数如下：

function SimpleVue(obj){
 this.$el = document.querySelector(obj.el);
 this.$options = obj;
 this._data = Object.create(null);
 //入口
 this.init();
 obj = null;
};
SimpleVue.prototype = {
 constructor: SimpleVue,
 init: function(){
  //TODO 
 }
};

接下来，我们在SimpleVue原型上编写一个watchData方法，通过利用ES5原生的defineProperty方法，监听data中的属性，如果属性值改变，那么我们就进行相关的页面处理。

如下：

SimpleVue.prototype = {
 //监听data属性
 watchData: function(){
  var data = this.$options.data,//得到data对象
   keys = Object.keys(data),//data对象上全部的自身属性，返回数组
   that = this;
  keys.forEach(function(elem){//监听每个属性
   Object.defineProperty(that, elem, {
    enumerable: true,
    configurable: true,
    get: function(){
     return that._data[elem];
    },
    set: function(newVal){
     that._data[elem] = newVal;
     that.update();//数据变化，更新页面
    }
   });
   that[elem] = data[elem];//初次进入改变that[elem]，从而触发update方法
  });
 }
};

好了，如果我们检测到数据变化了呢？

那么，我们就更新视图嘛。

但是，怎么更新呢？

简单的实现方式就是，在初次构建SimpleVue实例时，就将页面中的模板保存下来，每次实例数据一改变，就通过正则替换掉原始的模板，即双括号中的变量，如下：

SimpleVue.prototype = {
 //初始化SimpleVue实例时，就将原始模板保留
 getTemplate: function(){
  this.template = this.$el.innerHTML; 
 },
 //数据改变更新视图
 update: function(){
  var that = this,
   template = that.template,
   reg = /(.*?)\{\{(\w*)\}\}/g,
   result = '';
  result = template.replace(reg, function(rs, $1, $2){
   var val = that[$2] || '';
   return $1 + val;
  });
  this.$el.innerHTML = result;
  console.log('updated');
 }
};

好了，整合上述js代码，完整的SimpleVue如下：

function SimpleVue(obj){
 this.$el = document.querySelector(obj.el);
 this.$options = obj;
 this._data = Object.create(null);
 //入口
 this.init();
 obj = null;
};
SimpleVue.prototype = {
 constructor: SimpleVue,
 init: function(){
  this.getTemplate();
  this.watchData();
 },
 //初始化SimpleVue实例时，就将原始模板保留
 getTemplate: function(){
  this.template = this.$el.innerHTML; 
 },
 //监听data属性
 watchData: function(){
  var data = this.$options.data,//得到data对象
   keys = Object.keys(data),//data对象上全部的自身属性，返回数组
   that = this;
  keys.forEach(function(elem){//监听每个属性
   Object.defineProperty(that, elem, {
    enumerable: true,
    configurable: true,
    get: function(){
     return that._data[elem];
    },
    set: function(newVal){
     that._data[elem] = newVal;
     that.update();//数据变化，更新页面
    }
   });
   that[elem] = data[elem];
  });
 },
 //数据改变更新视图
 update: function(){
  var that = this,
   template = that.template,
   reg = /(.*?)\{\{(\w*)\}\}/g,
   result = '';
  result = template.replace(reg, function(rs, $1, $2){
   var val = that[$2] || '';
   return $1 + val;
  });
  this.$el.innerHTML = result;
  console.log('updated');
 }
};

测试代码如下：

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
</head>
 <body>
  <div id="test">
   <div>{{name}}</div>
  </div>
  <script src="./SimpleVue.js"></script>
  <script>
   var vm = new SimpleVue({
    el: '#test',
    data: {
     name: 'Monkey'
    }
   });
  </script>  
 </body>
</html>

效果如下：

Vue数据驱动模拟实现1

三、优化

上述实现效果，还不错哦。

但是，我们走读下上述代码，感觉还可以优化下。

（1）、在watchData方法中监听每个data属性时，如果我们设置相同值，页面也会更新的，因为set是监听赋值的，它又不知道是不是同一个值，因此，优化如下：

Vue数据驱动模拟实现1

（2）、在上述基础，我们加入了新旧值判断，但是如果我们频繁更新data属性呢？那么也就会频繁调用update方法。例如，当我们给vm.name同时赋值两个值时，页面就会更新两次，如下：

Vue数据驱动模拟实现1

怎么解决呢？

利用节流，即可：

SimpleVue.throttle = function(method, context, delay){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 }, delay);
};

好了，将优化点整合到原有代码中，得下:

function SimpleVue(obj){
 this.$el = document.querySelector(obj.el);
 this.$options = obj;
 this._data = Object.create(null);
 this.init();
 obj = null;
};
SimpleVue.throttle = function(method, context, delay){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 }, delay);
};
SimpleVue.prototype = {
 constructor: SimpleVue,
 init: function(){
  this.getTemplate();
  this.watchData();
 },
 getTemplate: function(){
  this.template = this.$el.innerHTML; 
 },
 watchData: function(){
  var data = this.$options.data,
   keys = Object.keys(data),
   that = this;
  keys.forEach(function(elem){
   Object.defineProperty(that, elem, {
    enumerable: true,
    configurable: true,
    get: function(){
     return that._data[elem];
    },
    set: function(newVal){
     var oldVal = that[elem];
     if(oldVal === newVal){
      return;
     }
     that._data[elem] = newVal;
     SimpleVue.throttle(that.update, that, 50);
    }
   });
   that[elem] = data[elem];
  });
 },
 update: function(){
  var that = this,
   template = that.template,
   reg = /(.*?)\{\{(\w*)\}\}/g,
   result = '';
  result = template.replace(reg, function(rs, $1, $2){
   var val = that[$2] || '';
   return $1 + val;
  });
  this.$el.innerHTML = result;
  console.log('updated');
 }
};

且，为了让我们使用更加方便，我们可以在上述代码基础上，加入一个created钩子（当然，你可以加入更多），完整代码见github。

好了，简单的数据驱动，我们算 实现了，也优化了，但，其实上述简易版Vue有很多问题，例如：

1）、监听的属性是个对象呢？且对象里又有其他属性，不就监听不成功了么？如下：

Vue数据驱动模拟实现1

2）、通过上述1）介绍，如果监听的属性是个对象，那么又该如何渲染DOM呢？

3）、渲染DOM我们采用的是innerHTML，那么随着DOM的扩大，性能显而易见，又该如何解决？

等等问题，我们将在后续随笔通过精读源码，一步一步完善。

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

Vue数据驱动模拟实现1

- Author -

猴子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 #Javascript
详解js前端代码异常监控
Jan 11 #Javascript
Vue数据驱动模拟实现3
Jan 11 #Javascript
jQuery实现判断控件是否显示的方法
Jan 11 #Javascript
jQuery Form表单取值的方法
Jan 11 #Javascript
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
Jan 11 #Javascript
浅谈JavaScript中promise的使用
Jan 11 #Javascript
sout(1) csgo(1) 403(1) macos(1) 404(1) Sentry(1) CAD(1) svg(1) xps(1) Sunmao(1)
You might like
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python切片知识解析
2016/03/06 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
人力资源专业推荐信
2013/11/29 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
实战Python爬虫爬取酷我音乐
2022/04/11 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL