javascript module pattern from You don't know JS - Stack Overflow

admin管理员组

文章数量:1023758

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)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)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,[])

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

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)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)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,[])

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

• javascript
• module
• callback

Share Improve this question Follow asked Jul 10, 2015 at 4:46 user3502374user3502374 77911 gold badge44 silver badges1414 bronze badges 1

• 1 Whoa, this is really confusing, it mixes the module pattern with a dependency management system for modules… – Bergi Commented Jul 10, 2015 at 4:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

I am just not sure of the purpose of deps array.

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

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

• 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.

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))?

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.

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

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

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)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)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,[])

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

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)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)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,[])

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

• javascript
• module
• callback

Share Improve this question Follow asked Jul 10, 2015 at 4:46 user3502374user3502374 77911 gold badge44 silver badges1414 bronze badges 1

• 1 Whoa, this is really confusing, it mixes the module pattern with a dependency management system for modules… – Bergi Commented Jul 10, 2015 at 4:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

I am just not sure of the purpose of deps array.

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

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

• 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.

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))?

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.

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

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

本文标签： javascript module pattern from You don39t know JSStack Overflow