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使用實例入門介紹