Seajs的配置

時間  2019-11-16
標籤 seajs 配置 简体版
原文   原文鏈接

下載

在cmd命令窗口經過npm install saejs下載
seajs的 npm下載指令查找方法以下

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

下載完成後，生成一個 node_modules目錄， seajs核心文件放在 node_modules\seajs\dist下，以下圖所示

clipboard.png

引入seajs

新建 index.html文件，將 sea.js和 index.html放在同一級目錄

clipboard.png

在 index.html中經過 script標籤引入 sea.js 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        console.log(seajs)
    </script>
</body>
</html>
seajs向外暴露了一個變量 seajs,在上面代碼中輸出 seajs

clipboard.png

從控制檯的輸出能夠看到，seajs是一個對象，有不少 屬性和 方法,咱們對其的配置，就是調用了裏面的 config()方法
config方法的源碼 
seajs.config = function(configData) {

  for (var key in configData) {
    var curr = configData[key]
    var prev = data[key]

    // Merge object config such as alias, vars
    if (prev && isObject(prev)) {
      for (var k in curr) {
        prev[k] = curr[k]
      }
    }
    else {
      // Concat array config such as map
      if (isArray(prev)) {
        curr = prev.concat(curr)
      }
      // Make sure that `data.base` is an absolute path
      else if (key === "base") {
        // Make sure end with "/"
        if (curr.slice(-1) !== "/") {
          curr += "/"
        }
        curr = addBase(curr)
      }

      // Set config
      data[key] = curr
    }
  }

  emit("config", configData)
  return seajs
}
從 config方法的源碼 for (var key in configData)可知， config()方法的參數應該是一個對象，每一種配置項是一個屬性（key:value,key是配置名稱，value是配置結果），遍歷 config()方法的參數，並將每種配置的名稱和結果放在 seajs.data(也是一個對象)裏面

標識符

seajs模塊標識分爲3種：相對標識、頂級標識和普通標識。
相對路徑，以. 或 ..開頭
頂級路徑，不以.或 ..及斜線（/）開頭
普通路徑，除相對和頂級路徑外的，好比/（根路徑）開頭的，"http://"、"https://"、"file:///" 等協議標識開頭的
模塊命名空間是seajs所在文件的根路徑即所謂的base路徑，去除了seajs/x.y.z 字串，也能夠指定seajs.config({base:});

base配置

base配置項在不設置時，表示的是 sea.js文件位置，由於 seajs的配置結果存放在 seajs.data中，在控制檯輸出 seajs.data

clipboard.png

本地電腦上 sea.js文件位置

clipboard.png

證實 base就是 sea.js文件所在的路徑
在 main.js中定義一個模塊，並向外暴露 
//main.js
// 定義一個沒有ID的模塊
define(function(require,exports,module){
    // 向外暴露
    module.exports.name = '張三'

})
在 index.html文件中使用 seajs.use()方法引入入口模塊文件 main.js 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        
        //引入入口模塊
        seajs.use('main',function(a){
            console.log(a)  //a爲引入的入口文件內的模塊向外暴露的對象
            console.log('入口模塊引入完畢')
        })
    </script>
</body>
</html>

clipboard.png

注意看 seajs.use()方法裏面的第一個參數， "main"乍一看好像沒問題， mian.js不就是和 index.html在同一級目錄嗎，其實否則，這是 頂級路徑(不以 .、 ..、 /開頭，直接以 文件名或者 文件夾名開頭),是相對於 sea.js的路徑而言的，只是恰好這裏 sea.js和 index.html在同一級目錄，因此看起來像是相對於 index.html,若是寫成 ./main纔是相對於 index.html的路徑而言
那咱們嘗試更改一下 sea.js的位置，將 sea.js放在和 index.html同級目錄的 module文件夾下( E:\SeajsTest\module\),將 main.js放在和 index.html同級目錄的 module文件夾下的 main文件夾中

clipboard.png

由於 sea.js和 main.js的位置變了,此時 sea.js的路徑是 E:\SeajsTest\module\seajs,引入 sea.js後在控制檯輸出 seajs.data驗證

clipboard.png

此時引入 main.js時，若是使用 頂級路徑應該是 main/main，或者寫 相對路徑---- ./module/main/main,表示相對於 index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./module/sea.js"></script>
    <script type="text/javascript">
        //引入入口模塊

        // 一、使用頂級標識符
        seajs.use('main/main',function(a){
        // 二、使用相對標識符
        // seajs.use('./module/main/main',function(a){
            console.log(a)
            console.log('入口模塊引入完畢')
        })
    </script>
</body>
</html>
控制檯輸出

clipboard.png

修改默認 base 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./module/sea.js"></script>
    <script type="text/javascript">
        // 修改base
        seajs.config({
            base:'main/'  //base:"./main"寫法是錯誤，由於也遵循seajs標識符的規則，./main/表示和index.html同級的main目錄下
        })
        //引入入口模塊
        // 一、使用頂級標識符
        seajs.use('main',function(a){
            // 二、使用相對標識符
            // seajs.use('./module/main/main',function(a){
                console.log(a)
                console.log('入口模塊引入完畢')
            })
    </script>
</body>
</html>
如上所示，我將 base修改成 main/表示和 sea.js同級的 main目錄下，即 E:\SeajsTest\module\main,此處不能使用 base:./main/，由於加上 ./就表示相對於 index.html了，從下圖中控制檯輸出的路徑就能夠看出來

clipboard.png

clipboard.png

alias（別名）配置

當 模塊標識很長，寫起來不方便、容易出錯的時候，可使用alias來簡化模塊標識；還有一種狀況當，咱們引入一些基礎庫時，常常會涉及到版本升級（版本號發生改變），此時在每一個模塊中修改版本號比較麻煩，若是使用 alias定義這個模塊，只需在 seajs的 alias中修改一次便可。在seajs.config中進行 一次配置以後， 全部js模塊均可以用require("jquery")這種簡單的方式來加載對應的模塊了。使用alias，能夠 讓文件的真實路徑與模塊調用標識分開，有利於統一維

文件目錄以下javascript

│  index.html
│  main.js
│  sea.js
└─ module
    ├─Jquery
    │      Jquery1.12.4.js
我在 index.html中引入入口文件 mian.js,而後在 main.js中引入 Jquery1.12.4.js 
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        //引入入口文件
        seajs.use('main',function(a){
            console.log(a);
            console.log('入口文件加載完畢')
        })
    </script>
</body>
</html>
//main.js
// 定義一個沒有ID的模塊
define(function(require,exports,module){
    //在入口模塊中引入其餘模塊
    var jq = require('module/Jquery/Jquery1.12.4')
    // 向外暴露
    module.exports.name = '張三';
    module.exports.JQ = jq;

})
上面的寫法是咱們沒有配置 alias時的寫法，我如今以爲這個 Jquery1.12.4.js的 標識符太長，寫起來太麻煩，此時就能夠設置別名，注意這裏的別名是 針對某個文件（模塊）的 標識符，因此 alias的值要 帶上路徑(不是隻給文件名設置別名)並且精確到文件,一樣的，別名的設置也遵循 seajs標識符規則 
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入sea.js -->
    <script type="text/javascript" src="./sea.js"></script>
    <script type="text/javascript">
        // 配置seajs
        seajs.config({
            alias:{
                //頂級標識符寫法
                'JQ':"module/Jquery/Jquery1.12.4",
                // 相對標識符寫法
                // 'JQ':"./module/Jquery/Jquery1.12.4"
            }    
        })
        //引入入口文件
        seajs.use('main',function(a){
            console.log(a);
            console.log('入口文件加載完畢')
        })
    </script>
</body>
</html>
//main.js
// 定義一個沒有ID的模塊
define(function(require,exports,module){
    //在入口模塊中引入其餘模塊
    // 未配置alias時引入
    // var jq = require('module/Jquery/Jquery1.12.4')
    //配置alias後引入
    var jq = require('JQ')
    //上面的`JQ`是頂級標識符，等於base的值加上別名JQ表明的模塊路徑
    // 向外暴露
    module.exports.name = '張三';
    module.exports.JQ = jq;

})
這樣一設置，寫起來就簡單多了，並且一次設置，因此地方均可以用

paths(路徑)配置

當 目錄層次比較深，或者是 跨目錄調用模塊的時候，能夠用 path簡化模塊標識的書寫, path與 alias不一樣的是， path針對的是某個文件夾。paths 配置能夠結合 alias 配置一塊兒使用，讓模塊引用很是方便。

文件目錄以下html

│  index.html
│  main.js
│  sea.js
│  
└─module
    └─one
        └─two
            └─three
                    A.js
                    B.js
仍是老規矩， index.html中引入入口模文件塊 main.js,而後在 main.js中在引入 A.js和 B.js, index.html內容還和上面同樣，下面是 main.js的代碼 
//main.js
// 定義一個沒有ID的模塊
define(function(require,exports,module){
    //在入口模塊中引入其餘模塊
    var moduleA = require('module/one/two/three/A.js')
    var moduleB = require('module/one/two/three/B.js')
    module.exports.person = moduleA;
    module.exports.studemt = moduleB;
})
能夠看到 A.js和 B.js文件位置相對於 sea.js和 index.html很深，因此在 main.js中引入時路徑很長，當要引入 three文件夾下更多模塊文件時，寫起來很麻煩，這個是時候 paths就派上用場了，其實跟 alias有點像，能夠看作是給某個 文件夾設置了別名 
// 定義一個沒有ID的模塊
define(function(require,exports,module){
    //在入口模塊中引入其餘模塊
    // 一、不配置paths時的寫法
    // var moduleA = require('module/one/two/three/A.js')
    // var moduleB = require('module/one/two/three/B.js')
    //二、配置paths後的寫法
    var moduleA = require('three/A.js');
    var moduleB = require('three/B.js');
    module.exports.person = moduleA;
    module.exports.studemt = moduleB;
})
要是須要引入的模塊在同一文件夾下，並且藏得又深名字還長，那麼就使用 alias和 paths配合使用，給文件設置 alias(別名)，給文件夾設置 paths(路徑)

vars(變量)配置

目錄以下 
│  index.html
│  main.js
│  sea.js
│  
└─module
    └─language
            en.js
            zh-cn.js
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 引入seajs -->
    <script src="./sea.js"></script>
    <!-- 引入入口模塊文件 -->
    <script>
        // 配置seajs
        seajs.config({
            vars:{
                cn:"zh-cn"
            }
        })
        // 使用seajs.use()方法引入入口模塊
        seajs.use('main',function(a){
            console.log('入口模塊加載完畢')
            // 輸出入口模塊向外暴露的對象
            console.log(a);
        })
    </script>
</body>
</html>
//main.js
// 定義入口模塊
define(function(require,exports,module){
    // 引入其餘模塊
    // 未配置vars時的寫法
    // var language = require('module/language/zh-cn')
    // 配置vars後的寫法
    var language = require('module/language/{cn}')
    module.exports.language = language;

})
vars是一個對象，對象內有 kv鍵值對， k是一個變量，用於代替 v,在引入模塊文件時，可使用 {}包裹 k的形式來代替 v,形如 {K}，有點像插值語法，官網說是動態加載，看了不少文章都是引用官網的例子，哎，我也不知道什麼場景下使用，我感受和 alias真的同樣

map(映射) 配置

map用於對模塊路徑進行映射修改，可用於路徑轉換，在線調試等

文件目錄以下java

index.html
│  main.js
│  sea.js
│  
└─module
        debug.js
        runtime.js
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 引入seajs -->
    <script src="./sea.js"></script>
    <script>
        // 配置seajs
        seajs.config({
            map:[
                ['runtime.js','debug.js']
            ]
        })
        // 引入入口模塊
        seajs.use('main',function(a){
            console.log('入口模塊加載完畢')
            console.log(a)
        })
    </script>
</body>
</html>
// 定義入口模塊
define(function(require,exports,module){
    // 引入其餘模塊
    var M = require('module/runtime')
    module.exports.state = M;

})
上面的例子模擬了相似測試時的場景，將模塊路徑進行了轉換

參考文章01
參考文章02
參考文章03
參考文章04
參考文章05node

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程