轻量级前端MVVM框架avalon - 总体架构

官网提供架构图

 

单看这个图呢,还木有说明,感受有点蛋疼,做者的抽象度过高了,还好在前面已经大概分析过了执行流程

如图

• 左边是View视图,咱们就理解html结构,换句话就是说用户能看到的界面,渲染页面，绑定事件，切换类名，什么脏活都揽
• 右边是ViewModel 视图模式,就是开发者经过avalon.define("xxx", function(vm){vm.firstName = "模型"})
• 既然是MVVM 那么还有个M跑哪里去了,M在MVVM定义中，M只是一个过客,被VM给再次包装,它与其余表示业务状态的东西融入VM（ViewModel）中,一个普通的ＪＳ对象，多是后台传过来的，也多是直接从ＶＭ中拿到 vm.firstName = "模型" 这个就是M咯,因此做者在图中就没体现出来吧

从定义ViewModel开始,扫描到vm关联的东东 造成访问器,好吧其实整个就这么简单

打开avalon源码,咱们就看到这样的结构

(function(DOC) {

     内部代码

})(document);

这种基本的结构虽然已经被写烂了 ,可是既然是分析就历来到位来一遍吧.

自调用匿名函数

jquery为例

1. 这是一个自调用匿名函数。什么东东呢？在第一个括号内，建立一个匿名函数；第二个括号，当即执行
2. 为何要建立这样一个“自调用匿名函数”呢？

　　　经过定义一个匿名函数，建立了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点很是有用也是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery建立的变量不能和导入他的程序所使用的变量发生冲突。 

     3.  匿名函数从语法上叫函数直接量，JavaScript语法须要包围匿名函数的括号，事实上自调用匿名函数有两种写法

写法1
(function() {
    console.info( this );
    console.info( arguments );
}( window ) );

写法2
(function() {
    console.info( this );
    console.info( arguments );
})( window );

 

       4.为何要传入window呢？

       经过传入window变量，使得window由全局变量变为局部变量，当在jQuery代码块中访问window时，不须要将做用域链回退到顶层做用域，这样能够更快的访问window；这还不是关键所在，更重要的是，将window做为参数传入，能够在压缩代码时进行优化，看看jquery-1.6.1.min.js：

(function(a,b){})(window); // window 被优化为 a

     5.为何要在在参数列表中增长undefined呢？

     在 自调用匿名函数 的做用域内，确保undefined是真的未定义。由于undefined可以被重写，赋予新的值。

undefined = "now it's defined";
alert( undefined );

浏览器测试结果：

       6.注意到源码最后的分号了吗？

        分号是可选的，但省略分号并非一个好的编程习惯；为了更好的兼容性和健壮性，请在每行代码后加上分号并养成习惯。

 

整体架构

按代码结构

    (function(DOC) {

           //命名空间
           avalon = function(el) {
                return new avalon.init(el);
           };

           //avalon挂在工具函数

           // 迷你jQuery对象的原型方法

           //css操做相关的方法

           //ecma262兼容补丁

           //nextTick 高级定时器

           //Observable 观察者模式

           //Define 模型定义方法

           //Parse 解析求值函数与执行做用域

           //Scan 节点扫描

           //Bind html自定义标签绑定处理方法

        })(document);

整个结构基本如上

之后会分析具体的每一个实现,源码分析尽可能到行...