淺談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入門