前端模塊化CMD規範seajs的使用
前端模塊規範有三種：CommonJs，AMD和CMD。
CommonJs用在伺服器端，AMD和CMD用在瀏覽器環境
AMD 是 RequireJS 在推廣過程中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規範化產出。
AMD:提前執行（非同步載入：依賴先執行）+ 延遲執行
CMD:延遲執行（運行到需載入，根據順序執行）
這篇講的是CMD規範。
CMD 即通用模塊定義，CMD規範是國內發展出來的，就像AMD有個，CMD有個瀏覽器的實現，要解決的問題和一樣，只不過在模塊定義方式和模塊載入（可以說運行、解析）時機上有所不同。接下來進入主題，如何使用SeaJs。
首先展示一下項目的目錄結構：
接下來就是使用：
1.
在index.html中引入sea.js模塊
2.
使用seajs.use()方法執行模塊
seajs.use("./static/main.js")
其中main.js中定義模塊：
define(function(require,exports,module){
letapp=document.getElementById("app")
app.innerHTML = "main app"
})
你可能不知道define是什麼鬼，還有裡面函數里三個參數是什麼，先別急，這裡我們先這麼寫，然後打開index.html後，頁面上展示的就是"main app"了，當然我們的代碼不可能全部寫在這裡，既然是模塊化，就需要引入我們寫好的模塊。
3.
引入模塊文件
這裡我們寫入一個叫module1.js的文件，內容如下：
define(function(require,exports,module){
letapp="module1-app"
exports.app=app
})
在打開main.js，在其中添加引入，內容如下：
define(function(require,exports,module){
letapp=document.getElementById("app")
// 不使用別名
letmodule1=require("./module1.js")
app.innerHTML=module1.app
})
保存退出，再一次打開index.html，這時你會發現頁面上出現的就是「module1-app」了，現在我們就完成了模塊化。
現在回過頭來看一下遺留的問題，define函數：
define是seajs提供的一個函數，用來定義一個模塊，其中可以傳一個字元串，也可以是一個函數，我們這裡就傳了一個函數，其中require用來引入我們需要的其他模塊，exports和module都是用來導出對象。
當然這只是最簡單的使用實例，現在我們在豐富一下它，更貼近我們在項目中的開發，talk is cheap ，show me your code
在index.html中：
seajs-demo
// // 不使用別名
// seajs.use("./static/main.js")
// 使用別名
seajs.config({
alias:{
"module1":"../static/module1.js",
"module2":"../static/module2.js",
"main":"./static/main",
"jquery":"jquery-1.11.0.min.js"
}
})
console.log(seajs)
seajs.use("main")
// 使用多個模塊，載入完後執行回調
// seajs.use(["main","jquery"],function(m, $){
// console.log(m)
// console.log($)
// })
seajs-demo
main.js中改造成這樣：
define(function(require,exports,module){
letapp=document.getElementById("app")
// 不使用別名
// let module1 = require("./module1.js")
// let module2 = require("./module2.js")
// 使用別名
letmodule1=require("module1")
letmodule2=require("module2")
let$=require("jquery")
console.log(module1)
console.log(module2)
console.log($)
$("#app").css("color","red")
app.innerHTML=module2.app
})
引入的模塊module1.js
define(function(require,exports,module){
letapp="module1-app"
// 使用別名引入模塊
letmodule2=require("module2")
console.log(module2)//module2-app
exports.app=app
})
引入的模塊module2.js
define(function(require,exports,module){
letapp="module2-app"
module.exports={
app
}
})
這裡我們還引入了jquery，因為jquery是AMD規範的，所以我們需要對jquery進行一下改造：
define(function(require,exports,module){
//直接複製jquery的源碼過來就ok了
})
這樣我們就可以引入jquery模塊了
現在來解釋一下使用到的方法：
seajs.config(})，使用別名，我們要引入的模塊如果url過長肯定特別煩，而且要引入的地方特別多，所以別名出現了，使用別名的地方主要有兩個方法，一個是require()，另一個是seajs.use()，我們看一下控制台列印seajs對象就會一清二楚了
載入的模塊都是相對於base:"http://localhost:63342/seajs/sea-module/"來獲取的
a: ../ 表示上一目錄
b: ./ 表示當前目錄
c: 直接跟文件名 表示在base下追隨
這樣別名的使用就變得簡單多了吧
seajs.use()，可以使用多個模塊，傳遞一個數組，另一個參數可以傳一個callback，最後執行callback，callback里的參數對應前面導出的模塊對象，這裡main沒有導出對象，所以m={}，$就是我們所熟知的jquery對象$。
exports其實就是module.exports的一個引用，我們用的多的就是module.exports了。
這就是國人開發的seajs，CMD規範的簡單使用，有了這個，我們就可以告別使用來引入腳本帶來的一系列問題了。
TAG:編程小哥 |