Require.js中使用jQuery 插件

175 阅读1分钟

虽然jQuery的支持AMD的API, 这并不意味着jQuery插件也是和AMD兼容的。

一般的jQuery 插件格式

(function ($) {
    $.fn.m​​yPlugin = function () {
        //你自己的插件代码
    };
})(jQuery);

不过我们稍微修改一下就可以使用Require.js加载一个jQuery插件:

;(function (factory) {
    if (typeof define === "function" && define.amd) {
        // AMD模式
        define([ "jquery" ], factory);
    } else {
        // 全局模式
        factory(jQuery);
    }
}(function ($) {
    $.fn.jqueryPlugin = function () {
        //插件代码
    };
}));

Require.js中使用jQuery UI组件也类似的,只要改造一下jQuery Widget Factory 代码就可以了,并且感觉jQuery UI的依赖关系加载就可以了。例如:

;(function (widgetFactory) {
 
    if (typeof define === "function" && define.amd) {
        // AMD模式
        define("jquery.ui.widget", ["jquery"], function () {
 
            widgetFactory(window.jQuery);
 
        });
    } else {
        // 全局模式
        widgetFactory(window.jQuery);
    }
}
(function ($, undefined) {
 
    // jQuery Widget Factory 代码
 
}));