javascript - jQuery，寻找一种更智能的初始化方式

Question

我正在寻找一种更好的方法来管理大型项目中的全局组件/插件/小部件初始化。它有许多 jQuery 支持的组件，我想快速高效地初始化这些组件，在搜索互联网之后，我只真正找到了一些短视的例子，这些例子只在较小的网站上是现实的/高性能的。

问题

我想找到一种聪明而优雅的方法来摆脱它:

$(function() { $('.widget-one').widgetOne(); });
$(function() { $('.widget-two').widgetTwo(); });
$(function() { $('.widget-three').widgetThree(); });
$(function() { $('.widget-four').widgetFour(); });

现在，在你责备我之前，让我声明，我知道在大多数情况下(但不是全部).widget-one 是一个糟糕的选择器，因为它在旧浏览器上会获取所有元素在 dom 中检查类(class)。

问题是，这些小部件不是一次性的，我可能无法提前知道它们的存在(在 Web 应用程序 View 中生成，基于逻辑或产品循环或其他东西可能有 2-3 次) .

于是就有了下面的解决方案:

$(function() { $('#WidgetOne').widgetOne(); });

和

<span id="WidgetOne_12345">...</span>
<script type="javascript">
   $(function() { $('#WidgetOne_12345').widgetOne(); });
</script>

想法

这不是一个新问题，从第一天开始就存在了。仍然让我感到困惑的是，即使在这种成熟度下，用 jQuery 解决这个问题也是如此困难。要么，要么我遗漏了一些明显的东西。

不幸的是，google-fu 在这个问题上的结果很糟糕，因为每个人都建议以下两种方法之一:

• jQuery 的 .live() 或 .delegate() 包罗万象的事件处理程序。这在基本层面上是可怕的。 .delegate() 不会那么糟糕，但这需要插件/widget/control/whatever 完全是事件驱动的。这肯定会在很多情况下起作用，但在其他情况下却行不通。它还使跟踪和组织代码变得非常复杂。我什至不会进入 .live()，对于大型复杂站点，事件冒泡很慢，当您将足够多的组件放在一起时，要匹配的查询列表会变大，每次点击/聚焦/whatever 事件在整个页面上逐渐变慢。
• 涉及 liveQuery 等插件的解决方法，这肯定是一个非常酷的插件，但它似乎主要是为了解决一个不同的问题(ajax/dom 创建带来的新项目的问题)，并且仍然会随着查询的增加而逐渐变慢需要进行检查。

结论

必须有更好的方法，我知道必须有一个。我已经用尽了关于这个主题的 google fu，但仍然找不到比 jQuery 1.3.2 更新的想法/概念/示例/讨论，也找不到宏伟的蓝图。在一个完美的世界中，这不会是一个问题，因为每个人都会使用具有现代标准的智能浏览器和一个像样的 javascript 引擎，并且 .class 查询不会花费亿万年，但不幸的是，这不是情况。

我正在寻找关于如何解决这个问题的想法，在经历了许多与此类似的 SO 问题以及许多关于各种 jquery 技术的文章之后，我觉得如果信息在那里，它就会被许多误报和“101 个最佳 jQuery 插件”结果出现在任何使用 jQuery 的搜索中。我知道有人遇到过这种困境。

想法、链接、示例，任何东西都是受欢迎的，只是必须有更好的方法。

Answer 1

只是头脑 Storm ，我可以想到一件事可以减少您的“选择和初始化”时间，但可能是开发过程中痛苦的权衡。此外，您不能真正将 params 与此方法一起使用，但如果您遇到的情况与您上面描述的情况完全相同，那么这可能是值得的。

如果您坚持每个初始化元素都具有相同的类(例如小部件)，则可以创建一个初始化小部件的选择器系统。

在您的 HTML 中构造类而不是像这样:

<div class="widget" widgetFunc="widgetOne"></div>
<div class="widget" widgetFunc="widgetTwo"></div>

等等

您的 jquery init 函数将如下所示:

var $widgetInitializerElements = $('.widget');

$.each($widgetInitializerElements,function(){ 
    var initialize = window[$(this).attr('widgetFunc')];

    if(typeof initialize === 'function'){
        $(this).initialize(); 
    }
});

因此这会将您的选择减少到一次，并使您的 jquery 非常干净。你只需要担心所有那些可能不可行的 HTML 元素，如果你需要添加参数来初始化调用，你会遇到麻烦:/