『设计』ES6原生实战Uploader工具类(从设计到实现) |

前言
本文将带你基于ES6的面向对象，脱离框架使用原生JS ，从设计到代码实现一个Uploader基础类，再到实际投入使用。通过本文，你可以了解到一般情况下根据需求是如何合理构造出一个工具类lib 。
需求描述相信很多人都用过/写过上传的逻辑，无非就是创建input[type=file]标签，监听onchange事件，添加到FormData发起请求。
但是，想引入开源的工具时觉得增加了许多体积且定制性不满足，每次写上传逻辑又会写很多冗余性代码。在不同的toC业务上，还要重新编写自己的上传组件样式。
此时编写一个Uploader基础类，供于业务组件二次封装，就显得很有必要。
下面我们来分析下使用场景与功能：

选择文件后可根据配置，自动/手动上传，定制化传参数据，接收返回。
可对选择的文件进行控制，如：文件个数，格式不符，超出大小限制等等。
操作已有文件，如：二次添加、失败重传、删除等等。
提供上传状态反馈，如：上传中的进度、上传成功/失败。
可用于拓展更多功能，如：拖拽上传、图片预览、大文件分片等。

然后，我们可以根据需求，大概设计出想要的API效果，再根据API推导出内部实现。
可通过配置实例化

const uploader = new Uploader({url: '',// 用于自动添加input标签的容器wrapper: null,// 配置化的功能 ， 多选、接受文件类型、自动上传等等multiple: true,accept: '*',limit: -1, // 文件个数autoUpload: false// xhr配置header: {}, // 适用于JWT校验data: {} // 添加额外参数withCredentials: false});

状态/事件监听

// 链式调用更优雅uploader.on('choose', files => {// 用于接受选择的文件 ， 根据业务规则过滤}).on('change', files => {// 添加、删除文件时的触发钩子 ， 用于更新视图// 发起请求后状态改变也会触发}).on('progress', e => {// 回传上传进度}).on('success', ret => {/*...*/}).on('error', ret => {/*...*/})

外部调用方法这里主要暴露一些可能通过交互才触发的功能，如选择文件、手动上传等

uploader.chooseFile();// 独立出添加文件函数 ， 方便拓展// 可传入slice大文件后的数组、拖拽添加文件uploader.loadFiles(files);// 相关操作uploader.removeFile(file);uploader.clearFiles()// 凡是涉及到动态添加dom ， 事件绑定// 应该提供销毁APIuploader.destroy();

至此，可以大概设计完我们想要的uploader的大致效果，接着根据API进行内部实现。
内部实现使用ES6的class构建uploader类，把功能进行内部方法拆分，使用下划线开头标识内部方法。
然后可以给出以下大概的内部接口：

class Uploader {// 构造器 ， new的时候 ， 合并默认配置constructor (option = {}) {}// 根据配置初始化 ， 绑定事件_init () {}// 绑定钩子与触发on (evt) {}_callHook (evt) {}// 交互方法chooseFile () {}loadFiles (files) {}removeFile (file) {}clear () {}// 上传处理upload (file) {}// 核心ajax发起请求_post (file) {}}

构造器 - constructor 代码比较简单，这里目标主要是定义默认参数，进行参数合并，然后调用初始化函数

class Uploader {constructor (option = {}) {const defaultOption = {url: '',// 若无声明wrapper, 默认为body元素wrapper: document.body,multiple: false,limit: -1,autoUpload: true,accept: '*',headers: {},data: {},withCredentials: false}this.setting = Object.assign(defaultOption, option)this._init()}}