avalon是一个迷你的MVVM框架,虽然从发布到现在,它臌胀了不少,但它现在还是比knockout小许多。avalon开发过程一直遵循三个原则:1,复杂即错误,2,数据结构优于算法,3,出奇制胜。这三大原则保证avalon具有良好的维护性,扩展性,与众不同。
简单说一下其他三大MVVM的实现思路:
现在的avalon是我在完全消化了knockout发展起来的,准确来说,是0.4版,通过Object.defineProperties与VBScript实现了与普通对象看起来没什么两样的VM,VM里面充满了访问器属性,而访问器属性肯定对应一个setter,一个getter, 我们就在setter, getter中走knockout的老路,实现自动收集依赖,然后放进一个简单的观察者模式中,从而实现双向绑定。将绑定属性分解为求值函数与视图刷新函数,早前,avalon也与knockout一样使用一个简单的parser,然后通过with实现, 0.82一个新的parser 上马,同样的迷你,但生成的求值函数,更方便依赖收集,并且没有with语句,性能更佳。angular也不是一无是处,我也从它那里抄来了{{}}插值表达式,过滤器机制,控制器绑定什么的。
avalon在内部使用了许多巧妙的设计,因此能涵盖angular绝对大多数功能,但体积却非常少。此外,在性能上,现在除了chrome外,它都比knockout快,angular则是最慢的。 在移动端上,avalon这个优势会被大大放大化的。
关于avalon的几点:
迷你MVVM框架在github的仓库https://github.com/RubyLouvre/avalon, 如果你要兼容IE6,那么下其中的avalon.js, 如果你只打算兼容IE10与标准浏览器,那么下avalon.mobile.js。
官网地址http://rubylouvre.github.io/mvvm/
我们从一个完整的例子开始认识 avalon :
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
script
src
=
"avalon.js"
></
script
>
</
head
>
<
body
>
<
div
ms-controller
=
"box"
>
<
div
style
=
" background: #a9ea00;"
ms-css-width
=
"w"
ms-css-height
=
"h"
ms-click
=
"click"
></
div
>
<
p
>{{ w }} x {{ h }}</
p
>
<
p
>W: <
input
type
=
"text"
ms-model
=
"w"
data-event
=
"change"
/></
p
>
<
p
>H: <
input
type
=
"text"
ms-model
=
"h"
/></
p
>
</
div
>
<
script
>
avalon.define("box", function(vm) {
vm.w = 100;
vm.h = 100;
vm.click = function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
}
})
</
script
>
</
body
>
</
html
>
|
上面的代码中,我们可以看到在JS中,没有任何一行操作DOM的代码,也没有选择器,非常干净。在HTML中, 我们发现就是多了一些以ms-开始的绑定属性与{{}}插值表达式,有的是用于渲染样式, 有的是用于绑定事件。在ms-model中,我们会发现它会反过来操作VM,VM的改变也会影响视图的其他部分。
不过上面的代码并不完整,它能工作,是因为框架默认会在DOMReady时扫描DOM树,将视图中的绑定属性与{{}}插值表达式抽取出来,转换为求值函数与视图刷新函数。
我们可以通过下面方法自己扫描DOM树:
avalon.ready(
function
() {
avalon.define(
"box"
,
function
(vm) {
vm.w = 100;
vm.h = 100;
vm.click =
function
() {
vm.w = parseInt(vm.w) + 10;
vm.h = parseInt(vm.h) + 10;
}
})
avalon.scan()
})
|
scan有两个可选参数,第一个是扫描的起点元素,默认是HTML标签,第2个是VM对象。
//源码
avalon.scan =
function
(elem, vmodel) {
elem = elem || root
var
vmodels = vmodel ? [].concat(vmodel) : []
scanTag(elem, vmodels)
}
|
我们是通过avalon.define函数返回一个视图对象VM,并且avalon.define(vmName, function(vm){})中的vm并不等于VM,工厂函数中的vm是用于转换为VM的。生成的VM比用户指定的属性还多了许多属性。
默认的,除了函数外,其他东西都转换为监控属性,计算属性与监控数组。如果不想让它转换,可以让此属性以 $开头,框架就不会转换它们。
如果实在不放便改名,又不想被转换,比如是一个jQuery对象或一个DOM节点,如果转换,肯定拖死框架,我们可以放到vm.$skipArray = [propName1, propName2]中去,这样也忽略转换。
另外,avalon不允许在VM定义之后,再追加新属性与方法,比如下面的方式是错误的:
var vm = avalon.define("test", function(vm) { vm.test1 = '点击测试按钮没反应 绑定失败'; }); vm.one = function() { vm.test1 = '绑定成功'; }; //这里有两个错误, //1在命名上没有区分avalon.define的返回值与它回调中的参数, //2one方法的定义位置不对(这是考虑到兼容IE6-8,要求所有浏览器保持行为一致)
当我们要用AJAX与后端交互时,如果直接把VM传上去太大了,这时我们需要把它对应的纯数组的JS对象。在VM中有个叫$model的属性,这是一个对象,就是数据模型M了。当我们更改VM时,框架就会自动同步M
在开始之前,我们看一下静态模板是怎么工作的:
我之前写了一个叫ejs的静态模板引擎:
<
script
type
=
"tmpl"
id
=
"table_tmpl"
>
<&= title() &>
<
table
border
=
1
>
<&- for(var i=0,tl = @trs.length,tr;i<
tl
;i++){ -&>
<&- tr = @trs[i]; -&>
<
tr
>
<
td
><&= tr.name;; &></
td
> <
td
><&= tr.age; &></
td
> <
td
><&= tr.sex || "男" &></
td
>
</
tr
>
<& } &>
</
table
>
<&# 怎么可能不支持图片 &>
<
img
src="<&= @href &>">
</
script
>
|
它是以一个script标签做容器,里面的整个叫模板。模板里面有许多以 <& 与 &>划分出来的区块,用于插入JS代码,以@开头的变量是对应于数据包中的某个属性。
几乎所有静态模板的实现原理都是一样的,将这个模板变成一个函数,然后里面分成静态部分与动态部分,静态部分就是上面的HTNMl部分,转换为一个个字符串,动态部分就是插入的JS代码, 它们基本上原封不动地成为函数体的逻辑。然后我们传入一个对象给这个函数,最后得到一个符合HTML格式的字符串,最后用它贴到页面上某个位置就行了。
静态模板有几个缺点,首先它容易混入大量的JS逻辑,对于菜鸟来说,他们特别喜欢在里面放入越来越多JS代码。这个在JSP年代,已经证明是bad practice。为此出现了logic-less的 mustache。 其次,它更新视图总是一大片一大片地处理,改动太大。最后,是由于第2点引发的问题,它对事件绑定等不友好,因为一更新,原来的节点都被消灭了,需要重新绑定。幸好,jQuery普及了事件代理,这问题才没有 暴露出来。
再看动态模板,几乎所有MVVM框架都用动态模板(当然也有例外,如emberjs)。动态模板以整个DOM树为容器,它通过扫描方式进行第一次更新视图。 在静态模板,通过<& 与 &>划分的部分,转换为绑定属性与{{}}插值表达式(这是一种文本绑定,在avalon中,我们可以通过|html过滤器,转换html绑定) 这样就有效阻止用户在页面上写逻辑。虽然动态模板也支持ms-if, ms-each等表示逻辑关系的绑定,但它的值最复杂也只能是一个表达式。 在绑定属性中,属性名用于指定操作行为,如切换类名,控制显示,循环渲染,绑定事件,数据填充什么的,而属性值是决定这些操作是否执行,与渲染结果。 由于双向绑定的关系,它不像静态模板那样,每次都要自己将数据包放进函数,得到结果,然后innerHTML刷新某个区域。它是在用户为VM的某个属性进行重新赋值,将视图中对应的某个文本节点, 特性节点或元素节点的值进行重刷。因此不会影响事件绑定。
在avalon中,这些视图刷新函数都有个element属性,保持对应的元素节点,每次同步时,都会检测此元素节点是否在DOM树,不在DOM树就取消订阅此刷新函数,节约内存,防止无效操作。
因此,你们可以看区别了吧。绑定属性与插值表达式就是对应静态模板中的JS逻辑部分,由于只允许为表达式或单个属性值,复杂度被控制了,强制用户将它们转移到VM中。 VM作为一个数据源,对应静态模板的数据包,并且多了一个自动触发功能,进化成一个消息中心。
<
p
ms-controller
=
"test"
ms-click
=
"click"
>{{ a }}</
p
>
<
script
>
avalon.define("test", function(vm) {
vm.a = '123';
vm.click = function() {
vm.a = new Date - 0
}
})
</
script
>
|
avalon提供ms-controller, ms-important来指定VM在视图的作用范围。比如有两个VM,它们都有一个firstName属性,在DIV中,如果我们用 ms-controller="VM1", 那么对于DIV里面的{{firstName}}就会解析成VM1的firstName中的值。
有关它们的详细用法,可见这里。
如果单是把DOM树作为一个模板远远不够的,比如有几个地方,需要重复利用一套HTML结构,这就要用到内部模板或外部模板了。
内部模板是,这个模板与目标节点是位于同一个DOM树中。我们用一个MIME不明的script保存它,然后通过ms-include="id"引用它。
<
script
type
=
"text/avalon"
id
=
"tpl"
>
here, {{ 1 + 1 }}
</
script
>
<
div
ms-include
=
"'tml'"
></
div
>
|
注意,ms-include的值要用引号括起,表示这只是一个字符串,这时它就会搜索页面的具有此ID的节点,取其innerHTML,放进ms-include所在的元素内部。否则这个tpl会被当成一个变量, 框架就会在VM中检测有没有此属性,有就取其值,重复上面的步骤。如果成功,页面会出现here, 2的字样。
外部模板,通常用于多个页面的复用,因此需要整成一个独立的文件。这时我们就需要通过ms-include-src="src"进行加载。
比如有一个HTML文件tmpl.html,它的内容为:
<
div
>这是一个独立的页面</
div
>
<
div
>它是通过AJAX的GET请求加载下来的</
div
>
|
然后我们这样引入它
<
div
ms-include-src
=
"'tmpl.html'"
></
div
>
|
这分两种:文本绑定与HTML绑定,每种都有两个实现方式
<
script
>
avalon.define("test", function(vm) {
vm.text = "<
b
> 1111 </
b
>"
})
</
script
>
<
div
ms-controller
=
"test"
>
<
div
><
em
>用于测试是否被测除</
em
>xxxx{{text}}yyyy</
div
>
<
div
><
em
>用于测试是否被测除</
em
>xxxx{{text|html}}yyyy</
div
>
<
div
ms-text
=
"text"
><
em
>用于测试是否被测除</
em
>xxxx yyyy</
div
>
<
div
ms-html
=
"text"
><
em
>用于测试是否被测除</
em
>xxxx yyyy</
div
>
</
div
>
|
avalon提供了多种方式来绑定类名,有ms-class, ms-hover, ms-active, 具体可看这里
avalon通过ms-on-click或ms-click进行事件绑定,并在IE对事件对象进行修复,并统一了所有浏览器对return false的处理。具体可看这里
avalon并没有像jQuery设计一个近九百行的事件系统,连事件回调的执行顺序都进行修复(IE6-8,attachEvent添加的回调在执行时并没有按先入先出的顺序执行),只是很薄的一层封装,因此性能很强。
avalon通过ms-visible="bool"实现对某个元素显示隐藏控制,对于低版本的浏览器,它用的是style.display="none"进行隐藏,对于支持HTML5的浏览器,它是使用hidden属性来控制。因此它是优于其他MVVM的实现。
这个功能是抄自knockout的,ms-if="bool",同样隐藏,但它是将元素移出DOM。这个功能直接影响到CSS :empty伪类的渲染结果,因此比较有用。
这功能抄自angular,原名ms-model起不得太好,姑且认为利用VM中的某些属性对表单元素进行双向绑定。打算启用一个新名字叫ms-duplex
这个绑定,它除了负责将VM中对应的值放到表单元素的value中,还对元素偷偷绑定一些事件,用于监听用户的输入从而自动刷新VM。具体如下:
用法为ms-css-name="value"
<div ms-css-width=
"aaa"
></div>
|
用法为ms-data-name="value", 用于为元素节点绑定HTML5 data-*属性。
这主要涉及到表单元素几个非常重要的布尔属性,即disabed, readyOnly, selected , checked, 分别使用ms-disabled, ms-enabled, ms-readonly, ms-checked, ms-selected。ms-disabled与ms-enabled是对立的,一个true为添加属性,另一个true为移除属性。
这主要涉及到几个非常常用的字符串属性,即href, src, alt, title, value, 分别使用ms-href, ms-src, ms-alt, ms-title, ms-value。它们的值的解析情况与其他绑定不一样,如果值没有{{}}插值表达式,那么就当成VM中的一个属性,并且可以与加号,减号混用, 组成表达式,如果里面有表达式,整个当成一个字符串。
<a ms-href=
"aaa + '.html'"
>xxxx</a>
<a ms-href=
"{{aaa}}.html"
>xxxx</a>
|
ms-attr-name="value",这个允许我们在元素上绑定更多种类的属性,如className, tabIndex, name, colSpan什么的。
ms-bind是一种非常强大的同步机制,因为它允许你持续监听某一个VM属性的变化,并且它的参数是一个函数,this又是指向绑定属性的元素节点,因此比ms-css, ms-attr, ms-data, ms-click等有着因定DOM操作的绑定来得更灵活。
用法: ms-bind-prop="callback", 其中prop, callback都要求来自同一个VM。callback为一个函数,this指向元素节点。
<
div
ms-controller
=
"test"
>
<
div
ms-bind-aaa
=
"callback"
></
div
>
<
button
ms-click
=
"one"
>点我</
button
>
</
div
>
|
avalon.define(
"test"
,
function
(vm) {
vm.aaa = 1111;
vm.callback =
function
() {
this
.innerHTML = vm.aaa
}
vm.one =
function
() {
vm.aaa =
new
Date - 0
}
});
|
用法为ms-each-xxx="array", 其中xxx可以随意改,如yyy, el, 它是用于在子元素中进行引用。array对应VM中的一个普通数组或一个监控数组。详见这里。
<
script
>
avalon.define("test", function(vm) {
vm.array = [{value: "aaa", text: "111"}, {value: "bbb", text: "222"}, {value: "bbb", text: "333"}]
})
</
script
>
<
div
ms-controller
=
"test"
>
<
select
ms-each-el
=
"array"
>
<
option
ms-value
=
"el.value"
>{{$index}}、{{el}}</
option
>
</
select
>
</
div
>
|
它的格式为ms-ui-$opts="uiName", 其他$opts可有可无,存在时对应VM中的一个对象,建议将它设置为不可监控的,因为它只是作为一个配置对象。uiName为控件的名字。
此外,在绑定元素上还应该设置一个data-id属性,用于指定生成的UI控件对应的VM的名字。你也可以设置更多的data-*属性,方便用于配置UI。
下面是一个完整的实例用于教导你如何定义使用一个UI。
这是一个位于VM的方法,用于监听VM的某人属性的变化,回调中有两个传参,新属性值与旧属性值,里面的this指向VM,详见这里。
avalon从angular中抄来管道符风格的过滤器,但有点不一样。 它只能用于{{}}插值表达式。如果不存在参数,要求直接跟|filter,如果存在参传,则要用小括号括起,参数要有逗号,这与一般的函数调用差不多,如|truncate(20,"……")
avalon自带以下几个过滤器
decimals 可选,规定多少个小数位。 dec_point 可选,规定用作小数点的字符串(默认为 . )。 thousands_sep 可选,规定用作千位分隔符的字符串(默认为 , ),如果设置了该参数,那么所有其他参数都是必需的。
'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
'MMMM': Month in year (January-December)
'MMM': Month in year (Jan-Dec)
'MM': Month in year, padded (01-12)
'M': Month in year (1-12)
'dd': Day in month, padded (01-31)
'd': Day in month (1-31)
'EEEE': Day in Week,(Sunday-Saturday)
'EEE': Day in Week, (Sun-Sat)
'HH': Hour in day, padded (00-23)
'H': Hour in day (0-23)
'hh': Hour in am/pm, padded (01-12)
'h': Hour in am/pm, (1-12)
'mm': Minute in hour, padded (00-59)
'm': Minute in hour (0-59)
'ss': Second in minute, padded (00-59)
's': Second in minute (0-59)
'a': am/pm marker
'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
format string can also be one of the following predefined localizable formats:
'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 pm)
'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 pm)
'fullDate': equivalent to 'EEEE, MMMM d,y' for en_US locale (e.g. Friday, September 3, 2010)
'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010
'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 pm)
'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 pm)
|
例子:
生成于{{ new Date | date("yyyy MM dd:HH:mm:ss")}}
生成于{{ "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}
生成于{{ "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}
生成于{{ "01-01-2000" | date("yyyy MM dd:HH:mm:ss")}}
生成于{{ "03 04,2000" | date("yyyy MM dd:HH:mm:ss")}}
生成于{{ "3 4,2000" | date("yyyy MM dd:HH:mm:ss")}}
生成于{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}
生成于{{ "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}
值得注意的是,new Date可传的格式类型非常多,但不是所有浏览器都支持这么多,详看这里
多个过滤器一起工作
<
div
>{{ prop | filter1 | filter2 | filter3(args, args2) | filter4(args)}}</
div
>
|
如果想自定义过滤器,可以这样做
avalon.filters.myfilter =
function
(str, args, args2){
//str为管道符之前计算得到的结果,默认框架会帮你传入,此方法必须返回一个值
/* 具体逻辑 */
return
ret;
}
|
avalon装备了AMD模范的加载咕咕,这涉及到两个全局方法 require与define
require(deps, callback)
deps 必需。String|Array。依赖列表,可以是具体路径或模块标识,如果想用字符串表示多个模块,则请用“,”隔开它们。
callback 必需。Function。回调,当用户指定的依赖以及这些依赖的依赖树都加载执行完毕后,才会安全执行它。
如果想禁止使用avalon自带的加载器,可以在第一次调用require方法之前,执行如下代码:
avalon.config({loader:
false
})
|
define方法用于定义一个模块,格式为:
define( id?, deps?, factory )
id 可选。String。模块ID。它最终会转换一个URL,放于 $.modules中。 deps 可选。String|Array。依赖列表。 factory 必需。Function|Object。模块工厂。它的参数列参为其依赖模块所有返回的值,如果某个模块没有返回值,则对应位置为undefine