OOP와 jQuery(4): 함수 역할 영역, 방법 연결 및 jQuery.fn

이 시리즈의 문장은 석천창작, 이송봉번역, W3ctech.com 최초, 도령 커뮤니티 전재.
 
 
'OOP과 jQuery'는'디코딩 jQuery'시리즈 중의 하위 시리즈로 주로 jQuery의 내부 구성과 관련된 OOP(Object Oriented Programming, 대상을 대상으로 프로그래밍) 개념을 논의한다.
이 글에서 우리는 함수 역할 영역, jQuery 연결 모델과 jQuery를 토론할 것이다.fn.
 
 
1. 함수 역할 영역
 
우리는 jQuery 대상이 여러 층 함수에 포장되어 있는 것을 보았다.왜 우리는 함수로 작용역을 정의합니까?JavaScript는 괄호로 역할 영역을 정의할 수 없기 때문입니다.JavaScript 변수는 전역 및 함수 역할 도메인뿐입니다.
 
예를 들어 다음 jQuery 변수를 사유 변수로 바꾸기 위해서는 함수에 포장해야 한다.
 

function a() {
       var jQuery = "hellow world";
}

console.log(jQuery);  // undefined

 
JavaScript 함수에는 구문 영역이 있습니다.무슨 뜻이에요?함수의 작용역은 정의할 때 만들어지는 것이지 실행할 때 만들어지는 것이 아니라는 것이다.
 

var jQuery = "hi there";
var f= function() {
       console.log(jQuery);
       var jQuery = "hello world";
};
f();
// undefind

 
따라서 위의 코드를 실행하면 되돌아오는 값은undefined이지'hithere'가 아니다.즉, 같은 변수 작용역이나 같은 함수에서 var을 사용하여 jQuery를 설명하는 문장만 있으면, 함수의 어느 위치에서든 접근할 수 있으며, var문장을 포함하여.그래서 위의 것은 다음과 같다.
 

var jQuery = "hi there";

var f = function() {
        var jQuery;   //     var jQuery = undefined;
        console.log(jQuery);
        jQuery = "hello world";
};
f();
// undefined

 
즉, 함수 f는 var jQuery = "hi there"를 읽지 않은 고유의 역할 영역이 있습니다.그러나 함수 f 내부에서 jQuery 변수를 정의했고 console만 호출했습니다.log ()일 때, jQuery가 정의되지 않았습니다. (값은 undefined)
 
2. jQuery 연결 모드
 
init 방법을 봐라. 네가 주의했는지 모르겠다. 이 방법은this로 돌아간다.
 

var jQuery = function(selector, context) {
       // jQuery         “    ”init  
       return new jQuery.fn.init(selector, context, rootjQuery);
}

jQuery.fn = jQuery.prototype = {
       init : function(selector, context, rootjQuery) {
              //  .......
              return this;
              // .......
       }
}

 
jQuery에서 한 방법 호출 뒤에 다른 방법 호출을 연결할 수 있습니다.그럴 수 있었던 것은 모든 방법이 여기처럼 this 이미지로 되돌아왔기 때문이다.
아니면 잘 모르겠어요?우리 설명해 봅시다.우선 대상 중의this 키워드가 무슨 소용이 있는지 살펴보자.
 

var city = {
      name : "beijing",
      getName : function() {
            return this.name;
      }
}
console.log(city.getName());

 
다음 코드가 출력된 도시 이름은beijing입니다.this가city 대상을 인용한 것을 설명합니다.
진일보해서 만약 우리가 전체 대상으로 돌아간다면?
 

var num = {
      value : 1,
      minus : function(n) {
           this.value -= n;
           return this;
      },
      plus : function(n) {
            this.value += n;
      },
      getVal : function() {
             console.log(this.value);
       }
};

num.minus(2).plus(5).getVal();

 
이렇게 하면 방법을 호출하여 연결할 수 있다.
 
3. jQuery.fn
 
에서js에서 우리는 이 줄 코드를 볼 수 있다.
 

jQuery.fn = jQuery.prototype = {

        // ......

}

 
jQuery 플러그인을 개발할 때 $을 자주 사용합니다.fn, 즉 jQuery.fn.이제 알겠지, jQuery 플러그인은 사실 jQuery에 추가된 거야.prototype 방법.그렇기 때문에 플러그인에도this로 돌아가는 것을 잊지 마세요.
 

(function($) {
      $.fn.fontcolor = function() {
            return this.each(function() {
                  $(this).css("color", "orange");
            });
      };
})(jQuery);