jQuery는 플러그인 method_jquery를 정의합니다.

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

jquery를 확장할 때. 핵심 메소드는 다음 두 가지입니다.

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

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

$.extend(개체)

예:

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

jquery 플러그인의 기본 구조 정의

1． 범위 정의:

플러그인의 비공개 범위를 정의합니다. 외부 코드는 플러그인 내부에 직접 접근할 수 없습니다. 플러그인의 내부 코드는 외부 간섭을 받지 않으며 전역 변수를 오염시키지 않습니다.

  //step 定义JQuery的作用域
(function ($) {
})(jQuery);

2. 플러그인에 확장 메소드 추가:

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

3. 기본값 설정:

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

그 중: var options = $.extend(defaults, options) 는 의미합니다. 옵션이 기본값을 무시하고 해당 값을 옵션에 할당함을 나타냅니다.
플러그인 환경에서는 사용자가 설정한 값이 플러그인의 기본값보다 우선한다는 의미입니다. 사용자가 기본값으로 속성을 설정하지 않으면 플러그인의 기본값이 계속 유지됩니다. .

4. jquery 선택기 지원:

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

5. JQuery 링크 호출 지원:

링크 호출 효과를 얻으려면 루프의 각 요소를 반환해야 합니다

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

6. 플러그인의 메소드:

플러그인에서 정의한 메소드는 외부 세계에서 직접 호출할 수 없습니다. 플러그인에서 정의한 메소드는 외부 환경을 오염시키지 않습니다.

//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);

위 콘텐츠에서는 jQuery를 사용하여 플러그인을 정의하는 방법을 소개합니다. 마음에 드셨으면 좋겠습니다.