【JavaScript设计模式】状态模式重构文件切片上传

一、什么是状态模式？

状态模式的定义：

对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为。 状态模式的优点：

结构清晰，状态模式将与特定状态相关的行为局部化到一个状态中，并且将不同状态的行为分割开来，满足“单一职责原则”。

将状态转换显示化，减少对象间的相互依赖。将不同的状态引入独立的对象中会使得状态转换变得更加明确，且减少对象间的相互依赖。

状态类职责明确，有利于程序的扩展。通过定义新的子类很容易地增加新的状态和转换。 状态模式的缺点：

状态模式的使用必然会增加系统的类与对象的个数。

状态模式的结构与实现都较为复杂，如果使用不当会导致程序结构和代码的混乱。

状态模式对开闭原则的支持并不太好，对于可以切换状态的状态模式，增加新的状态类需要修改那些负责状态转换的源码，否则无法切换到新增状态，而且修改某个状态类的行为也需要修改对应类的源码。 状态模式的应用场景：

当一个对象的行为取决于它的状态，并且它必须在运行时根据状态改变它的行为时，就可以考虑使用状态模式。

一个操作中含有庞大的分支结构，并且这些分支决定于对象的状态时。

二、文件切片上传

文件切片上传是一个比较常见的需求。其主要步骤如下：

读取文件基本信息

将文件按照指定大小切片

创建上传记录，用以标识文件片段

依次、并行上传文件片段（需注意浏览器的最大并行请求数） 另外还涉及到删除、重新上传等功能。 在文件上传的不同阶段，对文件不同操作的处理逻辑是不一样的，会用到大量if-else语句。 我们先看一段关于删除文件的代码：

Upload.delete = function() {  if (/* 创建上传记录中 */) {    /* 取消创建上传记录 */    /* 删除本条数据 */  } else if (/* 创建上传记录成功 */) {    /* 删除上传记录 */    /* 删除本条数据 */  } else if (/* 创建上传记录失败 */) {    /* 删除本条数据 */  } else if (/* 文件上传中 */) {    /* 删除上传记录 */    /* 取消上传 */    /* 删除本条数据 */  } else if (/* 文件上传失败 */) {    /* 删除上传记录 */    /* 删除本条数据 */  } else if (/* 文件上传成功 */) {    /* 删除上传记录 */    /* 删除文件 */    /* 删除本条数据 */  }}

如果后续需求调整，比如新增/*文件暂停上传*/的场景，需要改写else-if逻辑，这会使得我们的代码变得越来越庞大，从而变得难以维护和阅读。而且，在实际开发中，需要处理的逻辑肯定比这多得多，因此，重构此类代码是非常有必要的。

三、重构以上代码

1、我们先为文件上传的每个阶段都定义一个状态类：

/* 创建上传记录中 */let CreatingState = function () { }/* 创建上传记录成功 */let CreateSucceedState = function () { }/* 创建上传记录失败 */let CreateFailState = function () { }/* 文件上传中 */let UploadingState = function () { }/* 文件上传成功 */let UploadSucceedState = function () { }/* 文件上传失败 */let UploadErrorState = function () { }

2、分别为每个状态类设置删除方法

/* 创建上传记录中 */CreatingState.prototype.delete = function () {    /* 取消创建上传记录 */    /* 删除本条数据 */}/* 创建上传记录成功 */CreatingState.prototype.delete = function () {    /* 删除上传记录 */    /* 删除本条数据 */}/* 创建上传记录失败 */CreatingState.prototype.delete = function () {   /* 删除本条数据 */}/* 文件上传中 */CreatingState.prototype.delete = function () {    /* 删除上传记录 */    /* 取消上传 */    /* 删除本条数据 */}/* 文件上传成功 */CreatingState.prototype.delete = function () {    /* 删除上传记录 */    /* 删除本条数据 */}/* 文件上传失败 */CreatingState.prototype.delete = function () {    /* 删除上传记录 */    /* 删除文件 */    /* 删除本条数据 */}

3、创建Upload构造函数，为每种状态类创建一个示例对象

let Upload = function () {  this.creatingState = new CreatingState(this);  this.createSucceedState = new CreateSucceedState(this);  this.createFailState = new CreateFailState(this);  this.uploadingState = new UploadingState(this);  this.uploadSucceedState = new UploadSucceedState(this);  this.uploadErrorState = new UploadErrorState(this);  this.deleteSucceedState = new DeleteSucceedState(this)}

4、在不同的上传阶段变更Upload的状态，也是为了将事件委托给对应的状态类来执行

/* 创建上传记录中 */this.uploadState = this.creatingState/* 创建上传记录成功 */this.uploadState = this.createSucceedState/* 创建上传记录失败 */this.uploadState = this.createFailState/* 文件上传中 */this.uploadState = this.uploadingState/* 文件上传成功 */this.uploadState = this.uploadSucceedState/* 文件上传失败 */this.uploadState = this.uploadErrorState/* 将删除事件委托给当前状态类 */Upload.prototype.delete = function () {  this.uploadState.delete()}

5、使用

let uploader = new Upload();/* 删除文件 */uploader.delete()

重构结束。

原文：https://juejin.cn/post/7096410361313624071