**1 文件源代碼(22 domReady.modern.js)**
~~~
var readyList = [], isReady
var fireReady = function (fn) {
isReady = true
var require = avalon.require
if (require && require.checkDeps) {
modules["domReady!"].state = 4
require.checkDeps()
}
while (fn = readyList.shift()) {
fn(avalon)
}
}
if (DOC.readyState === "complete") {
setTimeout(fireReady) //如果在domReady之外加載
} else {
DOC.addEventListener("DOMContentLoaded", fireReady)
}
window.addEventListener("load", fireReady)
avalon.ready = function (fn) {
if (!isReady) {
readyList.push(fn)
} else {
fn(avalon)
}
}
avalon.config({
loader: true
})
avalon.ready(function () {
avalon.scan(DOC.body)
})
~~~
**2 文件分析**
`var readyList = [],isReady `
>[info] readyList:ready事件數組,isReady:ready狀態控制
~~~
var fireReady = function (fn) {
isReady = true
var require = avalon.require
if (require && require.checkDeps) {
modules["domReady!"].state = 4
require.checkDeps()
}
while (fn = readyList.shift()) {
fn(avalon)
}
}
~~~
>[info] firReady() ready事件處理句柄函數
`isReady = true`
>[info] 將isReady狀態設置為true
`var require = avalon.require`
>[info] 獲取全局加載器require
關于加載器見 框架工具 另:內置加載器
~~~
if (require && require.checkDeps) {
modules["domReady!"].state = 4
require.checkDeps()
}
~~~
>[info] 檢查require,require.checkDeps存在的話
檢查模塊依賴是否安裝成功
~~~
while (fn = readyList.shift()) {
fn(avalon)
}
~~~
>[info] 依次執行注冊到readyList數組中的待執行函數
~~~
if (DOC.readyState === "complete") {
setTimeout(fireReady) //如果在domReady之外加載
} else {
DOC.addEventListener("DOMContentLoaded", fireReady)
}
~~~
>[info] 根據DOC狀態注冊 fireReady函數
DOC由附:全局變量可以為document,
瀏覽器加載文檔完成后修改document的狀態為complete
有關document的狀態修改,見 基礎原理的 瀏覽器的執行流程
`window.addEventListener("load", fireReady)`
>[info] 注冊window的load事件為fireReady
上面幾步,注冊了瀏覽器domready事件的處理句柄為fireReady()
下面的為avalon的ready接口,根據isReady的狀態,或者注冊到ready數組readList,或者直接運行
~~~
avalon.ready = function (fn) {
if (!isReady) {
readyList.push(fn)
} else {
fn(avalon)
}
}
~~~
>[info] avalon.ready() avalon.ready()接口,
如果domready沒有運行,即isReady為false,添加fn到readyList
如果domready已經運行,即isReady為true,以avalon為參數直接運行fn()
~~~
avalon.config({
loader: true
})
~~~
>[info] avalon的配置參數接口 avalon.config
~~~
avalon.ready(function () {
avalon.scan(DOC.body)
})
~~~
>[info] 使用avalon.ready()注冊avalon.scan()到readyList數組,
> domready后會直接執行scan()進入文件掃描
**3 總結**
1 注冊domready事件為fireReady
2 生成avalon.ready()接口用來注冊事件函數到readList數組
3 使用avalon.ready()注冊avalon.scan()到readLits數組,domready后直接運行scan()