SmartJS 0.1 API description

This article introduces the last feature of version 0.1, FlowController. At the same time, it also summarizes the first version, because in the past two years, all of them are engaged in front-ends and are engaged in js framework classes, I also made a lot of interesting functions. For me, I would like to make a summary of myself and share some things for your reference.

For smartjs, the overall idea is not to implement any functions, special effects and content. Instead, we hope to embody some front-end programming models or ideas. In this 0.1 version, we mainly reflected some Aspect-Oriented Programming, non-intrusive programming, and asynchronous programming, some Ideas about lifecycle control. Including subsequent oop content, policy-based data management, model-driven, and type-driven, all of which are intended to inject some special content into front-end development.

FlowController

Process or lifecycle manager. Control the process trend, process expansion, and injection control. FlowController is based on trigger encapsulation and has all the features of trigger;

Interface Method

Var flow = {node1: function (e, arg ,...) {}}; // flow Control initialization flowController ({flow: flow, order: ["node1"], mode: "", trigger: true | {mode :"", iFace :{}}) // starts the flow. boot (arg ,...); // start flow based on the specified process node. bootWithStart ("start", [args])

 

Parameter description

• Flow: Process Definition
• Order: Process execution sequence
• Mode: process mode. The default mode is promiseEvent. simple mode.
• Trigger: Set trigger. For details, see the trigger api description in the previous article.

The e parameter in the process is the same as the trigger, but there are several more process control methods.

E. end (): Method of stopping the process

E. next (nextNode, pass, args): Specifies the method of the next node;

• NextNode: name of the next node, which may not be in the order setting defined by the process.
• Pass: (optional) Number of skipped process nodes. It is only valid for non-defined process nodes pointed to by nextNode.
• Args: (optional) method parameter of nextNode

E. changeArgs ([]): change the method parameters of subsequent processes

E. recoverArgs (): returns the original method parameter, which corresponds to changeArgs;

 

Note that

E. stop (): similar to trigger, stop method execution. Here, the subsequent execution of the current node is stopped, but the subsequent execution of the process is not affected.

 

Example

Simple Mode

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');

Normal Mode

Taking the rendering of a visible control as an example, there are three normal nodes: init, render, and complete, and two non-standard flow nodes buildInput and cancel. In the init node, there are also steps to control based on different names.

// A simple control rendering process var promiseFlow = st. flowController ({flow: {init: function (e, name, op) {setTimeout (function () {log (name, 'init '); // determine the next flow if (name = 'input') based on the name // change the parameter e of the next flow. next ("buildInput", [op. type]); else if (name = 'cancel') e. next ('cancel') e. resolve () ;}, 100) return e. promise () ;}, // node buildInput: function (e, type) {setTimeout (function () {log ('buildinput'); e. resolve (type) ;}, 100) return e. promise () ;}, // node cancel in the non-standard flow: function (e) {setTimeout (function () {log ('cancel'); // process end e. end (). resolve () ;}, 100) return e. promise () ;}, render: function (e, name, op) {// value transfer test e. result & log (e. result); log ('render') ;}, complete: function (e, name, op) {log ('complete') ;}, order: ["init ", "render", "complete"]}); // The div control follows the normal process $. when (promiseFlow. boot ("div ")). done (function () {round CT (arr + ''). toBe ('div, init, render, complete');}) // input to enter the nonstandard process $. when (promiseFlow. boot ("input", {type: 'text '})). done (function () {round CT (arr + ''). toBe ('input, init, buildInput, text, render, complete') ;}); // end test $. when (promiseFlow. boot ("end ")). done (function () {round CT (arr + ''). toBe ('end, init, cancel ');})

Trigger injection method example

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) {// triggerFlow Method for init node injection. onBefore ("init", "initBefore", function (e, name, op) {log ('initbefore') ;}, "once "); // triggerFlow after init node injection. on ("init", "initAfter", function (e, name, op) {setTimeout (function () {log ('initafter'); e. resolve () ;}, 100) return e. promise () ;}, "once"); $. when (triggerFlow. boot ("div ")). done (function () {round CT (arr + ''). toBe ('initbefore, div, init, initAfter, render, complete'); testCall () ;}) it ("trigger-next", function (testCall) {// injection method in init, jump to the subsequent node 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 () {round CT (arr + ''). toBe ('initbefore, div, init, complete'); testCall () ;}) // end Node of the injection method 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 () {round CT (arr + ''). toBe ('initbefore'); testCall ();})})

There are still many examples of process control that will not be described one by one. Please refer to the test cases on smartjs