Eine Lösung, um jQuery & JS am Ende des HTML einzuschließen, während gleichzeitig eine Steuerung, die in der Mitte eingefügt wird, $(document).ready erfordert

Question

Ich baue eine Website mit ASP.NET MVC und JQuery.
Als bewährte Praxis ist bekannt, dass das Einbinden von JavaScript am Ende der HTML-Seite erfolgen sollte.
Also schließe ich im Grunde genommen jquery.js und andere JS-Dateien am Ende des HTMLs vor dem /body-Tag ein.
Jetzt habe ich einige Steuerelemente, die als Partials in die Seite eingebunden sind und Funktionalität zu $(document).ready hinzufügen müssen.
Aber wenn ich den Code als Script-Tag im Partial schreibe, wird die Jquery-Bibliothek zu diesem Zeitpunkt nicht einmal eingebunden und ich kann dieses JavaScript nicht am Ende des HTMLs aus dem Partial heraus einfügen. Da das Partial in der Mitte des HTMLs eingebunden ist.

Answer 1

Alle JavaScript in eine Datei verschieben (Sie können die jQuery-Datei ausschließen) und nach unten verschieben.

Wenn Sie von bewährter Praxis sprechen, dann ist das Schreiben von Inline-Javascript auch keine gute Praxis.

Also würde ich vorschlagen, all Ihren JavaScript-Code in eine Datei zu verschieben, es gibt viele Tools verfügbar, die mehrere JavaScript-Dateien zusammenführen und sie komprimieren, verwenden Sie diese!!

Bearbeiten1

Sie können dies ausprobieren:

//definieren Sie dies vor dem Body (oder am Anfang des Body)
var arrReadyCollection = [];

In den Controllern:

arrReadyCollection.push(site.module.Dialog_AcceptChanges);
arrReadyCollection.push(some_thing_Else);

Am Ende, nach der jQuery-Datei

for (i=0;i

`

Hinweis: Dies ist nicht die empfohlene Methode, es ist nur eine Möglichkeit, Ihr Problem zu lösen

`

Answer 2

Du solltest einen Javascript-Loader wie LABjs verwenden.

Du kannst es verwenden, um Javascript auszuführen, wenn bestimmte Bibliotheken geladen und ausgeführt werden.

    // $LAB verwendet asynchrones Laden, es ist nicht notwendig, bis zum Ende des Body zu warten
    // Es ist wichtig, eine Referenz auf das $LAB-Deferred beizubehalten, damit wir
    // es auch innerhalb von Teilen (siehe unten) verwenden können
    myPage.$LAB = $LAB
      .script('someScript.js')
      .script('someOtherScript.js')
      .wait(function () {
        // Ihre Skripte sind geladen!
      });

In Ihren Teilen können Sie sich in LABjs einbinden, z.B. so:

  myPage.$LAB.script('jQuery.js').wait(function () {
    // jQuery wurde geladen!
    // Wenn jQuery bereits durch einen anderen Teil oder Ihr Hauptlayout geladen wurde
    // wird es nicht erneut geladen, aber der Callback wird sofort ausgeführt!
  });

Das gesagt, sollten Sie wirklich den Ratschlag von Praveen befolgen und Ihre Javascript-Dateien so weit wie möglich verbinden. Jede Anfrage an Ihren Server kostet Zeit und verringert die Reaktionsfähigkeit Ihrer Website.

Answer 3

Entweder reparieren Sie Ihre "control" Dateien, so dass sie kein Inline-JavaScript benötigen, oder fügen Sie jQuery am Anfang der Datei ein.

Sie könnten auch eine kleine "$" Funktion schreiben, die Sie vor jQuery (und ganz oben) einfügen würden. Sie sollten jedoch besser diese Steuerelemente reparieren.

Answer 4

Eine weitere mögliche Lösung wäre, ein Skript-Tag dynamisch innerhalb des Teils hinzuzufügen. Dies könnte jedoch unübersichtlich werden, wenn Sie mehr als ein paar Codezeilen ausführen möchten, z. B .:

~~var script = document.createElement('script'); script.innerHTML = "$(document).ready(function () { doSomething(); });"; document.body.appendChild(script);~~

Dies sollte nach dem Laden und Ausführen von jQuery (das bereits irgendwo am Ende des Body stehen sollte) ausgeführt werden.

UPDATE: Dies funktioniert nicht, ich habe angenommen, dass das Einfügen von Skriptelementen in einem DOM, das noch nicht bereit ist, nicht ausgeführt wird, bevor der DOM bereit ist.

Answer 5

Verwenden Sie CDNs und hören Sie auf, sich über zweifelhafte Optimierungen zu beunruhigen. Aus dem ausgezeichneten jQuery in Action Buch, Kapitel 1.22

HINWEIS Aus Leistungsgründen können Skript-Blöcke auch am Ende des Dokumentenkörpers platziert werden, obwohl moderne Browser den Leistungsunterschied ziemlich unbedeutend machen. Das wichtige Konzept besteht darin, Verhaltenselemente nicht in Strukturelemente einzubetten.