首页 > Javascript > RequireJS学习笔记(二)

RequireJS学习笔记(二)

上一篇介绍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

AMD.zip

如果项目中只会用到jquery和一些jquery的插件,不存在$变量污染的问题,可以使用第一种方案(GLOBAL);如果项目中对$变量要求隔离,只能改写插件了,毕竟也不会麻烦到哪去(AMD)。

下一篇介绍requirejs中如何使用requirejs提供的插件实现响应的功能,例如加载模板和css文件。RequireJS学习笔记(三)


本文地址:http://blog.zhengshuiguang.com/js/requirejs-2.html

转载随意,但请附上文章地址:-)

标签:jquery插件 requirejs 模块

相关文章

评论已关闭