标签:c style class blog code java
本篇介绍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上的测试用例
smartJS 0.1 API 讲解 - FlowController,布布扣,bubuko.com
smartJS 0.1 API 讲解 - FlowController
标签:c style class blog code java
原文地址:http://www.cnblogs.com/zhh8077/p/3778939.html