在knockoutjs 上自己實(shí)現(xiàn)的flux(實(shí)例講解)
在knockoutjs 上實(shí)現(xiàn) Flux 單向數(shù)據(jù)流 狀態(tài)機(jī),主要解決多個(gè)組件之間對(duì)數(shù)據(jù)的耦合問(wèn)題。
一、其實(shí)簡(jiǎn)單
flux的設(shè)計(jì)理念和實(shí)現(xiàn)方案,很大程度上人借鑒和參考了Vuex的實(shí)現(xiàn),只是簡(jiǎn)化了某些過(guò)程,數(shù)據(jù)流向圖如下:
從上圖,中以看出數(shù)據(jù)的改變是單向循環(huán)的。我想這就是Flux理念的核心所在吧。Vuex中對(duì)Action規(guī)范為Action和Mutation,由action去觸發(fā)Mutation,action是可以異步的,而Mutation則是同步更新。而我在設(shè)計(jì)ko的Flux時(shí),去掉了Mutation這個(gè)環(huán)節(jié),是因?yàn)槲依斫鉃椋惒降恼?qǐng)求一般情況下都是與api接口有關(guān)系,這塊內(nèi)容存在極大的變化性,應(yīng)該從業(yè)務(wù)或項(xiàng)目構(gòu)架上做一層區(qū)分。
二、如果使用
當(dāng)然,flux只是針對(duì)knockoutjs的,所以你使用之前必須引入knockoutjs。flux主要的方法和對(duì)象
2.1 靜態(tài)方法
方法 | 說(shuō)明 |
flux.use | 在require模式下,將flux與ko做關(guān)聯(lián)的方法,當(dāng)然他必須先與createStore方法調(diào)用。 |
flux.createStore | 創(chuàng)建一個(gè)store(狀態(tài)器)實(shí)例,當(dāng)然此方法是有返回值,他的返回值可以調(diào)用register方法注冊(cè)到指定的域上,但第一次調(diào)用此方法時(shí)是創(chuàng)建rootStore(根狀態(tài)器),他不允許被注冊(cè)到域的。 |
2.1.1 flux.createStore參數(shù)格式
參數(shù)名稱 | 說(shuō)明 |
state | 狀態(tài)器相關(guān)狀態(tài)數(shù)據(jù) |
actions | 更改state上的狀態(tài)方法,方法的第一個(gè)參數(shù)為state,第二參數(shù)開始則為傳入的相關(guān)內(nèi)容 |
getters | 獲取state上的相關(guān)狀態(tài)數(shù)據(jù),當(dāng)然返回是一個(gè)ko監(jiān)控對(duì)象。 |
2.2 實(shí)例方法
createStore方法的執(zhí)行,會(huì)在ko實(shí)例上增加$store屬性,此屬性是狀態(tài)器的實(shí)例對(duì)象,在任何位置都可以調(diào)用他的dispatch來(lái)觸發(fā)事件。
方法 | 說(shuō)明 |
register | 創(chuàng)建和注冊(cè)一個(gè)狀態(tài)域,域與域之間是相互獨(dú)立存儲(chǔ)的,域之間action或get名稱是可以重復(fù)的 |
unRegister | 移除一個(gè)狀態(tài)域 |
dispatch | 根據(jù)actionName調(diào)用指定的action,無(wú)返回值 |
get | 根據(jù)getName調(diào)用指定的get,有返回值 |
三、簡(jiǎn)單的使用
本示例定義了四個(gè)ko綁定區(qū)域,分別是:app1, app2, app3, app4。實(shí)現(xiàn)app4中對(duì)name的改變自動(dòng)影響到app1,而app3對(duì)列表的改變自動(dòng)影響到app2。
3.1 定義vm并初始化store
function ViewModel(){ this.list = ko.observableArray(); this.name = ko.observable('無(wú)名氏'); this.count = ko.computed(function(){ //必須用this,這個(gè)時(shí)候ko.$store還沒(méi)創(chuàng)建完成,應(yīng)該ko.computed創(chuàng)建時(shí)會(huì)執(zhí)行一次此處 //如果是子vm依賴主vm,還是可以用ko.$store的 return this.list().length + '個(gè)數(shù)'; //需要對(duì)監(jiān)控對(duì)象求值,否則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);
根據(jù)上述代碼,首先定義了ViewModel的一個(gè)類,并創(chuàng)建了一個(gè)fullVm的一個(gè)實(shí)例,然后直接在fullVm實(shí)例上增加了add方法。
opt的state引用的是fullVm,其中還配置了actions和getters相關(guān)對(duì)象,然后調(diào)用flux.createStore(opt)方法。創(chuàng)建一個(gè)store,并關(guān)聯(lián)到ko.$store對(duì)象上。
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")); //測(cè)試兩個(gè)vm之間的依賴 解藕 var app4 = ko.applyBindings({ name: ko.observable(), changeName:function(data,event){ ko.$store.dispatch('setName', this.name()); } }, document.getElementById("app4"));
四、域的實(shí)例
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}); //創(chuàng)建root狀態(tài)器 var treeNode={ name: ko.observable('node'), changeName:function(){ ko.$store.areas.treeNode.state.name('新名字'); }, full: ko.computed(function(){ //computed的職責(zé):1. 監(jiān)控其他對(duì)象屬性的變化,而影響自身對(duì)象(flux解決);2. 合并自身對(duì)象的幾個(gè)屬性(在function下,有this可解) //不能通過(guò)ko.$store訪問(wèn)對(duì)象本身,因?yàn)槭状螌?duì)象本身還沒(méi)初始化好 var store = ko.$store; //(store.areas.treeNode? store.areas.treeNode.state.name() : '') 這樣也是不行,因?yàn)榻鉀Q第一次通不過(guò),后面肯定不行 return store.state.name(); }) } ko.$store.register('treeNode', flux.createStore({ state: treeNode})); //創(chuàng)建子狀態(tài)機(jī) var app1 = ko.applyBindings(rVM, document.getElementById("app1")); var app2 = ko.applyBindings(treeNode, document.getElementById("app2"));
五、其他
當(dāng)然模塊化的引用,也是支持。具體實(shí)例細(xì)節(jié)可參考test中的測(cè)試示例。
項(xiàng)目的git地址:https://gitee.com/ko-plugins/flux.git,歡迎大家指正和提出寶貴的意見。
以上這篇在knockoutjs 上自己實(shí)現(xiàn)的flux(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript之典型高階函數(shù)應(yīng)用介紹二
在前一篇文章javascript之典型高階函數(shù)中主要實(shí)現(xiàn)了幾個(gè)典型的functional函數(shù),文章最后也提出了疑問(wèn),為啥那樣的實(shí)現(xiàn)與F#之類的函數(shù)式語(yǔ)言“不太一樣”呢?今天來(lái)試試更“函數(shù)式”的實(shí)現(xiàn)2013-01-01requestAnimationFrame用法優(yōu)化源碼解析
這篇文章主要介紹了requestAnimationFrame用法優(yōu)化源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10JS變量中有var定義和無(wú)var定義的區(qū)別以及es6中l(wèi)et命令和const命令
這篇文章主要介紹了JS變量中有var定義和無(wú)var定義的區(qū)別以及es6中l(wèi)et命令和const命令,需要的朋友可以參考下2017-02-02js點(diǎn)擊時(shí)關(guān)閉該范圍下拉菜單之外的菜單方法
下面小編就為大家分享一篇js點(diǎn)擊時(shí)關(guān)閉該范圍下拉菜單之外的菜單方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01如何通過(guò)遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果
JsonDiff是一個(gè)高性能json差異發(fā)現(xiàn)工具,它幾乎可以發(fā)現(xiàn)任何JSON結(jié)構(gòu)的差異,并且將錯(cuò)誤信息反饋給用戶,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果的相關(guān)資料,需要的朋友可以參考下2022-12-12微信小程序?qū)崿F(xiàn)紅包功能(后端PHP實(shí)現(xiàn)邏輯)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包功能,以及后端PHP實(shí)現(xiàn)邏輯,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07左側(cè)是表頭的JS表格控件(自寫,網(wǎng)上沒(méi)有的)
左側(cè)是表頭的JS表格大家有木有遇到過(guò)呀,實(shí)在是沒(méi)有發(fā)現(xiàn),于是自己動(dòng)手豐衣足食,特獻(xiàn)上實(shí)現(xiàn)代碼與大家共享,有類似需求的朋友可以參考下哈2013-06-06解決使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require
這篇文章主要介紹了使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require Popper.js ,小編把問(wèn)題描述和解決方案分享給大家,需要的朋友可以參考下2018-08-08