构建一个动态加载功能扩展的jquery插件

Dynamic Plugin Extensions

I'm looking for techniques to allow a jquery plugin or jquery-based javascript library to automatically and dynamically add extensions to itself based on the current environment it finds itself within. Basically, I want to be able to reuse certain useful functions from other plugins if other plugins are loaded on a page. If my plugin detects they are not loaded, then I want to load my own version of those features.

我正在寻找允许jquery插件或基于jquery的javascript库根据它自己发现的当前环境自动和动态地添加扩展的技术。基本上，如果在页面上加载其他插件，我希望能够重用其他插件中的某些有用功能。如果我的插件检测到它们没有加载，那么我想加载我自己的那些功能版本。

For instance, my plugin needs date parsing and formatting features. One popular way of doing this is to use DateJS's parse() and toString(). But DateJS is a fairly heavyweight plugin, and my plugin doesn't need anywhere near the features it has. Other plugins have some similar features, such as UI DatePicker, FullCalendar, etc. If any of those plugins are in use on a page, I'd rather not load excessive and redundant code in my plugin and just use the other plugin's functions instead.

例如，我的插件需要日期解析和格式化功能。一种流行的方法是使用DateJS的parse（）和toString（）。但DateJS是一个相当重量级的插件，我的插件不需要它附近的功能。其他插件有一些类似的功能，如UI DatePicker，FullCalendar等。如果在页面上使用任何这些插件，我宁愿不在我的插件中加载过多和冗余的代码，而只是使用其他插件的功能。

So what I'd like to do is provide my own simplified version of parse() and format() in an external file from the main plugin file. If no other plugins are in use that provide the required parse() and format() features, then the main plugin file would load my dates extension plugin.

所以我想做的是在主插件文件的外部文件中提供我自己的简化版本的parse（）和format（）。如果没有其他插件正在使用，提供所需的parse（）和format（）功能，那么主插件文件将加载我的日期扩展插件。

If my main plugin detects that any of the plugins DateJS, UI DatePicker, or FullCalendar are loaded, then it would load a simple wrapper extension for it that would provide the required parse() and format() functions. These functions would basically just call the other plugin's parsing and formatting functions.

如果我的主插件检测到任何插件DateJS，UI DatePicker或FullCalendar被加载，那么它将为它加载一个简单的包装器扩展，它将提供所需的parse（）和format（）函数。这些函数基本上只调用另一个插件的解析和格式化函数。

Questions

What would be the best way to do feature detection to determine if a plugin is loaded?
什么是进行特征检测以确定插件是否已加载的最佳方法？
How would I dynamically load the proper additional extension script?
如何动态加载适当的附加扩展脚本？
How would I make sure that I don't load multiple extensions, overriding each other?
我如何确保不加载多个扩展，相互覆盖？
Are there other plugins that extend themselves? I'd like to examine them to see how they are doing it.
是否有其他插件可以扩展自己？我想检查它们，看看它们是如何做到的。

Detailed Example

If it helps to understand the question better, I'm envisioning files like this:

如果它有助于更好地理解这个问题，我想象这样的文件：

myplugin.js
myplugin-dates.js
myplugin-wrap-datejs.js
myplugin-wrap-datepicker.js
myplugin-wrap-fullcalendar.js

The file myplugin.js would be something like this (note this isn't a real jquery plugin, but more of a globally registered library):

文件myplugin.js会是这样的（注意这不是一个真正的jquery插件，而是更多的全局注册库）：

var MYPLUG = (function (parent, $) {

    var MYPLUG = parent;

    // Public functions
    MYPLUG.doSomething = function(dateString) { 
        ...
        var date = MYPLUG.Dates.parse(dateString);
        ...
        var prettyDate = MYPLUG.Dates.format(date);
        ...
    };

    return parent;
}(MYPLUG || {}, jQuery));

The file myplugin-dates.js would look something like this:

文件myplugin-dates.js看起来像这样：

var MYPLUG = (function (parent, $) {
    var Dates = parent.Dates = parent.Dates || {};

    Dates.parse = function(dateString) {
        // Custom code to parse dateString to a date
    }                       

    Dates.format = function(dateObj) {
        // Custom code to format dateObj as a string
    }                       

    return parent;
}(MYPLUG || {}, jQuery));

Finally, the file myplugin-wrap-fullcalendar.js plugin-wrapping extension might look like this:

最后，文件myplugin-wrap-fullcalendar.js插件包装扩展可能如下所示：

var MYPLUG = (function (parent, $) {
    var Dates = parent.Dates = parent.Dates || {};

    Dates.parse = function(dateString) {
        return $.fullCalendar.parseDate(dateString);
    }                       

    Dates.format = function(dateObj) {
        return $.fullCalendar.formatDate(dateObj, "mm/dd/yy");
    }                       

    return parent;
}(MYPLUG || {}, jQuery));

1 个解决方案

#1

I belive RequireJS, Ajax Script Loader or any other script loading module will help you to manage your script wizely and allow lazy loading of scripts only when you really need it.

我相信RequireJS，Ajax Script Loader或任何其他脚本加载模块将帮助您wizely管理您的脚本，并允许在您真正需要时延迟加载脚本。

#1