пятница, 14 сентября 2012 г.

Написание большого плагина на jQuery

Как писать плагины для определенной функциональности для jQuery - понятно, а если нет то можно ознакомиться здесь http://docs.jquery.com/Plugins/Authoring. Возникает вопрос что делать когда таких функций становится много? Принял для себя решения ввести подобие пространства имен. Например вводим пространства в соответствии с функциональными блоками pagination и facet_filter.
(function ($) {
  options: {
    //…
  }
  methods: {
    init: function(){
        //Обращение к методам внутри блоков
        methods.pagination.init();
        methods.filter.init();
    },
    get: function (option) {
      if (options[option])
        return options[option];
      else
        methods.error('Option ' + option + ' does not exist in SATIN');
      },
    pagination: {
      init: function () {
        //…
      },
      render: function(){
        //…
      },
      destroy: function(){
        //…
      }
    },
    filter: {
      init: function () {
        //…
      },
      render: function(){
        //…
      },
      destroy: function(){
        //…
      }
    },
  }
  $.fn.OurBigPlugin = function (method_name) {
    //…
  }
})(jQuery);
Теперь необходимо придумать как к таким блокам обращаться:
$.fn.OurBigPlugin = function (method_name) {
        var namespace = '',
            method = '';
 
        if (typeof method_name === 'string') {
            if (method_name.split('.').length > 1) {
                namespace = method_name.split('.')[0];
                method = method_name.split('.')[1];
            } else {
                method = method_name;
            }
        }
 
        if (typeof method_name === 'object' || !method_name) {
            return methods.init.apply(this, arguments);
        } else if (namespace) {
            return methods[namespace][method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (method) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else {
            $.error('Method ' + method + ' in ' + namespace + ' namespace does not exist on OurBigPlugin');
        }
    };
Теперь вызывать функции можно следующим образом:
$().OurBigPlugin("pagination.loadpage", 5)