плагин на основе шаблона JQuery плагин

Question

В моем классе JQuery я узнал о шаблоне JQuery плагин здесь https://raw.githubusercontent.com/jquery-boilerplate/jquery-boilerplate/91b4eb05b18f3038a6f8a34c41435c4d2702c0d0/dist/jquery.boilerplate.js

я понял некоторые понятия, как, почему ;(function ($, window, document, undefined) используется и как создать по умолчанию и т.д.

var pluginName = "defaultPluginName", 
       defaults = { 
       propertyName: "value" 
     }; 

однако пример, который учитель дал нам по этому шаблону о создании плагина, чтобы выделить элемент div, прошел по моей голове. Мы не получили демо-код, чтобы понять его позже.

Может ли кто-нибудь здесь создать плагин, который выделяет элемент div на основе шаблона и объясняет одно и то же шаг за шагом - например, как использовать настройки по умолчанию, конструкцию плагина и создать фактический плагин.

Заранее спасибо.

Answer 1

Шаблон плагин JQuery делает ряд вещей:

шаблонный устанавливает $ знак на JQuery, чтобы избежать плагин конфликтов (например, Prototype также использует $ как JQuery, так как вы убедитесь, что ваш плагин использует JQuery и не что-то другое Проходите JQuery в Immediately Invoked Function Expression вроде так):

(function($) { 
    $.fn.yourPlugin = function() { 
    // Do stuff! 
    }; 
})(jQuery); // pass jQuery so the $ is jQuery and not something else in the function 

Но это не решает все наши проблемы, так как undefined в ECMAScript 3 не может быть undefined (то есть, это изменчивый-он может быть изменено oth эр скрипты), поэтому мы добавим еще один параметр:

(function($, undefined) { 
    $.fn.yourPlugin = function() { 
    // Do stuff! 
    }; 
})(jQuery); // note that we're not passing any value to make it truly undefined 

шаблонный также проходит window и document как локальные переменные так, что они будут немного быстрее, и это также добавляет немного кода, так что плагин может быть как и другие объекты jQuery. Теперь мы закончили с шаблоном кода:

;(function ($, window, document, undefined) { 

     var pluginName = "highlighter"; 

     var defaults = { 
     }; 

     function Plugin (element, options) { 
       this.element = element; 
       this.settings = $.extend({}, defaults, options); 
       this._defaults = defaults; 
       this._name = pluginName; 
       this.init(); 
     } 

     $.extend(Plugin.prototype, { 
       init: function() { 
       } 
     }); 

     // A really lightweight plugin wrapper around the constructor, 
     // preventing against multiple instantiations 
     $.fn[ pluginName ] = function (options) { 
       this.each(function() { 
         if (!$.data(this, "plugin_" + pluginName)) { 
           $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
         } 
       }); 

       // chain jQuery functions 
       return this; 
     }; 

})(jQuery, window, document); 

Теперь давайте рассмотрим, как выделить div и изменить шрифт. Во-первых, вы можете расширить свои настройки по умолчанию с некоторыми свойствами:

// Here we create the defaults: 
var defaults = { 
    bgColor: 'yellow', 
    font: 'normal small-caps normal 16px/1.4 Georgia' 
}; 

В плагин обертку, когда ваш плагин конкретизируется, он также вызывает init() функцию:

// "options" parameter may contain the user's values to override defaults 
$.fn[ pluginName ] = function (options) { 
    // for each selected element 
    this.each(function() { 
     // ... 
     // When "new Plugin()" -> init() is called in the function, see "function Plugin()" 
     $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
    } 
} 

шаблонный также делает один другой важная вещь: он сохраняет настройки пользователя в this.settings вместо this.defaults, чтобы настройки по умолчанию плагина не были перезаписаны пользовательскими настройками пользователя.

new Plugin() вызывает функцию init(), где мы можем работать с нашей магией. Чтобы получить доступ к настройкам по умолчанию или пользовательских, мы просто должны получить доступ к this.settings:

init: function() { 
    // Set the highlight and font. 
    $(this.element).css({ 
     'background-color': this.settings.bgColor, 
     'font': this.settings.font 
    }); 
} 

См скрипки here.