轻量级前端MVVM框架avalon:整体架构

开发 架构
本文将分析轻量级前端MVVM框架avalon的整体架构,以及其自调用匿名函数,对avalon感兴趣的朋友可以参考。

官网提供架构图

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

如图

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

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

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

  1. (function(DOC) {  
  2.  
  3.      内部代码  
  4.  
  5. })(document); 

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

自调用匿名函数

jquery为例

1. 这是一个自调用匿名函数。什么东东呢?在第一个括号内,创建一个匿名函数;第二个括号,立即执行

2. 为什么要创建这样一个“自调用匿名函数”呢?

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

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

  1. 写法1  
  2. (function() {  
  3.     console.info( this );  
  4.     console.info( arguments );  
  5. }( window ) );  
  6.  
  7. 写法2  
  8. (function() {  
  9.     console.info( this );  
  10.     console.info( arguments );  
  11. })( window ); 

4.为什么要传入window呢?

通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery- 1.6.1.min.js:

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

5.为什么要在在参数列表中增加undefined呢?

在 自调用匿名函数 的作用域内,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。

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

浏览器测试结果:

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

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

总体架构

按代码结构

  1. (function(DOC) {  
  2.  
  3.            //命名空间  
  4.            avalon = function(el) {  
  5.                 return new avalon.init(el);  
  6.            };  
  7.  
  8.            //avalon挂在工具函数  
  9.  
  10.            // 迷你jQuery对象的原型方法  
  11.  
  12.            //css操作相关的方法  
  13.  
  14.            //ecma262兼容补丁  
  15.  
  16.            //nextTick 高级定时器  
  17.  
  18.            //Observable 观察者模式  
  19.  
  20.            //Define 模型定义方法  
  21.  
  22.            //Parse 解析求值函数与执行作用域  
  23.  
  24.            //Scan 节点扫描  
  25.  
  26.            //Bind html自定义标签绑定处理方法  
  27.  
  28.         })(document); 

整个结构基本如上。

以后会分析具体的每个实现,源码分析尽量到行……

原文链接:http://www.cnblogs.com/aaronjs/p/3143641.html

责任编辑:林师授 来源: 博客园
相关推荐

2020-11-11 12:13:59

JS

2022-08-10 12:21:07

PythonWebBottle

2023-06-27 16:42:18

Tinygrad深度学习工具

2022-12-29 09:49:06

轻量级架构决策

2011-03-02 10:03:44

SaturnJSJS

2022-02-12 21:05:11

异步爬虫框架

2023-06-13 13:38:00

FlaskPython

2021-02-01 22:01:57

Coco工具macOS

2014-04-21 10:01:45

前后端分离

2021-07-01 09:08:03

Python网页开发Flask

2012-05-21 21:34:51

iOS

2021-06-26 10:03:35

Python框架Flask

2011-11-28 09:16:24

Javajooq框架

2012-02-01 09:16:18

Java

2009-07-17 14:38:51

轻量级Swing组件

2009-07-14 18:05:28

轻量级Swing组件

2022-02-18 08:34:33

JavaSa-Token项目

2021-03-30 10:26:08

MiniDao1.7.Java框架

2021-08-10 06:08:24

MiniDaoJava框架

2011-03-29 09:51:58

GuiceIOC
点赞
收藏

51CTO技术栈公众号