1. コードをすべてクロージャの中に置く

これは私が最もよく使うものです。しかし、クロージャの外にあるメソッドは呼び出せない場合があります。

ただし、あなたのプラグインのコードは自分のプラグインのためだけに機能するので、この問題はありません。すべてのコードをクロージャの中に置くことができます。そしてメソッドはPrototypeメソッド内部に置くべきかもしれません。

(function($)  {
    //code here
})(jQuery);

2. プラグインのデフォルトオプションを提供する

あなたのプラグインには開発者が設定できるオプションがいくつかあるはずです。そのため、デフォルトオプションを復元できるようにすることが必要です。jQueryのextend機能を使ってこれらのオプションを設定できます：

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

3. 要素を返すようにする

JavaScript/jQueryにはメソッドチェーンができるという優れた特徴があります。そのため、この特性を壊さず、常にメソッド内で要素を返すべきです。私はすべてのjQueryプラグインでこれを守っています。

$.fn.wPaint = function(settings)  {
    return this.each(function()  {
    var elem = $(this);
    //run some code here
    }
}

4. 一度だけ実行するコードはメインループの外に置く

これは非常に重要ですが、しばしば無視されます。簡単に言うと、デフォルト値の集まりのようなコードがあり、プラグイン機能を呼び出すたびにインスタンス化するのではなく、一度だけインスタンス化する必要がある場合、そのコードをプラグインメソッドの外に置くべきです。そうすることでプラグインをより効率的に実行し、メモリを節約できます。

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

    $.fn.wPaint = function(settings)  {
    return this.each(function()  {
        var elem = $(this);
        //run some code here
    }
}

上記のコードでは、"defaultSettings" は完全にプラグインメソッドの外にあることに気づくでしょう。これらのコードはクロージャ内にあるため、変数が上書きされる心配はありません。

5. なぜクラスプロトタイピングを設定するのか

あなたのコードの血肉とも言えるメソッドと関数は、prototype関数内に置くべきです。理由は2つあります：

• メモリを大幅に節約できます。なぜなら、これらのメソッドを繰り返し作成する必要がないからです。
• 既存のメソッドを参照する方が、新しく作成するよりもずっと速いです。

簡単に言うと、prototypeはオブジェクトを拡張し、各オブジェクトでメソッドをインスタンス化せずにメソッドを提供します。これによりコードがより整理され、効率的になります。この開発スタイルに慣れると、将来のプロジェクトで多くの時間を節約できることに気づくでしょう。

6. クラスプロトタイピングの設定方法

prototypeメソッドの設定には2つの部分があります。まず最初にクラスの初期定義を作成する必要があります。ほとんどの場合、これはオブジェクトを作成することを意味します。この定義には、各オブジェクトインスタンスで異なる部分が含まれます。私のPaint jQueryプラグインでは、次のように書いています：

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

次にグローバルメソッドを追加します：

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

7. "this" オブジェクトを使用する

"$this"を使用することで、他のクロージャに正しい参照を渡すことができます。また、他のメソッドに $this 参照を渡す必要があるかもしれません。注意点として、$this という名前は変更可能で、任意の変数名を使用できます。

Canvas.prototype =  {
    generate: function()   {
        //some code
        var $this = this;
        var buton = //...some code
        button.click(function(){
        //using this will not be found since it has it's own this
        //use $this instead.
        $this.someFunc($this);
        });
    },

    someFunc: function($this)      {
    //won't know what "this" is.
    //use $this instead passed from the click event
    }
}

8. 各オブジェクトに設定を保存する

私は常に各オブジェクトに独自の設定を保存し、その設定を操作しています。そうすることで、異なるメソッド間で多くのパラメータを渡す必要がなくなります。これらの変数をオブジェクト内に置くことで、他の場所からも簡単に呼び出せます。

function Canvas(settings)  {
    this.settings = settings;
    return this;
}

9. Prototypeメソッドのロジックを分離する

これは基本的な原則かもしれません。メソッドを提供する必要があるかどうか迷ったときは、「他の誰かがこのメソッドを書き直す場合、あなたのコードはそのニーズを満たせるか？」または「他の人がこのメソッドを書くのはどのくらい難しいか？」と自分に問いかけてください。もちろん、これは柔軟性のバランスの問題です。ここに私のColor Picker jQueryプラグインのメソッドを列挙したので、参考にしてください：

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

10. Setter/Getter オプションを提供する

これは必須ではありませんが、私のすべてのプラグインでこの条項を使用していることに気づきました。ほんの少しのコードだけで、他の誰かが必要とするかもしれない機能を提供できるからです。

基本的に、開発者が要素に既に存在する値を設定または取得できるようにするだけです：

var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");