4

How to Include a JavaScript File in another JavaScript File

 2 years ago
source link: https://www.laravelcode.com/post/how-to-include-a-javascript-file-in-another-javascript-file
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How to Include a JavaScript File in another JavaScript File

  7968 views

  2 years ago

Javascript

Use the export and import Statement

Since ECMAScript 6 (or ES6) you can use the export or import statement in a JavaScript file to export or import variables, functions, classes or any other entity to/from other JS files.

For example, let's suppose you've two JavaScript files named "main.js" and "app.js" and you want to export some variables and functions from "main.js" to "app.js". Then in "main.js" file you need to write the export statement (line no-9) as shown in the following example:

let msg = "Hello World!";
const PI = 3.14; 
 
function addNumbers(a, b) {
    return a + b;
}
 
// Exporting variables and functions
export { msg, PI, addNumbers };

And in "app.js" file you need to write the import statement (line no-1) as shown here:

import { msg, PI, addNumbers } from './main.js';
 
console.log(msg); // Prints: Hello World!
console.log(PI); // Prints: 3.14
console.log(addNumbers(5, 16)); // Prints: 21

Alternatively, you can use the jQuery getScript() method to load a JS file from the server, then execute it with a sigle line of code. Let's suppose you have a JS file "test.js" with the following code.

// Defining variables
var str = "Hi there!";
var num = 15;
 
// Defining a function
function multiplyNumbers(a, b) {
    return a * b;
}

Now you can load this "test.js" file in your script using the getScript() method, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Load JS File Demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <script>
    var url = "test.js";
    
    $.getScript(url, function(){
        $(document).ready(function(){
            console.log(str); // Prints: Hi there!
            console.log(num); // Prints: 15
            console.log(multiplyNumbers(4, 25)); // Prints: 100
        });
    });
    </script> 
</body>
</html>
Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]

</div


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK