OO JQuery и классы

Question

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

Я искал вокруг немного и не нашел много на нем. У Digg есть rolled their own, но я не уверен, что это то, что я должен использовать. Есть ли способ лучше? Как объектно-ориентированные люди обычно получают 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

Возможно, этот подход полезен для поставленной задачи : building an object-oriented jquery plugin.

И эта статья об аяксиане «a real OO class system with jquery».

Answer 2

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

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

Answer 3

Плагины иногда делают трюк.

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

Answer 4

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

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

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

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

И, при этом некоторые действительно прохладно удивительности уже, вам нужно больше spiffyness на вершине этого.

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

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

Но ... не вы там тоже, делая это:

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

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

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

Я бы сказал, что разделение обязанностей и/или ваше мышление мышления может быть реальной проблемой здесь. Пусть 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 5

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

Answer 6

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

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

Answer 7

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

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

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

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

Answer 8

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