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)

不言
Release: 2018-08-22 17:56:23
Original
3879 people have browsed it

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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template