第六章、web前端架构师

一路繁花似锦绣前程 / 2023-08-18 / 原文

十二、通用上传组件开发以及使用
- 1、导学
- 2、上传组件需求以及开发流程

十二、通用上传组件开发以及使用

1、导学

* 开发通用上传组件
    - 通过TDD的方式，开发一个通用上传组件，然后将组件添加到编辑器中进行使用，从
      这个过程中衍生出很多的相关知识点
* 主要内容
    - 模拟真实开发场景，使用TDD的方式，一步步开发一个通用上传组件
    - 分析Element Plus中Uploader的源代码
    - 将上传组件应用到编辑器中
    - 对于知识点的发散和总结
        ~ Vue3中实例的类型
        ~ Vue3中组件通信方法
        ~ 预览本地图片的两种方法
        ~ HTMLImageElement家族的一系列关系
        ~ JSDOM是什么？jest是怎样采用它模拟浏览器环境的
* 关键词
    - TDD
    - 上传组件
    - 代码重构
    - ELement Plus源代码
    - 发散和总结的思维方式
* 学习方法
    - 真实场景，拥抱TDD和普通流程的混合开发方式，感受它的奇妙
    - 对于一个知识点的发散学习，追根溯源很有意思

2、上传组件需求以及开发流程

* 现在面临的问题
    - 没有很好的体现测试的优势
    - 缺少复杂组件的开发经验
* 解决办法
    - 一个通用上传组件
    - 原因：
        ~ 复杂的逻辑交互
        ~ 属性、方法、生命周期都有很多
        ~ 适合测试驱动开发
* 上传组件的定义
    - 上传是将信息通过网页或者上传工具发布到远程服务器上的过程。
    - 传统的form表单的方式
########
<form>
<input type="file" name="myFile"/>
<button type="submit">提交</button>
</form>
########
    - ajax发送异步请求的方式
* 将任务拆分
    - 将大块任务，量化成一系列Todo List，使用测试驱动，然后把任务划掉
    - 对工作目标非常清晰，并且可进行细微的调整
    - 随着时间的进行，对完成时间越来越清晰可控
* 上传组件的需求
    - 基本上传流程-点击按钮选择，完成上传
    - 支持上传文件列表
        ~ 显示文件名称
        ~ 状态
        ~ 可删除
        ~ 显示上传进度
        ~ 有可能有更丰富的显示支持？
    - 自定义模板
        ~ 支持初始容器自定义
        ~ 支持上传完毕后自定义
    - 支持一系列生命周期钩子事件，上传事件
        ~ beforeUpload
        ~ onProgress
        ~ onSuccess
        ~ onError
        ~ onChange
    - 拖拽上传支持
    - 等等