构建具有动态加载功能扩展的 jquery 插件

Question

动态插件扩展

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

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

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

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

问题

1. 进行特征检测以确定插件是否已加载的最佳方法是什么？
2. 如何动态加载适当的附加扩展脚本？
3. 如何确保我不会加载多个扩展并相互覆盖？
4. 是否有其他插件可以自行扩展？我想检查一下他们是如何做到的。

详细示例

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

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

文件 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));

文件 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));

最后，文件 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));

Answer 1

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