欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)1

 更新時(shí)間：2017年01月11日 09:43:52   作者：猴子  
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，允許采用簡(jiǎn)潔的模板語(yǔ)法聲明式的將數(shù)據(jù)渲染進(jìn)DOM，且數(shù)據(jù)與DOM綁定在一起，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、前言

Vue有一核心就是數(shù)據(jù)驅(qū)動(dòng)（Data Driven），允許我們采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn)DOM，且數(shù)據(jù)與DOM是綁定在一起的，這樣當(dāng)我們改變Vue實(shí)例的數(shù)據(jù)時(shí)，對(duì)應(yīng)的DOM元素也就會(huì)改變了。

如下：

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

當(dāng)我們?cè)赾hrome控制臺(tái)，更改vm.name時(shí)，頁(yè)面中的數(shù)據(jù)也隨之改變，但我們并沒(méi)有與DOM直接接觸，效果如下:

好了，今兒的核心就是模擬上述Demo中的數(shù)據(jù)驅(qū)動(dòng)。

二、模擬Vue之?dāng)?shù)據(jù)驅(qū)動(dòng)

通過(guò)粗淺地走讀Vue的源碼，發(fā)現(xiàn)達(dá)到這一效果的核心思路其實(shí)就是利用ES5的defineProperty方法，監(jiān)聽(tīng)data數(shù)據(jù)，如果數(shù)據(jù)改變，那么就對(duì)頁(yè)面做相關(guān)操作。

有了大體思路，那么我們就開(kāi)始一步一步實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的Vue數(shù)據(jù)驅(qū)動(dòng)吧，簡(jiǎn)稱(chēng)SimpleVue。

Vue實(shí)例的創(chuàng)建過(guò)程，如下：

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

因此，我們也依瓢畫(huà)葫蘆，構(gòu)建SimpleVue構(gòu)造函數(shù)如下：

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 
 }
};

接下來(lái)，我們?cè)赟impleVue原型上編寫(xiě)一個(gè)watchData方法，通過(guò)利用ES5原生的defineProperty方法，監(jiān)聽(tīng)data中的屬性，如果屬性值改變，那么我們就進(jìn)行相關(guān)的頁(yè)面處理。

如下：

SimpleVue.prototype = {
 //監(jiān)聽(tīng)data屬性
 watchData: function(){
  var data = this.$options.data,//得到data對(duì)象
   keys = Object.keys(data),//data對(duì)象上全部的自身屬性，返回?cái)?shù)組
   that = this;
  keys.forEach(function(elem){//監(jiān)聽(tīng)每個(gè)屬性
   Object.defineProperty(that, elem, {
    enumerable: true,
    configurable: true,
    get: function(){
     return that._data[elem];
    },
    set: function(newVal){
     that._data[elem] = newVal;
     that.update();//數(shù)據(jù)變化，更新頁(yè)面
    }
   });
   that[elem] = data[elem];//初次進(jìn)入改變that[elem]，從而觸發(fā)update方法
  });
 }
};

好了，如果我們檢測(cè)到數(shù)據(jù)變化了呢？

那么，我們就更新視圖嘛。

但是，怎么更新呢？

簡(jiǎn)單的實(shí)現(xiàn)方式就是，在初次構(gòu)建SimpleVue實(shí)例時(shí)，就將頁(yè)面中的模板保存下來(lái)，每次實(shí)例數(shù)據(jù)一改變，就通過(guò)正則替換掉原始的模板，即雙括號(hào)中的變量，如下：

SimpleVue.prototype = {
 //初始化SimpleVue實(shí)例時(shí)，就將原始模板保留
 getTemplate: function(){
  this.template = this.$el.innerHTML; 
 },
 //數(shù)據(jù)改變更新視圖
 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實(shí)例時(shí)，就將原始模板保留
 getTemplate: function(){
  this.template = this.$el.innerHTML; 
 },
 //監(jiān)聽(tīng)data屬性
 watchData: function(){
  var data = this.$options.data,//得到data對(duì)象
   keys = Object.keys(data),//data對(duì)象上全部的自身屬性，返回?cái)?shù)組
   that = this;
  keys.forEach(function(elem){//監(jiān)聽(tīng)每個(gè)屬性
   Object.defineProperty(that, elem, {
    enumerable: true,
    configurable: true,
    get: function(){
     return that._data[elem];
    },
    set: function(newVal){
     that._data[elem] = newVal;
     that.update();//數(shù)據(jù)變化，更新頁(yè)面
    }
   });
   that[elem] = data[elem];
  });
 },
 //數(shù)據(jù)改變更新視圖
 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');
 }
};

測(cè)試代碼如下：

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

效果如下：

三、優(yōu)化

上述實(shí)現(xiàn)效果，還不錯(cuò)哦。

但是，我們走讀下上述代碼，感覺(jué)還可以?xún)?yōu)化下。

（1）、在watchData方法中監(jiān)聽(tīng)每個(gè)data屬性時(shí)，如果我們?cè)O(shè)置相同值，頁(yè)面也會(huì)更新的，因?yàn)閟et是監(jiān)聽(tīng)賦值的，它又不知道是不是同一個(gè)值，因此，優(yōu)化如下：

（2）、在上述基礎(chǔ)，我們加入了新舊值判斷，但是如果我們頻繁更新data屬性呢？那么也就會(huì)頻繁調(diào)用update方法。例如，當(dāng)我們給vm.name同時(shí)賦值兩個(gè)值時(shí)，頁(yè)面就會(huì)更新兩次，如下：

怎么解決呢？

利用節(jié)流，即可：

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

好了，將優(yōu)化點(diǎn)整合到原有代碼中，得下:

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');
 }
};

且，為了讓我們使用更加方便，我們可以在上述代碼基礎(chǔ)上，加入一個(gè)created鉤子（當(dāng)然，你可以加入更多），完整代碼見(jiàn)github。

好了，簡(jiǎn)單的數(shù)據(jù)驅(qū)動(dòng)，我們算 實(shí)現(xiàn)了，也優(yōu)化了，但，其實(shí)上述簡(jiǎn)易版Vue有很多問(wèn)題，例如：

1）、監(jiān)聽(tīng)的屬性是個(gè)對(duì)象呢？且對(duì)象里又有其他屬性，不就監(jiān)聽(tīng)不成功了么？如下：

2）、通過(guò)上述1）介紹，如果監(jiān)聽(tīng)的屬性是個(gè)對(duì)象，那么又該如何渲染DOM呢？

3）、渲染DOM我們采用的是innerHTML，那么隨著DOM的擴(kuò)大，性能顯而易見(jiàn)，又該如何解決？

等等問(wèn)題，我們將在后續(xù)隨筆通過(guò)精讀源碼，一步一步完善。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論