美文网首页
模块化驱动

模块化驱动

作者: 大乔是个美少女 | 来源:发表于2019-03-11 11:28 被阅读0次
var data = null;

$.getJSON('json/data.json', function(meta){
    data = meta;
    ModuleDriver.init(data, {
        //config
        "detail": ModuleDriver.module('#view1', function(){
            var $view = $(this.view);
            for(var prop in this.model){
                $("#"+prop, $view).text(this.model[prop]);
            }
        }),
        "invest": ModuleDriver.module('#view2', function(){
            console.log('module render...')
        }),
        "list": ModuleDriver.module('#view3', function(){
            console.log('module render...')
        })
    });
})

var ModuleDriver = (function(global, factory){
    return factory.call(global);
})(window, function(){
    // 模块化元数据
    var __MODULES__ = {}

    var __CORE__ = {
        module: function(view, render){
            return {
                data: null,
                render: render,
                view: null
            }
        },
        // 初始化函数
        init: function(data, modules){
            __MODULES__ = {};
            for (var module in modules) {
                __MODULES__[module] = modules[module];
            }
            this.load(data);
        },
        // 数据装载函数
        load: function(){
            this.fetch(data);
            this.render();
        },
        // 模块填充函数
        fetch: function(data){
            for (var module in data){
                if(!__MODULES__[module]){
                    __MODULES__[module] = data[module];
                }
            }
        },
        render: function(){
            for (var module in __MODULES__){
                __MODULES__[module].render()
            }
        }
    };
    return __CORE__;
});

相关文章

网友评论

      本文标题:模块化驱动

      本文链接:https://www.haomeiwen.com/subject/ncpvpqtx.html