js模块化和使用
很久以前就知道js模塊化開發(fā)可以使用require.js和sea.js，就一直沒去看看。最近在了解查看的，度一下require.js相關(guān)的博客和文章，寫得真是操蛋的疼，都是互相抄來抄去，博主應(yīng)該都沒有自己實際去敲過，哪怕給我寫一個完整的簡單應(yīng)用示例我都可以上手，結(jié)果把自己折騰得......后面也看來sea.js，簡單明了，上手容易多（主要是別人寫的博客文檔好）。
什么是模塊化
關(guān)于這個概念還是推薦閱讀阮一峰老師的博文javascript模塊化編程
以下是則是從網(wǎng)上收集來概念：
模塊化是指在解決某一個復(fù)雜問題或者一系列的雜糅問題時，依照一種分類的思維把問題進行系統(tǒng)性的分解以之處理。模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理，可維護性更高的可管理的模塊的方式。可以想象一個巨大的系統(tǒng)代碼，被整合優(yōu)化分割成邏輯性很強的模塊時，對于軟件是一種何等意義的存在。（用自己的話來理解就是將js代碼規(guī)范管理起來以便更好的維護和使用）
CommonJS
CommonJS API定義很多普通應(yīng)用程序（主要指非瀏覽器的應(yīng)用）使用的API，從而填補了這個空白。它的終極目標是提供一個類似Python，Ruby和Java標準庫。這樣的話，開發(fā)者可以使用CommonJS API編寫應(yīng)用程序，然后這些應(yīng)用可以運行在不同的JavaScript解釋器和不同的主機環(huán)境中。在兼容CommonJS的系統(tǒng)中，你可以使用JavaScript開發(fā)以下程序：
(1).服務(wù)器端JavaScript應(yīng)用程序
(2).命令行工具
(3).圖形界面應(yīng)用程序
(4).混合應(yīng)用程序（如，Titanium或Adobe AIR）
模塊的規(guī)范:AMD&CMD
目前，通行的Javascript模塊規(guī)范共有兩種：CMD和AMD。
AMD（Asynchronous Module Definition:異步模塊定義）是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
CMD（Common Module Definition:公共模塊定義）是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
這些規(guī)范的目的都是為了 JavaScript 的模塊化開發(fā)，特別是在瀏覽器端的。目前這些規(guī)范的實現(xiàn)都能達成瀏覽器端模塊化開發(fā)的目的。
RequireJS 和 Sea.js 都是模塊加載器，倡導(dǎo)模塊化開發(fā)理念，核心價值是讓 JavaScript 的模塊化開發(fā)變得簡單自然。requirejs的使用代碼示例
這里還是推薦可以看看阮一峰老師寫的require.js的用法以及前端模塊化和AMD、CMD規(guī)范中require定義模塊的示例
博文開頭也說了，網(wǎng)上太多require互相抄的，沒有完整演示案例，初上手看得蛋疼。我這里就直接貼代碼演示自己親測成功簡單例子
我在使用requirejs的時候踩最多坑的引入文件的地址，所以請讀者注意define中引入其他模塊所寫的地址
演示代碼目錄結(jié)構(gòu)，html和js編碼對應(yīng)
示例一
1_math.js
/*語法結(jié)構(gòu)：1. define({函數(shù)方法}) */ // 一個沒有依賴性的模塊可以直接定義對象 define({name : "測試名字",// 加法add : function(num1, num2){return num1 + num2;} });1_require.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> <script type="text/javascript" src="js/require.js"></script> <script type="text/javascript"> /* 引入模塊使用 require([模塊地址],回調(diào)函數(shù)) 1. [模塊地址]可以忽略文件后綴.js 2. 回調(diào)函數(shù)的參數(shù)(math)對應(yīng)的是引入模塊(js/1_math.js)的別名(別名可以隨意命名) */ require(['js/1_math'],function(math){console.log(math.name);console.log(math.add(111,222)); }); </script> </html>結(jié)果
示例二
2_math.js
注意define中引入其他模塊地址，并不是以當前文件作為參照，而是2_require.html。
2_require.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> <script type="text/javascript" src="js/require.js"></script> <script type="text/javascript"> require(['js/2_math'], function(math){console.log(math.sub(222,111)); }); </script> </html>結(jié)果
示例三
3_math.js
3_require.html
效果
示例四
4_math.js（類似nodejs的用法）
// 一個使用了簡單CommonJS轉(zhuǎn)換的模塊定義 define(function(require,exports,module){// 引入其他模塊var math = require('js/1_math');console.log(math);// 導(dǎo)出（暴露方法：2種方式）// 第一種// exports.a = math.add;// 第二種module.exports = {a : math.add} });4_require.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> <script type="text/javascript" src="js/require.js"></script> <script type="text/javascript"> require(['js/4_math'],function(mytool){console.log(mytool.a(11,22));//33 }); </script> </html>效果
seajs的使用代碼示例
個人還是推薦使用seajs，簡單易懂，國人開發(fā)。推薦看張鑫旭老師寫的seajs中文文檔,很容易上手學(xué)習(xí)。
寫法跟request.js類似
演示目錄結(jié)構(gòu)
代碼示例1
1_math.js
define({add : function(a,b){return a + b;} });1_sea.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> <script type="text/javascript" src="js/sea.js"></script> <script type="text/javascript"> // 引用模塊方法seajs.use("地址"，回調(diào)函數(shù)) // 注意：需要從當前目錄(./)開始找，.js后綴可以省略 seajs.use("./js/1_math",function(math){console.log(math.add(111,222)); }) </script> </html>效果
代碼示例2
2_math.js
define(function(require,exports,module){// require的路徑是從當前文件所在路徑開始找var m = require('1_math');// 1. 第一種寫法// exports.add = m.add;// exports.sub = function(a,b){// return a - b;// }// 2.第二種寫法module.exports = {add : m.add,sub : function(a,b){return a - b;}} });2_sea.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> <script type="text/javascript" src="js/sea.js"></script> <script type="text/javascript"> seajs.use('./js/2_math',function(math){console.log(math.sub(222,111)); }) </script> </html>效果
總結(jié)
- 上一篇： ExecutorCompletionSe
- 下一篇： apache ab压力测试报错apr_s