您的位置：首页 > Web前端

轻量级前端MVVM框架avalon - 控制器

2013-07-02 12:41 417 查看

引子：

最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧

不过angular的的文档中用词还是很优雅：

HTML编译器

指令

编译

链接

过滤器

注入器

控制器

管道

等等…看起来觉得老高级,其实avalon也间接的部分实现,原理也不是很复杂

avalon版本更新很快,新版的加入了AMD规范的模块加载器,还修复了很多BUG,不过相信短期内实现的核心还是不会变化,所以我依然以现在的版本分析为主

编译期

视图背后的代码就是控制器,在mvvm中就是vm视图模型,它的主要工作就是构造模型,并把模型与回调方法一并发送到视图,视图可以看作作用到模版HTML上的投影

所以在编译阶段,我们的控制器就会把用户定义的数据模型给构造出来

avalon中的modelFactory工厂方法构造出的model对象其实就是真正的控制器了,至于构造出来的控制器如何注入到视图上的,等以后分析到HTML编译器双向绑定吧

model本来是系统内部定义的一个临时对象,将控制器和avalon的作用域对象给关联起来

接上一节

收集用户定义的scope在过滤的时候做了2个处理

callGetters.push(accessor);

[code]callSetters.push(name);
[/code]

收集控属性赋监与计算属性,是为了在初始化scpoe中的代码未处理的方法

处理监控属性

//给控属性赋监值,调用对应监控属性的set->accessor方法

[code]callSetters.forEach(function(prop){
//model.firstName='司徒'->调用了model.firstName->set->accessor方法

model[prop]=scope[prop];//为空对象赋值

});

[/code]

遍历监控属性收集器,给初始化的空model对应的方法赋值

这里注意各重点,赋值的的时候实际是调用的accessor方法,因为setget给转换过了

accessor源码

accessor=function(neo){//创建计算属性
//@第三层作用域
if(arguments.length){
if(stopRepeatAssign){
return;//阻止重复赋值
}
if(typeofsetter==="function"){
setter.call(model,neo);
}
if(oldArgs!==neo){//由于VBS对象不能用Object.prototype.toString来判定类型，我们就不做严密的检测
oldArgs=neo;
notifySubscribers(accessor);//通知顶层改变
model.$events&&model.$fire(name,neo,value);
}
}else{
if(openComputedCollect||!accessor.locked){
collectSubscribers(accessor);
}
//解析出get函数,返回新的值
returnvalue=json[name]=getter.call(model);//保存新值到json[name]
}
};


collectSubscribers方法





很明显的处理,取出开始push到的Publish的处理回调,取出依赖列表,合并

ensure法只有当前数组不存在此元素时只添加它





所有此时的subscibers关联就有值了

最后执行定义的get方法,更新json





注意的一点





这里又涉及到取值的问题,所以又会关对应的执行各自的accessor

所以这里会进行一次收集依赖了

在转换的完毕model后，会给model增加订阅的特性与一些属性

model.$json=json;//纯净的js对象,所有访问器与viewModel特有的方法属性都去掉

增加事件订阅

model.$events={};//VB对象的方法里的this并不指向自身，需要使用bind处理一下

model.$watch=Observable.$watch.bind(model);//用于监听ViewModel中的某属性变化,它将新值与旧值都传给回调

model.$unwatch=Observable.$unwatch.bind(model);//卸载$watch绑定的回调

model.$fire=Observable.$fire.bind(model);//触发$watch指定的回调

ViewModel的ID,方便通过avalon.models[$id]访问

model.$id=generateID();

判断是否为模型中的原始数据

model.hasOwnProperty方法

最后返回工厂转化后的model对象

主方法入口

avalon.define





其实这里有一种重点





作者再次把定义的模型给执行了一遍,用意呢?

请看

vm.xxx=1;

[code]
vm.fullName=fucntion(){

vm.xxxx


}


[/code]

在定义的VM中的方法中，如果再次访问vm.xxx属性，

这时候内部引用不对了ＶＭ还是指向原来的普通ＪＳ对象，而不是真正的ＶＭ所以需要apply一次，改变

那么有个精妙的思路：
我们factory.apply(0,deps);//重置它的上下文

所以把方法执行一次把内部引用换给model
因为转换了模型关系，所以监控属性与计算属性都会有对应的setget操作了,相对应的上下文也变成了vm了
stopRepeatAssignreturn阻止了，防止重复赋值

avalon.models[name]=model;挂到了全局的models中,方面以后使用

下章就开始讲HTML编译器与指令,如何真正开始工作了

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航