NIUCLOUD是一款SaaS管理后台框架多应用插件+云编译。上千名开发者、服务商正在积极拥抱开发者生态。欢迎开发者们免费入驻。一起助力发展! 广告
**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()