FED

在异步编程之Promise(1)里，我是翻译了一篇文章，里面是探究promise的模式和领略它的魅力。我们可以利用promise，缓解回调函数给我们带来的回调金字塔。使用链式结构书写，使代码更加简洁易懂，易于控制。但是对于构造promise和其内部的实现，却用草草的一句newPromise()就带过。这一次，借着阅读朴灵大神的《深入浅出Node.Js》，我们自己动手实现一个小小的基本的promise吧。...

思考一下，下面这段用来读取文件并解析JSON的Javascript同步代码。它很简单并且易于阅读，但是因为它会阻塞代码，你并不会想用在大多数的应用里。这意味着，当你用它来读取文件的时候（它需要很多时间）不会有其他的事情发生。为了让我们的应用高性能且实时响应，我们需要让所有涉及到IO的操作都变成异步的。最简单的方法去实现它就是使用callback回调。然而，一个幼稚不成熟的代码实现也许会让它出错。...

晒一下自己用Koanextgenerationwebframeworkfornode.js写的一个web服务这个web服务主要是做内容的列表展示和搜索的(可能说得比较抽象，但确实是web服务最常需要做的事情)主要的文件一共就2个：其中model.js是和具体业务逻辑相关的，就不多介绍了，这也不是Koa的核心；而app.js的代码可以体现Koa的很多优点，也使得代码可以写得非常简练而去清晰——这是我自己都完全没有想到的事情...

接前文，下面开始进入静态资源的合并与压缩中的第2项：CSS文件的合并与压缩。在前文的基础上，准备以下文件和目录single1.css的内容为single2.css的内容为...

本文只在前端构建维度上讨论webpack和coolie，分析他们两个工具谁更好、更优秀。关于如何使用webpack和coolie，暂且不在本文讨论范围内。把less文件编译成css文件属于构建？把coffee编译成js属于构建？压缩JS、CSS属于构建吗？合并JS、CSS属于构建吗？...

ETHANMARCOTTE的文章《响应式Web设计》讲述了在可伸缩的网页基础上使用MediaQuery来实现响应的响应式设计。而本文试从前端角度整理了近年来可供实现"可伸缩基础"和"响应“的前端技术。http://jsdm.com/anon/paint/eiscz...

你可能知道事件断点，那你知道ajaxxhr断点吗？xhr：XMLHttpRequest。先看图通过监听xhr的断点，可以轻而易举的找到事件的触发点和调用堆栈，这一点和上一节说到的DOM断点几乎是一样的，只不过此处换成了xhr了而已。...

你是否会遇到，当前页面内容变化了，但是却不知道哪个脚本影响了它？神奇的chrome控制台可以帮到你。子节点（内容、属性）修改通知如上图，添加了body节点的子节点修改通知。...

为了看css3过渡动画和帧动画效果，你是不是需要把时间改成很长：现在不需要啦，只要你打开chrome浏览器的控制台：如上图，打开浏览器的控制台，点击图示按钮，拖动滑块即可。该动画速度将会影响css3中的过渡动画和帧动画。...

chrome控制台你完全了解吗？接下来几篇文章，来说说那些你可能不知道的chrome控制台。通常，页面上弹出多个alert之后：在页面上弹出alert（阻塞页面的模态对话框）的情况下，不能对浏览器做大部分界面操作了。...

正如前文说过的，coolie能做的事情：前端开发构建的点，目前来说也就上面4条。如果你觉得前端开发构建不足为事，那么你是否也遇到过这些典型问题：以上仅仅是简单的举例，前端开发构建，不仅能使生产环境的代码体积更小，也不容易被人为阅读，同时也提升了逼格。...

我们的目录结构是这样的如图：依赖情况如下：安装本地静态服务器（sts），当然你也可以使用其他的静态服务器。切换到src目录，执行浏览器会自动打开，并弹出helloworld...

前端构建，指的是将开发环境中的代码编译、修改、重写成生产环境下可更快、更好运行的代码。比如压缩JS、CSS文件，或者合并JS、CSS文件，这些操作都是一个构建过程。可以不要前端构建吗？答案当然是可以，即生产环境和开发环境是同一份代码。如果开发和生产同一份代码，那么会出现以下问题：...

工欲善其事，必先利其器。在开始helloworld之前，先要学会使用以下工具。安装nodejshttps://nodejs.org/（可以参考阿里云ECS使用心得1：使用yum安装nodejs/npm环境），在这里nodejs是以下工具的运行环境。安装完成后，使用以下命令检验下：...

模块化是个相对概念，相对于整块、整体而言，模块通常是组成一个整体的最小单位。比如，你眼前的电脑，它在计算机网络世界里，它是个模块个体。而相对于一台电脑而言，电脑内部的CPU、内存才是最小的模块。如果你没有用过模块化，那你是否遇到过以下问题：...

HTMLhead头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head头部结构，移动端的meta元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。DOCTYPE(DocumentType)，该声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档使用哪种HTML或者XHTML规范。...

所谓“过滤器”，只是一个概念，可以理解是一个路由，也可以理解为一个中间件。原理非常简单，就是利用匹配规则，让其有限匹配在正常的路由前面处理就行了。比如有如下路由访问根目录就能看到index。在前面加上一个路由，封锁全部请求...

可能你发现了本站顶部的进度条，它是如何实现的呢？下面一起来看。页面进度条展示的是资源下载的进度，通常在页面上加上进度条，可以缓解用户的等待焦虑，也提升了网站的逼格。在前端，实现网页的进度条目前还没有一个比较精确的方案，都是一些模拟进度。即页面打开的时候是1%，然后定时器增加进度到99%，然后window.onload之后，进度跑到100%。...

前端开发有哪些静态资源：在进行依赖分析之前，会创建一个静态资源的版本对应关系（例MAP），然后在分析到html、css文件里包含静态资源的时候，会与MAP匹配，如果找到则使用MAP中的版本，否则去查找该静态资源。如，在html文件里，使用了以下静态资源...

HTML文件是面向用户的主要页面，对它的构建也是非常有必要的。可能你的HTML文件在开发环境是这样的：coolie通过分析源代码，来进行资源分析：<!--coolie-->和<!--/coolie-->之间的link文件会被读取到，然后读取这些样式文件的资源进行分析（更多阅读：coolie能做的：CSS模块依赖分析、合并、压缩、版本管理）。...