日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

在開發(fā)期間，我們還花費了將近兩周的時間對現(xiàn)在非常流行的react及react-native進行了詳細的技術(shù)調(diào)研，我不得不說，react的開發(fā)效率是我目前所見最快速的框架，他的模塊化開發(fā)思路，虛擬dom的理念都是我非常喜歡的一種方式，并且我們嘗試了將它合并進slarkjs框架，開始我們只希望讓它來負責view層的重繪工作，但是在實踐中我們其實更希望它能負責更多的內(nèi)容，可惜的是，react來web層面的使用，還有一定局限性，并且需要大量的開發(fā)時間來修改一些組件，很遺憾我們暫時停滯了這個項目的開發(fā)進度，但react-native在app上的開發(fā)，卻是一個潛能***的壯舉，在之后的文章中，我們會持續(xù)的給大家?guī)韘larkjs框架是如何吸收react-native并融入到app的開發(fā)?，F(xiàn)在我們先回到domdiff的思路邏輯中。首先，我們在構(gòu)建domdiff中，想法是很簡單的，

1.    我們需要它來接收2個參數(shù)，1.現(xiàn)在頁面上的節(jié)點，2.我們需要讓它變成什么樣子。

 
 
  
  
var domdiff = function(oldid,newid) { 
  
  
        var a1 = document.getElementById(oldid); 
  
  
        var a2 = document.getElementById(newid); 
  
  
        var dd = new diffDOM(); 
  
  
        dd.apply(a2, dd.diff(a2, a1)); 
  
  
    }; 
  
  
var tdomdiff = function(oldid,newid) { 
  
  
        var a2 = document.getElementById(oldid); 
  
  
        var a3 = document.createElement('div');  
  
  
        a3.innerHTML = newid; 
  
  
        var dd = new diffDOM(); 
  
  
        dd.apply(a2, dd.diff(a2, a3)); 
  
  
    }; 
 

2.    我們需要它來對2個參數(shù)進行數(shù)據(jù)對比，并放回一個list，里面包含最少量級的dom操作

 
 
  
  
if (!tree1 || !tree2) { 
  
  
           return false; 
  
  
       } 
  
  
       if (tree1.nodeType !== tree2.nodeType) { 
  
  
           return false; 
  
  
       } 
  
  
       if (tree1.nodeType === 3) { 
  
  
           if (tree2.nodeType !== 3) { 
  
  
               return false; 
  
  
           } 
  
  
return preventRecursion ? true : tree1.data === tree2.data; 
  
  
       } 
  
  
       if (tree1.nodeName !== tree2.nodeName) { 
  
  
           return false; 
  
  
       } 
  
  
       if (tree1.tagName === tree2.tagName) { 
  
  
           .... 
  
  
       } 
  
  
       if (tree1.childNodes.length !== tree2.childNodes.length) { 
  
  
           return false; 
  
  
       } 
 

3.    去實現(xiàn)list

 
 
  
  
Object.keys(options).forEach(function(t) { 
  
  
    diff[t] = options[t]; 
  
  
    }); 
 

從開發(fā)的角度來講，1,3都非常好實現(xiàn)，而第二步，會讓大多數(shù)的前端開發(fā)覺得頭疼，這時候我們需要介紹兩個很容易被遺忘，并且不會經(jīng)常用到的屬性nodeTpye和childNodes，其實JS有很多屬性我們是很少會用到或者說，在我們的業(yè)務開發(fā)中和技術(shù)實現(xiàn)中很少去涉及的，相對來說，這也影響了我們對更深入的技術(shù)開發(fā)的方向，所以很多時候，我們提倡去看一些開發(fā)大拿的代碼，其實是去看他們都用到了哪些屬性，他們的開發(fā)邏輯思維，而并不是去copy他們的代碼。

NodeType，它會讓我們獲得body元素的節(jié)點類型。說得簡單一些，就是讓我們知道當前節(jié)點是元素，屬性，文本內(nèi)容等等

ChildNodes會讓我們獲得body元素的子節(jié)點集合，以NodeList對象。簡單解釋就是返回一個list，里面是當前節(jié)點下所有的子節(jié)點，包括class，文本，select,option等等。

之后就很好去分析我們的構(gòu)想了，通過NodeType去獲取節(jié)點并判斷節(jié)點屬性，當然還要去判斷當前頁面的節(jié)點是否唯一，然后通過ChildNodes去對比節(jié)點下屬性之間的差異，并且需要增加一些屬性作為標記，比如判斷當前是否應該修改，修改的順序等等。OK，說干就干，于是我們有了以下這個邏輯圖

(點擊圖片查看大圖)

    我們在diff中傳建了一個空的list數(shù)組，然后將2個nodeType傳到finddiff中，finddiff會做兩件事情，在finddiff-out中判斷在body中是否唯一，然后分離其中的數(shù)據(jù)并在list中增加***個修改項，也就是最外層的修改項。然后再Finddiff-inner中通過ChildNodes分析內(nèi)部結(jié)構(gòu)，并且循環(huán)去判斷2組數(shù)據(jù)中是否重疊，這里有個小問題，就是你需要用用距離值去填充匹配獲相同的內(nèi)容量，舉個例子：

 
 
  
  
   
  
1
   
  
2
   
  
3
   
  
4
   
  
 
 

而我們想把它變成這樣

 
 
  
  
   
  
1
   
  
5
   
  
6
   
  
3
   
  
4
   
  
 
 

如果你僅僅是去循環(huán)判斷重復，那你會在第二步的時候，將5變成2，第三步將6變成3，這樣是一個很浪費資源的，所以我們需要用距離值去填充，當我們用新數(shù)據(jù)去循環(huán)的時候，我們需要在***次循環(huán)中判斷參數(shù)是否重復，對重復的參數(shù)判斷修改值為false，再第二次循環(huán)中對非重復的參數(shù)用距離值去填充數(shù)據(jù)，***得出最簡單的list來覆蓋。

這樣的方式，減少了頁面對dom的操作次數(shù)，提升頁面的加載速率和二次加載速率，但是也是有一些坑的，比如：如果頁面dom修改量巨大，在循環(huán)中會浪費非常多的時間去循環(huán)判斷重復項，可能會比單獨替換整體dom節(jié)點花費更多的時間，所以在domdiff中，需要增加一些判斷，去適應大多數(shù)的方式。比如：減少循環(huán)，如果只是單純的文本替換，我們并不需要去循環(huán)判斷它的其他屬性，又或者增加閥值，如果運行時間或者數(shù)據(jù)量超過標準時間進行部分的dom替換，這些都是組件級對代碼的嚴謹性。

結(jié)尾，domdiff其實是為了瀏覽器的優(yōu)化而做，但是也要適應當前的環(huán)境而用，它更像是react虛擬dom理念的前身，有好處也有壞處，使用時候還需謹慎，我們會在今后的1,2個月中，對react-native進行詳細的分析，并且嘗試去融入到我們的框架中，也許會打出分支版，slarkjs-native來支持app的開發(fā)，到時候會給大家繼續(xù)分享進一步的技術(shù)體驗，希望對h5比較有興趣的童靴可以加入到我們的team中，體驗既擁有Native的用戶體驗、又保留React的開發(fā)效率。

參考文獻

http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

http://www.w3school.com.cn/jsref/prop_node_childnodes.asp

https://github.com/Seven-wang/react

作者簡介  
王海濱 ，8年互聯(lián)網(wǎng)前端開發(fā)，任職過中演票務通等互聯(lián)網(wǎng)電商平臺，14年就任藝龍網(wǎng)前端框架組開發(fā)工程師，負責藝龍網(wǎng)前端框架開發(fā)。