前端模塊化（七）：SeaJs

時間 2019-11-08

標籤前端模塊化 seajs 简体版

原文原文鏈接

1 概述html

SeaJS是一個JS模塊加載器，遵循CMD規範。它主要是爲了實現JS文件的異步加載以及管理模塊之間的依賴性。下面，咱們經過一些例子來了解Seajs的使用。前端

2 SeaJs的使用jquery

首先，咱們建立一個項目，主要文件目錄以下：angularjs

2.1 加載模塊併發

建立3個文件index.html、index.js以及config.js，示例代碼以下：異步

<!-- index.html -->
<html>
<head>
    <title>sea例子</title>
</head>
<body class="body" ng-controller="helpCtrl">
    <div>SeaJs 例子</div>
</body>
    <script src="js/lib/seajs/2.2.1/sea.js"></script>
    <script src="js/ctr/config.js"></script>
    <script>

        seajs.use('./js/ctr/index.js', function(index) {
            index.init()
        });

    </script>
</html>

//  js/ctr/config.js
seajs.config({
    base: "./js/lib/",// Sea.js 的基礎路徑
      alias: {// 別名配置
        '$':'jquery/1.12.3/jquery-1.12.3',
        'jquery':'jquery/1.12.3/jquery-1.12.3',
      },    
    charset: 'utf-8'// 文件編碼
});

//  js/ctr/index.js
define(function(require, exports, module) {
        var $ = require("$");
        module.exports= {  
            init: function() {
                console.log('index.js is loaded!');
            }
        };
});

從index.html一路往下看，在頁面中經過<script>標籤引入SeaJS，就可使用SeaJS裏面的特性了。async

而後，添加一個seaJS的配置文件config.js。config.js中的用seajs.config()對 Sea.js 進行配置，可讓模塊編寫、開發調試更方便，後面我會詳細說這個。模塊化

最後用seajs.use()把inde.js加載進來，如此就建立了一個簡單的sea實例。函數

2.1.1 seajs.use(id, callback?)ui

經過 use 方法，能夠在頁面中加載任意模塊：

//加載模塊index，並在加載完成時，執行指定回調
seajs.use('./js/ctr/index.js', function(index) {
      index.init();
});

use 方法還能夠一次加載多個模塊：

//併發加載模塊a和模塊b，並在加載完成時，執行指定回調
seajs.use(['./a','./b'], function(a,b) {
      a.init();
　　　 b.init();
});

callback 參數可選，省略時，表示無需回調。

//加載一個模塊，不執行回調
seajs.use('./js/ctr/index.js');

seajs.use 與 DOM ready 事件沒有任何關係。若是某些操做要確保在 DOM ready 後執行，須要使用 jquery 等類庫來保證，好比：

seajs.use(['$','./js/ctr/index.js'], function($,index) {
　　$(document).ready(function(){
　　　　index.init();
　　});    　　
});

2.1.2 seajs.config(options) 配置項

seajs.config({
    base: "./js/lib/",// Sea.js 的基礎路徑
      alias: {// 別名配置
        '$':'jquery/1.12.3/jquery-1.12.3',
        'jquery':'jquery/1.12.3/jquery-1.12.3',
      },
    paths: {// 路徑配置
        'basePath': './js/lib/'
    },
    vars: {// 變量配置
        'jquery_version': 'jquery-1.12.3'
    },
    map: [// 映射配置
        [ '.js', '-debug.js' ]
    ],
    preload: ['$'], //預加載項'$'
    debug: true,// 調試模式
    charset: 'utf-8'// 文件編碼
});

seajs.config用來對 Sea.js 進行配置，讓模塊編寫、開發調試更方便。

·base (String)

Sea.js 在解析頂級標識時，會相對 base 路徑來解析。好比：

// js/ctr/config.js
seajs.config({
    base: "./js/lib/",
});

//加載的是 ./js/lib/jquery-1.12.3.js
var $=require('jquery-1.12.3')

·alias (Object)

別名配置，配置以後可在模塊中使用require調用 require('$')；當模塊標識很長時，可使用 alias 來簡化。使用 alias，可讓文件的真實路徑與調用標識分開，有利於統一維護。

//  js/ctr/config.js
seajs.config({
    base: "./js/lib/",// Sea.js 的基礎路徑
      alias: {// 別名配置
        '$':'jquery/1.12.3/jquery-1.12.3',
        'angular':'https://code.angularjs.org/1.2.0/angular.js',
      },    
});

//加載的是 ./js/lib/jquery/1.12.3/jquery-1.12.3.js
var $=require('jquery-1.12.3')；

//加載的是 https://code.angularjs.org/1.2.0/angular.js
var $=require('angular')；

·paths (Object)

設置路徑，方便跨目錄調用。經過靈活的設置path能夠在不影響base的狀況下指定到某個目錄。paths 配置能夠結合 alias 配置一塊兒使用，讓模塊引用很是方便。

//  js/ctr/config.js
seajs.config({
    paths:{// 路徑配置
        "basePath":"http://static.efly.cc/CMD",
    }
      alias: {// 別名配置
        'angular':'basePath/angular/1.1.5/angular-1.1.5',
      },
});

//加載的是 http://static.efly.cc/CMD/angular/1.1.5/angular-1.1.5.js
var $=require('angular')；

·vars (Object)

有些場景下，模塊路徑在運行時才能肯定，這時可使用 vars 變量來配置。vars 配置的是模塊標識中的變量值，在模塊標識中用 {key} 來表示變量。

//  js/ctr/config.js
seajs.config({    
    vars: {// 變量配置
        'jquery_version': 'jquery-1.12.3'
    }
});

//加載的是 ./js/lib/jquery/1.12.3/jquery-1.12.3.js
var $=require('./js/lib/jquery/1.12.3/{jquery-version}.js')；

·map (Array)

該配置可對模塊路徑進行映射修改，可用於路徑轉換、在線調試等。

//  js/ctr/config.js
seajs.config({
    map: [// 映射配置
        [ '.js', '-debug.js' ]
    ]
});

//加載模塊./js/ctr/index-debug.js
seajs.use('./js/ctr/index.js', function(index) {
    index.init()
});

//加載的是 js/lib/jquery/1.12.3/jquery-1.12.3-debug.js
var $=require('../lib/jquery/1.12.3/jquery-1.12.3')；

·preload (Array)

使用 preload 配置項，能夠在普通模塊加載前，提早加載並初始化好指定模塊。preload中的空字符串會被忽略掉。

//  js/ctr/config.js
seajs.config({
    alias: {// 別名配置
        '$':'jquery/1.12.3/jquery-1.12.3',
    },
    preload: ['$'], //預加載項'$'
});

//加載模塊index以前，就已經加載了$模塊
seajs.use('./js/ctr/index.js', function(index) {
    index.init()
});

//  js/ctr/index.js
define(function(require, exports, module) {
       // var $ = require("$");
        module.exports= {  
            init: function() {
                console.log('index.js is loaded!');
            }
        };
});

·debug(Boolean)

值爲true時，加載器不會刪除動態插入的 script 標籤。插件也能夠根據debug配置，來決策 log 等信息的輸出

·charset (String | Function)

獲取模塊文件時，<script> 或 <link> 標籤的 charset 屬性。默認是 utf-8

charset 還能夠是一個函數：

//  js/ctr/config.js
seajs.config({
    charset: function(url){
        //xxx目錄下的文件用gbk編碼加載
        if(url.indexOf('http://static.efly.cc/CMD/xxx')===0){
            return 'gbk';
        }
        return 'utf-8';
    }
});

2.2 定義模塊

define()用來定義模塊。Sea.js 推崇一個模塊一個文件，遵循統一的寫法：

define(function(require, exports, module) {
       //模塊代碼
});

·require 用來獲取指定模塊的接口。require.async用來在模塊內部異步加載一個或多個模塊。

·exports 用來在模塊內部對外提供接口。

·module 存儲了與當前模塊相關聯的一些屬性和方法。module.exports 與 exports 相似，用來在模塊內部對外提供接口。

require, exports 和 module 三個參數，詳情能夠參考上一篇文章《前端模塊化（六）：CMD規範》，這裏再也不作詳細解說了。

3 總結

本文對SeaJS的使用作了簡單的介紹，你們若有須要對SeaJS進行更深刻的瞭解，能夠直接看源碼或者查看官方API文檔。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。