一、模块化
模块化：是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
1.1 模块化的好处
- 防止命名冲突
- 代码复用
- 高维护性
1.2 ES6模块化语法
功能模块主要由两个命令构成：export和import
export:用于规定模块的对外接口import：用于输入其他模块提供的功能
1.2.1 export 使用：
//1.分别暴露
export let book = '西游记';
export function like(){
console.log("我喜欢看西游记");
}
//2.统一暴露
let book = "西游记";
function name(){
console.log("西游记是书的名字");
}
//3.默认暴露---对象居多
export default{
book:'红楼梦',
price:function(){
console.log("这本书不贵哦");
}
}
使用第三种export方式时，如果要获取里面的属性，要加上一层default。
<script type="module">
import * as b3 from "./es6_modo2.js";
b3.default.price(); //要多加一层default
</script>
1.2.2 import 使用
1、通用的导入方法
import * as b1 from "./es6_modo.js"; //引入的路径要使用 / ./ ../
2、解构赋值形式
import {
book,name} from "./src/js/mode2.js";
//当引入的名字重名时，要使用as取个别名
import {
book as shu , age} from "./src/js/modo3.js";
//当导入默认default时，也要为它取别名
import {
default as d3} from "./src/js/modo5.js";
3、简便形式
只针对于默认暴露
import hhh from "./src/js/modo3.js";
1.3 浏览器使用es6模块化方式
方法1：
<script type="module">
import ........
//这里写入上面三种import使用方法
</script>
方法2：
设置一个总的入口文件 app.js 所有的js文件都在这里导入
app.js:
import * as b1 from "./es6_modo.js";
import * as b2 from "./es6_modo1.js";
import * as b3 from "./es6_modo2.js";
在某个 .html页面中引入app.js
<script src="./src/js/app.js" type="module"></script>
注：一般在项目中很少这么引入，会涉及到浏览器兼容的问题。有些浏览器不支持es6，一般通过babel（js的编译器）来做一个转化。
1.4 es6模块化引入npm包
- 现在命令行里导入
- 接着在入口文件中写入
import $ from 'jquery';
//修改背景颜色
$('body').css('background','green');