本篇介绍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