前端代码抽象与API使用之殇

2023-10-25 17:26:38

身处信息化的时代，前端开发的战场从网页转移到了Electron桌面应用、小程序、浏览器上的 web 应用、基于 React Native 等跨端引擎的 app，基于 Node.js 的工具或者服务等。这些应用虽然形态各异，但本质上都是为了解决问题。从这个角度来说，解决问题的代码才是一切的根本。问题解决得是否有效、高效，直接取决于代码质量。

而高质量的代码，需要满足以下三点：

代码具有可维护性 。在开发过程中，总会遇到代码修改的需求。代码的可维护性，决定着修改的难易程度。好的代码能够让开发人员快速理解原有代码的意图，从而快速完成修改。
代码具有可扩展性 。随着时间的推移，应用的功能会逐渐丰富。代码的可扩展性，决定着新增功能的难易程度。好的代码能够让开发人员方便地扩展原有代码，从而快速实现新功能。
代码具有健壮性 。应用运行在各种各样的环境中，可能会遇到各种各样的问题。代码的健壮性，决定着应用的稳定性。好的代码能够在各种各样的环境中稳定运行，不会轻易出现问题。

为了实现上述三点，开发者们总结了很多方法。其中，抽象和 API 的使用，是两个最常用的方法。抽象可以隐藏复杂的实现细节，让代码更加容易理解和维护。API 可以让开发者以一种统一的方式访问不同的服务或资源，从而提高开发效率。

然而，在实际的开发过程中，我们经常会遇到这样的情况：

API 暴露了太多的细节，导致代码难以理解和维护。
抽象的程度不匹配，导致代码难以扩展和健壮。

这两种情况都会导致适得其反的后果：业务开发和维护需要大量脑补和纠结，反而降低了开发效率。

针对以上问题，本文给出了两种解决方案：

解决方案一：包一层抽象 。在使用 API 时，可以包一层抽象，来隐藏 API 的细节。这可以使代码更加容易理解和维护。
解决方案二：对 API 进行兼容性封装 。在进行代码抽象时，可以对 API 进行兼容性封装，来保证代码的可扩展性和健壮性。这可以使代码更加容易扩展和维护。

包一层抽象

在使用 API 时，如果 API 暴露了太多的细节，我们可以包一层抽象，来隐藏 API 的细节。这可以使代码更加容易理解和维护。

例如，在使用 Node.js 的 fs 模块时，我们可以包一层抽象，来隐藏 fs 模块的细节。如下所示：

// fs-abstraction.js
const fs = require('fs');

// 定义一个抽象类
class FileSystem {
  constructor() {
    this.fs = fs;
  }

  // 定义一个读取文件的方法
  readFile(path) {
    return new Promise((resolve, reject) => {
      this.fs.readFile(path, 'utf-8', (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(data);
        }
      });
    });
  }

  // 定义一个写入文件的方法
  writeFile(path, data) {
    return new Promise((resolve, reject) => {
      this.fs.writeFile(path, data, 'utf-8', (err) => {
        if (err) {
          reject(err);
        } else {
          resolve();
        }
      });
    });
  }
}

// 使用抽象类
const fileSystem = new FileSystem();

fileSystem.readFile('path/to/file.txt').then((data) => {
  console.log(data);
}).catch((err) => {
  console.error(err);
});

fileSystem.writeFile('path/to/file.txt', 'Hello world!').then(() => {
  console.log('File written successfully.');
}).catch((err) => {
  console.error(err);
});

通过这种方式，我们可以将 fs 模块的细节隐藏起来，使代码更加容易理解和维护。

对 API 进行兼容性封装

在进行代码抽象时，我们可以对 API 进行兼容性封装，来保证代码的可扩展性和健壮性。这可以使代码更加容易扩展和维护。

例如，在对一个 REST API 进行抽象时，我们可以对 API 进行兼容性封装，如下所示：

// api-abstraction.js
const axios = require('axios');

// 定义一个抽象类
class API {
  constructor(baseUrl) {
    this.axios = axios.create({
      baseURL: baseUrl,
    });
  }

  // 定义一个 get 方法
  get(path, params) {
    return this.axios.get(path, { params });
  }

  // 定义一个 post 方法
  post(path, data) {
    return this.axios.post(path, data);
  }

  // 定义一个 put 方法
  put(path, data) {
    return this.axios.put(path, data);
  }

  // 定义一个 delete 方法
  delete(path) {
    return this.axios.delete(path);
  }
}

// 使用抽象类
const api = new API('https://example.com/api');

api.get('/users').then((response) => {
  console.log(response.data);
}).catch((err) => {
  console.error(err);
});

api.post('/users', { name: 'John Doe' }).then((response) => {
  console.log(response.data);
}).catch((err) => {
  console.error(err);
});

api.put('/users/1', { name: 'Jane Doe' }).then((response) => {
  console.log(response.data);
}).catch((err) => {
  console.error(err);
});

api.delete('/users/1').then(() => {
  console.log('User deleted successfully.');
}).catch((err) => {
  console.error(err);
});