smartJS 0.1 API 讲解 - FlowController
本篇介绍0.1版中最后一个特性,FlowController;同时也对第一版总结一下,因为近两年全部都是在搞前端,都是做一些js框架类的东西,也做了不少有意思的功能,做smartjs对我来说一个是对自己做一个总结,也希望分享一些东西给大家借鉴。
而对smartjs的来说,整体思想都并不是为了实现什么功能、特效和内容。而是希望体现一些前端编程模式或者思想上的内容,这次的0.1版本中,主要体现了一些面向切面编程、非侵入式编程、异步编程,生命周期控制的一些思想。包括后续的oop的内容,基于策略的数据管理,模型驱动,类型驱动等等都是想给前端开发中注入一些特别点的内容。
FlowController
流程或者生命周期管理器。控制流程的走向,流程扩展,注入控制等等;FlowController是基于trigger封装,具有所有trigger的特性;
接口方法
var flow = {
node1 : function(e,arg,...){}
}; //流程控制初始化
flowController({
flow : flow,
order : ["node1"],
mode : "",
trigger : true | {mode : "",iFace : {}}
}) //启动流程
flow.boot(arg,...); //根据指定的流程节点启动
flow.bootWithStart("start",[args])
参数讲解
- flow :流程定义
- order : 流程执行顺序
- mode :流程模式,默认为promiseEvent模式;simple:简单模式
- trigger : trigger的设置,详细见上篇trigger api说明
在流程中的e参数,与trigger一样,只是多出了几个流程控制方法方法
e.end() : 停止流程方法
e.next(nextNode, pass, args) : 指定下个节点方法;
- nextNode:下个节点名称,可以不在流程定义order设置中
- pass: 可选,略过的流程节点数,只在nextNode指向的非定义的流程节点有效
- args:可选,指定nextNode的方法参数
e.changeArgs([]): 改变后续流程的方法参数
e.recoverArgs(): 回复原始方法参数,与changeArgs对应;
另外,需要注意的是
e.stop() : 与trigger的效果一样,停止方法的执行,这里是停止当前节点的后续执行,但不影响 流程的后续执行
使用样例
简单模式
var flow = st.flowController({
flow: {
init: function(name, op) {
log(name, 'init');
},
render: function(name, op) {
log('render');
},
complete: function(name, op) {
log('complete');
}
},
order: ["init", "render", "complete"],
mode: "simple"
}) flow.boot("boot");
expect(arr + '').toBe('boot,init,render,complete');
普通模式
以一个见的控件渲染为例子,正常的有init,render,complete三个节点,还有两个非标准流程节点buildInput和cancel。在init节点中根据name不同还有做流程走向控制
//一个简单的控件渲染流程
var promiseFlow = st.flowController({
flow: {
init: function(e, name, op) {
setTimeout(function() {
log(name, 'init');
//根据name判断下个流程
if (name === 'input')
//改变下个流程的参数
e.next("buildInput", [op.type]);
else if (name === 'cancel')
e.next('cancel') e.resolve();
}, 100)
return e.promise();
},
//非标准流程中的节点
buildInput: function(e, type) {
setTimeout(function() {
log('buildInput');
e.resolve(type);
}, 100)
return e.promise();
},
//非标准流程中的节点
cancel: function(e) {
setTimeout(function() {
log('cancel');
//流程结束
e.end().resolve();
}, 100)
return e.promise(); },
render: function(e, name, op) {
//值传递测试
e.result && log(e.result);
log('render');
},
complete: function(e, name, op) {
log('complete');
}
},
order: ["init", "render", "complete"]
}); //div控件走正常流程
$.when(promiseFlow.boot("div")).done(function() {
expect(arr + '').toBe('div,init,render,complete');
}) //input进入非标准流程
$.when(promiseFlow.boot("input", {
type: 'text'
})).done(function() {
expect(arr + '').toBe('input,init,buildInput,text,render,complete');
}); //end测试
$.when(promiseFlow.boot("end")).done(function() {
expect(arr + '').toBe('end,init,cancel');
})
trigger注入方法例子
var triggerFlow = st.flowController({
flow: {
init: function(e, name, op) {
setTimeout(function() {
log(name, 'init');
e.resolve();
}, 100)
return e.promise();
},
render: function(e, name, op) {
log('render');
},
complete: function(e, name, op) {
log('complete');
}
},
order: ["init", "render", "complete"],
trigger: true
}); it("trigger", function(testCall) {
//init节点注入前置方法
triggerFlow.onBefore("init", "initBefore", function(e, name, op) {
log('initBefore');
}, "once"); //init节点注入后置方法
triggerFlow.on("init", "initAfter", function(e, name, op) {
setTimeout(function() {
log('initAfter');
e.resolve();
}, 100)
return e.promise();
}, "once"); $.when(triggerFlow.boot("div")).done(function() {
expect(arr + '').toBe('initBefore,div,init,initAfter,render,complete');
testCall();
})
}) it("trigger - next", function(testCall) {
//init中注入方法,跳入后续节点
triggerFlow.onBefore("init", "initBefore", function(e, name, op) {
setTimeout(function() {
log('initBefore');
e.next('complete').resolve();
}, 100)
return e.promise();
}, "once"); $.when(triggerFlow.boot("div")).done(function() {
expect(arr + '').toBe('initBefore,div,init,complete');
testCall();
}) }) //注入方法结束节点
it("trigger - end", function(testCall) {
triggerFlow.onBefore("init", "initBefore", function(e, name, op) {
setTimeout(function() {
log('initBefore');
e.end().resolve();
}, 100)
return e.promise();
}, "once"); $.when(triggerFlow.boot("div")).done(function() {
expect(arr + '').toBe('initBefore');
testCall();
})
})
还有很多的流程控制的例子就不一一介绍了,请参考smartjs上的测试用例
smartJS 0.1 API 讲解 - FlowController的更多相关文章
- smartJS 0.1 API 讲解 - PromiseEvent
上篇简单的介绍smartjs了一些通用方法的api.这篇介绍基础的PromiseEvent(这个名字一直没想好,以前准备用callbacks的,但避免与jquery混淆,st的命名空间可以直接挂到$上 ...
- smartJS 0.1 API 讲解 - Trigger
上篇介绍了PromiseEvent,本篇介绍Trigger - 基于Promise的aop的体现:(感觉自己的对这些命名一直都很挫,也懒得想了,所以就凑合的用) Trigger 在目标对象上加入触发器 ...
- smartjs 0.2 OOP讲解 - Klass 类继承
SmartJS2.0加入OOP的功能.OOP包括klass与factory两个对象. Klass 类继承 与其他的类继承相比,smartjs使用了执行指针的概念(后面例子中会介绍),另外提供base基 ...
- smartjs 0.2 OOP讲解 - factory
本篇介绍OOP的第二个对象factory.在以往项目中其实真正使用klass的地方相当少,而factory则是十分常见的. 在smartjs中的factory并不是指的是工厂模式.在factory要求 ...
- 【jquery】 API讲解 内部培训资料
资料在百度云盘 一.jquery API讲解 1.jquery api如何使用 jquery api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...
- AFNetworking 2.0 新特性讲解之AFHTTPSessionManager
AFNetworking 2.0 新特性讲解之AFHTTPSessionManager (2014-02-17 11:56:24) 转载▼ AFNetworking 2.0 相比1.0 API ...
- Spark 下操作 HBase(1.0.0 新 API)
hbase1.0.0版本提供了一些让人激动的功能,并且,在不牺牲稳定性的前提下,引入了新的API.虽然 1.0.0 兼容旧版本的 API,不过还是应该尽早地来熟悉下新版API.并且了解下如何与当下正红 ...
- ASP.NET CORE 1.0 MVC API 文档用 SWASHBUCKLE SWAGGER实现
from:https://damienbod.com/2015/12/13/asp-net-5-mvc-6-api-documentation-using-swagger/ 代码生成工具: https ...
- Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Zepto 1.0 中文手册,Zepto 1.0 API-translate by yaotaiyang
Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Z ...
随机推荐
- C# socket 编程入门
http://www.cnblogs.com/chenxizhang/archive/2011/09/10/2172994.html
- Git学习笔记三--管理修改、撤销修改、删除文件
1.管理修改 什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. 为什么说Git ...
- win7多重网络之默认网关问题
如果有谁做硬件的在用MAC,跟我讲一声好用不好用...有常用软件清单最好.windows已经用的无力吐槽了. 机子上有两块网卡,一块有线一块无线,有线的连接内部网络,无线连接外部网络, 问题描述: 内 ...
- Codeigniter 使用 Mysql 存储过程
本篇文章由:http://xinpure.com/codeigniter-using-mysql-stored-procedures/ 执行存储过程 $query = $this -> db - ...
- jedis连接集群
/** * 集群版 */ @Test public void JedisJiuQun() { HashSet< ...
- poj 2391 Ombrophobic Bovines, 最大流, 拆点, 二分, dinic, isap
poj 2391 Ombrophobic Bovines, 最大流, 拆点, 二分 dinic /* * Author: yew1eb * Created Time: 2014年10月31日 星期五 ...
- html5-本地数据库的操作
<script src="jquery-1.8.3.js"></script><script>/* IE11不支持此操作创建数据库 解释一下op ...
- 英文版windows乱码问题(win7/8/10)
- 消息队列 概念 配合SpringBoot使用Demo
转http://www.jianshu.com/p/048e954dab40 概念: 分布式消息队列 ‘分布式消息队列’包含两个概念 一是‘消息队列’,二是‘分布式’ 那么就先看下消息队列的概念,和为 ...
- 编程算法 - 高速排序算法 代码(C)
高速排序算法 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 经典的高速排序算法, 作为一个编程者, 不论什么时候都要完整的手写. 代码: /* * m ...