Статьи

Базовый плагин jQuery с использованием шаблона модуля

Декабрь 6, 2018

В этом посте я покажу вам, как использовать шаблон модуля для создания базового плагина jQuery, который можно повторно использовать с различными параметрами. Основное внимание в шаблоне модуля уделяется защите ваших параметров и методов и предоставлению хорошего публичного API для использования на объекте. Это достигается с помощью синтаксиса Object Literal с инкапсулированными переменными, которые содержат пространство имен закрытых и открытых объектов. Плагин представляет собой очень простой объясненный пример, и ниже приведена демонстрация, чтобы дать вам основы для создания надежного плагина jQuery.

Похожие сообщения:

You Tube Video Плагин

Целью этого плагина является создание разных экземпляров видео на YouTube, для которых вы можете указать такие параметры, как заголовок и URL.

basic-jquery-plugin

Давайте посмотрим на код …


В плагине используются 3 основные переменные: priv, который содержит закрытый API, Plugin, который содержит открытый API, и значения по умолчанию, которые содержат настройки плагина по умолчанию. 

var priv = {}, // private API
    Plugin = {}, // public API

    // Plugin defaults
    defaults = {
      id : '',
      name : '',
      url : ''
    };

Настройки плагина по умолчанию, сохраненные в «значениях по умолчанию», заменяются новыми настройками. Помните, что функция $ .extend () объединяет один объект с другим, поэтому здесь параметры объединяются со значениями по умолчанию, а новый объект сохраняется в priv.options. 

 // Public initialization
Plugin.init = function(options)
{
    ...
    $.extend(priv.options, defaults, options);
    ...
}

Здесь мы можем вызвать параметры прямо в объекте «Плагин», используя «this.options». 

 priv.options = {}; //private options

priv.method1 = function()
{
    console.log('Private method 1 called...');
    $('#videos').append(''+this.options.name+'');
    priv.method2(this.options);
};
 
  '+ This.options.name + 
  «);
     priv.method2 (this.options);
 };

Здесь публичный API для плагина может быть реализован, потому что мы возвращаем объект Plugin, к публичным методам можно получить доступ. 

 // Return the Public API (Plugin) we want to expose
return Plugin;

Запустив код, мы ясно видим в Firebug, что параметры устанавливаются для объектов, а закрытые / публичные методы вызываются правильно.

basic-jquery-plugin2

демонстрация

Загрузить видео с YouTube

Полный плагин 

 /**
 *  A basic jQuery plugin using the Module Pattern
 * *
 *  @author      Sam Deering
 *  @copyright   Copyright (c) 2012 jQuery4u
 *  @license     http://jquery4u.com/license/
 *  @since       Version 1.0
 *
 */

!function(exports, $, undefined)
{
    var Plugin = function()
    {

        /*-------- PLUGIN VARS ------------------------------------------------------------*/

        var priv = {}, // private API

            Plugin = {}, // public API

            // Plugin defaults
            defaults = {
                id : '',
                name : '',
                url : ''
            };

        /*-------- PRIVATE METHODS --------------------------------------------------------*/

        priv.options = {}; //private options

        priv.method1 = function()
        {
            console.log('Private method 1 called...');
            $('#videos').append(''+this.options.name+'');
            priv.method2(this.options);
        };

        priv.method2 = function()
        {
            console.log('Private method 2 called...');
            $('#'+priv.options.id).append(''+this.options.url+''); // append title
            $('#'+priv.options.id).append(''); //append video
        };

        /*-------- PUBLIC METHODS ----------------------------------------------------------*/

        Plugin.method1 = function()
        {
            console.log('Public method 1 called...');
            console.log(Plugin);

            //options called in public methods must access through the priv obj
            console.dir(priv.options);
        };

        Plugin.method2 = function()
        {
            console.log('Public method 2 called...');
            console.log(Plugin);
        };

        // Public initialization
        Plugin.init = function(options)
        {
            console.log('new plugin initialization...');
            $.extend(priv.options, defaults, options);
            priv.method1();
            return Plugin;
        }

        // Return the Public API (Plugin) we want
        // to expose
        console.log('new plugin object created...');
        return Plugin;
    }

    exports.Plugin = Plugin;

}(this, jQuery);


jQuery(document).ready( function()
{
    console.log('doc rdy');

    // EXAMPLE OF CREATING PLUGIN OBJECTS WITH CUSTOM SETTINGS

    console.log('--------------------------------------------');

    var myPlugin1 = new Plugin;
    myPlugin1.init(
    {
        /* custom options */
        id : 'vid01',
        name : 'Video 1',
        url : 'http://www.youtube.com/embed/dXo0LextZTU?rel=0'
    });

    //call to public methods
    myPlugin1.method1();
    myPlugin1.method2();

    console.log('--------------------------------------------');

    var myPlugin2 = new Plugin;
    myPlugin2.init(
    {
        /* custom options */
        id : 'vid02',
        name : 'Video 2',
        url : 'http://www.youtube.com/embed/nPMAUW-4lNY?rel=0'
    });

    //call to public methods
    myPlugin2.method1();
    myPlugin2.method2();

    // console.log('--------------------------------------------');

});
 
  '+ This.options.name + 
  «);
             priv.method2 (this.options);
         };

         priv.method2 = function ()
         {
             console.log ('Закрытый метод 2 вызван ...');
             $ ( '#' + Priv.options.id) .append (» 
  '+ This.options.url + 
  «);  // добавить заголовок
             $ ( '#' + Priv.options.id) .append (»  «);  // добавить видео
         };

         / * -------- ОБЩЕСТВЕННЫЕ МЕТОДЫ -------------------------------------- -------------------- * /

         Plugin.method1 = function ()
         {
             console.log ('Открытый метод 1 называется ...');
             console.log (плагин);

             // параметры, вызываемые в открытых методах, должны получить доступ через priv obj
             console.dir (priv.options);
         };

         Plugin.method2 = function ()
         {
             console.log ('Открытый метод 2 называется ...');
             console.log (плагин);
         };

         // Публичная инициализация
         Plugin.init = функция (опции)
         {
             console.log ('инициализация нового плагина ...');
             $ .extend (priv.options, defaults, options);
             priv.method1 ();
             возвратный плагин;
         }

         // Возвращаем публичный API (плагин), который мы хотим
         // выставлять
         console.log ('создан новый объект плагина ...');
         возвратный плагин;
     }

     exports.Plugin = Plugin;

 } (это, JQuery);


 JQuery (документ) .ready (функция ()
 {
     console.log ('doc rdy');

     // ПРИМЕР СОЗДАНИЯ ОБЪЕКТОВ ПЛЮГИНА ПО ТАМОЖЕННЫМ НАСТРОЙКАМ

     console.log ( '--------------------------------------------' );

     var myPlugin1 = новый плагин;
     myPlugin1.init (
     {
         / * пользовательские опции * /
         id: 'vid01',
         название: «Видео 1»,
         URL: 'http://www.youtube.com/embed/dXo0LextZTU?rel=0'
     });

     // вызов публичных методов
     myPlugin1.method1 ();
     myPlugin1.method2 ();

     console.log ( '--------------------------------------------' );

     var myPlugin2 = новый плагин;
     myPlugin2.init (
     {
         / * пользовательские опции * /
         id: 'vid02',
         название: «Видео 2»,
         URL: 'http://www.youtube.com/embed/nPMAUW-4lNY?rel=0'
     });

     // вызов публичных методов
     myPlugin2.method1 ();
     myPlugin2.method2 ();

     // console.log ('------------------------------------------- - ');

 });

34
Share: