问题是在我这两天在重构我的前端管理系统的上传功能时候遇到的问题，大致要求是：

• 用户选择文件后批量上传到七牛
• 显示上传队列中各文件的文件名和上传进度
• …

代码像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* input[type=file]触发了change事件, 执行上传 */
function filechange (e) {
  for (var file of e.target.files) {
    var task = {            // 建立上传任务对象
      complete: false,
      percent: 0,
      loaded: 0,
      name: file.name,
      size: file.size
    }
    queue.unshift(task)     // 插入队伍前端
    qiniu.upload(file, key, token).subscribe({  // 开始ajax异步上传
      next (res) {                              // 上传进度更新回调
        task.percent = res.total.percent        // 更新每个task的上传进度信息
        task.loaded = res.total.loaded
      },
      error: (err) => console.log(err),         // 上传错误回调
      complete (res) {                          // 上传完成回调
        task.complete = true                    // 标记每个task上传完成
        // post and save to db ...
      }
    })
  }
  e.target.value = ''   // 清空value的值确保选择相同的文件可以正确触发change事件
}

咋一看代码很正常，相信有的同学根据需求第一时间会写出我这样的代码。如果用相同逻辑的java代码去运行的话是没问题的，但js这么写的话就有问题了:
回调程序永远只更新最后一个unshift()到队列的task的上传进度!

自从用了vuejs之后，对jquery越来越抵触了，项目里遇到什么好用的插件都想去掉jquery依赖重写一遍…

今天机缘巧合之下发现了http://youmightnotneedjquery.com这个网站，假如你也恰好想用原生javascript实现jquery某个函数的功能而又不知道怎么做的时候，或者只为了jquery某个函数而不想引入整个类库的时候，与其去翻jquery源码，不如来试试这个网站。

例如我要记得要获取某元素相对于文档根部(document)的位置信息，可以用jquery的offset()方法：

1

$('#id').offset() // {left: 66, top: 666}

我想要知道纯js如何实现这个方法，在http://youmightnotneedjquery.com里搜索一下，它就会告诉你可以这样实现offset：

1
2
3
4
5

var rect = el.getBoundingClientRect();
{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

原来也没怎么复杂嘛，它还会显示支持浏览的最低版本是IE8+，是不是很方便？

方案一： 使用图形化设置工具

openSUSE集成有图形界面操作环境，安装软件包可以通过管理员设置工具 YaST (Yet another Setup Tool，SUSE特有的强大设置工具) ：

开始菜单 -> 系统 -> YaST -> Software -> Software Management -> 输入搜索关键字，如 subversion，选择结果安装即可。

YaST几乎可完成所有的系统任务，比如：

• 安装和卸载软件（下章介绍）
• 配置防火墙
• 开启和禁用系统服务
• 软件安装源（添加、修改或禁用软件源）
• 用户和组管理（设置用户权限、添加删除用户）
• …

如果您不想用YaST, 也可以用命令行手动编辑配置文件来完成相同的任务。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment