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

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)題：

  1. ./是表示當(dāng)前目錄；../是上級(jí)目錄；
  2. seajs.config 里alias的別名設(shè)置只是給路徑取個(gè)別名，減少書(shū)寫(xiě)；
  3. seajs里主要兩個(gè)用到路徑的地方：一個(gè)是seajs.use()；一個(gè)是require()。
  4. 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)用的。

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

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

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