码迷,mamicode.com
首页 > Windows程序 > 详细

smartJS 0.1 API 讲解 - FlowController

时间:2014-06-10 12:09:34      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

本篇介绍0.1版中最后一个特性,FlowController;同时也对第一版总结一下,因为近两年全部都是在搞前端,都是做一些js框架类的东西,也做了不少有意思的功能,做smartjs对我来说一个是对自己做一个总结,也希望分享一些东西给大家借鉴。

而对smartjs的来说,整体思想都并不是为了实现什么功能、特效和内容。而是希望体现一些前端编程模式或者思想上的内容,这次的0.1版本中,主要体现了一些面向切面编程、非侵入式编程、异步编程,生命周期控制的一些思想。包括后续的oop的内容,基于策略的数据管理,模型驱动,类型驱动等等都是想给前端开发中注入一些特别点的内容。

FlowController

流程或者生命周期管理器。控制流程的走向,流程扩展,注入控制等等;FlowController是基于trigger封装,具有所有trigger的特性;

接口方法

bubuko.com,布布扣
var flow = {
        node1 : function(e,arg,...){}
    };

//流程控制初始化
flowController({
    flow : flow,
    order : ["node1"],
    mode : "",
    trigger : true | {mode : "",iFace : {}}
})

//启动流程
flow.boot(arg,...);

//根据指定的流程节点启动
flow.bootWithStart("start",[args])
bubuko.com,布布扣

 

参数讲解

  • 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的效果一样,停止方法的执行,这里是停止当前节点的后续执行,但不影响 流程的后续执行

 

使用样例

简单模式

bubuko.com,布布扣
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‘);
bubuko.com,布布扣


普通模式

以一个见的控件渲染为例子,正常的有init,render,complete三个节点,还有两个非标准流程节点buildInput和cancel。在init节点中根据name不同还有做流程走向控制

bubuko.com,布布扣
//一个简单的控件渲染流程
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‘);
})
bubuko.com,布布扣


trigger注入方法例子

bubuko.com,布布扣
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();
            })
        })
bubuko.com,布布扣


还有很多的流程控制的例子就不一一介绍了,请参考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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!