咱们前端在开发过程当中常常会遇到导入导出功能, 在导入时,有时候是require,有时候是import 在导出时,有时候是exports,module.exports,有时候是export,export default 今天咱们对这些内容进行简单的介绍javascript
import,export,export default属于ES6规范html
import 是在编译过程当中执行 也就是说是在代码执行前执行, 好比说,import后面的路径写错了,在运行代码前就会抛错, 在编写代码时,import不是必定要写在js的最前面 import命令具备提高效果,会提高到整个模块的头部,首先执行。(是在编译阶段执行的) import是静态执行的 由于import是静态执行的,不能使用表达式和变量,即在运行时才能拿到结果的语法结构 好比,不能再if和else中使用import 再好比,import后的from的路径,能够是相对路径,能够是绝对路径,可是不能是根据变量得来的路径前端
//import 路径不能够为变量
var url = './output'
import {
a,
b
} from url//这么写会报错
//------------------
//import 的引入与否不能和代码逻辑向关联
let status= true
if(status){
import {
a,
b
} from url//这么写会报错
}
复制代码
import可使用as进行重命名 import 的有不少种导入方式,java
import foo from './output'
import {b as B} from './output'
import * as OBj from './output'
import {a} from './output'
import {b as BB} from './output'
import c, {d} from './output'
复制代码
导入的方式和导出有些关联,咱们在下面说导出的时候,对以上这些导入方式进行逐一介绍es6
将exoprt和export default放在一块儿,由于它们关联性很大 简单说:export是导出,export default是默认导出 一个模块能够有多个export,可是只能有一个export default,export default能够和多个export共存 export default 为默认导出,导出的是用{}包裹的一个对象,以键值对的形式存在 导出的方式不一样,导入的方式也就不一样, 因此建议同一个项目下使用同一的导入导出方式,方便开发 export default解构之后就是export 经过两个直观的demo看下export和export default的区别 先看一段代码(export) output.js微信
const a = 'valueA1'
export {a}
复制代码
input.js函数
import {a} from './output.js'//此处的import {a}和export {a},两个a是一一对应关系
console.log(a)//=>valueA1
复制代码
留意上面的代码其中export {a}导出的a,和import {a}导入的a是同一个a 再看一段代码(export default)ui
const a = 'valueA1'
export default{a}
复制代码
input.jsurl
import a from './output.js'//此处的a和export default{a},不是一个a,
console.log(a)//=>{ a: 'valueA1' }
复制代码
看下export default的栗子中的input.js,咱们稍做改动spa
import abc from './output.js'//此处的a和export default{a},不是一个a,
console.log(abc)//=>{ a: 'valueA1' }
复制代码
咱们作了些改动,可是输出没有变化,import导入的是export default下的对象,叫什么名字均可以,由于只会存在一个export default
exoprt和export default在同一个模块中同时使用,是支持的,虽然咱们通常不会这么作 看一个栗子 output.js
const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
console.log(`foo执行,c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}
复制代码
input.js
import obj, {a,b } from './output'
console.log(a); //=>valueA1
console.log(b); //=>valueB1
console.log(obj); //=>{ b: 'valueB1', d: 'valueD1', foo: [Function: foo] }
复制代码
经过 exoprt和export default导出的在import引入时都支持经过as进行重命名 看个栗子 仍是上面的那个output.js
const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
console.log(`foo执行,c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}
复制代码
input.js
import {a as A} from './output'
import {* as A} from './output'//这是不支持的
import * as obj from './output'
console.log(A); //=>valueA1
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }
复制代码
as后面的变量是你要在input.js中使用的 重点看这一部分
import {* as A} from './output'//这是不支持的
import * as obj from './output'
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }
复制代码
这是 AMD规范
require是运行时调用,因此require理论上能够运用在代码的任何地方
例如,这样是支持的
let flag = true
if (flag) {
const a = require('./output.js')
console.log(a); //支持
}
复制代码
let flag = true
let url = './output.js'
if (flag) {
const a = require(url)
console.log(a); //支持
}
复制代码
经过require引入,是一个赋值的过程
根据AMD规范 每一个文件就是一个模块,有本身的做用域。在一个文件里面定义的变量、函数、类,都是私有的,对其余文件不可见。 每一个模块内部,module变量表明当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,实际上是加载该模块的module.exports属性。
为了方便,Node为每一个模块提供一个exports变量,指向module.exports。这等同在每一个模块头部,有一行这样的命令。
const exports = module.exports;
复制代码
因此说 如下两种写法等价
exports.a ='valueA1'
module.exports.a='valueA1'
复制代码
前面说在每一个模块提供一个exports变量,指向module.exports。 因此不能直接给exports赋值,赋值会覆盖
const exports = module.exports;
复制代码
直接给exports赋值会切断exports和 module.exports的关联关系 看一个栗子 output.js
const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
module.exports = { c}
exports.b = b//当直接给 module.exports时,exports会失效
module.exports.a = a
复制代码
input.js
const obj = require('./output.js')
console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }
复制代码
继续看代码 output.js
//部分省略
exports.b = b//这样能够生效
module.exports.a = a
复制代码
input.js
const obj = require('./output.js')
console.log(obj); //=>{ b: 'valueB1', a: 'valueA1' }
复制代码
再看一段代码 output.js
//部分省略
module.exports = { c}
module.exports.a = a
复制代码
input.js
const obj = require('./output.js')
console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }
复制代码
当直接给 module.exports时,exports会失效
在ES6中export default 导出的是一个对象 在AMD中exports和module.exports导出的也都是一个对象 因此若是你手中的项目代码支持两种规范,那么事能够交叉使用的(固然不建议这么去作) 经过export导出的不必定是一个对象
output.js
//部分省略
module.exports = { c}
module.exports.a = a
复制代码
inputj.s
import obj from './output'
import {a} from './output'
console.log(a);//=>valueA1
console.log(obj);//=>{ c: 'valueC1', a: 'valueA1' }
复制代码
output.js
const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
function foo() {
console.log(`foo执行,c的值是${c}`);
}
export {a}
export default {b,c,foo}
export {b}
复制代码
input.js
const a = require('./output.js')
console.log(a); //=>{ a: 'valueA1',default: { b: 'valueB1', c: 'valueC1', foo: [Function: foo] }, b: 'valueB1' }
复制代码
更多前端资源请关注微信公众号“前端陌上寒”
参考连接 关于import与require的区别
module.exports和exports和export和export default的区别,import和require的区别