在knockoutjs 上實現 Flux 單向數據流 狀態機，主要解決多個組件之間對數據的耦合問題。
一、其實簡單
flux的設計理念和實現方案，很大程度上人借鑒和參考了Vuex的實現，只是簡化了某些過程，數據流向圖如下：
從上圖，中以看出數據的改變是單向循環的。我想這就是Flux理念的核心所在吧。Vuex中對Action規范為Action和Mutation，由action去觸發Mutation，action是可以異步的，而Mutation則是同步更新。而我在設計ko的Flux時，去掉了Mutation這個環節，是因為我理解為，異步的請求一般情況下都是與api接口有關系，這塊內容存在極大的變化性，應該從業務或項目構架上做一層區分。
二、如果使用
當然，flux只是針對knockoutjs的，所以你使用之前必須引入knockoutjs。flux主要的方法和對象
2.1 靜態方法
| 方法 | 說明 |
| flux.use | 在require模式下，將flux與ko做關聯的方法，當然他必須先與createStore方法調用。 |
| flux.createStore | 創建一個store（狀態器）實例，當然此方法是有返回值，他的返回值可以調用register方法注冊到指定的域上，但第一次調用此方法時是創建rootStore（根狀態器），他不允許被注冊到域的。 |
2.1.1 flux.createStore參數格式
| 參數名稱 | 說明 |
| state | 狀態器相關狀態數據 |
| actions | 更改state上的狀態方法，方法的第一個參數為state，第二參數開始則為傳入的相關內容 |
| getters | 獲取state上的相關狀態數據，當然返回是一個ko監控對象。 |
2.2 實例方法
createStore方法的執行，會在ko實例上增加$store屬性，此屬性是狀態器的實例對象，在任何位置都可以調用他的dispatch來觸發事件。
| 方法 | 說明 |
| register | 創建和注冊一個狀態域，域與域之間是相互獨立存儲的，域之間action或get名稱是可以重復的 |
| unRegister | 移除一個狀態域 |
| dispatch | 根據actionName調用指定的action，無返回值 |
| get | 根據getName調用指定的get，有返回值 |
三、簡單的使用
本示例定義了四個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"));五、其他
當然模塊化的引用，也是支持。具體實例細節可參考test中的測試示例。
項目的git地址：https://gitee.com/ko-plugins/flux.git，歡迎大家指正和提出寶貴的意見。
以上這篇在knockoutjs 上自己實現的flux(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
