OO JQuery i klasy

Question

Pracuję na stronie i przy użyciu JQuery zasadniczo po raz pierwszy. Używałem głównie MooTools do poprzednich projektów i mam kilka klas widżetów, które napisałem przy użyciu struktury MooTools Class. Chciałbym przenieść je do JQuery, ale wygląda na to, że nie ma nic podobnego do funkcji MooTools, jeśli chodzi o klasy obiektów.

Szukałem trochę i nie znalazłem zbyt wiele na ten temat. Digg wydaje się mieć rolled their own, ale nie jestem pewien, czy jest to coś, czego powinienem używać. Czy istnieje lepszy sposób? W jaki sposób obiekty zorientowane są zwykle w JQuery? Jaka jest zwykle metoda enkapsulacji widżetu interfejsu użytkownika (lub dowolnej struktury klasy funkcjonalnej)?

wyślę fałszywe przykład możliwej klasy MooTools widget:

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')); 

Co mam jest o wiele większe niż to, ale masz pomysł. Czy muszę przekonwertować to na metodę struktury klasy/dziedziczenia z prototype? Jak napisałbyś ten typ klasy obiektów używając JQuery?

Answer 1

Może się okazać, że takie podejście jest użyteczne w przypadku danego zadania : building an object-oriented jquery plugin.

A ten artykuł o Ajaxianie "a real OO class system with jquery".

Answer 2

Pytanie brzmi ... Dlaczego odchodzisz od MooTools, czy pasujesz do Twoich potrzeb? Wydaje mi się, że MooTools działało dobrze i nie ma nic, co zrobi jQuery, czego MooTools nie może zrobić. (Przeciwnie, nie jest prawdą).

Niestety, jQuery nie jest zbudowany do obsługi klasycznego OOP, ponieważ MooTools jest więc konieczne, aby zapisać swoje klasy jako wtyczki jQuery.

Answer 3

Wtyczki czasami działają.

Oczywiście można użyć tylko tyle mootools, aby uzyskać jego model klasy/dziedziczenia. Dzięki implementacji "trybu zgodności" document.id w wersji 1.2.3 możesz mieć swoje ciastko i zjeść je (myślę - sam tego nie zrobiłem).

Answer 4

Hm ... interesujące. Mamy jQuery, którego imho jest świetnym narzędziem do interakcji z DOM. Jest to narzędzie do zaznaczania, w którym można napisać własny kod (wtyczki), aby zmodyfikować wybrane elementy. Możesz tu wejść w interakcję z własnym (zorientowanym obiektowo) kodem w pluginach, aby zrobić coś naprawdę fajnego.

Dlaczego więc potrzebujesz dodatkowych możliwości OO w jQuery, chyba że chcesz móc dziedziczyć z innych wtyczek jQuery?

Ponieważ może mieć wtyczkę, która pozwala na wykonanie następujących czynności:

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

I robiąc już kilka naprawdę fajnych awesomeness, trzeba więcej spiffyness na początku tej.

Dlatego chcesz dziedziczyć z pierwszej wtyczce co skutkuje:

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

Ale ... czy nie dostać tam w ten sposób:

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

Gdzie drugi plugin po prostu robi to malutkie (ale niesamowite;)) coś ekstra na pierwszym?

Innymi słowy: czy jest to, co chcesz, warte wysiłku na rzecz Pneumonautyki? Czy mechanizm rurki jQuery jest wystarczająco dobry i może wszystko, czego potrzebujesz?

Powiedziałbym, że rozdzielenie obowiązków i/lub sposób myślenia mootools może być tutaj prawdziwym problemem. Pozwól jQuery robić to, w czym jest dobra, użyj jej potężnego mechanizmu potoku, potnij własne wtyczki (które mogą zawierać mnóstwo fantazyjnych rzeczy OO) ... i możesz mieć świetne wyniki, gdy twój kod jest nadal czysty.

Jeśli uważasz, że myślę tutaj zbyt prosto, dobry przykład istoty twojego punktu byłby mile widziany! :-)

A jeśli chcesz zrobić coś naprawdę zaawansowanego, a nie chcesz uciec od czegoś innego, to wtyczka może również przekazać ci jedną z twoich klas OO . Na przykład. na przykład:

$.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

Zawsze możesz również użyć moo4q - http://moo4q.com/. Dodaje obsługę klasy MooTools do jQuery.

Answer 6

napisałem artykuł jakiś czas temu o jQuery obiektowych wtyczek, nadzieję, że będzie pomocny

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

Answer 7

Istnieją strony trzeciej klasy javascript implementacje, które zapewniają bardzo potężnych możliwościach introspekcji. Chciałbym szczególnie podkreślić JS.Class i Joose. Podczas gdy JS.Class jest modelowane po Ruby, Joose jest wzorowany na Moose. Nie jestem użytkownikiem mootools, więc nie mogę komentować ich zalet/wad w odniesieniu do mootools. Ale podsumowałbym ich najważniejsze cechy.

JS.Class koncentruje się na symulacji zorientowanych obiektowo funkcji Rubiego i wykonuje całkiem niezłą pracę. Zapewnia potężną bibliotekę wzorowaną na standardowej bibliotece Ruby, a także zawiera dobrze zintegrowaną strukturę zarządzania i testowania pakietów.

Joose, mimo że nie oferuje ram badawczych/udogodnień do zarządzania pakietami, wyróżnia się pod względem zaawansowanych narzędzi do zarządzania atrybutami, filtrów i lepszych usług introspekcji.

Obie mają naprawdę dobrą dokumentację i mogą być używane zarówno w przeglądarce, jak i na serwerze.

Answer 8

Właśnie ukończyłem pierwsze wydanie mojego mini projektu: https://github.com/op1ekun/plOOgins. Chodzi o pisanie kodu OOP do użycia jako wtyczki Jquery. To nie jest nauka o rakietach, tylko coś, co chcieliśmy użyć w moim miejscu pracy. Może ci to trochę pomoże. Powodzenia!