附加一個jQuery插件以獲得更好的性能

最近我需要在頁面上附加大量的jQuery顏色選擇器插件。使用邊框，陰影，漸變等顏色輸入，很快就變成了很多顏色選擇。由於該工具被重複加載50多個元素，頁面將實例化500多個顏色選擇器。不用說，瀏覽器遭受了很大的損失。所以首先，我花了一些時間嘗試不同的方法讓所有的輸入共享一個顏色選擇器的單個實例。在我看來，這將是最好的做法。但是項目的情況並沒有讓我花費足夠的時間來找到一種方法，所以我不得不提出一種替代技術。附加一個jQuery插件以獲得更好的性能

我做了，我想聽聽你對我所提出的技術的看法，如果有人看到有什麼問題？

這個想法是，當頁面加載時，不要附加插件的所有實例，而是等待，只附加需要的實例 - 只需要它們時。

下面是我如何實現這一點。

首先，我有一些HTML很多很多的投入像這樣的：

<input class="color">

然後，jQuery的顏色選擇器插件分配給這些投入，我通常做這樣的事情：

jQuery(function($) { 
    $('input.color').myColorPicker(); 
});

但是，這會導致一些顏色選擇器對象被立即實例化，每個匹配的元素都有一個，每個匹配的元素都可以在其輸入被點擊時做好準備。這通常工作正常，但如果有很多元素，它可以使瀏覽器無響應。

因此，我現在如何將顏色選擇器附加到輸入中，如果用戶實際點擊它。

jQuery(function($) { 

/* Color pickers*/ 
$('input.color').live('focus', function(event){ 

// attach a colorpicker on an as needed basis, 
// and only if it is not already attached 
if(!$(this).hasClass('haspicker')){ 
    $(this).myColorPicker().addClass('haspicker'); 
}

}）;

當頁面加載沒有顏色選擇器附加。當用戶用'color'類點擊一個輸入字段時，它首先接收焦點，並且拾取器插件被附加，並且元素得到一個用於防止後續雙重綁定的ectra類，然後觸發click事件並觸發顏色選擇器出現。

它工作正常，但我不確定這是一種好的做法，還是可能存在潛在的問題，這種方法我沒有想到。

所以我只想聽聽你的想法？

來源

2011-09-30 mikkelbreum

聽起來很合理。另一個嘗試是隻有一個選擇器實例onload，然後將其附加到焦點元素（我假設用戶從不需要兩個平行選擇器）。

來源

2011-09-30 10:01:17 David

聽起來不錯，你知道該怎麼做嗎？ – mikkelbreum

這取決於如何構建插件。你可以在初始化插件後交換它應該涉及的元素嗎？ – David

好的，我明白了。那麼我希望解決方案更通用，因此它不依賴於特定插件的體系結構。很顯然，插件需要綁定到click事件，所以焦點事件可以首先實例化它。但除此之外，我希望它成爲人們添加太多選擇器類型插件以形成元素時經常發現的問題的'常規'解決方案。 – mikkelbreum

附加一個jQuery插件以獲得更好的性能

回答

相關問題