jQuery プラグインの開発方法を学ぶには、私に従ってください (完全な例とダウンロード付き)_jquery

多くの企業のフロントエンドデザイナーや開発者は女性ですが、彼女たちの多くは JavaScript スキルがあまり高くありません。フロントエンド開発プロセスでは、JavaScript のスキルが不可欠です。それで、フロントエンドの小さな女の子が特定の JavaScript 効果について心配している場合、あなたはそこに行って彼女にこう言います。「ねえ、美人さん、これを使ってください。これは私が書いた jQuery プラグインです。基本的にあなたは少佐だと思います。」ライフイベントはすぐに解決できます。
まずどの関数を作成するかを考えます
これは最初のステップであり、非常に重要なステップでもあります。私たちは皆、jQuery プラグインの作成を学習しているところなので、この関数は必ず作成する必要があります。もっとシンプルに。太った男を一口で食べるなんて考えないでください、私たちもそれを食べることはできません。薄いものから始めましょう。ただし、この機能があまりにも退屈すぎてほとんど役に立たない場合は、たとえ機能したとしてもトイレに捨てられるだけであり、継続的な更新は行われず、継続的な改善は行われません。
私が最終的に選択したのは、テーブルを美しくし、テーブルの奇数行と偶数行を異なる色にして、マウスを特定の行の上に移動して強調表示することでした。機能もシンプルで実用的で良いですね。はぁ~~
急いで書かずに、まず実装原理を考えてください
焦らず、最初に実装原理を考えてください。必要に応じて、最初に簡単な実装プロトタイプを作成します。
テーブルを美しくする例では、実装原理は単純で、テーブルの奇数行と偶数行を見つけて、アクティブな行を強調表示するだけです。これも非常に簡単です。イベントを作成し、クラス「mouseout」を追加します。必要が来たら、このクラスを削除するだけです。
一般的なフレームワーク
独自の jQuery プラグインを作成する前に、他の人が作成したプラグインを研究するのは当然のことです。実際、jQuery を記述するための一般的なフレームワークは基本的に存在します。よし、このフレームワークもコピーしてみよう。

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

(function($){
$.fn .yourName = function(options){
//さまざまな属性とパラメータ
}
var options = $.extend(defaults, options);
this.each(function(){
//プラグイン実装コード
});
}
})(jQuery); これで、何かを入れることができます。

名前、パラメータ、属性

いよいよ世界に参入する時が来ました。この方法でのみ、あなたは世界で力強く堂々となれるのです。信じられないなら、「中国歯科予防グループ」の話を聞いてください。したがって、ここでは印象的な名前を付ける必要があり、それはシンプル、明確、そして十分に権威のあるものでなければなりません。ということで、「tableUI」という名前に決定しました！ パラメータと属性も非常に単純で、3 つのクラスの名前にすぎません。それらを、evenRowClass、oddRowClass、activeRowClass と呼ぶだけです。 それでは、上の枠内に上半身を埋めていきましょう。

コードをコピー コードは次のとおりです。 (function($){

$.fn .tableUI = function(options){

var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//実装コード
})(jQuery); ;


この文に注目してみましょう:

コードをコピーします

コードは次のとおりです。 var options = $.extend(defaults, options);

この文は非常にクールに見えますが、実際には複数のオブジェクトを 1 つにマージしています。ここで、呼び出し時に新しいパラメータを記述した場合は、その新しいパラメータが使用されます。そうでない場合は、デフォルトのパラメータが使用されます。さらに詳しく知りたい場合は、jquery の公式ドキュメントを参照してください:

http://api.jquery.com/jQuery.extend/

下半身から始めましょう
上半身が埋まったので、下半身を埋めていきましょう。これは、ベース行と偶数行を見つけて (tr:even のような書き込みメソッドを提供してくれた jQuery のおかげで、非常に簡単になります)、対応するクラスを追加するだけです。次に、mouseover イベントと Mouseout イベントをすべての tr にバインドします。下半身のコードは次のとおりです:


コードをコピーします

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

(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow" ,
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//奇数行と偶数行の色を追加します
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd" ).addClass(options.oddRowClass);
//アクティブな行の色を追加します
$(thisTable).find("tr").bind("mouseover",function(){
$(this) .addClass (options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options) .activeRowClass );
});
}

最も重要なステップです。

もしかしたら、これで完了だと思っている友人もいるかもしれません。しかし、それとは逆に、プラグインの名前、バージョン番号、完成日、作成者、作成者の連絡先情報、生年月日、寸法などをプラグインの上に書き込むという、完了すべき最も重要なステップがまだ残っています。 -で。この方法でのみ、このプラグインを十分にプロフェッショナルに見せることができるからです。


コードをコピー

コードは次のとおりです: /* * tableUI 0.1

* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/

* 日付: 2010-03-30
* tableUI を使用すると、ユーザー エクスペリエンスのためのテーブル プロンプトを簡単に提供できます。最初に提供される関数は、奇数行と偶数行の色を切り替えることです。マウスを上に移動して
*/
(function($){
$.fn.tableUI = function(options){ vardefaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this .each(function(){
var thisTable=$(this);
//奇数行と偶数行の色を追加します
$(thisTable).find("tr:even")。 addClass(options.evenRowClass) ;
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//アクティブな行の色を追加します
$(thisTable).find( "tr").bind ("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr") .bind("mouseout" ,function(){
$(this).removeClass(options.activeRowClass);
});
}); );



デモ アドレス



インスタンス ダウンロード アドレス