JavaScriptプラグイン開発チュートリアル(1)_JavaScriptスキル

1、分析を開始します

皆さん、こんにちは！今日の連載は主に「JavaScript」をベースにしたプラグイン開発についてお話します

「プラグイン」という言葉をご存知の方も多いと思います。

それを「コンポーネント」または「コンポーネント」と呼ぶ人もいるかもしれませんが、重要なのは、どのように設計するか、そしてどのように総合的に検討するかです。皆さんが正しいと思います

「jQuery プラグインのメソッド」についてはある程度理解しました。このトピックについて一緒に議論し、最終的には継続的に能力を向上させるための関連する実装計画を提示しましょう。

2 番目に、プラグインのメイントピックに入ります

一般的に、jQuery プラグインの開発は 2 つのタイプに分けられます。1 つは、jQuery 名前空間にぶら下がっているグローバル関数で、静的メソッドとも呼ばれます。

もう 1 つは、jQuery オブジェクト レベルのメソッドです。つまり、jQuery プロトタイプの下にハングするメソッドです。そのため、セレクターを通じて取得された jQuery オブジェクト インスタンスもこのメソッドを共有できます。

(1)、クラスレベルのプラグイン開発

クラスレベルのプラグイン開発を最も直接的に理解するには、クラス メソッドを「jQuery」クラスに追加することです。これは、静的メソッドを追加するものとして理解できます。典型的な例は、jQuery 名前空間で関数を定義する「$.ajax()」関数です。クラスレベルでのプラグイン開発は、次の形式で拡張できます:

1.1 グローバル関数を追加します。次のように定義するだけです。コードを見てください:

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

$.hello = function(){
alert("こんにちは、ビッグベア!") ;
} ;

1.2 複数のグローバル関数を追加します。これらは次のように定義できます:

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

$.extend({
こんにちは: 関数(名前){
// ここにコードを入力してください
} 、
ワールド : function(){
// ここにコードを入力してください
}
}) ;

説明: "$.extend(target, [object1], [objectN])" (このメソッドは主に、2 つ以上のオブジェクトの内容 (プロパティ) を最初のオブジェクトにマージし、マージされた最初のオブジェクトを返すために使用されます。 。

メソッドにパラメーター ターゲットが 1 つだけある場合、このパラメーターは jQuery 名前空間を拡張します。つまり、静的メソッドとして jQuery グローバル オブジェクトの下にハングされます)。

(2)、オブジェクトレベルのプラグイン開発

オブジェクトレベルのプラグイン開発には、次の 2 つの形式が必要です:

2.1 "$.fn.extend()" を使用して、関連する属性をプロトタイプとして動的にマウントします。

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

(関数($){
$.fn.extend({
プラグイン名 : function(opts){
// ここにコードを入力してください
                                                                            });
})(jQuery) ;


2.2 プロトタイプチェーンに動的プロパティを直接追加します。

コードをコピーします コードは次のとおりです: (関数($) {

$.fn.pluginName = function(){

// ここにコードを入力してください
} ;
})(jQuery) ;

説明: この 2 つは同等です。jQuery プラグインの場合、基本的な関数は適切に機能しますが、より複雑なプラグインの場合は、さまざまなメソッドとプライベート関数を提供する必要があります。

プラグインにさまざまなメソッドを提供するために異なる名前空間を使用できますが、追加する名前空間が多すぎるとコードが混乱し、堅牢性が低下します。したがって、最善の解決策は、プライベート関数とメソッドを適切に定義することです。

そこで、上記の例と同様に、自己実行関数とクロージャを組み合わせて、シミュレートされたプライベート プラグイン ユニットを実装します。

(3)、実装プロセスを確認するための簡単な例を次に示します:

(1)、次のような「html」フラグメント コード:

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

style="margin-top:10px;
margin-bottom:30px;"
>8

(2)、「data.json」は次のように定義されます。

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

{
"text" : "こんにちは、ビッグベア {{bb}} ;
}

(3)、「bb.js」のコードは次のとおりです:

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

$(関数(){
$("#bb").bigbear() ;
}) ;
(関数($){
$.fn.bigbear = function(opts){
opts = $.extend({},$.fn.bigbear.defaults,opts) ;
return this.each(function(){
var elem = $(this) ;
elem.find("span").text(opts["title"]) ;
$.get(opts["url"],function(data){
elem.find("div").text(data["text"]) ;
}) ;
}) ;
} ;
$.fn.bigbear.defaults = {
タイトル: 「これは簡単なテストです」
URL：「data.json」
} ;
})(jQuery) ;

操作効果:

を要約すると:

(1) 「$.fn.bigbear.defaults」は、プラグインのデフォルトのパラメータ オプションを提供します。拡張性の高いプラグインでは、ユーザーが必要に応じてパラメータ オプションをカスタマイズし、プラグインの動作を制御できる必要があります。 -in なので、デフォルトに復元する機能が提供されます。オプションが必要です。これらのオプションは、jQuery の extend メソッドを通じて設定できます。

(2)、「return this.each(){...}」は、Sizzle セレクター エンジンを使用して複数の要素を走査し、jQuery を返します。Sizzle は関数に複数要素の操作を提供できます (たとえば、すべてのクラス名には同じ要素です）。これは jQuery の数少ない優れた機能の 1 つであり、プラグインに複数要素のサポートを提供しない場合でも、そのための準備としては良い方法です。また、jQuery にはチェーン呼び出しとも呼ばれるメソッドのカスケードを実行できるという非常に優れた機能があるため、この機能を壊さず、メソッド内で常に要素を返す必要があります。

(4)、最終まとめ

(1)、jQuery はプラグインを開発するための 2 つのメソッドを提供します。 jQuery.fn.extend(object); jQuery オブジェクトにメソッドを追加します。
jQuery.extend(object); jQuery クラス自体を拡張するには、クラスに新しいメソッドを追加します。

(2)、すべてのコードをクロージャ(即時実行関数)に入れる。このときクロージャはプライベートスコープに相当し、外部から内部の情報にアクセスすることはできず、汚染されることはない。グローバル変数の。作成および開発仕様の公式の説明は次のとおりです: a) グローバルな依存関係を回避する; b) サードパーティの損傷を回避する; c) jQuery 演算子 '$' および 'jQuery ' と互換性がある。

(3) プラグインにデフォルトのパラメータ オプションを提供する 拡張性の高いプラグインでは、ユーザーが必要に応じてパラメータ オプションをカスタマイズし、プラグインの動作を制御できるようにする必要があります。デフォルトの復元オプション。これらのオプションは、jQuery の extend メソッド

を通じて設定できます。

(4)、複数の要素を走査し、jQuery を返して Sizzle セレクター エンジンを使用すると、関数に複数要素の操作 (たとえば、同じクラス名を持つすべての要素) を提供できます。これは jQuery の数少ない優れた機能の 1 つであり、プラグインに複数要素のサポートを提供しない場合でも、プラグインの開発中にそのための準備をしておくことをお勧めします。また、jQuery にはチェーン呼び出しとも呼ばれるメソッドのカスケードを実行できるという非常に優れた機能があるため、この機能を壊さず、メソッド内で常に要素を返す必要があります。

(5). ワンタイム コードをメイン ループの外側に配置することは重要ですが、無視されることがよくあります。簡単に言えば、一連のデフォルト値であり、プラグイン関数が呼び出されるたびではなく、一度だけインスタンス化する必要があるコードがある場合は、このコードをプラグイン メソッドの外側に置く必要があります。 。

(6) 全員が勉強した後、プロジェクトのテクノロジの選択が変更され、これらのプラグインが「jQuery」メカニズムに強く依存する場合、以前に作成したプラグインは使用できなくなります。使用されている場合 (jQuery が使用されていないと仮定して)、それをリファクタリングするにはどうすればよいでしょうか?

明日の記事ではこの問題について説明し、プラグインの主要なロジックを再構築しますので、ご期待ください。 。 。