APP ( framework )

Dependencies

• jQuery

Flow

**App**                                 |           **Module**
----------------------------------------|----------------------------------------------------------
reg                                     |           renderFunction
load                                    |           init            
anyth(higher or same). change           |           Config.preCheck     ||      Module.preCheck (old)
                                        |
*IF Config.preCheck*                    |
    IF unload                           |           load
ELSE                                    |
    IF loaded                           |           unload
                                        |
IF API                                  |
    startGetData                        |           before
    data ready                          |           update
ELSE                                    |
    startUpdate                         |           before & update
                                        |

Quick Start

App.reg([ object | renderFunction ], [ object | renderFunction ]);          //renderFunction will be called when reg

App.reg({
    name: 'mId',                            // require, unique, param name like categoryId
    level: [ default false | number ],      // high -> low -> false
    api: [ default /api/{name} | string (url) | object (like {url:'', dataType:''}) | false ],
    defaultValue: [ default '' | string | object ],
    preCheck: function(args){               // check Module, false => module.unload, true => module.load
        return args.tab=='abc';
    },
    getArgs: function(ajaxData){            // has api render send data
        return ajaxData;
    },
    setArgs: function(value){               //  has level render change data
        return {
            mId: value
        };
    }
},{
    /***Module here***/
    
    init: function(){           // called when app.loaded
    },
    
    before: function(){         // called before load
    },
    
    load: function(){           // called when load
    },
    
    unload: function(){         // called when unload
    },
    
    /****old****/
    preCheck: function(args){   //same as moduleConfig.preCheck
    },
    
    update: function(args,data,ajaxSendData){   // called when higher change
    },
    
    /**** private DO Not Change It ****/
    change: function(){         //must has moduleConfig.level
    }
    
});

e.g

var a={             //level 1
    init: function(){
        this.word='hello, world';
    },
    doSth: function(){
        this.change(this.word);
    },
    update: function(args){
        console.log('a:',args);
    }
};

var b={             //level 2
    doSth: function(){
        this.change('b changed');
    },
    update: function(args){
        console.log('b:',args);
    }
};

var c={             //level 2
    update: function(args){
        console.log('c:',args);
    }
};

App.reg({
    name: 'a',
    level: 1,
    api: false
},a);


App.reg({
    name: 'b',
    level: 2,
    api: false,
    defaultValue: 'b default',
    preCheck: function(args){
        return args.a;
    }
},b);

App.reg({
    name: 'c',
    level: 2,
    api: false
},c);



> app.loaded
a: {}
c: {}

> a.soSth
a: {a:'hello, world'}
b: {a:'hello, world',b:'b default'}
c: {a:'hello, world',b:'b default'}

> b.doSth
a: {a:'hello, world'}
b: {a:'hello, world',b:'b changed'}
c: {a:'hello, world',b:'b changed'}

> a.change('new value')
a: {a:'new value'}
b: {a:'new value',b:'b default'}
c: {a:'new value',b:'b default'}