Jquery 模块模式答案

【问题标题】：Jquery Module PatternJquery 模块模式
【发布时间】：2016-03-01 16:53:45
【问题描述】：

我的项目中有一个 jquery 模块模式。我不明白它在做什么以及为什么这样做。

有一个自定义插件 jquery.skInit.js 制作

(function($) {
  $.fn.skInit = function() {
    return this.each(function(i,element) {
      var e = jQuery.Event('skInit');
      e.container = $(element);
      $(':root').trigger(e);
    });
  };
  $.skInit = function(handler) {
    $(':root').on('skInit',handler);
  };
}(jQuery));


and skInit.cs jquery file


$(document).ready(function () {
    'use strict';
    //console.log('skInit');
    $(':root').skInit();



  });

and in remaining js files events are attached as follow. one of js file example 

$(document).ready(function () {
    'use strict';
    $.skInit(function (e) {
        e.container.find('.csSpotTeaserInner').csSpotlightTeaserToggle();
        e.container.find(".sliderBarDiv").mCustomScrollbar();
    });
});

为什么以这种方式编写这种设计模式...它如何优化和提高性能...请解释一下是否有人可以。我的项目是 grunt 项目，其中所有 javascript 都被丑化为 bottom.js 脚本.

【问题讨论】：

您展示的代码使用了许多模式。你具体指的是哪一个？
我只是想知道制作 skInit() 函数的好处
相比什么？在每个挂钩事件的模块中写出$(':root').on('skInit', function(e) { … })？

标签： javascript jquery gruntjs pagespeed grunt-contrib-uglify

【解决方案1】：

为什么以这种方式编写此设计模式...它如何优化和提高性能...如果有人可以请解释一下。

不确定为什么要以这种方式编写模式。

如果插件包含作者姓名，也许联系作者询问他们为什么使用模式？

至于pattern是否优化和提高性能，pattern跟什么比较？事件委托使用

$(document).on("customEvent", ".element1, .element2", handler);
$(document).trigger("customEvent");

您可以尝试在jsperf 创建一个测试，以测试哪个模式在一段时间内执行更多操作。

尝试在 js at stacksn-ps 的 cmets 中解释问题的过程

(function($) {
  $.fn.skInit = function() {
    return this.each(function(i, element) {
      // create jQuery event
      var e = jQuery.Event('skInit');
      // cache parent element for event
      e.container = $(element);
      // `:root` : `document.documentElement` : `<html>`,
      // or root element of document
      $(':root').trigger(e);
    });
  };
  $.skInit = function(handler) {
    // call attached handlers when custom event is triggered
    $(':root').on('skInit', handler);
  };
}(jQuery));

$(document).ready(function() {
  'use strict';
  // add handler to be called
  $.skInit(function(e) {
    // `e.container` : `:root` : `html` element
    console.log(e.container);
    e.container.find('#abc').css("color", "green");
    e.container.find("#123").css("color", "orange");
  });
  // trigger `skInit` custom event,
  // calling handler passed to `$.skInit` above
  $(":root").skInit()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<html>

<body>
  <div id="abc">abc</div>
  <div id="123">123</div>
</body>

</html>

【讨论】：