jquery - 初始化自己的插件

Question

我为我的客户编写了一些 jquery 插件。我想编写一个函数来初始化每个已加载的插件。

示例:

<script src="/Scripts/jquery.plugin1.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.plugin2.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.initializer.min.js")" type="text/javascript"></script>

这里我加载了plugin1和plugin2。 Plugin1 应附加到类名为“ajax”的所有链接，plugin2 应附加到类名为“test2”的所有 div:

$('document').ready(function(){
     $('a.ajax').plugin1();
     $('div.test2').plugin2();
}

我知道我可以使用jQuery().pluginName来检查插件是否存在。但我想要一种更精简的方式。所有加载的插件都可以在数组中注册一个初始化函数吗？或者类似我在 document.ready 中可以迭代和调用的函数？

喜欢:

 //in plugin1.js
 myCustomPlugins['plugin1'] = function() { $('a.ajax').plugin1(); };

 // and in the initializer script:
 myCustomPlugins.each(function() { this(); };

我猜这一切都归结为三个问题:

1. 如何使用 jquery“全局”数组？
2. 如何迭代该数组以调用已注册的方法
3. 有更好的方法吗？

更新以回答评论

a) 因为我正在为我的客户构建一个基于 ASP.Net MVC3 的新框架，并且他们的所有开发人员都习惯了 WebForms 中的拖/放功能。我想让过渡尽可能顺利，因为他们不了解 jquery。他们只需包含 jquery 脚本即可获得新功能，这是一个很大的优势。 当他们有更好的 jquery 知识时，使用单独的初始化脚本也可以禁用此功能。

b) 我使用 Ajax 通过返回 HTML 来更新一些 div。 HTML 需要经过所有插件的处理才能添加插件功能，否则所有更新的部分将无法按上述方式工作。

为什么我要这样做很重要？ :) 这并不是很复杂的事情。

Answer 1

您可以像这样创建一个数组:

$.myPlugins = [
    {plugin: "plugin1", selector: "a.ajax"},
    {plugin: "plugin2", selector: "div.test2"}
];

还有一个运行所有插件的函数，如下所示:

function initPlugins() {
    for (var i = 0, item; item = $.myPlugins[i]; i++) {
        $(item.selector)[item.plugin]();
    }
}

现在在 DOM 就绪且 AJAX 完成时运行该函数:

$(document).ready(initPlugins).ajaxComplete(initPlugins);

但是，使用此方法时，某些元素可能会被多次初始化。您可以在 initPlugins() 中使用类作为标志来防止这种情况发生:

function initPlugins() {
    for (var i = 0, item; item = $.myPlugins[i]; i++) {
        $(item.selector).not(".already").addClass("already")[item.plugin]();
    }
}