?

什么是Seajs

Seajs是一個加載器?http://yslove.net/seajs/

遵循 CMD 規范模塊化開發，依賴的自動加載、配置的簡潔清晰。

兼容性

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

基本應用

導入Seajs庫

去官網下載最新的seajs文件，?http://seajs.org/docs/#downloads

在頁尾引入seajs：?
<script src="/site/script/sea.js"></script>

然后在它下面寫模塊的配置和入口。

// 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分鐘學會啊,悟性太低- -||

注意事項

模塊內的函數依賴必須交代清楚，防止模塊在函數依賴加載前先加載出來。而且還增強了模塊的獨立性。

引入seajs的時候最好給?<script>?標簽加個id，可以快速訪問到這個標簽（我是在模塊合并時用到它的）

還有前面提到的使用?seajs.use()?在.html頁面上寫js時如果有多個模塊依賴，需要使用暴露出來的接口就要讓參數與它一一對應。

---恢復內容結束---

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

什么是Seajs

Seajs是一個加載器?http://yslove.net/seajs/

遵循 CMD 規范模塊化開發，依賴的自動加載、配置的簡潔清晰。

兼容性

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

基本應用

導入Seajs庫

去官網下載最新的seajs文件，?http://seajs.org/docs/#downloads

在頁尾引入seajs：?
<script src="/site/script/sea.js"></script>

然后在它下面寫模塊的配置和入口。

// 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分鐘學會啊,悟性太低- -||

注意事項

模塊內的函數依賴必須交代清楚，防止模塊在函數依賴加載前先加載出來。而且還增強了模塊的獨立性。

引入seajs的時候最好給?<script>?標簽加個id，可以快速訪問到這個標簽（我是在模塊合并時用到它的）

還有前面提到的使用?seajs.use()?在.html頁面上寫js時如果有多個模塊依賴，需要使用暴露出來的接口就要讓參數與它一一對應。

轉載于:https://www.cnblogs.com/pms01/p/7041606.html

總結

以上是生活随笔為你收集整理的简单的使用Seajs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。