require

require是common.js的规范方法，在nodeJs中直接支持，在浏览器中需先通过webpack打包变相支持

module.exports 和 exports

module.exports和exports都是NodeJs中默认存在的空对象，默认指向同一块内存。
require引入的对象本质上是module.exports，因此如果直接对exports赋值，则会导致两者不全等。应通过export.XXX=XXX进行赋值。

export 和 import 命令

export、import是ES6语法

• 在html中,import语句必须写在<script type="module"></script>中。
  使用import...from会执行目标js并引入内容
  而以下两句会执行目标js但不会引入内容

<script type="module" src="./demo_export.js"></script>
<script type="module">
  import "./demo_export.js";
</script>

• import和export只能出现在模块的最外层（顶层）结构中，否则报错
• 由于es6模块是静态加载的，因此import和export不能出现在判断等动态语句中
• es6 module内部自动采用严格模式

1、export default 向外暴露的成员，可以使用任意不带{}的变量来接收
2、在一个模块中，export default 只允许向外暴露一次，export 可以有多个
3、在一个模块中，可以同时使用 export default 和 export 向外暴露成员
4、使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】
5、export可以向外暴露多个成员
6、使用export导出的成员，必须严格按照导出时候的名称使用{ }按需接收
7、使用export导出的成员，如果想换个变量名称接收，可以使用 as 来起别名,也可以在 import 时再用 as 改名

---

export

相当于把对象添加到module的exports中。

function hello(){
...
}
var num = 100;
export { hello,num }

等价于

export function hello(){
...
}
export var num = 100;

export default

相当于把对象添加到module的exports中，并且对象的key叫default

export default 100;

等价于

var num = 100;
export default num;

---

import

• 不带{}的导入
  导入module.default属性（注：如果default属性不存在，则导入exports对象）。

• 带{}的导入
  按照属性key值导入module的对应属性值。

  
  image.png

//export.js
function hello(){
...
}
var num = 100;
export { hello as myFun,num }
export default 'hello world';

<script type="module">
import myString,{myFun as newFun,num} from './export.js';
import * as allParams from './export.js';
console.log(allParams);
</script>

export default 和 export 内容,可以在一句import中一起引入
注意 , 对于 export default 的内容, import 时不能 as

---

import() 函数

通过import()函数可实现动态加载，通常用于按需加载/条件加载，弥补了import只能位于模块顶层的缺陷。
import()返回一个Promise对象。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});