avalon如何在兼容ie的状况下作到双向绑定呢？

avalon能够兼容到ie6，貌似它的双向绑定是和vue同样用object的set和get实现的，那是如何实现兼容呢？还有一个问题，angular用了许多object对象的方法才不兼容ie的么，那么angular当初为何不作兼容呢？脏检查机制彻底能够作到兼容。或者说有什么技术使ng很难兼容呢？

 

 

 

https://www.zhihu.com/question/42001493?sort=created

司徒正美

JavaScript 话题的优秀回答者

112 人赞同了该回答

avalon兼容IE6其实没有大家想象的那么困难，主要是知识面上的差别。

像我掌握js, ruby, python, vbscript等多种脚本语言的前提下，一些认为非夷所思的思路其实对我来讲也不是什么大事。

退一步说，avalon的各个版本实现双向绑定也不尽然。

avalon1.4.*与1.5.*是使用动态收集依赖，这是从knockout那里学来的。

js语句针对于 ＝ 号，有两种用法

赋值语句， obj.a = 1

取值语句，var b = obj.a

我要作的是就是劫持了这个等号，让它在取值时进行依赖收集，赋值时进行视图更新。这在其余语言中，有settter,getter可用，而在前端，只有IE8只以用set,get语句，Object.defineProperty只能用于元素节点。只有到了IE9及其余高版本W3C浏览器，这个Object.defineProperty才能让我大胆使用。幸亏的是，W3C浏览器早就有__defineSetter__,defineGetter__可用。

问题就是IE6－8，我稍微动用了VBScript。 用到VBScript的代码也不超过100行。固然这对于不懂VBScript的人多是很难的。所以博学是有好处，能拓展你的思惟与门路。

其余要兼容IE的处理，比较事件绑定要用attachEvent, dettachEvent啊，监听元素的value值变化要用propertychange事件啊，IE的NodeList不能用Array.property.slice.call来转化啊，这些都有现成方案，兼容起来一点难度也没有，而且合起来也不超过500行代码。

在avalon1.5，我还学习angular那样使用静态分析进行依赖收集，到avalon1.6这个技术已经研习得差很少，到avalon2，因为大量使用虚拟DOM技术与单纯的静态分析依赖，vm就更加轻量，源码里也不多操做DOM了。

只要不怎么操做DOM，针对IE的hack也用得不多，反而，为了性能，avalon是动用了大量的新API，这些HTML5 API所占比例是其余MVVM框架没法比拟的。

所以不要总盯着avalon兼容IE6 的方面，就算是兼容了IE6，avalon1.4.7.2的5893行代码，也比小而美的vue的9820行代码, angular的30248行代码， 只专一视图的react的2W行代码（此外你一般还要加上1W5K行的JSX转换器， redux才能用于生产环境） ，emberjs的5W8K行代码， 精简多了！

 

貘吃馍香

北京碎催，胡同串子，说话痞，圣母婊请勿近

15 人赞同了该回答

路过
恰好以前跟教主扯淡时候说过这个
并写了个大体例子
现成可用不费脑子就来答下

主要是用 Object.defineProperty 就能够搞了
可是对于老版本 IE 这玩意没有
就用VBS来搞了
（这是听正美说的，他的 avalon 我没看过也没用过……）
基本上老的快入土前端的估计到这就明白了

原理很简单
VBS 的 Class 中成员对象能够 Get 和 Set
VBS 的变量值在老 IE 中又能够和 JScript 互通
因此应该是用 VBS 构建 Class 并实例化返回结果就好
并且 IE 的 execScript 函数能够根据语言类型动态运行 code
就能作到动态构建 VBS 代码执行并拿到返回结果
核心原理大体以下：

var code = '' + 'Class MyObject\n' + ' Private px \n' + ' Sub Class_Initialize()\n' + ' px = 1\n' + ' End Sub\n' + ' Public Property Get x\n' + ' alert("Get Value is:" & px)\n' + ' End Property\n' + ' Public Property Let x(nx)\n' + ' alert("Set Value is:" & nx)\n' + ' px = nx\n' + ' End Property\n' + 'End Class\n' + 'Dim obj\n' + 'Set obj = New MyObject'; execScript(code, 'vbscript'); obj.x; obj.x = 2;

此时 JS 的 obj 对象成员 x
在 set get 时候均可以有 alert hook 的调用

固然
angular 没跟 avalon 同样这么搞是由于
它们压根没有兼容老 IE 的需求

毕竟国外市场IE6这等老古董早就入土了