Table of Contents
Node mode import and export
Export:
Home Web Front-end JS Tutorial How to implement import and export in javascript (code attached)

How to implement import and export in javascript (code attached)

Aug 22, 2018 pm 05:56 PM
javascript

The content of this article is about the implementation of import and export in JavaScript (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Node mode import and export

A JavaScript file can export exprots countless variables, functions, and objects, but require( );, you only need to load the JS file once. Therefore, after being invisible, a top-level namespace will be added.

Importing an empty module is an empty object, and a module is an object.

Export method:

  • exports, export the entire formula

  • ##module. exports, export assignment part

Import method:

  • reuire()

// 导出一个变量
exports.a = 10;

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { a: 10 }
Copy after login
// 导出一个变量,直接需要变量值使用.
// module.exports = 'name';

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// name
Copy after login
// 导出对象
module.exports = {
  name1: 123,
  name2: 456
}

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { name1: 123, name2: 456 }
Copy after login
// 导出对象
exports.msg = {
  name1: 1,
  name2: 2
}

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { msg: { name1: 1, name2: 2 } }
Copy after login
// 导出函数
exports.showMsg = function () {
}

// 导入该变量
// let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { showMsg: [Function] }

// 在 引用结果 需要  通过  变量 引用对象 执行
// var b= require();
// b.showMsg();
Copy after login
// 导出函数
module.exports = function () {
}

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// [Function]

// 引入文件的 变量  直接执行
Copy after login
Commonly used export methods for objects and functions:

module.exports##ES6 and TS import and export

Export:

export

Import:import
Note:

    Export and import, except using
  • as

    , the variable names are the same

  • Export a file, the default is an empty object
  • Directly use the import file to define the variable name, and execute directly
  • default

    Export, you can use any variable name when importing

  • export default

    Default export module Cannot use {}Object export##

    // 导出一个常量
    export const foo = Math.sqrt(2)
    
    // 导入
    import { foo } from './export'
    import * as Tools from './export' // 使用 Tools.foo
    Copy after login
    function myFunction () {}
    // 导出已经声明的函数
    export { myFunction }
    
    导入
    import { myFunction } from './export'
    Copy after login
    // 多个导出
    export function cube(x: number): number {
        return x * x * x
    }
    const foo: number = Math.PI * Math.sqrt(2)
    export { foo } // 导出多个
    
    // 导入
    import { cube, foo } from './export'
    Copy after login
    // 导出函数
    export default function () {}
    export default function fun () {}
    
    // 导入
    import myFunction from './export' // 可以取任意变量名
    // 如果导出默认,定义函数名或者变量名,或者类名
    // 导入的时候可以写和原来相同名字,也可以取任意变量名
    Copy after login
    // 导出类
    export default class {}
    
    // 导入
    import Test from './export'
    Copy after login
    A file (module) can only have one default export, which can be a class, function, object, etc.
Import the contents of the entire module and insert the

export

variable in the current scope, including all export bindings in the

export file (including export default):

// 导出多个模块
export function query () {}
export function update () {}

// 导入
import * as API from './export'
Copy after login
Import the entire module as an additional function, but do not import the exported members of the module:
import 'my-module'
Copy after login
Related recommendations:

excel import and export    


Oracle import and export problems

The above is the detailed content of How to implement import and export in javascript (code attached). 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 Article Tags

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 to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to implement an online speech recognition system using WebSocket and JavaScript

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to implement an online reservation system using WebSocket and JavaScript

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

How to use JavaScript and WebSocket to implement a real-time online ordering system

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecasting system

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

Simple JavaScript Tutorial: How to Get HTTP Status Code

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

How to get HTTP status code in JavaScript the easy way

How to use insertBefore in javascript How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

How to use insertBefore in javascript

See all articles