ホームページ > 記事 > ウェブフロントエンド > jQueryプラグイン開発例の説明

jQueryプラグイン開発例の説明

零下一度オリジナル: 2017-06-25 09:20:011124ブラウズ

実際の開発作業では、スクロール、ページング、カレンダー、その他の表示効果などのビジネスニーズが常に発生します。jQuery を使用したことがあり、jQuery の使用に精通している人向けです。 の場合、最初に思い浮かぶのは、対応する表示ニーズを満たす既存の jQuery プラグインを探すことです。現在、ページで一般的に使用される一部のコンポーネントには、さまざまな jQuery プラグインから選択できます。jQuery プラグインを特別に収集した Web サイトもインターネット上に多数あります。 jQuery プラグインを使用すると、確かに開発作業に利便性がもたらされますが、原理を理解せずに単純に使用するだけだと、使用中やプラグインのカスタマイズ中に問題が発生することがあります。開発中には多くの疑問が生じるでしょう。この記事の目的は、jQuery プラグインの開発原則を素早く理解し、jQuery 開発の基本スキルを習得することです。 jQuery以及熟悉jQuery使用的人来说，首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件，都有多种jQuery插件可供选择，网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷，但是如果只是会简单使用，而对其中的原理不甚了解，那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。

进行jQuery插件开发前，首先要知道两个问题：什么是jQuery插件？jQuery插件如何使用？
第一个问题，jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题，也就知道第二个问题的答案了，jQuery插件的使用方式就是jQuery对象方法的调用。

我们先看个例子：$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素，返回一个a元素的jQuery对象，这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢？其实jQuery内部定义了一个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

基础版jQuery插件
知道了上面这些知识，我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色，就可以按下面的方式来实现这个插件：

$.fn.changeStyle = function(colorStr){         this.css("color",colorStr);
}

然后按下面的方式来使用插件：
$("p").changeStyle("red");
插件调用的时候，插件内部的this就是当前调用插件的jQuery对象，这样的话每个使用$()方法选择的标签，在调用changeStyle()插件时都会使用css()方法重设color样式。

满足链式调用的jQuery插件
链式调用时jQuery的一大特色，一个通用的插件应该遵循jQuery风格，满足链式调用要求。实现链式调用的方式也很简单：

$.fn.changeStyle = function(colorStr){         this.css("color",colorStr);         return this;
}

然后使用的时候就可以链式调用其他方法了：
$("p").changeStyle("red").addClass("red-color");
实现链式调用的关键点就一行代码return this，插件中加了这行代码，那么在插件执行完之后，就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其它jQuery方法。

防止$符号污染的jQuery插件
有很多js库都会使用$符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况，我们可以使用立即执行函数通过传参的方式封装插件。形式如下：

(function($){
     $.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
}(jQuery));

因为使用了立即执行函数，所以此时的$只属于这个立即执行函数的函数作用域，这样就可以避免$

jQuery プラグインを開発する前に、まず 2 つの質問について理解しておく必要があります: jQuery プラグインとは何ですか? jQuery プラグインの使用方法

最初の質問、jQuery プラグインは、jQuery プロトタイプオブジェクトを拡張するために使用されるメソッドです。簡単に言えば、jQuery プラグインです。 は jQuery オブジェクトのメソッドです。実際、最初の質問に答えると、jQuery プラグインを使用する方法は、jQuery オブジェクトメソッドを呼び出すことになります。。

まず例を見てみましょう: $("a").css("color","red")。各 jQuery オブジェクトには、jQuery で定義された DOM 操作メソッドが含まれることがわかっています。ここでは $ メソッドを使用します。 a 要素を選択すると、a 要素の jQuery オブジェクトが返されます。このオブジェクトは、jQuery で定義された <code> を使用できます。 code> >DOM 操作メソッド。では、jQuery オブジェクトはどのようにしてこれらのメソッドを取得するのでしょうか?実際、jQuery は内部で jQuery.fn オブジェクトを定義しています。jQuery ソースコードを見ると、jQuery.fn= が見つかります。 jQuery.prototype、つまり、jQuery.fn オブジェクトは jQuery のプロトタイプオブジェクトであり、DOM オペレーションjQuery のメソッドはすべて jQuery.fn オブジェクトで定義されているため、jQuery オブジェクトはプロトタイプを通じてこれらのメソッドを継承できます。

基本的な jQuery プラグイン🎜 上記の知識があれば、簡単な jQuery プラグインを作成できます。ラベルコンテンツの色を変更するために jQuery プラグインが必要な場合は、次のようにプラグインを実装できます: 🎜

(function($){
     $.fn.changeStyle = function(colorStr，fontSize){
         this.css("color",colorStr).css("fontSize",fontSize+"px");        
         return this;
     }
}(jQuery));

🎜次に、次のようにプラグインを使用します: 🎜 $( "p").changeStyle("red");🎜プラグインが呼び出されるとき、プラグイン内の this は jQuery です。この場合、$() メソッドを使用して選択された各タグは、css() メソッドを使用して にリセットされます。 >changeStyle() プラグインは colorstyle と呼ばれます。 🎜🎜チェーン呼び出しに対応した jQuery プラグイン🎜 チェーン呼び出しは jQuery の主要な機能です。一般的なプラグインは jQuery スタイルに従い、チェーンの要件を満たす必要があります。呼んでいます。チェーン呼び出しを実装する方法も非常に簡単です: 🎜

(function($){
     $.fn.changeStyle = function(option){
         this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");        
         return this;
     }

}(jQuery));

🎜 そして、それを使用するときに、他のメソッドをチェーン呼び出しできます: 🎜$("p").changeStyle("red").addClass("red-color ");🎜チェーン呼び出しを実現するための重要なポイントは、コード行 return this です。このコード行がプラグインに追加される場合、プラグインの後にが実行されると、現在の jQuery オブジェクトが返され、プラグインメソッドの後に他の jQuery メソッドを引き続き呼び出すことができます。 🎜🎜$ シンボル汚染を防ぐ jQuery プラグイン🎜 jQuery は jQuery を使用することもできますが、多くの <code>js ライブラリは $ シンボルを使用します。 noConflict () メソッドは $ 記号を使用する権利を渡しますが、プラグインが $.fn オブジェクトを使用して定義されている場合、これらのプラグインは次の対象になります。その他の用途js ライブラリの code>$ 変数の影響。この場合、即時実行関数を使用して、パラメーターを渡すことでプラグインをカプセル化できます。形式は以下の通りです。 🎜

(function($){

     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

🎜即時実行機能を使用しているため、このときの$はこの即時実行機能の関数スコープにのみ属するため、

$ code> シンボルの汚染を避けることができます。 🎜🎜パラメータを受け入れることができるjQueryプラグイン🎜上記の例を続けて、ラベル要素コンテンツのテキストサイズを設定する関数をこのプラグインに追加したい場合は、次のように実現できます:🎜 <pre class="hljs clojure">(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:&quot;green&quot;,fontSize:12};
         var setting = $.extend(defaultSetting,option);
         this.css(&quot;color&quot;,setting.colorStr).css(&quot;fontSize&quot;,setting.fontSize+&quot;px&quot;);        
         return this; 
          }
     });
}(jQuery));</pre>🎜上記のプラグインパラメータの受け渡し方法が適用可能です。パラメータが比較的少ない場合、プラグインに渡す必要があるパラメータがさらにある場合は、パラメータオブジェクトを定義して、必要なパラメータを配置できます。パラメータオブジェクト内のプラグインに渡されます。プラグインは次のように定義されます: 🎜<pre class="hljs clojure">(function($){
     $.fn.changeStyle = function(option){
         this.css(&quot;color&quot;,option.colorStr).css(&quot;fontSize&quot;,option.fontSize+&quot;px&quot;);        
         return this;
     }

}(jQuery));</pre><p>使用方式：<code>$("p").changeStyle({colorStr:"red",fontSize:14});

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值，例如：

(function($){

     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

上面的代码用到了$.extend方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。
这样定义的插件，我们在使用时如果不传fontSize，那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。
使用方式：$("p").changeStyle({colorStr:"red"});
注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。

总结
定义插件的方式除了上面说的用$.fn来定义，还有另外一种方式来定义插件，那就是使用$.fn.extend方法。类似下面的写法：

(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};
         var setting = $.extend(defaultSetting,option);
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
}(jQuery));

PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。

以上がjQueryプラグイン開発例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：EJSテンプレートエンジン例の詳細説明次の記事：EJSテンプレートエンジン例の詳細説明

続きを見る