最简单的模块管理工具

<script>
    //模块管理工具，MyModules
    var MyModules = (function Manager() {
        var modules = {};    //创建一个空对象
        
        function define(name, deps, impl) {
        /*
            "data",[],function(){
                var name = "miku";
                function getName(){
                    return name;
                }
                return {
                    getName:getName
                }
        }
        1、首先name：'date' deps:[] impl:fun() modules = {}
        2、for循环 由于deps.length为0，所以不循环
        3、modules[name] = impl.apply(impl, deps);
            (1) modules['date'] = fn.apply(fn, deps);
            modules = {
                date:{
                    getName:getName
                }
            }
        */
        /*
        "app", ["data"], function(data){
            function run(){
                console.log(data.getName());
            }
            return {
                run:run
            }
        }
        1、首先name:'app' deps:['date'] impl:fn() 
            modules = {
                date:{
                    getName:getName
                }
            }
        2、for循环 deps.length = 1;
            当i = 0时，
            所以：['date'][0] = modules[deps[0]] => modules['date'] => {getName : getName}
                <=> date = {getName : getName}
            当i = 1时，
            1>1,不成立
        3、modules[name] = impl.apply(impl, deps);
            modules['app']  = fn().apply(fn(),['date']);
            modules = {
                date:{
                    getName:getName
                },
                app: {
                    run:run
                }
            }
            
        */
            for (var i=0; i<deps.length; i++){
                //将依赖的名字替换成已经注册了的模块
                deps[i] = modules[deps[i]];
            }
            //将依赖数组展开成参数传入模块的构建函数，生成新模块 deps,如果想调用以依赖的模块，就在下面调用的时候写上该模块依赖的模块的名字，如果是注入模块，就不写参数
            modules[name] = impl.apply(impl, deps);
　　　　　　　
        }
        
        function get(name){
            return modules[name];
        }
        function mod(){
            console.log( modules );
        }
        return {
            define: define,
            get: get,
            mod: mod
        }
    })();
    //定义一个模块，data
    MyModules.define("data",[],function(){
        var name = "miku";
        function getName(){
            return name;
        }
        return {
            getName:getName
        }
    });
    
    //定义一个模块，app
    //该模块依赖data模块
    
    MyModules.define("app", ["data"], function(obj){
        /*
            调用data对象的方法
        */
        function run(){
            console.log(obj.getName());
        }
        return {
            run:run
        }
    });
    //取出app模块
    var app = MyModules.get("app");
    //调用app模块的run方法
    MyModules.mod();//返回对象
    app.run();

这是我对这个模块的每一步的详解，

可以看出，利用MyModules可以很方便地定义使用模块，管理模块依赖。但是还存在一个问题，MyModules对于模块定义的顺序有要求。以上面的例子来说，就是app模块依赖data模块，那data模块必须在app模块之前被定义。这个限制让我们实际使用中不是很方便。接下来我们将改进它。

自己添加模块

<script>
    //模块管理工具，MyModules
    var MyModules = (function Manager() {
        var modules = {};    //创建一个空对象
        
        function define(name, deps, impl) {
        /*
            "data",[],function(){
                var name = "miku";
                function getName(){
                    return name;
                }
                return {
                    getName:getName
                }
        }
        1、首先name：'date' deps:[] impl:fun() modules = {}
        2、for循环 由于deps.length为0，所以不循环
        3、modules[name] = impl.apply(impl, deps);
            (1) modules['date'] = fn.apply(fn, deps);
            modules = {
                date:{
                    getName:getName
                }
            }
        */
        /*
        "app", ["data"], function(data){
            function run(){
                console.log(data.getName());
            }
            return {
                run:run
            }
        }
        1、首先name:'app' deps:['date'] impl:fn() 
            modules = {
                date:{
                    getName:getName
                }
            }
        2、for循环 deps.length = 1;
            当i = 0时，
            所以：['date'][0] = modules[deps[0]] => modules['date'] => {getName : getName}
                <=> date = {getName : getName}
            当i = 1时，
            1>1,不成立
        3、modules[name] = impl.apply(impl, deps);
            modules['app']  = fn().apply(fn(),['date']);
            modules = {
                date:{
                    getName:getName
                },
                app: {
                    run:run
                }
            }
            
        */
            for (var i=0; i<deps.length; i++){
                //将依赖的名字替换成已经注册了的模块
                deps[i] = modules[deps[i]];
            }
            //将依赖数组展开成参数传入模块的构建函数，生成新模块
            modules[name] = impl.apply(impl, deps);
        }
        
        function get(name){
            return modules[name];
        }
        function mod(){
            console.log( modules );
        }
        return {
            define: define,
            get: get,
            mod: mod
        }
    })();
    //定义一个模块，data
    MyModules.define("data",[],function(){
        var name = "miku";
        function getName(){
            return name;
        }
        return {
            getName:getName
        }
    });
    
    //定义一个模块，data2
    MyModules.define("data2",["data"],function(){
        var name = "klkx";
        function getName(){
            return name;
        }
        return {
            getName:getName
        }
    });

    //定义一个模块，app
    //该模块依赖data模块
    
    MyModules.define("app", ["data"], function(data){
        /*
            调用data对象的方法
        */
        function run(){
            console.log(data.getName());
        }
        return {
            run:run
        }
    });

    //定义一个模块，app2
    //该模块依赖data模块
    
    MyModules.define("app2", ["data2"], function(data){
        /*
            调用data对象的方法
        */
        function run(){
            console.log(data.getName());
        }
        return {
            run:run
        }
    });
    //取出app模块
    var app = MyModules.get("app");
    var app2 = MyModules.get("app2");
    //调用app模块的run方法
    MyModules.mod();//返回对象
    app.run();
    app2.run();
  </script>