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下载:
如果项目中只会用到jquery和一些jquery的插件,不存在$变量污染的问题,可以使用第一种方案(GLOBAL);如果项目中对$变量要求隔离,只能改写插件了,毕竟也不会麻烦到哪去(AMD)。
下一篇介绍requirejs中如何使用requirejs提供的插件实现响应的功能,例如加载模板和css文件。RequireJS学习笔记(三)
本文地址:http://blog.zhengshuiguang.com/js/requirejs-2.html
转载随意,但请附上文章地址:-)
评论已关闭