您不懂JS的javascript模块模式 [英] javascript module pattern from You don't know JS

问题描述

我已经阅读和测试了下面的代码几个小时了，我似乎无法掌握某些事情.我一直在逐步浏览chrome控制台，基本上在我可以添加并检查的每一行中都放置了中断，但我不确定事情是否如此

I have been reading and testing below code out for several hours now and I just can't seem to grasp certain things. I have been stepping through chrome console basically putting break in every line I can add and have been inspecting and I am just not sure of things

1)我只是不确定deps数组的用途.对我来说，第一个奇怪的事情是，为什么脚本不尝试在第一次调用它时放数据(来自 MyModules.define("bar"，[]，function())?为什么脚本第二次调用 define(MyModules.define("foo"，["bar"]，function(bar)))，然后在第一次定义时将["bar"]添加到数组中首先做到了吗?

1)I am just not sure of the purpose of deps array. First odd thing to me is , why doesn't script try to put data on first call to it(from MyModules.define("bar",[],function()) ? Why does script make second call to define(MyModules.define("foo",["bar"], function(bar)) and then add ["bar"] to the array when first define should have done it in the first place?

2)此代码 modules [name] = impl.apply(impl，deps).每个回调，请不要使用"this" ..是否在此需要应用?另外，这可能是我在使用"apply"时对回调的缺乏理解，但是如何读懂呢?我以为申请"通常会 functionName.apply(obj，[])

2)This code modules[name] = impl.apply(impl,deps). Each callbacks, do not use 'this'.. so was apply necessary here? Also, this is probably my lack of understanding in callback when 'apply' is used, but how does one read this? I thought 'apply' typically goes functionName.apply(obj,[])

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

In this case, is this almost like saying functionName.apply(functionName, []) ?? Or is this different because function itself is anonymous?

    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();

推荐答案

我只是不确定 deps 数组的用途.

您似乎对整个 MyModules 对象的目的感到困惑，不是吗?

You seem to be confused on the purpose of the whole MyModules object, don't you?

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

The define method can be used to declare a module, with a name, an array of dependencies, and a factory function:

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

• The name is the string under which the module object will be stored in that modules dictionary
• The deps array contains the names of the modules on which the currently declared module depends on.
• The impl function will be called to create the module object that will be available under the name. It does get passed the module objects to which the names in the deps array were resolved.

为什么脚本不尝试在第一次调用时放置数据(来自 MyModules.define("bar"，[]，function())?为什么脚本进行第二次调用来定义( MyModules.define("foo"，["bar"]，function(bar))?

Why doesn't script try to put data on first call to it (from MyModules.define("bar",[],function()) ? Why does script make second call to define (MyModules.define("foo",["bar"], function(bar))?

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

It means to declare a module with the name bar without any dependencies, and to declare a module with the name foo that depends on bar. Typically, these two declarations would be placed in different scripts.

此代码 modules [name] = impl.apply(impl，deps)-每个回调，请不要使用'this'..因此在这里需要使用吗?

This code modules[name] = impl.apply(impl,deps) - Each callbacks, do not use 'this'.. so was apply necessary here?

是， 应用 来将任意多个参数传递给该函数.但是，为 this 值传递 impl 函数确实没有任何意义，在这里 null 更合适.

Yes, apply is necessary here to pass arbitrary many arguments to the function. However, passing the impl function for the this value does indeed not make any sense, null would be more appropriate here.

一个更好，更易理解的定义是

A better and more understandable definition would be

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);
}

这篇关于您不懂JS的javascript模块模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！