jQuery,寻找一种更智能的初始化方法

Question

我正在寻找一种更好的方法来管理大型项目中的全局组件/插件/窗口小部件初始化.它有许多jQuery驱动的组件,我想快速有效地初始化,在浏览互联网之后,我只是真正找到了在小型网站中只有现实/高效的短视示例.

问题

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

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

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

问题是,这些小部件不是一次性的,我可能不会提前知道它们存在(在Web应用程序视图中生成,可能是基于逻辑或产品循环的2-3次).

所以以下解决方案已经出来:

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

和

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

思考

这不是一个新问题,它从第一天开始就存在.它仍然让我感到困惑,即使在这个成熟的水平上,使用jQuery也很难解决这个问题.无论是那个还是我都错过了一些明显的东西.

不幸的是,google-fu在这个问题上的表现非常糟糕,因为每个人都建议以下两点之一:

• jQuery .live()或.delegate()catch-all事件处理程序.这在基本层面上是可怕的..delegate()不会那么糟糕,但这要求插件/小部件/控件/完全由事件驱动.这肯定会在很多情况下起作用,但在其他情况下则不然.它还使跟踪和组织代码非常复杂.我甚至不会进入.live(),对于大型复杂站点,事件冒泡很慢并且当你将足够的组件放在一起时,匹配的查询列表变得很大,使得每个点击/焦点/任何事件在整体上逐渐变慢整个页.
• 涉及插件的解决方案,例如liveQuery,这是一个非常酷的插件,但它主要似乎是为了解决一个不同的问题(由ajax/dom创建引入新项目的问题),并且仍然会逐渐增加堆叠的查询越多,需要检查的查询越多.

结论

有有是一个更好的办法,我知道必须有一个.我已经厌倦了我的google fu这个主题,但仍然找不到比jQuery 1.3.2更新的想法/概念/例子/讨论或者考虑到宏伟的图片.在一个完美的世界中,这不会是一个问题,因为每个人都会使用具有现代标准的智能浏览器和一个不错的javascript引擎,并且.class查询不会花费很多时间,但不幸的是情况并非如此.

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

想法,链接,例子,任何事情都是受欢迎的,只需要有更好的方法.

Answer 1

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

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

在 HTML 中构造类，如下所示：

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

ETC。

你的 jquery init 函数将如下所示：

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

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

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

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