Javascript 动态附加jQuery插件以获得更好的性能

最近，我需要在页面上附加大量jQuery颜色选择器插件。对于边框、阴影、渐变等的颜色输入，这很快就变成了大量的颜色选择。由于该工具重复加载了50多个元素，因此页面将实例化500多个颜色选择器。不用说，浏览器遭受了巨大的损失

首先，我花了一些时间尝试不同的方法，让所有输入共享一个颜色选择器实例。在我看来，这是最合理的做法。但是项目的情况不允许我花足够的时间来找到一种方法，所以我不得不想出一种替代技术

是的，我想听听你对我提出的技术的看法，如果有人发现它有任何问题

其思想是，在页面加载时，不要附加插件的所有实例，而是等待，然后只附加您需要的实例——就在您需要它们的时候

下面是我如何实现的

首先，我有一些html，有很多输入，比如：

<input class="color">

但这将导致许多颜色选择器对象立即被实例化，每个匹配元素对应一个对象，每个对象在单击其输入时准备好执行其操作。这通常可以正常工作，但是如果有很多元素，它会使浏览器没有响应

因此，现在，如果用户真的点击了输入，我将动态地将颜色选择器附加到输入上

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事件，因此焦点事件可以首先实例化它。但除此之外，我希望它能成为一个“通用”的解决方案，解决人们在添加太多选择器类型插件以形成元素时经常遇到的问题；许多插件都非常易于开箱即用，但大多数插件在有许多实例时提供的优化选项很少。我在这里看不到通用的解决方案，除了您已经发现的事件委派、目标初始化。

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');
}