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

即使还没有读过我的文章《在处理网络数据的 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)
  1. 更改:在私有 API._handleError 方法中:
  • 在响应对象中缺少 ok 布尔标志,但是,还有 statusText 属性。我们可以通过它来串起来,如果它的值是 OK,那么一切将没什么问题(附注:在 Fetch APIOKtrue 与在 Axios 中的 statusTextOK 是不一样的。但为了便于理解,为了不过于宽泛,不再引入任何高级错误处理。)
  1. 不变之处: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 之后,你会发现有一个功能并不适用于 XMLHttpRequestsAxios 的获取数据的方法),但之前使用 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');

所以下次你需要改变你的项目时,评估下面哪种方法更有意义:

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

总结请根据你的场景选择性使用。如果你的代码库滥用适配器和引入太多的抽象可能会导致复杂性增加,这也是不好的。

愉快的去使用适配器吧!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯移动品质中心TMQ的专栏

Android内存泄露测试不再蓝瘦,香菇

在进行Android内存泄露分析时,面对成千上万个对象,你是否蓝瘦,香菇?作为测试人员你在进行内存泄露测试之后,是否有勇气告诉开发同事程序已经没有内存泄露,可以...

2297
来自专栏青枫的专栏

day57_BOS项目_09

方式一:   第一步:获得activiti-eclipse-plugin.zip文件   第二步:将zip文件解压到eclipse的dropins目录中

342
来自专栏个人随笔

Microsoft Office Access

Microsoft Office Access各版本下载地址:http://www.accessoft.com/download.html 简介access(...

42712
来自专栏君赏技术博客

【已解决】对于 XCTest 测试中怎么让测试用例顺序执行?

我想写一些常规的测试用例,比如注册 登录 查看商品 添加购物车 check out 下单 支付等是否正常。

982
来自专栏cloudskyme

关于操作权限

第1章 引言 1.1 编写目的 详细说说操作权限并且在sshpermissions中是如何处理及使用操作权限的。 1.2 关于操作 这里所说的操作权限是指在我们...

3374
来自专栏马洪彪

Java设计模式(七)Decorate装饰器模式

一、场景描述 (一)问题 系统中最初使用Crystal Report(水晶报表)工具生成报表,并将报表发送给客户端查看,此时定义一CrystalReport工具...

4079
来自专栏伦少的博客

spark-submit报错:Application application_1529650293575_0148 finished with failed status

932
来自专栏腾讯Bugly的专栏

Android UI:机智的远程动态更新策略

1 问题描述 做过Android开发的人都遇到过这样的问题:随着需求的变化,某些入口界面通常会出现 UI的增加、减少、内容变化、以及跳转界面发生变化等问题。每次...

3299
来自专栏Seebug漏洞平台

初识 Fuzzing 工具 WinAFL

本文前两节将简要讨论 fuzzing 的基本理念以及 WinAFL 中所用到的插桩框架 DynamoRIO ,而后我们从源码和工具使用角度带你了解这个适用于 W...

3218
来自专栏魏琼东

使用Lua脚本语言开发出高扩展性的系统,AgileEAS.NET SOA中间件Lua脚本引擎介绍

一、前言      AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速...

1976

扫码关注云+社区