唐霜

HHuploadify是一个纯粹的图片上传组件，说纯粹是因为只考虑把它用来上传图片。当然，上传文件也是没问题的，但是文件上传的UI应该和图片上传的UI有较大的区别，而且文件上传也不存在preview的问题。

为什么要升级？

HHuploadify最初的版本是我在Huploadify这个jquery插件的基础上开发的，UI改了，上传的时候支持的功能多了。在发布后的几年里，不断有人问我xxx可不可以，我的大部分回答，都是要自己写代码实现。这几天因为公司产品release之后相对有点闲了，就打算重写一遍HHuploadify。

大概花了两天的时间，重构过程还算顺利，最开始想支持IE8，但最后因为iframe提交时报dined错，就只能放弃了。现在插件能支持到IE9（IE9也有一点坑，但是大部分情况下还过得去）。而且，最重要一点，它不依赖jquery了。它是一个独立的组件，而且我发布到npm了。我这两年都在用webpack babel等构建工具，所以依赖感比较强，写ES6也很随意，所以源码都是ES6写的，ES6归ES6，但是有些api要考虑IE9，所以还是没敢太大胆用，比如还是在用for...in。但是，我已经习惯了直接import, export这样的语法，所以，当我想重新用HHuploadify的时候，发现不好用，它只是一个jquery插件。这就催生我重写一遍它。对于那些还在用或者准备要用的同学们，我可能要很遗憾的说，你想要实现的都可以实现，但是你要写的代码可能更多了。之所以这样，是因为我之前封装了几个函数，现在把它们去掉了，整个组件的核心都在这里，只需要通过class extends或者钩子函数就可以非常好的进行扩展。

看看DEMO

所以，它现在变得很风骚，不信你可以先看看效果：

最初级的配置，选择图片（多选）后点击上传按钮进行上传

添加一个auto的配置，选择图片（多选）之后自动上传图片

默认情况下，点击选择图片按钮后，打开的选择器可以一次性选择多张图片。如果是用户头像，那么只能选一张图片，只需要配置一个single选项即可。配置之后，这个实例只能上传一张图片。开始上传之后，选择按钮就会消失。

上传成功之后，用server端返回的url字段中的url作为新的预览图片。在一些需要裁剪的情况下可能会用到，只需要把showPreview设置为2即可。

通过showUploadProcess的配置，采用不同的上传进度展示效果。

假如你想默认就有几张图片，也是可以的，使用reset方法即可。

对HHuplodify进行扩展也超级简单，上图演示的就是利用jquery.dragsort插件扩展HHuploadify，对上传之后的图片列表可以拖拽的效果。

利用single选项，进行简单扩展之后，就可以实现一组固定的上传。

通过钩子函数，对上传的最大张数进行控制。上面图片演示中，最多只能上传4张图片。

这些场景应该很多都会覆盖你的上传的情况吧。当然，你有特殊的需求，没关系，只需要extends class或者在钩子函数中写逻辑即可。可配性强的同事，接口还是完全暴露可复写的。

安装和使用

你可以直接像以前一样在浏览器中直接引用，但是你也可以像module一样import到你的项目中，我已经发布了npm包，所以你可以这样干：

npm i -S hhuploadify

import 'hhuploadify/dist/HHuploadify.css' // 在webpack中可以直接使用css了import HHuploadify from 'hhuploadify'

let uploader = new HHuploadify({

  container: '#upload',

  url: 'http://localhost/upload',})

然后，在那个#upload的容器中就会有一个上传的UI效果出来。uploader就是这个实例了，它包含了所有的methods，你可以用它干你想干的事。当然，你也可以在配置中传入钩子函数来干你想干的事。

看下怎么扩展它：

import HHuploadify from 'hhuploadify'

export default class extends HHuploadify {

  myMethod() { // 新方法

  

  console.log(this.files)

  }

  reset(files) { // 复写的方法

  

  super.reset(files)

  

  console.log(files)

  }}

这样你就扩展出一个新方法，复写了一个原型链方法。是不是非常简单。

下载和仓库

如果你看了网上的一些资料，按照它们提供的方法来使用，可以下载1.0版本，如果你想给我提bug或者contribute的话，在github仓库上玩弄吧。

一起使用babel-loader和webpack UglifyJS时，babel会优先处理一遍代码，编译后的代码才进入webpack进行打包和优化操作。在使用扩展运算符...时，不同的情况会进行不同的处理。当在函数参数中使用时，会编译为arguments，而在调用参数时会编译为apply，如下：

function debug(...args) {
  console.log(...args)
}

会被编译为：

function debug() {
  var e
  (e = console).log.apply(null, arguments)
}

这是很奇怪的一种解释方法，为什么要用一个多余的e变量来隔离console和log呢？如果这样编译之后，其结果自然不能被UglifyJS识别，drop_console等选项也就不生效了。解决的办法，就是在调用函数时，直接采用apply。

function debug(...args) {
  console.log.apply(null, args)
}

因为没有使用扩展运算符，所以在编译的时候不会产生上面那种奇怪的分割代码，也就正常被UglifyJS优化了。

Promise实例有then方法和catch方法，一般用then来处理成功返回数据时的情况，为了把处理后的数据往下一个then传递，通过return一个新数据的方法，让下一个then的参数等于这个新数据。catch方法更有差别，当你调用一次catch之后，后面如果再继续调用catch方法，它们都会被忽略，因为从概念上也可以认为，catch之后，错误已经被捕获了，为了让后面的catch还能生效，和then的return类似，也可以通过一种方法往下传递，但是不是用return，而是用throw:

new Promise((resolve, reject) => reject('a')).catch(err => {
  console.log(err)
  throw err
})
.catch(err => console.log(err))

这样就可以使第二个catch也捕获到错误信息，当然，在第一个catch中，可以通过throw不同的err来传递不同的错误信息给下一个catch。

svg里面有时候会用pattern去写一个背景图片，然后在其他元素里面去使用fill: url(#patternId)来调用它，这样就可以实现在一个svg里面定义自己的背景图片，而且还可以使用svg来画这种背景图。

但是有一个问题是，在IE里面，fill调用不支持style属性中使用，比如下面的无效代码：

<rect style="fill: url(#patternId)">

在Chrome下是正常的，但是在IE中使用的时候，没法正常显示，而你需要将fill属性改为attr：

<rect fill="url(#patternId)">

这样才能正常显示你想要的背景图效果。

浏览器线程包括：GUI渲染线程，JavaScript引擎线程，浏览器事件触发线程，定时触发器线程，异步http请求线程。其中，JS引擎线程就是执行JS的主线程，GUI渲染线程跟JS引擎线程是互斥的，不能同时进行，所以当JS陷入死循环的时候，浏览器界面没法进行渲染，而如果渲染消耗了大量资源，JS也没法马上执行。

setTimeout(fun, 0)是一个有趣的现象。这里的知识点是，定时触发器线程和JS主线程是分开的，当执行setTimeout的时候，就是告诉JS主线程，需要被分发到定时触发器线程中去计时等待。线程与线程之间通过消息来通信，当定时触发器线程的某个任务执行完之后，它会把消息发送回主线程，这个消息其实就是回调函数，它把回调函数发回给主线程，但是发回的消息在主线程执行顺序的最末端。所以setTimeout(fun, 0)的效果虽然在时间上看上去是立即执行，但是相对于js程序而已，其实是有一个延时的，起码延时到当前主线程所有任务的最后面。

这好像没有什么用，但是起码在阅读代码的时候不会懵逼。

一个组件的sass里面，不应该直接引用某个第三方vendor来进行继承，因为当sass compile的时候，会把第三方继承过来的code全部编译过来，导致你的组件编译后的css里面有大量第三方vendor的样式。正确的做法是当你要继承的时候，仅引入第三方的module文件，比如：

@import "~bootstrap-sass/.../_colors.scss";

因为一般的sass项目都会将单独的变量、函数等放在单独的文件中，而这些文件里因为没有实际的样式规则代码，所以在编译之后，它们实际上不会产生最终的css样式。

而如果你在写一个sass项目的时候，也应该遵循这种原则，如果你的组件的sass打算给其他组件去继承，也应该提供一个这样的modules的出口，这样别人只需要继承你的这个modules的出口文件，而不是你的样式出口文件。