实现前端资源增量式更新的一种思路

// { count: 3, value: 'ccc' } ]

膳绫擎的 diff 信息略有些冗余，我们可以自定义一种更简洁的表示办法来加快传输的速度：

[3, "-3", "+ggg", 3]

整数代表无变更的字符数量，“-”开首的字符串代表被移除的字符数量，“+”开首的字符串代表新参加的字符。所以我们可以写一个 minimizeDiffInfo 函数：

function minimizeDiffInfo(originalInfo){ 
 
    var result = originalInfo.map(info => { 
 
        if(info.added){ 
 
            return '+' + info.value; 
 
        } 
 
        if(info.removed){ 
 
            return '-' + info.count; 
 
        } 
 
        return info.count; 
 
    }); 
 
    return JSON.stringify(result); 
 
} 
 
  
 
var diffInfo = [ 
 
    { count: 3, value: 'aaa' }, 
 
    { count: 3, added: undefined, removed: true, value: 'bbb' }, 
 
    { count: 3, added: true, removed: undefined, value: 'ggg' }, 
 
    { count: 3, value: 'ccc' } 
 
]; 
 
minimizeDiffInfo(diffInfo); 
 
//=> '[3, "-3", "+ggg", 3]'

用户端接收到精简之后的 diff 信息，生成最新的资本：

mergeDiff('aaabbbccc', '[3, "-3", "+ggg", 3]'); 
 
//=> 'aaagggccc' 
 
  
 
function mergeDiff(oldString, diffInfo){ 	
			 2/4   首页 上一页 1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　微软Azure再升级，为无服务器事件而生的Event Grid
            【51CTO晃荡】8.26 带你与清华大年夜学、搜狗、京东大年夜咖们一路商量基于算法的IT运维实践Azure事宜应用办法【51CTO.com快译】微软Event  Grid无疑是对无办事器选项的一大年夜重要弥补，可供给一套可>>>详细阅读


本文标题：实现前端资源增量式更新的一种思路
地址：http://www.17bianji.com/lsqh/36926.html
 1/2    1