把jQuery修改成SeaJs的模块代码非常简单,就是用下面这段语句将jQuery源代码包裹起来:
define('jquery',[],function(require, exports, module){
//这里放jQuery源代码
module.exports = jQuery;
});
也可以加一个判断,如果define已经被定义,就把jQuery模块化,如果define没有被定义,正常执行jQuery代码:
/*
* http://julabs.com
*/
(function(factory) {
if (typeof define === 'function') {
define('/jquery', [], factory);
}
else {
factory();
}
})(function(require) {
//这里放jQuery源代码
if (require) return $.noConflict(true);
});
如果你用的是jQuery1.7版本以上的,那就更方便了。可以看下jQuery源码的最后几行,你会发现类似下方的代码:
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
如果判断语句为真,那么jQuery就会自动模块化。所以改下判断语句,只留typeof define === "function"
,jQuery便可以自动模块化:
if ( typeof define === "function") {
define( "jquery", [], function () { return jQuery; } );
}
模块化后的调用代码如下:
<script src="/script/sea.js"></script>
<script>
/*
* http://julabs.com
*/
seajs.config({
'base':'/script',
'alias':{
'jquery':'jquery.sea.js'
}
});
seajs.use(['jquery'],function($){
console.log($);
});
</script>
jQuery插件的模块化:
以一个简单的插件为例:
/*!
* http://julabs.com
*/
(function($){
$.sayHello = function(){
console.log("Hello");
};
})(jQuery)
一般模块化代码像下面这样:
/*!
* http://julabs.com
*/
(function (factory) {
if (typeof define === 'function') {
// 如果define已被定义,模块化代码
define('jquerySayHello',['jquery'], function(){
// 返回构造函数
return factory
});
} else {
// 如果define没有被定义,正常执行插件代码
factory(jQuery);
}
}(function ($) {
// 这里才是插件真正的构造函数
console.log('init'); // 注意这行代码
$.sayHello = function(){
console.log("Hello");
};
}));
使用插件的代码如下:
seajs.config({
'base':'/script',
'alias':{
'jquery':'jquery.sea.js',
'jquerySayHello':'jquery.sayHello.sea.js'
}
});
seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
jquerySayHello($); // 初始化插件
$.sayHello();
});
seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
jquerySayHello($); // 初始化插件
$.sayHello();
});
注意我在插件构造函数里面写的console.log('init');
这段代码,可以看到,如果我请求两次插件,插件就要初始化两次。这个虽然可以让代码只在使用时才执行,减少了资源消耗,但如果一个页面中多处需要这个插件的话,就要执行很多次。如果改成下面这种,直接在本模块里就执行:
/*!
* http://julabs.com
*/
(function (factory) {
if (typeof define === 'function') {
// 如果define已被定义,模块化代码
define('jquerySayHello',['jquery'], function(require,exports,moudles){
factory(require('jquery')); // 初始化插件
return jQuery; // 返回jQuery
});
} else {
// 如果define没有被定义,正常执行jQuery
factory(jQuery);
}
}(function ($) {
console.log('init');
$.sayHello = function(){
console.log("Hello");
};
}));
使用插件的代码如下:
/*
* http://julabs.com
*/
seajs.config({
'base':'/script',
'alias':{
'jquery':'jquery.sea.js',
'jquerySayHello':'jquery.sayHello.sea.js'
}
});
seajs.use(['jquery','jquerySayHello'],function($){
$.sayHello();
});
seajs.use(['jquery','jquerySayHello'],function($){
$.sayHello();
});
可以看到,插件的构造函数只执行了一次。
相关与参考文章: