更新时间:2022-09-13 20:38:41
首先我们看avalon能帮你做什么?
有了avalon,做登录后无缝刷新页面这样操作毫无压力
回顾到我们最开始的3个问题:
由此可见在扫描绑定所匹配方法中就实现了,事件,dom,view,model,m等双向绑定的最终操作
<p>First name: <input ms-model="firstName" /></p>
如图以input的 ms-model绑定为例
分解后
modelBinding.INPUT = function(element, fn, scope) {
//当value变化时改变model的值
var updateModel = function() {
//data-observe="false" 跳过处理
if (god.data("observe") !== false) {
fn(scope, element.value);
}
};
//当model变化时,它就会改变value的值
var updateView = function() { //先执行updateView
var neo = fn(scope);
if (neo !== element.value) {
//更新节点元素值
element.value = neo;
}
};
element.addEventListener("input", updateModel, false); //绑定事件
Publish[expose] = updateView;
updateView.element = element;
updateView();
delete Publish[expose];
}
仔细观察:
提供2个处理方法,一个事件绑定,还有一堆不知名的东东(这里不考虑兼容问题)
具体简单介绍下 : 以后会有详细的源码分析
Publish[expose]这是个临时的收集东东,用来处理依赖关系, 比如说
<p>First name: <input ms-model="firstName" /></p> 定义 firstName 监控属性
<div>{{firstName +" | "+ lastName }}</div> 关联依赖 这里又关联
定义的HTML结构
<p>First name: <input ms-model="firstName" /></p>
通过updateView
变成了
<p>First name: 正妹</p>
还有文本扫描,基本类似这样一下来所有M中定义的数据就给替换到了view了,并且绑定好事件及处理的回调方法,OK.以上是静态的时候处理的流程.
然后用户交互的时候:
用户比如在input中输入:
在开始扫描的时候呢element.addEventListener("input", updateModel, false); //绑定事件
这个input元素就已经在后台给绑定好事件了
所以用户输入就等于直接执行了updateModel回调
方法分解:
fn(scope, element.value); 就处理一个回调方法
fn回调处理方法中包含了一堆的依赖关系
var fn = Function("scope", "value",
"if(arguments.length === 1){" +
";return scope." + name + "" +
" }else{" +
" scope." + name + " = value;" +
" }");
fn 是一个new Function方法
fn 内部的实参数值有2个
fn 提供修改与设置
*重点
scope.name 与 scope.name = value; 都是从scrope(vm模型中获取)
vm模型是被转换过的对象,对属性的操作都会调用set get方法也就是,当然这个地方有点绕
//生成defineProperties需要的配置属性
Descriptions[name] = {
set: accessor,
get: accessor,
enumerable: true
};
简单的来说,给模型中的属性(赋值或者取值)就会调用accessor方法,而不是简简单单的赋值操作(请注意!)
所以在执行accessor我们可以看到这样一堆东西
看到了吧 $1371537226241就是收集的依赖列表
所以我们在直接这个方法的时候,依赖的东东也会一并执行,达到同步多个view的目的
整个流程大概就是这样允许运作的,当然这只会是简单的流程
实际上的代码还有很多“精巧”的设计,值的学习!
以后会逐步一一分析.
MVVM是前端未来的发展方向,微软有knockout, winjs等MVVM框架; 著名的.Net组件开发公司 Telerik 推出了一套基于 jQuery的MVVM UI库kendoui; 谷歌组织开发angula
r;jQuery, rails,Sproutecore,Merb,Handlebars这几个著名框架的核心成员,超级大牛Yehuda Katz推出了emberjs!
同样的MVMM框架,angular是找大而面的道路,因此体积非常庞大,1.6-1.7万行,由于avalon直接是使用VBS与Object.defineProperty等原生C++接口,比knockout那些包无数
层JS的方法快多了。在渲染时,虽然双方都边扫描都绑定,但遇到text, html绑定(这些绑定会改变DOM树构造,增删节点,导致reflow), avalon会使用零秒延迟,让性能消耗低的
先执行再进行性能消耗大的(chrome等高级浏览器,直接使用HTML5的新属性 hidden,把90%的reflow屏蔽了)。因此整体速度是knockout的百倍或几百倍以上,这视页面的复杂情况
,越复杂reflow越严重,knockout就越惨
本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/3142283.html,如需转载请自行联系原作者