Jak/kiedy/gdzie dodać zewnętrzne javascript

Question

Poszukuję porad na temat najlepszego sposobu przechowywania moich funkcji JavaScript (jQuery).

Pracuję w MVC/maszynce do golenia i dlatego mam stronę układu. Załączam tutaj moją bibliotekę jQuery i zewnętrzny plik JavaScript, aby była dostępna na każdej stronie.

Działa to dobrze, ale teraz zdaję sobie sprawę z tego, że dodaję prawie 300 linii JS do KAŻDEJ strony, gdzie może połowa z nich jest używana na którejkolwiek z tych stron.

Jedna funkcja nie znajduje się w pliku zewnętrznym i zamiast tego znajduje się w kodzie HTML, ponieważ potrzebuję użyć zmiennych ustawionych w moim kodzie.

mam kilka pytań wokół tej aranżacji:

• jest umieszczenie wewnątrz JS HTML ogólnie akceptowalnym kiedy ustawić za pomocą brzytwy używane są zmienne? Wydaje się, że nie ma czystej metody przekazywania zmiennej do zewnętrznego pliku js.
• Czy powinienem podzielić moje funkcje na pojedyncze pliki JS i uwzględnić tylko to, co jest potrzebne dla każdej strony w witrynie?
• Jeśli miałbym podzielić je na wiele plików, jak by to działało z jQuery's (document).ready? Czy muszę go użyć, jeśli ma być używany cały JavaScript, który dołączam?

Jestem pewien, że będzie to bardziej kwestia opinii niż czarno-biała odpowiedź, ale chcę rozważyć wszystkie moje opcje, zanim przejdę dalej. Mimo że działa dobrze, jak jest, nie mogę pomóc, ale czuję, że jest lepszy/czystszy sposób.

Answer 1

Pamiętaj, że gdy użytkownik znajdzie się na Twojej stronie głównej i załaduje plik javascript, zostanie on zbuforowany w przeglądarce, aby kolejne strony nie pobiegły ponownie.

Zdecydowanie zachowałbym oddzielne js, na każdej stronie mógł istnieć fragment kodu inicjujący JS, którego potrzebuje ten widok. Umieścić coś jak poniżej w widoki, które trzeba uruchomić JS

$(document).ready(function() { 
    mysite.mypage(); 
}); 

wtedy mysite.mypage function() może być zdefiniowane w zewnętrznym pliku JS. 300 linii nie jest końcem świata, powiedziałbym, że prawdopodobnie jest zbyt wcześnie, aby martwić się optymalizacją.

Zawsze można rozważyć zminimalizowanie pliku JS w celu zmniejszenia rozmiaru. Szybki i łatwy sposób, aby to zrobić jest tutaj:

http://www.minifyjavascript.com/

Answer 2

Czy kiedykolwiek słyszał o require.js? http://requirejs.org/ Uważam, że to naprawdę przydatne.

Jest to program ładujący moduły, dzięki czemu można podzielić cały kod JS na pojedyncze pliki i załadować tylko te, które są potrzebne na każdej stronie.

Nie wiem o przekazywaniu zmiennej do zewnętrznego pliku JS, nie sądzę, że jest to możliwe/"właściwy" sposób.

Każdy zewnętrzny plik JS można przekształcić w funkcję akceptującą i zwracającą parametry.Następnie na stronie należy go użyć: - uwzględnij zależność od pliku - zadzwoń do funkcji

To, co robię, wydaje się być Twoją drugą sugestią.

dla $ (document.ready) pytanie to naprawdę zależy od Ciebie. Nie musisz go używać, ale jest przydatny w niektórych sprawach, sprawdź ten przegląd: http://docs.jquery.com/Tutorials:Introducing_ $ (dokument) .ready()