1. Поместите весь свой код внутрь замыкания

Этот способ я использую чаще всего. Но иногда методы вне замыкания не могут быть вызваны.

Однако код вашего плагина служит только вашему собственному плагину, поэтому такой проблемы не существует. Вы можете поместить весь код внутрь замыкания. А методы, вероятно, следует размещать внутри методов Prototype.

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

2. Предоставьте опции по умолчанию для плагина

У вашего плагина должны быть некоторые опции, которые разработчики могут задавать, поэтому необходимо предусмотреть опции по умолчанию для восстановления. Вы можете задать эти опции через функцию extend в jQuery:

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. Зачем настраивать прототипирование классов

Методы и функции, как плоть и кровь вашего кода, должны быть помещены внутрь функций-прототипов. Есть две причины:

• Это позволяет сэкономить много памяти, потому что вам не нужно создавать эти методы повторно.
• Ссылаться на существующий метод гораздо быстрее, чем создавать новый.

Проще говоря, прототип расширяет объект и предоставляет для него методы без необходимости создавать экземпляры этих методов в каждом объекте. Это также делает ваш код более организованным и эффективным. Как только вы привыкнете к этому стилю разработки, вы обнаружите, что он экономит вам много времени в будущих проектах.

6. Как настроить прототипирование классов

Настройка метода прототипа состоит из двух частей. Сначала нам нужно создать начальное определение класса, которое в большинстве случаев означает создание объекта. Это определение содержит части, которые различаются для каждого экземпляра объекта. В моём Paint jQuery Plugin я написал это так:

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

Теперь добавьте глобальные методы:

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

Ключевой момент здесь — сделать методы прототипа универсальными, тогда как данные уникальны для каждого экземпляра и на них можно ссылаться с помощью "this".

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

Это, возможно, базовый принцип. Когда вы сомневаетесь, стоит ли предоставлять метод, вы можете спросить себя: «Если кто-то другой захочет переписать этот метод, сможет ли ваш код удовлетворить его потребности?» или «Насколько сложно будет кому-то другому написать этот метод?» Конечно, это вопрос баланса гибкости. Вот методы из моего jQuery-плагина Color Picker для справки:

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

10. Предоставляйте опции Setter/Getter

Это не обязательно, но, по моему опыту, все мои плагины это используют. Потому что требуется совсем немного кода, чтобы дать другим функцию, которая может им понадобиться.

В основном нам просто нужно позволить разработчикам устанавливать или получать значения, которые уже существуют на элементе:

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