本篇介绍0.1版中最后一个特性，FlowController；同时也对第一版总结一下，因为近两年全部都是在搞前端，都是做一些js框架类的东西，也做了不少有意思的功能，做smartjs对我来说一个是对自己做一个总结，也希望分享一些东西给大家借鉴。
而对smartjs的来说，整体思想都并不是为了实现什么功能、特效和内容。而是希望体现一些前端编程模式或者思想上的内容，这次的0.1版本中，主要体现了一些面向切面编程、非侵入式编程、异步编程，生命周期控制的一些思想。包括后续的oop的内容，基于策略的数据管理，模型驱动，类型驱动等等都是想给前端开发中注入一些特别点的内容。
流程或者生命周期管理器。控制流程的走向，流程扩展，注入控制等等；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])
在流程中的e参数，与trigger一样，只是多出了几个流程控制方法方法
e.end() : 停止流程方法
e.next(nextNode, pass, args) : 指定下个节点方法；
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上的测试用例
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。