プラグインを開発する 2 つの方法: jquery.fn.extend と jquery.extend_jquery

jQuery には、プラグインを開発するための 2 つのメソッドが用意されています。

JavaScript コード

コードをコピー コードは次のとおりです。次のように:

jQuery.fn.extend(object);

jQuery.extend(object); jQuery クラス自体。クラスに新しいメソッドを追加します。

jQuery.fn.extend(object); jQuery オブジェクトにメソッドを追加します。

fnとは何ですか。 jQuery コードを見ると、見つけるのは難しくありません。

JavaScript コード

コードをコピー コードは次のとおりです:

jQuery .fn = jQuery.prototype = {

init: function( selector, context ) {//….

//……

}; >
jQuery.fn = jQuery.prototype は確かにプロトタイプに精通していることがわかりました。

JavaScript には明確なクラスの概念がありませんが、それを理解するにはクラスを使用する方が便利です。

jQuery は非常によくカプセル化されたクラスです。たとえば、ステートメント $(“#btn1”) を使用すると、jQuery クラスのインスタンスが生成されます。

jQuery.extend(object); jQuery クラスにクラス メソッドを追加します。これは、静的メソッドの追加として理解できます。例:

XML/HTML コード

コードをコピー コードは次のとおりです: $.extend({

add:function(a,b){return a b;}

});


の追加を追加しますjQuery「静的メソッド」の場合、jQuery が導入されているこのメソッドを使用できます。
JavaScript コード

コードをコピー コード $.add(3,4); //return 7

jQuery.fn.extend(object); jQueryクラスに「メンバー関数」を追加することです。 jQueryクラスのインスタンスはこの「メンバー関数」を利用することができます。

たとえば、特別な編集ボックスをクリックすると、現在の編集ボックスの内容が警告されるプラグインを開発したいと考えています。
JavaScript コード

コードをコピー コードは次のとおりです: $.fn .extend({

alertwhileClick:function(){

$(this).click(function(){

alert($(this). val()) ;
});

});

$(“#input1″).alertwhileClick(); :


$(“#input1″) は、メンバー メソッドalertwhileClickを呼び出すときに展開を実装します。呼び出されるたびにクリックすると、まず現在編集中のコンテンツがポップアップ表示されます。

実際の開発プロセスでは、このような初心者のプラグインを作成することはありません。実際、jQuery には、ドキュメント、イベント、CSS、Ajax、エフェクトを組み合わせて操作するためのメソッドが豊富に用意されています。 、さらに Publish Niubility プラグインを開発できます。

注:


ここには別の特別な場所があります。つまり、関数の先頭とプログラム内の jQuery.extend = jQuery.fn.extend です。 jQuery.prototype は以前に jQuery.fn に割り当てられているため、後続の呼び出しでの jQuery.extend() と jQuery.fn.extend() の呼び出しの結果も異なります。 .extend() は、メソッドをオブジェクトのインスタンスに拡張しません。これを参照するメソッドも、jQuery.init() などの jQuery クラスと jQuery.fn.extend() の呼び出しを通じて実装する必要があります。 ) メソッド Extended をオブジェクトのプロトタイプに拡張します。そのため、jQuery オブジェクトがインスタンス化されるときに、これらのメソッドが含まれます。これは非常に重要であり、これは jQuery.js のあらゆる場所に反映されます。