為了方便編寫控件,本次升級就是整合了一個迷你的三百行的迷你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!