首页 > 代码库 > smartJS 0.1 API 讲解 - FlowController

smartJS 0.1 API 讲解 - FlowController

2024-07-07 18:09:15   227人阅读

本篇介绍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上的测试用例

 

 

 


联系
我们