Question

我不确定我关注的是哪种JavaScript设计模式。有人可以帮忙解释一下吗？

    var masonrySupport = ({
      large__videos__support: function() {
        $('.masonry-container .largeRec').find('.itemMasVideo').parent().addClass('item_largeRec_video_height');
      },
      smallRec__videos__support: function() {
        $('.masonry-container .smallRec').find('.itemMasVideo').parent().addClass('item_smallRec_video_height');
      },    
      init: function() {
        this.large__videos__support(),
        this.smallRec__videos__support()
      }
    })
    masonrySupport.init();

Answer 1

有两种＆＃34;模式＆＃34;我可以在这看到。

使用自调整闭包来隔离范围。
```
(function($) {
    // Code here
})(jQuery);
```
帮助缓解意外全局变量的产生。
（种类）模块模式，您可以在其中创建一个包含大量方法的对象，并调用init()。我更喜欢自我调用它的闭包版本。的 The Revealing Module Pattern

Answer 2

我并不认为这是严格意义上的设计模式。可能与module pattern相关联，但它需要返回可在其内部范围之外访问的内容。它只是在范围内调用的自执行函数，在本例中是jQuery。这用于许多jquery插件。您将自执行函数的范围隔离到特定 - 让我们说 - domain。

这可以在第一份声明中找到：

(function($) {
  ...
})(jQuery);

通过closuring函数，您将在范围内声明的函数和变量保护到特定域，从而消除了意外覆盖或重新声明在全局范围内声明的某些函数或变量的可能性。将范围与Javascript世界中的Object或DOM上下文window中的全局对象隔离是一种常见做法。

它继续执行自执行功能：

$(function() {
  ...
})

Answer 3

您使用的模式称为Module Pattern，它是JavaScript中最重要的模式之一。外部包装器创建一个匿名范围，为您放置在其中的代码提供隐私和状态。

(function($) {
  // Everything in here is private and stateful
  // and we can access jQuery through the imported $ variable
})(jQuery);

对于您的范围，您还传递了全局jQuery对象。此方法称为全局导入，比从范围内访问隐含的全局更快更清晰。

在您的范围内，您正在创建一个可通过masonrySupport变量访问的API，使其成为显示模块模式。

Answer 4

有效地，这里所做的是，一旦文档加载，就执行两个函数 - “large__videos__support”和“smallRec__videos__support”。

让我们了解它是如何实现的，

首先，Immediately-Invoked Function Expression（IIFE）正在行动中。在尝试避免污染全局命名空间时经常使用此模式，因为函数中使用的所有变量在其范围之外都不可见。

(function($) { ... })(jQuery);
正在使用$（document）.ready（）的简写。更多here。

$(function() { ... });
第三，您正在初始化'masonrySupport'引用的一个对象并调用其方法'init'。

Answer 5

在JS中，这称为立即调用函数表达式（IIFE），称为模块模式。

然而，在jQuery中，此模式用于创建jQuery Plugins。我建议你遵循最佳实践来使其发挥作用。

检查jsfiddle是否可以帮助您入门。

JS部分下面：

(function( $ ) {

$.fn.masonrySupport = function( option ) {

    if ( option === "large") {
       this.find('div.itemMasVideo').parent().addClass('item_largeRec_video_height');
    }

    if ( option === "small" ) {
        this.find('div.itemMasVideo').parent().addClass('item_smallRec_video_height');
    }
     return this;
};

}( jQuery ));

$( 'div.masonry-container.largeRec' ).masonrySupport( "large" );

这是哪种JavaScript设计模式？

5 个答案: