2012-10-31 4 views
0

예를 들어 다음은 jQuery1.8의 스크린 샷입니다. enter image description hereJquery에서 제공하는 JavaScript 구문을 설명해 주시겠습니까?

왜 jQuery 소스 코드의 관점에서이 작업을 수행 할 수 있습니까? addClass jquery의 방법입니까? 하지만 제가 본 것은 jQuery.fn.extend입니다.

$("xid").addClass("xxx"); 

나는 자바 스크립트 비교적 새로운 오전과 직접 .HTML 에 메소드를 추가처럼 꽤 간단한 코드를 썼습니다. 이것에 대해 상대적으로 문서의 번호를 검색하고 있지만

<html> 
    <script> 
     function m() { 
      alert("simple"); 
     } 
    </script> 
</html> 

나는, 특히는 ExtJS, jQuery를 같은 자바 스크립트 프레임 워크의 복잡한 구문을 이해할 수 없었다,하지만, 난 여전히 명확한 이해를 가지고 있지 않습니다. 어쩌면 나는 진지하게 특별한 자바 스크립트 책을 읽는 데 시간을 할애해야하지만,이 순간 나는 그 해답을 알고 싶다.

감사합니다.

+0

[MDN JavaScript Guide] (https://developer.mozilla.org/en-US/docs/JavaScript/Guide)의 기본 JavaScript 구문을 이해해야합니다. 특별한 책이 필요하지 않습니다. '.fn.extend'가 정확히 무엇을하고 있는지를 이해하려면 소스 코드를 살펴 봐야합니다. –

답변

2

이 질문에는 몇 가지 레이어가 있습니다. 첫 번째는 객체 리터럴입니다. Javascript를 사용하면 객체 리터럴 구문을 사용하여 객체를 선언 할 수 있습니다 (JSON은 문자열 만 저장/전송되는 구문입니다). 구문은 다음과 같다 :

var obj = { key1 : "value1", key2 : "value2" }; 

이 쓰기에 더 많은 구조/읽을 수있는 방법입니다 : 위의 코드는 같은 일을 정확히

var obj = { 
    key1 : "value1", 
    key2 : "value2" 
}; 

입니다

:

var obj = new Object(); 
obj.key1 = "value1"; 
obj.key2 = "value2"; 

을 그래서 당신은 라인에보고있어 :

addClass : function() { 

은 개체 리터럴 선언의 일부일뿐입니다. 기본적으로 코드가이 일을한다 : 그것은 직접 extend()에 대한 호출에서 객체 리터럴을 선언하는 것을 제외하고

var tmp = new Object(); 
// ... 
tmp.addClass = function() { /* ... */ }; 
// ... 
jQuery.fn.extend(tmp). 

것은 그래서 임시 변수를 사용할 필요가 없습니다.

두 번째 것은 자바 스크립트의 기능은 특별하지 않습니다. 즉, 함수는 다른 모든 것과 동일하게 취급됩니다 : 문자열, 숫자, 배열 & 개체. 사실 자바 스크립트에서는 문자열, 숫자, 배열 및 함수가 모두 객체입니다. 그래서 당신은 변수에 기능을 할당 할 수 있습니다

var n = function() {alert("Hello World");} 

그래서 전혀 아무것도 마법 일어나고있다. 이것은 단순히 extend 메서드에 대한 인수로 전달되는 함수 컬렉션을 포함하는 개체 리터럴 구문의 익명 개체를 만드는 것입니다.

구문에 대한 설명입니다. 즉, javascript 그 자체에서 일어나는 일입니다.

jQuery 코드를 살펴 보았습니다. 그래서 우리에게 일어나는 일에 대한 더 많은 단서가 제공됩니다. 우선 첫번째로 : jQuery.fn은 단순히 jQuery.prototype에 대한 포인터입니다. jQuery 자체가 생성자입니다. 자바 스크립트 생성자는 객체를 만드는 데 사용할 수있는 일반 함수입니다. 생성자를 사용하여 객체를 만들면 해당 객체는 생성자의 프로토 타입을 상속받습니다.

jQuery는 프로토 타입을 수정하고 extend 메서드를 추가하여 jQuery의 프로토 타입에 다른 메서드와 특성을 추가 할 수 있습니다. 어떤 일을하는지. 앞에서 언급 한 객체 리터럴에 포함 된 모든 함수는 extend 메서드로 처리되어 jQuery 자체에 추가되므로 새 jQuery 객체를 만들면 상속됩니다.


귀하의 의견에 따라 배우는 데 필요한 javascript에 관한 많은 것들이있는 것 같습니다. Rhino의 책 "JavaScript: The Definitive Guide"을 통해 읽어 보시기 바랍니다. 한 번 더 많이 알게되고 자바 스크립트에 익숙해지면 "Javascript: The Good Parts"을 읽어 보시기 바랍니다.

나는 여러분의 의견에 대해 최선을 다해 답변하려고 노력할 것입니다. 모든 것을 설명하기 위해서는 전체 책이 필요합니다. 라인에 대한

첫째, :

전에 언급 한 바와 같이
jQuery.extend = jQuery.fn.extend = function() { 

, jQuery.fnjQuery.prototype 단지 포인터입니다. 그것이하는 일은 기본적으로 다음과 같습니다.

jQuery.prototype.extend = function() { /* ... */ }; 
jQuery.extend = jQuery.prototype.extend; 

두 가지의 차이점은 무엇입니까? 먼저 기억해야 할 것은 jQuery이 생성자라는 것입니다. 생성자가 만든 객체는 프로토 타입을 상속합니다 (javascript에는 클래스가 없지만 "prototype"이라는 단어는 "class"로 전환되므로 객체가 어떻게 작동하는지 이해하기 시작합니다). 나는 자바 스크립트 함수도 객체 있다고 말했다 기억, 이제

// note: The following is not the recommended way to write jQuery code 
//  but it does illustrate the point about inheritance: 

var foo = new jQuery(); 
foo.extend(); // this works because foo inherits jQuery's extend method 

: 그래서, 확장의 첫 번째 선언은 jQuery 개체의 모든 인스턴스 방법으로 정의? 두 번째 선언은 jQuery 함수를 객체로 취급하고 함수를 직접 객체에 추가합니다. 이것은 주로 구문 설탕입니다.

jQuery.prototype.extend(); 

또는 뭔가처럼 뒤얽힌 : 대신 긴의

jQuery.extend(); 

:

new jQuery().extend.call(jQuery); 

를 작성되었습니다 확장 방법에 따라 당신이 쓸 수 있도록이다.

그래서 jQuery.extend()은 단순히 jQuery 생성자 자체의 한 메서드입니다. jQuery 생성자에 의해 생성 된 객체에 상속되지 않습니다. 그것을 클래스 메소드라고 생각하십시오.

+0

+1 : 설명이 잘되어 있습니다. 읽기 쉬운. –

+0

** jQuery.extend = jQuery.fn.extend = function() { \t // 대상 객체에 대한 참조 복사 \t var target = arguments [0] || {}, i = 1, length = arguments.length, deep = false, options; \t // 전체 복사 상황 처리 \t .............. } ** jQuery의 이러한 코드는 무엇 이었습니까? 그것은 ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** **> 그렇다면 더 혼란 스러웠습니다. 나는 알고 있었다 ** circle.prototype.area = function() {return 3.14 * this.radius * this.radius; } ** 클래스에 메소드를 추가 할 수 있습니다. –

0

예, addClass는 jQuery 메소드입니다. 코드의 스크린 샷은 jquery의 메소드를 확장하므로 $(). method와 같이 호출 할 수 있습니다. $는 jQuery와 같습니다. jquery 소스를 살펴보면, js를 잘 이해하면 아무 것도 복잡하지 않습니다.

관련 문제