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则是一开始就把用户传来的东西改造一遍,它身上每一个毛孔(除非你将它设置为不可监控的)都转为监控属性,计算属性与监控数组,当数据发生改动时就立即调用视图刷新属性。对于这种深层套嵌的对象,如果是中间的对象发生变化,这准确来说被替换了,这个新的子对象也立即被改造,并且涉及它的那个元素会重新打回原形,重新被扫描,被绑定。

angular与avalon对复杂对象的修改的更多相关文章

  1. sql server 查看对象最后修改时间

    sql server 查看对象最后修改时间,根据最后修改时间排序 存储过程 SELECT * FROM sys.all_objects WHERE  TYPE='P' ORDER BY modify_ ...

  2. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  3. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  4. java 记录对象前后修改的内容(工具类)

    有时候业务需要,需记录一条记录的修改历史,但是不能为完成任务而硬编码,不靠谱 这种情况可以使用java反射来完成 对对象属性的描述可以通过自定义注解来完成,读取里面的属性进而记录修改历史. 在对象的属 ...

  5. js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    我最近在做一个vue + element-UI + vue-resource + vuex项目的时候,遇到了一个对象的问题. 当我们在项目需要 复制一个对象到另一个对象并且  被复制的对象不能受复制后 ...

  6. 微信小程序中如何使用setData --- 修改数组对象、修改对象

    看代码吧~ 这是修改对象 this.setData({ allStageIndex: e.detail.value, [`projectDetailsData.stage`]: this.data.a ...

  7. Angular的Observable可观察对象(转)

    原文:https://blog.csdn.net/qq_34414916/article/details/85194098 Observable 在开始讲服务之前,我们先来看一下一个新东西——Obse ...

  8. vue A对象赋值给B对象,修改B属性会影响到A问题

    实际在vue中  this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B. 解决相互影响的思路是在this.A必须是新建的 ...

  9. Angular JS - 4 - Angular JS 作用域与控制器对象

    1. 控制器对象使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. New Concept English three (27)

    35w/m 67 It has been said that everyone lives by selling something. In the light of this statement, ...

  2. Kivy: Building GUI and Mobile apps with Python

    Intro Python library for building gui apps (think qt, gdk,processing) build from ground up for lates ...

  3. 机器学习(八)—Apriori算法

    摘要:本文对Apriori算法进行了简单介绍,并通过Python进行实现,进而结合UCI数据库中的肋形蘑菇数据集对算法进行验证. “啤酒与尿布”的例子相信很多人都听说过吧,故事是这样的:在一家超市中, ...

  4. 记一次诡异的网络故障排除 - tpc_tw_recycle参数引起的网络故障

    一.故障现象 我们团队访问腾讯云上部署的测试环境中的Web系统A时,偶尔会出现类似于网络闪断的情况,浏览器卡很久没有反应,最终报Connection Timeout. 不过奇怪的是,当团队中的某个人无 ...

  5. Linux系统中的wc

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...

  6. TCP/IP网络协议攻击

    kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 这部分涉及: ARP缓存欺骗攻击 ICMP重定向攻击 SYN FLOOD ...

  7. Bellman-Ford算法——解决负权边

    Dijkstra算法虽然好,但是它不能解决带有负权边(边的权值为负数)的图. 接下来学习一种无论在思想上还是在代码实现上都可以称为完美的最短路径算法:Bellman-Ford算法. Bellman-F ...

  8. CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\....\App_Web_default.aspx.cdcab7d2.zii776dc.dll”--“拒绝访问。 ”

    关于访问asp.net站点出现以下问题的解决办法: 问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Tempora ...

  9. 洛谷 P1930 亚瑟王的宫殿 Camelot

    传送门 题目大意:棋盘有骑士有王,让所有点跳到一个点,求所有棋子跳的步数和,和最小. 题解:bfs+枚举 王的人生: 1):自己走到聚集点 2):某个骑士来到王这里,两个棋子一起到聚集点 3):王走几 ...

  10. 洛谷 P2626 斐波那契数列(升级版)

    题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ 2 且 n 为整数). 题目描述 ...