即使还没有读过我的文章《在处理网络数据的 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');

  

所以下次你需要改变你的项目时,评估下面哪种方法更有意义:
  • 删除代码,编写代码。
  • 重构代码,写适配器。

总结

请根据你的场景选择性使用。如果你的代码库滥用适配器和引入太多的抽象可能会导致复杂性增加,这也是不好的。
愉快的去使用适配器吧!
 
文章来源 | Github
 
 

调整JavaScript抽象的迭代方案的更多相关文章

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

    原文作者:Kaloyan Kosev 原文链接:https://css-tricks.com/adapting-javascript-abstractions-time/ 翻译译者:小溪里 校对:华翔 ...

  2. Javascript中的迭代、归并方法

    迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的 ...

  3. javascript抽象工厂模式

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  4. javascript学习笔记--迭代函数

    概要 这里的迭代函数指的是对数组对象的操作方法,js数组共有五个迭代函数:every.fifter.forEach.map.some. 1.every every方法,返回值为Boolean类型,tr ...

  5. JavaScript异步加载方案

    (1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 docume ...

  6. JavaScript中数组迭代方法(jquery)

    var arr = [1,2,4,5,6]; //1.forEach(让数组中的每一项做一件事)arr.forEach(function(item,index){    console.log(ite ...

  7. 反人类的MyEclipse之-调整JavaScript代码-花括号换行显示

    然后将除最后一项外所有的都勾选为Next Line

  8. 【JavaScript】HTML5存储方案

    1.Web SQL 2.IndexedDB 3.Local Storage 4.Session Storage 5.Cookies 6.Application Cache

  9. javascript 写农场迭代

    /** * 农场一头小母牛 * 每年生头小母牛 * 母牛五岁产母牛 * 二十年上多少牛 */ 划分程序,母牛只管自己的年龄能不能产牛仔,母牛是model同时也是工厂 农场只管养牛,收获新牛. 一年一个 ...

随机推荐

  1. 花式求解 LeetCode 279题-Perfect Squares

    原文地址 https://www.jianshu.com/p/2925f4d7511b 迫于就业的压力,不得不先放下 iOS 开发的学习,开始走上漫漫刷题路. 今天我想聊聊 LeetCode 上的第2 ...

  2. P6087 [JSOI2015]送礼物 01分数规划+单调队列+ST表

    P6087 [JSOI2015]送礼物 01分数规划+单调队列+ST表 题目背景 \(JYY\) 和 \(CX\) 的结婚纪念日即将到来,\(JYY\) 来到萌萌开的礼品店选购纪念礼物. 萌萌的礼品店 ...

  3. python设计模式之命令模式

    python设计模式之命令模式 现在多数应用都有撤销操作.虽然难以想象,但在很多年里,任何软件中确实都不存在撤销操作.撤销操作是在1974年引入的,但Fortran和Lisp分别早在1957年和195 ...

  4. Android Failed to find layer (XXX/XXX.xxActivity#0) in layer parent (no-parent).

    报错: Failed to find layer (XXX/XXX.xxActivity#0) in layer parent (no-parent). 解决: 将该xxActivity复制一份到桌面 ...

  5. RPC 框架 Dubbo 从理解到使用(一)

    技术架构演变 单一应用架构 通俗地讲,"单体应用(monolith application)"就是将应用程序的所有功能都打包成一个独立的单元.当网站流量很小时,只需一个应用,将所有 ...

  6. 在我们使用Redis作为一个LRU缓存的时候,怎么做才能更高效

    当用Redis作为一个LRU存储时,有些时候是比较方便的,在你增添新的数据时会自动驱逐旧的数据.这种行为在开发者论坛是非常有名的,因为这是流行的memcached系统的默认行为. LRU实际上只是支持 ...

  7. StructuredStreaming基础操作和窗口操作

    一.流式DataFrames/Datasets的结构类型推断与划分 ◆ 默认情况下,基于文件源的结构化流要求必须指定schema,这种限制确保即 使在失败的情况下也会使用一致的模式来进行流查询. ◆ ...

  8. Python 为什么没有 void 关键字?

    void 是编程语言中最常见的关键字之一,从字面上理解,它是"空的.空集.空白"的意思,最常用于 表示函数的一种返回值类型. 维基百科上有一个定义: The void type, ...

  9. linux 基本命令整理--转

      推荐:http://www.cnblogs.com/lingiu/p/3446647.html 1. 查看目录文件:ls2. 查看目前路径:psw3. 查看文件内容:cat 文件名4. 打开编辑器 ...

  10. Intriguing properties of neural networks

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! https://arxiv.org/abs/1312.6199v4 Abstract 深度神经网络是近年来在语音和视觉识别任务中取得最新性 ...