Seajs使用實例入門介紹
seajs是啥，可以看看這篇前端模塊化（CommonJs,AMD和CMD）
本文所用例子的代碼目錄結構：
seajs example
|--sea-module //存在依賴文件
|--jquery
|--jqeury.js
|--sea.js
|--static //存放自定義模塊js
|--main.js
|--index.html //調用頁面seajs頁面引入
下面開始，首先看下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文件，然後通過seajs.use加載main.js文件。我們再來看看main.js:
define(function(require,exports,module) {
var title= document.getElementById(‘title‘);
title.innerHTML = "yes it works"
})define()用來定義模塊文件，具體參數等介紹可以參考文章開頭介紹的文章。此處，頁面會輸出yes it works,是main.js修改了id為title的標簽的文本內容，並沒有引用其他模塊文件。
模塊文件引入
我們自定一個模塊changeText.js:
define(function (require, exports, module) {
var textContent = ‘yes it works‘;
exports.text = textContent;
//or
//module.exports = {
//text: textContent
//}
})changeText模塊輸出了一個text變量，然後我們在main中引用它：
define(function (require, exports, module) {
var changeText = require(‘../static/changeText.js‘);
var title = document.getElementById(‘title‘);
title.innerHTML = changeText.text;
}) 我們通過require將changText模塊的輸出對象賦值給changeText變量，然後將對象的text屬性賦值給節點的文本值,此時頁面輸出效果是一樣的。
別名設置
引入一個模塊要寫他的相對路徑，我們可以給它取個別名，在seajs.use()上面加入這一段代碼：
<script>
seajs.config({
alias:{
‘changeText‘:‘../static/changeText.js‘
}
});
seajs.use(‘./static/main.js‘);
</script>通過config中alias給‘../static/changeText.js‘設置了別名changeText，現在main中引用changeText模塊就可以直接寫成這樣了var changeText = require(‘changeText‘)。
模塊調用
下面試著引入一個模塊的方法，將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
}
})模塊中定義了一個init方法，它隨機返回數組中的一條。然後我們將main修改下：
define(function (require, exports, module) {
var changeText = require(‘changeText‘);
var title = document.getElementById(‘title‘);
title.innerHTML = changeText.init();
})這時候我們每次刷新頁面都會隨機出現一條文字。
第三方文件引用
下載一個jquery源文件，按如下修改：
define(function (require, exports, module) {
jquery 源碼
})使其模塊化，能被外部調用。
然後再設置別名：
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());
})回調函數
seajs.use([module],callback),加載一個或多個模塊，並執行回調函數。我們將main修改下：
define(function (require, exports, module) {
var changeText = require(‘changeText‘);
var $ = require(‘jquery‘);
var showText = function () {
$(‘#title‘).text(changeText.init());
}
exports.showText = showText;
})然後增加回調函數：
seajs.use([‘main‘,‘jquery‘],function(main,$) {
$(‘#title‘).after(‘<button id="show">showText</button>‘);
$(‘#show‘).on(‘click‘,function() {
main.showText()
})
});上述代碼我們加載了兩個模塊，並把它們輸出的對象傳參給main和$變量,通過點擊事件調用main中的showText方法，而showText方法調用了changeText中的init方法。
路徑問題
我們先來搞清幾個問題：
./是表示當前目錄；../是上級目錄；seajs.config裏alias的別名設置只是給路徑取個別名，減少書寫；- seajs裏主要兩個用到路徑的地方：一個是seajs.use()；一個是require()。
base路徑是seajs文件所在目錄，本例子為（file:///Users/linyuhua/code/seajs/sea-module/）
先來講seajs.use()路徑
seajs.use()調用模塊文件的路徑默認是seajs文件的父文件夾目錄；以本例子來解釋：
首先來回看下我們的目錄結構：
seajs example
|--seajs
|--sea-module //存在依賴文件
|--jquery
|--jqeury.js
|--sea.js
|--static //存放自定義模塊js
|--main.js
|--changeText.js
|--index.html //調用頁面調用main可以通過以下路徑：
seajs.config({
alias:{
‘changeText‘:‘../static/changeText.js‘,
‘jquery‘:‘jquery/jquery‘,
‘main‘:‘./static/main.js‘
}
});
seajs.use([‘main‘,‘jquery‘],function(main,$) {
...
})
});
// ./表示當前路徑,seajs.use的默認路徑是seajs文件的父文件夾的目錄；即file:///Users/linyuhua/code/seajs/；
// 因此，此時main的調用路徑為file:///Users/linyuhua/code/seajs/static/main.js在舉個例子來證明，這次我們使用../來設置路徑：
seajs.config({
alias:{
‘changeText‘:‘../static/changeText.js‘,
‘jquery‘:‘jquery/jquery‘,
‘main‘:‘../seajs/static/main.js‘
}
});
seajs.use([‘main‘,‘jquery‘],function(main,$) {
...
})
});
// ../表示上級目錄，seajs.use()的目錄為file:///Users/linyuhua/code/seajs/；
// 他的上級目錄為file:///Users/linyuhua/code/，因此此時main的別名設置為../seajs/static/main.js;
// 合並之後就是file:///Users/linyuhua/code/seajs/static/main.js最後再來看看jquery的調用，直接以文件名開頭，在seajs中直接以文件名開頭的路徑是相對於base路徑，也就是說當把jquery別名設置為‘jquery‘:‘jquery/jquery‘,時，他的調用路徑為
base+‘jquery/jquery’（.js可以省略）；即file:///Users/linyuhua/code/seajs/sea-module/+jquery/jquery;
require()調用路徑
下面我們來看看require調用的路徑
首先是./和../
在define(function (){ }), 則是相對於當前的js文件所在目錄，還記得main中怎麽調用changeText.js和jquery的嗎：
//對照別名設置
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 (){ }), 則是相對於當前的js文件所在目錄，所以../表示changeText.js的上級目錄即file:///Users/linyuhua/code/seajs，加上別名就是file:///Users/linyuhua/code/seajs/static/changText.js;
我們也可以直接require(‘./changeText.js‘)來調用，./表示當前目錄，而changeText.js與main.js在同一個目錄下;
如果路徑以文件名開頭則是相對base路徑，與前面seajs.use()一樣，jquery:jqeury/jquery就是相對base路徑調用的。
Seajs使用實例入門介紹