Mengapa Skrip JavaScript Anda Perlu Disertakan dalam index.html dalam Projek Mudah Alih jQuery?-tutorial js-php.cn

Mengapa Skrip JavaScript Anda Perlu Disertakan dalam index.html dalam Projek Mudah Alih jQuery?

Mary-Kate Olsen

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

asal

352 orang telah melayarinya

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

Mengapa Skrip Anda Perlu Berada dalam index.html dalam jQuery Mobile

Dalam projek jQuery Mobile, anda mungkin mengalami kekeliruan apabila mengubah hala antara halaman menggunakan $.mobile.changepage . Secara tidak dijangka, skrip daripada halaman diubah hala gagal dilaksanakan, menyebabkan anda tidak tahu.

Memahami Pengendalian Halaman jQuery Mobile

Untuk memahami situasi ini, adalah penting untuk memahami mekanisme pengendalian halaman jQuery Mobile. Ia menggunakan AJAX untuk memuatkan halaman seterusnya. Walaupun halaman pertama dimuatkan secara konvensional, halaman berikutnya hanya menerima kandungan BODY mereka (khususnya, DIV pertama dengan atribut data-role="page"), manakala kandungan HEAD diabaikan.

Ini bermakna skrip yang ditakrifkan dalam kandungan BODY halaman yang diubah hala tidak akan dilaksanakan. Sebabnya ialah HEAD induk mereka, yang mengandungi perpustakaan yang diperlukan, tidak dimuatkan semasa peralihan halaman.

Penyelesaian 1: Sertakan Skrip dalam Badan

Untuk menyelesaikan isu ini, alihkan teg SCRIPT untuk halaman yang diubah hala ke dalam kandungan BODYnya:

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

Salin selepas log masuk

Walaupun penyelesaian ini berkesan, ia mungkin boleh mengganggu HTML dengan berbilang teg SCRIPT.

Penyelesaian 2: Satukan Skrip dalam index.html

Pendekatan yang lebih baik ialah memusatkan semua logik JavaScript dalam index.html dengan memasukkannya ke dalam fail JS yang berasingan dalam KEPALA:

<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>

Salin selepas log masuk

Mengapa index.html Diutamakan

Sementara Penyelesaian 2 menyatukan skrip, tetap penting untuk memasukkannya dalam index.html. Ini disebabkan terutamanya oleh sifat buggy Phonegap. Sekiranya berlaku ralat, Phonegap mungkin memuat semula halaman semasa, kehilangan DOMnya. Mana-mana kod JavaScript yang tidak terdapat dalam HEAD halaman yang dimuat semula tidak akan dilaksanakan.

Dengan memusatkan skrip dalam index.html, perpustakaan yang diperlukan sentiasa dimuatkan dalam HEAD, memastikan kefungsian tidak terganggu walaupun selepas kemungkinan ralat Phonegap .

Atas ialah kandungan terperinci Mengapa Skrip JavaScript Anda Perlu Disertakan dalam index.html dalam Projek Mudah Alih jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!