介紹

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

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

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

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

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

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

      4、exports導(dǎo)出模塊API

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

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

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

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

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

剖析

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

// 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 = ...});

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

總結(jié)

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