jQuery에서 Ready 메소드를 시뮬레이션하고 CSS 및 JS 예제 code_jquery의 주문형 로딩을 구현합니다.

1.ready 함수 구현
저는 jQuery 클래스 라이브러리나 다른 클래스 라이브러리에서 Ready 메소드를 자주 사용하는데, 어떻게 구현하는지 생각해 볼 때가 있습니다. 살펴보기 jQuery의 소스 코드에는 많은 모듈이 포함되어 있으며 코드(제한된 수준)는 이해하기 어렵습니다. 요약하기 위해 일부 책 내용을 결합했습니다.
먼저 Ready 함수의 구현 아이디어에 대해 이야기해 보겠습니다.
변수 Ready는 표현식에 의해 할당됩니다. 오른쪽은 자체 실행되는 익명 함수입니다. 이 익명 함수에서는 먼저 처리 함수를 바인딩합니다. 각 브라우저의 이벤트에 isReady(이벤트 비동기 핸들러에 따라 결정)에 값을 할당한 다음 클로저에서 isReady 값을 주로 판단하여 작업을 수행합니다. dom 구조가 준비되면(isReady === true) 콜백이 실행됩니다. 그렇지 않으면 실행할 큐(funs)에 콜백을 추가합니다. 이벤트 핸들러가 실행되면 큐(funs)를 반복하고 함수를 실행합니다. 대기열에 있는 함수를 실행한 후에는 대기열을 지워야 합니다(funs = null).

코드 복사 코드는 다음과 같습니다.

var Ready = (function(){
var isReady = false,
funs = [];
함수 핸들 (e) {
if ( isReady ) {
return;
}
if ( e.type = == 'readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) {
                                                                                           length; i ) {
            funs[i].call(document);
document.addEventListener( 'DOMContentLoaded', 핸들, false );
document.addEventListener( 'readystatechange', 핸들, false );
document.addEventListener( 'load', 핸들, false );
}
else if ( document.attachEvent ) {
document.attachEvent( 'onreadystatechange', 핸들 );
document.attachEvent( 'onload', 핸들 );
}
반환 함수 준비(콜백) {
if ( isReady ) {
callback.call(document);
}
else {
funs.push(callback);
}
} ;
}());


PS:
이 함수 코드는 권위 있는 가이드북을 참조합니다. 유일한 차이점은 추가 판단 document.readyState !== 'interactive'입니다.

코드 복사


코드는 다음과 같습니다.

if ( e.type === ' Readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) { return;}

다양한 상호작용 및 완료 상태 브라우저 표시 순서는 일관성이 보장되지 않습니다. 이는 브라우저 및 페이지 내용에 따라 다릅니다. document.readyState !== 'interactive'가 추가되면 어떤 단계가 먼저 나타나든 코드가 표시될 수 있습니다. 더 일찍 실행됩니다.

2. 요청 시 CSS 로드, js

는 jQuery 소스 코드를 참조하고 매개변수 유형을 반환하는 유형 함수를 작성합니다.


코드 복사
코드는 다음과 같습니다.

/**
*
* 매개변수 유형 결정
* createTime: 2013/9/18
*
*/
함수 유형(obj) {
    var classTypes, objectTypes;
    if ( obj == null ) {
        return String(obj) ;
    }
    classTypes = {};
    objectTypes = ('부울 숫자 문자열 함수 배열 날짜 RegExp 개체 오류').split(' ');
    for ( var i = 0, len = objectTypes.length; i < len i ) {
        classTypes[ '[object ' objectTypes[i] ']' ] = objectTypes[i].toLowerCase();
    }
    if ( obj === '객체' || typeof obj === '함수' ) {
        var key = Object.prototype.toString.call(obj);
        return classTypes[key];
    }
    obj 반환 유형;
}

复제代码 代码如下:

// css按需加载
function loadCss(cssUrl, 콜백) {
    var elem, bl,
        isExecuted = false; // 防止재ie9中，콜백执行两次
    if ( cssUrl == null ) {
        return String(cssUrl);
    }
    elem = document.createElement('link'),
    elem.rel = 'stylesheet';
    if ( type(callback) === 'function' )  {
        bl = true;
    }
    // for ie
    함수 핸들 () {
        if ( elem.readyState === 'loaded' || elem.readyState === 'complete' ) {
            if (bl && !isExecuted) {
               callback();
>>   // nonie
의 경우    if (bl && !isExecuted) {
        elem.onload = callback;
        isExecuted = true;
    }
    elem.href = cssUrl;
    document.getElementsByTagName('head')[0].appendChild( elem);
}
// js按需加载
function loadScript(scriptUrl, callback) {
    var elem, bl,
        isExecuted = false; // 防止재ie9中，콜백执行两次
    if (scriptUrl == null) {
        return String(fn);
    }
    elem = document.createElement('script');
    if ( type(callback) === 'function' )  {
        bl = true;
    }
    // for ie
    function handler(){
        var status = elem. ReadyState;
        if (상태 === '로드됨' || 상태 === '완료') {
            if (bl && !isExecuted) {
               callback();
                isExecuted = true;
           }
            elem.onreadystatechange = null;
        }
    }
    elem.onreadystatechange = handler;
    // 不ie
의 경우    if (bl && ! 실행됨) {
        elem.onload = callback;
        isExecuted = true;
    }
    elem.src = scriptUrl;
    document.getElementsByTagName('head')[0].appendChild(elem);
}


PS: 링크 및 스크립트 요소가 로드되었는지 판단할 때 IE9 이하의 브라우저에서는 주로 로드 이벤트에 의존합니다. IE는
요소.readyState 상태는 요소가 로드되었는지 여부를 결정하며, 이상하게도 ie9(및 다른 브라우저 버전)에서는 요소에 로드 이벤트와 Readystatechange 이벤트가 모두 있으므로 변수 isExecuted가 코드에 추가됩니다. 콜백이 실행되면 콜백이 두 번 실행되는 것을 피하기 위해 더 이상 실행되지 않습니다.
3. 호출 방법

코드 복사 코드는 다음과 같습니다. :

loadCss('http://www.jb51.net/apps/tbtx/miiee/css/base.css', function(){
console.log('css 로드됨 ') ;
});
loadScript('http://www.jb51.net/apps/tbtx/miiee/js/jQuery.js', function(){
console.log(' js 로딩 완료');
});
ready(function(){
console.log('dom is Ready!');
});