为了方便编写控件,本次升级就是整合了一个迷你的三百行的迷你jQuery进去。主要更新如下:
- 添加强大的UI绑定与自定扫描功能,让你一行JS也不用写生成UI。UI绑定的格式为ms-ui-opts?=uiName。 opts为VM中的对象名,uiName为控件名,UI会自动寻找data-id的值作为ViewModel的ID,然后你就可以在avalon.models[id]得到它。UI控件会优先使用data-*的值来作为UI的配置项,设计基本同bootstrap。
- ms-controller绑定,功能同angular的ng-controller,指定某个区域由某个ViewModel负责,没有找就定义在它上方的ViewModel。可以参见该文。
- ms-important绑定,指定某个区域只由某个ViewModel负责,没有就停止扫描。
- ms-options功能大幅增强。
- 迷你版jQuery。
现在应某些人的要求,列举一下API
静态方法与属性
- mix(a,b), 相当于jQuery.extend
- models, 用于放置生成的ViewModel
- log(s), 打印日志
- error(s),抛出异常
- ui, 用于放置组件
- ready(fn), domReady,将回调延迟到DOM树后才执行
- oneObject(str|array, val?), 如果传入一个字符串则将它以逗号转换为一个字符串数组,否则一定要传字符串数组,第二个参数可选,为生成的对象的值。此方法是用于生成一个键名不一样,但键值都一样的对象。如{a:1,b:1,c:1,d:1}
- type(obj), 返回传参的数据类型,值可能为Array, Date, Object, JSON, Number,String, Null, Undefined
- range(start, end, step),生成一个整数数组,功能与underscorejs或python的同名函数一致。
- bind(el, type, fn, phase),绑定事件,返回一个回调给你行卸载
- unbind(el, type, fn, phase),卸载事件
- forEach,功能同jQuery.each, 都是索引值或键名在前,值或元素在后
- define(id?, deps?, factory),定义一个ViewModel
- scan(element?, ViewModel?),开始扫描DOM树,抽取绑定。
迷你jQuery对象
要求传入一个元素节点或文档对象或window,你可以通过$().element, $()[0]再次访问到你传入的东西。它有以下原型方法。
- hasClass(cls),判定有没有此类名
- addClass(cls),只有元素不存在时才添加此类名
- remvoeClass(cls),移除类名
- toggleClass(cls, state?),切换类名,如果第2个参数为布名,则根据它强行添加或删除类名
- attr(name,value?), 读写特性(此方法非常弱,直接使用setAttribute, getAttribute实现,没有做任何兼容性处理)
- data(name, value?), 读写数据,使用HTML5的data-*特性实现。它会parse一下,让数据更为实现,思路同jQuery。
- removeData(name), 移除数据
- css(name,value?),读写样式,这个兼容性做得很好,因为长达一百行,连HTML5的私有前缀都能你补上。
- width(val?), 读写宽度,注意对隐藏元素没有处理。
- height(val?), 读写高度,注意对隐藏元素没有处理。
- bind(type, fn, phase),绑定事件,这个没有做链式操作,目的是为了返回回调给你卸载。
- unbind(type,fn, phase),卸载事件。
- val,读取表单元素的value值,功能同jQuery。
- offset,取得元素在文档中的坐标,功能只实现了jQuery的一半,只能读不能写。
各种绑定
- ms-html="str", 添加HTML
- ms-class-xxx="boolean", 切换类名
- ms-hover="className", 移上去时添加这类名,移出去掉。
- ms-visible="boolean", 操作元素的style.display实现显示隐藏
- ms-if="boolean", 决定是将此元素放出到DOM树还是移出
- ms-each-el?="array", el用于下面的引用,不写默认为$data。在它的作用范围,你还可以访问$index得到其索引值,$first判定是否第一个元素,$last是否最后一个,$remove为一个方法,你执行它就会从数组中删除它,并将它作用的那一片元素都移出DOM树。
- ms-model="property",只能用于表单元素,与ViewModel中的某些字段双向绑定,它会偷偷绑定一些事件进行同步。情况与angular的ng-model相同。
- ms-controller="ViewModelName",指定一个ViewModel的作用范围
- ms-important="ViewModelName",指定这个区域只能由这个ViewModel来渲染
- ms-skip,不对此元素及后代进行扫描绑定,保证原样输出。
- ms-on-type="callback",绑定一个事件,type为事件名,如ms-on-click="tick"。
- ms-click="callback",ms-keypress="callback",ms-keydown="callback", ms-keyup="callback",ms-mousedown="callback"……等常用事件都做了一个快捷方式。
- ms-disabled,ms-readyonly,ms-selected,ms-checked等布尔属性,根据属性值的情况决定添加与移除
- ms-enabled="boolean",与ms-disabled相反。
- {{ expr }}, 插值表达式,与angular相同,可以使用“|filter(args1, args2)”的形式添加多个过滤器。
- ms-ui-opts?="name",生成一个UI控件。opts为ViewModel中的一个对象属性,name为控件名。
ViewModel
- 与angular的要求一致,$开头的为框架所保留,由于在IE6-8中然后VBS实现,无法区分大小写,不要同一个ViewModel定义两个近似的方法名。
- $id为ViewModle的名字
- $events为一个对象,用于保存$watch方法的回调
- $watch(prop, callback),ViewModel只能通知它的视图进行更新,不能通知他在ViewModel的其他属性,对于监控属性,我们可能通过这方法实现兄弟间的通信。
- $watch(prop,callback?),停止通知
- 以$开头的属性,框架都不会将它转换为监控属性
- 放在$skipArray中的属性名,也不会转换为监控属性
- 一个包含get与set的对象被认为是一个计算属性。
- 数组会转换为监控数组,只监控长短与排序引发的变化。
大家可以到这里下载它或观看例子
新增的两个控件都是从jQuery插件改过来,一个由250行改到130行,一个由800行改到200行,MVVM的威力突显!
注意,v5中要求必须指定ms-controller或ms-important!