詳解JavaScript模組化開發
- 黄舟原創
- 2017-02-21 11:57:561495瀏覽
什麼是模組化開發？
前端開發中，起初只要在script標籤中嵌入幾十上百行程式碼就能實現一些基本的互動效果，後來js被重視，應用程式也廣泛起來了，jQuery，Ajax，Node.Js ，MVC，MVVM等的助力也使得前端開發得到重視，也使得前端專案越來越複雜，然而，JavaScript卻沒有為組織程式碼提供任何明顯幫助，甚至沒有類別的概念，更不用說模組（module）了，那什麼是模組呢？
一個模組就是實現特定功能的文件，有了模組，我們就可以更方便地使用別人的程式碼，想要什麼功能，就載入什麼模組。模組開發需要遵循一定的規範，否則就都亂了套。
根據AMD規範，我們可以使用define定義模組，使用require呼叫模組。
目前，通行的js模組規格主要有兩種：CommonJS和AMD。
AMD規格
AMD 即Asynchronous Module Definition，中文名是「非同步模組定義」的意思。它是一個在瀏覽器端模組化開發的規範，伺服器端的規範是CommonJS
模組將會被非同步加載，模組載入不影響後面語句的運作。所有依賴某些模組的語句均放置在回調函數中。
AMD 是 RequireJS 在推廣過程中對模組定義的規範化的產出。
define() 函數
AMD規格只定義了一個函數 define，它是全域變數。函數的描述為：
define(id?, dependencies?, factory);
參數說明：
id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。 依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。 依赖参数是可选的，如果忽略此参数，它应该默认为["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。 工厂方法factory，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。
模組名稱的格式
模組名稱用來唯一識別定義中模組，它們同樣在依賴性數組中使用：
模块名是用正斜杠分割的有意义单词的字符串 单词须为驼峰形式，或者"."，".." 模块名不允许文件扩展名的形式，如“.js” 模块名可以为 "相对的" 或 "顶级的"。如果首字符为“.”或“..”则为相对的模块名 顶级的模块名从根命名空间的概念模块解析 相对的模块名从 "require" 书写和调用的模块解析
使用require 和exports
建立一個名為"alpha"的模組，使用了require，exports，和名為"beta"的模組:
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});require API 介紹：http://www.php.cn/
AMD規格中文版：http://www.php.cn/(%E4%B8%AD%E6 %96%87%E7%89%88)
目前，實作AMD的函式庫有RequireJS 、curl 、Dojo 、Nodules 等。
CommonJS規範
CommonJS是伺服器端模組的規範，Node.js採用了這個規範。 Node.JS首先採用了js模組化的概念。
根據CommonJS規範，一個單獨的檔案就是一個模組。每一個模組都是一個單獨的作用域，也就是說，在該模組內部定義的變量，無法被其他模組讀取，除非定義為global物件的屬性。
輸出模組變數的最佳方法是使用module.exports物件。
var i = 1;
var max = 30;
module.exports = function () {
for (i -= 1; i++ < max; ) {
console.log(i);
}
max *= 1.1;
};上面程式碼透過module.exports對象，定義了一個函數，該函數就是模組外部與內部通訊的橋樑。
載入模組使用require方法，該方法讀取一個檔案並執行，最後傳回檔案內部的module.exports物件。
CommonJS 規格：http://www.php.cn/
RequireJS和SeaJS
RequireJS由James Burke創建，他也是AMD規範的創始人。
define方法用來定義模組，RequireJS要求每個模組放在單獨的檔案裡。
RequireJS 和 Sea.js 都是模組載入器，倡導模組化開發概念，核心價值是讓 JavaScript 的模組化開發變得簡單自然。
SeaJS與RequireJS最大的差別:
SeaJS對模組的態度是懶執行, 而RequireJS對模組的態度是預執行
不明白？來看看這篇圖文並茂的文章吧：http://www.php.cn/
RequireJS API:http://www.php.cn/
RequireJS的用法：http:/ /www.php.cn/
為什麼要用requireJS
試想一下，如果一個網頁有很多的js文件，那麼瀏覽器在下載該頁面的時候會先載入js文件，從而停止了網頁的渲染，如果檔案越多，瀏覽器可能會失去回應。其次，要確保js檔案的依賴性，依賴性最大的模組（檔案）要放在最後加載，當依賴關係很複雜的時候，程式碼的編寫和維護都會變得困難。
RequireJS就是為了解決這兩個問題而誕生的：
（1）实现js文件的异步加载，避免网页失去响应； （2）管理模块之间的依赖性，便于代码的编写和维护。
RequireJS檔案下載：http://www.php.cn/
AMD和CMD
CMD（Common Module Definition） 通用模組定義。此規範明確了模組的基本書寫格式和基本互動規則。該規範是在國內發展出來的。 AMD是依賴關係前置，CMD是按需載入。
在 CMD 規格中，一個模組就是一個檔案。程式碼的書寫格式如下：
define(factory);
factory 為函數時，表示是模組的建構方法。執行此構造方法，可以得到模組向外提供的介面。 factory 方法在執行時，預設會傳入三個參數：require、exports 和module：
define(function(require, exports, module) {
// 模块代码
});require是可以把其他模組導入進來的一個參數，而export是可以把模組內的一些屬性和方法導出的。
CMD規範位址：http://www.php.cn/
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
對於依賴的模組，AMD 是提前執行，CMD 是延遲執行。
AMD:提前执行（异步加载：依赖先执行）+延迟执行 CMD:延迟执行（运行到需加载，根据顺序执行）
CMD 推崇依賴就近，AMD 推崇依賴前置。看如下程式碼：
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})另外一个区别是：
AMD:API根据使用范围有区别，但使用同一个api接口 CMD:每个API的职责单一
AMD的优点是：异步并行加载，在AMD的规范下，同时异步加载是不会产生错误的。
CMD的机制则不同，这种加载方式会产生错误，如果能规范化模块内容形式，也可以
jquery1.7以上版本会自动模块化，支持AMD模式：主要是使用define函数，sea.js虽然是CommonJS规范，但却使用了define来定义模块
所以jQuery已经自动模块化了
seajs.config({
'base':'/',
'alias':{
'jquery':'jquery.js'//定义jQuery文件
}
});define函数和AMD的define类似：
define(function(require, exports, module{
//先要载入jQuery的模块
var $ = require('jquery');
//然后将jQuery对象传给插件模块
require('./cookie')($);
//开始使用 $.cookie方法
});sea.js如何使用？
引入sea.js的库
如何变成模块？
define
-
3.如何调用模块？
-exports -sea.js.use -
4.如何依赖模块？
-require <script type="text/javascript"> define(function (require,exports,module) { //exports : 对外的接口 //requires : 依赖的接口 require('./test.js');//如果地址是一个模块的话，那么require的返回值就是模块中的exports })2cacc6d41bbb37262a98f745aa00fbf0
sea.js 开发实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽的模块化开发实践</title>
<style type="text/css">
#p1{ width:200px; height:200px; background:black; position:absolute; display:none;}
#p2{ width:30px; height:30px; background:yellow; position:absolute; bottom:0; right:0;}
#p3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
//A同事 ：
seajs.use('./main.js');
</script>
</head>
<body>
<input type="button" value="确定" id="input1" />
<p id="p1">
<p id="p2"></p>
</p>
<p id="p3"></p>
</body>
</html>A同事
//A同事写的main.js:
define(function (require,exports,module) {
var oInput = document.getElementById('input1');
var op1 = document.getElementById('p1');
var op2 = document.getElementById('p2');
var op3 = document.getElementById('p3');
require('./drag.js').drag(op3);
oInput.onclick = function () {
op1.style.display = 'block';
require('./scale.js').scale(op1,op2);
require.async('./scale.js', function (ex) {
ex.scale(op1,op2);
})
}
});B同事
//B同事写的drag.js:
define(function(require,exports,module){
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 );
obj.style.left = L + 'px';
obj.style.top = T + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
exports.drag = drag;//对外提供接口
});C同事
//C同事写的scale.js:
define(function(require,exports,module){
function scale(obj1,obj2){
var disX = 0;
var disY = 0;
var disW = 0;
var disH = 0;
obj2.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX;
disY = ev.clientY;
disW = obj1.offsetWidth;
disH = obj1.offsetHeight;
document.onmousemove = function(ev){
var ev = ev || window.event;
var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100);
var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100);
obj1.style.width = W + 'px';
obj1.style.height = H + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
exports.scale = scale;
});D同事
// D同事的range.js--限定拖拽范围
define(function(require,exports,module){
function range(iNum,iMax,iMin){
if( iNum > iMax ){
return iMax;
}
else if( iNum < iMin ){
return iMin;
}
else{
return iNum;
}
}
exports.range = range;
});
requirejs开发实例
require.config是用来定义别名的，在paths属性下配置别名。然后通过requirejs(参数一，参数二)；参数一是数组，传入我们需要引用的模块名，第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。
main.js文件
//别名配置
requirejs.config({
paths: {
jquery: 'jquery.min' //可以省略.js
}
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
$('body').css('background-color','red');
});引入模块也可以只写require()。requirejs通过define()定义模块，定义的参数上同。在此模块内的方法和变量外部是无法访问的，只有通过return返回才行.
define 模块
define(['jquery'], function ($) {//引入jQuery模块
return {
add: function(x,y){
return x + y;
}
};
});将该模块命名为math.js保存。
main.js引入模块方法
require(['jquery','math'], function ($,math) {
console.log(math.add(10,100));//110
});没有依赖
如果定义的模块不依赖其他模块，则可以：
define(function () {
return {
name: "trigkit4",
age: "21"
}
});AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。
以上就是详解JavaScript模块化开发的内容，更多相关内容请关注PHP中文网（www.php.cn）！