플러그인 개발을 위한 두 가지 방법: jquery.fn.extend 및 jquery.extend

플러그인 개발을 위한 두 가지 방법: jquery.fn.extend 및 jquery.extend_jquery

WBOY

풀어 주다： 2016-05-16 17:13:09

원래의

1043명이 탐색했습니다.

jQuery는 플러그인 개발을 위한 두 가지 방법을 제공합니다.

JavaScript 코드

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

 
jQuery.fn.extend(object); 
jQuery.extend(object) 

jQuery.extend(object); jQuery 클래스 자체. 클래스에 새 메서드를 추가합니다.

jQuery.fn.extend(object); jQuery 객체에 메서드를 추가합니다.

fn이 뭐죠? jQuery 코드를 보면 찾기가 어렵지 않습니다.

JavaScript 코드

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

 
jQuery .fn = jQuery.prototype = { 

　 init: function( selector, context ) {//….　 

　　 //…… 

}; > 
jQuery.fn = jQuery.prototype인 것으로 확인되었습니다. 저는 확실히 프로토타입에 익숙합니다.

자바스크립트에는 클래스에 대한 명확한 개념이 없지만 클래스를 사용하여 이해하는 것이 더 편리합니다.

jQuery는 매우 잘 캡슐화된 클래스입니다. 예를 들어 $(“#btn1″) 문을 사용하면 jQuery 클래스의 인스턴스가 생성됩니다.

jQuery.extend(object); jQuery 클래스에 클래스 메소드를 추가합니다. 이는 정적 메소드를 추가하는 것으로 이해할 수 있습니다. 예:

XML/HTML 코드

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

$.extend({

　add:function(a,b){return a b;} 

}) 

추가 추가 jQuery "Static method" 그런 다음 jQuery가 도입된 이 방법을 사용할 수 있습니다.

JavaScript 코드

코드 복사 코드

$.add(3,4); //return 7

 
jQuery.fn.extend(object); jQuery 클래스에 "멤버 함수"를 추가하는 것입니다. jQuery 클래스의 인스턴스는 이 "멤버 함수"를 사용할 수 있습니다. 

예를 들어 특수 편집 상자를 생성하는 플러그인을 개발하고 싶습니다. 클릭하면 현재 편집 상자의 내용이 경고됩니다. 다음을 수행할 수 있습니다.
JavaScript 코드

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

$.fn .extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this). val()) ;
});

})

$(“#input1″).alertWhileClick(); :

$(“#input1″)은 멤버 메소드인 AlertWhileClick을 호출할 때 확장을 구현합니다. 호출될 때마다 클릭 시 현재 편집 중인 내용이 먼저 팝업됩니다.

물론 실제 개발 과정에서는 이런 초보 플러그인을 만들지 않을 것입니다. 실제로 jQuery는 이러한 방법을 결합하여 문서, 이벤트, CSS, Ajax 등 다양한 작업 방법을 제공합니다. , 더 많은 Niubility 플러그인을 개발할 수 있습니다.

참고:

여기에는 또 다른 특별한 장소가 있습니다. 즉, 함수 시작 부분과 프로그램에서 jQuery.extend = jQuery.fn.extend입니다. jQuery.prototype은 이전에 jQuery.fn에 할당되었으므로 후속 호출에서 jQuery.extend() 및 jQuery.fn.extend()에 대한 다른 호출이 나타납니다. jQuery 호출도 다릅니다. .extend()는 메소드를 객체의 인스턴스로 확장하지 않습니다. 이를 참조하는 메소드도 jQuery.init()와 같은 jQuery 클래스 및 jQuery.fn.extend( ) Extended 메소드를 객체의 프로토타입으로 확장하므로 jQuery 객체가 인스턴스화될 때 매우 중요한 이러한 메소드가 있으며 이는 jQuery.js의 모든 곳에 반영됩니다.