How Can I Include JavaScript Files in My Web Projects?

Including JavaScript Files: Beyond @Import

While @import is commonly used in CSS to include external stylesheets, JavaScript does not natively support a similar mechanism. Over time, numerous methods have emerged to address this need.

ES6 Modules (Recommended)

Since 2015, JavaScript has embraced ES6 modules, providing a standardized way to import modules. This approach is supported by most modern browsers and Node.js.

To utilize ES6 modules, create a module.js file with an export function:

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

In another file, import the module and use its function:

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

Node.js Require

For Node.js, the traditional module style is the module.exports/require system.

Create a mymodule.js module:

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

Use the module in a different file:

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

AJAX Loading

AJAX requests can be used to dynamically load JavaScript scripts. However, this functionality is limited to the same domain due to security restrictions. Using eval to run such scripts is discouraged due to potential security risks.

Fetch Loading

Similar to Dynamic Imports, the Fetch Inject library allows for loading multiple scripts via fetch and controlling the order of execution using promises.

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

jQuery Loading

jQuery offers a simplified method to load external scripts:

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

Dynamic Script Loading

This technique involves creating a script tag with the desired URL and injecting it into the HTML document.

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

Detecting Script Execution

When loading scripts asynchronously, there is a delay before the scripts are executed. To detect when a script has finished loading, consider using event-based callbacks or the approach suggested in the link provided in the original answer.

Source Code Merge/Preprocessing

Modern build tools like Parcel, Webpack, and Babel can combine multiple JavaScript files, apply transformations, and provide cross-browser compatibility. This allows developers to use advanced JavaScript features and streamline their development workflow.

The above is the detailed content of How Can I Include JavaScript Files in My Web Projects?. For more information, please follow other related articles on the PHP Chinese website!