seajs模块化jQuery与jQuery插件

把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();
});

可以看到，插件的构造函数只执行了一次。

相关与参考文章：

用YUI Compressor压缩SeaJS单独模块文件

seajs模块的合并

seajs 使用jquery插件

CMD 模块定义规范

用var $ = require(‘jquery’);和require(‘jquery’);有什么区别吗？

Javascript模块化编程（一）：模块的写法

如何preload CDN 中的jquery ？

CMD 模块定义规范

如何改造现有文件为 CMD 模块

转载自：http://julabs.com/blog/seajs-jquery-and-plugins/