插件開(kāi)發(fā)指南

Sea.js 通過(guò)事件提供可擴(kuò)展接口。要給 Sea.js 開(kāi)發(fā)插件，需要了解 Sea.js 內(nèi)部所提供的事件類(lèi)型。

事件機(jī)制

Sea.js 內(nèi)置了一個(gè)非常小巧的 Pub-Sub 機(jī)制。API 簡(jiǎn)要如下：

seajs.on seajs.on(event, callback)

用來(lái)添加事件回調(diào)。

// 給 fetch 事件添加一個(gè)回調(diào)seajs.on('fetch', function(data) {
  ...
});

seajs.off seajs.off(event?, callback?)

用來(lái)移除事件回調(diào)。

// 從 fetch 事件的回調(diào)中移除掉 fn 函數(shù)seajs.off('fetch', fn);// 移除掉 fetch 事件的所有回調(diào)seajs.off('fetch');// 移除掉所有事件的所有回調(diào)seajs.off();

seajs.emit seajs.emit(event, data)

用來(lái)觸發(fā)事件。

// 觸發(fā) fetch 事件seajs.emit('fetch', { uri: uri, fetchedList: fetchedList });

利用以上三個(gè)方法，我們就可以給 Sea.js 添加事件來(lái)實(shí)現(xiàn)擴(kuò)展了。

事件類(lèi)型

Sea.js 內(nèi)部提供了 8 種事件。

resolve       -- 將 id 解析成為 uri 時(shí)觸發(fā)
load          -- 開(kāi)始加載文件時(shí)觸發(fā)
fetch         -- 具體獲取某個(gè) uri 時(shí)觸發(fā)
request       -- 發(fā)送請(qǐng)求時(shí)觸發(fā)
define         -- 執(zhí)行 define 方法時(shí)觸發(fā)
exec         -- 執(zhí)行 module.factory 時(shí)觸發(fā)
config         -- 調(diào)用 seajs.config 時(shí)觸發(fā)
error          -- 加載腳本文件出現(xiàn) 404 或其他錯(cuò)誤時(shí)觸發(fā)

每個(gè)事件觸發(fā)時(shí)會(huì)帶上相關(guān)聯(lián)的數(shù)據(jù)，比如

  // Emit `fetch` event for plugins such as plugin-combo
  var data = { uri: uri }
  emit("fetch", data)

上面是觸發(fā) fetch 事件的源碼。訂閱的 callback 回調(diào)會(huì)接受到 data 參數(shù)：

seajs.on('fetch', function(data) {  if (data.uri) {
    data.requestUri = data.uri + '?t=' + new Date().getTime()
  }
});

上面就實(shí)現(xiàn)了一個(gè)最簡(jiǎn)單的 nocache 插件。

每一個(gè)事件發(fā)送的具體數(shù)據(jù)參數(shù)，請(qǐng)?jiān)谠创a中用事件名搜索相關(guān)代碼就好。

內(nèi)部數(shù)據(jù)與方法

seajs.data Object

通過(guò) data 接口，你幾乎可以獲取了 Sea.js 內(nèi)部的所有配置數(shù)據(jù)和核心內(nèi)部數(shù)據(jù)。

seajs.Module Object

通過(guò) Module 接口，你幾乎可以獲取了 Sea.js 內(nèi)部的所有核心方法。

有了 data 和 Module，以及前面的事件接口，插件開(kāi)發(fā)者就可以開(kāi)發(fā)出各種插件了。推薦訪問(wèn)https://github.com/seajs 查看所有插件?？匆粌蓚€(gè)插件的源碼后，我相信你很快也就能開(kāi)發(fā)出自己的插件。

插件的加載方式

#794

小結(jié)

事件機(jī)制非常靈活。如果在實(shí)際使用中發(fā)現(xiàn)有什么不妥，歡迎提供建議一起來(lái)完善。