Mocha（发音"摩卡"）诞生于2011年，是现在最流行的JavaScript测试框架之一，在浏览器和Node环境都可以使用。所谓"测试框架"，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量。本文全面介绍如何使用Mocha，让你轻松上手。如果你以前对测试一无所知，本文也可以当作JavaScript单元测试入门。值得说明的是，除了Mocha以外，类似的测试框架还有Jasmine、Karma、Tape等，也很值得学习。一、安装我为本文写了一个示例库Mocha-demos，请先安装这个库。$ git clone https://github.com/ruanyf/mocha-demos.git如果你的电脑没装Git，可以直接下载zip压缩包，进行解压。然后，进入mocha-demos目录，安装依赖（你的电脑必须有Node）。$ cd mocha-demos $ npm install上面代码会在目录内部安装Mocha，为了操作的方便，请在全面环境也安装一下Mocha。$ npm install --global mocha二、测试脚本的写法Mocha的作用是运行测试脚本，首先必须学会写测试脚本。所谓"测试脚本"，就是用来测试源码的脚本。下面是一个加法模块add.js的代码。// add.js function add(x, y) { retur ...继续阅读 (86)

一、概述规格文件（specification）是计算机语言的官方标准，详细描述语法规则和实现方法。一般来说，没有必要阅读规格，除非你要写编译器。因为规格写得非常抽象和精炼，又缺乏实例，不容易理解，而且对于解决实际的应用问题，帮助不大。但是，如果你遇到疑难的语法问题，实在找不到答案，这时可以去查看规格文件，了解语言标准是怎么说的。规格是解决问题的"最后一招"。这对JavaScript语言很有必要。因为它的使用场景复杂，语法规则不统一，例外很多，各种运行环境的行为不一致，导致奇怪的语法问题层出不穷，任何语法书都不可能囊括所有情况。查看规格，不失为一种解决语法问题的最可靠、最权威的终极方法。本文介绍如何读懂ECMAScript 6的规格文件。ECMAScript 6的规格，可以在ECMA国际标准组织的官方网站（www.ecma-international.org/ecma-262/6.0/）免费下载和在线阅读。这个规格文件相当庞大，一共有26章，A4打印的话，足足有545页。它的特点就是规定得非常细致，每一个语法行为、每一个函数的实现都做了详尽的清晰的描述。基本上，编译器作者只要把每一步翻译成代码就可以了。这很大程度上，保证了所有ES6实现都有一致的行为。ECMAScript 6规格的26章之中，第1章到第3章是对文件本身的介绍，与语言关系不大。第4章是对这门语言总体设计的描述，有兴趣的 ...继续阅读 (70)

"循环加载"（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。// a.js var b = require('b'); // b.js var a = require('a');通常，"循环加载"表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现a依赖b，b依赖c，c又依赖a这样的情况。这意味着，模块加载机制必须考虑"循环加载"的情况。本文介绍JavaScript语言如何处理"循环加载"。目前，最常见的两种模块格式CommonJS和ES6，处理方法是不一样的，返回的结果也不一样。CommonJS模块CommonJS模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。因此，CommonJS规定，一旦发现某个模块被"循环加载"，就立即停止加载，只输出已经执行的部分。让我们来看，官方文档里面的例子。脚本文件a.js代码如下。exports.done = false; var b = require('./b.js'); console.log('在 a.js 之中，b.done = %j', b.done); exports.done = true; console.log('a.js 执行完毕');上面代码 ...继续阅读 (60)

使用 Github 的时候，你有没有见过下面的提示？$ git clone https://github.com/torvalds/linux Cloning into 'linux'... remote: Counting objects: 4350078, done. remote: Compressing objects: 100% (4677/4677), done. Receiving objects: 4% (191786/4350078), 78.19 MiB | 8.70 MiB/s这段提示说，远程代码库一共有4350078个对象需要克隆。这就叫"清点对象"（counting objects），Github需要实时计算出来，需要克隆的对象总数。这个过程非常慢，根据Github的披露，像Linux kernel这样巨大的库，清点一次需要8分钟！也就是说，发出git clone命令后，会干等八分钟，然后才会开始真正的数据传输。这当然是无法忍受的。Github团队一直想解决这个问题。后来，他们终于发现了一种新的算法，现在清点一次只要3毫秒！为了理解这个算法，你必须先知道，什么是Git的对象。简单说，对象就是文件，最重要的对象有三种。快照对象（Commit）目录对象（Directory）文件对象（File）每次提交代码的时候，会生成一个commit对象，里面有对应的当前 ...继续阅读 (69)

《计算机原理》课本说，启动时，主引导记录会存入内存地址0x7C00。这个奇怪的地址，是怎么来的，课本就不解释了。我一直有疑问，为什么不存入内存的头部、尾部、或者其他位置，而偏偏存入这个比 32KB 小1024字节的地方？昨天，我读到一篇文章，终于解开了这个谜。首先，如果你不知道，主引导记录（Master boot record，缩写为MBR）是什么，可以先读《计算机是如何启动的？》。简单说，计算机启动是这样一个过程。通电读取ROM里面的BIOS，用来检查硬件硬件检查通过BIOS根据指定的顺序，检查引导设备的第一个扇区（即主引导记录），加载在内存地址 0x7C00主引导记录把操作权交给操作系统所以，主引导记录就是引导"操作系统"进入内存的一段小程序，大小不超过1个扇区（512字节）。0x7C00这个地址来自Intel的第一代个人电脑芯片8088，以后的CPU为了保持兼容，一直使用这个地址。1981年8月，IBM公司最早的个人电脑IBM PC 5150上市，就用了这个芯片。当时，搭配的操作系统是86-DOS。这个操作系统需要的内存最少是32KB。我们知道，内存地址从0x0000开始编号，32KB的内存就是0x0000～0x7FFF。8088芯片本身需要占用0x0000～0x03FF，用来保存各种中断处理程序的储存位置。（主引导记录本身就是中断信号INT 19h的处理程序。）所以，内存只 ...继续阅读 (59)

互联网软件的开发和发布，已经形成了一套标准流程，最重要的组成部分就是持续集成（Continuous integration，简称CI）。本文简要介绍持续集成的概念和做法。一、概念持续集成指的是，频繁地（一天多次）将代码集成到主干。它的好处主要有两个。（1）快速发现错误。每完成一点更新，就集成到主干，可以快速发现错误，定位错误也比较容易。（2）防止分支大幅偏离主干。如果不是经常集成，主干又在不断更新，会导致以后集成的难度变大，甚至难以集成。持续集成的目的，就是让产品可以快速迭代，同时还能保持高质量。它的核心措施是，代码集成到主干之前，必须通过自动化测试。只要有一个测试用例失败，就不能集成。Martin Fowler说过，"持续集成并不能消除Bug，而是让它们非常容易发现和改正。"与持续集成相关的，还有两个概念，分别是持续交付和持续部署。二、持续交付持续交付（Continuous delivery）指的是，频繁地将软件的新版本，交付给质量团队或者用户，以供评审。如果评审通过，代码就进入生产阶段。持续交付可以看作持续集成的下一步。它强调的是，不管怎么更新，软件是随时随地可以交付的。三、持续部署持续部署（continuous deployment）是持续交付的下一步，指的是代码通过评审以后，自动部署到生产环境。持续部署的目标是，代码在任何时刻都是可部署的，可以进入生产阶段。持续部署的前提是 ...继续阅读 (62)

Nicholas C. Zakas 是全世界最著名的 JavaScript 程序员之一。两年前，他写了一篇长文，回顾自己的职业生涯，提到七个对他来说最重要的建议。我读完很受启发，决定做一点摘录。你可以先读下面的精简版，再去读全文。===============================七个对我最好的职业建议（精简版）作者：Nicholas C. Zakas译者：阮一峰原文网址：https://www.nczonline.net/blog/2013/10/15/the-best-career-advice-ive-received/一、不要别人点什么，就做什么我的第一份工作，只干了8个月，那家公司就倒闭了。我问经理，接下来我该怎么办，他说："小伙子，千万不要当一个被人点菜的厨师，别人点什么，你就烧什么。不要接受那样一份工作，别人下命令你该干什么，以及怎么干。你要去一个地方，那里的人肯定你对产品的想法，相信你的能力，放手让你去做。"我从此明白，单单实现一个产品是不够的，你还必须参与决定怎么实现。好的工程师并不仅仅服从命令，而且还给出反馈，帮助产品的拥有者改进它。二、推销自己我进入雅虎公司以后，经理有一天跟我谈话，他觉得我还做得不够。"你工作得很好，代码看上去不错，很少出Bug。但是，问题是别人都没看到这一点。为了让其他人相信你，你必须首先让别人知道你做了什么。你需要推销自己，引起 ...继续阅读 (70)

你遇到过性能很差的网页吗？这种网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。你会有什么反应？我猜想，大多数用户会关闭这个页面，改为访问其他网站。作为一个开发者，肯定不愿意看到这种情况，怎样才能提高性能呢？本文将详细介绍性能问题的出现原因，以及解决方法。一、网页生成的过程要理解网页性能为什么不好，就要了解网页是怎么生成的。网页的生成过程，大致可以分成五步。HTML代码转化成DOMCSS代码转化成CSSOM（CSS Object Model）结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）生成布局（layout），即将所有渲染树的所有节点进行平面合成将布局绘制（paint）在屏幕上这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。二、重排和重绘网页生成的时候，至少会渲染一次。用户访问的过程中，还会不断重新渲染。以下三种情况，会导致网页重新渲染。修改DOM修改样式表用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。需要注意的是，"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发 ...继续阅读 (68)

大多数人在高中，或者大学低年级，都上过一门课《线性代数》。这门课其实是教矩阵。刚学的时候，还蛮简单的，矩阵加法就是相同位置的数字加一下。矩阵减法也类似。矩阵乘以一个常数，就是所有位置都乘以这个数。但是，等到矩阵乘以矩阵的时候，一切就不一样了。这个结果是怎么算出来的？教科书告诉你，计算规则是，第一个矩阵第一行的每个数字（2和1），各自乘以第二个矩阵第一列对应位置的数字（1和1），然后将乘积相加（ 2 x 1 + 1 x 1），得到结果矩阵左上角的那个值3。也就是说，结果矩阵第m行与第n列交叉位置的那个值，等于第一个矩阵第m行与第二个矩阵第n列，对应位置的每个值的乘积之和。怎么会有这么奇怪的规则？我一直没理解这个规则的含义，导致《线性代数》这门课就没学懂。研究生时发现，线性代数是向量计算的基础，很多重要的数学模型都要用到向量计算，所以我做不了复杂模型。这一直让我有点伤心。前些日子，受到一篇文章的启发，我终于想通了，矩阵乘法到底是什么东西。关键就是一句话，矩阵的本质就是线性方程式，两者是一一对应关系。如果从线性方程式的角度，理解矩阵乘法就毫无难度。下面是一组线性方程式。矩阵的最初目的，只是为线性方程组提供一个简写形式。老实说，从上面这种写法，已经能看出矩阵乘法的规则了：系数矩阵第一行的2和1，各自与 x 和 y 的乘积之和，等于3。不过，这不算严格的证明，只是线性方程式转为矩阵的书写规则 ...继续阅读 (66)

上个月的最后一天，人民银行网站公布了《非银行支付机构网络支付业务管理办法（征求意见稿）》。这个文件立刻引起了全国的关注，但是，第28条却少有人讨论。第二十八条 ...... 支付机构采用不足两类要素进行验证的交易，单个客户所有支付账户单日累计金额应不超过1000元，且支付机构应当承诺无条件全额承担此类交易的风险损失赔付责任。这一条看上去有点复杂，但是实际很简单。它就是说，如果支付时只有密码认证（即只输入密码就能付款），那么每天最多只能支付1000元，其他就要走银行渠道。如果能采用更安全的认证方式，那么支付额度就可以提高。看出了潜台词吗？嗯，央行觉得密码不安全，需要其他方式确认"你就是你"。第28条用了一个词"不足两类要素进行验证的交易"，这是指什么呢？原来，密码学认为，有三类要素可以确认"你就是你"。（1）你知道的要素，比如密码、暗号等等。这件事只有你知道，别人不知道。（2）你拥有的要素，一把钥匙、一块手表、一件信物等等。这件东西只有你有，别人没有。（3）你的生理要素，指纹、面部特征、DNA等等。这些生理特征，每个人都不一样。上面的这三类要素，任何单独的一个都可以确认"你就是你"，但不够安全。如果能够两个要素联合确认，那么安全系数就大大提高了。密码属于第一类要素，央行的意思就是说，支付的时候，还应该再提供另一类要素，证明你的身份。比如，很多银行会向用户提供U盾，要求使用时插入，这属 ...继续阅读 (67)

团队开发中，遵循一个合理、清晰的Git使用流程，是非常重要的。否则，每个人都提交一堆杂乱无章的commit，项目很快就会变得难以协调和维护。下面是ThoughtBot的Git使用规范流程。我从中学到了很多，推荐你也这样使用Git。第一步：新建分支首先，每次开发新功能，都应该新建一个单独的分支（这方面可以参考《Git分支管理策略》）。# 获取主干最新代码 $ git checkout master $ git pull # 新建一个开发分支myfeature $ git checkout -b myfeature第二步：提交分支commit分支修改后，就可以提交commit了。$ git add --all $ git status $ git commit --verbosegit add 命令的all参数，表示保存所有变化（包括新建、修改和删除）。从Git 2.0开始，all是 git add 的默认参数，所以也可以用 git add . 代替。git status 命令，用来查看发生变动的文件。git commit 命令的verbose参数，会列出diff的结果。第三步：撰写提交信息提交commit时，必须给出完整扼要的提交信息，下面是一个范本。Present-tense summary under 50 characters * More information abou ...继续阅读 (68)

本文通过五个例子，介绍蒙特卡罗方法（Monte Carlo Method）。一、概述蒙特卡罗方法是一种计算方法。原理是通过大量随机样本，去了解一个系统，进而得到所要计算的值。它非常强大和灵活，又相当简单易懂，很容易实现。对于许多问题来说，它往往是最简单的计算方法，有时甚至是唯一可行的方法。它诞生于上个世纪40年代美国的"曼哈顿计划"，名字来源于赌城蒙特卡罗，象征概率。二、π的计算第一个例子是，如何用蒙特卡罗方法计算圆周率π。正方形内部有一个相切的圆，它们的面积之比是π/4。现在，在这个正方形内部，随机产生10000个点（即10000个坐标对 (x, y)），计算它们与中心点的距离，从而判断是否落在圆的内部。如果这些点均匀分布，那么圆内的点应该占到所有点的 π/4，因此将这个比值乘以4，就是π的值。通过R语言脚本随机模拟30000个点，π的估算值与真实值相差0.07%。三、积分的计算上面的方法加以推广，就可以计算任意一个积分的值。比如，计算函数 y = x2在 [0, 1] 区间的积分，就是求出下图红色部分的面积。这个函数在 (1,1) 点的取值为1，所以整个红色区域在一个面积为1的正方形里面。在该正方形内部，产生大量随机点，可以计算出有多少点落在红色区域（判断条件 y < x2）。这个比重就是所要求的积分值。用Matlab模拟100万个随机点，结果为0.3328。四、交通堵塞蒙特卡 ...继续阅读 (105)

函数式编程有一个重要概念，叫做Monad。网上有很多解释（这里和这里），但都很抽象，不容易看懂。我尝试了好多次，还是不明白Monad到底是什么。昨天，我读到了Aditya Bhargava的文章，他画了很多图。我想了半天，终于恍然大悟。下面，我就用这些图来解释Monad。1.软件最基本的数据，就是各种值（value）。2.处理值的一系列操作，可以封装成函数。输入一个值，会得到另一个值。上图的"(+3)"就是一个函数，对输入的值加上3，再输出。3.函数很像漏斗，上面进入一个值，下面出来一个值。4.函数可以连接起来使用，一个函数接着另一个函数。5.函数还可以依次处理数据集合的每个成员。6.说完了函数，再来看第二个概念：数据类型（type）。数据类型就是对值的一种封装，不仅包括值本身，还包括相关的属性和方法。上图就是2的封装，从此2就不是一个单纯的值，而是一种数据类型的实例，只能在数据类型的场景（context）中使用。7.2变成数据类型以后，原来的函数就不能用了。因为"(+3)"这个函数是处理值的（简称"值函数"），而不是处理数据类型的。8.我们需要重新定义一种运算。它接受"值函数"和数据类型的实例作为输入参数，使用"值函数"处理后，再输出数据类型的另一个实例。上图的fmap就代表了这种运算。9.fmap的内部，实际上是这样：打开封装的数据类型，取出值，用值函数处理以后，再封装回数据类 ...继续阅读 (53)

上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局语法教程》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明，本节的HTML模板一律如下。上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。1.1 单项目：首行左对齐首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。.box { display: flex; }1.2 单项目：首行居中对齐.box { display: flex; justify-content: center; }1.3 单项目：首行右对齐.box { display: flex; justify-content: flex-end; }1.4 单项目：中行左对齐.box { display: flex; align-items: center; }1.5 单项目：垂直居中对齐.box { ...继续阅读 (78)

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的Flex写法。以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox和A Visual Guide to CSS3 Flexbox Properties。一、Flex布局是什么？Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; }行内元素也可以使用Flex布局。.box{ display: inline-flex; }Webkit内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意，设为Flex布局以后，子元素的float、clear和vertical- ...继续阅读 (75)

两周前，《ECMAScript国际标准（第6版）》正式通过，下一代 JavaScript 语言定案。ECMAScript 6（以下简称 ES6）总共新增了20多项重大的语言特性。各种浏览器和 Node.js 都积极支持，但还有不少功能没实现。上个周末，我读到了 Kyle Simpson 的文章《ES6: Features By Testing》，发现他开发了一组测试，可以侦测运行环境支持哪些 ES6 的功能。我就在他的基础上 ，写了功能侦测库ES-Checker，用于查看 ES6 的支持情况。今天，我把这个库提交到Hacker News，结果居然进入了首页！虽然，名次不高，上榜时间也不长，但也算实现了一个人生愿望。请看Demo，你的浏览器支持多少 ES6？ES-Checker可用于多种环境。（1）命令行环境$ npm install -g es-checker $ es-checker（2）Node环境将 ES-Checker 安装在项目的根目录。$ npm install es-checker就可以在脚本中引用 ES-Checker 了。var Supports = require("es-checker"); if (Supports.letConst) { let x = 5; } else { var x = 5; }Supports 对象的属性清单，请见后文。（ ...继续阅读 (88)

就在这个周末，npm超过了cpan，成为地球上最大的软件模块仓库。npm 的模块都是 JavaScript 语言写的，但浏览器用不了，因为不支持 CommonJS 格式。要想让浏览器用上这些模块，必须转换格式。本文介绍浏览器加载 CommonJS 的原理，并且给出一种非常简单的实现。一、原理浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量。moduleexportsrequireglobal只要能够提供这四个变量，浏览器就能加载 CommonJS 模块。下面是一个简单的示例。var module = { exports: {} }; (function(module, exports) { exports.multiply = function (n) { return n * 1000 }; }(module, module.exports)) var f = module.exports.multiply; f(5) // 5000上面代码向一个立即执行函数提供 module 和 exports 两个外部变量，模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中，这样就实现了模块的加载。二、Browserify 的实现知道了原理，就能做出工具了。Browserify是目前最常用的 CommonJS 格式转换 ...继续阅读 (67)

2009年，Node.js项目诞生，所有模块一律为CommonJS格式。时至今日，Node.js 的模块仓库npmjs.com，已经存放了15万个模块，其中绝大部分都是 CommonJS 格式。这种格式的核心就是 require 语句，模块通过它加载。学习 Node.js ，必学如何使用 require 语句。本文通过源码分析，详细介绍 require 语句的内部运行机制，帮你理解 Node.js 的模块机制。一、require() 的基本用法分析源码之前，先介绍 require 语句的内部逻辑。如果你只想了解 require 的用法，只看这一段就够了。下面的内容翻译自《Node使用手册》。当 Node 遇到 require(X) 时，按下面的顺序处理。（1）如果 X 是内置模块（比如 require('http'）)a. 返回该模块。b. 不再继续执行。（2）如果 X 以 "./" 或者 "/" 或者 "../" 开头a. 根据 X 所在的父模块，确定 X 的绝对路径。b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。XX.jsX.jsonX.nodec. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。X/package.json（main字段）X/index.jsX/index.jsonX/index ...继续阅读 (66)

大学时，我一直觉得统计学很难，还差点挂科。工作以后才发现，难的不是统计学，而是我们的教材写得不好。比起高等数学，统计概念其实容易理解多了。我举一个例子，什么是泊松分布和指数分布？恐怕大多数人都说不清楚。我可以在10分钟内，让你毫不费力地理解这两个概念。一、泊松分布日常生活中，大量事件是有固定频率的。某医院平均每小时出生3个婴儿某公司平均每10分钟接到1个电话某超市平均每天销售4包xx牌奶粉某网站平均每分钟有2次访问它们的特点就是，我们可以预估这些事件的总数，但是没法知道具体的发生时间。已知平均每小时出生3个婴儿，请问下一个小时，会出生几个？有可能一下子出生6个，也有可能一个都不出生。这是我们没法知道的。泊松分布就是描述某段时间内，事件具体的发生概率。上面就是泊松分布的公式。等号的左边，P 表示概率，N表示某种函数关系，t 表示时间，n 表示数量，1小时内出生3个婴儿的概率，就表示为 P(N(1) = 3) 。等号的右边，λ 表示事件的频率。接下来两个小时，一个婴儿都不出生的概率是0.25%，基本不可能发生。接下来一个小时，至少出生两个婴儿的概率是80%。泊松分布的图形大概是下面的样子。可以看到，在频率附近，事件的发生概率最高，然后向两边对称下降，即变得越大和越小都不太可能。每小时出生3个婴儿，这是最可能的结果，出生得越多或越少，就越不可能。二、指数分布指数分布是事件的时间间隔的概率 ...继续阅读 (72)

去年下半年，《财新周刊》缺一个专栏作者，问我写不写。我就写了，到现在也有八、九篇文章了。大多数时候，搜索枯肠，还是写得不满意。因为从来没写过，也不知道如何在1500+字里，向大众介绍技术问题。下面这篇是上周写的，自我感觉写得还行，就贴过来跟大家分享。=================================================================能量墙与家庭电厂作者：阮一峰（原载2015年6月1日的《财新周刊》）今年五一节，有一件重大的科技新闻。国内正好是假期，并没有得到足够报道。那天晚上，特斯拉汽车发布了一个重量级的新产品。事前大家猜测，可能是一款新型号的电动汽车，但是出人意料，发布的是一款充电电池，就是笔记本、手机里面的那种电池，但是体积大了10000倍，可以为整个家庭充电，特斯拉将这款产品命名为"能量墙"（powerwall）。能量墙的大小跟一个储物架差不多，长130厘米，宽86厘米，高18厘米，放在家里确实有点像一堵墙。它有两个型号，分别能储存10度电和7度电，价格是2.17万元人民币（3500美元）和1.86万元人民币（3000美元），属于有史以来最便宜的工业级电池，只相当于现在市场上同级别产品的价格的一个零头。特斯拉同时还宣布，后续将推出商用级别的、储存100度电的"能量包"（Powerpack），内置10个一组的能量墙。你可能会问，就算 ...继续阅读 (69)

本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。Generator函数的含义与用法Thunk函数的含义与用法co函数库的含义与用法async函数的含义与用法一、终极解决异步操作是 JavaScript 编程的麻烦事，麻烦到一直有人提出各种各样的方案，试图解决这个问题。从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又让人觉得不彻底。它们都有额外的复杂性，都需要理解抽象的底层运行机制。异步I/O不就是读取一个文件吗，干嘛要搞得这么复杂？异步编程的最高境界，就是根本不用关心它是不是异步。async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。二、async 函数是什么？一句话，async 函数就是 Generator 函数的语法糖。前文有一个 Generator 函数，依次读取两个文件。var fs = require('fs'); var readFile = function (fileName){ return new Promise(function (resolve, reject){ fs.readFile(fileName, function(error, data){ if (error) reject(error); resolve(data ...继续阅读 (63)

现在最热门的前端框架，毫无疑问是React。上周，基于 React 的React Native发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。但是，好的 React 教程却不容易找到，这一方面因为这项技术太新，刚刚开始走红，大家都没有经验，还在摸索之中；另一方面因为 React 本身 ...继续阅读 (68)

一种编程语言是否易用，很大程度上，取决于开发命令行程序的能力。Node.js 作为目前最热门的开发工具之一，怎样使用它开发命令行程序，是 Web 开发者应该掌握的技能。最近，Npm的网志有一组系列文章，我觉得写得非常好。下面就是我在它的基础上扩展的教程，应该是目前最好的解决方案了。一、可执行脚本我们从最简单的讲起。首先，使用 JavaScript 语言，写一个可执行脚本 hello 。#!/usr/bin/env node console.log('hello world');然后，修改 hello 的权限。$ chmod 755 hello现在，hello 就可以执行了。$ ./hello hello world如果想把 hello 前面的路径去除，可以将 hello 的路径加入环境变量 PATH。但是，另一种更好的做法，是在当前目录下新建 package.json ，写入下面的内容。{ "name": "hello", "bin": { "hello": "hello" } }然后执行 npm link 命令。$ npm link现在再执行 hello ，就不用输入路径了。$ hello hello world二、命令行参数的原始写法命令行参数可以用系统变量 process.argv 获取。#!/usr/bin/env node console.log('h ...继续阅读 (61)

尾调用（Tail Call）是函数式编程的一个重要概念，本文介绍它的含义和用法。一、什么是尾调用？尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。function f(x){ return g(x); }上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下两种情况，都不属于尾调用。// 情况一 function f(x){ let y = g(x); return y; } // 情况二 function f(x){ return g(x) + 1; }上面代码中，情况一是调用函数g之后，还有别的操作，所以不属于尾调用，即使语义完全一样。情况二也属于调用后还有操作，即使写在一行内。尾调用不一定出现在函数尾部，只要是最后一步操作即可。function f(x) { if (x > 0) { return m(x) } return n(x); }上面代码中，函数m和n都属于尾调用，因为它们都是函数f的最后一步操作。二、尾调用优化尾调用之所以与其他调用不同，就在于它的特殊的调用位置。我们知道，函数调用会在内存形成一个"调用记录"，又称"调用帧"（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用记录上方，还会形成一个B的调用记录。等到B运行结束，将结果返回到A ...继续阅读 (82)

测试的时候，我们常常关心，是否所有代码都测试到了。这个指标就叫做"代码覆盖率"（code coverage）。它有四个测量维度。行覆盖率（line coverage）：是否每一行都执行了？函数覆盖率（function coverage）：是否每个函数都调用了？分支覆盖率（branch coverage）：是否每个if代码块都执行了？语句覆盖率（statement coverage）：是否每个语句都执行了？Istanbul是 JavaScript 程序的代码覆盖率工具，本文介绍它的用法。这个软件以土耳其最大城市伊斯坦布尔命名，因为土耳其地毯世界闻名，而地毯是用来覆盖的。一、安装Istanbul 是一个 npm 模块，安装非常简单，就一行命令。$ npm install -g istanbul二、覆盖率测试来看一个例子，怎么使用 Istanbul 。下面是脚本文件 simple.js 。var a = 1; var b = 1; if ((a + b) > 2) { console.log('more than two'); }使用istanbul cover命令，就能得到覆盖率。$ istanbul cover simple.js ===== Coverage summary ===== Statements : 75% ( 3/4 ) Branches : 50% ...继续阅读 (72)

网站开发正变得越来越专业，涉及到各种各样的工具和流程，迫切需要构建自动化。所谓"构建自动化"，就是指使用构建工具，自动实现"从源码到网页"的开发流程。这有利于提高开发效率、改善代码质量。本文介绍如何使用make命令，作为网站的构建工具。以下内容既是make语法的实例，也是网站构建的实战教程。你完全可以将代码略作修改，拷贝到自己的项目。（题图：国家考古博物馆，西班牙，摄于2014年8月）一、Make的优点首先解释一下，为什么要用Make。目前，网站项目（尤其是Node.js项目）有三种构建方案。方案一：基于Node.js的专用构建工具（Grunt、Gulp、Brunch、Broccoli、Mimosa）方案二：npm run命令（教程1、2、3）方案三：make命令我觉得，make是大型项目的首选方案。npm run可以认为是make的简化形式，只适用于简单项目，而Grunt、Gulp那样的工具，有很多问题。（1）插件问题Grunt和Gulp的操作，都由插件完成。即使是文件改名这样简单的任务，都要写插件，相当麻烦。而Make是直接调用命令行，根本不用担心找不到插件。（2）兼容性问题插件的版本，必须与Grunt和Gulp的版本匹配，还必须与对应的命令行程序匹配。比如，grunt-contrib-jshint插件现在是0.11.0版，对应Grunt 0.4.5版和JSHint 2.6.0 ...继续阅读 (64)

乔布斯在斯坦福大学毕业演讲中说过，他最喜欢的一句话叫做"Stay hungry, Stay foolish"。"Stewart和他的人出了好几期《地球产品目录》（Whole Earth Catalog），然后不打算再出了，他们推出了最后一期。那时是70年代中期，我跟你们一样大。那一期的封底有一张照片，上面是清晨的乡间道路，就是那种如果你喜欢漫游，你会经过的道路。照片下面有一句话：'Stay Hungry, Stay Foolish'。这是他们的临别赠言。Stay Hungry. Stay Foolish. 我总是希望自己永远保持这个状态。现在你们即将毕业，我也把这句话送给你们。"这句话一下子就出名了，乔布斯的人生格言，谁会忘记呢？可是，它到底是什么意思，就众说纷纭了。有人就去采访《地球产品目录》的创始人和主编Stewart Brand，问他知不知道乔布斯喜欢他的这句话。下面就是我想分享的内容。"对，我知道乔布斯中意这句话。因为他托人传话，他想要一份我的签名，在那一期Stay Hungry, Stay Foolish的封面上。这是我第一次知道，这本杂志对他很重要。"哇，想象一下，乔布斯问你要签名，这会是什么感觉啊......Stewart Brand接着就解释，这句话是怎么来的。"1966年，我发起了一个the whole Earth运动，想要NASA公布地球的太空照片，后来《地球产 ...继续阅读 (73)

本文是《深入掌握 ECMAScript 6 异步编程》系列文章的第一篇。Generator函数的含义与用法Thunk函数的含义与用法co函数库的含义与用法async函数的含义与用法异步编程对 JavaScript 语言太重要。JavaScript 只有一根线程，如果没有异步编程，根本没法用，非卡死不可。以前，异步编程的方法，大概有下面四种。回调函数事件监听发布/订阅Promise 对象ECMAScript 6 （简称 ES6 ）作为下一代 JavaScript 语言，将 JavaScript 异步编程带入了一个全新的阶段。这组系列文章的主题，就是介绍更强大、更完善的 ES6 异步编程方法。新方法比较抽象，初学时，我常常感到费解，直到很久以后才想通，异步编程的语法目标，就是怎样让它更像同步编程。这组系列文章，将帮助你深入理解 JavaScript 异步编程的本质。所有将要讲到的内容，都已经实现了。也就是说，马上就能用，套用一句广告语，就是"未来已来"。一、什么是异步？所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。比如，有一个任务是读取文件进行处理，异步的执行过程就是下面这样。上图中，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连 ...继续阅读 (57)

进入正文之前，先插播一条消息。我七年前翻译的《软件随想录》再版了（京东链接）。这次是《Joel论软件》两卷同时再版，第一卷是新译本，第二卷是我翻译的。本书的作者是著名程序员、StackOverflow的创始人Joel Splosky。我觉得，它是软件项目管理的最好读物之一，推荐阅读。========================================以下是《深入掌握 ECMAScript 6 异步编程》系列文章的第三篇。Generator函数的含义与用法Thunk函数的含义与用法co函数库的含义与用法async函数的含义与用法一、什么是 co 函数库？co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具，用于 Generator 函数的自动执行。比如，有一个 Generator 函数，用于依次读取两个文件。var gen = function* (){ var f1 = yield readFile('/etc/fstab'); var f2 = yield readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString()); };co 函数库可以让你不用编写 Generator 函数的执行器。var co = require( ...继续阅读 (54)

本文是《深入掌握 ECMAScript 6 异步编程》系列文章的第二篇。Generator函数的含义与用法Thunk函数的含义与用法co函数库的含义与用法async函数的含义与用法一、参数的求值策略Thunk函数早在上个世纪60年代就诞生了。那时，编程语言刚刚起步，计算机学家还在研究，编译器怎么写比较好。一个争论的焦点是"求值策略"，即函数的参数到底应该何时求值。var x = 1; function f(m){ return m * 2; } f(x + 5)上面代码先定义函数 f，然后向它传入表达式 x + 5 。请问，这个表达式应该何时求值？一种意见是"传值调用"（call by value），即在进入函数体之前，就计算 x + 5 的值（等于6），再将这个值传入函数 f 。C语言就采用这种策略。f(x + 5) // 传值调用时，等同于 f(6)另一种意见是"传名调用"（call by name），即直接将表达式 x + 5 传入函数体，只在用到它的时候求值。Hskell语言采用这种策略。f(x + 5) // 传名调用时，等同于 (x + 5) * 2传值调用和传名调用，哪一种比较好？回答是各有利弊。传值调用比较简单，但是对参数求值的时候，实际上还没用到这个参数，有可能造成性能损失。function f(a, b){ return b; } f(3 ...继续阅读 (72)