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'的所有链接和插件2到所有具有类名'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(); };

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

如何使用jquery“global”数组？
如何遍历该数组以调用已注册的方法
有更好的方法吗？

更新以回复评论

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]();
    }
}

初始化自己的插件

1 个答案: