日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript之實現(xiàn)一個簡單的Vue

vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內(nèi)部的原理是怎么樣的，今天我們就來一起實現(xiàn)一個簡單的vue。

創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、欽州網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為欽州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

Object.defineProperty()

實現(xiàn)之前我們得先看一下Object.defineProperty的實現(xiàn)，因為vue主要是通過數(shù)據(jù)劫持來實現(xiàn)的，通過get、set來完成數(shù)據(jù)的讀取和更新。

 
 
 
 
    
  
  
  
  
  1. var obj = {name:'wclimb'}  
    2.   
  
  
  
  2. var age = 24  
    3.   
  
  
  
  3. Object.defineProperty(obj,'age',{  
    4.   
  
  
  
  4.     enumerable: true, // 可枚舉  
    5.   
  
  
  
  5.     configurable: false, // 不能再define  
    6.   
  
  
  
  6.     get () {  
    7.   
  
  
  
  7.         return age  
    8.   
  
  
  
  8.     },  
    9.   
  
  
  
  9.     set (newVal) {  
    10.   
  
  
  
  10.         console.log('我改變了',age +' -> '+newVal);  
    11.   
  
  
  
  11.         age = newVal  
    12.   
  
  
  
  12.     }  
    13.   
  
  
  
  13. })  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. > obj.age  
    16.   
  
  
  
  16. > 24  
    17.   
  
  
  
  17. > obj.age = 25;  
    18.   
  
  
  
  18. > 我改變了 24 -> 25  
    19.   
  
  
  
  19. > 25  
    20.

從上面可以看到通過get獲取數(shù)據(jù)，通過set監(jiān)聽到數(shù)據(jù)變化執(zhí)行相應(yīng)操作，還是不明白的話可以去看看Object.defineProperty文檔。

流程圖

html代碼結(jié)構(gòu) 

 
 
 
 
    
  
  
  
  
  1.   
    2.   
  
  
  
  2.     
      
    3.   
  
  
  
  3.       
    4.   
  
  
  
  4.       
    5.   
  
  
  
  5.     改變值  
    6.   
  
  
  
  6.     {{form}}  
    7.
  

js調(diào)用    

 
 
 
 
    
  
  
  
  
  1. new Vue({  
    2.   
  
  
  
  2.         el: '#wrap',  
    3.   
  
  
  
  3.         data:{  
    4.   
  
  
  
  4.             form: '這是form的值',  
    5.   
  
  
  
  5.             test: '我是粗體',  
    6.   
  
  
  
  6.         },  
    7.   
  
  
  
  7.         methods:{  
    8.   
  
  
  
  8.             changeValue(){  
    9.   
  
  
  
  9.                 console.log(this.form)  
    10.   
  
  
  
  10.                 this.form = '值被我改變了，氣不氣？'  
    11.   
  
  
  
  11.             }  
    12.   
  
  
  
  12.         }  
    13.   
  
  
  
  13.     })  
    14.

Vue結(jié)構(gòu)    

 
 
 
 
    
  
  
  
  
  1. class Vue{  
    2.   
  
  
  
  2.         constructor(){}  
    3.   
  
  
  
  3.         proxyData(){}  
    4.   
  
  
  
  4.         observer(){} 
    5.   
  
  
  
  5.         compile(){} 
    6.   
  
  
  
  6.         compileText(){} 
    7.   
  
  
  
  7.     }  
    8.   
  
  
  
  8.     class Watcher{  
    9.   
  
  
  
  9.         constructor(){}  
    10.   
  
  
  
  10.         update(){}  
    11.   
  
  
  
  11.     }  
    12.
  • Vue constructor 構(gòu)造函數(shù)主要是數(shù)據(jù)的初始化
  • proxyData 數(shù)據(jù)代理
  • observer 劫持監(jiān)聽所有數(shù)據(jù)
  • compile 解析dom
  • compileText 解析dom里處理純雙花括號的操作
  • Watcher 更新視圖操作

Vue constructor 初始化   

 
 
 
 
    
  
  
  
  
  1. class Vue{  
    2.   
  
  
  
  2.        constructor(options = {}){  
    3.   
  
  
  
  3.            this.$el = document.querySelector(options.el);  
    4.   
  
  
  
  4.            let data = this.data = options.data;   
    5.   
  
  
  
  5.            // 代理data，使其能直接this.xxx的方式訪問data，正常的話需要this.data.xxx  
    6.   
  
  
  
  6.            Object.keys(data).forEach((key)=> {  
    7.   
  
  
  
  7.                this.proxyData(key);  
    8.   
  
  
  
  8.            });  
    9.   
  
  
  
  9.            this.methods = obj.methods // 事件方法  
    10.   
  
  
  
  10.            this.watcherTask = {}; // 需要監(jiān)聽的任務(wù)列表  
    11.   
  
  
  
  11.            this.observer(data); // 初始化劫持監(jiān)聽所有數(shù)據(jù)  
    12.   
  
  
  
  12.            this.compile(this.$el); // 解析dom  
    13.   
  
  
  
  13.        }  
    14.   
  
  
  
  14.    }  
    15.

上面主要是初始化操作，針對傳過來的數(shù)據(jù)進(jìn)行處理

proxyData 代理data 

 
 
 
 
    
  
  
  
  
  1. class Vue{  
    2.   
  
  
  
  2.         constructor(options = {}){  
    3.   
  
  
  
  3.             ......  
    4.   
  
  
  
  4.         }  
    5.   
  
  
  
  5.         proxyData(key){  
    6.   
  
  
  
  6.             let that = this;  
    7.   
  
  
  
  7.             Object.defineProperty(that, key, {  
    8.   
  
  
  
  8.                 configurable: false,  
    9.   
  
  
  
  9.                 enumerable: true,  
    10.   
  
  
  
  10.                 get () {  
    11.   
  
  
  
  11.                     return that.data[key];  
    12.   
  
  
  
  12.                 },  
    13.   
  
  
  
  13.                 set (newVal) {  
    14.   
  
  
  
  14.                     that.data[key] = newVal;  
    15.   
  
  
  
  15.                 }  
    16.   
  
  
  
  16.             });  
    17.   
  
  
  
  17.         }  
    18.   
  
  
  
  18.     }  
    19.

上面主要是代理data到最上層，this.xxx的方式直接訪問data

observer 劫持監(jiān)聽 

 
 
 
 
    
  
  
  
  
  1. class Vue{  
    2.   
  
  
  
  2.         constructor(options = {}){  
    3.   
  
  
  
  3.             ......  
    4.   
  
  
  
  4.         }  
    5.   
  
  
  
  5.         proxyData(key){  
    6.   
  
  
  
  6.             ......  
    7.   
  
  
  
  7.         }  
    8.   
  
  
  
  8.         observer(data){  
    9.   
  
  
  
  9.             let that = this  
    10.   
  
  
  
  10.             Object.keys(data).forEach(key=>{  
    11.   
  
  
  
  11.                 let value = data[key]  
    12.   
  
  
  
  12.                 this.watcherTask[key] = []  
    13.   
  
  
  
  13.                 Object.defineProperty(data,key,{  
    14.   
  
  
  
  14.                     configurable: false,  
    15.   
  
  
  
  15.                     enumerable: true,  
    16.   
  
  
  
  16.                     get(){  
    17.   
  
  
  
  17.                         return value  
    18.   
  
  
  
  18.                     },  
    19.   
  
  
  
  19.                     set(newValue){  
    20.   
  
  
  
  20.                         if(newValue !== value){  
    21.   
  
  
  
  21.                             value = newValue  
    22.   
  
  
  
  22.                             that.watcherTask[key].forEach(task => {  
    23.   
  
  
  
  23.                                 task.update()  
    24.   
  
  
  
  24.                             })  
    25.   
  
  
  
  25.                         }  
    26.   
  
  
  
  26.                     }  
    27.   
  
  
  
  27.                 })  
    28.   
  
  
  
  28.             })  
    29.   
  
  
  
  29.         }  
    30.   
  
  
  
  30.     } 
    31.

同樣是使用Object.defineProperty來監(jiān)聽數(shù)據(jù)，初始化需要訂閱的數(shù)據(jù)。

把需要訂閱的數(shù)據(jù)到push到watcherTask里，等到時候需要更新的時候就可以批量更新數(shù)據(jù)了。??下面就是；

遍歷訂閱池，批量更新視圖。  

 
 
 
 
    
  
  
  
  
  1. set(newValue){  
    2.   
  
  
  
  2.         if(newValue !== value){  
    3.   
  
  
  
  3.             value = newValue  
    4.   
  
  
  
  4.             // 批量更新視圖  
    5.   
  
  
  
  5.             that.watcherTask[key].forEach(task => {  
    6.   
  
  
  
  6.                 task.update()  
    7.   
  
  
  
  7.             })  
    8.   
  
  
  
  8.         }  
    9.   
  
  
  
  9.     }              
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. compile 解析dom  
    12.   
  
  
  
  12. class Vue{  
    13.   
  
  
  
  13.         constructor(options = {}){  
    14.   
  
  
  
  14.             ......  
    15.   
  
  
  
  15.         }  
    16.   
  
  
  
  16.         proxyData(key){  
    17.   
  
  
  
  17.             ......  
    18.   
  
  
  
  18.         }  
    19.   
  
  
  
  19.         observer(data){  
    20.   
  
  
  
  20.             ......  
    21.   
  
  
  
  21.         }  
    22.   
  
  
  
  22.         compile(el){  
    23.   
  
  
  
  23.             var nodes = el.childNodes;  
    24.   
  
  
  
  24.             for (let i = 0; i < nodes.length; i++) {  
    25.   
  
  
  
  25.                 const node = nodes[i];  
    26.   
  
  
  
  26.                 if(node.nodeType === 3){  
    27.   
  
  
  
  27.                     var text = node.textContent.trim();  
    28.   
  
  
  
  28.                     if (!text) continue;  
    29.   
  
  
  
  29.                     this.compileText(node,'textContent')             
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.                 }else if(node.nodeType === 1){  
    32.   
  
  
  
  32.                     if(node.childNodes.length > 0){  
    33.   
  
  
  
  33.                         this.compile(node)  
    34.   
  
  
  
  34.                     }  
    35.   
  
  
  
  35.                     if(node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')){  
    36.   
  
  
  
  36.                         node.addEventListener('input',(()=>{  
    37.   
  
  
  
  37.                             let attrVal = node.getAttribute('v-model')  
    38.   
  
  
  
  38.                             this.watcherTask[attrVal].push(new Watcher(node,this,attrVal,'value'))  
    39.   
  
  
  
  39.                             node.removeAttribute('v-model')  
    40.   
  
  
  
  40.                             return () => {  
    41.   
  
  
  
  41.                                 this.data[attrVal] = node.value  
    42.   
  
  
  
  42.                             }  
    43.   
  
  
  
  43.                         })())  
    44.   
  
  
  
  44.                     }  
    45.   
  
  
  
  45.                     if(node.hasAttribute('v-html')){  
    46.   
  
  
  
  46.                         let attrVal = node.getAttribute('v-html');  
    47.   
  
  
  
  47.                         this.watcherTask[attrVal].push(new Watcher(node,this,attrVal,'innerHTML'))  
    48.   
  
  
  
  48.                         node.removeAttribute('v-html')  
    49.   
  
  
  
  49.                     }  
    50.   
  
  
  
  50.                     this.compileText(node,'innerHTML')  
    51.   
  
  
  
  51.                     if(node.hasAttribute('@click')){  
    52.   
  
  
  
  52.                         let attrVal = node.getAttribute('@click')  
    53.   
  
  
  
  53.                         node.removeAttribute('@click')  
    54.   
  
  
  
  54.                         node.addEventListener('click',e => {  
    55.   
  
  
  
  55.                             this.methods[attrVal] && this.methods[attrVal].bind(this)()  
    56.   
  
  
  
  56.                         })  
    57.   
  
  
  
  57.                     }  
    58.   
  
  
  
  58.                 }  
    59.   
  
  
  
  59.             }  
    60.   
  
  
  
  60.         },  
    61.   
  
  
  
  61.         compileText(node,type){ 
    62.   
  
  
  
  62.             let reg = /\{\{(.*)\}\}/g, txt = node.textContent;  
    63.   
  
  
  
  63.             if(reg.test(txt)){  
    64.   
  
  
  
  64.                 node.textContent = txt.replace(reg,(matched,value)=>{  
    65.   
  
  
  
  65.                     let tpl = this.watcherTask[value] || []  
    66.   
  
  
  
  66.                     tpl.push(new Watcher(node,this,value,type))  
    67.   
  
  
  
  67.                     return value.split('.').reduce((val, key) => {  
    68.   
  
  
  
  68.                         return this.data[key];   
    69.   
  
  
  
  69.                     }, this.$el);  
    70.   
  
  
  
  70.                 })  
    71.   
  
  
  
  71.             }  
    72.   
  
  
  
  72.         }  
    73.   
  
  
  
  73.     }  
    74.

這里代碼比較多，我們拆分看你就會覺得很簡單了

首先我們先遍歷el元素下面的所有子節(jié)點，node.nodeType === 3 的意思是當(dāng)前元素是文本節(jié)點，node.nodeType === 1 的意思是當(dāng)前元素是元素節(jié)點。因為可能有的是純文本的形式，如純雙花括號就是純文本的文本節(jié)點，然后通過判斷元素節(jié)點是否還存在子節(jié)點，如果有的話就遞歸調(diào)用compile方法。下面重頭戲來了，我們拆開看：

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

上面這個首先判斷node節(jié)點上是否有v-html這種指令，如果存在的話，我們就發(fā)布訂閱，怎么發(fā)布訂閱呢？只需要把當(dāng)前需要訂閱的數(shù)據(jù)push到watcherTask里面，然后到時候在設(shè)置值的時候就可以批量更新了，實現(xiàn)雙向數(shù)據(jù)綁定，也就是下面的操作

 
 
 
 
    
  
  
  
  
  1. that.watcherTask[key].forEach(task => {  
    2.   
  
  
  
  2.     task.update()  
    3.   
  
  
  
  3. })  
    4.

然后push的值是一個Watcher的實例，首先他new的時候會先執(zhí)行一次，執(zhí)行的操作就是去把純雙花括號 -> 1，也就是說把我們寫好的模板數(shù)據(jù)更新到模板視圖上。

***把當(dāng)前元素屬性剔除出去，我們用Vue的時候也是看不到這種指令的，不剔除也不影響

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

Watcher 

 
 
 
 
    
  
  
  
  
  1. that.watcherTask[key].forEach(task => {  
    2.   
  
  
  
  2.     task.update()  
    3.   
  
  
  
  3. })  
    4.

之前發(fā)布訂閱之后走了這里面的操作，意思就是把當(dāng)前元素如：node.innerHTML = '這是data里面的值'、node.value = '這個是表單的數(shù)據(jù)'

那么我們?yōu)槭裁床恢苯尤ジ履?，還需要update做什么，不是多此一舉嗎？

其實update記得嗎？我們在訂閱池里面需要批量更新，就是通過調(diào)用Watcher原型上的update方法。

效果

在線效果地址，大家可以瀏覽器看一下效果，由于本人太懶了，gif效果圖就先不放了，哈哈????

完整代碼

完整代碼已經(jīng)放到github上了 -> MyVue

【責(zé)任編輯：龐桂玉 TEL：（010）68476606】


當(dāng)前文章：JavaScript之實現(xiàn)一個簡單的Vue
標(biāo)題來源：http://www.dlmjj.cn/article/cospsoi.html