快捷導(dǎo)航

seajs學(xué)習(xí)教程之基礎(chǔ)篇

更新時(shí)間：2016年10月20日 15:08:38 作者：royalrover

Seajs是一個(gè)Web模塊加載框架，追求簡(jiǎn)單、自然的代碼書寫和組織方式，Sea.js 遵循 CMD 規(guī)范，模塊化JS代碼。依賴的自動(dòng)加載、配置的簡(jiǎn)潔清晰，可以讓程序員更多地專注編碼。這篇文章為seajs深入學(xué)習(xí)的第一篇，主要介紹的基礎(chǔ)性的內(nèi)容，感興趣的朋友們可以參考學(xué)習(xí)。

介紹

眾所周知前端開發(fā)模塊化已經(jīng)是大勢(shì)所趨，目前模塊化的規(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ù)接受一個(gè)字符串作為模塊標(biāo)示符

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

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

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

5、如果有多個(gè)require，則依次加載依賴

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

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

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

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

剖析

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

// seajs 的簡(jiǎn)單配置
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 對(duì)外提供接口
 exports.doSomething = ...

 // 或者通過 module.exports 提供整個(gè)接口
 module.exports = ...

});

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

總結(jié)

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

您可能感興趣的文章: