SeaJS模块化开发-基础篇

1.开发背景

SeaJS是一个commonJS规范(CMD)的JavaScript模块加载机制,实现JavaScript的模块化开发及加载机制.在多人协作开发是,当你的项目越来越复杂并且需要引用的模块越来越多的时候,或者文件之间存在依赖关系的时候,这时候SeaJS就真正发挥大的作用了,方便多人合作中代码编写以及后期进行维护!

2.开发使用方法

1.第一步就是先下载seajs,在需要开发的项目中进行引用就行,这里不再详说!

2.新建一个测试文件夹进行演示.如图

其中sea中放sea.js文件,js中假设是几个同事分工开发的几个模块.

现在发现,我跟另一个同事写的一个方法名都是show,在正常的开发中这种必然发生命名冲突,下面看看seajs是怎么工作的....

module1.js

//模块一
define(function(require,exports,module){
//sea下的参数是不可修改的
	//exports:对外提供接口的对象
	//require:模块之间依赖的接口
	function show(){
		alert("我是模块一中的show方法");
	}
	exports.show = show;
});

module2.js

//模块二
define(function(require,exports,module){
	//sea下的参数是不可修改的
	//exports:对外提供接口的对象,可以引出一点就是define模块里面的变量都是局部变量,必须通过exports进行对外暴露,否则其他模块不能进行访问
	function show(){
		alert("我是模块二中的show方法");
	}
	exports.show = show;
});

sea.html

		<script src="sea/sea.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//调用模块seajs.use() 其中接受两个参数,第一个参数是调用模块的地址(注意默认根目录是seajs下的目录),第二个是回调函数
			//根目录指向本文件
			seajs.use("./js/module1.js",function(ex){
				//ex是exports暴露的接口对象
				ex.show();
			});
			
			seajs.use("./js/module2.js",function(ex){
				//ex是exports暴露的接口对象
				ex.show();
			});
		</script>

执行结果：

先后执行两个模块,可见sea很好解决这个问题.这只是seajs的冰山一角,想更灵活的应用它,还得多多使用它,想了解它在项目中如何使用的,请看SeaJS模块发开发-项目篇.

问题延伸:exports是进行对外提供接口的对象,还有一个就是module.exports,这两者之间存在奇妙的关系.

两者区别:

http://weizhifeng.net/node-js-exports-vs-module-exports.html

http://www.cnblogs.com/pigtail/archive/2013/01/14/2859555.html