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脚本。

来源

2016-03-01 Indiver kumar

还有你的代码使用很多模式来解释的过程。你具体提到哪一个？ – Bergi

我只是想知道制作skInit（）函数的益处 –

相比于什么？在挂钩事件的每个模块中写出'（'skInit'，function（e）{...}）''（$：'：root'）。 – Bergi

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

不确定为什么这个模式是按照它的方式编写的。

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

至于模式是否优化和提高性能，模式将被比较？使用事件代表团

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

来源

2016-03-01 17:52:44 guest271314

Jquery模块模式

回答

相关问题