素晴らしいjQueryプラグインを作成するための10のテクニック

この文章では、良いjQueryプラグインを素晴らしいjQueryプラグインに改造する10のテクニックを共有します.多くの開発者は良いjQueryプラグインを開発していますが、私たちのプラグインの使用者にとって、多くのjQueryプラグインの使用はそんなに直接的で透明ではありません.ここの10のテクニックは、より良い次元とjQueryプラグインを拡張するのに役立ちます.また、プラグイン開発にとって、非常に良いアーキテクチャがあれば、開発に大きなメリットをもたらします.だから正式に開発する前に、熟考する必要があります.
1.プラグイン開発は独立する必要がある
これはjQueryプラグインの開発で最も頭を悩ませることの一つです.私たちはまず考えなければならないからです.プラグインは、追加の構成を必要とせずに正常に動作する必要があります.したがって、最小のデフォルト初期化jQueryプラグインは、次のように正常に動作する必要があります.
 

$("#gbin1-container").wTooltip();

非常に良い例は、前方/後方ボタンを持つjQueryスライドディスプレイプラグインです.divとプロパティidとclassを構成し、プラグインで参照するように要求するプラグインを見たことがあります.このような構成はプラグイン内で処理すべきで、スイッチ可能なオプションを提供します
2.デフォルトの設定
構成設定を提供しないプラグインはめったにありません.前の観点と同様に、ユーザーが自分のニーズの効果を構成し、ニーズを拡張するのに役立つオプションを提供する必要があります.さらに重要なのは、プラグインの普及を支援することです.

var gbin1DefaultSettings = {
    mode            : 'Pencil',
    lineWidthMin    : '0',
    lineWidthMax    : '10',
    lineWidth       : '2'
};
settings = $.extend({}, gbin1DefaultSettings, settings || {});

 3. すべてのネーミングが一意であることを保証
プラグインを作成するときは、class、id、プラグイン名など、プラグインの参照を一意にする必要があります.これにより、既存のjavascriptまたはCSSコードと競合しないことを保証できます.
 

$("#gbin1container").tooltip();    //          
$("#gbin1container").wTooltip();   //      

上記の例では、wを追加することによってプラグインを一意に命名し、他の通常の命名との衝突を回避します.また、CSSという名前を付けて、一般的に使われている言葉、例えば「tab」と「holder」が唯一であることを保証する必要があります.
 

_wPaint_button
_wPaint_holder

私は同時に下線を追加して、他のidとclassと衝突しないことを確認します.この方法は、私たちが開発したプラグインがより強くなることを保証します.
4.標準的な簡易プラグインレイアウト
次は標準的なjQueryプラグインコードのクリップで、多くのプラグインがこのようなフォーマットを使用していることがわかります.開発、メンテナンス、更新に必要なすべての重要なコードの内容が含まれています.コード開発に専念するのに役立ちます.私のjQuery Tooltipプラグインコードを見てください.私は最小コード量のコードを使って、これらのコードを効果的に結合する方法を理解するのに役立ちます.
 

var defaultSettings = {
    //settings
};

$.fn.wPaint = function(settings)
{
    //check for setters/getters

    return this.each(function()
    {
        var elem = $(this);

        //run some code here

        elem.data("_wPaint", wPaint);
    }

    //classes/prototyping
}

ここでは5つの点に注意する必要があります.

デフォルトの構成はプラグインの外にある必要があります.これにより、

を毎回インスタンス化する必要はありません.

setterとgetter方式は必須ではないが、メインサイクルを実行するたびにチェック

を行う必要がある.

は、各要素がjQueryメソッドチェーンフロー

を破壊できないことを返す.

データを保存するにはdata()を使用します.後でsetterとgetterで

を使用する必要があります.

最後に、主サイクルの外側にclass/プロトタイプ

を設定する.
5.コードを整理しておく
これは明らかかもしれませんが、多くのプラグインには奇妙な構成がたくさんあります.良いプラグインコードにとって、きれいで簡単な構造は効果的に読むことができます.
 

./images/
./includes/
./themes/
./wPaint.js
./wPaint.min.js
./wPaint.css
./wPaint.min.css

ファイルやjQueryクラスライブラリを探す場所を簡単に知ることができます.
6.Classプロトタイプを使用
それ自体が大きな話題なので、ここでは簡単に紹介します.基本的には2つの主な原因があります.
分離されたコピー・メソッドをインスタンス化しないと、より効率的で高速に実行できます.
各オブジェクトメソッドのみを参照し、各オブジェクトでコピーを実行しないことで、多くのメモリを節約できます.
 

function Canvas(settings)
{
    this.canvas = null;     
    this.ctx = null;
}

Canvas.prototype = 
{
    generate: function()
    {
        //generate code
    }
}

同時に、あなたのコードを効果的に組織し、再利用しやすくします.上の例ではCanvasオブジェクトのみがインスタンス化されており、他のプロトタイプ関数は参照にすぎません.
7.setterおよびgetterメソッドの提供
setterとgetterメソッドを提供する必要はありませんが、必要な開発者に提供する必要があります.プラグイン呼び出し後にプラグインを変更できるようにする必要があります.基本は次のとおりです.
 

if(typeof option === 'object'){
    settings = option;
}else if(typeof option === 'string'){
    if(
        this.data('_wPaint_canvas') &&
        defaultSettings[option] !== undefined
    ){
        var canvas = this.data('_wPaint_canvas');

        if(settings){
            canvas.settings[option] = settings;
            return true;
        }else{
            return canvas.settings[option];
        }
    }else return false;
}

私たちがしなければならないのは、他のオプションではなくチェックオプションが設定されていることです.両方のパラメータが提供されている場合は、指定したオプションを要求することを意味するオプションが1つしかない場合に設定されていることを示します.
9.すべてのブラウザでテスト
これはプラグイン開発にとって絶対に重要です.コードに文句を言わないかもしれませんが、ユーザーはきっと関心を持っています.もし彼らが文句を言っていたら、あなたのプラグインはすぐに置き換えられると思います.例えば、私はjQuery color pickerプラグインでいくつかのバグを見つけて、IE 7で完全に使用できません.IE 7は「inline-block」要素をサポートしていないため、簡単な修復が必要です.
この手順は、プラグインを完了した後、わずかに見えるかもしれません.しかし、プラグインのブラウザ互換性テストに1日かかることを保証したほうがいいです.このプロセスでは、バグをテストするだけでなく、プラグインのユーザー体験を向上させることができます.
10.プラグインをアップロード
似たようなサービスがたくさんありますが、GoogleとGithubをお勧めします.
プラグインを公開したくないかもしれませんが、特に内部プロジェクトのために開発されている場合は、内部バージョン管理ソフトウェアを使用して、文章とバージョンをよりよく維持する必要があります.
もちろん、プラグインを公開できれば、以上の2つの場所が良い選択です.問題を効果的に追跡し、アクティブなfeedとダウンロード数を表示することができます.ユーザーと効果的にやり取りできるようにします.