使用動態加載功能擴展構建一個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腳本加載器或任何其他腳本加載模塊將幫助您明智地管理腳本，並僅在真正需要時才允許延遲加載腳本。