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

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

相关与参考文章:

此条目发表在 前端 分类目录,贴了 , 标签。将固定链接加入收藏夹。
  1. Pingback: seajs模块的合并 | 潔靜精微

  2. Pingback: 2014年9月-前端开发月刊 – 豪情 | 查问题

  3. Pingback: 博文收集 | apul的博客