Import,Require以及Export

RVon
583 阅读2分钟

都是为了js模块化编程

遵循规范

  • require 是AMD规范引入方式
  • import 是es6的一个语法标准，需要转换成es5的语法才能兼容浏览器

调用时间

  • require是运行时调用，所以require理论上可以运用在代码的任何地方
  • import 是编译时调用，所以必须放在文件头部

本质

  • require 是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
  • import 是解构过程，但是目前所有的引擎都还没用实现import，所以需要babel进行转码，把import转码为require

require/exports写法

  • node中导入模块
var a = require('a')
const fs = require('fs')
  • node中向外暴露成员的形式

exports.fs = fs
module.exports = fs

import/export写法

导入

  • ES6中 导入模块
<!--import 模块名称 from '模块标识符' -->

import utils from 'utils'
import {default as newName} from 'utils'
import * as newName from 'utils'
import {isPhone} from 'utils'
import {isPhone as isPhone2} from 'utils'
import utils, {isPhone} from 'utils'

导出

  • ES6中，使用export default 和 export 向外暴露成员
export default utils
export const utils
export function utils
export { isPhone, isObject }
export default a
export a

Export番外

export default和export const

export default 是默认导出
export const 是命名导出

Default Export (export default)

每个文件都可以有一个默认导出 export default，导入此类文件时需要指定一个任何你喜欢的名称。例如：

import Func1 from './Func1'

Named Export (export)

每个文件可以有多个命名导出 export const，然后将你要导入的名称用花括号包住。例如：

// 导入多个导出
import { MyClass, MyOtherClass } from "./MyClass1"
// 使用 as 重命名导出
import { MyClass2 as MyClass2Alias } from "./MyClass2"
// 导入所有
import * as MyClasses from "./MyClass1"

注意

默认导出实际上就是一个名字为 default 的命名导出，所以也可以像这样导入：

import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

tips

  1. export default 向外暴露的成员，可以使用任意变量来接收

  2. 在一个模块中，export default 只允许向外暴露一次

  3. 在一个模块中，可以同时使用export default 和export 向外暴露成员

  4. 使用export向外暴露的成员，只能使用{  }的形式来接收，这种形式，叫做【按需导出】

  5. export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在{ }中定义

  6. 使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

  7. 使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

avatar
文章
阅读
粉丝