JavaScript Dynamic Logic: So führen Sie verschiedene Codeblöcke basierend auf dem Jahr aus, anstatt die Skriptquelle zu ändern

In diesem Artikel werden effektive Möglichkeiten untersucht, um unterschiedliche Codelogik basierend auf dem Jahr in JavaScript dynamisch auszuführen. Als Reaktion auf das Problem, dass das direkte Ändern des SRC -Attributs des <script> -Tags den erwarteten Effekt nicht erreichen kann, schlägt der Artikel eine Lösung für die Definition unabhängiger Funktionen vor und zeigt bedingte Urteile, um diese Funktionen auf Bedarf zu nennen, um sicherzustellen, dass der Code in einem bestimmten Jahr korrekt ausgeführt wird und die Komplexität dynamischer Schriften vermieden wird.<h3> Verständnis der Herausforderungen des dynamischen Skriptladens<p> In der Webentwicklung müssen wir manchmal unterschiedliche JavaScript -Code basierend auf bestimmten Bedingungen (z. B. im aktuellen Jahr, Benutzerberechtigungen oder A/B -Testgruppen) ausführen. Ein intuitiver, aber oft ineffektiver Ansatz besteht darin, das SRC -Attribut des <script> -Tags, das bereits im HTML -Dokument vorhanden ist, dynamisch zu ändern. Obwohl das Ändern der DOM-Eigenschaft in dem Seiteninspektor widerspiegelt wird, kann der Browser ein geladenes <Script> -Tag in der Regel nicht verparkt und ausführt, selbst wenn seine SRC-Eigenschaft geändert wird. Dies liegt daran, dass der Browser die Parsen und Ausführung des Skripts abgeschlossen hat, wenn die Seite initialisiert und geladen wird, und anschließende SRC -Änderungen werden keinen neuen Lade- und Ausführungszyklus auslösen.<p> Betrachten Sie die Codestruktur für den folgenden ersten Versuch:<p> <strong>HTML -Struktur:<pre class="brush:php;toolbar:false"> &lt;script id = &quot;element1&quot; src = &quot;#&quot;&gt; &lt;/script&gt; &lt;script src=&quot;js/element-by-Jahr.js&quot;&gt; &lt;/script&gt;&lt;p&gt; &lt;strong&gt;JavaScript (Erstversuch):&lt;/strong&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; var jährlich = document.getElementById (&quot;element1&quot;); var refreshstatus = () =&gt; { const heute = neues Datum (); lass Jahr = heute.Getinging (); if (Jahr == 2022) { jährlich.src = &quot;js/change1.js&quot;; // Versuchen Sie, SRC zu ändern } if (Jahr == 2023) { jährlich.src = &quot;js/change2.js&quot;; // Versuchen Sie, SRC zu ändern } } // Refreshstatus () zum ersten Mal ausführen; // setInterval update (requestStatus, 86400000); // 86400000 Millisekunden = 1 Tag</pre> <p> Die Absicht des obigen Code ist, dass das Skript mit ID = "Element1", wenn das Jahr 2022 ist, JS/Change1.js laden sollte. Wenn das Jahr 2023 ist, laden Sie JS/Change2.js. Wie bereits erwähnt, funktioniert dieser Ansatz jedoch nicht wie erwartet. Obwohl Sie in den Browser -Entwickler -Tools sehen, dass sich das SRC -Attribut ändert, werden die relevanten JavaScript -Dateien nicht neu geladen oder ausgeführt.</p> <h3 id="Lösung-Funktionsaufrufe-basierend-auf-bedingten-Beurteilung"> Lösung: Funktionsaufrufe basierend auf bedingten Beurteilung</h3> <p> Um die Anforderung zu implementieren, unterschiedliche Codelogik basierend auf dem Jahr dynamisch auszuführen, besteht die zuverlässigste und empfohlenste Möglichkeit darin, alle möglichen Codelogik (oder in derselben Datei zu definieren) und dann die entsprechende Funktion anhand des bedingten Beurteils aufzurufen. Dieser Ansatz stellt sicher, dass der gesamte Code beim Laden der Seite analysiert wird, und wir steuern nur, welcher Codeblock zur Laufzeit ausgeführt wird.</p> <p> Das Folgende ist eine Optimierungslösung, um diese Funktion zu implementieren:</p> <p> <strong>HTML -Struktur:</strong> Der HTML -Teil wird präzise gehalten und benötigt kein leeres SRC -Skript -Tag mehr, um den Ort zu besetzen. Alle Logik wird über die Hauptdatei von JavaScript verwaltet.</p> <pre class="brush:php;toolbar:false"> &lt;script src=&quot;js/main-logic.js&quot;&gt; &lt;/script&gt;</pre> <p> <strong>JavaScript (Empfohlene Lösung):</strong> In unabhängige Funktionen in unabhängige Funktionen einbezeigt und in der Hauptlogik basierend auf dem laufenden Jahr aufrufen.</p> <pre class="brush:php;toolbar:false"> // Definieren Sie die Funktionsfunktion, die verschiedenen Jahren Funktion Element1 () {{entspricht // 2022 spezifische Logikkonsole.log (&quot;Die Logik von 2022 ausführen!&quot;); Alarm (&quot;Es ist 2022!&quot;); } Funktion element2 () { // 2023 Spezifische Logikkonsole.log (&quot;Die Logik von 2023 ausführen!&quot;); Alarm (&quot;Es ist 2023!&quot;); } /** * Aktualisieren Sie den Status gemäß dem laufenden Jahr und führen Sie die entsprechende Logik aus*/ aus var refreshstatus = () =&gt; { const heute = neues Datum (); lass Jahr = heute.Getinging (); if (Jahr === 2022) { Element1 (); // Ruf die Funktion von 2022} else if (Jahr === 2023) { Element2 (); // Rufen Sie die Funktion von 2023} else {auf {auf { // Optional: Behandeln Sie andere Jahre oder Standardkonsolen.log (`Das laufende Jahr ist $ {Jahr}, und es gibt keine spezifische Logik, die ausgeführt werden kann.&quot;); } } // einmal sofort ausführen, wenn die Seite geladen wird, um den Ausgangszustand Refreshstatus () festzulegen. // Stellen Sie den Timer ein und aktualisieren Sie es einmal am Tag (86400000 Millisekunden = 24 Stunden) // Hinweis: In tatsächlichen Anwendungen hängt die Logik nicht von Sekunden oder winzigen Änderungen ab, wenn die Logik nicht abhängt. // Laufen einmal am Tag reicht normalerweise aus, um einen unnötigen Ressourcenverbrauch zu vermeiden. setInterval (Refreshstatus, 86400000);</pre> <h3 id="Detaillierte-Erklärung-des-Plans-und-der-Vorsichtsmaßnahmen"> Detaillierte Erklärung des Plans und der Vorsichtsmaßnahmen</h3> <ol> <li> <strong>Funktionskapselung:</strong> Kapitelle der Codelogik aus verschiedenen Jahren in ihre jeweiligen Funktionen (z. B. Element1 () und Element2 ()). Dies verbessert die Lesbarkeit, Modularität und Wartbarkeit des Codes.</li> <li> <strong>Bedingte Beurteilung:</strong> Die Refreshstatus -Funktion ist verantwortlich, um das laufende Jahr zu erhalten und die IF ... sonst zu verwenden, um zu bestimmen, welche Funktionsfunktion aufgerufen werden sollte. Es ist eine gute Praxis, === für strenge Gleichstellungsvergleiche zu verwenden.</li> <li> <strong>Sofortige Ausführung und zeitgesteuerte Aktualisierung:</strong><ul> <li> Refreshstatus () ;: Führen Sie einmal nach dem Laden des Skripts einmal aus, um sicherzustellen, dass die Seite die richtige Logik anwendet, wenn sie geladen wird.</li> <li> setInterval (Refreshstatus, 86400000);: Setzen Sie einen Timer und rufen Sie die Refreshstatus -Funktion jeden Tag erneut auf (86400000 Millisekunden). Dies ist sehr nützlich für Szenen wie Silvester, in denen die Logik aktualisiert werden muss.</li> </ul> </li> <li> <strong>CODE -Wartbarkeit:</strong> Wenn das Jahr zunimmt, fügen Sie einfach eine neue Notwendigkeit hinzu, wenn Sie in der Funktion "RefreshStatus" -Funktion und der entsprechenden Funktionsfunktion sind.</li> <li> <strong>Leistungsüberlegungen:</strong> Diese Methode vermeidet Netzwerkanforderungsaufwand und potenzielle asynchrone Ladeprobleme, die durch dynamische Ladedateien verursacht werden. Alle erforderlichen Code sind bei der ersten Last verfügbar, außer dass der Ausführungspfad unterschiedlich ist.</li> <li> <strong>Alternativen (fortgeschritten):</strong><ul> <li> <strong>Skriptelemente dynamisch erstellen:</strong> Wenn Sie eine brandneue JS -Datei dynamisch dynamisch laden müssen, können Sie ein neues <script> -Element über document.createelement (&#39;script&#39;) erstellen, seine SRC festlegen und dann dem DOM (z. B. document.head.Appendchild (Scriptumlement) hinzuzufügen). Diese Methode löst neue Netzwerkanforderungen und Skriptausführung aus. Sie müssen jedoch darauf achten, den Ladestatus des Skripts zu verwalten und doppelte Laden zu vermeiden.</script>

Modular Loader: Für komplexere Anwendungen können Sie modulare Lader wie RequestJS und WebPack verwenden, um JS -Module auf Bedarf zu laden.

Zusammenfassen

Wenn Sie dynamisch unterschiedliche Codelogik in JavaScript gemäß den Laufzeitbedingungen (z. B. Jahr) ausführen müssen, ist die direkte Änderung des SRC -Attributs des vorhandenen <script> -Tages in der Regel ungültig. Die beste Praxis besteht darin, alle möglichen Logik in unabhängige Funktionen zu integrieren und diese Funktionen durch bedingtes Urteilsvermögen in der Hauptkontrolllogik aufzurufen. Diese Methode gewährleistet nicht nur die korrekte Ausführung des Codes, sondern verbessert auch die Wartbarkeit und Leistung. Dies ist eine empfohlene Möglichkeit, ein solches dynamisches Verhalten zu erreichen.</script>

Das obige ist der detaillierte Inhalt vonJavaScript Dynamic Logic: So führen Sie verschiedene Codeblöcke basierend auf dem Jahr aus, anstatt die Skriptquelle zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!