es6模块化
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来
模块化的好处
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品
CommonJS
=>NodeJS、Browserify
AMD
=>requireJS
CMD
=>seaJS
ES6模块化语法
模块功能主要由两个命令构成:export和import
- export命令用于规定模块的对外接口
- import命令用于输入其他模块提供的功能
引入模块
1. 通用的导入方式
<script type="module">
// 引入module.js模块内容
import * as m1 from "./module.js";
console.log(m1);
</script>
// 这个需要在服务器打开才行噢
2. 解构赋值形式
import { school, teach } from "./module.js";
import { school as guigu, findJob } from "./module2.js";
import { default as m3 } from "./module3.js";
// console.log(school, teach);
// console.log(guigu, findJob);
console.log(m3);
3. 简便形式
- 针对默认暴露
import m3 from "./module3.js";
console.log(m3);
暴露方式
1. 分别暴露
export let school = 'pink';
export function teach() {
console.log('be able');
}
2. 统一暴露
let school = 'pink';
function findJob() {
console.log('find job');
}
//
export { school, findJob };
3. 默认暴露
export default {
school: 'pink',
change: function () {
console.log('change');
}
}
浏览器模块化方式2
// app.js文件
// 入口文件
// 模块引入
import * as m1 from "./module.js";
import * as m2 from "./module2.js";
import * as m3 from "./module3.js";
console.log(m1);
console.log(m2);
console.log(m3);
<script src="./app.js" type="module"></script>
ES6模块化引入NPM包
// a安装jquery包 npm i jquery
import $ from 'jquery'; // const $ = require('jquery');
$('body').css('backgroundcolor', pink);
ES7新特性
-
Array.prototype.includes
includes方法用来检测数组中是否包含某个元素,返回布尔类型值
-
【**】 功能与
Math.pow
结果相同
ES8新特性
async和await两种语法结合可以让异步代码像同步代码一样
1. async函数
-
async函数的返回值是promise对象
-
promise对象的结果由async函数执行的返回值决定的
// async 函数
async function fn() {
// 返回一个字符串
// return 'shangguigu';
// 返回的对象不是一个Promise对象,则返回一个成功的promise
W
// 抛出错误
// throw new Error('wrong');
// 返回的结果是一个promise对象
return new Promise((resolve, reject) => {
reject('失败');
})
}
const result = fn();
console.log(result);
2. await表达式
- await必须写在asyna函数中
- await右侧的表达式一般为promise对象
- await返回的是promise成功的值
- await的promise失败了,就会抛出异常,需要通过try…catch捕获处理
// 创建promise对象
const p = new Promise((resolve, reject) => {
// resolve('success');
reject("wrong");
})
// await 要放在async函数中
async function main() {
try {
let result = await p;
console.log(result);
} catch (e) {
console.log(e);
}
}
main();
3. async和await结合读取文件
-
发送ajax请求
function sendAJAX(url) { return new Promise((resolve, reject) => { // 1. 创建对象 const x = new XMLHttpRequest(); // 2. 初始化 x.open('GET', url) // 3. 发送 x.send(); // 4. 事件绑定 x.onreadystatechange = function () { if (x.readyState === 4) { if (x.status >= 200 && x.status < 300) { resolve(x.response); } else { reject(x.status); } } } }) }
- 发送AJAX请求
async function main() {
await sendAJAX("http://api.apiopen.top/getJoke");
// 返回结果是promise
}
main();
4. Object.values和Object.entries
Object.values
Object.entries
const school = {
name: 'pink',
cities: ['beijing', 'shanghai', 'shenzhen'],
xueke: ['前端', 'java']
}
// 获取对象所有的键
console.log(Object.keys(school));
// 获取对象所有的值
console.log(Object.values(school));
// 获取对象所有的键值
console.log(Object.entries(school));
输出结果:
5. getOwnPropertyDescriptors
// 对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));