Javascript模块模式导入

时间:2014-08-31 12:07:10

标签: javascript design-patterns

我正在尝试理解Javascript模块模式,但我无法弄清楚添加到匿名函数的参数与最后添加的参数之间的区别。那么有人可以帮我理解两者之间的区别吗?感谢

下面是一个实现两个版本的模块模式示例。函数参数(JQ,Yahoo)和最后显示的模块参数(JQuery,Yahoo)。

var modularpattern = (function(JQ, Yahoo) {
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}(JQuery, Yahoo));

3 个答案:

答案 0 :(得分:1)

  

我无法弄清楚添加到匿名函数的参数与最后添加的参数之间的区别

  • 添加到匿名函数的参数是您在函数

    中为这些内容提供的名称 >
  • 最后添加的参数是这些对象的引用

这意味着您可以访问“safe(r)”引用,因为它不易被其他代码更改

(function (bar) {
    // use bar here, not foo as it's your protected reference
    // but unless something else happens, bar === foo
}(foo);

使用此模式的代码有几个原因

  • 保持名称空间清洁
  • 如果框架包含冲突,则为您提供“安全”环境,以便在可以使用默认名称的地方工作

答案 1 :(得分:1)

逻辑上你的代码等于:

var func = function(JQ, Yahoo) { // Section 1
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}

var modularpattern = func(JQuery, Yahoo);  // Section 2

所以在第1节

  • JQ:一个用作输入参数的函数局部变量
  • 雅虎:与JQ完全相同

在第2部分(在本节中实际上你调用了函数)

  • JQuery:全局范围内的现有对象
  • Yahoo:与JQuery完全相同

为什么开发人员会这样实现:

所有全局对象都可以在函数范围内访问,但访问局部变量比全局变量快得多。 (这称为本地化)

答案 2 :(得分:0)

我曾经使用过模块模式的许多实现,但这是最好的方法:

(function(global) {
    var somePrivate = 'foo';

    function somePrivateMethod() {}

    var myModule = function() {
        // Your logic here
    }

    global.myModule = myModule;
})(this);