5

我有类似于以下的代码：

 (function(MyHelper, $, undefined){

var selectedClass = "selected";

MyHelper.setImageSelector = function(selector) {
    var container = $(selector);

    setSelected(container, container.find("input:radio:checked"));
    container.find("input:radio").hide().click(function() {
        setSelected(container, $(this));
    });
};

MyHelper.enableIeFix = function(selector) { 
    var container = $(selector);
    container.find("img").click(function() {
        $("#" + $(this).parents("label").attr("for")).click();
    });
};

function setSelected(container, selected) {
    container.find("label").removeClass(selectedClass);
    selected.siblings("label").addClass(selectedClass);
}

 }( window.MyHelper = window.MyHelper || {}, $))

我是 JS 的新手，我想知道这是否是 javascript 编程中的特定模式。我特别想知道最后一行的含义是什么：

   }( window.MyHelper = window.MyHelper || {}, $))

是模块模式吗？

4

4 回答 4

4

是的，这基本上是一个模块模式。

如何使用模块模式创建模块的总结是：

  • 创建模块范围，通常使用立即调用的函数表达式 (IIFE) 创建闭包。这将为您的模块创建“私人空间”，避免全局污染并保持代码模块化和隔离。

  • 有一个命名空间来附加您的公共方法。开发人员有不同的方法来执行这个“附件”过程。一些开发人员将对象“提交”到模块，而其他开发人员“返回”要存储在变量中的对象。不管怎样，都是一样的。

在这种情况下，它是模块模式的“hand-in”版本

(function(MyHelper, $, undefined){

    var selectedClass = "selected";

    MyHelper.setImageSelector = function(selector) {};

    function setSelected(container, selected) {}

}(window.MyHelper = window.MyHelper || {}, $))

在最后一行，它立即调用你的函数并发送这些参数

(window.MyHelper = window.MyHelper || {}, $)

它类似于这样做，但不使用函数名：

function anonymous(MyHelper, $, undefined){...}
anonymous(window.MyHelper = window.MyHelper || {}, $);

  • 第一个参数，window.MyHelper = window.MyHelper || {}是操作的组合。无论该操作返回什么，都会MyHelper在模块中提供参数。

    • 这||是一个“默认”操作。如果左边的值||是“假的”，那么表达式“默认”假定的值是右边的值。因此，在您的代码中，如果window.MyHelper不存在，则默认为 object {}。

    • 使用“默认”操作，window.MyHelper将分配一个现有的window.MyHelper或如果不存在，则分配一个新的 Object 实例{}

    • JavaScript 中的赋值操作确实会返回值。赋值操作返回的值是赋给变量的值。这也使得整个操作为模块提供价值成为可能。

  • 第二个参数是什么$（我假设是 jQuery？）

  • 第三个参数没有传递，从内部看，它是未定义的。这样做是因为据我所知，它undefined是可变的。所以有一个纯粹的 undefined undefined，我们什么都不发送，因此变量undefined是undefined。

这段代码的作用：

MyHelper.setImageSelector = function(selector) {};

已添加到MyHelper该方法中setImageSelector，并且由于您MyHelper来自外部，因此现在使用它的任何人都拥有该MyHelper.setImageSelector()方法。

IFFE 中未扩充的其他函数和变量MyHelper是您所谓的“私有”成员。JavaScript 有一个函数作用域，这意味着它会为每个函数声明创建一个新作用域。简单来说，里面可以看到外面，外面看不到里面。这也是不使用大量函数和变量污染全局范围的一种方法

于 2012-04-19T11:19:08.150 回答
1

这是一个 JavaScript 类。你可以在这里阅读更多关于它们的信息：

http://javascript.about.com/library/bltut35.htm

于 2012-04-19T11:03:08.740 回答
0

它在存在时扩展全局 MyHelper 对象，否则创建一个新对象。传递了 Jquery 全局并将 undefined 声明为参数，因此可以使用 js 最小化器对其进行压缩。

对我来说看起来很像模块模式。另请参阅： http ://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery

于 2012-04-19T11:07:31.747 回答
0

匿名函数在其定义后立即被调用/调用

(
 function(arg1,arg2){
 }
)(xarg1,xarg2);

最后一行调用定义的匿名函数。您的匿名函数的参数是

  1. 窗口.MyHelper = 窗口.MyHelper || {} /*MyHelper 全局对象，如果未定义则为空对象 */
  2. $ /* jQuery 或原型对象。使用 jquery 它通常是“jQuery”全局对象，以避免与其他库发生冲突 */

匿名函数的第三个参数“未定义”确保没有人覆盖或隐藏实际未定义。

这在 javascript 中定义了一个安全的自调用函数。

于 2012-04-19T11:23:20.390 回答