es6模块化

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. asyna函数

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