jQueryはプラグインmethod_jqueryを定義します

一部の WEB 開発者は、JQuery クラス ライブラリを参照し、$("#")、$(".") を Web ページに書き、数年間書き続けた後、他の人にそれがよく知られていると伝えるでしょう。 JQueryを使って。私も以前はそのような人間でしたが、社内での技術交流がきっかけで自分に対する見方が変わりました。

jquery を拡張する場合。コアメソッドは次の 2 つです:

$.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 を使用してプラグインを定義する方法を紹介しています。気に入っていただければ幸いです。