译｜调整JavaScript抽象的迭代方案

• 原文做者：Kaloyan Kosev
• 原文连接：https://css-tricks.com/adapting-javascript-abstractions-time/
• 翻译译者：小溪里
• 校对：华翔、小冬

即便尚未读过个人文章《在处理网络数据的 JavaScript 抽象的重要性》，你也颇有可能已经意识到代码的可维护性和可扩展性很重要，这也是介绍 JavaScript 抽象的目的。

为了更加清楚的说明，咱们假设在 JavaScript 中抽象是一个模块。

一个模块的最初实现只是它们漫长（也许是持久的）的生命周期过程的开始。我将一个模块的生命周期分红 3 个重要阶段。

1. 引入模块。在项目中编写该模块或复用该模块；
2. 调整模块。随时调整模块；
3. 移除模块。

在我先前的文章中，重心放在了第一点上。而在这篇文章中，我将把重点放在第二点上。

模块更改是我常常碰到的一个难题。与引入模块相比，开发者维护和更改模块的方式对保证项目的可维护性和可拓展性是同等重要甚至是更加剧要。我看过一个写得很好、抽象得很好的模块随着时间推移历经屡次更改后被完全毁了。我本身也常常是形成那种破坏性更改的其中一个。

当我说破坏性，我指的是对可维护性和可扩展性方面的破坏。我也明白，当面临项目最后交付期限的压力时，放慢速度以进行更好的修改设计并非优先选择。

开发者作出非最优修改的缘由可能有不少种，我在这里想特别强调一个：

以可维护的方式进行修改的技巧

这种方法让你的修改显得更专业。

让咱们从一个 API 模块的代码示例开始。之因此选择这个示例，是由于与外部 API 通讯是我在开始项目时定义的最基本的抽象之一。这里的想法是将全部与 API 相关的配置和设置（如基本 URL，错误处理逻辑等）存储在这个模块中.

我将编写一个设置 API.url、一个私有方法 API._handleError() 和一个公共方法 API.get():

class API {
  constructor() {
    this.url = 'http://whatever.api/v1/';
  }

  /**
   * API 数据获取的特有方法
   * 检查一个 HTTP 返回的状态码是否在成功的范围内
   */
  _handleError(_res) {
    return _res.ok ? _res : Promise.reject(_res.statusText);
  }

  /**
   * 获取数据
   * @return {Promise}
   */
  get(_endpoint) {
    return window.fetch(this.url + _endpoint, { method: 'GET' })
      .then(this._handleError)
      .then( res => res.json())
      .catch( error => {
        alert('So sad. There was an error.');
        throw new Error(error);
      });
  }
};

在这个模块中，公共方法 API.get() 返回一个 Promise。咱们使用咱们抽象出来的 API模块，而不是经过 window.fetch() 直接调用 Fetch API 。例如，获取用户信息 API.get（'user'）或当前天气预报 API.get（'weather'）。实现这个功能的重要意义在于Fetch API与咱们的代码没有紧密耦合。

如今，咱们面临一个修改！技术主管要求咱们把获取远程数据的方式切换到Axios上。咱们该如何应对呢？

在咱们开始讨论方法以前，咱们先来总结一下什么是不变的，什么是须要修改的：

1. 更改：在公共 API.get() 方法中

   • 须要修改 axios() 的 window.fetch()调用；须要再次返回一个 Promise， 以保持接口的一致, 好在 Axios 是基于 Promise 的，太棒了！
   • 服务器的响应的是 JSON。经过 Fetch API 并经过链式调用 .then( res => res.json()) 语句来解析响应的数据。使用 Axios，服务器响应是在 data 属性中，咱们不须要解析它。所以，咱们须要将.then语句改成.then（res => res.data）。

2. 更改：在私有 API._handleError 方法中：

   • 在响应对象中缺乏 ok 布尔标志，可是，还有 statusText 属性。咱们能够经过它来串起来，若是它的值是 OK，那么一切将没什么问题（附注：在 Fetch API 中 OK 为 true 与在 Axios 中的 statusText 为 OK 是不同的。但为了便于理解，为了避免过于宽泛，再也不引入任何高级错误处理。）
3. 不变之处：API.url 保持不变，咱们会发现错误并以愉快的方式提醒他们。

讲解完毕！如今让咱们深刻应用这些修改的实际方法。

方法一：删除代码。编写代码。

class API {
  constructor() {
    this.url = 'http://whatever.api/v1/'; // 如出一辙的
  }

  _handleError(_res) {
      // DELETE: return _res.ok ? _res : Promise.reject(_res.statusText);
      return _res.statusText === 'OK' ? _res : Promise.reject(_res.statusText);
  }

  get(_endpoint) {
      // DELETE: return window.fetch(this.url + _endpoint, { method: 'GET' })
      return axios.get(this.url + _endpoint)
          .then(this._handleError)
          // DELETE: .then( res => res.json())
          .then( res => res.data)
          .catch( error => {
              alert('So sad. There was an error.');
              throw new Error(error);
          });
  }
};

听起来很合理。 提交、上传、合并、完成。

不过，在某些状况下，这可能不是一个好主意。想象如下情景：在切换到 Axios 以后，你会发现有一个功能并不适用于 XMLHttpRequests（ Axios 的获取数据的方法），但以前使用 Fetch API 的新型浏览器工做得很好。咱们如今该怎么办？

咱们的技术负责人说，让咱们使用旧的 API 实现这个特定的用例，并继续在其余地方使用 Axios 。你该作什么？在源代码管理历史记录中找到旧的 API 模块。还原。在这里和那里添加 if 语句。这样听起来并不太友好。

必须有一个更容易，更易于维护和可扩展的方式来进行更改！那么，下面的就是。

方法二：重构代码，作适配！

重构的需求立刻来了！让咱们从新开始，咱们再也不删除代码，而是让咱们在另外一个抽象中移动 Fetch 的特定逻辑，这将做为全部 Fetch 特定的适配器（或包装器）。

HEY!???对于那些熟悉适配器模式（也被称为包装模式）的人来讲，是的，那正是咱们前进的方向！若是您对全部的细节感兴趣，请参阅这里个人介绍。

以下所示：

步骤1

将跟 Fetch 相关的几行代码拿出来，单独抽象为一个新的方法 FetchAdapter。

class FetchAdapter {
  _handleError(_res) {
    return _res.ok ? _res : Promise.reject(_res.statusText);
  }

  get(_endpoint) {
    return window.fetch(_endpoint, { method: 'GET' })
      .then(this._handleError)
      .then( res => res.json());
  }
};

步骤2

重构API模块，删除 Fetch 相关代码，其他代码保持不变。添加 FetchAdapter 做为依赖（以某种方式）：

class API {
  constructor(_adapter = new FetchAdapter()) {
    this.adapter = _adapter;

    this.url = 'http://whatever.api/v1/';
  }

  get(_endpoint) {
    return this.adapter.get(_endpoint)
      .catch( error => {
        alert('So sad. There was an error.');
        throw new Error(error);
      });
  }
};

如今状况不同了！这种结构能让你处理各类不一样的获取数据的场景（适配器）改。最后一步，你猜对了！写一个 AxiosAdapter！

const AxiosAdapter = {
  _handleError(_res) {
    return _res.statusText === 'OK' ? _res : Promise.reject(_res.statusText);
  },

  get(_endpoint) {
    return axios.get(_endpoint)
      then(this._handleError)
      .then( res => res.data);
  }
};

在 API 模块中，将默认适配器改成 AxiosAdapter：

class API {
  constructor(_adapter = new /*FetchAdapter()*/ AxiosAdapter()) {
    this.adapter = _adapter;

    /* ... */
  }
  /* ... */
};

真棒！若是咱们须要在这个特定的用例中使用旧的 API 实现，而且在其余地方继续使用Axios？没问题！

//无论你喜欢与否，将其导入你的模块，由于这只是一个例子。
import API from './API';
import FetchAdapter from './FetchAdapter';

//使用 AxiosAdapter（默认的）
const API = new API();
API.get('user');


// 使用FetchAdapter
const legacyAPI = new API(new FetchAdapter());
legacyAPI.get('user');

因此下次你须要改变你的项目时，评估下面哪一种方法更有意义：

• 删除代码，编写代码。
• 重构代码，写适配器。

总结请根据你的场景选择性使用。若是你的代码库滥用适配器和引入太多的抽象可能会致使复杂性增长，这也是很差的。

愉快的去使用适配器吧！

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp官网：https://www.ikcamp.com
访问官网更快阅读所有免费分享课程：
《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》
《iKcamp出品｜基于Koa2搭建Node.js实战项目教程》
包含：文章、视频、源代码