簡單的使用Seajs

標籤：lov   pre   表示   模組化   requirejs   問題   div   src   log   

 

什麼是Seajs

1. Seajs是一個載入器 http://yslove.net/seajs/
   
   
2. 遵循 CMD 規範模組化開發，依賴的自動載入、配置的簡潔清晰。

3. 相容性

   • Chrome 3+
   • Firefox 2+
   • Safari 3.2+
   • Opera 10+
   • IE 5.5+

基本應用匯入Seajs庫

1. 去官網下載最新的seajs檔案， http://seajs.org/docs/#downloads
2. 在頁尾引入seajs： 
   <script src="/site/script/sea.js"></script>

3. 然後在它下面寫模組的配置和入口。

   // seajs 的簡單配置seajs.config({  base: "../sea-modules/",  alias: {    "jquery": "jquery/jquery/1.10.1/jquery.js"  }});// 載入入口模組seajs.use("../static/hello/src/main");

配置和入口

這裡解釋下配置和入口的意思。

配置

通常在配置上修改seajs的路徑和別名。

 

seajs的 路徑是相對於前面引入的seajs檔案的 。假如是這樣的目錄結構：

examples/  |-- index.html  |  `--about  |     |-- news.html  |  `-- script        |-- seajs.js        |-- jquery.js        `-- main.js

 

我們平時如果我們在index.html上引用main.js路徑應該是這樣寫的 script/main.js ，從news.html引用main.js就要這樣寫， ../script/main.js 。

而在seajs是相對於seajs檔案的，一律直接使用 main.js 就OK了，是不是很方便呢？

既然這麼方便那在什麼情況需要配置呢？一般情況是用不到的。但是假如你的路徑特別深 或者要做路徑映射的時候它的作用就來了。下面介紹下常用的幾個配置。

seajs.config({// Sea.js 的基礎路徑（修改這個就不是路徑就不是相對於seajs檔案了）base: ‘http://example.com/path/to/base/‘,// 別名配置（用變數表示檔案，解決路徑層級過深和實現路徑映射）alias: {‘es5-safe‘: ‘gallery/es5-safe/0.9.3/es5-safe‘,‘json‘: ‘gallery/json/1.0.2/json‘,‘jquery‘: ‘jquery/jquery/1.10.1/jquery‘},// 路徑配置（用變數表示路徑，解決路徑層級過深的問題）paths: {‘gallery‘: ‘https://a.alipayobjects.com/gallery‘}});

查看更多

入口

入口即載入，需要載入什麼檔案（模組載入器）就在這裡引入。 sea.js 在下載完成後，會自動載入入口模組。

seajs.use("abc/main");  //匯入seajs.js同級的abc檔案夾下的main.js模組的（尾碼名可略去不寫）

seajs.use()還有另外一種用法。

有時候我們寫一個簡單的單頁並不想為它單獨寫一個js檔案，選擇在直接把js代碼寫在頁面上，seajs通過 seajs.use() 實現了這個。 接收兩個參數第一個是檔案依賴(單個用字串數組都可以，多個需用數組表示)，第二個是回呼函數。

載入單個依賴

//載入模組 main，並在載入完成時，執行指定回調seajs.use(‘./main‘, function(main) {  main.init();});

載入多個依賴

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

 

這裡回掉函數中的a和b參數是與前面的模組暴露出來的介面一一對應的。有時候也許只需要使用b的介面，但是也要把a參數寫上。什麼是暴露介面下面會解釋。

模組開發

這裡才是重點，其實也很簡單就是一個書寫規範（CMD）而已。

// 所有模組都通過 define 來定義define(function(require, exports, module) {  // 通過 require 引入依賴  var $ = require(‘jquery‘);  var Spinning = require(‘./spinning‘);  // 通過 exports 對外提供介面  exports.doSomething = ...  // 或者通過 module.exports 提供整個介面  module.exports = ...});

 

模組是通過define()方法封裝的，然後內部痛過require()方法引入需要的依賴檔案(模組)。（也可以引入.css檔案哦~）

模組最好是物件導向開發的，這樣最後可以方便的通過 exports.doSomething 或 module.exports 把模組的介面給暴露出來。如果你是寫的是jq外掛程式的話就不需要這個功能了，因為你的介面是寫在jquery的對象裡的。如果你不需要提供介面的話也可以不使用這兩個屬性哦！

 

事實上define方法還有另外幾個參數，一般情況我們用不到。具體看 官方API 。

小結

其實Seajs的基本使用就這麼簡單，日常使用足夠了，之前看官網的 5分鐘教程 楞是沒看懂，後來想想真的是5分鐘學會啊,悟性太低- -||

注意事項

1. 模組內的函數依賴必須交代清楚，防止模組在函數依賴載入前先載入出來。而且還增強了模組的獨立性。
2. 引入seajs的時候最好給 <script> 標籤加個id，可以快速存取到這個標籤（我是在模組合并時用到它的）
3. 還有前面提到的使用 seajs.use() 在.html頁面上寫js時如果有多個模組依賴，需要使用暴露出來的介面就要讓參數與它一一對應。

---恢複內容結束---

我們希望一個頁面按需引入，這個頁面需要什麼功能就引入什麼功能。現在主流的工具有兩種，amd規範的RequireJS、cmd規範的Seajs。

什麼是Seajs

1. Seajs是一個載入器 http://yslove.net/seajs/
   
   
2. 遵循 CMD 規範模組化開發，依賴的自動載入、配置的簡潔清晰。

3. 相容性

   • Chrome 3+
   • Firefox 2+
   • Safari 3.2+
   • Opera 10+
   • IE 5.5+

基本應用匯入Seajs庫

1. 去官網下載最新的seajs檔案， http://seajs.org/docs/#downloads
2. 在頁尾引入seajs： 
   <script src="/site/script/sea.js"></script>

3. 然後在它下面寫模組的配置和入口。

   // seajs 的簡單配置seajs.config({  base: "../sea-modules/",  alias: {    "jquery": "jquery/jquery/1.10.1/jquery.js"  }});// 載入入口模組seajs.use("../static/hello/src/main");

配置和入口

這裡解釋下配置和入口的意思。

配置

通常在配置上修改seajs的路徑和別名。

 

seajs的 路徑是相對於前面引入的seajs檔案的 。假如是這樣的目錄結構：

examples/  |-- index.html  |  `--about  |     |-- news.html  |  `-- script        |-- seajs.js        |-- jquery.js        `-- main.js

 

我們平時如果我們在index.html上引用main.js路徑應該是這樣寫的 script/main.js ，從news.html引用main.js就要這樣寫， ../script/main.js 。

而在seajs是相對於seajs檔案的，一律直接使用 main.js 就OK了，是不是很方便呢？

既然這麼方便那在什麼情況需要配置呢？一般情況是用不到的。但是假如你的路徑特別深 或者要做路徑映射的時候它的作用就來了。下面介紹下常用的幾個配置。

seajs.config({// Sea.js 的基礎路徑（修改這個就不是路徑就不是相對於seajs檔案了）base: ‘http://example.com/path/to/base/‘,// 別名配置（用變數表示檔案，解決路徑層級過深和實現路徑映射）alias: {‘es5-safe‘: ‘gallery/es5-safe/0.9.3/es5-safe‘,‘json‘: ‘gallery/json/1.0.2/json‘,‘jquery‘: ‘jquery/jquery/1.10.1/jquery‘},// 路徑配置（用變數表示路徑，解決路徑層級過深的問題）paths: {‘gallery‘: ‘https://a.alipayobjects.com/gallery‘}});

查看更多

入口

入口即載入，需要載入什麼檔案（模組載入器）就在這裡引入。 sea.js 在下載完成後，會自動載入入口模組。

seajs.use("abc/main");  //匯入seajs.js同級的abc檔案夾下的main.js模組的（尾碼名可略去不寫）

seajs.use()還有另外一種用法。

有時候我們寫一個簡單的單頁並不想為它單獨寫一個js檔案，選擇在直接把js代碼寫在頁面上，seajs通過 seajs.use() 實現了這個。 接收兩個參數第一個是檔案依賴(單個用字串數組都可以，多個需用數組表示)，第二個是回呼函數。

載入單個依賴

//載入模組 main，並在載入完成時，執行指定回調seajs.use(‘./main‘, function(main) {  main.init();});

載入多個依賴

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

 

這裡回掉函數中的a和b參數是與前面的模組暴露出來的介面一一對應的。有時候也許只需要使用b的介面，但是也要把a參數寫上。什麼是暴露介面下面會解釋。

模組開發

這裡才是重點，其實也很簡單就是一個書寫規範（CMD）而已。

// 所有模組都通過 define 來定義define(function(require, exports, module) {  // 通過 require 引入依賴  var $ = require(‘jquery‘);  var Spinning = require(‘./spinning‘);  // 通過 exports 對外提供介面  exports.doSomething = ...  // 或者通過 module.exports 提供整個介面  module.exports = ...});

 

模組是通過define()方法封裝的，然後內部痛過require()方法引入需要的依賴檔案(模組)。（也可以引入.css檔案哦~）

模組最好是物件導向開發的，這樣最後可以方便的通過 exports.doSomething 或 module.exports 把模組的介面給暴露出來。如果你是寫的是jq外掛程式的話就不需要這個功能了，因為你的介面是寫在jquery的對象裡的。如果你不需要提供介面的話也可以不使用這兩個屬性哦！

 

事實上define方法還有另外幾個參數，一般情況我們用不到。具體看 官方API 。

小結

其實Seajs的基本使用就這麼簡單，日常使用足夠了，之前看官網的 5分鐘教程 楞是沒看懂，後來想想真的是5分鐘學會啊,悟性太低- -||

注意事項

1. 模組內的函數依賴必須交代清楚，防止模組在函數依賴載入前先載入出來。而且還增強了模組的獨立性。
2. 引入seajs的時候最好給 <script> 標籤加個id，可以快速存取到這個標籤（我是在模組合并時用到它的）
3. 還有前面提到的使用 seajs.use() 在.html頁面上寫js時如果有多個模組依賴，需要使用暴露出來的介面就要讓參數與它一一對應。

簡單的使用Seajs