seajs是啥衙传，可以看看這篇前端模塊化（CommonJs,AMD和CMD）
點(diǎn)我點(diǎn)我--項(xiàng)目源碼地址：https://github.com/linwalker/seajs-demo
本文所用例子的代碼目錄結(jié)構(gòu)：
seajs example
|--sea-module //存在依賴(lài)文件
|--jquery
|--jqeury.js
|--sea.js
|--static //存放自定義模塊js
|--main.js
|--index.html //調(diào)用頁(yè)面
seajs頁(yè)面引入
下面開(kāi)始，首先看下index：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs example</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<script src="sea-module/sea.js"></script>
<script>
seajs.use('./static/main.js');
</script>
</body>
</html>
首先引入sea.js文件蒙保，然后通過(guò)seajs.use加載main.js文件革骨。我們?cè)賮?lái)看看main.js:
define(function(require,exports,module) {
var title= document.getElementById('title');
title.innerHTML = "yes it works"
})
define()用來(lái)定義模塊文件仿荆，具體參數(shù)等介紹可以參考文章開(kāi)頭介紹的文章朱躺。此處雇锡，頁(yè)面會(huì)輸出yes it works,是main.js修改了id為title的標(biāo)簽的文本內(nèi)容箫锤，并沒(méi)有引用其他模塊文件贬蛙。
模塊文件引入
我們自定一個(gè)模塊changeText.js:
define(function (require, exports, module) {
var textContent = 'yes it works';
exports.text = textContent;
//or
//module.exports = {
//text: textContent
//}
})
changeText模塊輸出了一個(gè)text變量，然后我們?cè)趍ain中引用它：
define(function (require, exports, module) {
var changeText = require('../static/changeText.js');
var title = document.getElementById('title');
title.innerHTML = changeText.text;
})
我們通過(guò)require將changText模塊的輸出對(duì)象賦值給changeText變量麻汰，然后將對(duì)象的text屬性賦值給節(jié)點(diǎn)的文本值,此時(shí)頁(yè)面輸出效果是一樣的速客。
別名設(shè)置
引入一個(gè)模塊要寫(xiě)他的相對(duì)路徑，我們可以給它取個(gè)別名五鲫，在seajs.use()上面加入這一段代碼：
<script>
seajs.config({
alias:{
'changeText':'../static/changeText.js'
}
});
seajs.use('./static/main.js');
</script>
通過(guò)config中alias給'../static/changeText.js'設(shè)置了別名changeText溺职，現(xiàn)在main中引用changeText模塊就可以直接寫(xiě)成這樣了var changeText = require('changeText')。
模塊調(diào)用
下面試著引入一個(gè)模塊的方法位喂，將changeText改為：
define(function (require, exports, module) {
var init= function() {
var textContent = [
'yes it works',
'seajs demo',
'it is a lucky day',
'wish this help you',
'thank you for reading'
];
var index = Math.floor(Math.random()*textContent.length);
return textContent[index];
}
module.exports = {
init:init
}
})
模塊中定義了一個(gè)init方法浪耘，它隨機(jī)返回?cái)?shù)組中的一條。然后我們將main修改下：
define(function (require, exports, module) {
var changeText = require('changeText');
var title = document.getElementById('title');
title.innerHTML = changeText.init();
})
這時(shí)候我們每次刷新頁(yè)面都會(huì)隨機(jī)出現(xiàn)一條文字塑崖。
第三方文件引用
下載一個(gè)jquery源文件七冲，按如下修改：
define(function (require, exports, module) {
jquery 源碼
})
使其模塊化，能被外部調(diào)用规婆。
然后再設(shè)置別名：
seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'./static/main.js'
}
});
seajs.use('./static/main.js');
在main中引入jquery澜躺，并使用：
define(function (require, exports, module) {
var changeText = require('changeText');
var $ = require('jquery');
$('#title').text(changeText.init());
})
回調(diào)函數(shù)
seajs.use([module],callback),加載一個(gè)或多個(gè)模塊，并執(zhí)行回調(diào)函數(shù)抒蚜。我們將main修改下：
define(function (require, exports, module) {
var changeText = require('changeText');
var $ = require('jquery');
var showText = function () {
$('#title').text(changeText.init());
}
exports.showText = showText;
})
然后增加回調(diào)函數(shù)：
seajs.use(['main','jquery'],function(main,$) {
$('#title').after('<button id="show">showText</button>');
$('#show').on('click',function() {
main.showText()
})
});
上述代碼我們加載了兩個(gè)模塊掘鄙，并把它們輸出的對(duì)象傳參給main和$變量,通過(guò)點(diǎn)擊事件調(diào)用main中的showText方法，而showText方法調(diào)用了changeText中的init方法嗡髓。
路徑問(wèn)題
我們先來(lái)搞清幾個(gè)問(wèn)題：
-
./是表示當(dāng)前目錄操漠；../是上級(jí)目錄； -
seajs.config里alias的別名設(shè)置只是給路徑取個(gè)別名饿这，減少書(shū)寫(xiě)浊伙； - seajs里主要兩個(gè)用到路徑的地方：一個(gè)是seajs.use()；一個(gè)是require()长捧。
-
base路徑是seajs文件所在目錄嚣鄙，本例子為（file:///Users/linyuhua/code/seajs/sea-module/）
先來(lái)講seajs.use()路徑
seajs.use()調(diào)用模塊文件的路徑默認(rèn)是seajs文件的父文件夾目錄；以本例子來(lái)解釋?zhuān)?br> 首先來(lái)回看下我們的目錄結(jié)構(gòu)：
seajs example
|--seajs
|--sea-module //存在依賴(lài)文件
|--jquery
|--jqeury.js
|--sea.js
|--static //存放自定義模塊js
|--main.js
|--changeText.js
|--index.html //調(diào)用頁(yè)面
調(diào)用main可以通過(guò)以下路徑：
seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'./static/main.js'
}
});
seajs.use(['main','jquery'],function(main,$) {
...
})
});
// ./表示當(dāng)前路徑,seajs.use的默認(rèn)路徑是seajs文件的父文件夾的目錄串结；即file:///Users/linyuhua/code/seajs/拗慨；
// 因此廓八，此時(shí)main的調(diào)用路徑為file:///Users/linyuhua/code/seajs/static/main.js
在舉個(gè)例子來(lái)證明，這次我們使用../來(lái)設(shè)置路徑：
seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'../seajs/static/main.js'
}
});
seajs.use(['main','jquery'],function(main,$) {
...
})
});
// ../表示上級(jí)目錄赵抢，seajs.use()的目錄為file:///Users/linyuhua/code/seajs/；
// 他的上級(jí)目錄為file:///Users/linyuhua/code/声功，因此此時(shí)main的別名設(shè)置為../seajs/static/main.js;
// 合并之后就是file:///Users/linyuhua/code/seajs/static/main.js
最后再來(lái)看看jquery的調(diào)用烦却，直接以文件名開(kāi)頭，在seajs中直接以文件名開(kāi)頭的路徑是相對(duì)于base路徑先巴，也就是說(shuō)當(dāng)把jquery別名設(shè)置為'jquery':'jquery/jquery',時(shí)其爵，他的調(diào)用路徑為
base+‘jquery/jquery’（.js可以省略）；即file:///Users/linyuhua/code/seajs/sea-module/+jquery/jquery;
require()調(diào)用路徑
下面我們來(lái)看看require調(diào)用的路徑
首先是./和../
在define(function (){ }), 則是相對(duì)于當(dāng)前的js文件所在目錄伸蚯，還記得main中怎么調(diào)用changeText.js和jquery的嗎：
//對(duì)照別名設(shè)置
seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'../seajs/static/main.js'
}
});
define(function (require, exports, module) {
var changeText = require('changeText');
var $ = require('jquery');
var showText = function () {
$('#title').text(changeText.init());
}
exports.showText = showText;
})
由于在define(function (){ }), 則是相對(duì)于當(dāng)前的js文件所在目錄摩渺，所以../表示changeText.js的上級(jí)目錄即file:///Users/linyuhua/code/seajs，加上別名就是file:///Users/linyuhua/code/seajs/static/changText.js;
我們也可以直接require('./changeText.js')來(lái)調(diào)用剂邮，./表示當(dāng)前目錄摇幻，而changeText.js與main.js在同一個(gè)目錄下;
如果路徑以文件名開(kāi)頭則是相對(duì)base路徑，與前面seajs.use()一樣挥萌，jquery:jqeury/jquery就是相對(duì)base路徑調(diào)用的绰姻。
