seajs模块的合并

seajs模块的合并比较简单,把几个的模块的代码放在同一个文件里面就可以了。如下:

/*
 * http://julabs.com
 */
define('pet',[],function(require, exports, module){
	return {
		'speak':function(){
			console.log('hello world');
		},
		'eat':function () {
			console.log('eat');
		}
	};
});

define('cat',['pet'],function(require, exports, module){
	var Pet = require('pet'),
	Cat = {};
	// 扩展 Cat 对象
	for(var i in Pet){
		if(Pet.hasOwnProperty(i)){
			Cat[i] = Pet[i];
		}
	}

	Cat.speak = function(){
		console.log('Miao');
	};

	return Cat;
});

define('dog',['pet'],function(require, exports, module){
	var Pet = require('pet'),
	Dog = {};
	// 扩展 Dog 对象
	for(var i in Pet){
		if(Pet.hasOwnProperty(i)){
			Dog[i] = Pet[i];
		}
	}

	Dog.speak = function(){
		console.log('Wang');
	};

	return Dog;
});

同一文件中的不同模块相互引用,直接require模块的ID名称就可以了。那么怎么在其它文件中引用合并文件中的模块呢?如果想调用cat模块,直接用下面的代码:

/*
 * http://julabs.com
 */
seajs.config({
	'base':'/demo',
	'alias':{
		'cat':'pet.js',
	}
});

seajs.use(['cat'],function(Cat){
	Cat.speak(); // 输出 "hello world"
	Cat.eat(); // 输出 "eat"
});

你会发现调用sepeak方法会输出”hello world“,而不是自己原以为的”Miao“。因为seaJs遇到这种问题,它会自动把放在第一个位置上的模块拿过来用,所以就出现了错误。如果想用合并文件里面的一个小模块,就要use两次才行。先use调用合并文件,然后再use下小模块,如下代码:

/*
 * http://julabs.com
 */
seajs.config({
	'base':'/demo',
	'alias':{
		'pet':'pet.js'
	}
});
seajs.use(['pet'],function(){
	// 调用一个模块
	seajs.use(['pet'],function (Pet) {
		Pet.eat(); // 输出 "eat"
	});

	// 调用两个模块
	seajs.use(['cat','dog'],function (Cat,Dog) {
		Cat.speak(); // 输出 "Miao"
		Cat.eat(); // 输出 "eat"
		Dog.speak(); // 输出 "Wang"
		Dog.eat(); // 输出 "eat"
	});
});

调用小模块的语句一定要包含在调用合并文件的语句里面才行。

相关与参考文章:

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