JQuery 플러그인을 정의하지 마세요. JQuery_jquery를 안다고 말하지 마세요.

1. 소개

일부 WEB 개발자는 JQuery 클래스 라이브러리를 참조한 다음 웹 페이지에 ("#"), ("#"), (".")를 쓰고 몇 년을 지나면 다음과 같이 말할 것입니다. 그들은 JQuery에 매우 익숙합니다. 나도 원래 그런 사람이었는데, 회사에서 기술교류를 하고 나서야 나 자신에 대한 관점이 바뀌었다.

2. JQuery 지식 대중화

지식 1: JQuery로 플러그인을 작성할 때 두 가지 핵심 방법은 다음과 같습니다.

$.extend(object)는 JQuery에 정적 메서드를 추가하는 것으로 이해될 수 있습니다.

$.fn.extend(object)는 JQuery 인스턴스에 메서드를 추가하는 것으로 이해될 수 있습니다.

기본 정의 및 명칭:

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();

지식 2: jQuery(function () { })와 (function ($) { })(jQuery);의 차이점:

jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);

jQuery(function () { });는 DOM 요소가 로드된 후 실행 메서드의 코드입니다.

(function ($) { })(jQuery);는 익명 함수를 정의합니다. 여기서 jQuery는 이 익명 함수의 실제 매개변수를 나타냅니다. 주로 JQuery 플러그인 개발에 사용되며, 플러그인의 프라이빗 도메인을 정의하는 역할을 합니다.

3. JQuery 플러그인 표준 구조 개발

1. 범위 정의: JQuery 플러그인을 정의하려면 먼저 플러그인의 코드를 외부 간섭이 없는 곳에 배치해야 합니다. 좀 더 전문적인 용어로 표현하려면 이 플러그인에 대한 비공개 범위를 정의해야 합니다. 외부 코드는 플러그인 내부의 코드에 직접 액세스할 수 없습니다. 플러그인 내부의 코드는 전역 변수를 오염시키지 않습니다. 어느 정도까지는 플러그인과 실행 환경 간의 종속성을 분리합니다. 그렇다면 플러그인의 비공개 범위를 어떻게 정의합니까?

//step01 定义JQuery的作用域
(function ($) {

})(jQuery);

이 범위를 과소평가하지 마십시오. C#에서 클래스를 정의할 때 클래스 키워드만큼 중요합니다.

2. JQuery용 플러그인 확장: JQuery의 범위를 정의한 후 가장 시급하고 핵심적인 단계는 이 JQuery 인스턴스에 확장 메서드를 추가하는 것입니다. 먼저, easySlider라는 이 Jqury 플러그인의 메소드 이름을 지정합니다. 이 플러그인을 호출할 때 옵션을 통해 이 플러그인에 일부 매개변수를 전달할 수 있습니다. 구체적인 정의 방법은 다음 코드를 참조하세요.

//step01 定义JQuery的作用域
(function ($) {
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  
 }
})(jQuery);

지금까지 가장 간단한 JQuery 플러그인 중 하나가 완성되었습니다. 전화할 때 ("#domName").easySlider({}), ("#domName").easySlider({}), (".domName").easySlider({}) 등 다양한 방법을 사용할 수 있습니다. 이 플러그인을 호출하세요.

3. 기본값 설정: .net 컨트롤을 정의하는 것과 마찬가지로 JQuery 플러그인을 정의합니다. 완벽한 플러그인은 상대적으로 유연한 속성을 가져야 합니다. 다음 코드를 살펴보겠습니다. . TextBox 컨트롤에는 Width 및 Height 속성이 있습니다. TextBox를 사용할 경우 컨트롤 자체에 기본값이 있으므로 사용자가 컨트롤의 Height 및 Width를 자유롭게 설정하거나 값을 설정하지 않을 수 있습니다. JQuery 플러그인 개발을 준비할 때 사용자가 속성을 지정하지 않을 경우 기본값이 있어야 합니다. JQuery에서는 이러한 정의를 두 단계로 구현할 수 있습니다. 다음 코드 step03-a, step03-b를 참조하세요. .

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
 }
})(jQuery);

프로그래머는 변수 이름 변경, 줄 변경 등 혁신을 좋아합니다. 기본 속성을 표현하는 데 사용되는 var defaults = {}를 보고 JQuery 플러그인을 작성할 때와 다르다는 생각이 들어서 var default01 ={}과 var default02 ={}를 사용하여 기본 속성을 표현했습니다. 그런 다음 기본 속성 이름은 모든 종류이며 점점 더 나빠집니다. 따라서 JQuery 플러그인을 작성할 때 기본 속성을 정의할 때 기본 속성을 나타내기 위해 defaults 변수를 사용하는 것이 더 읽기 쉽습니다.

누군가 다음 코드 줄을 보고 var options = $.extend(defaults, options) 눈살을 찌푸리며 혼란스러워했습니다. 그럼 먼저 다음 코드를 살펴보겠습니다.

var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);

코드를 개발 환경에 복사하고 각각 a, b, c, d 값을 보면 var options = $.extend(defaults, options)의 의미를 이해할 수 있을 것입니다. 옵션이 기본값을 무시하고 해당 값을 옵션에 할당함을 나타냅니다.
플러그인 환경에서는 사용자가 설정한 값이 플러그인의 기본값보다 우선한다는 의미입니다. 사용자가 기본값으로 속성을 설정하지 않으면 플러그인의 기본값이 계속 유지됩니다. .

4. JQuery 선택기 지원: JQuery 선택기는 JQuery의 뛰어난 기능입니다. 우리 플러그인이 JQuery 선택기를 지원하지 않도록 작성되었다면 정말 큰 후회가 될 것입니다. JQuery 플러그인이 여러 선택기를 지원하도록 하려면 코드를 다음과 같이 정의해야 합니다.

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  this.each(function () {

  });
 }
})(jQuery);

5. JQuery 링크 호출 지원: 위 코드는 완벽해 보이지만 사실 그렇게 완벽하지는 않습니다. 링크 호출은 지금까지 지원되지 않습니다. 링크 호출 효과를 얻으려면 루프의 각 요소를 반환해야 합니다

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  //step5 支持链式调用
  return this.each(function () {

  });
 }
})(jQuery);

这样的定义才能支持链接调用。比如支持这样的调用：$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });

6、插件里的方法：往往实现一个插件的功能需要大量的代码，有可能上百行，上千行，甚至上万行。我们把这代码结构化，还得借助function。在第一点已经说了，在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法：

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step06-a 在插件里定义方法
 var showLink = function (obj) {
  $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
 }

 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  //step5 支持链式调用
  return this.each(function () {
   //step06-b 在插件里定义方法
   showLink(this);
  });
 }
})(jQuery);

步骤step06-a：在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的，有点像C#类里的一个私有方法，只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。

四、总结

开发只要形成了标准，然后再去阅读别人的代码就没有那么吃力了。