Jquery模块模式
问题描述：
我的项目中有一个jQuery模块模式。我不理解它在做什么以及它为什么在做。Jquery模块模式
存在是由
(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();
});
});
为什么要这样设计的图案以这种方式writtern自定义插件jquery.skInit.js ...它如何优化和提高性能......如果任何人都可以请解释。我的项目是grunt项目，其中所有的javascript都是单独的bottom.js脚本。
答
为什么这种设计模式以这种方式编写...它如何优化和 提高性能...请解释是否有人可以。
不确定为什么这个模式是按照它的方式编写的。
如果插件包含作者姓名，或许联系作者问他们为什么使用模式？
至于模式是否优化和提高性能，模式将被比较？使用事件代表团
$(document).on("customEvent", ".element1, .element2", handler);
$(document).trigger("customEvent");
？
您可以尝试创建一个测试，针对哪个模式在jsperf期间执行更多操作。
试图在问题在评论中js在stacksnippets
(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>
还有你的代码使用很多模式来解释的过程。你具体提到哪一个？ – Bergi
我只是想知道制作skInit（）函数的益处 –
相比于什么？在挂钩事件的每个模块中写出'（'skInit'，function（e）{...}）''（$：'：root'）。 – Bergi