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

 

你可能感兴趣的:(ES6,class,new,export,export,default,模块化)