Warum sollten Ihre JavaScript-Skripte in index.html in jQuery Mobile-Projekten enthalten sein?-js-Tutorial-php.cn

Warum sollten Ihre JavaScript-Skripte in index.html in jQuery Mobile-Projekten enthalten sein?

Mary-Kate Olsen

Freigeben： 2024-11-11 22:19:02

Original

385 Leute haben es durchsucht

Why Should Your JavaScript Scripts Be Included in index.html in jQuery Mobile Projects?

Warum sich Ihre Skripte in index.html in jQuery Mobile befinden müssen

In jQuery Mobile-Projekten kann es bei der Umleitung zwischen Seiten mithilfe von $.mobile.changepage zu Verwirrung kommen . Unerwarteterweise werden Skripte von der umgeleiteten Seite nicht ausgeführt, sodass Sie keine Ahnung haben.

Die Seitenverarbeitung von jQuery Mobile verstehen

Um diese Situation zu verstehen, ist es wichtig, den Seitenverarbeitungsmechanismus von jQuery Mobile zu verstehen. Es verwendet AJAX, um nachfolgende Seiten zu laden. Während die erste Seite konventionell geladen wird, erhalten nachfolgende nur ihren BODY-Inhalt (insbesondere das erste DIV mit einem data-role="page"-Attribut), während der HEAD-Inhalt ignoriert wird.

Das bedeutet, dass Skripte Der im BODY-Inhalt der umgeleiteten Seite definierte Befehl wird nicht ausgeführt. Der Grund dafür ist, dass ihr übergeordneter HEAD, der die notwendigen Bibliotheken enthält, während des Seitenübergangs nicht geladen wird.

Lösung 1: Skripte in den Text einschließen

Um dieses Problem zu beheben, verschieben Sie das SCRIPT-Tag für die umgeleitete Seite in ihren BODY-Inhalt:

<body>
    <div data-role="page">
        // Other HTML content
        <script>
            // Javascript code
        </script>
    </div>
</body>

Nach dem Login kopieren

Obwohl diese Lösung funktioniert, kann sie möglicherweise den HTML-Code mit mehreren SCRIPTs überladen Tags.

Lösung 2: Skripte in index.html konsolidieren

Ein besserer Ansatz besteht darin, die gesamte JavaScript-Logik in index.html zu zentralisieren, indem Sie sie in eine separate JS-Datei im HEAD einfügen:

<head>
    <meta name="viewport" ...>
    <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css">
    <script src="jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Custom JS file
</head>

Nach dem Login kopieren

Warum index.html von größter Bedeutung ist

Während Lösung 2 Skripte konsolidiert, bleibt es wichtig, sie einzubeziehen sie in index.html. Dies liegt vor allem an der fehlerhaften Natur von Phonegap. Im Falle eines Fehlers aktualisiert Phonegap möglicherweise die aktuelle Seite und verliert dabei ihr DOM. Jeglicher JavaScript-Code, der nicht im HEAD der aktualisierten Seite vorhanden ist, wird nicht ausgeführt.

Durch die Zentralisierung von Skripten in index.html werden die erforderlichen Bibliotheken immer im HEAD geladen, wodurch eine unterbrechungsfreie Funktionalität auch nach möglichen Phonegap-Fehlern gewährleistet wird .

Das obige ist der detaillierte Inhalt vonWarum sollten Ihre JavaScript-Skripte in index.html in jQuery Mobile-Projekten enthalten sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!