Javascript模块模式导入

问题描述:

我想了解Javascript模块模式,但我无法弄清楚添加到匿名函数和参数添加到最后的参数之间的差异。那么有人可以帮我理解两者之间的区别吗?谢谢Javascript模块模式导入

下面是一个模块模式的例子,它实现了两个anon。函数参数(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)); 
+0

你能告诉我们加入一个匿名函数模块模式的一个例子吗? – soktinpk 2014-08-31 12:09:50

+0

它们是相同的,但是这样您可以创建别名而不污染外部范围。 – Oriol 2014-08-31 12:13:24

+0

没有“模块参数”这样的东西。它们只是*函数调用的*参数* - [理解IEFE](http://stackoverflow.com/q/8228281/1048572) – Bergi 2014-08-31 12:19:23

按道理你的代码的工作等于:

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的:在全球范围内
  • 雅虎现有对象:完全相同在jQuery

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

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

+0

因此,这里的'JQ'就像局限于模块函数范围的局部变量,但无法从全局范围访问,而JQuery是可从全局范围访问的全局变量? 如果我想将JQuery库传递给此模块,但是再次输入JQ而不是JQuery,会发生什么?在这一点上,编译器不会理解我需要传递JQuery库吗? – MChan 2014-08-31 16:59:25

+0

@MChan第一个问题:你是完全正确的。第二个问题:因为'JQ'没有在全局范围内定义,所以你会在该函数中得到'undefined'(换句话说''JQ'在这个函数中将会是'undefined')第三个问题:是**注意** JavaScript没有[编译器有解释器] – 2014-08-31 18:54:58

我不能找出在结束时加入添加到匿名函数参数和参数之间的差

  • 加入到匿名功能的参数是名称您在函数中给予这些东西

  • 参数在最后增加是引用对这些对象

这意味着你可以访问一个“安全(R)”的提法,因为它是由其他件不太容易改变使用这种模式的代码

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

代码是好几个原因

  • 保持命名空间干净
  • 如果框架包含冲突,为您提供了一个“安全”的环境,在这里你可以使用默认的名称
+0

因此,bar就像局限于anon func scope的局部变量,而foo就像是一个全局变量,它告诉编译器将foo库传递给这个模块是否正确? – MChan 2014-08-31 17:08:00

我曾与模块模式的许多变现工作,但是这一次是最好的方法:

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

    function somePrivateMethod() {} 

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

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

全局和上面这个有什么不同?这些应该不是指那些被导入的图书馆? – MChan 2014-08-31 17:00:43