Bagaimanakah Saya Boleh Memasukkan Fail JavaScript dalam Projek Web Saya?

Termasuk Fail JavaScript: Melangkaui @Import

Walaupun @import biasanya digunakan dalam CSS untuk memasukkan lembaran gaya luaran, JavaScript tidak menyokong a mekanisme yang serupa. Dari masa ke masa, pelbagai kaedah telah muncul untuk menangani keperluan ini.

Modul ES6 (Disyorkan)

Sejak 2015, JavaScript telah menerima modul ES6, menyediakan cara yang standard untuk mengimport modul. Pendekatan ini disokong oleh kebanyakan penyemak imbas moden dan Node.js.

Untuk menggunakan modul ES6, cipta fail module.js dengan fungsi eksport:

export function hello() {
  return "Hello";
}

Dalam fail lain, import modul dan gunakan fungsinya:

import { hello } from './module.js';
let val = hello();  // val is "Hello";

Node.js Memerlukan

Untuk Node.js, gaya modul tradisional ialah sistem module.exports/require.

Buat modul mymodule.js:

module.exports = {
   hello: function() {
      return "Hello";
   }
}

Gunakan modul dalam fail lain:

const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

AJAX Memuatkan

Permintaan AJAX boleh digunakan untuk memuatkan skrip JavaScript secara dinamik. Walau bagaimanapun, fungsi ini terhad kepada domain yang sama kerana sekatan keselamatan. Menggunakan eval untuk menjalankan skrip sedemikian adalah tidak digalakkan kerana potensi risiko keselamatan.

Fetch Loading

Sama seperti Dynamic Imports, pustaka Fetch Inject membenarkan memuatkan berbilang skrip melalui fetch dan mengawal susunan pelaksanaan menggunakan janji.

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Pemuatan jQuery

jQuery menawarkan kaedah yang dipermudahkan untuk memuatkan skrip luaran:

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Pemuatan Skrip Dinamik

Teknik ini melibatkan mencipta tag skrip dengan yang dikehendaki URL dan menyuntiknya ke dalam dokumen HTML.

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}

Mengesan Pelaksanaan Skrip

Apabila memuatkan skrip secara tidak segerak, terdapat kelewatan sebelum skrip dilaksanakan. Untuk mengesan apabila skrip telah selesai dimuatkan, pertimbangkan untuk menggunakan panggilan balik berasaskan peristiwa atau pendekatan yang dicadangkan dalam pautan yang disediakan dalam jawapan asal.

Gabung/Praproses Kod Sumber

Alat binaan moden seperti Parcel, Webpack dan Babel boleh menggabungkan berbilang fail JavaScript, menggunakan transformasi dan menyediakan keserasian merentas penyemak imbas. Ini membolehkan pembangun menggunakan ciri JavaScript lanjutan dan memperkemas aliran kerja pembangunan mereka.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memasukkan Fail JavaScript dalam Projek Web Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!