JavaScript_jquery용 jQuery 라이브러리 플러그인에 대한 간략한 개발 가이드

jQuery 플러그인은 일반적으로 두 가지 범주로 나뉩니다.

1. 선택기 기반 플러그인(체인 작업 지원)
2. 셀렉터 기반이 아닌 플러그인 (체인 동작을 지원하지 않음)

얼마 전에 jQuery 플러그인 개발을 간략하게 배워서 두 가지 간단한 플러그인을 개발했습니다. 두 플러그인의 개발 모델을 간략하게 요약하면 다음과 같습니다.
선택기 기반 플러그인

일반적인 개발 모델은 다음과 같습니다.

(function($, window, undefined) {
 $.fn.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 return this.each(function() { // 让插件支持链式操作
  // 在这里编写插件功能代码
 });
 };
})(jQuery, window);

먼저 형식 매개변수인 $, window, 정의되지 않은 실제 매개변수인 jQuery 및 window를 사용하여 익명의 자체 실행 함수를 만듭니다.

어? 정의되지 않음에 해당하는 실제 매개변수가 전달되지 않는 이유는 무엇입니까? 변수 이름 undefed가 다른 곳의 JavaScript 코드에 값이 할당되어 실제 의미를 잃었을 수 있다는 점을 고려하면 이 매개변수를 익명 자체 실행 함수에 포함하는지 확인하기 위해 여기에 전달하지 않습니다. . 정말 정의되지 않았습니다.

jQuery가 전달된 후 $에 해당합니다. 이렇게 하면 플러그인에서 호출되는 $가 Prototype과 같은 라이브러리가 아닌 jQuery여야 합니다.

이 유형의 플러그인 호출 방법은 일반적으로 $(selector).PluginName(); 형식입니다.

이러한 구체적인 예는 https://github.com/libuchao/KTwitter에서 확인할 수 있습니다
비선택기 기반 플러그인

이러한 유형의 플러그인은 선택기에 의존하지 않으므로 체인 작업이 없습니다. 일반적인 개발 모델은 다음과 같습니다.

(function($, window, undefined) {
 $.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 // 在这里编写插件功能代码
 };
})(jQuery, window);

이러한 유형의 플러그인 호출 형식은 일반적으로 $(selector).PluginName();입니다.