ES6---模块

模块

1. ES5没有模块
2. Python，PHP，Java知道模块。
3. 如何把模块引入JS。
   只要能把一个豆腐切成两块，这两块就是两个模块，过程称为模块化。

模块化方法：

1. 把代码放入单独的.js文件中，分别引入。引入顺序（即加载顺序）很重要。
2. 用其他办法（例如注释），将代码分块也可。

依赖。利用main.js可以控制1.js和2.js的执行时机。

作用：延时加载，改变模块的加载顺序。

1. main.js

setTimeout(function(){
  window.modlue1()
},2000) //2s后执行module1

setTimeout(function(){
  window.modlue2()
},1000) //1s后执行module2

2. 1.js

window.module1 = function(){
  alert(1)
}
//在index.html文件中先引入1.js，先加载，但2s后执行.
//window.module 导出口.

3. 2.js

window.module2 = function(){
  alert(2)
}
//在index.html文件中后引入2.js，后加载，但1s后执行.

模块内的变量会互相干扰，因为都是全局变量，但是也可以有自己的局部变量

1. 互相干扰的例子

//1.js
var x = "模块一"
window.module1 = function(){
  alert(x) 
}
// 2.js
var x = "模块二"
window.module2 = function(){
  alert(x) 
}
//main.js
setTimeout(function(){
  window.modlue1() //alert的结果是模块二
},2000) 

setTimeout(function(){
  window.modlue2()
},1000) //alert的结果是模块二

2. 解决办法一：使用立即执行函数

!function(){
  var x = "模块二"
`window.module2 = function(){
    alert(x) 
  }
}()

3. 解决办法二：{}+let

{
  let x = "模块一"
  window.module1 = function(){
    alert(x) 
  }
}

模块之间可以互相依赖

1. skills,js

window.skills = ['HTML','CSS','JS']

2. 1.js

{
  let x = "模块一";
  let skills = window.skills;
  window.module1 = function(){
    alert(x + skills); 
  }
}

ES6的模块---导入及导出

1. index.html

<script type = "module" src = "main.js">

2. 1.js

import skills from "./skills.js";
let name = "qiqi";
// let skills = window.skills;
let module1 = function() {
  alert(`我是${name},我会${skills}`);
};
export default module1;

3. 2.js

import skills from "./skills.js";
let name = "lili";
// let skills = window.skills;
let module2 = function() {
  alert(`我是${name},我会${skills}`);
};
export default module2;

4. skills.js

let skills = ["HTML", "CSS", "JS"];
export default skills;

5. main.js

import module1 from "./1.js";
import module2 from "./2.js";

setTimeout(function() {
  module1();
}, 3000);

setTimeout(function() {
  module2();
}, 2000);

语法

1. 一个模块可以导出多个变量，导入的时候，使用什么引入什么即可

export {sayHello,name,age}; //导出
import {name} from '''./1.js'; //导入

2. 把其中一个变量作为默认变量导出，导入的时候随意起一个名字即可，都代表导出的变量

export default sayHello; //默认导出
import xxx form "./1.js"; //xxx代表sayHello

3. 两个模块导出的额变量名一样，且还不是默认导出，那么使用时要给变量改名字

export name; //两个模块都导出name ;
import {name as name1} from "./1.js" //使用时将name改名字.
import {name as name2} form "./2.js"

4. 只导入模块，则函数不会执行，但是代码会执行

import "./1.js"
//想要代码执行，必须导出函数并且调用函数

5. 全部导入则使用*

import * as x from "./1.js"

6. 路径规则

相对路径，一定要使用./开头.

对于不支持import 和export的浏览器

使用parcel

npm install -g parcel-bundler
parcel index.html