js模块化编程一：模块化函数的介绍

js模块化一：模块化函数的介绍

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。

原始写法如下：

function m1(){
　　　　//...
　　}

　　function m2(){
　　　　//...
　　}

上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。

这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

对象写法如下：

　var module1 = new Object({

　　　　_count : 0,

　　　　m1 : function (){
　　　　　　//...
　　　　},

　　　　m2 : function (){
　　　　　　//...
　　　　}

　　});

或

var obj = {
			count:0,
			m1:function() {
				alert("m1...");
			},
			m2:function() {
				alert("m2...");
			}
	}

这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

立即函数的写法(核心)

/*
	 *
	 * 立即执行函数，不暴漏私有成员 
	 */
	var modul = (function() {
		var count = 1;
		
		var m1 = function() {
			console.log(count);
			console.log("m1");
		};
		
		var m2 = function() {
			console.log("m2");
		};
		
		return {
			mtest:m1,
			m2:m2
		}
		
	})();

这样的写法可以达到不会暴露私有成员变量的使用。使用时候根据return中返回的key进行操作。

传递参数的立即函数的写法：

var modul = (function(a) {
		var count = 1;
		
		var m1 = function() {
			console.log(a);
			console.log("m1");
		};
		
		var m2 = function() {
			console.log("m2");
		};
		
		return {
			mtest:m1,
			m2:m2
		}
		
	})(8);

这样写就将8赋值了变量参数a。

若上面的modul要增加方法该怎么办？

同上传递参数一样的思路。

/*
	 *
	 * 放大模式，可以添加新的方法
	 */
    modul = (function(mod) {
		mod.m3 = function() {
			console.log("m3");
		};
		return mod;
	})(modul);

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。使用立即函数的写法可以达到内部函数变量不与外部的函数变量引起冲突的问题。