Dlaczego powinienem unikać skryptów wbudowanych?

Znajomy znajomy niedawno przejrzał witrynę, którą pomogłem uruchomić, i skomentował coś w stylu „bardzo fajna strona, szkoda wbudowanych skryptów w kodzie źródłowym”.

Zdecydowanie jestem w stanie usunąć wbudowane skrypty tam, gdzie występują; Mam niejasną świadomość, że to „zła rzecz”. Moje pytanie brzmi: jakie są prawdziwe problemy ze skryptami wbudowanymi? Czy występuje poważny problem z wydajnością, czy jest to głównie kwestia dobrego stylu? Czy mogę uzasadnić natychmiastowe działanie przełożonego przed moim skryptem przed przełożonymi, gdy istnieją inne rzeczy, nad którymi można pracować, które mogą mieć bardziej oczywisty wpływ na witrynę? Jeśli podciągnąłeś się na stronę internetową i rzuciłeś okiem na kod źródłowy, jakie czynniki skłoniłyby cię do powiedzenia „hmm, profesjonalna praca tutaj”, a co spowodowałoby oderwanie się od oczywiście amatorskiej pracy?

Okej, pytanie to przerodziło się w wiele pytań na piśmie. Ale w zasadzie skrypty wbudowane - o co chodzi?

jakie są prawdziwe problemy ze skryptami wbudowanymi? Czy występuje poważny problem z wydajnością, czy jest to głównie kwestia dobrego stylu?

Korzyści nie są oparte na wydajności, są one (jak zauważył Michael w swoim komentarzu) bardziej związane z oddzieleniem widoku i kontrolera. Najlepiej, aby plik HTML / CSS zawierał tylko prezentację, a do skryptów należy używać osobnych plików. Ułatwia to Tobie (i rówieśnikom) czytanie i utrzymywanie aspektów wizualnych i funkcjonalnych.

Czy mogę uzasadnić natychmiastowe działanie przełożonego przed moim skryptem przed przełożonymi, gdy istnieją inne rzeczy, nad którymi można pracować, które mogą mieć bardziej oczywisty wpływ na witrynę?

Nie, prawdopodobnie nie. Bardzo trudno jest przekonać moce, które są czystą pracą konserwacyjną, nawet jeśli uważasz, że pozwoli to zaoszczędzić im pieniądze na dłuższą metę. Jednak w tym przypadku nie uważam, aby było tak ważne, abyś zatrzymał wszystko i pozbył się wbudowanych skryptów. Zamiast tego upewnij się, że podejmujesz świadomy wysiłek, aby naprawić obszary podczas pracy nad nimi z innych powodów. Kod refaktoryzacyjny powinien być czymś, co robisz regularnie, ale tylko trochę za jednym razem.

Jeśli podciągnąłeś się na stronę internetową i rzuciłeś okiem na kod źródłowy, jakie czynniki skłoniłyby cię do powiedzenia „hmm, profesjonalna praca tutaj”, a co spowodowałoby oderwanie się od oczywiście amatorskiej pracy?

Czynnikiem numer jeden, który powiedziałby mi, że nie jest profesjonalny, jest nadużywanie tabel lub div. Oto artykuł wyjaśniający, dlaczego nie należy ich nadużywać.

Nie będę adwokatem diabła, ale nie ma ścisłego związku między pracą amatorską a wbudowanym JavaScript. Zobaczmy kod źródłowy kilku najbardziej znanych stron internetowych:

• Google,
• Wikipedia,
• Microsoft,
• Cegła suszona na słońcu,
• Dell,
• IBM.

Każda strona główna korzysta z wbudowanego JavaScript. Czy to oznacza, że ​​wszystkie te firmy zatrudniają amatorów do tworzenia swoich stron domowych?

Jestem jednym z tych programistów, którzy nie mogą umieścić kodu JavaScript w HTML. Nigdy nie robię tego w projektach, nad którymi pracuję (z wyjątkiem prawdopodobnie niektórych wywołań, takich jak <a href="javascript:...">projekty, w których dyskretny JavaScript nie był od samego początku wymogiem, i zawsze usuwam wbudowany JavaScript, gdy zmieniam kod innej osoby. Ale czy warto ? Nie tak pewny.

Pod względem wydajności, nie zawsze masz lepszą wydajność, gdy wstawiasz JavaScript w osobnym pliku. Zwykle kusi nas, aby wziąć pod uwagę przepustowość JavaScript wbudowanego JavaScript, ponieważ nie można go buforować (z wyjątkiem sytuacji, gdy mamy do czynienia ze statycznym kodem HTML w pamięci podręcznej ). Przeciwnie, zewnętrzny plik .js jest ładowany tylko raz.

W rzeczywistości jest to tylko kolejna przedwczesna optymalizacja : możesz mieć rację, myśląc, że eksternalizacja JavaScriptu przyspieszy twoją stronę internetową, ale możesz również całkowicie się mylić:

• Co zrobić, jeśli większość użytkowników ma pustą pamięć podręczną?
• Czy uważasz, że w przypadku zewnętrznego pliku .js żądanie będzie wysyłane do tego pliku przy każdym żądaniu strony, jeśli witryna nie jest poprawnie skonfigurowana (i zazwyczaj tak nie jest),
• Czy plik .js naprawdę jest buforowany (w IIS może to nie być takie łatwe)?

Dlatego przed przedwczesną optymalizacją zbieraj statystyki dotyczące użytkowników i oceniaj wyniki z wbudowanym JavaScriptem i bez niego.

Potem pojawia się ostatni argument: zmieszałeś JavaScript i HTML w swoim źródle, więc ssiesz. Ale kto powiedział, że zmieszałeś oba? Kod źródłowy używany przez przeglądarkę nie zawsze jest kodem źródłowym, który napisałeś. Na przykład, kod źródłowy może być skompresowany, minified lub kilka CSS lub JS pliki mogą być połączone w jeden plik, ale to nie znaczy, że naprawdę nazywa zmienne a, b, c... a1, itd. Albo że napisałeś ogromny plik CSS bez spacji i znaków nowej linii. W ten sam sposób możesz łatwo wstrzyknąć zewnętrzny kod JavaScript do HTML w czasie kompilacji lub później za pomocą szablonów.

Podsumowując, jeśli miksujesz JavaScript i HTML w pisanym kodzie źródłowym, powinieneś rozważyć nie robienie tego w swoich przyszłych projektach. Ale to nie znaczy, że jeśli kod źródłowy wysłany do przeglądarki zawiera wbudowany JavaScript, zawsze jest źle.

• Może być źle.
• Przeciwnie, może to być znak, że strona została napisana przez profesjonalistów, którzy dbali o wydajność, wykonali określone testy i stwierdzili, że szybciej ich klienci będą mogli wbudować części JavaScript.
• Lub może to w ogóle nic nie znaczyć.

więc raczej wstyd osobie, która mówi „bardzo fajna strona, wstyd z powodu wbudowanych skryptów w kodzie źródłowym”, patrząc tylko na źródło wysłane do przeglądarki, nie wiedząc nic o tym, jak strona została wykonana.

Na ogół dobrze jest trzymać HTML i JS ogólnie oddzielnie. HTML jest dla widoku, JS dla logiki aplikacji. Jednak z mojego doświadczenia wynika, że ​​ekstremalne oddzielenie html i javascript (ze względu na czystość) nie czyni go łatwiejszym do utrzymania; może być mniej konserwowalny.

Na przykład czasami używam tego wzorca (pożyczonego z ASP.net) do konfigurowania procedur obsługi zdarzeń:

<input type="button" id="yourId" onclick="clickYourId()" />

lub

<input type="button" id="yourId" onclick="clickYourId(this)" />

Nie ma tajemnicy, co powoduje, że wydarzenie się wydarzy. Powodem jest to, że sześć miesięcy później możesz sprawdzić element (np. W Chrome) i od razu zobaczyć, jakie zdarzenie JavaScript zostanie uruchomione.

Z drugiej strony wyobraź sobie, że czytasz czyjś kod, który ma sto tysięcy linii, i napotykasz magiczny element, który odpala zdarzenie javascript:

<input id="yourId"  />

Jak możesz mi łatwo powiedzieć, jaką metodę javascript to wywołuje? Chrome to ułatwił, ale być może zdarzenie jest powiązane z identyfikatorem, a może z pierwszym dzieckiem kontenera. Być może zdarzenie jest dołączone do obiektu nadrzędnego. Kto wie? Powodzenia w znalezieniu go. :)

Argumentowałbym również, że całkowite ukrywanie javascript przed projektantem może faktycznie zwiększyć prawdopodobieństwo ich złamania podczas aktualizacji. Jeśli ktoś edytuje kod dla magicznie aktywnego elementu, jakie ma w kodzie wskazanie, które informuje go, że jest to aktywny element na stronie?

Krótko mówiąc, najlepszą praktyką jest oddzielenie HTML i JavaScript. Ale rozumiem również, że zasady praktyczne są nieproduktywne, gdy są doprowadzane do skrajności. Opowiadałbym się za podejściem na środkowej drodze. Unikaj dużych ilości wbudowanych plików js. Jeśli używasz wbudowanego, podpis funkcji powinien być bardzo prosty, taki jak:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)

Jednym z argumentów, których tutaj mi brakuje, jest możliwość zwiększenia ochrony przed atakami skryptowymi między witrynami .

Możliwe jest wyłączenie wykonywania wbudowanego JavaScript w nowoczesnej przeglądarce za pomocą Polityki bezpieczeństwa treści . Zmniejszyło to ryzyko, że Twoja witryna padnie ofiarą XSS. Może to być bardziej przekonujący argument, który powinien skłonić kierownictwo do zainwestowania w usunięcie wbudowanego skryptu.

Oto kilka powodów.

1. Skryptu wbudowanego nie można zminimalizować (przekonwertować na krótszą wersję poprzez redukcję symboli). Nie dotyczy to internetu szerokopasmowego, ale rozważ urządzenie mobilne w obszarze niskiej przepustowości lub użytkowników korzystających z globalnego roamingu danych - każdy bajt może się liczyć.

2. Skrypt wbudowany nie może być buforowany przez przeglądarkę, chyba że sama strona jest buforowalna (co byłoby bardzo nudną stroną). Zewnętrzne pliki JavaScript muszą być pobierane tylko raz, nawet jeśli zawartość strony zmienia się za każdym razem. Może poważnie wpłynąć na wydajność połączeń o niskiej przepustowości.

3. Skrypt wbudowany jest trudniejszy do debugowania, ponieważ numer linii związany z dowolnym błędem jest bez znaczenia.

4. Uważa się, że skrypt wbudowany ingeruje w względy dotyczące dostępności (508 / WAI), chociaż nie oznacza to, że cały skrypt wbudowany powoduje problemy. Jeśli skończysz z czytnikiem ekranu informującym o treści skryptu, masz problem! (Nigdy tego nie widziałem).

5. Skryptu wbudowanego nie można testować niezależnie od strony; zewnętrzne pliki Javascript mogą być uruchamiane przez niezależne testy, w tym testy automatyczne.

6. Skrypt wewnętrzny może prowadzić do słabego rozdzielenia problemów (jak opisano w wielu innych odpowiedziach tutaj).

Istnieje wiele powodów, które uzasadniałyby niewłączenie wbudowanego skryptu:

• Przede wszystkim oczywista odpowiedź - sprawia, że ​​kod jest czystszy, bardziej zwięzły, łatwiejszy do zrozumienia i czytania.

• Z praktycznego punktu widzenia często chcesz ponownie używać skryptów / CSS / itp. w całej witrynie - umieszczenie tych części oznaczałoby konieczność edytowania każdej strony za każdym razem, gdy wprowadzasz niewielką zmianę.

• Jeśli używasz SCM w swoim projekcie, to dobrze oddzielone różne komponenty ułatwią śledzenie zmian i zatwierdzanie dla wszystkich zaangażowanych.

O ile mi wiadomo, wydajność nie byłaby problemem. Zależy to od wielu rzeczy związanych z charakterem witryny, specyfikacjami serwera itp. Na przykład, jeśli twoja strona używa dużo javascript, twoja przeglądarka może buforować skrypty, co poprawiłoby wydajność, gdy kod jest podzielony na wiele plików. Z drugiej strony chciałbym pokusić się o stwierdzenie, że niektóre serwery mogą obsługiwać pojedynczy duży plik szybciej niż wiele mniejszych plików - w tym przypadku można argumentować, że brak rozdzielenia kodu jest lepszy pod względem wydajności.

Nie znam żadnych formalnych testów w tej dziedzinie, chociaż jest bardzo prawdopodobne, że ktoś je wykonał.

Na koniec powiedziałbym, że jest to kwestia dobrych praktyk bardziej niż czegokolwiek innego, a zalety w zakresie czytelności i organizacji (szczególnie wrt 2) sprawiają, że oddzielenie kodu w osobnych plikach jest znacznie lepszą opcją.

Odpowiedź naprawdę zależy od tego, jak używany jest kod wbudowany (przy założeniu javascript).

Zastosowaliśmy kombinację kodu wbudowanego, SSI (po stronie serwera), plików js i plików css, aby stworzyć pożądane efekty, a także ograniczyć wycieczki powrotne serwera dla zdarzeń onClick.

Tak więc dla kogoś, kto złoży ogólne stwierdzenie, że użycie „kodu wbudowanego” jest złe, bez pełnego zrozumienia, w jaki sposób jest stosowany, może wprowadzać w błąd.

Powiedziawszy to, jeśli każda strona ma tę samą kopię i wkleił kod javascript zamiast używać pliku js, to mówię, że to źle.

Jeśli każda strona ma własną kopię i wklejoną sekcję CCS zamiast pliku css, to mówię, że to źle.

Dużym obciążeniem jest także umieszczenie całej biblioteki js na każdej stronie, szczególnie jeśli żadna z funkcji nie jest używana na tej stronie.

Zamierzam założyć wbudowany javascript tutaj.

Trudno być pewnym bez obejrzenia kodu. Podejrzewam, że miał na myśli jedną z dwóch rzeczy:

1. Jesteś <script>rozrzucony po całej stronie
2. Wszystko, co JS znajduje się w nagłówku strony, a nie w plikach zewnętrznych

Pierwszy to zła decyzja projektowa. Rozłożenie skryptów w pliku źródłowym znacznie utrudnia utrzymanie strony, ponieważ musisz wyszukać dany skrypt. O wiele lepiej jest przechowywać cały ten kod w jednym miejscu (wolę na górze pliku źródłowego).

Co do drugiego - niekoniecznie jest to zła rzecz. Kod specyficzny dla strony powinien znajdować się na tej stronie. Jeśli masz zduplikowany kod między stronami, powinieneś go eksternalizować za pomocą <script src>. Następnie, gdy utworzysz nową stronę, możesz po prostu dołączyć ten plik, a wszelkie naprawione tam błędy nie będą musiały być ponownie odwiedzane.

Jednym z powodów, dla których NIE należy używać Javascript InLine (nawet onclick = „DoThis (this)” na przyciskach), jest to, że zamierzasz uczynić swoją aplikację internetową aplikacją Chrome. Jeśli więc planujesz przenieść swoją aplikację internetową do natywnej aplikacji Chrome, zacznij od NIE dołączania ŻADNEGO wbudowanego javascript. Wyjaśniono to na samym początku tego, co musisz zmienić (obowiązkowo) w swojej aplikacji internetowej, jeśli zamierzasz ją „Chrome-etize”.

Jakie są prawdziwe problemy ze skryptami wbudowanymi?

Skrypty wbudowane są złe i należy ich unikać, ponieważ utrudniają odczytanie kodu.

Kod trudny do odczytania jest trudny do utrzymania. Jeśli nie możesz go łatwo przeczytać i zrozumieć, co się dzieje, nie będziesz w stanie łatwo wykryć błędów. Jeśli jest trudny w utrzymaniu, zmarnuje więcej czasu później, gdy pojawią się problemy.

Trudność zwykle wynika z kodowania zagnieżdżonego. W następnym wierszu kodu jest problem, czy możesz go zauważyć?

<a onclick='alert("What\'s going wrong here?")'>Alert!</a>

Najlepiej, aby kod został napisany w sposób ułatwiający wykrycie błędu. Joel Spolsky napisał świetny artykuł, który podkreśla tę kwestię w 2005 roku . Przykłady kodu mogą przynieść znaczącą poprawę, ponieważ pokazują, że mają wiek 9 lat, ale podstawowa koncepcja wciąż jest silna: pisz kod w sposób, który ułatwia wykrywanie błędów.

Czy występuje poważny problem z wydajnością, czy jest to głównie kwestia dobrego stylu?

Skrypty wbudowane prowadzą do powtórzeń. Zamiast zmieniać jeden wiersz kodu, aby wpływał na 100 stron, prawdopodobnie będziesz musiał osobno zmienić 100 stron. To wraz ze słabą czytelnością poważnie wpływa na wydajność opiekuna . Czas programowania ma realny koszt, który wpływa na wynik finansowy firmy szybciej niż kilka milisekund od większości optymalizacji kodu. Z pewnością optymalizacja wąskich gardeł jest ważna, ale różnica wydajności kodu jest w tym przypadku znikoma.

Czy mogę uzasadnić natychmiastowe działanie przełożonego przed moim skryptem przed przełożonymi, gdy istnieją inne rzeczy, nad którymi można pracować, które mogą mieć bardziej oczywisty wpływ na witrynę?

Nie. Jeśli jest głupi i działa, to nie jest głupi.

Następstwem programowania jest: jeśli jest to głupi kod i działa, to nie jest głupi. Skoncentruj się na prawdziwych problemach, zanim spróbujesz naprawić coś, co nie jest zepsute. Gdy kod wbudowany w końcu potrzebuje aktualizacji, niezależnie od tego, czy zajmie to sześć godzin, sześć miesięcy, czy sześć lat, napraw kod w taki sposób, aby ułatwić jego późniejszą konserwację.

Jakie czynniki skłoniłyby cię do powiedzenia „hmm, profesjonalna praca tutaj” i co spowodowałoby oderwanie się od oczywiście amatorskiej pracy?

Wolę definiować „profesjonalistę” jedynie jako osobę, która otrzymuje wynagrodzenie za wykonanie zadania, niż zakładać, że posiadają jakąkolwiek znaczącą zdolność w tym, za co są wynagradzani. Wielu profesjonalistów z pewnością jest w stanie wykonać dobrą pracę, ale często przeraża mnie przerażenie straszną pracą, którą wykonali inni profesjonaliści, niż czymś, co wymyślił amator. Większość moich dotychczasowych prac dotyczyła ratowania projektów wraków pociągów, które zostały spartaczone przez pierwszych programistów, więc przebieg może być różny.

Biorąc to wszystko pod uwagę, ogólnie łatwo jest wybrać programowanie jakości dla przedsiębiorstw