FED

注：本文摘自阿里内网的无线前端博客《无线前端的图片相关工作流程梳理》。其实是一个月前写的，鉴于团队在中国第二届CSSConf上做了《手机淘宝CSS实践启示录》的分享，而图片工作流程梳理是其中的一个子话题，故在此一并分享出来，希望仍可以给大家一些经验和启发。另外，考虑到这是一篇公开分享，原版内容有部分删节和调整，里面有一些经验和产出是和我们的工作环境相关的，不完全具有普遍性，还请见谅。今天很荣幸的跟大家分享一件事情，就是经过差不多半年多的努力，尤其是最近2周的“突击扫尾”，无线前端团队又在工具流程方面有了一个不小的突破：我们暂且称其为“图片工作流”梳理。...

nextTick来源于nodejs，意思是将当前的callback放到队列的尾部。众所周知，setTimeout的超时时间是在当前队尾之后的4ms+（具体待考证），得益于MutationObserver和ie的onreadystatechange，可以实现更快的执行。...

cooliePKFIS，以小见大，从fis官网的一个例子开始。http://fis.baidu.com/FIS3是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。...

解析url的各个部分：普通的方法是使用正则来进行匹配，而在前端可以这样：测试A标签的各个property包含了urlparse的结果信息。同样的，也可以创建一个空的iframe来操作它的contentWindow.location来实现。...

在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：问题：带着问题，往下看......

在HTML中，某些字符是预留的。在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体（characterentities）。如需显示小于号，我们必须这样写：&lt;或&#60;或者&#x3c;;不同的表现格式是根据原始字符的ascii码来进行关联的。其中，<符号对应的十进制ascii为60，对应的十六进制为3c。...

JS判断数据类型，方法有很多，如typeof、constructor、toString等等，甚至可以使用jQuery内部的$.type都可以判断。其中typeof等的判断局限性都比较大，如typeof只能判断数据存储类型，constructor只能判断数据的原型，toString相对比较完整一点，但显示不够友好，在jQuery中对其做了一些修饰，正是Object.prototype.toString的功劳。...

querystring指的是url上?符号后面、#符号前面的的字符串。一串示例的querystring：即：注：文章代码仅为示例，如decodeURIComponent、空值、+符号等情况未考虑在内。...

数值缩写是将长数值转换成短数值的表示。之前，这里的缩写单位弄混淆了，详见下表：通过while循环来相除1000步进值，直到相除次数到达缩写长度。...

难点在这个正则上。?=术语叫“先行断言”。x(?=y)称为先行断言（Positivelook-ahead），x只有在y前面才匹配，y不会被计入返回结果。上面的代码使用了先行断言，b在c前面所以被匹配，但是括号对应的c不会被返回。...

在使用webstorm编辑器时，你不必写gulp、grunt配置文件来监听css预处理文件来实时编译，也不必安装其他watch插件，webstorm自带就有了。打开配置（Tools-FileWatchers）就可以见到了，点击“+”号就可以新建监听配置了。...

从给定的字符串里随机取出字符，拼接出6位颜色值。随机数转换成十六进制，然后截取6个字符长度。如果有更好的方法，欢迎提供哦。...

#代码一行代码判断IE浏览器版本使用方法：通过IE独有的条件注释来判断版本。须知：...

接前文《coolie入门6-coolie实例演示》这是项目的目录结构。utils.js已经被length.js和area.js两个入口模块同时使用了，却分别打包在两个入口模块里：length.cac2241d618488f567abef6c7c99dd0d.js，length入口模块：...

终于到了重头戏啦？本文主要说明的是这两款构建工具（coolie和webpack），是分别如何完成模块化构建的，以及它们之间的优缺点。首先准备以下文件和目录，基本是承接上文的。entry1.js的内容为：...

通过判断是否支持触摸，支持触摸的设备大都都是移动端。这里为什么用ontouchend的原因是，ontouchend相对于ontouchstart、ontouchmove、ontouchcancel来说长度最短。通过判断用户代理字符串中是否包含mobile关键字。...

大家如果能消化掉前面的知识，相信这一章的分析也肯定是轻轻松松的。我们这一章就来说说，我们之前一直高调提到的co库。co库，它用Generator和Promise相结合，完美提升了我们异步编程的体验。我们首先看看如何使用co的，我们仍旧以之前的读取Json文件的例子看看：大家看上面的代码，甚至是可以使用同步的思维，不用去理会回调什么鬼的。我们readFile()得到filename，然后再次readFile()得到json，解析完json后输出就结束了，非常清爽。大家如果不相信的话，可以使用原生的异步api尝试一下，fs.readFile()像上面相互有依赖的，绝对恶心！...

继上一篇见识过其配合promise带来的超爽的异步编程体验，我想应该大部分同学都会想好好看一下，到底这个Generator是什么？接下来我们会对Generator的特性进行剖析，让我们对接下来学习co源码打个扎实的基础。我们首先得知道，Generator一开始并不是用来做异步编程的，是后来的大牛们挖掘了它的特性，让它在异步编程里大放异彩。其实Generator是生成遍历器的构造器，ES6定义了一个遍历器的接口Iterator。任何数据结构满足Iterator接口，都可以统一实现遍历操作。一步一步的调用next()或者for..of循环都可以遍历实现Iterator接口的数据结构。...

回顾一下我们之前学习的promise。我们巧妙利用了promise/deferred模式，用链式结构代替了嵌套回调的结构，大大缓解了回调地狱。我们再来看看之前我们举的那个异步串行队列的例子吧！假设我们有一个hello.txt，里面存了一个JSON文件的文件名，我们需要得到JSON文件的message属性的值。步骤如下：这个例子我们之前也是举过非常多次的，我们尝试使用Promise链式结构完成：...

在前面的文章中，通过了解promise能做什么，实践动手从原理上了解promise/deferred模式的用法，相信大家应该更期待这次的功能拓展。我们不仅需要让单异步操作promise化，我们还需要从实际出发，拓展更多有用的功能。直接看一下我们这一次需要做的两个功能：这两个功能用我们之前自己写的简陋promise库，是无法做到的。我们不能在指定多个promise异步完成后，再触发回调。也不能让多个promise异步像排队一样，一个一个的进行，甚至下一个promise的参数是依赖上一个promise的。这就是我们接下来需要解决的问题：...