在knockoutjs 上自己实现的flux(实例讲解)


Posted in Javascript onDecember 18, 2017

在knockoutjs 上实现 Flux 单向数据流 状态机,主要解决多个组件之间对数据的耦合问题。

一、其实简单

flux的设计理念和实现方案,很大程度上人借鉴和参考了Vuex的实现,只是简化了某些过程,数据流向图如下:

在knockoutjs 上自己实现的flux(实例讲解)

从上图,中以看出数据的改变是单向循环的。我想这就是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。

在knockoutjs 上自己实现的flux(实例讲解)

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(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 #Javascript
分析JavaScript数组操作难点
Dec 18 #Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 #Javascript
JavaScript模块详解
Dec 18 #Javascript
webpack打包js文件及部署的实现方法
Dec 18 #Javascript
react+redux的升级版todoList的实现
Dec 18 #Javascript
总结js中的一些兼容性易错的问题
Dec 18 #Javascript
You might like
由php if 想到的些问题
2008/03/22 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
Python入门之modf()方法的使用
2015/05/15 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
对python中return与yield的区别详解
2020/03/12 Python
python使用建议技巧分享(三)
2020/08/18 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
《沉香救母》教学反思
2014/04/19 职场文书
单位绩效考核方案
2014/05/11 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
工作会议简报
2015/07/20 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL