Home Web Front-end JS Tutorial How to use import in JavaScript?

How to use import in JavaScript?

Jan 19, 2019 pm 05:00 PM
import

In ES6, How to use import in JavaScript? objects can be managed through modularization. Modularization can not only reuse functions, but also improve maintainability.

How to use import in JavaScript?

#import is the syntax used to import functions, objects, and initial values ​​exported from a module into another module.

As shown below

1

import {模块名称} from "需要导入模块的路径名"

Copy after login

How to use import?

This module has default module and named module.

We first load the default export module and the named export module

1

2

import {ModuleA, ModuleB} from "modules";

import Default from 'modules2';

Copy after login

In the first line, we import the two named modules named Module A and Module B from the modules file .

In the second line, we import the default module from the modules 2 file.

Execute module export

To export functions, objects, and primitive values ​​into modules, you need to use export.

Let’s look at a specific example

Export it as the default module

1

2

3

4

// alert.js

export default function () {

    alert("default module called!");

};

Copy after login

Named export

1

2

3

4

5

6

7

8

// utils.js

export function sum(x, y, z) {

    return x+y+z;

}

  

export function multiply(x, y) {

    return x*y;

}

Copy after login

We can export modules named sum and multiply.

You can use this function by calling the following

1

2

3

import { sum, multiply } from 'utils';

console.log(sum(1, 2, 3));

console.log(multiply(5, 8));

Copy after login

The execution result is as follows

1

2

->6

->40

Copy after login

This article ends here. For more exciting content, you can pay attention to php Chinese Other related column tutorials on the Internet! ! !

The above is the detailed content of How to use import in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How does Python's import work? How does Python's import work? May 15, 2023 pm 08:13 PM

Hello, my name is somenzz, you can call me Brother Zheng. Python's import is very intuitive, but even so, sometimes you will find that even though the package is there, we will still encounter ModuleNotFoundError. Obviously the relative path is very correct, but the error ImportError:attemptedrelativeimportwithnoknownparentpackage imports a module in the same directory and a different one. The modules of the directory are completely different. This article helps you easily handle the import by analyzing some problems often encountered when using import. Based on this, you can easily create attributes.

The difference between link and import is explained in detail: What are the differences between them? The difference between link and import is explained in detail: What are the differences between them? Jan 06, 2024 am 08:19 AM

In-depth analysis: What is the difference between link and import? When developing web pages or applications, we often need to introduce external CSS files or JavaScript libraries to enhance or customize our code. In this process, link and import are two commonly used methods. Although their purpose is to introduce external resources, there are some differences in specific usage. Syntax and location: link: Use the link tag to link external resources into the HTML file, usually located at the head of the HTML document

How to solve the problem that the Java package does not exist when importing the package How to solve the problem that the Java package does not exist when importing the package Apr 19, 2023 am 10:22 AM

There are many solutions on the Internet. I have summarized the ones I thought of for future reference. You may be able to solve the problem by using one of them. I solved it by using the last one. If the package you want to import does not exist under Libraries, then you have to check whether there is any problem with the corresponding dependency writing in the pom, and whether there is a corresponding jar package in the warehouse in use such as the name version. If Make sure there is no problem, then try the first few methods below to solve it. 1. Execute Maven->reloadproject Function: Re-import the Maven package 2 ways: 1. Select the right button of the Project directory->Maven->reloadproject2

What is the difference between link tag and import? What is the difference between link tag and import? Aug 28, 2023 am 11:19 AM

The differences between link tags and import include syntax and usage, functions and features, loading timing, compatibility and support, etc. Detailed introduction: 1. Syntax and usage. The link tag is an HTML tag, used to introduce external resources into HTML documents, such as CSS style sheets, JavaScript scripts, icons, etc. import is the module import syntax in ES6, used in JavaScript files. Introduce external modules; 2. Functions and features. The link tag can introduce a variety of resources, such as CSS style sheets, icons, etc.

A brief analysis of how to use import syntax in node A brief analysis of how to use import syntax in node Mar 21, 2023 pm 06:53 PM

Node.js supports import syntax. It is a simple knowledge point, but it can remind us to get out of knowledge misunderstandings, pay more attention to the outside world of knowledge, and constantly open up the boundaries of our own knowledge.

Comparing link and import: What are their differences? Comparing link and import: What are their differences? Jan 06, 2024 pm 08:23 PM

The link vs. import debate: What’s the difference? In development and programming, we often need to interact with other files or modules. In order to achieve this interaction, linking and importing are two commonly used methods. However, many people may not know the difference between link and import and when to use them. This article will introduce the difference between link and import in detail and provide code examples. First, let's understand the concept of link. Link

What are the ways to import modules in Python? What are the ways to import modules in Python? Oct 20, 2023 am 08:40 AM

Python is a powerful programming language that allows you to organize your code into reusable parts through the use of modules. A module is a file in a Python program that contains a set of related functions, classes, variables, etc. In Python, there are many ways to import modules. The following will introduce several common import methods and give corresponding code examples. Directly import the entire module: This is the simplest way to import. The entire module can be imported by using the import keyword followed by the module name. You can then use the functions in the module

What are the differences between import and link What are the differences between import and link Nov 24, 2023 pm 02:15 PM

The difference between import and link: 1. Purpose and semantics; 2. Loading method; 3. Compatibility; 4. Linking multiple style sheets; 5. Media type; 6. Dynamics; 7. Error handling; 8. Embedding set; 9. Default style; 10. Compatibility considerations; 11. Performance considerations; 12. Usage scenarios. Detailed introduction: 1. Purpose and semantics. Link is an HTML tag, used to link to external CSS files or style sheets. It is usually located in the head part of the HTML document, import is part of CSS, etc.

See all articles