標籤：.sh 數組 證明 common 賦值 返回 sea src change
seajs是啥，可以看看這篇前端模組化（CommonJs,AMD和CMD）
本文所用例子的代碼目錄結構：
seajs example |--sea-module //存在依賴檔案 |--jquery |--jqeury.js |--sea.js |--static //存放自訂模組js |--main.js |--index.html //調用頁面下面開始，首先看下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的別名設定只是給路徑取個別名，減少書寫；base路徑是seajs檔案所在目錄，本例子為 （file:///Users/linyuhua/code/seajs/sea-module/）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調用的路徑
首先是./和../
在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使用執行個體入門介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
