ES6模块化及优点,简单案例让你秒懂
在浏览器上执行es6的语法的过程（使用第六种用法；最常用）
先用代码块加载一个模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>es6模块化入门</title>
</head>
<body>
<script type="module"> //设置为module类型
import es6 from "./es6.js" //内部名字要与暴露出来的名字一致
es6.getNewsList("es6模块调用");
console.log(es6.userName)
</script>
</body>
</html>
es6.js
export default {
userName:'es6要执行在服务器上；否则存在跨域',
age:20,
getNewsList:function(e){
console.log(e);
return e
}
}
使用文件路径（会调用file协议）直接打开html文件，存在跨域的问题
所以我们用服务器加载文件（或者用phpstudy工具搭建服务）
nodejs建立一个server.js文件后，本目录运行
npm install express
node server.js
访问：http://127.0.0.1:8888/
文件要index.html
server.js
var express = require('express');
var path = require('path');
var app = express();
//设置静态路径
app.use(express.static(path.join(__dirname,'/')));
app.get('/',function(request, response){
console.log('主页get请求');
response.sendFile(path.join(__dirname, 'index.html'));
})
var server = app.listen(8888,'0.0.0.0', function(){
var host = server.address().address;
var port = server.address().port;
console.log('应用实例，访问地址为http://%s:%s', host, port);
})
export与export default的区别？
1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，export default则不需要
4.(1) 输出单个值，使用export default
(2) 输出多个值，使用export 【注意：引入时要加花括号 import { A } from " B" 】解构引入
(3) export default与普通的export不要同时使用（我是觉得可以一起用；如第七种混合使用）
模块的特点：
1.可以相互依赖
2.当你的模块被多次引入时，只执行一次
3.在多处引入相同的js文件，那么这个js文件只会执行一次
模块化好处：模块是一个文件
1.减少命名冲突
2.避免引入时的层层依赖
3.可以提升执行效率
以下举例7种方法（第六种最常用；也是vue用法）
第一种方法
1.如何导出（暴露）
export let run =function(){
console.log("run-->fun")
}
export let userName = "jinglijuan"
2.如何引入（依赖）
<script type="module"> //设置为module类型
import {run,userName} from "./mo.js" //内部名字要与暴露出来的名字一致
run();
console.log(userName)
</script>
第二种方法 :暴露的数据过多时使用
- 导出时正常导出
export let run =function(){
console.log("run-->fun")
}
export let userName = "jinglijuan"
- 导入时
<script type = "module">
import * as 别名 from './mo.js'
console.log(别名.暴露的方法或者变量名)
console.log(mo.run)
</script>
第三种方法：直接导出对象
- 导出：
let run = function(){
console.log("jinglijuan")
}
let userName = "jinglijuan"
let age = 21
let sex = "woman"
export {
run,
userName,
age,
sex
}
- 如何导入（接收）：
import {userName,age} from "./mo.js"
console.log(userName,age)
第四种方法：导出的数据起个别名
导出时通过as给导出的内容起个别名，接收时需要以别名为依据
- 导出：
let age = 21
let sex = "woman"
export {
age as a,
sex
}
- 如何导入（接收）：
import {userName,a} from "./mo.js"
console.log(userName,a)
第五种，引入时增加别名（从不同文件中的引入的变量名或者方法名可能是重名的，引入时使用会报错）
1.引入
import {userName as moUserName} from './mo4.js'
import {userName} from './mo5.js'
console.log(moUserName,userName)
第六种：默认导出（使用频率最高）
只能有一个默认对象
1.导出（暴露）
export default {
userName:'jinglijuan',
age:20,
getNewsList:function(e){
return new Promise((resolve, reject) => {
const url = '/news/list';
request.get(url, {
params: {
e
}
}).then((res) => {
resolve(res)
}).catch((error) => {
reject(error.response.data);
})
})
}
}
2.引入（接收）
import mo from "./mo.js"
//调用
mo.getNewsList(e).then(res => {
console.log(res)
});
console.log(mo.userName)
第七种：混合导出
1.导出（暴露）
export default{
userName:'jinglijuan',
age:20
}
export let sex = '男'
2.引入
import mo,{sex} from './mo7.js'
console(mo.userName,mo.age,sex)
