美文网首页
模块化驱动

模块化驱动

作者: 大乔是个美少女 | 来源:发表于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