Jestem całkiem nowy w naszym zespole deweloperów.
Potrzebuję silnych argumentów i / lub przykładów „pułapek”, aby mój szef w końcu zrozumiał zalety dyskretnego JavaScript, dzięki czemu on i reszta zespołu przestaną robić takie rzeczy:
<input type="button" class="bow-chicka-wow-wow"
onclick="send_some_ajax(); return false;" value="click me..." />i
<script type="text/javascript">
function send_some_ajax()
{
// bunch of code ... BUT using jQuery !!!
}
</script>Zasugerowałem użycie dość powszechnego wzoru:
<button id="ajaxer" type="button">click me...</button>i
<script type="text/javascript">
// since #ajaxer is also delivered via ajax, I bind events to document
// -> not the best practice but it's not the point....
$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();
});Powodem, dla którego mój szef (i inni) nie chce stosować tego podejścia, jest to, że Inspekcja zdarzeń w FireBug (lub Chrome Dev Tools) nie jest już prosta, np. Z
<input type="text" name="somename" id="someid" onchange="performChange()">natychmiast widzi, jaką funkcję wykonuje przy zdarzeniu zmiany i przeskakuje do niego w ogromnym pliku JS pełnym kodu spaghetti .
W przypadku dyskretnego JavaScript jedyne, co zobaczył to:
<input type="text" name="somename" id="someid" />i nie ma pojęcia, czy niektóre zdarzenia, jeśli w ogóle, były związane z tym elementem i która funkcja zostanie uruchomiona.
Szukałem rozwiązania i znalazłem je:
$(document).data('events') // or .. $(document).data('events').clickale to „podejście” spowodowało, że zajęło to „zbyt długo ...”, aby dowiedzieć się, która funkcja uruchamia się na którym zdarzeniu, więc powiedziano mi, aby przestać wiązać takie zdarzenia.
Proszę o kilka przykładów, silnych zalet lub innych sugestii dotyczących „Dlaczego warto korzystać z UJS”
AKTUALIZACJA: sugestia „zmiany pracy” nie jest idealnym rozwiązaniem.
AKTUALIZACJA 2: Ok, nie tylko zasugerowałem użycie wiązania zdarzeń jQuery, ale zrobiłem to . Po napisaniu wszystkich Delegacji wydarzeń szef przyszedł do mnie i zapytał, dlaczego deleguję wydarzenia z innym podejściem i podejściem, którego nie zna
Wspomniałem o pewnych oczywistych korzyściach, takich jak: - Jest 15 pól wejściowych i wszystkie z nich mają onchangezdarzenie (nie tylko, niektóre z nich również onkeyup). Więc bardziej pragmatyczne jest napisanie tego rodzaju delegacji zdarzeń dla WSZYSTKICH pól wejściowych, zamiast robić to 15 razy, zwłaszcza jeśli cały HTML będzie renderowany za pomocą echa PHP ->echo '... <input type="text" id="someid" ... />...'
źródło
js-this-class-do-somethingklasę, więc możesz łatwo CTRL + F dla niego w kodzie.Odpowiedzi:
Przestań używać modnych słów i spróbuj zamiast tego podać mocne argumenty. Nawet strona Wikipedii dla dyskretnego JavaScript mówi, że termin nie jest formalnie zdefiniowany. Może to być ogólny termin na wiele dobrych pomysłów, ale jeśli to brzmi jak zwykła moda lub moda, twój szef i współpracownicy nie zwracają dużej uwagi. Co gorsza, jeśli nadal będziesz zajmować się czymś, co uważają za bezużyteczne, mogą zacząć pomijać całkowicie niepowiązane pomysły, które popierasz.
Dowiedzieć się, dlaczego ty myśleć idee Dyskretna JavaScript są ważne.Czy to dlatego, że czytasz, że są uważane za najlepsze praktyki? Czy napotkałeś problemy, które możesz przypisać niezastosowaniu się do tych pomysłów? W jakim stopniu przyjęcie tych pomysłów wpłynie na wyniki firmy?
Wejdź do głowy szefa. Dlaczego robi to, co robi i dlaczego odrzucił twoje zmiany? Prawdopodobnie nie jest głupi i prawdopodobnie ma większe doświadczenie niż ty, więc prawdopodobnie ma dobre powody, aby robić rzeczy po swojemu. Nawiązałeś już do niektórych z nich - podążaj za tym wątkiem do końca. Następnie dowiedz się, czy i jak Twoje sugestie poprawią rzeczy, które najbardziej go niepokoją.
Wskazówka 1: Menedżerowie lubią pieniądze. Im bardziej bezpośrednio możesz powiązać swoje sugestie ze zwiększonym dochodem lub zmniejszonymi wydatkami, tym większy będzie twój argument. Wskazówka 2: Czas to pieniądz. Wskazówka 3: Sam w sobie estetyczny wygląd kodu nie przynosi pieniędzy. Wręcz przeciwnie - zajmuje dużo czasu, aby kod wyglądał ładnie. Brzydki kod, który działa dobrze, jest w porządku dla większości menedżerów.
Nie mów tylko o tym, zrób to . Jeśli masz szczęście, że przyszedł po ciebie mały, niezależny projekt, zapytaj swojego menedżera, czy możesz to zrobić, używając stylu „UJS” jako pewnego rodzaju demonstracji. Kiedy będziesz gotowy, zrób przegląd kodu, w którym możesz wyjaśnić, jak to wszystko działa i dlaczego uważasz, że jest lepszy niż obecny styl.
Idealizm jest świetny, ale nie pozwól mu przeszkodzić. Bardziej ważne jest, aby być postrzeganym jako ktoś, kto robi rzeczy, niż dyletant, który narzeka na nieokrzesany styl kodowania. Jest to szczególnie prawdziwe, jeśli jesteś nowym facetem. Jeśli nie możesz teraz uzyskać przyczepności za pomocą UJS, zrób dobrą robotę i powoli buduj uzasadnienie zmian, które chcesz wprowadzić, gdy zyskasz wiarygodność.
Czytaj Przełącznik: Jak zmieniać rzeczy, gdy zmiana jest trudna . To da ci o wiele więcej dobrych pomysłów na to, jak skutecznie zbudować swoją skrzynkę.
źródło
Co możesz zrobić, to dać im demonstrację debugowania html USJ za pomocą narzędzi FireQuery, jak również kwerendy Chrome .
FireQuery to rozszerzenie firebuga, które wykonuje całkiem dobrą robotę. Jeśli chodzi o Zapytanie Chrome, nie mogę ręczyć za to, ile jest dobre, ale zdecydowanie jest używane przez niektórych deweloperów ( post w stackoverflow ).
Wiedz również, że
.datafunkcja została usunięta, aby zwrócić wewnętrzne dane zdarzenia od jQuery 1.8.0 , i zastąpiona przez nią$._data(element, "events")może być niestabilna, zgodnie z oficjalnym dziennikiem zmianAKTUALIZACJA:
Kiedy zacząłem pracować, miałem ten sam dylemat. Ale po stworzeniu wersji demo z w pełni funkcjonalnym GUI (aplikacja jednostronicowa), która zawierała dynamicznie otwierające się zakładki (również zamykane), menu Accordion (dynamicznie tworzone z db), w końcu zrozumieli, że lepiej jest korzystać z USJ przez całą drogę.
Zaletą używania USJ jest również to, że można zminimalizować całą aplikację w małym (nieczytelnym) skrypcie. Pokaż im również skrypty dla google.com / github.com (jako przykład) i zwróć uwagę, że nawet oni mają skompresowany kod, co zawsze jest lepsze, ponieważ osoba przeglądająca witrynę będzie miała trudności z odkodowaniem wad bezpieczeństwa i wykorzystaj je, aby rozpocząć pełnoprawny atak na twoją stronę (przestraszyć ich), nawet jeśli jest to mało prawdopodobne.
AKTUALIZACJA 2 :
Przy okazji, nie wiedziałem, że robię USJ, dopóki nie zobaczyłem tego pytania, więc dziękuję w jeden sposób.
źródło
Inline uchwyty zdarzeń śmierdzą, ponieważ:
Brak delegowania zdarzeń - co jest świetne, gdy chcesz dynamicznie zgrywać elementy na i ze strony bez konieczności ponownego wiązania.
Zachowujesz zachowanie z tagami HTML, a nie z atrybutami class / ID tagów HTML. Załóżmy, że masz klasę „combo_box” we wszystkich aplikacjach. Nagle, na połowie twoich starych stron, chcesz niewielkich zmian w polach kombi, gdy są one w innym pojemniku. W powiązaniu z klasą możesz zmienić to zachowanie w oparciu o kontekst kontenera, np
"#special_container .combo_box". Wewnątrz przeklętego kodu HTML można znaleźć śledzenie każdego małego pola wyboru za pomocą klasy .combo_box na dowolnej stronie liczbowej, aby zmieniać odniesienia do procedur obsługi jeden po drugim, zamiast poprawiać lub pisać kilka nowych wierszy kodu w celu odfiltrowania z pojedynczej lokalizacji pliku .Jeśli chcesz mieć wiele programów obsługi, zawiń je w funkcję, a następnie niepotrzebnie powiąż z określonymi plikami HTML. Jak to jest łatwe do utrzymania?
Subtelniejsze jest to, że jest znacznie łatwiej / łatwiejsza w utrzymaniu / elastyczna i solidna w obsłudze, zachowując większą mentalność panelu sterowania. Łącząc się z centralnej lokalizacji, masz miejsce, w którym możesz uzyskać przegląd wszystkich zachowań zachodzących na stronie w tym samym czasie, co jest przydatne, gdy na przykład musisz dowiedzieć się, dlaczego niektóre strony czasami się wyświetlają w pewien błąd, który jest trudny do zrozumienia, ale nie dla innych.
To jest po stronie klienta. Mamy wiele przeglądarek, które interpretują dużą złożoność na własne sposoby. Nałóż to wszystko razem i pozwól IDE to załatwić, bo mentalności tutaj nie działają dobrze. Utrzymywanie kodu w stanie ścisłym, minimalnym, luźno powiązanym i czystym nie jest modne, jest absolutnie niezbędne w celu ustanowienia łatwego w utrzymaniu interfejsu, który można łatwo modyfikować i aktualizować, i tak, oto gdzie $$$ przyszedł, zakładając, że twój menedżer ma dalekowzroczność .
To już nie jest! @ # $ Ing 2002. Ten argument jest tak stary jak tabele jak układ. Porzuć to i zacznij ufać doświadczonemu twórcy wyspecjalizowanemu po stronie klienta, którego sam wyraźnie zatrudniłeś, ponieważ brakowało Ci ich wiedzy (nie dlatego, że kieruję gniew z własnego doświadczenia lub czegokolwiek).
Aby obalić argument szefa, naprawdę nietrudno jest wyśledzić, jaka klasa lub identyfikator jest używany w delegowaniu zdarzeń lub powiązaniu modułu obsługi za pomocą CTRL + F i narzędzia, które pozwala wyświetlać wszystkie JS na stronie jak moja osobista żenująca jquery / tylko prototypowa wersja bookmarkletu Pospiesznie się połączyłam, gdy pasek narzędzi web dev zaczął się na mnie nakładać (przeklęte kodowanie kolorami). Dodaj zakładkę do linku na stronie skrzypiec js lub skopiuj JS i stwórz własny.
Łącze skrzypcowe JS, które prawdopodobnie wygasa
źródło
Jedną z głównych zalet proponowanej techniki jest to, że musisz powiązać tylko jeden raz program obsługi zdarzeń z rodzicem, takim jak „dokument”, a ten program obsługi będzie w stanie wychwycić zdarzenia pochodzące od wszystkich dzieci, które spełniły zadany selektor, np. „Button.anyclass” „. Oszczędza pamięć i jest łatwa w utrzymaniu, tak że potrzebuje tylko jednej instancji edycji i wpływa na wszystkie elementy.
Jeśli chodzi o niemożność natychmiastowego rozpoznania funkcji powiązanej, Twój zespół mógłby po prostu ujednolicić sposób deklarowania takich funkcji prawdopodobnie w dolnej części strony. Tak więc wszyscy wiecie, gdzie patrzeć, konwencja nazewnictwa jest również bardzo ważna. Komentarze byłyby bardzo korzystne, ale upewnij się, że są usuwane przez serwer, zanim będą służyć jako odpowiedź dla przeglądarki.
Ponadto, jeśli chcesz zapewnić zaciemnianie i minimalizację javascript dla celów bezpieczeństwa, Twoja technika umożliwi to, w przeciwieństwie do starego stylu, którego nadal używa Twój zespół.
źródło
Oczywistą odpowiedzią jest to, że można przypisać tylko jedną funkcję do przycisku za pomocą atrybutu onclick, natomiast zdarzenie JQuery umożliwia powiązanie wielu funkcji. Typowy problem ze zdarzeniem onload: jeśli dokument składa się z więcej niż jednego pliku, często dochodzi do kolizji.
Innym rozwiązaniem, które może usatysfakcjonować zarówno ciebie, jak i twojego szefa, jest użycie wiązania danych, z biblioteką taką jak Knockout lub Angular, która śledziłaby zmiany w twoim widoku i eliminowała potrzebę dużej części programów obsługi zdarzeń.
źródło