angular与avalon对复杂对象的修改

angular与avalon对复杂对象的修改

angular的实现
<!doctype html> <html ng-app> <head> <script src="http://files.cnblogs.com/rubylouvre/angular.js"></script> <script> var a function TodoCtrl($scope) { $scope.aaa = { bbb: { ccc: "cccc" } } a = $scope } setTimeout(function() { a.aaa.bbb = { ccc: "angular" } alert("不会立即改变") a.$digest()//这个不能漏 }, 2000) </script> </head> <body> <div ng-controller="TodoCtrl"> {{aaa.bbb.ccc}} </div> </body> </html>

avalon的实现
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>avalon</title> <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js" type="text/javascript"></script> <script> var a = avalon.define("xxx", function(vm) { vm.aaa = { bbb: { ccc: "cccc" } } }) setTimeout(function() { a.aaa.bbb = { ccc: "avalon" } }, 2000) </script> </head> <body ms-controller="xxx"> {{aaa.bbb.ccc}} </body> </html>

从调用来看，angular由于不能直接使用setTimeout，需要hack一下，并且它并不够智能，需要你$digest。说明它本身没有对子对象的监控，只有用户手动$digest，它才匆匆忙忙把自己修改一遍，然后通知视图更新。

avalon则是一开始就把用户传来的东西改造一遍，它身上每一个毛孔（除非你将它设置为不可监控的）都转为监控属性，计算属性与监控数组，当数据发生改动时就立即调用视图刷新属性。对于这种深层套嵌的对象，如果是中间的对象发生变化，这准确来说被替换了，这个新的子对象也立即被改造，并且涉及它的那个元素会重新打回原形，重新被扫描，被绑定。
相关阅读:
vue 回到顶部效果实现
 C# rabbitmq 安装步骤以及使用方法
 Everspin MRAM常见问题解答
 带有ECC的异步SRAM存储器适用于各种应用
 MCU是控制电子产品的大脑
 全球MCU市场供需失衡情况愈发严重
 如何选择非易失性SRAM
SRAM VS DRAM
SoC上的内存
 EEPROM和FLASH在大多数应用场合中无法替代SRAM
原文地址：https://www.cnblogs.com/rubylouvre/p/3427507.html