欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

在knockoutjs上自己實現(xiàn)的flux(實例講解)

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

成都創(chuàng)新互聯(lián)專注于網站建設，為客戶提供成都做網站、網站制作、成都外貿網站建設、網頁設計開發(fā)服務，多年建網站服務經驗，各類網站都可以開發(fā)，高端網站設計，公司官網，公司展示網站，網站設計，建網站費用，建網站多少錢，價格優(yōu)惠，收費合理。

一、其實簡單

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

在knockoutjs 上自己實現(xiàn)的flux(實例講解)

從上圖，中以看出數據的改變是單向循環(huán)的。我想這就是Flux理念的核心所在吧。Vuex中對Action規(guī)范為Action和Mutation，由action去觸發(fā)Mutation，action是可以異步的，而Mutation則是同步更新。而我在設計ko的Flux時，去掉了Mutation這個環(huán)節(jié)，是因為我理解為，異步的請求一般情況下都是與api接口有關系，這塊內容存在極大的變化性，應該從業(yè)務或項目構架上做一層區(qū)分。

二、如果使用

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

2.1 靜態(tài)方法

方法說明
flux.use在require模式下，將flux與ko做關聯(lián)的方法，當然他必須先與createStore方法調用。
flux.createStore創(chuàng)建一個store（狀態(tài)器）實例，當然此方法是有返回值，他的返回值可以調用register方法注冊到指定的域上，但第一次調用此方法時是創(chuàng)建rootStore（根狀態(tài)器），他不允許被注冊到域的。

2.1.1 flux.createStore參數格式

參數名稱說明
state狀態(tài)器相關狀態(tài)數據
actions更改state上的狀態(tài)方法，方法的第一個參數為state，第二參數開始則為傳入的相關內容
getters獲取state上的相關狀態(tài)數據，當然返回是一個ko監(jiān)控對象。

2.2 實例方法

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

方法說明
register創(chuàng)建和注冊一個狀態(tài)域，域與域之間是相互獨立存儲的，域之間action或get名稱是可以重復的
unRegister移除一個狀態(tài)域
dispatch根據actionName調用指定的action，無返回值
get根據getName調用指定的get，有返回值

三、簡單的使用

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

在knockoutjs 上自己實現(xiàn)的flux(實例講解)

3.1 定義vm并初始化store

function ViewModel(){
 this.list = ko.observableArray();
 this.name = ko.observable('無名氏');
 this.count = ko.computed(function(){
  //必須用this，這個時候ko.$store還沒創(chuàng)建完成，應該ko.computed創(chuàng)建時會執(zhí)行一次此處
  //如果是子vm依賴主vm，還是可以用ko.$store的
  return this.list().length + '個數'; //需要對監(jiān)控對象求值，否則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的一個類，并創(chuàng)建了一個fullVm的一個實例，然后直接在fullVm實例上增加了add方法。

opt的state引用的是fullVm，其中還配置了actions和getters相關對象，然后調用flux.createStore(opt)方法。創(chuàng)建一個store，并關聯(lián)到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}); //創(chuàng)建root狀態(tài)器

var treeNode={
 name: ko.observable('node'),
 changeName:function(){
  ko.$store.areas.treeNode.state.name('新名字');
 },
 full: ko.computed(function(){
  //computed的職責：1. 監(jiān)控其他對象屬性的變化，而影響自身對象（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})); //創(chuàng)建子狀態(tài)機
var app1 = ko.applyBindings(rVM, document.getElementById("app1"));
var app2 = ko.applyBindings(treeNode, document.getElementById("app2"));

五、其他

當然模塊化的引用，也是支持。具體實例細節(jié)可參考test中的測試示例。

項目的git地址：https://gitee.com/ko-plugins/flux.git，歡迎大家指正和提出寶貴的意見。

以上這篇在knockoutjs 上自己實現(xiàn)的flux(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：在knockoutjs上自己實現(xiàn)的flux(實例講解)
文章來源：http://www.chinadenli.net/article32/pgdjsc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、網頁設計公司、自適應網站、App設計、網站制作、商城網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設