ES6原生实战Uploader工具类-从设计到实现.docx

? ? ES6原生实战Uploader工具类(从设计到实现) ? ? 作者：Chaser (本文来自作者投稿)? ? ? 原文地址：https://juejin.im/post/5e5badce51882549652d55c2 源码地址：/impeiran/Blog/tree/master/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，事件绑定 // 应该提供销毁API uploader.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 defaultOpt