轻量级前端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为例

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

通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点非常有用也是一个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);

整个结构基本如上

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

转载于:https://www.cnblogs.com/snake-hand/p/3144973.html

轻量级前端MVVM框架avalon - 整体架构相关推荐

轻量级前端MVVM框架avalon - 模型转换
接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...
html 属于mvvm框架,前端MVVM框架avalon揭秘 - HTML编译器
MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,由于,不少这样的模式的实现都须要利用声明式数据绑定来实现讲View(视图)工做从其余层分离css 因此出现了一大堆自定义 ...
Spring Framework（框架）整体架构
原文链接:https://blog.csdn.net/wd2014610/article/details/80061808 Spring 在这个Spring框架大行其道的软件开发世界里,尚有很多工程师 ...
又想到了模板引擎和前端MVVM框架
最近接手了一个和报表有关的项目.项目后端的大部分工作都是在操作数据库,作为一个后端新手谈不上有什么感觉.但对于看了前端的写法之后,还是有一点点感想. 项目前端主要使用jQuery及其插件,也许这就是大 ...
Spring Framework（框架）整体架构（不知道就有些搞笑了哈）
Spring 在这个Spring框架大行其道的软件开发世界里,尚有很多工程师天天在用,但是从来不会去思考下,Spring框架的整体架构到底是什么样子的啊. 一.首先通过维基百科看看什么是Spring框 ...
《滴滴重MVVM框架Chameleon》架构篇读后感
由于有关架构知识实在深奥,已经超出了我的修炼 level .因此,在尊重原创的基础上,仅仅总结自己的一些感悟,以及对一些未知专业术语进行查阅并解释. 该篇介绍了滴滴在 GitHub 上开源的跨端解决方 ...
Fre：又一个小而美的前端MVVM框架
halo,大家好,好久不贱呢! 最近因为看了一些 be 的小说,整个人都比较致郁::>_<:: 就在昨天,我用了一天的时间写了 fre,又一个小而美的前端MVMM框架可能你觉得,有了 v ...
Fre：又一个小而美的前端MVVM框架 1
halo,大家好,好久不贱呢! 最近因为看了一些 be 的小说,整个人都比较致郁::>_<:: 就在昨天,我用了一天的时间写了 fre,又一个小而美的前端MVMM框架可能你觉得,有了 v ...
疯狂 java轻量级框架_ViewModel从未如此清爽 - 轻量级WPF MVVM框架Stylet
Stylet是我最近发现的一个WPF MVVM框架, 在博客园上搜了一下, 相关的文章基本没有, 所以写了这个入门的文章推荐给大家. Stylet是受Caliburn Micro项目的启发, 所以借鉴 ...

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

自调用匿名函数

总体架构

轻量级前端MVVM框架avalon - 整体架构相关推荐

最新文章

热门文章