RequireJS学习笔记（二）

作者: shuiguang
时间: 2015-09-11
分类: Javascript

上一篇介绍requirejs的模块基本用法，参见《RequireJS学习笔记（一）》

这里主要介绍使用requirejs和jquery插件的用法。主要分为不支持AMD和支持AMD的jquery插件这两种情况。

以jquery.colorize这个插件（不支持AMD）为例，需要获取全局的$和jQuery，而我们通过jquery-private.js将$和jQuery已经设置为noConflict，直接加载会报错，Uncaught ReferenceError: jQuery is not defined。config.js代码如下

require.config({
    baseUrl: './',
    paths: {
        'jquery': 'jquery-1.7.1.min',
        'jquery-private': 'jquery-private',
        'jquery.colorize': 'jquery.colorize-2.0.0',
        'app': 'app'
    },
    map: {
        // '*' means all modules will get 'jquery-private'
        // for their 'jquery' dependency.
        '*': { 'jquery': 'jquery-private'},
        // 'jquery-private' wants the real jQuery module
        // though. If this line was not here, there would
        // be an unresolvable cyclic dependency.
        'jquery-private': { 'jquery': 'jquery'}
    },
    urlArgs: "t=" + (new Date()).getTime()
});
require(['jquery', 'jquery.colorize'], function($) {
    $(document).ready(function(){
        $("#tbl1").colorize();
    });
});

即使你添加shim方法，仍然无法在jquery.colorize中获取到$和jQuery变量：Uncaught TypeError: Cannot read property 'fn' of undefined。

require.config({
    baseUrl: './',
    paths: {
        'jquery': 'jquery-1.7.1.min',
        'jquery-private': 'jquery-private',
        'jquery.colorize': 'jquery.colorize-2.0.0',
        'app': 'app'
    },
    shim: {
        'jquery.colorize': {
            deps: ['jquery'],
            exports: 'jQuery.fn.colorize'
        }
    },
    map: {
        // '*' means all modules will get 'jquery-private'
        // for their 'jquery' dependency.
        '*': { 'jquery': 'jquery-private'},
        // 'jquery-private' wants the real jQuery module
        // though. If this line was not here, there would
        // be an unresolvable cyclic dependency.
        'jquery-private': { 'jquery': 'jquery'}
    },
    urlArgs: "t=" + (new Date()).getTime()
});
require(['jquery', 'jquery.colorize'], function($) {
    $(document).ready(function(){
        $("#tbl1").colorize();
    });
});

解决办法：

①.去掉map段和jquery-private模块，且保留shim方法，也就是让jquery污染$和jQuery这2个变量。

require.config({
    baseUrl: './',
    paths: {
        'jquery': 'jquery-1.7.1.min',
        'jquery.colorize': 'jquery.colorize-2.0.0',
        'app': 'app'
    },
    shim: {
        'jquery.colorize': {
            deps: ['jquery'],
            exports: 'jQuery.fn.colorize'
        }
    },
    urlArgs: "t=" + (new Date()).getTime()
});
require(['jquery', 'jquery.colorize'], function($) {
    $(document).ready(function(){
        $("#tbl1").colorize();
    });
});

②.改写jquery.colorize插件代码，变成兼容AMD定义的插件，改写格式如下：

;(function (factory) {
    if (typeof define === "function" && define.amd) {
        // AMD模式
        define([ "jquery" ], factory);
    } else {
        // 全局模式
        factory(jQuery);
    }
}(function (jQuery) {
    $ = jQuery;
    //这里粘贴插件的所有代码
    //……
}));

使用第二种方法改写的插件即使单独和jquery使用也没有问题，推荐在requirejs中以模块引用。注意，此时没必要在config.js中使用shim方法了，因为你改写的代码中有define([ "jquery" ], factory);申明了依赖的jquery。所以config.js的代码如下：

require.config({
    baseUrl: './',
    paths: {
        'jquery': 'jquery-1.7.1.min',
        'jquery-private': 'jquery-private',
        'jquery.colorize': 'jquery.colorize-2.0.0',
        'app': 'app'
    },
    map: {
        // '*' means all modules will get 'jquery-private'
        // for their 'jquery' dependency.
        '*': { 'jquery': 'jquery-private'},
        // 'jquery-private' wants the real jQuery module
        // though. If this line was not here, there would
        // be an unresolvable cyclic dependency.
        'jquery-private': { 'jquery': 'jquery'}
    },
    urlArgs: "t=" + (new Date()).getTime()
});
require(['jquery', 'jquery.colorize'], function($) {
    $(document).ready(function(){
        $("#tbl1").colorize();
    });
});

这两种方式提供完整的demo下载：

GLOBAL.zip