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模塊模式

回答

相關問題