【前端招聘】360广告技术部招聘前端开发工程师（北京）
360点睛实效平台是基于360导航，好搜等产品的推广营销平台。是360广告技术部最重要的商业化平台，点睛前端团队承载了平台最重要的变现功能。在这里，你将同奇舞团的众多前端大牛们一起激扬代码，一较高下。
最新发布
如何把 Callback 接口包装成 Promise 接口
前端开发尤其 Node.js 开发中，经常要调用一些异步接口，如：文件操作、网络数据读取。而这些接口默认情况下往往是通过 Callback 方式提供的，即：最后一个参数传入一个回调函数，当出现异常时，将错误信息作为第一个参数传给回调函数，如果正常，第一个参数为 null，后面的参数为对应其他的值。
使用Gulp构建网站小白教程
行业里有一种批评，说前端太浮躁，总是追逐新技术，感觉 grunt 还不熟悉，突然一夜之间满大街都在谈论 gulp 了。月影觉得不能怪技术发展太快，技术发展总是带来好处多于坏处，有时候我们确实需要鼓起勇气去“追求”技术潮流，当然理由是为了弄明白为什么有这些技术工具，而无关于什么浮躁之类的事儿。
也许是从业很多年有点累了，月影也对技术有些后知后觉，感觉 gulp 已经火了很久，才终于想起来写这篇文章，也许现在，很多工程师早已又去追求其他的什么类似的构建工具了。不管怎么样，如果你是一位前端工程师，你从来没有想过用构建工具优化网站这种事儿，或者你在工作中所在的团队和平台已经有成熟的工具，工作中不用自己再去琢磨 gulp 。你仍然可以暂时停下来阅读这篇文章，看看 gulp 这样的构建工具如何能帮你更简单地在构建的时候自动优化你的网站，也许你的个人博客也需要优化，也许你换了工作，要和之前熟悉不一样的构建工具，然而基本原理终归是“一招鲜吃遍天”的，不是吗？
Promise 与定时器
程序的迭代
自然界中的某些“模型”是由不断重复的局部构成的整体，“迭代”则是人类对这些活动的认知中总结出来的模式。
迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。
函数式编程离我们有多远？
函数式编程（Functional Programming）其实相对于计算机的历史而言是一个非常古老的概念，甚至早于第一台计算机的诞生。函数式编程的基础模型来源于 λ 演算，而 λ 演算并非设计于在计算机上执行，它是由 Alonzo Church 和 Stephen Cole Kleene 在 20 世纪三十年代引入的一套用于研究函数定义、函数应用和递归的形式系统。
随着计算机语言、Web和前端的发展，JavaScript这门语言被越来越广泛地使用。作为现代编程语言的代表作之一的JavaScript，与和它具有相似性的一些现代编程语言一样，都有着函数式的某些特性，以至于 Douglas Crockford 在他写的 《JavaScript : The Good Parts》中说，JavaScript 是披着 C 外衣的 Lisp。
由NPM引发的关于left-pad的那些事儿
说明：之前关于算法复杂度的描述部分不严谨，引起某些同学的疑义，在这里特别声明了算法仅考虑循环次数，并不包括String的concat操作，由于v8引擎对字符串concat的时间复杂度接近于常量（测试代码），因此循环次数对算法效率的影响比较大，后面的benchmark测试也可以说明问题。最后，算法时间复杂度减小，并不一定快，不一样的指令耗费的时间不一样，所以实际工程中还需要以实际测试为准。特别感谢：@flowmemo 的 String.prototype.repeat在V8和Chakra中的实现 —— 月影 2016-03-29
最近NPM社区出了一件大事，一个开发者对NPM公司不满，unpublish了自己的所有模块。其中包括被广泛使用的left-pad，导致Babel、ReactNative、Ember等大量工具构建失败。
这件事件本身不是我们这篇文章要讨论的主要内容，关注事件的同学可以移步知乎参与相关讨论。
本文讨论的内容是关于 left-pad 这个函数的实现。
【视频】用 CSS 和 JS 实现径向动画菜单的效果
BFC 神奇背后的原理
[译]回调地狱
用 FILESYSTEM API 实现文件下载器
各种基于 HTML5 的文件上传已经被大家玩得烂熟，常见的文件夹上传、拖拽上传以及拷贝剪切板数据上传，都可以在各大网盘、WebIM 中见到。本文实现的纯 JavaScript 多区块并发下载器，要使用到 FileSystem 中相对不那么常见的 FileWriter。
本文涉及知识较多，我并不打算全部介绍它们。示例代码中使用了 when.js 这个异步框架，它的用法请看官方文档或我写的《异步编程：WHEN.JS 快速上手》；文中涉及到的 HTTP 知识可以参考 RFC2616，或者《HTTP 权威指南》；本文代码仅在 Chrome 29 测试过，FileSystem 的完整浏览器支持度请直接去 CanIUse 查；本文未涉及到的 FileSystem 其它知识，请参考 html5rocks 的这篇文章，不过需要注意的这篇文章完成时间很早，部分代码已失效（如文中的 BlobBuilder 已被废弃）；JavaScript 中的 Typed Array 也都可以在网上找到详细介绍。
再说一点，文中示例代码未做封装，也完全没有考虑异常流程。这是我写博客的一惯原则：示例代码只为了把事情讲明白，如果要在实际项目中使用，需要读者自己去思考并加工。
废话说完，正式开始今天的主题。。。
获取下载文件信息
我们的 HTTP 下载器目标是下载指定 URL 对应的文件。为了方便后面的处理，首先，我们要获取这个文件的基本信息。虽然实际应用中我们需要的信息往往会由服务端提供，但本文目标是「完全不借助服务端语言（如 PHP），只使用浏览器 JavaScript 将 Nginx 托管的文件下载到本地」，所以这里采用纯客户端方案。
我们关心的是文件大小（便于分配任务）和文件类型（保存时要用到）。这两个信息在 HTTP 响应头中都有，分别是 Content-Length 和 Content-Type，可以通过 XHR（XMLHttpRequest）拿到它们。XHR 的 readyState 有 0 - 4 几种状态，等于 2 的时候就可以拿到响应头了。
按照上面的分析，通过 XHR 给目标文件发送 GET 请求，并在 readyState 等于 2 时获取响应头信息，再 abort() 掉请求就可以了。但实际上，HTTP 协议规定了「HEAD」这种请求方法，更适合做这件事情。文档对 HEAD 是这样说明的：
少数服务器不支持 HEAD，本文直接忽略。现在开始编写我们的 URL 分析工具，代码如下：
function UriAnalyser(url) {
var deferred = when.defer();
var xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onreadystatechange = function() {
if(2 == this.readyState) {
var ret = {
mimeType : xhr.getResponseHeader('Content-Type'),
size : xhr.getResponseHeader('Content-Length') | 0
};
deferred.resolve(ret);
}
};
xhr.send();
return deferred.promise;
}
代码很简单，不用解释了。UriAnalyser 接收 URL 参数并返回 promise，在获取到相关信息后 resolve。试用下：
var url = 'http://dl.qgy18.com/file.zip';
when(UriAnalyser(url)).then(function(o){ console.log(o) });
> Object {mimeType: "application/zip", size: 7992987}
在 FileSystem 创建文件
接下来，我们要在浏览器的 FileSystem 中创建一个区域，用来保存即将下载到的文件。出于安全考虑，浏览器中的 FileSystem 运行在沙箱中。要使用它，首先需要请求权限：
window.requestFileSystem(type, size, successCallback, errorCallback);
type 是文件系统类型，有 window.TEMPORARY 和 window.PERSISTENT 两种常量，区别是：TEMPORARY 类型的数据随时可能会被浏览器删掉；PERSISTENT 数据不会被浏览器清理，但需要用户额外授权。size 是存储大小，字节为单位。后两个参数分别是请求文件系统成功和失败对应的回调，successCallback 的第一个参数是对文件系统的引用，我们用 fs 表示，后面还会用到。
下面两个方法分别用来获取文件系统中的目录和文件（目标不存在则新建）：
fs.root.getDirectory(dirName, {create: true}, function(dirEntry) { ... }, errorCallback);
fs.root.getFile(filePath, {create: true}, function(fileEntry) { ... }, errorCallback};
现在，我们编写「根据指定的文件名，在文件系统中创建对应空白文件」的方法如下：
function CreateFile(name) {
var deferred = when.defer();
window.webkitRequestFileSystem(window.TEMPORARY, 10 * 1024 * 1024, function(fs) {
var dir = (+ new Date).toString(36);
fs.root.getDirectory(dir, {create: true}, function(dirEntry) {
var file = dir + '/' + name;
fs.root.getFile(file, {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
var ret = {
fileEntry : fileEntry,
fileWriter : fileWriter
};
deferred.resolve(ret);
});
});
});
});
return deferred.promise;
};
这个 promise 会返回 fileEntry 和 fileWriter，后面会用到。试用下：
var file = 'a.js';
when(CreateFile(file)).then(function(o){ console.log(o) });
> Object {fileEntry: FileEntry, fileWriter: FileWriter}
开始下载
现在开始编写下载代码。要实现并发下载，首先要合理分配任务。HTTP 协议中规定可以使用请求头的 Range 字段指定请求资源的范围。例如服务端收到「Range : bytes=10-100」这样的请求头，只需要返回资源的 10-100 字节这部分就可以了，这样的响应状态码为 206。有些服务器不支持 Range，本文继续忽略。
现在，离最终目标越来越近了。我们只需要再实现支持指定 Range 的下载器和任务分配器就可以了。下载器比较简单，直接看代码：
function Downloader(url, mimeType, range) {
var deferred = when.defer();
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.response != null) {
var blob = new Blob(
[new Uint8Array(this.response)],
{ type: mimeType }
);
var ret = {
size : this.response.byteLength | 0,
blob : blob
};
deferred.resolve(ret);
}
}
};
xhr.setRequestHeader("Range", "bytes=" + range);
xhr.responseType = 'arraybuffer';
xhr.send();
return deferred.promise;
};
下载器继续使用 promise 实现，它会在获取到响应数据时 resolve，返回指定 Range 的数据和大小。这样，把所有下载器丢给 when.all()，就可以在所有任务完成后触发下一步操作，顺序还不会乱。
文件全部下载完后，通过 fileWriter.write 方法就可以写入前面获得的 fileEntry 了。需要注意的是，当前数据写完之后才能开始新的写入，否则会产生异常。是否写完可以通过 fileWriter.onwriteend 来获得。下载完一部分数据就写一部分当然也可以，原理是类似的。
我把下载器 XHR 的 responseType 设置为「arraybuffer」，是为了获取每个下载器得到的长度。把全部下载器得到的长度加起来，跟分析器得到的文件大小做对比，可以粗略地检查文件完整性。
任务分配和合并文件的代码不贴了，太占篇幅，请直接看最后 Demo 的源代码。
文件合并完成后，通过 fileEntry.toURL() 得到文件在 FileSystem 中地址，赋给 标签的 href，再 click() 下就可以自动下载到本地了。
解决跨域问题
浏览器对同一个域名的并发连接数有限制，为了更好的实现并发下载，最好使用不同的域名访问要下载的文件，这用域名泛解析很容易实现。但是这样又会导致 XHR 被同源策略所限制。
还好，我们有 CORS（Cross-Origin Resource Sharing），专门用来解决这个问题。在 Nginx 配置文件中加上这几行就可以了：
add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; add_header Access-Control-Allow-Headers Range; add_header Access-Control-Expose-Headers Content-Type,Content-Length;
重点看下后两行：Allow-Headers 用来设置允许 XHR 发送哪些请求头，必须加上前面提到的 Range；Expose-Headers 用来设置哪些响应头可以被 XHR 的 getResponseHeader 方法获得，必须加上分析器用到的 Content-Type 和 Content-Length。
Nginx 本身还有一个问题：对静态资源发起 OPTIONS 请求会得到「405 Not Allowed」，这个问题可以改成用 PHP 读取文件再输出来解决。但前面说过，本文讨论内容不依赖服务端语言。通过 Google 找到了一个方案，在 Nginx 配置中增加下面这一段就可以了：
location / {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Headers Range;
add_header Access-Control-Expose-Headers Content-Type,Content-Length;
return 200;
}
}
Demo
猛击这里观看 Demo，仅在 Chrome 29 测试通过。
原文链接：http://www.imququ.com/post/a-downloader-with-filesystem-api.html