介紹

眾所周知前端開發(fā)模塊化已經(jīng)是大勢所趨，目前模塊化的規(guī)范有很多，眾所周知的有commonJS，Module/Wrappings和AMD等，而且ES6也著手開始制定模塊化機制的實現(xiàn)。類似于c/c++的include，java中的import關鍵字，在js中也定義了require關鍵字，用以引進依賴模塊。

由于規(guī)范的多樣性，模塊化的實現(xiàn)也是各有各的不同。

nodejs遵從的就是commonJS規(guī)范，它有著一些形式上的約定：　　

      1、require為函數(shù)，該函數(shù)接受一個字符串作為模塊標示符

      2、require函數(shù)返回值為該模塊API

      3、require函數(shù)出錯，則拋出異常

      4、exports導出模塊API

      5、如果有多個require，則依次加載依賴

但是瀏覽器端加載的模塊卻不像服務器端，依賴模塊不在本地，需要通過http請求獲取文件，這就涉及到異步加載。但是異步加載并不阻塞代碼的運行，如果函數(shù)上下文中應用了加載的依賴模塊，而此時依賴模塊并未加載或者解析完畢，就會拋出undefined錯誤，避免該錯誤的發(fā)生可以使用回調(diào)模式。當所有依賴模塊均加載完畢，后執(zhí)行代碼。這也就是Module/Wrappings規(guī)范，而seajs基本實現(xiàn)了該規(guī)范。

SeaJS 是一個模塊加載器，模塊加載器需要實現(xiàn)兩個基本功能：

      1、實現(xiàn)模塊定義規(guī)范，這是模塊系統(tǒng)的基礎。

      2、模塊系統(tǒng)的啟動與運行。

剖析

閱讀seajs官網(wǎng)的入門demo，首先在主頁面引入seajs文件，并設置入口

// seajs 的簡單配置
seajs.config({
 base: "../sea-modules/",
 alias: {
 "jquery": "jquery/jquery/1.10.1/jquery.js"
 }
})

// 加載入口模塊
seajs.use("../static/hello/src/main")

其次定義模塊（main.js）

// 所有模塊都通過 define 來定義
define(function(require, exports, module) {

 // 通過 require 引入依賴
 var $ = require('jquery');
 var Spinning = require('./spinning');

 // 通過 exports 對外提供接口
 exports.doSomething = ...

 // 或者通過 module.exports 提供整個接口
 module.exports = ...

});

這樣，當打開頁面時，會調(diào)用seajs.use函數(shù)并加載main.js文件，此時解析main模塊的依賴，并加載jquery和spining模塊，待這兩個模塊加載完畢，執(zhí)行回調(diào)函數(shù)。具體執(zhí)行細節(jié)將會在分析源碼時提到。

總結

以上就是關于seajs介紹與剖析的全部內(nèi)容，希望本文的內(nèi)容對大家學習或者使用seajs能有所幫助，如果有疑問大家可以留言交流。小編還會陸續(xù)更新關于seajs的文章，感興趣的朋友們請繼續(xù)關注腳本之家。

最新評論