Seajs使用實(shí)例入門介紹

seajs是啥，可以看看這篇前端模塊化（CommonJs,AMD和CMD）
點(diǎn)我點(diǎn)我--項(xiàng)目源碼地址：https://github.com/linwalker/seajs-demo

本文所用例子的代碼目錄結(jié)構(gòu)：

seajs example
    |--sea-module      //存在依賴文件
        |--jquery
            |--jqeury.js
        |--sea.js   
    |--static         //存放自定義模塊js
        |--main.js
    |--index.html     //調(diào)用頁面

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()用來定義模塊文件，具體參數(shù)等介紹可以參考文章開頭介紹的文章。此處，頁面會輸出yes it works,是main.js修改了id為title的標(biāo)簽的文本內(nèi)容，并沒有引用其他模塊文件。

模塊文件引入

我們自定一個模塊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屬性賦值給節(jié)點(diǎn)的文本值,此時頁面輸出效果是一樣的。

別名設(shè)置

引入一個模塊要寫他的相對路徑，我們可以給它取個別名，在seajs.use()上面加入這一段代碼：

<script>
    seajs.config({
        alias:{
            'changeText':'../static/changeText.js'
        }
    });
    seajs.use('./static/main.js');
</script>

通過config中alias給'../static/changeText.js'設(shè)置了別名changeText，現(xiàn)在main中引用changeText模塊就可以直接寫成這樣了var changeText = require('changeText')。

模塊調(diào)用

下面試著引入一個模塊的方法，將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方法，它隨機(jī)返回?cái)?shù)組中的一條。然后我們將main修改下：

define(function (require, exports, module) {
    var changeText = require('changeText');
    var title = document.getElementById('title');
    title.innerHTML = changeText.init();
})

這時候我們每次刷新頁面都會隨機(jī)出現(xiàn)一條文字。

第三方文件引用

下載一個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),加載一個或多個模塊，并執(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()
    })
});

上述代碼我們加載了兩個模塊，并把它們輸出的對象傳參給main和$變量,通過點(diǎn)擊事件調(diào)用main中的showText方法，而showText方法調(diào)用了changeText中的init方法。

路徑問題

我們先來搞清幾個問題：

  1. ./是表示當(dāng)前目錄；../是上級目錄；
  2. seajs.config 里alias的別名設(shè)置只是給路徑取個別名，減少書寫；
  3. seajs里主要兩個用到路徑的地方：一個是seajs.use()；一個是require()。
  4. base路徑是seajs文件所在目錄，本例子為 （file:///Users/linyuhua/code/seajs/sea-module/）

先來講seajs.use()路徑

seajs.use()調(diào)用模塊文件的路徑默認(rèn)是seajs文件的父文件夾目錄；以本例子來解釋：
首先來回看下我們的目錄結(jié)構(gòu)：

seajs example
|--seajs
    |--sea-module       //存在依賴文件
        |--jquery
            |--jqeury.js
        |--sea.js    
    |--static         //存放自定義模塊js
        |--main.js
        |--changeText.js
    |--index.html     //調(diào)用頁面

調(diào)用main可以通過以下路徑：

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/；
//  因此，此時main的調(diào)用路徑為file:///Users/linyuhua/code/seajs/static/main.js

在舉個例子來證明，這次我們使用../來設(shè)置路徑：

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的別名設(shè)置為../seajs/static/main.js;
// 合并之后就是file:///Users/linyuhua/code/seajs/static/main.js

最后再來看看jquery的調(diào)用，直接以文件名開頭，在seajs中直接以文件名開頭的路徑是相對于base路徑，也就是說當(dāng)把jquery別名設(shè)置為'jquery':'jquery/jquery',時，他的調(diào)用路徑為
base+‘jquery/jquery’（.js可以省略）；即file:///Users/linyuhua/code/seajs/sea-module/+jquery/jquery;

require()調(diào)用路徑

下面我們來看看require調(diào)用的路徑

首先是./和../
在define(function (){ }), 則是相對于當(dāng)前的js文件所在目錄，還記得main中怎么調(diào)用changeText.js和jquery的嗎：

//對照別名設(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 (){ }), 則是相對于當(dāng)前的js文件所在目錄，所以../表示changeText.js的上級目錄即file:///Users/linyuhua/code/seajs，加上別名就是file:///Users/linyuhua/code/seajs/static/changText.js;

我們也可以直接require('./changeText.js')來調(diào)用，./表示當(dāng)前目錄，而changeText.js與main.js在同一個目錄下;

如果路徑以文件名開頭則是相對base路徑，與前面seajs.use()一樣，jquery:jqeury/jquery就是相對base路徑調(diào)用的。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容