##require和import
首先需要明确的是:
- 他们都能帮助我导入一些模块
- 他们的适用范围不一样,require通常来说是用在node中的,在浏览器方面,却不支持。import是es6定义的一个语法标准,具有普适性。
先讲讲require的用法(import会搭配export讲)
首先我们要知道,require导入的是一个对象(如下,我们在test1.js中导入test2.js)
//test2.js文件内是空的
//test1.js
let a = require('./test2.js')
console.log(a);
//结果 可以看到是一个对象
$ node test1
{}
这个时候我们就要问了 我们导出的这个对象,到底是一个什么?
首先我们理解一下原理
我们可以这么理解:在node中,每个文件的的最后,都会return一个module对象,这个module对象里面存在一个exports对象
也就是说 我们导出的是一个module对象
const mudule = {
//存在不只一个exports对象,仅仅就讨论exports
exports:{}
}
return module
这个时候有人就会好奇了,我为什么直接exports.xxx = xxx 这样写,也可以
因为为了简化代码
后来专门添加了一个exports对象等于module.exports对象
但是我们导出的还是一个module.exports对象
代码如下:
//test2.js
console.log(exports === module.exports);
//test1.js
let a = require('./test2.js')
console.log(a);
//结果
$ node test1
true
{}
上面为什么会打印输出两个值,一个是true一个是{}
因为根据导入模块的规则,遇见require的时候,会直接去它require的文件先执行,执行完成以后,才会执行本文件。test2.js中的文件的module.exports是一个空对象
这个时候,有人可能会问了,如果我直接给exports赋值 会怎么样?
//test2.js
exports = '123'
//test1.js
let a = require('./test2.js')
console.log(a);
//结果
$ node test1
{}
上面之所以是一个{},是因为exports 和moxule.exports是对象,是引用类型,所以exports = module.exports是一个浅拷贝。当我们直接改变exports的值的时候 ,存储exports的内存地址的值就会重新指向一个存储我们给exports赋的值的内存地址。
如果不能理解的话,建议看一下js的浅拷贝的知识。网上有很多
export和export default(注意export后面没有s 别跟require里面的exports搞混淆了)
首先需要明确:
- export 和export default都能导出常量,函数,文件,模块等
- 在一个文件或者模块中,export 和import可以有多个,但是export default只能有一个
- 通过export 方式导出的,再用inport 导入的时候,要加上{} 但是export default却不需要
- export 和 export default可以混合使用
export使用
//导出
export const a = 'xxx'
//对应导入,注意与导出的名称,必须保持一致
import {a} from '地址'
//导出
export funtion a(){
}
//对应导入,注意与导出的名称,必须保持一致
import {a} from '地址'
//一个界面也可以导出多个
export const a = 'xxx'
export funtion b(){
}
//对应导入,注意与导出的名称,必须保持一致
import {a,b} from '地址'
因为export导出的模块,在引用的时候,必须跟导出的模块的名称一致,但是我们如果不想保持名称一致,怎么办?答案就是使用 as 关键字
//导出
export const a = 'xxx'
//导入。注意加上花括号,将导出的模块a 的名字换成 b
import {a as b} from '地址'
同时,如果我们导出的一个模块中,在某一个引入它的模块中,不是全部都需要,怎么办?答案就是按需导入
//导出
export const a = 'xxx'
export const b = 'xxx'
//导入,我们可以仅仅就引用 a 模块
import {a} from '地址'
当然也能混合使用export 和export default
const a= 'xxx'
export default a;
export const b = xxx
//导入 注意export导出的要加上{}
import {a} b from '地址'
export与import的复合 写法
export {foo,bar} from 'xxx'
上面这个东西也就等同于
import {foo,bar} from 'xxx'
export {foo,bar}
如果引入和导出默认的接口
export {default} from 'xxx'
具名接口改成默认接口(最常用到的)
export {xxx as default} from 'xxx'
//等同于 这个时候,讲export 转化为了export default,导入的时候,就需要按照export default的写法
import {xxx} from 'xxx'
export default xxx
//使用的话
import 自定义的名字 from '地址'