Jquery 플러그인을 이해하는 방법

실제 개발 작업을 하다 보면 스크롤, 페이징, 달력, 기타 디스플레이 효과 등 비즈니스 요구 사항이 항상 발생하게 됩니다. , 가장 먼저 떠오르는 것은 해당 디스플레이 요구 사항을 충족하는 기존 jQuery 플러그인을 찾는 것입니다. 현재 페이지에서 일반적으로 사용되는 일부 구성 요소에는 선택할 수 있는 다양한 jQuery 플러그인이 있습니다. 인터넷에는 특히 jQuery 플러그인을 수집하는 웹사이트도 많이 있습니다. jQuery 플러그인을 사용하면 실제로 개발 작업에 편리함을 가져다 줄 수 있지만, 단순하게만 사용하고 원리를 이해하지 못하면 사용 중에 문제가 발생하거나 플러그인을 맞춤 설정하는 경우가 발생합니다. 개발 과정에서 많은 의문점이 있을 것입니다. 이 글의 목적은 jQuery 플러그인의 개발 원리를 빠르게 이해하고 jQuery 개발의 기본 기술을 익히는 것입니다. jQuery以及熟悉jQuery使用的人来说，首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件，都有多种jQuery插件可供选择，网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷，但是如果只是会简单使用，而对其中的原理不甚了解，那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。

---

进行jQuery插件开发前，首先要知道两个问题：什么是jQuery插件？jQuery插件如何使用？
第一个问题，jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题，也就知道第二个问题的答案了，jQuery插件的使用方式就是jQuery对象方法的调用。

我们先看个例子：$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素，返回一个a元素的jQuery对象，这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢？其实jQuery内部定义了一个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

1.基础版jQuery插件

知道了上面这些知识，我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色，就可以按下面的方式来实现这个插件：

$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);
}

然后按下面的方式来使用插件：

$("p").changeStyle("red");

插件调用的时候，插件内部的this就是当前调用插件的jQuery对象，这样的话每个使用$()方法选择的标签，在调用changeStyle()插件时都会使用css()方法重设color样式。

2.满足链式调用的jQuery插件

链式调用时jQuery的一大特色，一个通用的插件应该遵循jQuery风格，满足链式调用要求。实现链式调用的方式也很简单：

$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);         
         return this;
}

然后使用的时候就可以链式调用其他方法了：

$("p").changeStyle("red").addClass("red-color");

实现链式调用的关键点就一行代码return this，插件中加了这行代码，那么在插件执行完之后，就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其它jQuery方法。

3.防止$符号污染的jQuery插件

有很多js库都会使用$符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况，我们可以使用立即执行函数通过传参的方式封装插件。形式如下：

(function($){
     $.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
}(jQuery));

因为使用了立即执行函数，所以此时的$只属于这个立即执行函数的函数作用域，这样就可以避免$符号的污染。

4.可以接受参数的jQuery插件

继续上面的例子，假如我还想为这个插件添加一个设置标签元素内容文字大小的功能，那么我可以这么来实现：

(function($){
     $.fn.changeStyle = function(colorStr，fontSize){
         this.css("color",colorStr).css("fontSize",fontSize+"px");        
         return this;
     }
}(jQuery));

上面这种插件传参方式适用于参数比较少的情况，如果需要传给插件内部的参数比较多，我们可以定义一个参数对象，然后把需要传给插件的参数放在参数对象中。插件定义时如下：

(function($){
     $.fn.changeStyle = function(option){
         this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");        
         return this;
     }

}(jQuery));

使用方式：
$("p").changeStyle({colorStr:"red",fontSize:14});

---

jQuery 플러그인을 개발하기 전에 먼저 두 가지 질문을 알아야 합니다. jQuery 플러그인이란 무엇입니까? jQuery 플러그인을 사용하는 방법은 무엇입니까?

첫 번째 질문인 jQuery 플러그인은 jQuery 프로토타입 객체를 확장하는 데 사용되는 메서드입니다. 간단히 말해서 jQuery<입니다. /code> 플러그인입니다. <code>jQuery 개체의 메서드입니다. 실제로 첫 번째 질문에 답한 후에는 두 번째 질문에 대한 답도 알 수 있습니다. jQuery 플러그인을 사용하는 방법은 jQuery 개체 메서드를 호출하는 것입니다. . 🎜🎜먼저 예시를 살펴보겠습니다: $("a").css("color","red"). 우리는 각 jQuery 개체가 jQuery에 정의된 DOM 작업 메서드를 포함한다는 것을 알고 있습니다. 여기서 $ 메서드는 요소를 선택하는 데 사용됩니다. jQuery 요소를 반환하면 이 개체는 jQuery에 정의된 DOM 작업 메서드를 사용할 수 있습니다. 그렇다면 jQuery 개체는 이러한 메서드를 어떻게 얻습니까? 실제로 jQuery는 jQuery.fn 개체를 내부적으로 정의합니다. jQuery 소스 코드를 보면 jQuery.fn=을 찾을 수 있습니다. jQuery.prototype, 즉 jQuery.fn 개체는 jQuery의 프로토타입 개체이고 DOM 작업 jQuery의 메서드는 모두 jQuery.fn 개체에 정의되어 있으며, jQuery 개체는 프로토타입을 통해 이러한 메서드를 상속할 수 있습니다. 🎜

1. 기본 jQuery 플러그인

🎜위의 지식을 바탕으로 간단한 jQuery 플러그인을 작성할 수 있습니다. 이제 레이블 내용의 색상을 변경하기 위해 jQuery 플러그인이 필요한 경우 다음과 같은 방법으로 플러그인을 구현할 수 있습니다. 🎜

(function($){
     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

🎜 그런 다음 다음과 같은 방법으로 플러그인을 사용하세요. : 🎜

//注意为了更好的兼容性，开始前有个分号;(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};         
         var setting = $.extend(defaultSetting,option);         
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
}(jQuery));//这里将Jquery作为实参传递给匿名函数

🎜플러그인이 호출됩니다. 이때 플러그인 내부는 현재 플러그인을 호출하는 jQuery 객체입니다. 이 경우 를 사용하여 각 태그를 선택했습니다. $() 메서드는 changeStyle()< 시 호출됩니다. /code>가 플러그인되면 <code>css() 메서드가 색상</을 재설정하는 데 사용됩니다. 코드> 스타일. 🎜<h4 id="strong-체인-호출을-만족하는-jQuery-플러그인-strong"><strong>2. 체인 호출을 만족하는 jQuery 플러그인</strong></h4>🎜체인 호출은 <code>jQuery의 주요 기능입니다. 코드 >jQuery 스타일, 체인 호출 요구 사항을 충족합니다. 연쇄 호출을 구현하는 방법도 매우 간단합니다. 🎜rrreee🎜 그런 다음 사용할 때 다른 방법으로 연쇄 호출을 수행할 수 있습니다. 🎜rrreee🎜 연쇄 호출을 구현하는 핵심 포인트는 코드 한 줄 return this</code)입니다. >, 플러그인 이 코드 줄을 추가한 후 플러그인이 실행된 후 현재 <code>jQuery 개체가 반환되고 다른 jQuery</code를 계속 호출할 수 있습니다. > 플러그인 메소드 이후의 메소드. 🎜<h4 id="strong-기호-오염을-방지하는-jQuery-플러그인-strong"><strong>3. $ 기호 오염을 방지하는 jQuery 플러그인</strong></h4>🎜<code>$ 기호를 사용하는 js 라이브러리가 많이 있지만 jQuery는 jQuery.noConstrict() 메서드를 사용하면 $ 기호 사용 권한을 넘겨줄 수 있지만, 플러그인을 정의할 때는 < code>$.fn 개체를 정의한 후 사용하면 이러한 플러그인은 $ 변수를 사용하는 다른 js 라이브러리의 영향을 받습니다. 이 경우 즉시 실행 기능을 사용하여 매개변수를 전달하여 플러그인을 캡슐화할 수 있습니다. 형태는 다음과 같습니다. 🎜rrreee🎜즉시 실행 함수를 사용하기 때문에 현재 $는 이 즉시 실행 함수의 함수 범위에만 속하므로 $ 기호의 오염을 방지합니다. 🎜

4. 매개변수를 허용하는 jQuery 플러그인

🎜 위의 예를 계속해서 이 플러그인에 텍스트 크기를 설정하는 함수를 추가하려면 구현 방법은 다음과 같습니다. 🎜rrreee🎜위의 플러그인 매개변수 전달 방법은 전달해야 할 매개변수가 상대적으로 적은 상황에 적합합니다. 플러그인의 경우 매개변수 개체를 정의한 다음 플러그인에 전달해야 하는 매개변수를 매개변수 개체에 넣을 수 있습니다. 플러그인은 다음과 같이 정의됩니다: 🎜rrreee🎜Usage: 🎜$("p").changeStyle({colorStr:"red",fontSize:14}); 🎜매개변수를 플러그인의 또 다른 장점은 플러그인 내부의 일부 매개변수에 대해 기본값을 정의할 수 있다는 것입니다. 예를 들면 다음과 같습니다. 🎜

(function($){
     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

上面的代码用到了$.extend方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。
这样定义的插件，我们在使用时如果不传fontSize，那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。
使用方式：
$("p").changeStyle({colorStr:"red"});
注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。

---

总结

定义插件的方式除了上面说的用$.fn来定义，还有另外一种方式来定义插件，那就是使用$.fn.extend方法。类似下面的写法：

//注意为了更好的兼容性，开始前有个分号;(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};         
         var setting = $.extend(defaultSetting,option);         
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
}(jQuery));//这里将Jquery作为实参传递给匿名函数

PS: $.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。

위 내용은 Jquery 플러그인을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!