Question

我的项目中有一个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项目，其中所有的javascripts uglify到bottom.js脚本一个

Answer 1

为什么这种设计模式以这种方式写出来...它如何优化和提高性能...请解释是否有人可以。

不确定为什么模式是以它的方式编写的。

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

关于模式是否优化并提高性能，将与模式进行比较？使用

进行事件委托

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

您可以尝试创建一个测试，针对哪个模式在jsperf的句点内执行更多操作。

试图在js内的堆叠区域内的评论中解释问题中的流程

(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>

Jquery模块模式

1 个答案: