Блог

Мне нужно создать документ, который предоставляет «модель» для написания плагинов jQuery для большого сайта.

Например: все плагины должны иметь:

 $.fn.somePlugin = function() {
    return this.each(function() {
        // Here the plugins does its goal.
    });
};
  

таким образом, они уважают модель fluent, а также могут вызываться с несколькими элементами одновременно. Некоторые другие вещи, которые, я думаю, все они должны иметь, это:

• Параметры получения и настройки (как в jQuery-ui)
• Методы (как в jQuery-ui)
• Какой-нибудь способ изменить параметры по умолчанию. Конечно, это должно быть сделано без изменения файла плагина (опять же, как jQuery-ui).

Каким бы это был ваш «Модельный плагин»? (достижение этого и некоторых других вещей, которые вы считаете необходимыми, наилучшим возможным способом).

Результат

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

В документах jquery есть раздел, посвященный разработке плагинов: http://docs.jquery.com/Plugins/Authoring

и вот «слайды» из выступления Бена Алманса по разработке плагинов на бостонской конференции jquery:

https://github.com/cowboy/talks/blob/master/jquery-plugin-authoring.js

и еще одна ссылка от Бена Алмана о написании плагинов.

http://msdn.microsoft.com/en-us/scriptjunkie/ff696759

Обычно я использую структуру, подобную этой

 (function ($, plugin) {
  "use strict";

  $[plugin] = function (options/* params */) {
    var settings;
    settings = $.extend({}, $[plugin].defaultSettings, options);
    //static funciton code here
  };

  $.fn[plugin] = function (options/* params */) {
    this.each(function (index, element) {
      var settings, $this;
      settings = $.extend({}, $.fn[plugin].defaultSettings, options);
      $this = $(this);
      $this.data(plugin 'Settings', settings);
      //chainable function code here
    });
    return this;
  };

  $[plugin].defaultSettings = {
    'foo': 'bar'
  };

  $.fn[plugin].defaultSettings = {
    'fizz': 'buzz'
  };

  $(function(){
    //document.ready initialization code here
  });
}(jQuery, 'foo'));
  

Обычно я не заморачиваюсь с plugin параметром, но это может быть полезно для обобщения названия плагина

Для ярлыков событий я буду использовать:

 $.each('foo bar baz'.split(' '), function(i, name) {
  $.fn[name] = function(data,fn){
    if (fn == null) {
      fn = data;
      data = null;
    }
    return arguments.length > 0 ?
      this.bind(name, data, fn) :
      this.trigger(name);
  };
});
  

Которые будут создавать .foo() , .bar() .baz() все в качестве ярлыков для привязки / запуска событий 'foo' , 'bar' 'baz' и,,,.

Я уже ДАВНО использую следующий шаблон, и, похоже, он делает все необходимое, а также обеспечивает традиционные сценарии jQuery, такие как: $.myPlugin("element", {options}) , $.myPlugin({options}, callback) или ‘$(«элемент»).myPlugin();

 (function($) {
    if (!$.myExample) { // check your plugin namespace does not already exist
        $.extend({  //  this will allow you to add your plugin to the jQuery lib
            myExample: function(elm, command, args) {
                //  keep in mind, right here you might want to do a class or data check to determine which direction this call is going
                //  for example, upon init the plugin on an element you may add the plugin name as a class, 
                //      this way, when it's recalled, you can see it alrady has that class and might be calling a command,
                //          thus make an if statemnt to push the process through
                return elm.each(function(index){
                    // do work to each element as its passed through
                    // be sure to use something like
                    //    return elm.each(function(e) { dor work });
                    // as your final statement in order to maintain "chainability"
                });
            }
        });
        $.fn.extend({   //  this gives the chainability functionality seen with $ funcs like: $("#eleID").css("color", "red") <--returns original element object
            myExample: function(command) {
                return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1));
            }
        });
        $.myExample.props = {   //  Here you can establish specific properties to your plugin, prehaps even make them "Over-writable"
            key1: "value",
            key2: "value"
        };
        $.myExample.methods = { //  Here you can establish specific methods/functions for your plguin to carry out and maintain your namespace as well
            key1: function(param) {
                /*  do work */
            },
            key2: function(param) {
                /*  do work */
            }
        };
        //  This next part is not seen in many plugins but useful depending on what you're creating
        $.myExample.init = function(param) {    //  If you have an initialize method to apply, namespace it in here and calll on initializing your plugin
            var key = "value",
                key2 = {
                    subKey: "value"
                };
                /*
                /  run any number of initializing functions here
                /  I prefer to make my param a value that can be a
                /   string with a possible object
                /   the string for holding a base configuration
                /   the object for any change in properties or base values for that config
                */
        };
        $.myExample.defaults = {    //  establish base properties here that can be over-written via .props, but their values should never truly change
            key1: "value",
            key2: {
                prop1: {
                    subKey1: "value",
                    subKey2: "value"
                },
                prop2: {
                    subKey1: "value"
                }
            },
            key3: function(param) {

            }
        };
    }
})(jQuery);