Detailed explanation of import in JavaScript (with examples)

This article brings you a detailed explanation of import in JavaScript (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The import statement is used to import a binding exported by another module. Regardless of whether strict mode is declared, imported modules run in strict mode. The import statement cannot be used in embedded scripts.

Syntax

import defaultExport from “module-name”;
import * as name from “module-name”;
import { export } from “module-name”;
import { export as alias } from “module-name”;
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;

defaultExport

will refer to the name of the module's default export.

module-name

The module to be imported. This is usually a relative or absolute pathname to the .js file containing the module, and may not include the .js extension. Some packaging tools may allow or require the use of this extension; check your runtime environment to allow only single- and double-quoted strings.

name

The name of the module object that will be used as a kind of namespace when referenced.

export,exportN

The export name to be imported

alias,aliasN

will be referenced to specify The name of the import.

Description

The name parameter is the name of the "module object" that will use a namespace to reference the export. The export parameter specifies a single named export, while the import * as name syntax imports all exports.

Import the contents of the entire module

This inserts myModule into the current scope with all modules exported from the file located at /modules/my-module.js.

import * as myModule from ‘/modules/my-module.js’;

Here, accessing the export means using the module name (in this case "myModule") as the namespace. For example, if the module imported above contained a doAllTheAmazingThings(), you could call it like this:

myModule.doAllTheAmazingThings();

Import a single export

Given an object or value named myExport , which has been exported from the module my-module (because the entire module is exported) or exported explicitly (using the export statement), inserts myExport into the current scope.

import { myExport } from ‘/modules/my-module.js’;

Import multiple exports

Insert foo and bar into the current scope.

import { foo, bar } from ‘/modules/my-module.js’;

Importing exports with aliases

Exports can be renamed when importing, for example, inserting shortName into the current scope.

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

Rename multiple exports when importing

Use aliases to import multiple exports of a module.

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;

Import a module only for side effects

A module is only imported for side effects (neutral word, no derogatory connotation), not to import anything in the module, which will run the module global code, but doesn't actually import any values.

import “/modules/my-module.js”

Import defaults

Available when default-export (whether object, function, class, etc.) is in effect. Such defaults can then be imported using import statements.
The simplest usage is to import the default value directly:

import myDefault from “/modules/my-module.js”;

You can also use the default syntax with the above usage (namespace import and named import) at the same time. In this case, the default import must be declared first.

import myDefault, * as myModule from “/modules/my-module.js”;

or

import myDefault, { foo, bar } from “/modules/my-module.js”;

Example

Imported from the helper module to assist in handling AJAX DSON requests.

Module: file.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}

Main program: main.js

import { getUserFulContents } from “/modules/file.js”;
getUserFulContents(‘http://www.example.com”, 
    data => { doSomethingUseful(data); } )

Supplementary

strict mode
strict mode
embedded script

The above is the detailed content of Detailed explanation of import in JavaScript (with examples). For more information, please follow other related articles on the PHP Chinese website!