近期前端开发总结之架构与代码规范

近期做了一些项目，h5、web、小程序都有，胡言乱语几句总结

1、关于组件设计

因为是维护的老代码，引发了这个思考，比如这个上传功能的按钮，旧的遗留代码是这个按钮，以及上传功能（包括各种渠道：不同地区，不同端的业务逻辑）以及上传后的结果展示，都放在一个vue组件里面，然后代码一千多行（代码我就不展示了，商用代码），我看到这代码的时候我内心是比较崩溃的，万一产品改了上传按钮的样式和位置，还有不同地方不同展示，那就悲剧了，事实我的担忧是没错的，马上就接到了改这个的需求，囧

我拿到这个需求后，进行了全新的设计，封装一个纯粹的上传库Uploader，上传按钮和上传结果展示这些UI层的东西不放入Uploader，对，方便产品随便折腾改，在Uploader里面设计好事件系统和一些api接口，甚至还有filter钩子系统，这样，就基本可以不加任何UI层的代码进Uploader，秀下代码吧，:)

/*
通用上传组件
Package: Uploader
Author: deng_   dclnet@qq.com
Date: 2019-03-08

=================================
ui层业务代码请不要随意放入此组件 !!!
=================================
-------------------------------------------------------
使用
1、初始化
var uploader = new Uploader(option);

var uploader = new Uploader({
  // 上传类型 详见 Uploader.uploadType
  uploadType: Uploader.uploadType.album,
  // 限制上传文件个数
  maxCount: 9,
  // 限制单个文件大小，单位字节
  fileMaxSize: 50000000,
  // 允许上传文件类型扩展名
  ext: ['jpg', 'png', 'gif', 'mp4'],
  // 额外请求头
  header: {},
  // 用来指定跨域的请求是否应该使用证书（如cookie或授权header头）
  withCredentials: true,
  // 允许同时并发上传文件个数
  maxSyncCount: 10,
  // 接口参数
  data: {
    path: 'path', // uploadType为album时不必传
    msgTitle: '小钻风一号',
    // msgCnt: string|function（函数必须同步返回字符串）
    // msgCnt 中可用以下变量，实际会被替换成具体值
    // {totalCount}      上传文件总数
    // {uploadedCount}   上传成功文件数
    // {failedCount}     上传失败文件数
    msgCnt: '在《XXXX》上传了{uploadedCount}张图'
  }
});
2、设置要上传的文件
uploader.setFiles(files);
或
uploader.setFilesFromBase64([
  {
    base64: "data:image/png;base64,yyyxxxzzz...",
    filename: "test.png"
  }
])
3、注册事件
uploader.on(eventName, eventHandler);

uploader.on('beforeUpload', function(data) {});
uploader.on('uploadedItem', function(data) {});
uploader.on('uploadComplete', function(data) {});
...
4、校验（文件个数、大小、文件类型）
var errors = uploader.validate();
5、上传
uploader.upload();

------------------------------------------------------
>上传类型
Uploader.uploadType = {
  album: 1,       // 普通相册（相片或视频）
  music: 2,       // 音乐目录
  document: 3,    // 文档目录
  avatar: 4       // 头像目录
}
------------------------------------------------------
>上传状态 见 Uploader.status 定义
------------------------------------------------------
>错误码 见 Uploader.errorCode 定义
------------------------------------------------------
>事件
filesQueued          添加文件队列后
afterValidate        校验后
beforeUpload         上传前
beginUpload          开始上传
beforeUploadItem     上传单个文件前
uploadItem           上传单个文件
progress             文件上传进度
uploadedItem         上传单个文件完毕（无论成功与否）
uploadComplete       所有上传完毕
------------------------------------------------------
>过滤钩子名
uploadUrl            过滤上传地址（使用上传地址时调用）
使用:
uploader.addFilter('钩子名', callback); // callback 必须同步返回

uploader.addFilter('uploadUrl', function(url) {
  return url;
})
------------------------------------------------------
>对象方法
reset                重置（校验结果，上传状态，统计等）
setFiles             设置上传文件
setFilesFromBase64   从Base64设置要上传的文件
getFiles             获取要上传的文件
on                   注册事件
off                  解绑事件
validate             校验
upload               上传
getStatus            获取上传状态
getTotalCount        获取上传文件数
getUploadedCount     获取上传成功文件数
getFailedCount       获取上传失败文件数
getUploadedFiles     获取上传成功的文件
getErrors            获取校验错误
setOption            修改设置option
setData              修改设置option.data接口参数
abort                终止全部XHRHttpRequest上传请求
addFilter            添加过滤钩子
removeFilter         移除过滤钩子
*/

以上是组件的使用说明，

这样初始化后直接给上传展示的UI类组件，

upload-widget进度与结果展示组件在需要的地方注册事件，这样不是很完美吗？ 

多样式，不同位置的input上传按钮和上传进度，结果的展示与Uploader无关，这样需求随便改也不至于代码改动太大，甚至都不用改Uploader；

小结：一个小组件，甚至一个小按钮引发的一些功能，在封装组件的时候，尽量考虑下一些经常变的东西和一些不经常变的东西，这样或许更好。

2、代码规范

本来这个问题不想说的，一般有些编码经验的应该会懂，这也是从旧有的代码提出来，稍微说下，

代码格式规范就不多说了，比如，一些错误码，那种一大串数字字符串的错误码，渠道码，等等，建议是独立出来在一个文件里面定义好，代码里面不要直接写一串数字，那东西你自己过几天来看，能知道是啥意思？

这样定义一下不好吗？使用也方便，看的也一目了然，

还有一些小问题：

别在 if-else 判断里面直接写中文做对比吧，那个有编码不同导致隐患的啊。

配置参数，配置文件独立一个文件就很好了嘛，放在一个app的实例里面，不用考虑依赖死循环吗？在app没有实例化的地方引用呢？

最后： 不管是封装组件，还是写一个小小的函数，或者定义一个数据，多思考下放在哪里，怎么放，该分开还是组合一起放或许会为以后的工作减少不少工作量，又能更快更好完成任务哦~

以上暂时这么多了，胡乱写写，提醒自己，也给有缘看到的人提个醒。谢谢！