If you don’t define the JQuery plug-in, don’t say you know JQuery_jquery

1. はじめに

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

2. JQuery の知識を広める

知識 1: JQuery を使用してプラグインを作成する場合、2 つの主要なメソッドは次のとおりです:

$.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# でクラスを定義する際の class キーワードと同じくらい重要です。

2. JQuery のプラグインを拡張する: JQuery のスコープを定義した後、最も重要な手順は、この JQuery インスタンスに拡張メソッドを追加することです。まず、この Jqury プラグインのメソッドに easySlider という名前を付けます。このプラグインを呼び出すときに、オプションを通じていくつかのパラメーターをこのプラグインに渡すことができます。具体的な定義方法については、次のコードを参照してください:

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

ここまでで、最も単純な JQuery プラグインの 1 つが完成しました。呼び出すときは、("#domName").easySlider({})、("#domName").easySlider({})、または (".domName").easySlider({})、またはその他の方法で実行できます。このプラグインを呼び出します。

3. デフォルト値の設定: .net コントロールを定義するのと同じように、JQuery プラグインを定義します。完璧なプラグインは、比較的柔軟な特性を備えている必要があります。このコードを見てみましょう: 723311781eae29eb2dc08d61f865b9065149ea95ee12bbe752151d007a26c100。 TextBox コントロールには、Width プロパティと Height プロパティがあります。TextBox を使用する場合、コントロール自体にデフォルト値があるため、ユーザーはコントロールの高さと幅を自由に設定することも、値を設定しないこともできます。 JQuery プラグインの開発を準備する場合、ユーザーが属性を指定しない場合、JQuery ではそのような定義を 2 つのステップで実装できます。次のコード 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);

プログラマは、変数名の変更や行の変更などの革新を好みます。 vardefaults = {} がデフォルト属性を表すために使用されているのを見て、JQuery プラグインを作成するときは違うものにしようと思い、デフォルト属性を表すために vardefault01 ={} と vardefault02 ={} を使用しました。その場合、デフォルトの属性名はあらゆる種類になり、さらに悪化します。したがって、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演示了怎样调用插件内部的方法。

四、总结

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