Ruby's Louvre

每天学习一点点算法

导航

avalonjs 0.5发布,迷你简单易用的MVVM框架

为了方便编写控件,本次升级就是整合了一个迷你的三百行的迷你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!

posted on 2013-05-01 20:30  司徒正美  阅读(2862)  评论(19编辑  收藏  举报