浅谈Javascript模块化开发

---

本身接触过的几种javascript模块开发，因为水平有限，只能简单谈一谈。

---

当即执行匿名函数

因为javascript的函数做用域，将模块代码放入当即执行匿名函数中，防止污染全局变量。将须要对外提供的类或对象暴露到window对象中。

须要实例化的模块

定义

// mod1.js
(function(window) {

	var defaultOpts = {};

	// 外部传入一些配置选项，也可不传入以默认选项实现
	var Module1 = function(options) {
		this.options = $.extend(true, {}, defaultOpts, options);
		this.init();
	};

	// 将须要对外提供的方法加到原型链上
	Module1.prototype = {
		constructor : Module1,
		init : function() {
			this.initPage();
			this.initEvent();
			this.initOther();
		},
		initPage : function() {
		},
		initEvent : function() {
			method1();
		},
		initOther : function() {
		},
		getOne : function(){}
		// 其余须要对外提供的接口
	};
	
	// 不须要对外提供的方法
	function method1() {
	}
	
	// 暴露模块到window对象中
	window.Module1 = Module1;
}(window));

使用

// mod1
var mod1 = new Module1({opt1:"",opt2:""});
var one = mod1.getOne();
// mod2
var mod2 = new Module1();
var one = mod2.getOne();

不须要实例化的模块

定义

var mod1 = (function() {
	
	// !!!"全局"变量会共享
	var var1 = "abc";

	function getOne() {

	}

	function getTwo() {

	}

	var module1 = {
		m1 : getOne,
		m2 : getTwo
	};

	return module1;
})();

使用

var one = mod1.m1();
var two = mod1.m2();

总结

**优势：**不依赖第三方框架； **缺点：**使用前必须预先加载js文件；当模块存在依赖时，依赖js的加载顺序。

seajs中的模块化

seajs遵循CMD规范(RequireJS 遵循AMD规范) 。二者不一样之处。将匿名函数的写法替换成seajs的写法很是简单，只须要将声明和导出部分替换便可。

须要实例化的模块

定义

define(function(require, exports, module) {
	var defaultOpts = {};

	// 外部传入一些配置选项，也可不传入以默认选项实现
	var Module1 = function(options) {
		this.options = $.extend(true, {}, defaultOpts, options);
		this.init();
	};
	
	// 其余代码与匿名函数一致
	// ...
	
	// 导出再也不使用window对象
	module.exports = Module1;
});

使用

define(function(require, exports, module) {
	// 相对于sea.js的目录。模块目录就是md/mod1.js
	// require时能够省略.js
	var Module1 = require("md/mod1");
	
	// mod1
	var mod1 = new Module1({opt1:"",opt2:""});
	var one = mod1.getOne();
	// mod2
	var mod2 = new Module1();
	var one = mod2.getOne();
});

不须要实例化的模块

定义

define(function(require, exports, module) {
	var var1 = "abc";

	function getOne() {
	}
	function getTwo() {
	}

	// 导出再也不使用window对象
	module.exports = {
		m1 : getOne,
		m2 : getTwo
	};
});

使用

define(function(require, exports, module) {
	var mod1 = require("md/mod1");
	
	var one = mod1.m1();
	var two = mod1.m2();
});

参考

Sea.js官网 Why SeaJS seajs模块化jQuery与jQuery插件 如何改造现有文件为 CMD 模块

ECMAScript6中的模块化

为了解决JavaScript中的模块化问题，ECMAScript6在语言层面上实现了模块功能； ECMAScript6中有了块级做用域，当即执行匿名函数就再也不必要了; ECMAScript6新增了let命令，用来声明变量。它的用法相似于var，可是所声明的变量，只在let命令所在的代码块内有效。

须要实例化的模块

定义

// mod1.js
{
	class Module1 {
		let defaultOpts = {};
		constructor(options) {
			this.options = $.extend(true, {}, defaultOpts, options);
			this.init();
		}
		init() {
			this.initPage();
			this.initEvent();
			this.initOther();
		}
		initPage() {
		}
		initEvent() {
		}
		initOther() {
		}
		getOne() {
		}
	}
	// 自定义模块并导出
	export { Module1 }
}

使用

// 导入
import { Module1 } from 'md/mod1';
// mod1
let mod1 = new Module1({opt1:"",opt2:""});
let one = mod1.getOne();
// mod2
let mod2 = new Module1();
let one = mod2.getOne();

不须要实例化的模块

定义

{
	let var1 = "abc";

	function getOne() {
	}
	function getTwo() {
	}

	// 导出
	export {getOne, getTwo}
}

使用

// 导入
import { getOne, getTwo} from 'md/mod1';
let one = getOne();
let two = getTwo();
// 总体导入
import * as mod1 from 'md/mod1';
// 或者
module mod1 from 'md/mod1';
let one = mod1.m1();
let two = mod1.m2();

参考

ECMAScript 6入门