JS 如何模块化接口以及模块化的好处

说到 new 我们可能想起 new Object()、new 一个 class 实例、new Date()、new Promise()、new Set()、new FormData()、new Error() 等，都是我们非常的熟悉，也是常用的。

首先我们将一个模块的接口封装在一个模块中，注意这里直接导出 class 实例，代码如下：

// src/api/enquiry/enquiryManage.js
import axios from '../request'

const URL = {
  queryDetail: '/trade/inquiryManageService/queryDetail.dubbo',
}
class EnquiryManage {
  // 详情
  getQueryDetail (param) {
    const url = URL.queryDetail
    return axios.post(url, param)
  }
}
export default new EnquiryManage()

我们将各个模块的接口，通过一个文件直接导出使用：

// src/api/index.js
import enquiry from './enquiry/enquiryManage'
export {
  enquiry
}

那我们如何使用呢？

import { enquiry } from '@/api'
async getDetailData () {
  const resp = await enquiry.getQueryDetail({
    inquiryId: Number(this.id),
  })
  console.log('result', resp)
},

（一）知识点一：new 是什么？

new：1.创建一个空的对象；2.链接到原型；3.绑定 this；4.返回新对象。为了继承原型属性而已。

function create() {
    let obj = {} // 创建一个空的对象
    let Con = [].shift.call(arguments) // 获取构造函数
    obj.__proto__ = Con.prototype // 设置空对象的原型
    let result = Con.apply(obj, arguments) // 绑定 this 并执行构造函数
    return result instanceof Object ? result : obj // 确保 new 处理的是个对象
}

对于实例对象来说，都是通过 new 产生的，无论是 function Foo() 还是 let a = { b : 1 } 。

function Foo() {}
// function 就是个语法糖
// 内部等同于 new Function()
let a = { b: 1 }
// 这个字面量内部也是使用了 new Object()

通过 new 的方式创建对象和通过字面量创建有什么区别？

对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object，但是你使用字面量的方式就没这个问题。

（二）知识点二：export 与 export default 的区别

在有 Babel 的情况下，我们可以直接使用 ES6 的模块化。export 用于导出模块的对外接口，import 用于导入其他模块提供的功能。

使用模块化的特点：1.解决命名冲突；2.提供复用性；3.提高代码可维护性。

1.ES6 模块

2.export

export 语句导出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

3.import

（1）import 编译时执行，只能静态引入；（2）引入变量只读，引入对象属性可以改写；

// 引入变量（方法、类）-（逐一加载）
import { firstName, lastName, year } from './profile.js';

// as关键字重命名
import { lastName as surname } from './profile.js';

// 整体加载
import * as circle from './circle';

4.export default

export default 就是输出一个叫做default的变量或方法，系统允许自定义命名。

export default 'hello'
// 引用并指定名字
import str from './hello.js'

5.import()

为了实现在运行中加载模块，引入了import()函数，实现了动态加载。

setTimeout(() => {
    import('./dynamic-data.js').then(res => {
        console.log(res.default.message)
    })
}, 1500)

6.export 与 export default 的区别

// 导出的是一个实例对象
export default new Login()
// 引入页面
import Login from 'xxxxx'; 
let foo = new Login();

export { Login }
// 这里主要是解构语法而已
import { Login } from 'xxxxx';