资讯专栏INFORMATION COLUMN

JS_导入导出

MartinDai / 1118人阅读

摘要:方式导入导出一个文件,可以向外无数个变量,函数,对象,但是的时候,仅仅需要载入一次文件即可。所以,无形之后,会增加一个顶层命名空间。

Node方式导入导出

一个JavaScript文件,可以向外exprots无数个变量,函数,对象,但是require(); 的时候,仅仅需要 载入一次JS文件即可。 所以,无形之后,会增加一个顶层命名空间。

导入一个空模块,是一个空对象,一个模块就是一个对象。

导出方式:

exports, 导出整个式子

module.exports, 导出赋值部分

导入方式:

reuire()

</>复制代码

  1. // 导出一个变量
  2. exports.a = 10;
  3. // 导入该变量
  4. let b = require("./export")
  5. // 导入的形式 `console.log(b)`输出导入的值:
  6. // { a: 10 }

</>复制代码

  1. // 导出一个变量,直接需要变量值使用.
  2. // module.exports = "name";
  3. // 导入该变量
  4. let b = require("./export")
  5. // 导入的形式 `console.log(b)`输出导入的值:
  6. // name

</>复制代码

  1. // 导出对象
  2. module.exports = {
  3. name1: 123,
  4. name2: 456
  5. }
  6. // 导入该变量
  7. let b = require("./export")
  8. // 导入的形式 `console.log(b)`输出导入的值:
  9. // { name1: 123, name2: 456 }

</>复制代码

  1. // 导出对象
  2. exports.msg = {
  3. name1: 1,
  4. name2: 2
  5. }
  6. // 导入该变量
  7. let b = require("./export")
  8. // 导入的形式 `console.log(b)`输出导入的值:
  9. // { msg: { name1: 1, name2: 2 } }

</>复制代码

  1. // 导出函数
  2. exports.showMsg = function () {
  3. }
  4. // 导入该变量
  5. // let b = require("./export")
  6. // 导入的形式 `console.log(b)`输出导入的值:
  7. // { showMsg: [Function] }
  8. // 在 引用结果 需要 通过 变量 引用对象 执行
  9. // var b= require();
  10. // b.showMsg();

</>复制代码

  1. // 导出函数
  2. module.exports = function () {
  3. }
  4. // 导入该变量
  5. let b = require("./export")
  6. // 导入的形式 `console.log(b)`输出导入的值:
  7. // [Function]
  8. // 引入文件的 变量 直接执行

对象,函数常使用的导出方式:module.exports

</>复制代码

  1. 对应

</>复制代码

  1. import "helpers"
  2. // 也称: require("···")
  3. import Express from "express"
  4. // 也称: Express = require("···").default || require("···")
  5. import { indent } from "helpers"
  6. // 也称: indent = require("···").indent
  7. import * as Helpers from "helpers"
  8. // 也称: Helpers = require("···")
  9. import { indentSpaces as indent } from "helpers"
  10. // 也称: indent = require("···").indentSpaces

</>复制代码

  1. export default function () { ··· }
  2. // 也称: module.exports.default = ···
  3. export function mymethod () { ··· }
  4. // 也称: module.exports.mymethod = ···
  5. export const pi = 3.14159
  6. // 也称: module.exports.pi = ···
ES6和TS方式导入导出

导出:export
导入:import

注意点:

导出和导入,除了使用as之外,变量名相同

导出一个文件,默认是一个空对象

直接使用导入文件定义变量名,直接执行

default导出,在导入的时候可以取任意变量名

export default默认导出模块不能使用{}对象导出

</>复制代码

  1. // 导出一个常量
  2. export const foo = Math.sqrt(2)
  3. // 导入
  4. import { foo } from "./export"
  5. import * as Tools from "./export" // 使用 Tools.foo

</>复制代码

  1. function myFunction () {}
  2. // 导出已经声明的函数
  3. export { myFunction }
  4. 导入
  5. import { myFunction } from "./export"

</>复制代码

  1. // 多个导出
  2. export function cube(x: number): number {
  3. return x * x * x
  4. }
  5. const foo: number = Math.PI * Math.sqrt(2)
  6. export { foo } // 导出多个
  7. // 导入
  8. import { cube, foo } from "./export"

</>复制代码

  1. // 导出函数
  2. export default function () {}
  3. export default function fun () {}
  4. // 导入
  5. import myFunction from "./export" // 可以取任意变量名
  6. // 如果导出默认,定义函数名或者变量名,或者类名
  7. // 导入的时候可以写和原来相同名字,也可以取任意变量名

</>复制代码

  1. // 导出类
  2. export default class {}
  3. // 导入
  4. import Test from "./export"

一个文件(模块)默认的导出只能有一个, 可以是类,函数, 对象等

导入整个模块的内容,在当前作用域插入export变量,包含export文件中全部导出绑定(包括export default):

</>复制代码

  1. // 导出多个模块
  2. export function query () {}
  3. export function update () {}
  4. // 导入
  5. import * as API from "./export"

将整个模块作为附加功能导入, 但是不导入模块的导出成员:

</>复制代码

  1. import "my-module"

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108457.html

相关文章

  • 深入 CommonJs 与 ES6 Module

    摘要:目前主流的模块规范模块通用模块如果你在文件头部看到这样的代码,那么这个文件使用的就是规范实际上就是全局变量这三种风格的结合这段代码就是对当前运行环境的判断,如果是环境就是使用规范,如果不是就判断是否为环境,最后导出全局变量有了后我们的代码和 目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, facto...

    sanyang 评论0 收藏0
  • es6学习笔记-module_v1.0_byKL

    摘要:学习模块不是对象,而是通过命令显式指定输出的代码,输入时也采用静态命令的形式。的模块自动采用严格模式命令用于规定模块的对外接口,命令用于输入其他模块提供的功能。该文件内部的所有变量,外部无法获取。 es6 学习-module_v1.0 ES6模块不是对象,而是通过export命令显式指定输出的代码,输入时也采用静态命令的形式。 ES6的模块自动采用严格模式 export命令用于规定模...

    VishKozus 评论0 收藏0
  • 富婆给你说require、import和export

    摘要:所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。目前,主要有两个库实现了规范和。这些导出对象用名称进行区分,称之为命名式导出。 简单粗暴,富婆给你说,其实我也没太搞明白,最近看了一篇文章我才理清了一点点思路,最近整日沉迷于肥宅快乐水,技术都跟不上了,来篇文章,提神醒脑,朝着我的富婆梦更近一步,早日走上富婆路,包养我家大狼狗!!! 为什么有模块概念...

    cod7ce 评论0 收藏0
  • 富婆给你说require、import和export

    摘要:所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。目前,主要有两个库实现了规范和。这些导出对象用名称进行区分,称之为命名式导出。 简单粗暴,富婆给你说,其实我也没太搞明白,最近看了一篇文章我才理清了一点点思路,最近整日沉迷于肥宅快乐水,技术都跟不上了,来篇文章,提神醒脑,朝着我的富婆梦更近一步,早日走上富婆路,包养我家大狼狗!!! 为什么有模块概念...

    sourcenode 评论0 收藏0
  • 这几个概念你可能还是没搞清require、import和export

    摘要:如果这个模块还依赖其他模块,那么函数的第一个参数,必须是一个数组,指明该模块的依赖性。目前,主要有两个库实现了规范和。这些导出对象用名称进行区分,称之为命名式导出。简单粗暴,富婆给你说,其实我也没太搞明白,最近看了一篇文章我才理清了一点点思路,最近整日沉迷于肥宅快乐水,技术都跟不上了,来篇文章,提神醒脑,朝着我的富婆梦更近一步,早日走上富婆路,包养我家大狼狗!!! 为什么有模块概念 理想情况...

    only_do 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<