Die JavaScript / jQuery-Funktion meiner App ist in einer externen scripts.js -Datei enthalten. Es sieht im Allgemeinen so aus:
giraffe() wird nur für die Ansicht verwendet, die unter% co_de verfügbar ist%
/animal/giraffe wird nur für die Ansicht verwendet, die unter% co_de verfügbar ist%
elephant() wird nur für die Ansicht verwendet, die unter% co_de verfügbar ist %,
Aber alle 3 sollen auf der verfügbaren Ansicht /animal/elephant laufen. Dies ist ein rudimentäres Beispiel, aber dies ist der Grund dafür, sie alle in einer zebra() -Datei zu haben, abgesehen davon, HTTP-Anfragen auf ein Minimum zu beschränken.
Meine Frage ist, beeinflusst dies das JavaScript-Rendering? Obwohl /animal/zebra nicht verwendet wird (hat keine Elemente, an denen gearbeitet werden kann) auf /animal/all , wird es immer noch aufgerufen. Unterbindet js / jQuery die Funktion, wenn sie nichts zu tun findet? Ich bin sicher, dass das ganze Skript gelesen wird, und das braucht wahrscheinlich Zeit. Also, was ist der beste Weg, damit umzugehen?
Um Konflikte zu vermeiden, habe ich am Anfang der js-Datei Bedingungen erstellt, um nur die Funktionen auszuführen, die die aktive Seite benötigt:
%Vor%Dies ist etwas ausführlicher, als ich es möchte, aber es ist erfolgreich, diese Funktionen modular / konfliktfrei zu halten. Ich begrüße eine Verbesserung dieser Lösung.
Es wäre sicherlich besser, nur den Code auszuführen, den Sie brauchen. Es ist nicht so schwer. Die einzige kleine Kompliziertheit ist, Ihren Fall /animals/all zu behandeln. Wenn Sie Ihren gesamten Code in einer Datei speichern möchten, können Sie dies folgendermaßen tun:
Sie können diesen Code testen, indem Sie in Stack Overflow auf diese Art und Weise URLs eingeben und diesen Code dann in die JavaScript-Konsole einfügen:
Ссылка
Ссылка
Ссылка
Ссылка
Ссылка
Update: OK, Sie haben im Kommentar erklärt, dass die tatsächliche Situation etwas komplizierter ist. Ich werde diesen Code hier lassen, falls er für irgendjemanden nützlich sein sollte, aber für Ihre Situation sind Sie vielleicht näher an dem, was Sie mit dem Code, den Sie bereits haben, brauchen.
WRT die Frage, was eine Ihrer Tierfunktionen tun wird, wenn Sie auf einer Seite sind, die es nicht betrifft, hängt das natürlich davon ab, wie es codiert ist. Es kann erfolgreich nichts tun, oder es kann einen Fehler haben, oder?
Da wir über jQuery-Code sprechen, hier ein paar Beispiele. Angenommen, Sie haben Code, der nach einem Element nach ID sucht und dann davon ausgeht, dass das Element existiert:
%Vor% Auf einer Seite, auf der das Element #zebra vorhanden ist, protokolliert dieser Code das Attribut value . (Ich nehme zur Diskussion an, dass es ein Element ist, das einen Wert hat, wie ein Eingabeelement.)
Aber wenn #zebra nicht vorhanden ist, dann ist zebraElement undefined , und der Zugriff auf seine value wird fehlschlagen und im Debugger landen.
OTOH, wenn du das so codiert hast:
%Vor% es würde nicht fehlschlagen, wenn #zebra fehlt, es würde undefined erfolgreich drucken, ohne einen Fehler zu verursachen.
Wenn Sie Code verwenden, der $().each() verwendet, wird er normalerweise ohne Fehler ausgeführt, wenn die Elemente fehlen, weil er die Callback-Funktion einfach nicht ausführt:
Wenn keine Elemente mit class="animal" vorhanden sind, wird der Aufruf console.log() niemals erreicht. Es gibt also keinen Fehler, es macht einfach nichts.
Je nachdem, was Sie tun, kann dies eine völlig sinnvolle Möglichkeit sein, nur das gewünschte Verhalten auszulösen. Stellen Sie einfach sicher, dass Ihr Code die fehlenden DOM-Elemente behandelt, indem Sie nichts tun.
Lesen Sie auch Nick's Antwort , um weitere Informationen zu erhalten.
Und noch ein Update ... In dem Kommentar, den Sie erwähnt haben, haben Sie Klassennamen im body -Element abgetippt. Ein guter Weg, um das zu tun, wäre dem obigen Codebeispiel ähnlich. Sie brauchen für jedes Tier keine Bedingung, nur eine Schleife und eine einzige Bedingung:
Wenn Sie zum Beispiel <body class="giraffe zebra"> haben, ruft es die Funktionen animals.giraffe() und animals.zebra() auf.
Hier gibt es zwei Probleme. Einer davon ist, ob alle Funktionen geladen werden sollen, und der andere, ob sie alle laufen sollen. Die Frage, ob sie alle ausgeführt werden sollen (und einige Lösungen, um nur die Funktionen auszuführen, die Sie benötigen), wurde von Michael Geary in den anderen Antworten.
Also, sollten Sie sie alle laden? Sie müssen die Zeit abwägen, die benötigt wird, um eine größere Datei herunterzuladen, anstatt zusätzliche HTTP-Anfragen zu stellen. Mit nur drei "Gruppen" von Funktionen, die zwischen 3 Seiten geteilt werden (und eine Seite mit allen) und wenn Sie erwarten, dass der Benutzer die Seiten regelmäßig wechselt, würde ich mit einer Datei gehen.
Sobald Ihr Projekt sehr groß wird, sollten Sie etwas wie requirejs verwenden, um Ihre Skripte zu verwalten und asynchron zu laden. Wenn Sie Ihre js-Skripte asynchron laden, erhöht sich die Geschwindigkeit der Seite (und die wahrgenommene Geschwindigkeit der Seite) und wenn es Probleme gibt (besonders bei Skripten, die von Drittanbietern gehostet werden), wird Ihre Seite keine Hilfe bekommen. Sie können dies natürlich ohne eine Bibliothek tun:
Mit HTML5:
%Vor%Es gibt eine Million Möglichkeiten, asynchron mit reinem JS zu laden:
%Vor%Javascript ignoriert alle Funktionen, die nicht "aufgerufen" werden. Ie. Wenn Sie elephant () nicht auf einer anderen Seite als der Seite / elephant oder / all aufrufen, wird sie niemals verwendet und Sie erhalten auch keine Fehler.
Sie möchten jedoch möglicherweise keine Funktionen auf Seiten anzeigen, die nicht zum schnelleren Laden von Seiten verwendet werden. Ziehen Sie in Erwägung, JS-Dateien für bestimmte Seiten zu trennen oder bestimmte JS-Skripts von einem Back-End-Server wie PHP zu laden, um festzustellen, welche Funktionen benötigt werden.
Tags und Links javascript jquery function procedural-programming