jQuery의 내부 전역 변수 및 구조 함수

10684 단어 js
jQuery 외부 패키지 함수
임의의 jQuery의 원본 js 파일을 열면 익명의 자동 실행 함수를 볼 수 있습니다. 아래 코드와 같습니다.
//()();     ,       
(function(window, undefined) {
    //... ... 
})(window);

window는 전역적인 대상입니다. 왜 window를 매개 변수로 프레임 내부에 전달합니까?
  • 함수 창고를 호출할 때 인수 변수의 순서는 안에서 밖으로 진행된다.window는 전역 대상으로서 마지막에 검색한 것이 틀림없고 내부에 넣으면 속도를 높일 수 있다.
  • js는 압축버전compress를 가지고 있다. 그러면 jQuery 내부에서 window를 사용할 때 압축된 문자가 단일 문자로 변한다. 예를 들어 e는 window를 사용하는 모든 곳에서 window 내의 속성에 접근하지 않아 문법 오류가 발생하고 window를 매개 변수로 전달한다. jQuery 내의 window가 문자 e로 압축되더라도 e는 임의로 window를 가리킨다.

  • undefined는 왜 매개 변수로 합니까?
  • undefined는 윈도우의 다음 속성으로 초기 브라우저 버전에서 IE10 이하와 같이 수정할 수 있다.외부 js 환경이 window를 수정했다면.undefined 값이면 함수체 내부의 undefined 판단은 성립되지 않습니다.

  • 주석use strict
    jQuery는 왜 strict 모드에 주석을 달았습니까?이유:
  • strict 모드의 장점
  • 코드에서 확장된 보존 키워드인implements,interface,let,package,private,public,static,yield 등을 사용할 수 없습니다.
  • with문장은 사용할 수 없음;
  • eval과arguments 두 표지부를 설명하거나 다시 쓸 수 없다.
  • 설명된 표지부, 이름 또는 함수를 delete로 삭제할 수 없습니다.
  • 8진법을 명시할 수 없다.
  • 만약에 문법 검측을 할 때 문법 문제를 발견하면 전체 코드 블록이 효력을 상실하고 문법 이상을 초래한다. 예를 들어 검측 대상 중의 중복 키, 미설명 변수, 중복된 함수 파라미터 등이다.
  • 실행 중 엄격한 모드를 위반한 코드가 발생하면 실행 이상을 던집니다.

  • strict 모드 제한
  • 전역 코드나 eval 코드나 함수에 코드나 new Function에서 전송된 바디가 도입을 시작해야 한다.
  • 8진수 제한은 IE10 이하에서는 지원되지 않으며 FireFox 18 이하에서는 지원되지 않습니다.


  • strict에서 볼 수 있는 장점은 js 코드의 쓰기 규범과 문법 검사 등 기능을 규범화하는 것이다. 그러면 프로그래머 자체가 규범화된 코드를 쓸 수 있는 전제에서strict를 사용하면 약간 사족스러워 보인다.일부 브라우저 자체도strict 모드를 지원하지 않습니다.
    jQuery 글로벌 변수
    jQuery 원본 js의 21~94줄은 var이 정의한 jQuery 내의 국부 전역 변수입니다. 이 부분은 jQuery 외부 포장 함수의 변수를 가리키며 전역은 jQuery 대상입니다.다음과 같은 변수가 포함됩니다: rootjQuery, readyList, corestrundefined、location、document、docElem、 _jQuery、_$ 、class2type、core_deletedIds、core_version、core_concat、core_push、core_slice、core_indexOf、core_toString、core_hasOwn、core_trim 및 jQuery, corepnum、core_rnotwhite, rquickExpr, rsingleTag, rmsPrefix, rdashAlpha,completed 등 26개.26개의 변수가 어떤 역할을 하는지 원본을 읽기 시작하는 시작 문제입니다. 다음은 원본에 제공된 주석에 따라 번역하겠습니다.
  • 루트 jQuery 루트 노드 대상인'A central reference to the root jQuery(document)'는 jQuery(document)가 되돌아오는 루트 노드 대상의reference 인용을 의미하며, 870줄에 다음과 같은 값 부여 문구가 있다.
  • // 870  All jQuery objects should point back to these
    rootjQuery = jQuery(document);
  • DOM 로드에 대한 readyList 지연 객체
  • //826 
     readyList = jQuery.Deferred();
  • core_strundefined는 undefined의 문자 형식을 나타낸다--'undefined'
  • // Support: IE9   IE6/7/8     xml       
    //xmlNode.method !== undefined     method   undefined
    // For `typeof xmlNode.method` instead of`xmlNode.method !== undefined`
    core_strundefined = typeof undefined
  • window 매개 변수에 대응하는 속성 약자
  • location = window.location, //URL    
    document = window.document, //    
    docElem = document.documentElement, //  HTML    
  • _jQuery、_$ 외부 jQuery, $
  • 저장
    //356   noConflict ,      $、jQuery        。
    noConflict: function( deep ) {
        if ( window.$ === jQuery ) {
             window.$ = _$;
        }
    
        if ( deep && window.jQuery === jQuery ) {
              window.jQuery = _jQuery;
        }
    
        return jQuery;
    },
  • class2type 하나의object의 대상 글씨체 양으로 간략한 키 값을 저장하는 데 사용됩니다.
  • //847 ,          toString        
    // Populate the class2type map
    jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
            class2type[ "[object " + name + "]" ] = name.toLowerCase();
    });
  • jQuery 버전 및 일반 방법 약자
  • //      
    core_deletedIds = [],
    core_version = "2.0.3", //jQuery  
    //                    
    core_concat = core_deletedIds.concat,
    core_push = core_deletedIds.push,
    core_slice = core_deletedIds.slice,
    core_indexOf = core_deletedIds.indexOf,
    core_toString = class2type.toString,
    core_hasOwn = class2type.hasOwnProperty,
    core_trim = core_version.trim,
  • 정규 표현식, 기본 도구 표현식
  • 에 사용
    //         , 12,12.9,12e10,12.3e3
    core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
    //         ,  \S        
    core_rnotwhite = /\S+/g,
    //         HTML         ,          :Prioritize #id over <tag> to avoid XSS via location.hash (#9521);Strict HTML recognition (#11290: must start with <)
    //      /^(?:\s*(w\W]+>)[^>]*$/ /^#([\w-]*))$/     HTML   、#id   
    rquickExpr = /^(?:\s*()[^>]*|#([\w-]*))$/,
    //     HTML  , <input/><div>div>
    rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
    //ms  micro soft,           
    rmsPrefix = /^-ms-/,
    //         ,  0-9     a-z
    rdashAlpha = /-([\da-z])/gi,
  • camel 문자 변환 함수 fcamelCase
  • //      camel     , "a-d" "a-D", 
    fcamelCase = function( all, letter ) {
        return letter.toUpperCase();
    },
    //556 ,       camel      
    camelCase: function( string ) {
        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
    },
  • ready 이벤트 프로세서 complete
  • completed = function() {
         //    load    ,       jQuery.ready  
        document.removeEventListener( "DOMContentLoaded", completed, false );
        window.removeEventListener( "load", completed, false );
        jQuery.ready();
     };
  • jQuery 대상 구조기는 일반적으로 구성 요소를 봉인하는 구조기는 어떻게 합니까?
  • //      
    function myjQuery () {
        this.name = "myjQuery";
    }
    //       
    myjQuery.prototype.init = function() {
        //     
    }
    //   ,      
    var myjQueryObj = new myjQuery();
    myjQueryObj.init();
    

    jQuery를 사용할 때 jQuery(...) 또는 $(....)jQuery 대상을 가져오려면 jQuery 대상은 어떻게 만듭니까?다음 코드는 jQuery 대상이 실제적으로 jQuery라는 것을 알 수 있다.fn.init의 객체 및 jQuery.fn = jQuery.prototype, 그래서 jQuery 대상은 실제적으로 jQuery 원형 대상 함수 속성의 대상입니다.
    jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
     },

    총결산
    jQuery 초기에는 함수, 정규 표현식, 상수 등 많은 변수를 정의했다.이러한 변수는 jQuery 프레임워크에서 전역적인 역할을 발휘하여 jQuery 프레임워크에서 효율적이고 안전하며 간편한 도구로 사용된다.그 중에서 jQuery 함수는 jQuery 프레임워크의 구조기인데 그 중에서 jQuery가 구조 대상의 독특한 방식에 따라 프로그래밍하는 체험감의 장점을 알 수 있다.

    좋은 웹페이지 즐겨찾기