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

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

WBOY

リリース： 2016-05-16 16:17:42

オリジナル

1388 人が閲覧しました

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 が使用されていないと仮定して)、それをリファクタリングするにはどうすればよいでしょうか?

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