ОО JQuery и классы

Question

Я работаю над сайтом и впервые использую JQuery. Я в основном использовал MooTools для предыдущих проектов, и у меня есть несколько классов виджетов, которые я написал, используя структуру MooTools Class . Я хотел бы перенести их на JQuery, но мне кажется, что нет ничего похожего на функциональность MooTools, когда дело доходит до классов объектов.

Я немного обыскал и почти ничего не нашел. Похоже, у Digg есть свои , но я не уверен, что это то, что я должен использовать. Есть ли способ лучше? Насколько объектно-ориентированные люди обычно получают с помощью JQuery? Каков обычный метод инкапсуляции виджета пользовательского интерфейса (или любой структуры функционального класса)?

Я выложу поддельный пример возможного класса виджетов MooTools:

var ZombatWidget = new Class({
    Extends: BaseWidget,
    widgetPropertyX = 'prop1',
    widgetPropertyY = 'prop2',
    attach = function(el) {
        var f = function() { 
            //do something widgety
        };
        el.addEvent('dblclick',f);
        el.addClass('widgetized');
    }
});

var z = new ZombatWidget();
z.attach($('widgetDiv'));

То, что у меня есть, намного больше этого, но вы поняли идею. Нужно ли преобразовывать это в prototype метод структурирования класса / наследования? Как бы вы написали этот класс объектов с использованием JQuery?

Answer 1

Этот подход может оказаться полезным для поставленной задачи: создание объектно-ориентированного плагина jquery.

И эта статья на Ajaxian " реальная система классов OO с jquery ".

Answer 2

Хм ... интересно. У нас есть jQuery, который imho - отличный инструмент для взаимодействия с DOM. Это инструмент выбора, где вы можете написать свой собственный код (плагины) для изменения выбранных элементов. Здесь вы можете взаимодействовать со своим собственным (объектно-ориентированным) кодом в плагине, чтобы сделать что-то действительно классное.

Так зачем вам дополнительные возможности OO в jQuery, если вы не хотите наследовать от других плагинов jQuery?

Поскольку у вас может быть плагин, который позволяет вам делать следующее:

$(".spiffyness").yourSpiffyficationPlugin1();

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

Поэтому вы хотите наследовать от своего первого плагина, что приводит к:

$(".spiffyness").yourSpiffyficationPlugin2(); //plugin inherited from 1

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

$(".spiffyness").yourSpiffyficationPlugin1().yourSpiffyficationPlugin2();

Где второй плагин просто делает эту крошечную (но удивительную;) вещь сверх первой?

Другими словами: то, что вы хотите, стоит усилий ради ОО-пуризма? Или механизм трубы jQuery достаточно хорош и, возможно, все, что вам нужно?

Я бы сказал, что разделение обязанностей и / или ваше мышление mootools может быть реальной проблемой здесь. Позвольте jQuery делать то, что у него хорошо получается, использовать его мощный механизм конвейера, передавать ваши собственные плагины (которые могут содержать тонны причудливых OO-материалов) ... и вы можете получить отличные результаты, пока ваш код еще чист.

Если вы думаете, что я думаю здесь слишком просто, хороший пример сущности вашей точки зрения будет приветствоваться! : -)

И чтобы быть впереди, если вы делаете что-то действительно продвинутое и вам не нравится просто делать что-то поверх чего-то другого, ваш плагин также может делегировать один из ваших OO-классов. Например. как:

$.fn.totalAwesomeness = function(options) {
  var defaults = {
    mode: 1,
    title: 'Awesome'
  };
  var opts = $.extend(defaults, options);
  return this.each(function() {
    var $this = $(this);
    var handler = null;
    if(defaults.mode == 1)
       handler = new com.myStuff.class1($this);
    else if(defaults.mode == 2)
   handler = new com.myStuff.class2($this); //class2 inherits from class1 
    handler.doMagic();
  });
};

Answer 3

Я только что закончил самый первый выпуск своего мини-проекта: https://github.com/op1ekun/plOOgins. Все дело в написании ООП-кода для использования в качестве плагинов Jquery. Это не ракетостроение, просто кое-что, что мы хотели использовать на своем рабочем месте. Может быть, это поможет вам немного. Удачи!

Answer 4

Существуют сторонние реализации классов javascript, которые предоставляют очень мощные возможности для самоанализа. Я хотел бы особо выделить JS.Class и Joose . В то время как JS.Class моделируется после Ruby, Joose моделируется по Moose. Я не пользователь mootools, поэтому я не могу комментировать их преимущества / недостатки по отношению к mootools. Но я бы суммировал их ключевые особенности.

JS.Class уделяет большое внимание симуляции объектно-ориентированных функций Ruby и делает это довольно хорошо. Он предоставляет мощную библиотеку, смоделированную по образцу стандартной библиотеки Ruby, а также поставляется с хорошо интегрированной средой управления пакетами и тестирования.

Joose, хотя и не предоставляет инфраструктуры тестирования / средств управления пакетами, превосходит по расширенные средства управления атрибутами, фильтры и улучшенные средства самоанализа.

Они оба имеют действительно хорошую документацию и могут использоваться как в браузере, так и на сервере.

Answer 5

Я недавно написал статью о объектно-ориентированных плагинах jQuery, надеюсь, это будет полезно

http://ajax911.com/jquery-object-oriented-plugins/

Answer 6

Вы также всегда можете использовать moo4q - http://moo4q.com/. Он добавляет поддержку класса MooTools в jQuery.

Answer 7

Плагины иногда делают свое дело.

Конечно, вы можете использовать достаточно mootools, чтобы получить его модель класса / наследования. С реализацией document.id «режима совместимости» в 1.2.3 вы можете съесть свой торт и съесть его тоже (я думаю - не сделал это сам.)

Answer 8

Вопрос в том ... Почему вы уходите от MooTools, это соответствует вашим потребностям? Мне кажется, что MooTools работал нормально, и jQuery ничего не делает, чего не может сделать MooTools. (Обратное не верно).

К сожалению, jQuery не создан для поддержки классического ООП, как MooTools, поэтому вам нужно будет написать свои классы в виде плагинов jQuery.