Javascript模块化开发－轻巧自制

一、前言

现在javascript的流行，前端的代码越来越复杂，所以我们需要软件工程的思想来开发前端。模块化是必不可少的，这样不仅能够提高代码的可维护性、可扩展性以及鲁棒性，更大的好处就是能够提升整个团队的开发效率，也能够让新进的程序员更快的接手工作。今天晚上根据前辈们的经验，写啦一个简单的模块定义的封装组件，当是练手吧。不过感觉还是蛮好用的。

二、学习模块化前我们应该先了解点什么呢？

其实突然就学习模块化的javascript开发，那还是比较丈二和尚，摸不着头脑的。不过如果是做过后台开发的程序员们，可能对于模块化的开发思想并不陌生，因为后台的这方面技术已经很熟悉了。那么这里我就分享一下前端javascript模块化开发的学习。

1. 了解模块化开发思想

如果有软件工程背景，那么这一思想就是你自身就应该掌握的。模块（module）就是可以组合、分解以及更换的单元，其实也满足组合大于继承等这些带来的好处吧。如果看成一个系统的话，我们可以从软件体系结构来理解，模块是较大系统中的独立部件，功能、状态与接口反映外部特性，逻辑反映的是内部特性。

2. 了解前端模块化开发带来的好处

模块化的开发模式为前端带来了新大陆，这点不得不承认，现在前端的越发成熟，需要软件工程的这种思想。 玉伯也发表过前端模块化开发的价值

3.了解目前技术，哪些和模块化开发沾边

1. 开发功能模块的时候，可以采用Eva的解决方案（YUI3 + Minify）。

2. 使用流行的javascript模块加载框架：seajs。

3. 如果喜欢轻巧的东西，也可以尝试带刀的easy.js，不错的一个模块加载框架。

4. 也可以尝试支付宝的Alice，这是一款基于CMD规范的东东，首页倒是挺小清新的。

5. 如今比较火的NodeJS这是必须要了解和学习的。

好啦，了解完上面那些技术后，模块化的前端模式应该很熟悉了，如果想扎实一下的话还可以了解一下AMD、CMD规范，具体是什么东西，google一下。接下来我们就来构造一个简单的模块定义器吧，其实写的时候还挺简单的，不过主要是吸收思想，这样学习技术才不会跟不上时代。

三、轻巧范例

1. 模块的数据结构（JSON表示）

1module: {
2	//模块名称
3	moduleName: moduleName,
4	//模块依赖集合
5	dependencies: dependencies,
6	//模块实例工厂
7	factory: factory
8}

2. 模块定义

所以我们最后能够形成模块定义的代码如下：

1define: function ( moduleName, dependencies, factory ) {
2	if( !modules[moduleName] ) {
3		//模块信息
4		var module = {
5			moduleName: moduleName,
6			dependencies: dependencies,
7			factory: factory
8		};
9
10		modules[moduleName] = module;
11	}
12
13	return modules[moduleName];
14}

3. 模块调用

这样我们就定义好了模块，那么我们的入口在哪里呢？我们还需要定义一个use的方法，来成为所谓的main，这样绑定好了才能够调用，现在想来程序也都是这样的。下面这段代码通过递归的产生模块依赖的所有实例，但是这里浪费了一部分instances数组的空间，有时间可以再做哈优化。

1use: function ( moduleName ) {
2	//使用括号的方式访问属性，实现动态的赋值（详情查阅“.”和[]的区别）
3	var module = modules[moduleName];
4
5	//产生单个实例
6	if( !module.instance ) {
7		var instances = [], 
8			len = module.dependencies.length - 1;
9
10			for( var i = 0; i <= len; i++ ) {
11				var dependency = module.dependencies[i],
12					instance = dependency.instance;
13
14				if( instance ) {
15					instances.push( instance );
16				} else {
17					//递归，将每次产生的实例放入数组
18					instances.push( arguments.callee( dependency ) );
19				}
20			}
21			//生成实例
22			module.instance = module.factory.apply( null, instances );
23	}
24
25	return module.instance;
26}

4. 完整代码

最后我形成完整的自己的小库。

1(function ( window, undefined ) {
2	var modules = {};
3	var Sky = {
4		//定义模块的基本信息
5		//1.模块名称，2.模块的依赖，3.产生实例的工厂
6		define: function ( moduleName, dependencies, factory ) {
7			if( !modules[moduleName] ) {
8				//模块信息
9				var module = {
10					moduleName: moduleName,
11					dependencies: dependencies,
12					factory: factory
13				};
14
15				modules[moduleName] = module;
16			}
17
18			return modules[moduleName];
19		},
20		//使用依赖
21		use: function ( moduleName ) {
22			var module = modules[moduleName];
23
24			//产生单个实例
25			if( !module.instance ) {
26				var instances = [], 
27					len = module.dependencies.length - 1;
28
29				for( var i = 0; i <= len; i++ ) {
30					var dependency = module.dependencies[i],
31						instance = dependency.instance;
32
33					if( instance ) {
34						instances.push( instance );
35					} else {
36						//递归，将每次产生的实例放入数组
37						instances.push( arguments.callee( dependency ) );
38					}
39				}
40				//生成实例
41				module.instance = module.factory.apply( null, instances );
42			}
43
44			return module.instance;
45		}
46	};
47
48	window.Sky = Sky || {};
49})(window);

下面我们来一个完整的例子来使用一下以上我们构建的轻巧代码。

1Sky.define("constant.PI", [], function() {
2	return 3.1415926;
3});
4
5Sky.define("shape.Circle", ["constant.PI"], function( pi ) {
6	function Circle(r) {
7		this.r = r || 0;
8	};
9
10	Circle.prototype.area = function() {
11		return pi * this.r * this.r;
12	};
13
14	return Circle;
15});
16
17Sky.define("shape.Rectangle", [], function() {
18	function Rectangle(width, height) {
19		this.width = width || 0;
20		this.height = height || 0;
21	};
22
23	Rectangle.prototype.area = function() {
24		return this.width * this.height;
25	};
26
27	return Rectangle;
28});
29
30Sky.define("ShapeTypes", ["shape.Circle", "shape.Rectangle"], function( Circle, Rectangle ) {
31	return {
32		'CIRCLE': Circle,
33		'RECTANGLE': Rectangle
34	};
35});
36
37Sky.define("ShapeFactory", ["ShapeTypes"], function( ShapeTypes ) {
38	return {
39		getShape: function(type) {
40			var shape;
41
42			switch (type) {
43			case 'CIRCLE':
44				shape = new ShapeTypes[type](arguments[1]);
45				break;
46			case 'RECTANGLE':
47				shape = new ShapeTypes[type](arguments[1], arguments[2]);
48				break;
49			}
50			return shape;
51		}
52	};
53});
54
55var ShapeFactory = Sky.use("ShapeFactory");
56console.log(ShapeFactory.getShape("CIRCLE").area());
57console.log(ShapeFactory.getShape("RECTANGLE", 2, 3).area());

是不是感觉js代码变得更加清爽了？嘿嘿，上面的例子也是面向接口的，大家也可以看看。

参考前辈：http://blog.jobbole.com/43649/

也许代码有出入，有些地方前辈写得不够细心的我补上了一些，嘿嘿，但是思路是参考这位前辈的。

原文出自：http://www.60sky.com/