模拟jQuery中的ready方法及实现按需加载css,js实例代码

2020-05-22 15:43:11易采站长站整理

        }
    };
}());

PS:
该函数代码参照于权威指南书籍,唯一不同的是,多加了一个判断document.readyState !== ‘interactive’

if ( e.type === ‘readystatechange’ && (document.readyState !== ‘interactive’ && document.readyState !== ‘complete’) ) {
    return;
}

在各个浏览器中交互和完成状态出现顺序并不能保证一致,这取决于浏览器及页面的内容,多加了这个判断document.readyState !== ‘interactive’的话,
意思是不管哪个阶段先出现,代码都能更早的执行。
二、按需加载css,js
参照了jQuery源码,写了一个type函数,返回参数类型。

/**
 *
 * 判断参数类型
 * createTime: 2013/9/18
 *
 */
function type (obj) {
    var classTypes, objectTypes;
    if ( obj == null ) {
        return String(obj);
    }
    classTypes = {};
    objectTypes = (‘Boolean Number String Function Array Date RegExp Object Error’).split(‘ ‘);
    for ( var i = 0, len = objectTypes.length; i < len; i++ ) {
        classTypes[ ‘[object ‘ + objectTypes[i] + ‘]’ ] = objectTypes[i].toLowerCase();
    }
    if ( typeof obj === ‘object’ || typeof obj === ‘function’ ) {
        var key = Object.prototype.toString.call(obj);
        return classTypes[key];
    }
    return typeof obj;
}


// css按需加载
function loadCss (cssUrl, callback) {
    var elem, bl,
        isExecuted = false; // 防止在ie9中,callback执行两次
    if ( cssUrl == null ) {
        return String(cssUrl);
    }
    elem = document.createElement(‘link’),
    elem.rel = ‘stylesheet’;
    if ( type(callback) === ‘function’ )  {
        bl = true;
    }
    // for ie
    function handle() {
        if ( elem.readyState === ‘loaded’ || elem.readyState === ‘complete’ ) {
            if (bl && !isExecuted) {
                callback();
                isExecuted = true;