seajs實現了JavaScript 的 模塊開發及按模塊加載。用來解決繁瑣的js命名沖突，文件依賴等問題，其主要目的是令JavaScript開發模塊化并可以輕松愉悅進行加載。

首先看看seajs是怎么進行模塊開發的。使用seajs基本上只有一個函數“define”

fn.define= function(id,deps, factory) {//code of function…}

使用define函數來進行定義一個模塊，根據 CMD （Common Module Definition）模塊定義規范。一個文件就是一個模塊。所以一個js文件中只有一個define，即一個文件是一個模塊，SeaJS中模塊的概念有點類似于面向對象中的類——模塊可以擁有數據和方法，數據和方法可以定義為公共或私有，公共數據和方法可以供別的模塊調用。

官方實例中，define只傳入一個參數： 一個工廠函數

define(function(require,exports, module) {//code of the module...});

在看參數之前，我們先看看define是如何處理參數的:

fn.define = function(id, deps, factory)

define可以接收的參數分別是模塊ID，依賴模塊數組及工廠函數;

如果只有一個參數，則賦值給factory。

如果有兩個參數，第二個賦值給factory；第一個如果是array則賦值給deps，否則賦值給id。

如果有三個參數，則分別賦值給id，deps和factory。

根據官方實例，建議還是根據官方的來就傳遞一個參數，即只有factory參數，這樣的話模塊id默認為js文件路徑。

在來看看工廠函數的參數：

require, exports, module

• require——模塊加載函數，用于記載依賴模塊。通過這個參數來進行對其他模塊的加載。
• exports——接口點，將數據或方法定義在其上則將其暴露給外部調用。通過這個參數，來將這個模塊的方法進行暴露
• module——模塊的元數據。其是一個對象，有屬性：
  • module.id——模塊的ID。
  • module.dependencies——一個數組，存儲了此模塊依賴的所有模塊的ID列表。
  • module.exports——與exports指向同一個對象。

使用factory的參數的使用：

define(function(require,exports, module) {var a = require('./a');//引入a模塊 exports.fun2= function(){alert("fun2");a.dosomething();　　} }

使用require對象來進行加載模塊，其實使用正則表達式進行驗證加載的，所以其參數必須是特定的字符串，不能是表達式。

seajs會自動在require的參數中加入".js"來進行加載，即不需要寫上后綴名，但是在某些情況下，seajs不會為其添加“.js”:

1.載入css：　　　　

require("./module1-style.css");

2.路徑中含有“？”：　

require(<a href="http://example/js/a.json?b=func" rel="external nofollow" >http://example/js/a.json?cb=func</a>);

3.路徑以“#”結尾：

require(http://example/js/a.json#);

使用exports來向外部暴露方法，或者屬性。暴露屬性有幾種方式，如上面中的例子是一種方式，另外還有：

使用return：

define(function(require){var data1 = 1; //私有數據var func1 = function() { //私有方法returna.run(data1);}//暴露return{data2: 2,func2:function() {return'hello';}}; });

直接返回json對象：

define({data: 1,func:function() {return'hello';}});

頁面中調用seajs

前面說了seajs用來解決模塊開發，和繁瑣的文件依賴問題，所以所有的文件依賴都是通過require對象進行加載，或者可以使用require.async（“./a”）來進行異步加載，即當使用到的時候才進行加載，

注：無論是require（）還是require.async（）都可以有第二個參數為回調函數，當文件加載成功時調用：

require.async('/path/to/module/file',function(m) {//code of callback...});

有了這個加載依賴的方式，我們無需再頁面上書寫大量的<script ></script>標簽，而僅僅使用一個

<script src="./sea.js" data-main="./init"></script>

即可，其中data-main="./init" 為入口模塊，表示加載這個模塊，在進行迭代加載其所依賴的模塊，使用這個屬性可以省略seajs.use。這個后面說。

使用seajs.config進行全局配置：

seajs.config({base:'path/to/jslib/',alias: {'app':'path/to/app/'},charset:'utf-8',timeout: 20000,debug:false});

這是對seajs進行全局配置，

base表示基址尋址時的基址路徑

alias可以對較長的常用路徑設置縮寫。

charset表示下載js時script標簽的charset屬性。

timeout表示下載文件的最大時長，以毫秒為單位。

debug表示是否工作在調試模式下。

使用seajs.use 載入入口模塊，相當于java的main函數，

//單模塊模式seajs.use('./a');//回調模式seajs.use('./a',function(a){a.dosomething();});//多模塊模式seajs.use(['./a','./b'],function(a,b) {a.dosomething();b.dosomething();});

下面可以看其官方給的simple例子中的頁面怎么寫的，基本上就明白了sea.js 是怎么用的了：

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script><script>// Set configurationseajs.config({base: "../sea-modules/",alias: {"jquery": "jquery/jquery/1.10.1/jquery.js"}});// For developmentif (location.href.indexOf("?dev") > 0) {seajs.use("../static/hello/src/main");}// For productionelse {seajs.use("examples/hello/1.0.0/main");}</script>

//mian.js

//hello/mian.jsdefine(function(require) {var Spinning = require('./spinning');var s = new Spinning('#container');s.render();});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。