2015-06-17 3 views
0

Согласно jQuery Boilerplate page:Сделать JQuery поддержка Boilerplate цепочки

Это не поддержки цепи, смотрите (так в оригинале), как не так много людей с использованием синтаксиса плагин цепи.

Как его можно изменить так, чтобы он это сделал? Код:

/* 
* Project: 
* Description: 
* Author: 
* License: 
*/ 

// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly. 
;(function ($, window, document, undefined) { 

    // undefined is used here as the undefined global variable in ECMAScript 3 is 
    // mutable (ie. it can be changed by someone else). undefined isn't really being 
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined 
    // can no longer be modified. 

    // window is passed through as local variable rather than global 
    // as this (slightly) quickens the resolution process and can be more efficiently 
    // minified (especially when both are regularly referenced in your plugin). 

    var // plugin name 
     pluginName = "pluginName", 
     // key using in $.data() 
     dataKey = "plugin_" + pluginName; 

    var privateMethod = function() { 
     // ... 
    }; 

    var Plugin = function (element, options) { 
     this.element = element; 

     this.options = { 
      // default options 
     }; 

     /* 
     * Initialization 
     */ 

     this.init(options); 
    }; 

    Plugin.prototype = { 
     // initialize options 
     init: function (options) { 
      $.extend(this.options, options); 

      /* 
      * Update plugin for options 
      */ 
     }, 

     publicMethod: function() { 
      // ... 
     } 
    }; 

    /* 
    * Plugin wrapper, preventing against multiple instantiations and 
    * return plugin instance. 
    */ 
    $.fn[pluginName] = function (options) { 

     var plugin = this.data(dataKey); 

     // has plugin instantiated ? 
     if (plugin instanceof Plugin) { 
      // if have options arguments, call plugin.init() again 
      if (typeof options !== 'undefined') { 
       plugin.init(options); 
      } 
     } else { 
      plugin = new Plugin(this, options); 
      this.data(dataKey, plugin); 
     } 

     return plugin; 
    }; 

}(jQuery, window, document)); 

То, что вы не можете сделать себе что-то вроде $('div').plugin().css('border', '1px solid red'); Добавление функции JQuery разбивает его. Почему не будет плагин хочет поддерживать цепочку и как ее можно адаптировать для поддержки?

ответ

2

Вместо того, чтобы возвращать plugin в конце, вы просто вернете this.

Возможно, вам не нужна поддержка цепочки, чтобы вы могли вернуть интерфейс вашего плагина, например.

var coolPlugin = $('img').coolPlugin() 

coolPlugin.play(500) 

Альтернатива, используемая большинством плагинов, что довольно некрасиво, но работает, что-то вроде coolPlugin('play', 500).

+0

Спасибо. Если вы вернете 'this' вместо' plugin', можете ли вы по-прежнему фильтровать атрибут data? Например. . '$ (" Элемент") defaultPluginName(); $ ("# element-1"). data ('plugin_defaultPluginName'). yourOtherFunction(); 'Мне нравится эта функция о шаблоне. – texelate