domReady源码解析

 //步骤一:创建一个自执行函数 将函数执行后的返回值赋值给domReady  
var domReady = (function() {
    //需要注意的是当window对象那个不等于undefined的时候 将document赋值给isBrowser 否则赋值成false
    var isBrowser = typeof window !== "undefined" && window.document;
    //如果 window对象存在 就初始化为false 否则为true
    var isPageLoaded = !isBrowser;
    //如果window对象存在 就初始化为null 否则初始化为document
    var doc = isPageLoaded ? document : null;
    var readyCalls = [];
    //步骤三:绑定页面加载完成之后的事件
    //如果window对象存在 就绑定页面加载完 的事件 （此处是核心 监听页面是否加载完成的事件）
    if (isBrowser) {
        if (document.addEventListener) {
            document.addEventListener("DOMContentLoaded", pageLoaded, false);
            window.addEventListener("load", pageLoaded, false);
        }
        if (document.readyState === "complete") {
            pageLoaded();
        }
    }
    //页面加载完 绑定的执行函数
    function pageLoaded() {
        //如果window对象存在的话就执行
        if (!isPageLoaded) {
            isPageLoaded = true;
            callReady();
        }
    }
    //window对象存在的执行函数
    function callReady() {
        var callbacks = readyCalls;
        if (isPageLoaded) {
            if (callbacks.length) {
                readyCalls = [];
                runCallbacks(callbacks)
            }
        }
    }
    //内部返回一个null 不对外部window做任何操作
    function runCallbacks(callbacks) {
        var i;
        for (i = 0; i < callbacks.length; i += 1) {
            callbacks[i](doc);
        }
    }

    //步骤二:此处是程序的开始执行位置
    function domReady(callback) {
        //window对象如果不存在 将创建的document对象回传
        if (isPageLoaded) {
            callback(doc);
        } else {
            //如果window对象存在 将回调函数存入数组
            readyCalls.push(callback)
        }
        return domReady;
    }

    domReady.version = "版本信息";
    //此处是定义一个其它的调用方式
    domReady.load = function(name, req, onload, config) {
        if (config.isBuild) {
            onload(null);
        } else {
            domReady(onload);
        }
    }
    return domReady;
})();
//插件调用方式一
domReady(function(doc) {
    console.info(doc)
});
//插件调用方式二
/*domReady.load("name", "req", function(doc) {
    console.info(doc)
}, {isBuild:null});*/

//此处是获取插件的版本信息
console.info(domReady.version);

 

转载于:https://www.cnblogs.com/ctrek/p/6367458.html