javascript模块模式从你不知道JS

Question

我已经阅读并测试了下面的代码几个小时了,我似乎无法掌握某些东西.我一直在逐步通过chrome控制台,基本上我可以添加的每一行都有突破并且一直在检查,我只是不确定事情

1)我只是不确定deps数组的目的.对我来说第一件奇怪的事情是,为什么脚本没有尝试将数据放在第一次调用它(来自MyModules.define("bar",[],function())？为什么脚本第二次调用define(MyModules.define("foo",["bar"], function(bar),然后在第一次定义应该首先完成它时将["bar"]添加到数组？

2)这段代码modules[name] = impl.apply(impl,deps).每个回调,不要使用'this'..所以在这里申请是必要的吗？此外,当使用'apply'时,这可能是我在回调中缺乏理解,但是如何读取这个呢？我认为'应用'通常会发生 functionName.apply(obj,[])

在这种情况下,这几乎就像是说 functionName.apply(functionName, []) ?? 或者这是不同的,因为函数本身是匿名的？

    var MyModules = (function Manager() {
        var modules = {};

        function define(name,deps,impl) {
            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];
        }

        return {
            define : define,
            get: get
        };
    })();

    MyModules.define("bar",[],function() {
        function hello(who) {
            return "Let me introduce: " + who;
        }

        return {
            hello : hello
        };
    })

    MyModules.define("foo",["bar"], function(bar) {
        var hungry = "hippo";

        function awesome() {
            console.log(bar.hello(hungry).toUpperCase() );
        }

        return {
            awesome: awesome
        };
    });

    var bar = MyModules.get("bar");
    var foo = MyModules.get("foo");

    console.log(bar.hello("hippo"));

    foo.awesome();

Answer 1

我只是不确定deps数组的目的.

你似乎对整个MyModules对象的目的感到困惑,不是吗？

该define方法可用于声明一个模块,具有名称,依赖项数组和工厂函数:

• 的name是在其下模块对象将被存储在该字符串modules辞典
• 该deps数组包含当前声明的模块所依赖的模块的名称.
• impl将调用该函数来创建将在其下可用的模块对象name.它确实传递了deps解析数组中名称的模块对象.

为什么脚本没有尝试将数据放在第一次调用它(来自MyModules.define("bar",[],function())？为什么脚本第二次调用define(MyModules.define("foo",["bar"], function(bar))？

它意味着声明一个名称bar没有任何依赖关系的模块,并声明一个具有foo依赖名称的模块bar.通常,这两个声明将放在不同的脚本中.

这段代码modules[name] = impl.apply(impl,deps)- 每次回调,都不要使用'this'..所以这里需要申请吗？

是的,apply这里有必要向函数传递任意多个参数.但是,传递impl函数this值确实没有任何意义,null这里更合适.

一个更好,更容易理解的定义

function define(moduleName, dependencyNames, factory) {
    var dependencies = [];
    for (var i=0; i<dependencyNames.length; i++) {
        dependencies[i] = get(dependencyNames[i]); // resolve name
    }
    modules[moduleName] = factory.apply(null, dependencies);
}