您的位置:首页 > Web前端 > JQuery

jQuery插件支持AMD的写法改造

2017-10-20 09:00 429 查看
明确需求:改造自己的jquery插件,让其支持AMD的加载方式

原jQuery插件的写法

(function ($) {
$.fn.myPlugin = function () {
// 插件代码
};
})(jQuery);


改造后的jQuery插件写法

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


在Requirejs中配置

关键代码示例:

require.config({
baseUrl: './',
paths: {
jquery: ['lib/jquery/jquery-1.12.4'],
jqueryYourPlugin: ['lib/jquery/jquery.yourplugin']
}
});


在需要的模块中动态加载

define(['jquery',
'jqueryYourPlugin'],
function ($, jqueryYourPlugin) {
// 在这里开始使用你的插件代码,通过选择器调用或者直接调用,根据自己的插件代码 eg:
// $("your selector").yourMethod();
});


这样直接就可以使用requirejs的方式动态加载jquery及其插件了,调用方式和全局调用方式相同。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: