JavaScript Best Practices: Wo sollte ich mein JavaScript einbinden?

Question

Ich baue eine Website mit PHP und JavaScript und ich habe das Gefühl, dass ich gut verstehe, wo ich mein JavaScript einbinden soll, aber eine spezifischere Situation ist aufgetreten, die mich verwirrt. Derzeit habe ich all mein JavaScript in einer externen Datei, die auf jeder PHP-Seite eingebunden wird.

Angenommen, ich habe einen Absatz mit der ID 'myParagraph' und ich möchte diesen Absatz beim Laden der Seite mit JavaScript rot hervorheben. Dieser Absatz befindet sich nur auf EINER PHP-Seite und meine Website hat etwa 50 verschiedene Seiten. Ich nahm sofort an, dass ich etwas Code in meine externe JavaScript-Datei werfen sollte, so etwas wie:

$('#myParagraph').css('color', 'red')

und der Absatz würde hervorgehoben werden, wenn die Seite geladen wird.

Meine Frage ist: Ist das der beste Weg, es zu tun? Nach meinem Verständnis wird bei jedem Laden einer Seite nach einem Element mit der ID myParagraph gesucht, obwohl 98% meiner Seiten diese ID überhaupt nicht haben. Ist das verschwenderisch? Sollte ich stattdessen den folgenden Code einbinden:

function highlightParagraph()
{
    $('#myParagraph').css('color', 'red')
}

in meine JavaScript-Datei und dann etwas Inline-JavaScript in die PHP-Datei mit der ID myParagraph einfügen, um die Funktion highlightParagraph() aufzurufen, wenn sie geladen wird? Auf diese Weise wird nur die eine Seite mit myParagraph durchsucht und hervorgehoben.

Ich habe das Gefühl, dass Option 2 die beste ist, aber ich lese die ganze Zeit, dass man kein Inline-JavaScript verwenden soll.

Bearbeitung: Mir ist bewusst, dass man in diesem Beispiel einfach CSS verwenden würde. Ich verwende es nur, um meine Frage deutlich zu machen.

Answer 1

Sie sollten eine "große" js-Datei mit den Infrastruktur-Funktionen haben und alle Seiten sollten darauf verweisen.

Dann sollte jede Seite auf eine andere js-Datei mit nur den relevanten Funktionen verweisen.
Die Vorteile der Verwendung externer js-Dateien sind:

1. Die Dateien werden nach dem ersten Download zwischengespeichert => Schnelleres Surfen.
2. Trennung der Anliegen, Sie halten die Präsentationsschicht von der Skriptschicht fern.

Ein weiterer wichtiger Hinweis:
Der beste Weg, CSS zu ändern, ist mit CSS... nicht mit Javascript.

Wenn Sie das Elementstyling bei DOM-Bereitschaft ändern, fügen Sie einfach die Elementdefinition hinzu

#myParagraph{color: red;}

Answer 2

Das Problem mit Inline-JavaScript ist, dass Sie vielleicht jetzt mit ein paar Zeilen anfangen, aber in ein paar Wochen oder Monaten wird es sich ansammeln und viel Inline-JavaScript sein. Das ist schlecht, weil Inline-JavaScript vom Browser nicht zwischengespeichert werden kann wie JavaScript-Dateien, die Sie mit </code> einbinden. Das ist schlecht, weil Sie viele Inhalte hinzufügen, die bei jedem Seitenaufruf vom Benutzer abgerufen werden, was die Serverbandbreite belastet und die Seitenauslastung für den Benutzer verlangsamt.</p> <p>Wenn es nur ein paar Selektoren sind, keine Sorge; Die darauf verschwendete Zeit wird keinen Browser zum Schwitzen bringen. Wenn es jedoch viel Code für eine andere Seite/Modul Ihrer Website wird, sollten Sie ihn möglicherweise in eine separate JavaScript-Datei aufteilen und nur diese Datei einbinden, wenn bestimmte Seiten geladen werden. Auf diese Weise wird der Browser diese Datei zwischenspeichern und Ihnen und dem Benutzer diese Bandbreite sparen.</p></x-turndown>

Answer 3

Ich wäre nicht allzu überrascht, wenn viele Leute nicht mit mir einverstanden wären (sogar gewaltsam), aber ich habe kein Problem damit, ein JavaScript-Tag mit einem spezifischen JavaScript für diese Seite im Header zu platzieren, wenn dies die Anzahl der Dateien oder die Gesamtkomplexität des Projekts reduziert. Die meisten Kernfunktionen, die überall ausgeführt werden, sollten natürlich in einer anderen Datei separiert werden, aber wenn es sich um eine einzelne Seite handelt, würde ich mich für Sauberkeit entscheiden.

Dasselbe gilt für CSS, wenn es spezifisch für diese Seite ist, setzen Sie einfach ein CSS-Tag im Header mit den spezifischen Änderungen, die sich von der Master-CSS-Datei unterscheiden. Übrigens, wie alle betonen, ist dies ein Fall, in dem Sie einfach nur CSS verwenden möchten.