1. 程式人生 > >SeaJS簡介三:模組載入和引用

SeaJS簡介三:模組載入和引用

       之前對模組有過介紹,一個模組對應一個js檔案,而載入模組時一般都是提供一個字串引數告訴載入函式需要的模組,所以就需要有一套從字串標識到實際模組所在檔案路徑的解析演算法。

SeaJS支援如下幾種方式:

第一種:絕對路徑--給出js檔案的絕對路徑

require("http://example/js/a");

 

第二種:相對路徑--用相對呼叫載入函式所在js檔案的相對地址尋找模組

require("./c");


 第三種:通過全域性變數來匹配相對路徑:相對SeaJS全域性配置中的“base”來定址(後面文章會介紹到)

SeaJS提供了三種載入的方式:seajs.use,require和require.async

第一種:seajs.use

       seajs.use主要用於載入入口模組。入口模組相當於JAVA程式的main函式,同時也是整個模組依賴樹的根。

       這種方式有幾種寫法:

//單一模式
seajs.use('./a');
 
//回撥模式
seajs.use('./a', function(a) {
  a.run();
});
 
//多模組模式
seajs.use(['./a', './b'], function(a, b) {
  a.run();
  b.run();
});

        一般seajs.use只用在頁面載入入口模組,SeaJS會順著入口模組解析所有依賴模組並將它們載入。如果入口模組只有一個,也可以通過給引入sea.js的script標籤加入”data-main”屬性來省略seajs.use。

       來個小例項來說明一下:

 
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js" data-main="./init"></script>
</body>
</html>


第二種:require

       require是SeaJS主要的模組載入方法,當在一個模組中需要用到其它模組時一般用require載入:ar a = require('a'); //引入a模組

第三種:require.async

      之前的require方式是一次把所有依賴的JS檔案都載入進來,如果想什麼時候用到什麼時候載入的話就會用這種方式,這種方式效率比require高一些。

       通過上面的介紹,應該對SeaJS的模組載入和引用有所瞭解了,其實者通過這幾篇的介紹會發現SeaJS的模組化程式設計思想和它帶給開發人員的簡單易用的特點。下篇部落格介紹一下SeaJS的全域性配置。