jQuery 소스코드를 통해 자바스크립트 배우기(3)_jquery

질문

첫 번째 기사에서 한 블로거가 다음과 같은 질문을 했습니다. 이해가 된다면 한두 가지만 말씀해 주시겠습니까?

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

var str = "test" ;
for(var a in str){
console.log(a ":" str[ a ])

출력 결과
이것은 String 개체입니다. for를 사용하면 위와 같은 상황이 발생합니다.

자체 호출 익명 함수(function(){})(window)

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

(function(window, undefine){
// jquery code
})(window)

코드 분석:

첫 번째 괄호: 익명 함수를 만듭니다.
두 번째 브래킷: 즉시 실행합니다.

창 변수를 전달하는 이유:
창 변수를 전역 변수에서 지역 변수로 변경합니다. 더 빠른 액세스를 위해 범위 체인을 최상위 범위로 되돌릴 필요가 없습니다. 창문으로.
매개변수 목록에 정의되지 않음을 추가하는 이유:
자체 호출 익명 함수의 범위 내에서 정의되지 않음이 실제로 정의되지 않았는지 확인하세요.
이 디자인의 이점:
개인 네임스페이스를 만듭니다. 함수 본문 내의 변수와 메서드는 전역 공간에 영향을 주지 않습니다. 다른 프로그램의 변수와 충돌하지 않습니다.


함수 확장 확장()
일반적인 디자인 습관에 따라 도트(.) 구문을 통해 직접 구현하거나 프로토타입 객체에 속성을 추가하여 구현할 수 있습니다. 구조. . ——jQuery 프레임워크는 확장() 함수를 통해 함수 확장을 구현합니다.
비슷한 방법을 해보자. ——지정된 매개변수 개체에 포함된 모든 속성을 cQuery 또는 cQuery.prototype 개체에 복사합니다.

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

(function(){
var
_cQuery = window.cQuery,
cQuery = function(){
return new cQuery.fn.init()
};

cQuery.fn = cQuery.prototype = {
init : function () {
return this;
}
}
cQuery.fn.init.prototype =

cQuery.extend; cQuery.fn .extend = function( obj ) {
for (var prop in obj) {
this[ prop ] = obj[ prop ]
}
return this; 🎜>
cQuery.fn.extend({
test : function() {
console.log('Test!');
}
}); = window.cQuery = cQuery;
})();
// 호출 방법


장점:
사용자가 빠르게 확장할 수 있도록 jQuery 프레임워크의 기능은 jQuery 프레임워크의 프로토타입 구조를 파괴하지 않습니다.
2. 관리가 편리합니다.
참고:

프로토타입으로 확장된 객체의 경우 인스턴스화 함수(예: cQuery().test()를 통해 호출해야 하지만 cQuery.test()는 사용할 수 없음)


객체 URL 매개변수화된 param()




코드 복사

코드는 다음과 같습니다. (함수(){ var _cQuery = window.cQuery,

cQuery = function(){

return new cQuery.fn.init();
};

cQuery .fn = cQuery.prototype = {
init : function () {
return this;
}
};

cQuery.param = function(obj) {
var prefix, s = [];
for ( prefix in obj ) {
s[ s.length ] = encodeURIComponent( prefix ) "=" encodeURIComponent( obj[ prefix ])
}
return s.join( "&" );
}


cQuery.fn.init.prototype = cQuery.fn
window.C = window.cQuery = cQuery;
})();

var param = cQuery.param({"name":"chuanshanjia", "age":30})
console.log( param ); >

결과 출력



개체 URL 매개변수화: 구조화에 도움이 되고 유지 관리가 쉽습니다. URL 뒤에 매개변수 목록을 추가하면 어지러워지지 않을까요?

요약

당분간 여기에 글을 쓰겠습니다. 추가하실 내용이 있으면 좋겠습니다. ——더 많이 소통하고 서로에게서 배우도록 합시다.