資料狀態更新時的差異diff及patch機制

因為使用了virtual dom，vue.js 具有了跨平台能力

virtual dom只是js物件，是如何呼叫不同平台的 api 的？

const nodeops =  else if(platform === 'web') 

},parentnode() ,
removechild() ,
nextsibling() ,
insertbefore() 
}

function insert(parent, elm, ref) 

} else }}

function createelm(vnode, parentelm, refelm)  else 

}

function addvnodes(parentelm, refelm, vnodes, startidx, endidx) 

}

function removenode(el) 

}

function removevnodes(parentelm, vnodes, startidx, endidx) }}

用diff演算法可以比對出兩棵樹的差異

4.2 patch 的過程

function patch(oldvnode, vnode, parentelm)  else if(!vnode)  else  else }}

1. 在 oldvnode 不存在時

if(!oldvnode)

2. 在 vnode（新vnode節點）不存在時

else if(!vnode)

3. 當 oldvnode 與 vnode 都存在時

if(samevnode(oldvnode, vnode))  else

function samevnode() 

function sameinputtype(a, b) 

function patchvnode(oldvnode, vnode) 

if(vnode.text) 
if(oldch && ch && (oldch !== ch)) else if(ch) else if(oldch) else if(oldvnode.text) 
}

6.1 在新舊 vnode 節點相同時，直接 return

if(oldvnode === vnode) return

6.2 當新舊 vnode 節點都是 isstatic（靜態的），並且 key相同時

if(vnode.isstatic && oldvnode.isstatic && vnode.key === oldvnode.key)

6.3 當新 vnode 節點是文字節點時，直接用settextcontent來設定text--nodeops是適配層

if(vnode.text)

6.4 當新 vnode 節點是非文字節點時

if(oldch && ch && (oldch !== ch))  else if(ch)  else if(oldch)  else if(oldvnode.text)

7.1 定義新舊節點兩邊的索引：oldstartidx、newstartidx、oldendidx、newendidx

7.2 while迴圈：oldstartidx、newstartidx、oldendidx、newendidx會逐漸向中間靠攏

1 當oldstartvnode或者oldendvnode不存在時，oldstartidx與oldendidx繼續向中間靠攏，並更新對應的oldstartvnode與oldendvnode的指向

2 將oldstartidx、newstartidx、oldendidx、newendidx兩兩比對的過程

一共會出現2*2=4種情況

3 其他情況下

7.3 當 while 迴圈結束後，如果oldstartidx>oldendidx，呼叫addvnodes將新節點多的節點插入

7.4 如果滿足newstartidx>newendidx，呼叫removevnodes將多的舊節點批量刪除

function updatechildren(parentelm, oldch, newch)  else if(!oldendvnode)  else if(samevnode(oldstartvnode, newstartvnode))  else if(samevnode(oldendvnode, newendvnode))  else if(samevnode(oldstartvnode, newendvnode))  else if(samevnode(oldendvnode, newstartvnode))  else  else  else }}

}if(oldstartidx > oldendidx) else if(newstartidx > newendidx) 
}// 產生key與index索引對應的乙個map表
/** * [
* ,
* ,
* 
* ]* */
createkeytooldidx(children, beginidx, endidx) ;
for(i = beginidx; i <= endidx; ++i) 
return map;
}

linux中配置檔案的差異比較及補丁更新

利用diff可以表兩個檔案之間的差異，並且是以行為單位來進行的，一般用在同乙個檔案或者軟體的新舊版本差異上，例如，假如我們要將 etc passwd 處理為乙個新版本，處理的方式的 刪除第四行，將第六行替換為 no six exist 新的檔案放在tmp test 裡邊 接下裡看下diff的用法 p...

資料互動時狀態碼的意義

http 錯誤 400 400 請求出錯 由於語法格式有誤，伺服器無法理解此請求。不作修改，客戶程式就無法重複此請求。http 錯誤 401 401.1 未授權 登入失敗 此錯誤表明傳輸給伺服器的證書與登入伺服器所需的證書不匹配。401.2 未授權 伺服器的配置導致登入失敗 此錯誤表明傳輸給伺服器的...

VB與Excel在乘冪運算時的結果差異及其不合理性

表示式解析是程式設計工具與電子 等軟體最基本的功能之一，不同的軟體在解析表示式時都遵循一定的運算規則，在不同軟體中，這些運算規則略有差異，導致計算結果也不同。筆者在實踐中發現，vb與 excel 在處理 連續乘冪 這一常見運算時，所遵循的法則有著較大的出入，而且都存在著不合理的因素。本文試圖通過論述...