你可能听说过函数式编程（Functional programming），甚至已经使用了一段时间。但是，你能说清楚，它到底是什么吗？网上搜索一下，你会轻松找到好多答案。与面向对象编程（Object-oriented programming）和过程式编程（Procedural programming）并列的编程范式。最主要的特征是，函数是第一等公民。强调将计算过程分解成可复用的函数，典型例子就是map方法和reduce方法组合而成MapReduce 算法。只有纯的、没有副作用的函数，才是合格的函数。上面这些说法都对，但还不够，都没有回答下面这个更深层的问题。为什么要这样做？这就是，本文要解答的问题。我会通过最简单的语言，帮你理解函数式编程，并且学会它那些基本写法。需要声明的是，我不是专家，而是一个初学者，最近两年才真正开始学习函数式编程。一直苦于看不懂各种资料，立志要写一篇清晰易懂的教程。下面的内容肯定不够严密，甚至可能包含错误，但是我发现，像下面这样解释，初学者最容易懂。另外，本文比较长，阅读时请保持耐心。结尾还有Udacity的《前端工程师认证课程》的推广，非常感谢他们对本文的赞助。一、范畴论函数式编程的起源，是一门叫做范畴论（Category Theory）的数学分支。理解函数式编程的关键，就是理解范畴论。它是一门很复杂的数学，认为世界上所有的概念体系，都可以抽象成一个个的"范畴 ...继续阅读 (83)

上周，《中文技术文档写作规范》加入了文件的命名规则。"文件名建议只使用小写字母，不使用大写字母。""为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。"网友看见了，就提问为什么文件名要小写？说实话，虽然这是 Linux 传统，我却从没认真想过原因。赶紧查资料，结果发现四个很有说服力的理由，支持这样做。下面就是这四个理由。另外，文后我还会发布一条前端培训的消息。一、可移植性Linux 系统是大小写敏感的，而 Windows 系统和 Mac 系统正好相反，大小写不敏感。一般来说，这不是大问题。但是，如果两个文件名只有大小写不同，其他都相同，跨平台就会出问题。foobarFoobarFOOBARfOObAr上面四个文件名，Windows 系统会把它们都当作foobar。如果它们同时存在，你可能没办法打开后面三个文件。另一方面，在 Mac 系统上开发时，有时会疏忽，写错大小写。// 正确文件名是 MyModule.js const module = require('./myModule');上面的代码在 Mac 上面可以运行，因为 Mac 认为MyModule.js和myModule.js是同一个文件。但是，一旦代码到服务器运行就会报错，因为 Linux 系统找不到myModule.js。如果所有的文件名都采用小写，就不会出现上面的问题，可以保证项目有良 ...继续阅读 (84)

（说明：本文出自我的新书《未来世界的幸存者》）一、2012年1月份，美国风险投资家 Paul Graham 发表了一封公开信，题目很夸张，叫做"摧毁好莱坞"（kill Hollywood）。他希望创业公司投入娱乐行业的创新，跟好莱坞一比高下，甚至取代它。当时，我读到这封信，心想怎么可能！好莱坞代表了整个电影工业，已经发展了一百多年，高度成熟，怎么可能在以后几十年里面被取代，难道未来的人们不看电影？而且，那时中国的电影市场刚刚起步，电影在国内完全是朝阳产业。Paul Graham 的核心观点是下面这句话。"电影行业正在死亡，互联网蓬勃兴起。未来会有更好的娱乐方式，让人们乐在其中，杀死电影和电视。"他的意思是，未来会有比电影更有趣、更好玩的娱乐方式，导致电影消失。但是，这种新的娱乐方式是什么，他没说，说实话也不知道，只是相信一定会出现。最近，我经常想起这句话，感到他的预言正在变成现实。我似乎已经有点知道了，比电影更好的娱乐是什么。二、请先思考一个问题。电影与旅行的差异是什么？回答是，电影是被动体验，旅行是主动体验。电影（包括电视）需要观众坐在屏幕前，从头到尾看完节目。整个过程中，你都是被动的接收者，导演和编剧安排你看什么，你就必须看什么。基本上，电影的模式就是你坐在那里，等着看接下来什么情节发生。旅行则是你拥有选择权，每一步都由自己决定。电影让你"看到"他人的生活，旅行则是让你"亲历" ...继续阅读 (84)

2016年，人生没有大变化，一整年都在工作。下图是我的Github的时间线。年初，《ES6 标准入门》出版了第二版，反响和销量还不错。然后一直在修改，争取明年推出第三版，ES2017 标准全覆盖。下半年，我发布了《React 技术栈系列教程》，作为 React 学习心得的总结。稍后，又发布了《JavaScript 全栈工程师培训教程》，推广全栈工程师的最短路径：React + Node。发布当天，就登上了热门项目排行榜的第一名。我还发布了《中文技术文档写作规范》，为将来的技术文档社区奠定基础。年底，写了一个静态站点生成器，还没做完，但已经可用。2016年，读了不少书。2016年，关注我的人也在增加。Github 的follwer突破了一万人，个人网站的Alexa 全球排名也挤进了前一万位，每个月的独立访问者 IP 超过了100万。2016年，知识可以变现了，公号打赏、分答、知乎 Live 这样的知识收费产品，层出不穷。我觉得这是一件好事，显示了知识的价值。但作为自由软件运动的支持者和受益者，这个博客还会继续这样写下去，坚持知识的自由分享。上面这些都不重要。2016年，发生在我身上最重要的事，其实与我没有直接关系。3月份的时候，谷歌公司的围棋程序 AlphaGo 战胜了世界冠军李世石。这让我猛然意识到，世界正处在一个前所未有的大变局：机器人、自动化、人工智能正在变得比人类更强大。在可 ...继续阅读 (78)

学习 Linux 时，经常可以看到两个词：User space（用户空间）和 Kernel space（内核空间）。简单说，Kernel space 是 Linux 内核的运行空间，User space 是用户程序的运行空间。为了安全，它们是隔离的，即使用户的程序崩溃了，内核也不受影响。Kernel space 可以执行任意命令，调用系统的一切资源；User space 只能执行简单的运算，不能直接调用系统资源，必须通过系统接口（又称 system call），才能向内核发出指令。str = "my string" // 用户空间 x = x + 2 file.write(str) // 切换到内核空间 y = x + 4 // 切换回用户空间上面代码中，第一行和第二行都是简单的赋值运算，在 User space 执行。第三行需要写入文件，就要切换到 Kernel space，因为用户不能直接写文件，必须通过内核安排。第四行又是赋值运算，就切换回 User space。查看 CPU 时间在 User space 与 Kernel Space 之间的分配情况，可以使用top命令。它的第三行输出就是 CPU 时间分配统计。这一行有 8 项统计指标。其中，第一项24.8 us（user 的缩写）就是 CPU 消耗在 User space 的时间百分比，第二项0.5 sy（system ...继续阅读 (115)

1.计算机硬件有两种储存数据的方式：大端字节序（big endian）和小端字节序（little endian）。举例来说，数值0x2211使用两个字节储存：高位字节是0x22，低位字节是0x11。大端字节序：高位字节在前，低位字节在后，这是人类读写数值的方法。小端字节序：低位字节在前，高位字节在后，即以0x1122形式储存。同理，0x1234567的大端字节序和小端字节序的写法如下图。2.我一直不理解，为什么要有字节序，每次读写都要区分，多麻烦！统一使用大端字节序，不是更方便吗？上周，我读到了一篇文章，解答了所有的疑问。而且，我发现原来的理解是错的，字节序其实很简单。3.首先，为什么会有小端字节序？答案是，计算机电路先处理低位字节，效率比较高，因为计算都是从低位开始的。所以，计算机的内部处理都是小端字节序。但是，人类还是习惯读写大端字节序。所以，除了计算机的内部处理，其他的场合几乎都是大端字节序，比如网络传输和文件储存。4.计算机处理字节序的时候，不知道什么是高位字节，什么是低位字节。它只知道按顺序读取字节，先读第一个字节，再读第二个字节。如果是大端字节序，先读到的就是高位字节，后读到的就是低位字节。小端字节序正好相反。理解这一点，才能理解计算机如何处理字节序。5.字节序的处理，就是一句话："只有读取的时候，才必须区分字节序，其他情况都不用考虑。"处理器读取外部数据的时候，必须知 ...继续阅读 (71)

我现在的技术方向，前端是React，后端是 Node，时间都投入在这两方面。最近有一种感觉，我可以融汇贯通了，使用 JavaScript 全栈解决各种问题。最初，我只是想整理一份技术清单，理清思路。但是内容越写越多，索性就做成一个教程，放在 Github 上面。这份教程一共四章，可以在两天内学完，适合那些已掌握前端基本技能（HTML、CSS、JS）、想进一步进修、成为 JavaScript 全栈工程师的读者。我的写作目标是内容完整、脉络清晰、通俗易懂，帮助初学者看清技术路径，快速入门。难度为入门级，不涉及深入的细节，重在理解各种技术想要解决的问题，掌握基本用法，为进一步自学打下基础。引子：《准备工作》知识准备环境准备第一讲：《前端开发的历史和趋势》前端开发的历史演变前端MVC框架的兴起前后端分离全栈工程师前端开发的未来第二讲：《React 技术栈》React 的基本用法React 应用的架构第三讲：《Node 应用开发》Node 的基本用法Restful APIExpress 框架搭建 Web 应用第四讲：《前端工程简介》持续集成静态代码检查单元测试功能测试持续集成服务 Travis CI所有内容都配有Demo和操作指导，帮助读者边学边练，保证学会。我已经找了一个场合，试讲了一次上面的内容，觉得效果还可以。本教程采用 GPL 许可证，你可以自由地使用它，唯一的条件是如果对内容做出任 ...继续阅读 (72)

网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。目前有一个新的IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。一、API它的用法非常简单。var io = new IntersectionObserver(callback, option);上面代码中，IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。// 开始观察 io.observe(document.getElementById('example')); // 停止观察 io.unobserve(element); // ...继续阅读 (74)

很多人说，不知道怎么写文档，都是凭着感觉写。网上也很少有资料，教你写文档。这已经影响了中文软件的发展。英语世界里，文档非常受重视，许多公司和组织都有自己的文档规范，清楚地规定写作要求，比如微软、MailChimp、Apple、Yahoo、docker、Struts等等（维基百科有一份完整的清单）。中文的也有不少，但都不令人满意，要么太简单，要么不太适用。我就动手，参考上面的规范，也结合自己的实践，总结了一份简单的《中文技术文档的写作规范》。标题文本段落数值标点符号章节结构我希望，这样可以抛砖引玉，让更多人重视文档，进而真正出现大家普遍接受的文档规范。下面是关于写作风格的一个片段。欢迎提交Issue和PR补充。=================================写作风格（摘自《中文技术文档的写作规范》）如果使用了被动语态，应考虑更改为主动语态。错误：假如此软件尚未被安装， 正确：假如尚未安装这个软件，不使用非正式的语言风格。错误：Lady Gaga 的演唱会真是酷毙了，从没看过这么给力的表演！！！ 正确：无法参加本次活动，我深感遗憾。用对"的"、"地"、"得"。她露出了开心的笑容。 （形容词＋的＋名词） 她开心地笑了。 （副词＋地＋动词） 她笑得很开心。 （动词＋得＋副词）使用代词时（比如"其"、"该"、"此"、"这"等词），必须明确指代的内容，保证只有一个含义 ...继续阅读 (71)

（说明：本文原载2016年第35期《财新周刊》。）1.我一直相信，互联网教育是未来的方向。美国三个主要的在线教育网站----Udacity，Coursera，可汗学院----我都经常访问。今年四月，Udacity 进入中国，推出了中文版"优达学城"，一下子引起了我的兴趣。因为它干了一件没有先例的事情：颁发网络文凭。它办了一个网上的"硅谷大学"，自己发文凭，名称是"纳米学位"。"纳米学位（Nanodegree）是优达学城此前与 Google、Facebook、亚马逊等互联网公司联合推出的学历认证项目。学员在线学习，所有项目考核合格之后即可获得纳米学位。"现在总共有12种纳米学位，包括机器学习、无人驾驶车开发、VR 开发这样非常前沿的领域。官网这样介绍："我们没有严格意义上的录取流程，对报名者唯一的要求是学习该纳米学位项目所必须的先修知识和技能。纳米学位项目采取自主学习模式，你可以按照你喜欢的速度完成项目。12个月内完成纳米学习，可以得到50%学费返回。"该公司宣称，国内的许多互联网公司（比如滴滴出行、优酷土豆、京东、新浪）已经认可了纳米学位。我忍不住想，会不会以后找工作，大家手里拿的不是大学文凭，而是网站颁发的文凭？如果雇主认可网络文凭，我们是否还需要大学文凭？下面是我的一些思考。另外，我与优达学城的工程师有过一些个人交流，他们最近正好在搞活动，我想做一下推广，文章的结尾处有详细信息 ...继续阅读 (71)

Node 开发离不开 npm，而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本（npm scripts）。一、什么是 npm 脚本？npm 允许在package.json文件里面，使用scripts字段定义脚本命令。{ // ... "scripts": { "build": "node build.js" } }上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js。命令行下使用npm run命令，就可以执行这段脚本。$ npm run build # 等同于执行 $ node build.js这些定义在package.json里面的脚本，就称为 npm 脚本。它的优点很多。项目的相关脚本，可以集中在一个地方。不同项目的脚本命令，只要功能相同，就可以有同样的对外接口。用户不需要知道怎么测试你的项目，只要运行npm run test即可。可以利用 npm 提供的很多辅助功能。查看当前项目的所有 npm 脚本命令，可以使用不带任何参数的npm run命令。$ npm run二、原理npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 ...继续阅读 (70)

上周中秋节，我待在家里，写完了Redux教程。至此，《React 技术栈系列教程》算是比较完整了。ES6 语法：教程Babel：教程React：教程，示例库Webpack：教程React 项目脚手架：代码库Flex 布局：教程，示例CSS Modules：教程，示例库React-Router：教程，示例库Flux 架构：教程，示例库Redux 架构：教程一、教程二、教程三Mocha 测试框架：教程，示例库Istanbul 覆盖率框架：教程React 单元测试：教程，示例库它们都针对初学者，尽量通俗易懂，帮大家节省一些看文档的时间，让你快速上手。其中，React 教程在 Github 已经得到 6000 颗星，Webpack 教程也有 2000 颗星了。这两年没停过，一直在学习新东西，学习心得就写成了上面的教程。虽然看上去数量不少，但是下一代的互联网开发技术，我还是只学了很小一部分，像 PostCSS、GraphQL、Electron 这些感兴趣的东西，都没时间搞。面对技术的高速发展和百花齐放，我有时也感到疲倦烦躁。但是，每当看到它们带来的生产力的飞跃，让你一个人快速搞定前后端的全部开发时，就觉得这终究还是一条正确的道路。（完）文档信息版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）发表日期：2016年9月23日更多内容：档案»JavaScript购买文集：《如何 ...继续阅读 (121)

前两篇教程介绍了 Redux 的基本用法和异步操作，今天是最后一部分，介绍如何在 React 项目中使用 Redux。为了方便使用，Redux 的作者封装了一个 React 专用的库React-Redux，本文主要介绍它。这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。一、UI 组件React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。UI 组件有以下几个特征。只负责 UI 的呈现，不带有任何业务逻辑没有状态（即不使用this.state这个变量）所有数据都由参数（this.props）提供不使用任何 Redux 的 API下面就是一个 UI 组件的例子。const Title = value => <h1>{value}</h1>;因为不含有状态，UI 组件又称为"纯组件"，即它纯函数一样，纯粹由参数决定它的值。二、容器组件容器组件的特征恰恰相反。负责管理数据和业务逻辑，不负责 UI 的呈现带有内部状态使用 Redux 的 API总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。你可能会问 ...继续阅读 (71)

上一篇文章，我介绍了 Redux 的基本做法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。但是，一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。怎么才能 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。一、中间件的概念为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。（2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。（3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。想来想去，只有发送 Action 的这个步骤，即store.dispatch()方法，可以添加功能。举例来说，要添加日志功能，把 Action 和 State 打印出来，可以对store.dispatch进行如下改造。let next = store.dispatch; store.dispatch = function dispatchAndLog(ac ...继续阅读 (79)

一年半前，我写了《React 入门实例教程》，介绍了 React 的基本用法。但是，React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。也就是说，只用 React 没法写大型应用。为了解决这个问题，2014年 Facebook 提出了Flux架构的概念，引发了很多的实现。2015年，Redux出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。本文详细介绍 Redux 架构，由于内容较多，全文分成三个部分。今天是第一部分，介绍基本概念和用法。零、你可能不需要 Redux首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。曾经有人说过这样一句话。"如果你不知道是否需要 Redux，那就是不需要它。"Redux 的创造者 Dan Abramov 又补充了一句。"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。用户的使用方式非常简单用户之间没有协作不需要与服务器大量交互，也没有使用 WebSocket视图层（View）只从单一来源获取数据上面这些情况，都不需要使用 Redux。用户的使用方式复杂不同身份的用户有不同的使用方式（比如普通用户和管理员）多个用户之间可 ...继续阅读 (76)

跨域脚本攻击XSS是最常见、危害最大的网页安全漏洞。为了防止它们，要采取很多编程措施，非常麻烦。很多人提出，能不能根本上解决问题，浏览器自动禁止外部注入恶意脚本？这就是"网页安全政策"（Content Security Policy，缩写 CSP）的来历。本文详细介绍如何使用 CSP 防止 XSS 攻击。一、简介CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy的字段。Content-Security-Policy: script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:另一种是通过网页的<meta>标签。<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.examp ...继续阅读 (77)

上一篇文章，我摘录了《程序员的呐喊》。这本书有趣的内容太多，今天再摘录一段。1、亚马逊公司不仅是世界最大的网络书店，还是世界最大的云服务商。它是怎么实现从电商到云商的转变呢？一切都是CEO杰夫·贝索斯促成的，他对市场有着超乎常人的理解和预见。2、2000年前后，贝索斯有一次在员工大会上提到，各种办公工具、书籍、影音制品都可以数字化，所以也意味着很容易盗版。数字产品可能会利润越来越低，很快就不再产生任何收入了。所有的民用工业品也都很不妙，服装和电子消费品的消费周期越来越短。连烤炉这种东西，也没人想要去年的型号。总之，卖这些东西，看上去也不太会赚大钱。亚马逊未来靠什么赚钱，贝索斯不仅忧心忡忡。3、2002年，贝索斯突然向全公司发布了一道指令。（1）从今天起，所有的团队都要以服务接口的方式，提供数据和各种功能。（2）团队之间必须通过接口来通信。（3）不允许任何其他形式的互操作：不允许直接链接，不允许直接读其他团队的数据，不允许共享内存，不允许任何形式的后门。唯一许可的通信方式，就是通过网络调用服务。（4）具体的实现技术不做规定，HTTP、Corba、PubSub、自定义协议皆可。（5）所有的服务接口，必须从一开始就以可以公开作为设计导向，没有例外。这就是说，在设计接口的时候，就默认这个接口可以对外部人员开放，没有讨价还价的余地。（6）不遵守上面规定，就开除。他意识到，亚马逊现有的卖书送书 ...继续阅读 (74)

最近，我在阅读 Steve Yegg 的文集《程序员的呐喊》。这是一本非常有趣的书，里面甚至包含了一个小测试（原文），区分一个程序员到底是保守派还是自由派。下面一共有十个问题，每个问题都有 A 和 B 两个选项，请选择你的答案。问题一：Bug 还没修复，软件能不能上线？（A）软件发布前，应该编写完整测试，充分调试，尽量修复所有bug。（B）不管多努力，bug 总是无法避免的，如果性质不是很严重，可以先上线，根据反馈再调试和修补。问题二：容易出错的特性，是否应该用在程序中？（A）很多语言的高级特性都是很容易出错和危险的，应该禁止用在代码里。没有这些特性我们一样可以进行开发，代码也会因此变得更安全。（B）聪明的程序员有学习动力，知道怎么可以解决问题。为了避免出错，就立下一堆规矩，完全不可取。问题三：新的语言或语法是否应该有所限制？（A）公司里可以使用的语言数量应该受到限制，这样万一系统在半夜或是圣诞夜挂掉的时候，值班的人就不需要去临时抱佛脚学习新语法了。另外，也应该禁止改变语言原始定义的语法，比如严格限制操作符重载和元编程。（B）程序员的学习能力是惊人的，没必要"保护"程序员远离新语法，只要有需要，他们自然能学会。问题四：静态检查是否必要？（A）编译器的安全检查很重要，不能进行静态检查的代码通常是不可接受的。（B）代码应该短小精悍，静态检查工具可能会让代码变得又臭又长。问题五：数据是否 ...继续阅读 (70)

软件架构（software architecture）就是软件的基本结构。合适的架构是软件成功的最重要因素之一。大型软件公司通常有专门的架构师职位（architect），只有资深程序员才可以担任。O'Reilly 出版过一本免费的小册子《Software Architecture Patterns》（PDF）， 介绍了五种最常见的软件架构，是非常好的入门读物。我读后受益匪浅，下面就是我的笔记。一、分层架构分层架构（layered architecture）是最常见的软件架构，也是事实上的标准架构。如果你不知道要用什么架构，那就用它。这种架构将软件分成若干个水平层，每一层都有清晰的角色和分工，不需要知道其他层的细节。层与层之间通过接口通信。虽然没有明确约定，软件一定要分成多少层，但是四层的结构最常见。表现层（presentation）：用户界面，负责视觉和用户互动业务层（business）：实现业务逻辑持久层（persistence）：提供数据，SQL 语句就放在这一层数据库（database） ：保存数据有的软件在逻辑层和持久层之间，加了一个服务层（service），提供不同业务逻辑需要的一些通用接口。用户的请求将依次通过这四层的处理，不能跳过其中任何一层。优点结构简单，容易理解和开发不同技能的程序员可以分工，负责不同的层，天然适合大多数软件公司的组织架构每一层都可以独立测试，其他 ...继续阅读 (65)

上一篇文章我介绍了HTTP/2 协议，它只有在 HTTPS 环境才会生效。为了升级到 HTTP/2 协议，必须先启用 HTTPS。如果你不了解 HTTPS 协议（学名 TLS 协议），可以参考我以前的文章。《HTTPS 协议概述》《图解 HTTPS 协议》《HTTPS 协议的七个误解》《HTTPS 协议的延迟有多大？》本文介绍如何将一个 HTTP 网站升级到 HTTPS 。一、获取证书升级到 HTTPS 协议的第一步，就是要获得一张证书。证书是一个二进制文件，里面包含经过认证的网站公钥和一些元数据，要从经销商购买。GoGetSSLSSLs.comSSLmate.com证书有很多类型，首先分为三种认证级别。域名认证（Domain Validation）：最低级别认证，可以确认申请人拥有这个域名。对于这种证书，浏览器会在地址栏显示一把锁。公司认证（Company Validation）：确认域名所有人是哪一家公司，证书里面会包含公司信息。扩展认证（Extended Validation）：最高级别的认证，浏览器地址栏会显示公司名。还分为三种覆盖范围。单域名证书：只能用于单一域名，foo.com的证书不能用于www.foo.com通配符证书：可以用于某个域名及其所有一级子域名，比如*.foo.com的证书可以用于foo.com，也可以用于www.foo.com多域名证书：可以用于多个域名 ...继续阅读 (88)

HTTP 协议是互联网的基础协议，也是网页开发的必备知识，最新版本 HTTP/2 更是让它成为技术热点。本文介绍 HTTP 协议的历史演变和设计思路。一、HTTP/0.9HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。最早版本是1991年发布的0.9版。该版本极其简单，只有一个命令GET。GET /index.html上面命令表示，TCP 连接（connection）建立后，客户端向服务器请求（request）网页index.html。协议规定，服务器只能回应HTML格式的字符串，不能回应别的格式。<html> <body>Hello World</body> </html>服务器发送完毕，就关闭TCP连接。二、HTTP/1.02.1 简介1996年5月，HTTP/1.0 版本发布，内容大大增加。首先，任何格式的内容都可以发送。这使得互联网不仅可以传输文字，还能传输图像、视频、二进制文件。这为互联网的大发展奠定了基础。其次，除了GET命令，还引入了POST命令和HEAD命令，丰富了浏览器与服务器的互动手段。再次，HTTP请求和回应的格式也变了。除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据。其他的新增功能还包括状态码（st ...继续阅读 (62)

（说明：本文原载2016年第32期《财新周刊》。文后还会介绍一个新网站"海棠学院"。）1.最近，我读完了《人类简史》（中信出版社，2014）。它是以色列学者尤瓦尔·赫拉利写的畅销书，主要讲人类这个物种（即智人）的历史。全书最大特点就是，作者完全用自己的想法解释历史，有大量的独特观点。它不是学术著作，而是表达个人的历史观。最惊人的一个观点，大概是他对人类的前途相当悲观，认为人类可能即将灭绝。2.全书最后一章的标题，叫做《智人末日》。作者感叹道，人类社会存在了七万年，真正的大发展只是最近两三百年。但是，再过一千年，人类是否还会存在，已经很可疑了。"今天，人类正在让许多物种灭绝，甚至可能包括自己。如果今天发生核灾而让世界末日降临，人类将毁灭，而老鼠和蟑螂很可能继续生存下去。或许6500万年后，会有一群高智商的老鼠心怀感激地回顾人类造成的这场灾难。"我们还有多久时间？没有人真正知道。如果智人的历史确实即将谢幕，我们这些最后一代的智人，或许该花点时间回答最后一个问题：我们究竟想要变成什么？"3.尤瓦尔·赫拉利认为，人类可能灭绝的根本原因，在于技术的高速发展。技术带来了现代化生活，也导致了前所未有的危机。别的不说，眼下的危机就是，短期内就会有大量失业出现，许多人将变得毫无用处。"技术造成的人力精简，将在今后5年内，导致全球发达国家失去710万个工作岗位，但在科技、专业服务及媒体领域，将创造21 ...继续阅读 (65)

布尔代数是计算机的基础。没有它，就不会有计算机。布尔代数发展到今天，已经非常抽象，但是它的核心思想很简单。本文帮助你理解布尔代数，以及为什么它促成了计算机的诞生。我依据的是《编码的奥妙》的第十章。这是一本好书，强烈推荐。一、数理逻辑的起源18世纪早期，英国数学家乔治·布尔（George Boole，1815－1864）突发奇想：人的思想能不能用数学表达？此前，数学只用于计算，没有人意识到，数学还能表达人的逻辑思维。两千年来，哲学书都是用文字写的。比如，最著名的三段论：所有人都是要死的，苏格拉底是人，所以，苏格拉底是要死的。乔治·布尔认为，这种推理可以用数学表达，也就是说，哲学书完全可以用数学写。这就是数理逻辑的起源。二、集合论乔治·布尔发明的工具，叫做"集合论"（Set theory）。他认为，逻辑思维的基础是一个个集合（Set），每一个命题表达的都是集合之间的关系。比如，所有人类组成一个集合R，所有会死的东西组成一个集合D。所有人都是要死的集合论的写法就是：R X D = R集合之间最基本的关系是并集和交集。乘号（X）表示交集，加号（+）表示并集。上面这个式子的意思是，R与D的交集就是R。同样的，苏格拉底也是一个集合S，这个集合里面只有苏格拉底一个成员。苏格拉底是人// 等同于S X R = S上面式子的意思是，苏格拉底与人类的交集，就是苏格拉底。将第一个式子代入第二个式子，就得 ...继续阅读 (122)

（说明：本文原载2016年第29期《财新周刊》）1.新闻说，今年全国高校毕业生达到空前的756万，又赶上很多传统行业压缩产能，就业压力很大。很多曾经的"明星专业"，都已经就业困难。我考大学的时候，国际贸易是最热门的专业之一，大家认定这个专业容易赚钱。但是现在这个专业的毕业生，想找一份好工作会很难，上海将它列入10大预警专业，即最难就业的十个专业之一。但是，并非所有行业都不景气。至少有一个行业的用工需求极其旺盛，到处都是招聘广告，工作岗位是应聘者数量的好几倍，通常你都有好几家公司可以挑。每周都有朋友发来消息，能不能帮忙介绍几个人过来，我们实在是缺人啊。这个行业就叫做互联网开发。2.互联网行业的劳动力需求，可以用"用工荒"来形容。只要你会做网页，尤其是手机App的页面，或者微信的活动页面，就不愁找不到工作。哪怕你刚刚学会几个月，或者刚从培训班毕业，只要能拿出作品，就会有比其他行业高得多的起薪。等到有了一两年工作经验，工资就可以达到大学教授的水平。这样的就业行情，怎不令人趋之若骛。尽管每年都有好几万新人加入，互联网公司还是在喊，工程师严重短缺。我曾经不太理解，为什么网页开发工程师（或称"前端工程师"）这么抢手。直到有一天，看到了一组鸡蛋的统计数据，才想通了这个问题。3.中国是世界鸡蛋第一大国。据统计，2013年全国产量5750亿枚，一个中国人平均一年要吃掉400多枚鸡蛋。那么中国需要多少 ...继续阅读 (70)

图像识别（image recognition）是现在的热门技术。文字识别、车牌识别、人脸识别都是它的应用。但是，这些都算初级应用，现在的技术已经发展到了这样一种地步：计算机可以识别出，这是一张狗的照片，那是一张猫的照片。这是怎么做到的？让我们从人眼说起，学者发现，人的视觉细胞对物体的边缘特别敏感。也就是说，我们先看到物体的轮廓，然后才判断这到底是什么东西。计算机科学家受到启发，第一步也是先识别图像的边缘。加州大学的学生 Adit Deshpande 写了一篇文章《A Beginner's Guide To Understanding Convolutional Neural Networks》，介绍了一种最简单的算法，非常具有启发性，体现了图像识别的基本思路。首先，我们要明白，人看到的是图像，计算机看到的是一个数字矩阵。所谓"图像识别"，就是从一大堆数字中找出规律。怎样将图像转为数字呢？一般来说，为了过滤掉干扰信息，可以把图像缩小（比如缩小到 49 x 49 像素），并且把每个像素点的色彩信息转为灰度值，这样就得到了一个 49 x 49 的矩阵。然后，从左上角开始，依次取出一个小区块，进行计算。上图是取出一个 5 x 5 的区块。下面的计算以 7 x 7 的区块为例。接着，需要有一些现成的边缘模式，比如垂直、直角、圆、锐角等等。上图右边是一个圆角模式，左边是它对应的 7 x 7 灰 ...继续阅读 (89)

编程免不了要写配置文件，怎么写配置也是一门学问。YAML 是专门用来写配置文件的语言，非常简洁和强大，远比 JSON 格式方便。本文介绍 YAML 的语法，以JS-YAML的实现为例。你可以去在线 Demo验证下面的例子。一、简介YAML 语言（发音 /ˈjæməl/ ）的设计目标，就是方便人类读写。它实质上是一种通用的数据串行化格式。它的基本语法规则如下。大小写敏感使用缩进表示层级关系缩进时不允许使用Tab键，只允许使用空格。缩进的空格数目不重要，只要相同层级的元素左侧对齐即可#表示注释，从这个字符一直到行尾，都会被解析器忽略。YAML 支持的数据结构有三种。对象：键值对的集合，又称为映射（mapping）/ 哈希（hashes） / 字典（dictionary）数组：一组按次序排列的值，又称为序列（sequence） / 列表（list）纯量（scalars）：单个的、不可再分的值以下分别介绍这三种数据结构。二、对象对象的一组键值对，使用冒号结构表示。animal: pets转为 JavaScript 如下。{ animal: 'pets' }Yaml 也允许另一种写法，将所有键值对写成一个行内对象。hash: { name: Steve, foo: bar }转为 JavaScript 如下。{ hash: { name: 'Steve', foo: 'bar' } }三、数 ...继续阅读 (74)

谷歌和 Facebook 都只有一个代码仓库，全公司的代码都放在这个库里。我一直很困惑，为什么要这样做，不同语言的项目放在一个库有什么好处？最新一期的《ACM通信》（59卷第7期）有一篇论文《为什么 Google 要把几十亿行代码放在一个库？》，作者是谷歌基础设施小组的工程师，可以看作官方对这个问题的详细解答。我读后感到收获很大，下面就是摘录。一、概况谷歌最早使用 CVS 进行代码管理，1999年改为 Perforce。那时是一台 Perforce 主机，加上各种缓存机。当时，全公司的代码就在一个仓库里面，后来一直沿用这种做法。由于规模不断增长，Perforce 已经无法满足需求，谷歌就开始使用自己开发的版本管理系统 Piper。Piper 架设在谷歌自己的分布式数据库系统（以前叫 Bigtable，现在改名 Spanner）之上，分布在全世界10个数据中心，保证世界各地的谷歌员工都有良好的访问速度。目前，这个代码仓库包含10亿个文件、3500万次提交记录，大小为86TB，用户达到几万人。工作日每秒有50万次请求，高峰时80万次，大部分来自自动构建和测试系统。谷歌90%以上的代码，放在 Piper 里面。对于那些开源的、需要外部协作的项目，代码放在 Git，主要是 Android 项目和 Chrome 项目。Git 的特点是，所有历史记录都会复制到用户的本地机器，所以不适合大型项目 ...继续阅读 (92)

（说明：本文原载2016年第24期《财新周刊》）我在杭州工作，周末通常去爬山。今年九月，这里将举办盛大的G20峰会。全城都在忙碌地筹备，山路上也不例外。距离西湖最近的一圈山头，都在安装照明设备，准备在夜间亮灯。那些灯柱都是铸铁做的，高度六七米，非常沉重。施工队使用骡子，将灯柱从山脚运到峰顶。我在山路上遇过好几次驮运设备的骡子。它们背上两边各绑着一根极重的灯柱，默默地低着头，蹒跚地踩在石阶上。等爬到峰顶，卸下设备以后，又返回山脚，驮运下一批。每头骡子的屁股后面，都跟着一个拿着木棍、看管它的施工人员，防止它走错路。有一次，我看见一头骡子缓缓走着，突然停下来，低着头毫无表情地一动不动，不知道是累了还是不想走了。监工见状，立即拿棍子戳它，它茫然地抬起头，又顺从地继续向前走了。看到这一幕，我非常感慨。骡子并不知道，为何要把如此重的铁管背到山顶，就是因为主人要求它这么做，就任劳任怨地干了。哪怕有那么一瞬间，它的内心有过一丝抗拒或疑问，主人一施压，它就不再追问了，回到正常的状态，默默地听任摆布。我从这头骡子身上，想到很多人不也是这样，背负重压，被推着前行，却不知为何。他们埋头勤奋工作，努力完成上级交付的每一个任务，别人让你干什么就干什么，却没有思考过这一切到底为了什么。说起来，中国人与骡子真的有很多相似性。一方面，许多人背上的生活压力，不会比那头骡子小多少，尤其是底层民众。另一方面，中国人的勤劳 ...继续阅读 (95)

DNS 是互联网核心协议之一。不管是上网浏览，还是编程开发，都需要了解一点它的知识。本文详细介绍DNS的原理，以及如何运用工具软件观察它的运作。我的目标是，读完此文后，你就能完全理解DNS。一、DNS 是什么？DNS （Domain Name System 的缩写）的作用非常简单，就是根据域名查出IP地址。你可以把它想象成一本巨大的电话本。举例来说，如果你要访问域名math.stackexchange.com，首先要通过DNS查出它的IP地址是151.101.129.69。如果你不清楚为什么一定要查出IP地址，才能进行网络通信，建议先阅读我写的《互联网协议入门》。二、查询过程虽然只需要返回一个IP地址，但是DNS的查询过程非常复杂，分成多个步骤。工具软件dig可以显示整个查询过程。$ dig math.stackexchange.com上面的命令会输出六段信息。第一段是查询参数和统计。第二段是查询内容。上面结果表示，查询域名math.stackexchange.com的A记录，A是address的缩写。第三段是DNS服务器的答复。上面结果显示，math.stackexchange.com有四个A记录，即四个IP地址。683是TTL值（Time to live 的缩写），表示缓存时间，即683秒之内不用重新查询。第四段显示stackexchange.com的NS记录（Name Ser ...继续阅读 (72)

学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。本文介绍的CSS Modules有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖，这恰恰是网页组件最急需的功能。因此，CSS Modules 很容易学，因为它的规则少，同时又非常有用，可以保证某个组件的样式，不会影响到其他组件。零、示例库我为这个教程写了一个示例库，包含六个Demo。通过它们，你可以轻松学会CSS Modules。首先，克隆示例库。$ git clone git@github.com:ruanyf/css-modules-demos.git然后，安装依赖。$ cd css-modules-demos $ npm install接着，就可以运行第一个示例了。$ npm run demo01打开浏览器，访问http://localhost:8080，查看结果。其他示例的运行方法类似。一、局部作用域CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modu ...继续阅读 (99)