export export default和exports module.expots的用法

在引入的时候一定要使用type="module"不然不支持ES6模块化

 <script src="./bb.js" type="module"></script>
1

1.首先要介绍的是export export default的用法

1.1.首先要介绍的是export的用法

在show.js中

不管是这样写：

export var a = 1
export var b = 2
export function find() {
    console.log('打印了');
}
1
2
3
4
5

还是这样写：

var a = 1
var b = 2
function find() {
    console.log('打印了');
}
export { a, b, find }
1
2
3
4
5
6

二者实现的效果都是一样的，两者实现的功能一模一样，只不过写法不同而已

在test.html中

如果想输出a或者b或者函数
方式一：全部导入(这是一种通用的写法，不管是export还是用export default都可以用这种方式导入进来，唯一一点不好的地方就是这种写法不太流行)，使用这种import * 这种方式导入来的一定是对象

import * as firstMmethods from './show.js';
console.log(firstMmethods.a);//1
firstMmethods.find()//打印了
1
2
3

方式二：按需导入(采用解构赋值的形式将对象里的属性解构出来，这种方式是最常用的，如果是module.export导出的是一个属性，那么就没法使用结构赋值了，而使用export将成员导出来的必定是对象，因此必定要使用对象的结构赋值。使用export导入进来的一定是对象，而且必须采用结构赋值；使用module.export导出的可能是一个属性，也可能是一个对象)

import {a,find}from './show.js'; 
console.log(a);//1
find()//打印了
1
2
3

1.2.下面要介绍的是export default的用法

在show.js中

不管是这样写：

var myall = {
    a: 1,
    b: 2,
    find: function() {
        console.log('打印了');
    }
}

export default myall
1
2
3
4
5
6
7
8
9

还是这样写：

var a = 1
var b = 2

function find() {
    console.log('打印了');
}
export default {
    a,
    b,
    find
}
1
2
3
4
5
6
7
8
9
10
11

二者实现的效果都是一样的，两者实现的功能一模一样，只不过写法不同而已没。注意：在一个页面里只允许出现一次export default，否则就会报错！！！

在show.html中

import all from './show.js'; 
console.log(all); //{a: 1, b: 2, find: ƒ}
console.log(all.a); //1`在这里插入代码片`
1
2
3

2.下面要介绍的是exports module.expots的用法

以下采用one.js和two.js进行演示

在one.js中

我们有四种方式可以选用
总之：无法使用export=‘值’，这样的形式进行导出，不然我们接受到的会是一个空对象

1===================================
exports.name="小明";
exports.sex="男";
exports.sayHay=function(){
  console.log("我叫小明");
}
2===================================
module.exports.name="小明";
module.exports.sex="男";
module.exports.sayHay=function(){
  console.log("我叫小明");
}
1与2的写法不一样但结果相同(因为module可以省略)
3===================================
上面的module.exports写了好几次我们可以只写一个(module不可以省略)
let name="小明";
let sex="男";
let sayHay=function(){
  console.log("我叫小明");
}
module.exports={
  name,
  sex,
  sayHay
}
4===================================
上面的3的写法还可以继续进行简写：(module不可以省略,生了就会报错)
module.exports={
  name:"小明",
  sex:"男",
  sayHay:function(){
    console.log("我叫小明");
  }
}
以上的1,2,3,4的四种写法配合two.js的内容就可以分别完成读取操作
===================================
总结：无法使用export='值'，这样的形式进行导出，不然我们接受到的会是一个空对象


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在two.js中

哪怕导出一个也要使用结构赋值，不使用的话就要使用.的形式取出属性

var person=require("./one")
console.log(person.name);  //小明
console.log(person.sex);    //男
console.log(person.sayHay)  //[Function (anonymous)]
console.log(person.sayHay())//我叫小明   undefined
1
2
3
4
5

运行的结果如下：

注意：
如果我们只想导出一个成员的时候，我们可以这样写

module.exports = 值         或者
module.exports = 函数   
1
2

一个页面只能有一个module.exports = ，如果写多了，虽然不会报错，但是后面的module.exports = 会覆盖前面的module.exports =
例如下面得代码只会最后一个生效

3.其他

在node中，我们默认是无法使用es6的模块化语法，他默认的type为：commonJS，如果我们想要在node中体验es6的模块化，我们只需要将type改为module即可：

这样我们就可以使用了
效果如下：

不过大家最好不要这么改，用的不习惯，感觉挺别扭的，哈哈哈！知道就可以了。

4.总结

对于ES66
1.如果使用的是export导出的，必须要使用结构赋值，不然就会报错（除了使用imoprt * from …进行接收）
2.如果使用的是export default导出的，当导出的是唯一一个属性的时候，我们接收的就是唯一一个属性；当导出的是对象的时候，我们接收的就是对象，也就是我们导出的是什么类型，我们就接受到的就是什么类型。
3.export default后面不能接变量声明，否则会报错。
4.第一种导出方式：
export default { aa }//导出的是一个对象，这里无法使用结构赋值
第二种导出方式：
export default aa //导出的就是一个变量，不是对象无法使用结构赋值
第三种导出方式：
export default const aa //报错
export default无法进行重复声明不然会报错
export default可以和export一块使用，在引入的时候可以使用如下方式进行接收

不容易看出来的错误点：
下面的这张图的错误点就在于逗号，新手可能不容易看出来，终端会报语法错误，改正：要么不加逗号，要么使用分号。

对于下面的这种写法，第一个等于下面两个的合体

对于CommonJS
今天是彻底搞懂了CommonJS规范，就记住一句话和一个特殊情况就行了：把exprts与module.exports当成一个空对象用就行了。
exprts与module.exports他们都是一个对象，我们是往这个对象上添加属性或者是将这个对象进行覆盖。如下：

他的结果为11
Obj就好比是exprts或module.exports，当我们重新给它赋值后，他原来的对象就会变成别的类型，因此我们在别的地方引用的时候，有时候是对象有时候不是，只要懂了这个就不需要再死记硬背规则了。注意一个js文件只能有一个module.exports，他后面的module.exportshi把前面的module.exports覆盖掉。
console.log(exports === module.exports);为true
注意有一种特殊的情况：
1.不能使用exports = 变量/值，不然结果为空对象
2.如果module.exports与exports一块使用，那么就只会以module.exports为准