**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()
