knockout.js的學習筆記

knockout.js試圖將微軟歷經驗證的成功方案MVVM解決方案引進JS，因此很有必要學習下。MVVM是專門為解決富交互頻變動的界面開發而生，這與web開發非常相似。產經經理與測試與什么主管，他們看不懂后端的東西，也只能對前端的看得到的東西指手划腳了，因此變動是非常頻繁的，每次變動，但伴隨着痛若的事件重新綁定與代理，以及與它們相關的業務代碼的調整，在JS這種調試特喝別痛苦的語言中，情況就更嚴重了。每次改版都加劇前端離職的決心，前端換了幾波人才把項目做出來。jQuery號稱是改變人們寫JS的方式，但只是提供了更好的磚瓦而已（原生API是沙石）。想獲得后端那樣開發效率，必須有Struts2, Spring, rails這般一站式的框架，就開發流程進行控制，開發人員只是在框架里做填空題。這樣，看另一個人的代碼，就知道應該是哪里開始看起，看完這里就知道下一步應該是哪里。易讀性應該由框架來塑造，維護性由框架來提供！

之所以放棄ember.js的研究是因為她對流程的控制太弱了，代碼量一多，還是像狗屎一般的亂！knockout.js雖然有許多不如意的地方，但它對流程的控制是非常好的，只有三個入口。在元素上進行數據綁定，編寫viewModel，將viewModel綁到目標的節點上。簡單明了，其缺點可以在我通讀knockout后再造一個輪子解決！

一般的數據綁定有三種:

One-Time，One-Way，Two-way。

One-Time綁定模式的意思即為從viewModel綁定至UI這一層只進行一次綁定，程序不會繼續追蹤數據的在兩者中任何一方的變化，這種綁定方式很使用於報表數據，數據僅僅會加載一次。

One-Way綁定模式即為單向綁定，即object-UI的綁定，只有當viewModel中數據發生了變化，UI中的數據也將會隨之發生變化，反之不然。

Two-Way綁定模式為雙向綁定，無論數據在Object或者是UI中發生變化，應用程序將會更新另一方，這是最為靈活的綁定方式，同時代價也是最大的。

數據綁定只是作為元素的自定義屬性寫上標簽內，並不能決定它是何種綁定。

viewModel是一個結構非常簡單的hash，鍵名為命令，值的定義方式決定其綁定方式。 如果值是通過ko.observable定義的說明是雙向綁定，否則為One-Time綁定，在knockout不存在單向綁定。knockout2.0還從ember.js借鑒了計算屬性，即用ko.computed定義的，它的值會依賴其他值進行推斷，因此就形成了依賴，需要構築一枚依賴鏈。

最后一步是將viewModel綁到節點上，事實上它還會遍歷其后代，進行綁定。默認是綁定body上，因此用戶的行為只能影響到body里面的元素與URL。如果頁面非常復雜，建議還是指定具體節點吧。viewModel還可以綁定注釋節點，但有的公司會對頁面進行壓縮，去空白去注釋，因此不太建議使用。

我們先從ko.applyBindings看起吧。

ko.applyBindings(viewModel, rootNode)
//這里會對rootNode進行修正
   　　　　↓
applyBindingsToNodeAndDescendantsInternal（viewModel, rootNode, true）
//第三個參數為強制綁定,會影響shouldApplyBindings變量
//如果是UL與OL會對里面的結構進行修正normaliseVirtualElementDomStructure
//通過shouldApplyBindings變量決定是否對此節點進行數據綁定
//通過applyBindingsToNodeInternal判定是否繼續綁定到后代中
//通過applyBindingsToDescendantsInternal綁定到后代中

applyBindingsToNodeInternal在這里調用時其參數為rootNode， null, viewModel, true。它是一個極惡的方法，大量使用閉包。精簡如下：

function applyBindingsToNodeInternal (node, bindings, viewModel, force) {
    var initPhase = 0; // 0 = before all inits, 1 = during inits, 2 = after all inits
    var parsedBindings;
    function makeValueAccessor(bindingKey) {
        return function () { 
            return parsedBindings[bindingKey] 
        }
    }
    function parsedBindingsAccessor() {
        return parsedBindings;//這是一個對象
    }

    var bindingHandlerThatControlsDescendantBindings;
    ko.dependentObservable(function () {/*略*/ },  null,{ 
        'disposeWhenNodeIsRemoved' : node 
    });
    return {
        //除了html, template命令，都允許在后代節點繼續綁定
        shouldBindDescendants: bindingHandlerThatControlsDescendantBindings === undefined
    };
};

難度在於dependentObservable的第一個回調

function anonymity() {
    var bindingContextInstance = viewModelOrBindingContext && (viewModelOrBindingContext instanceof ko.bindingContext)
    ? viewModelOrBindingContext
    : new ko.bindingContext(ko.utils.unwrapObservable(viewModelOrBindingContext));
    //將viewModelOrBindingContext整成bindingContext實例
    //bindingContext實例用$data保存viewModel
    var viewModel = bindingContextInstance['$data'];
    //將bindingContextInstance綁定rootNode上
    if (bindingContextMayDifferFromDomParentElement)
        ko.storedBindingContextForNode(node, bindingContextInstance);
    // Use evaluatedBindings if given, otherwise fall back on asking the bindings provider to give us some bindings
    var evaluatedBindings = (typeof bindings == "function") ? bindings() : bindings;
    //如果bindings不存在，則通過getBindings獲取，getBindings會調用parseBindingsString，變成對象
    parsedBindings = evaluatedBindings || ko.bindingProvider['instance']['getBindings'](node, bindingContextInstance);

    if (parsedBindings) {
        // First run all the inits, so bindings can register for notification on changes
        if (initPhase === 0) {
            initPhase = 1;
            for (var bindingKey in parsedBindings) {
                var binding = ko.bindingHandlers[bindingKey];
                if (binding && node.nodeType === 8)
                    validateThatBindingIsAllowedForVirtualElements(bindingKey);
                //注釋節點只能綁定流程控制命令
                if (binding && typeof binding["init"] == "function") {
                    var handlerInitFn = binding["init"];
                    //在頁中，用戶的操作只能影響到元素的value, checked， selectedIndex, hasFocus, placeholder的變化
                    //而更多的變化需要通過綁定事件，通過JS代碼調用實現
                    //因此init主要用於綁定事件
                    var initResult = handlerInitFn(node, makeValueAccessor(bindingKey), parsedBindingsAccessor, viewModel, bindingContextInstance);
                    // If this binding handler claims to control descendant bindings, make a note of this
                    if (initResult && initResult['controlsDescendantBindings']) {//這里主要是html,與template命令，只有它們阻止繼續在后代中綁定事件
                        if (bindingHandlerThatControlsDescendantBindings !== undefined)
                            throw new Error("Multiple bindings (" + bindingHandlerThatControlsDescendantBindings +
 " and " + bindingKey + ") are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.");
                        bindingHandlerThatControlsDescendantBindings = bindingKey;
                    }
                }
            }
            initPhase = 2;
        }
        if (initPhase === 2) {
            for (var bindingKey in parsedBindings) {
                var binding = ko.bindingHandlers[bindingKey];
                if (binding && typeof binding["update"] == "function") {
                    var handlerUpdateFn = binding["update"];//更新UI
                    handlerUpdateFn(node, makeValueAccessor(bindingKey), parsedBindingsAccessor, viewModel, bindingContextInstance);
                }
            }
        }
    }
}

這里存在一個疑惑，像value, checked, event等命令是要綁定事件的，但很難想象事件的回調是怎么調用到這匿名函數的。下一節將深入到其發布者訂閱者機制看看。