Knockout.js在去年10/25釋出3.0版,手上專案總算由焦頭爛額推進到火燒屁股(好像沒有比較好耶 XD ),便開始著手進行一些零散重構,也順便升級第三方程式庫(有個IE11問題要靠KendoUI升級解決),Knockout.js也想一併升級成3.0。整理Knockout.js 3.0資訊如下:

【Breaking Changes】

俗話說: "先研究不傷身體,再講求效果"。一般升級的首要考量不是有哪些新功能,而是有哪些功能被拿掉,看到酷炫新功能之前網站就先掛點,肯定惹來白眼。

KO RD準備了一份2.x升3.0的注意事項:

  1. Computed改為只有值改變時才觸發通知
    在2.x時代,ko.computed()觀察的observable變數只要被重新給值(即使新值與原值相同亦然)就會觸發重算,許多開發者反應如此會產生無效運算損耗效能,因此3.0的ko.computed()改為只有在值有改變時才觸發重算。
    如果希望維持2.x的行為模式,可透過ko.computed(function() { … }).extend({ notify: 'always' });達成。
  2. 繫結改為獨立更新
    <input type="checkbox" data-bind="visible: showTerms, checked: acceptsTerms" />
    以上範例中有visible及checked兩個繫結,在2.x時代,當acceptsTerms改變會觸發checked狀態更新,也會連帶以showTerms屬性更新visible(即使showTerms完全沒變動),這在某些自訂繫結情境會導致詭異的Bug。
    3.0已改為各繫結獨立更新,一方面改善效能,一方面也避免前述潛在Bug。除非原本程式有偷用"靠任一繫結連動其他繫結重算"密技,否則這個改變不會造成影響。(呵呵,我就中獎了,單選或多選兩用Checkbox清單需要調整,要讀取allBindingsAccessor().options()以形成訂閱關係。)
  3. optionsCaption改為HTML編輯輸出
    下拉選單的optionsCaption參數(就是使用者尚未選取前所顯示的"請選擇..."字樣)原本未提供HTML編碼功能,易造成顯示錯誤(如: < >等符號)及資料漏洞。3.0起則比照text繫結,會一律加上HTML編碼。
    如果原本程式已手動加上HTML編碼,升級後要記得移除。

【新功能】

  1. ko.observableArray加入arrayChange事件(透過trackArrayChanges Extender掛載)
  2. 新增未掛入DOM的元素之繫結支援
  3. 對於由observable所組成陣列(注意: 非observableArray)的處理更完善
  4. Binding Handler可指定繫結順序(value宣告after: [ 'options', 'foreach' ])
  5. Binding Handler新增preprocess可加入進置處理邏輯
  6. Binding Handler新增preprocessNode,在繫結前可對元素節點進行加工
  7. Dynamic Binding Handler – 攔截ko.getBindingHandler(),可以讀入Binding Key(即data-bind="…"中的文字內容),動態決定(或產生)Binding Handler
  8. 新增checkValue,讓checked繫結可以使用字串以外的任意型別內容作為勾選選項時的value。
  9. options change事件: 當options改變且當下已選項目被移除時,將會觸發下拉選單的change事件,連帶更新value、selectedOptions
  10. Observable View Models: 仍屬實驗性質

[KO系列]

http://www.darkthread.net/kolab/labs/default.aspx?m=post

Comments

Be the first to post a comment

Post a comment