knockoutjs 上自己實現的flux

在knockoutjs 上實現 Flux 單向數據流 狀態機，主要解決多個組件之間對數據的耦合問題。

一、其實簡單

flux的設計理念和實現方案，很大程度上人借鑒和參考了Vuex的實現，只是簡化了某些過程，數據流向圖如下：

從上圖，中以看出數據的改變是單向迴圈的。我想這就是Flux理念的核心所在吧。Vuex中對Action規範為Action和Mutation，由action去觸發Mutation，action是可以非同步的，而Mutation則是同步更新。而我在設計ko的Flux時，去掉了Mutation這個環節，是因為我理解為，非同步的請求一般情況下都是與api介面有關係，這塊內容存在極大的變化性，應該從業務或項目構架上做一層區分。

二、如果使用

當然，flux只是針對knockoutjs的，所以你使用之前必須引入knockoutjs。flux主要的方法和對象

2.1 靜態方法

2.1.1 flux.createStore參數格式

2.2 實例方法

createStore方法的執行，會在ko實例上增加$store屬性，此屬性是狀態器的實例對象，在任何位置都可以調用他的dispatch來觸發事件。

三、簡單的使用

本示例定義了四個ko綁定區域，分別是:app1, app2, app3, app4。實現app4中對name的改變自動影響到app1，而app3對列表的改變自動影響到app2。

3.1 定義vm並初始化store

function ViewModel(){
    this.list = ko.observableArray();
    this.name = ko.observable('無名氏');
    this.count = ko.computed(function(){
        //必須用this，這個時候ko.$store還沒創建完成，應該ko.computed創建時會執行一次此處
        //如果是子vm依賴主vm，還是可以用ko.$store的
        return this.list().length + '個數'; //需要對監控對象求值，否則computed不能有效
    },this);
}

var fullVm = new ViewModel(); 

var index = 1;
fullVm.vf={
    add: function(){
        ko.$store.dispatch('addClass',{title: 'title' + (index++)});
    }
}

var opt = {
    state: {
        class: fullVm
    },
    actions:{
        "setName":function(state, name){
            state.class.name(name);
        },
        "addClass":function(state, classInfo){
            state.class.list.push(classInfo);
        }
    },
    getters:{
        "getName":function(state){
            return state.class.name;
        }
    }
}
flux.createStore(opt);

根據上述代碼，首先定義了ViewModel的一個類，並創建了一個fullVm的一個實例，然後直接在fullVm實例上增加了add方法。
opt的state引用的是fullVm，其中還配置了actions和getters相關對象，然後調用flux.createStore(opt)方法。創建一個store，並關聯到ko.$store對象上。

3.2 與視圖綁定

html代碼：

<div id="app1">
    app1:
    <span data-bind="text:ko.$store.get('getName')"></span>
</div>
<div id="app4">
    app4:
    <input type="text" data-bind="value:name" />
    <button type="text" data-bind="click:changeName" >改變名字</button>
    <span data-bind="text:ko.$store.state.class.name"></span>
</div>
<hr>
<div id="app2">
    app2:
    <ul data-bind="foreach:list" >
        <li data-bind="text:title" ></li>
    </ul>
</div>
<div id="app3">
    app3: 
    <button type="button" data-bind="click:vf.add" >添加</button>
    <span data-bind="text:count"></span>
</div>

js代碼:

var app1 = ko.applyBindings(fullVm, document.getElementById("app1"));
var app2 = ko.applyBindings(fullVm, document.getElementById("app2"));
var app3 = ko.applyBindings(fullVm, document.getElementById("app3"));
//測試兩個vm之間的依賴 解藕
var app4 = ko.applyBindings({
    name: ko.observable(),
    changeName:function(data,event){
        ko.$store.dispatch('setName', this.name());
    }
}, document.getElementById("app4"));

四、域的實例

html代碼:

<div id="app1">
    <span data-bind="text:name" ></span>
</div>
<div id="app2">
    <span data-bind="text:name"></span>
    <span data-bind="text:full"></span>
    <button type="button" data-bind="click:changeName" >換名</button>
</div>

js代碼：

function rootViewModel(){
    this.name = ko.observable('root'); 
}
var rVM = new rootViewModel();
flux.createStore({ state: rVM}); //創建root狀態器


var treeNode={
    name: ko.observable('node'),
    changeName:function(){
        ko.$store.areas.treeNode.state.name('新名字');
    },
    full: ko.computed(function(){
        //computed的職責：1. 監控其他對象屬性的變化，而影響自身對象（flux解決）；2. 合併自身對象的幾個屬性（在function下，有this可解）
        //不能通過ko.$store訪問對象本身，因為首次對象本身還沒初始化好
        var store = ko.$store;
        //(store.areas.treeNode? store.areas.treeNode.state.name() : '')  這樣也是不行，因為解決第一次通不過，後面肯定不行
        return store.state.name();
    })
}


ko.$store.register('treeNode', flux.createStore({ state: treeNode})); //創建子狀態機

var app1 = ko.applyBindings(rVM, document.getElementById("app1"));
var app2 = ko.applyBindings(treeNode, document.getElementById("app2"));

其實很簡單，首先創建rVM（也就是根狀態器），然後再調用根狀態器上的register方法註冊一個子狀態器（也就是域）。ko.$store === rVM,也就是說ko.$store就是根狀態器。

五、其他

1. 當然模塊化的引用，也是支持。具體實例細節可參考test中的測試示例。
2. 項目的git地址:https://gitee.com/ko-plugins/flux.git，歡迎大家指正和提出寶貴的意見。