jQuery의 내부 전역 변수 및 구조 함수
10684 단어 js
임의의 jQuery의 원본 js 파일을 열면 익명의 자동 실행 함수를 볼 수 있습니다. 아래 코드와 같습니다.
//()(); ,
(function(window, undefined) {
//... ...
})(window);
window는 전역적인 대상입니다. 왜 window를 매개 변수로 프레임 내부에 전달합니까?
undefined는 왜 매개 변수로 합니까?
주석use strict
jQuery는 왜 strict 모드에 주석을 달았습니까?이유:
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개의 변수가 어떤 역할을 하는지 원본을 읽기 시작하는 시작 문제입니다. 다음은 원본에 제공된 주석에 따라 번역하겠습니다.// 870 All jQuery objects should point back to these
rootjQuery = jQuery(document);
//826
readyList = jQuery.Deferred();
'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
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;
},
//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();
});
//
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 , "a-d" "a-D",
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},
//556 , camel
camelCase: function( string ) {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},
completed = function() {
// load , jQuery.ready
document.removeEventListener( "DOMContentLoaded", completed, false );
window.removeEventListener( "load", completed, false );
jQuery.ready();
};
//
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가 구조 대상의 독특한 방식에 따라 프로그래밍하는 체험감의 장점을 알 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.