es6 模块化（es6学习笔记07）

一、模块化

模块化：是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

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');