在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 相关文章推荐
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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 获取远程文件内容的函数代码
2010/03/24 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
简单学习Python多进程Multiprocessing
2017/08/29 Python
OpenCV 模板匹配
2019/07/10 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
闭幕式主持词
2014/04/02 职场文书
读书活动总结
2014/04/28 职场文书
保护环境标语
2014/06/09 职场文书
推普标语口号大全
2015/12/26 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
详解MySQL中的pid与socket
2021/06/15 MySQL
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js