jQuery插件支持AMD的写法改造

来源:互联网 发布:银行数据录入员好做吗 编辑:程序博客网 时间:2024/05/16 04:48

明确需求:改造自己的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及其插件了,调用方式和全局调用方式相同。

原创粉丝点击