2016年6月23日星期四

阮一峰的网络日志

阮一峰的网络日志

你的命运不是一头骡子

Posted: 22 Jun 2016 03:24 PM PDT

（说明：本文原载2016年第24期《财新周刊》）

我在杭州工作，周末通常去爬山。

今年九月，这里将举办盛大的G20峰会。全城都在忙碌地筹备，山路上也不例外。

距离西湖最近的一圈山头，都在安装照明设备，准备在夜间亮灯。

那些灯柱都是铸铁做的，高度六七米，非常沉重。施工队使用骡子，将灯柱从山脚运到峰顶。

我在山路上遇过好几次驮运设备的骡子。它们背上两边各绑着一根极重的灯柱，默默地低着头，蹒跚地踩在石阶上。等爬到峰顶，卸下设备以后，又返回山脚，驮运下一批。每头骡子的屁股后面，都跟着一个拿着木棍、看管它的施工人员，防止它走错路。

有一次，我看见一头骡子缓缓走着，突然停下来，低着头毫无表情地一动不动，不知道是累了还是不想走了。监工见状，立即拿棍子戳它，它茫然地抬起头，又顺从地继续向前走了。

看到这一幕，我非常感慨。骡子并不知道，为何要把如此重的铁管背到山顶，就是因为主人要求它这么做，就任劳任怨地干了。哪怕有那么一瞬间，它的内心有过一丝抗拒或疑问，主人一施压，它就不再追问了，回到正常的状态，默默地听任摆布。

我从这头骡子身上，想到很多人不也是这样，背负重压，被推着前行，却不知为何。他们埋头勤奋工作，努力完成上级交付的每一个任务，别人让你干什么就干什么，却没有思考过这一切到底为了什么。

说起来，中国人与骡子真的有很多相似性。一方面，许多人背上的生活压力，不会比那头骡子小多少，尤其是底层民众。另一方面，中国人的勤劳和忍耐能力，更是有过之而无不及。最重要的一点是，骡子只能接受现实，接受命运的安排，人又何尝不是如此呢？

不过，骡子是确实没有办法，它不会思考，没有能力抗拒命运的安排。人可以思考，也有行动能力。我感叹的是，那么多人心甘情愿地放弃，这种只有人类才具有的天赋，"自愿"像骡子那样活着，还说"这就是命，能有什么办法呢"，或者"我也不知道啊，除了这个，我还能干什么"。

读到这里，你也许会说，"哪有你说的那么严重，工作就是为了赚钱。什么接受命运的摆布、放弃思考能力。为了多赚一点钱努力工作，不是很合理吗，跟骡子扯得上关系吗？"

当然，在生存面前，一切都是合理的。骡子为了生存，必须俯首听命。但是，21世纪的中国青年，生存本身似乎已经不是问题了。在这样一个产能和资本过剩的时代，除了赚钱以外，是不是应该对自己的人生做一些认真的思考，不要让"赚钱"成为思想懒惰的借口。退一步说，就算你像骡子那样活着，真的赚到了很多钱，是否可以就此认定，当一头骡子是正确的事情？

说实话，我不太确定。假如有一道填空题，"如果因此可以获得彩票头奖，为什么不____呢？"，在下划线的地方填入"当一头骡子"，似乎逻辑上也说得过去。但从内心里，或者说基于我的偏执，我还是认为这样是不对的。

让我举一个实际的例子。我比较熟悉"软件工程师"这个职业，也就是职业程序员。在我看来，这种职业跟骡子有很多相似性，尤其在大公司里。因为大公司有严格的分工，设计师出视觉稿，业务部门提出需求和业务逻辑，产品经理负责项目实施，工程师的职责就是严格按照设计稿，将产品一模一样地实现出来。本质上，这跟骡子背铁管上山，并没有区别。

《黑客与画家》的作者保罗•格雷厄姆，做过一个非常好的概括。

"......（你）只是一个负责实现领导意志的技术工人，职责就是根据规格说明书写出代码，其实与一个挖水沟的工人是一样的，从这头挖到那头，仅此而已，从事的都是机械性的工作。"

我不是说这样的流程有什么不对，而是说在这个流程里，人只是充当一种工具。就像骡子只是铁管上山的一种手段，你只是产出代码的一种手段，本身并没有"自由意志"体现在里面。或者说，你身上体现的都是他人的（或资本的）意志，你无法表现出自我。评价骡子的标准是，铁管背得比较多、比较快，评价软件工程师的标准又何尝不是如此呢，都是看是否忠实有效地实现那些外部意志。

我见过许多年轻的程序员勤奋工作，从早到晚一刻不停地编码，周末也来加班，努力完成公司的一个个目标，从来不问、甚至不想"这种需求对不对"、"这个功能有没有必要"，更不要说想一想"我的人生规划是什么"。中国的现实也很残酷，公司的哲学就是告诉你做什么，你就做什么，不想做就离开。

我可以想象，等到九月盛会召开时，工程完成，山头亮起灯光，与明月共同照映山脚下的西湖，平湖如镜，游人泛舟，夏夜凉风吹拂，何等的美景美事。骡子参与了这一切的创造过程，但是有谁会记得它们呢，它们的宿命就是接着去下一个工程背铁管。

骡子只是施工队的工具，跟锄头或者扁担没有本质区别。但你不是他人的工具，你活着不是为了被动地被他人使用，而是应该要有自己的价值。我觉得，人应该过一种有乐趣、有追求、自己做主的生活，而不能像骡子那样被推着走。

（完）

文档信息
发帖者 时间：

2016年6月16日星期四

阮一峰的网络日志

阮一峰的网络日志

DNS 原理入门

Posted: 15 Jun 2016 04:12 PM PDT

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地址。600是TTL值（Time to live 的缩写），表示缓存时间，即600秒之内不用重新查询。

第四段显示stackexchange.com的NS记录（Name Server的缩写），即哪些服务器负责管理stackexchange.com的DNS记录。

上面结果显示stackexchange.com共有四条NS记录，即四个域名服务器，向其中任一台查询就能知道math.stackexchange.com的IP地址是什么。

第五段是上面四个域名服务器的IP地址，这是随着前一段一起返回的。

第六段是DNS服务器的一些传输信息。

上面结果显示，本机的DNS服务器是192.168.1.253，查询端口是53（DNS服务器的默认端口），以及回应长度是305字节。

如果不想看到这么多内容，可以使用+short参数。

 $ dig +short math.stackexchange.com  151.101.129.69 151.101.65.69 151.101.193.69 151.101.1.69

上面命令只返回math.stackexchange.com对应的4个IP地址（即A记录）。

三、DNS服务器

下面我们根据前面这个例子，一步步还原，本机到底怎么得到域名math.stackexchange.com的IP地址。

首先，本机一定要知道DNS服务器的IP地址，否则上不了网。通过DNS服务器，才能知道某个域名的IP地址到底是什么。

DNS服务器的IP地址，有可能是动态的，每次上网时由网关分配，这叫做DHCP机制；也有可能是事先指定的固定地址。Linux系统里面，DNS服务器的IP地址保存在/etc/resolv.conf文件。

上例的DNS服务器是192.168.1.253，这是一个内网地址。有一些公网的DNS服务器，也可以使用，其中最有名的就是Google的8.8.8.8和Level 3的4.2.2.2。

本机只向自己的DNS服务器查询，dig命令有一个@参数，显示向其他DNS服务器查询的结果。

 $ dig @4.2.2.2 math.stackexchange.com

上面命令指定向DNS服务器4.2.2.2查询。

四、域名的层级

DNS服务器怎么会知道每个域名的IP地址呢？答案是分级查询。

请仔细看前面的例子，每个域名的尾部都多了一个点。

比如，域名math.stackexchange.com显示为math.stackexchange.com.。这不是疏忽，而是所有域名的尾部，实际上都有一个根域名。

举例来说，www.example.com真正的域名是www.example.com.root，简写为www.example.com.。因为，根域名.root对于所有域名都是一样的，所以平时是省略的。

根域名的下一级，叫做"顶级域名"（top-level domain，缩写为TLD），比如.com、.net；再下一级叫做"次级域名"（second-level domain，缩写为SLD），比如www.example.com里面的.example，这一级域名是用户可以注册的；再下一级是主机名（host），比如www.example.com里面的www，又称为"三级域名"，这是用户在自己的域里面为服务器分配的名称，是用户可以任意分配的。

总结一下，域名的层级结构如下。

 主机名.次级域名.顶级域名.根域名  # 即  host.sld.tld.root

五、根域名服务器

DNS服务器根据域名的层级，进行分级查询。

需要明确的是，每一级域名都有自己的NS记录，NS记录指向该级域名的域名服务器。这些服务器知道下一级域名的各种记录。

所谓"分级查询"，就是从根域名开始，依次查询每一级域名的NS记录，直到查到最终的IP地址，过程大致如下。

  1. 从"根域名服务器"查到"顶级域名服务器"的NS记录和A记录（IP地址）
  2. 从"顶级域名服务器"查到"次级域名服务器"的NS记录和A记录（IP地址）
  3. 从"次级域名服务器"查出"主机名"的IP地址

仔细看上面的过程，你可能发现了，没有提到DNS服务器怎么知道"根域名服务器"的IP地址。回答是"根域名服务器"的NS记录和IP地址一般是不会变化的，所以内置在DNS服务器里面。

下面是内置的根域名服务器IP地址的一个例子。

上面列表中，列出了根域名（.root）的三条NS记录A.ROOT-SERVERS.NET、B.ROOT-SERVERS.NET和C.ROOT-SERVERS.NET，以及它们的IP地址（即A记录）198.41.0.4、192.228.79.201、192.33.4.12。

另外，可以看到所有记录的TTL值是3600000秒，相当于1000小时。也就是说，每1000小时才查询一次根域名服务器的列表。

目前，世界上一共有十三组根域名服务器，从A.ROOT-SERVERS.NET一直到M.ROOT-SERVERS.NET。

六、分级查询的实例

dig命令的+trace参数可以显示DNS的整个分级查询过程。

 $ dig +trace math.stackexchange.com

上面命令的第一段列出根域名.的所有NS记录，即所有根域名服务器。

根据内置的根域名服务器IP地址，DNS服务器向所有这些IP地址发出查询请求，询问math.stackexchange.com的顶级域名服务器com.的NS记录。最先回复的根域名服务器将被缓存，以后只向这台服务器发请求。

接着是第二段。

上面结果显示.com域名的13条NS记录，同时返回的还有每一条记录对应的IP地址。

然后，DNS服务器向这些顶级域名服务器发出查询请求，询问math.stackexchange.com的次级域名stackexchange.com的NS记录。

上面结果显示stackexchange.com有四条NS记录，同时返回的还有每一条NS记录对应的IP地址。

然后，DNS服务器向上面这四台NS服务器查询math.stackexchange.com的主机名。

上面结果显示，math.stackexchange.com有4条A记录，即这四个IP地址都可以访问到网站。并且还显示，最先返回结果的NS服务器是ns-463.awsdns-57.com，IP地址为205.251.193.207。

七、NS 记录的查询

dig命令可以单独查看每一级域名的NS记录。

 $ dig ns com $ dig ns stackexchange.com

+short参数可以显示简化的结果。

 $ dig +short ns com $ dig +short ns stackexchange.com

八、DNS的记录类型

域名与IP之间的对应关系，称为"记录"（record）。根据使用场景，"记录"可以分成不同的类型（type），前面已经看到了有A记录和NS记录。

常见的DNS记录类型如下。

（1） A：地址记录（Address），返回域名指向的IP地址。

（2） NS：域名服务器记录（Name Server），返回保存下一级域名信息的服务器地址。该记录只能设置为域名，不能设置为IP地址。

（3）MX：邮件记录（Mail eXchange），返回接收电子邮件的服务器地址。

（4）CNAME：规范名称记录（Canonical Name），返回另一个域名，即当前查询的域名是另一个域名的跳转，详见下文。

（5）PTR：逆向查询记录（Pointer Record），只用于从IP地址查询域名，详见下文。

一般来说，为了服务的安全可靠，至少应该有两条NS记录，而A记录和MX记录也可以有多条，这样就提供了服务的冗余性，防止出现单点失败。

CNAME记录主要用于域名的内部跳转，为服务器配置提供灵活性，用户感知不到。举例来说，facebook.github.io这个域名就是一个CNAME记录。

 $ dig facebook.github.io  ...  ;; ANSWER SECTION: facebook.github.io. 3370    IN  CNAME   github.map.fastly.net. github.map.fastly.net.  600 IN  A   103.245.222.133

上面结果显示，facebook.github.io的CNAME记录指向github.map.fastly.net。也就是说，用户查询facebook.github.io的时候，实际上返回的是github.map.fastly.net的IP地址。这样的好处是，变更服务器IP地址的时候，只要修改github.map.fastly.net这个域名就可以了，用户的facebook.github.io域名不用修改。

由于CNAME记录就是一个替换，所以域名一旦设置CNAME记录以后，就不能再设置其他记录了（比如A记录和MX记录），这是为了防止产生冲突。举例来说，foo.com指向bar.com，而两个域名各有自己的MX记录，如果两者不一致，就会产生问题。由于顶级域名通常要设置MX记录，所以一般不允许用户对顶级域名设置CNAME记录。

PTR记录用于从IP地址反查域名。dig命令的-x参数用于查询PTR记录。

 $ dig -x 192.30.252.153  ...  ;; ANSWER SECTION: 153.252.30.192.in-addr.arpa. 3600 IN    PTR pages.github.com.

上面结果显示，192.30.252.153这台服务器的域名是pages.github.com。

逆向查询的一个应用，是可以防止垃圾邮件，即验证发送邮件的IP地址，是否真的有它所声称的域名。

dig命令可以查看指定的记录类型。

 $ dig a github.com $ dig ns github.com $ dig mx github.com

九、其他DNS工具

除了dig，还有一些其他小工具也可以使用。

（1）host 命令

host命令可以看作dig命令的简化版本，返回当前请求域名的各种记录。

 $ host github.com  github.com has address 192.30.252.121 github.com mail is handled by 5 ALT2.ASPMX.L.GOOGLE.COM. github.com mail is handled by 10 ALT4.ASPMX.L.GOOGLE.COM. github.com mail is handled by 10 ALT3.ASPMX.L.GOOGLE.COM. github.com mail is handled by 5 ALT1.ASPMX.L.GOOGLE.COM. github.com mail is handled by 1 ASPMX.L.GOOGLE.COM.  $ host facebook.github.com  facebook.github.com is an alias for github.map.fastly.net. github.map.fastly.net has address 103.245.222.133

host命令也可以用于逆向查询，即从IP地址查询域名，等同于dig -x <ip>。

 $ host 192.30.252.153  153.252.30.192.in-addr.arpa domain name pointer pages.github.com.

（2）nslookup 命令

nslookup命令用于互动式地查询域名记录。

 $ nslookup  > facebook.github.io Server:     192.168.1.253 Address:    192.168.1.253#53  Non-authoritative answer: facebook.github.io  canonical name = github.map.fastly.net. Name:   github.map.fastly.net Address: 103.245.222.133  >

（3）whois 命令

whois命令用来查看域名的注册情况。

 $ whois github.com

十、参考链接

（完）

文档信息
发帖者 时间：

2016年6月10日星期五

阮一峰的网络日志

阮一峰的网络日志

CSS Modules 用法教程

Posted: 09 Jun 2016 05:42 PM PDT

学过网页开发就会知道，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 Modules 的做法。

下面是一个React组件App.js。

  import React from 'react';  import style from './App.css';    export default () => {    return (      <h1 className={style.title}>        Hello World      </h1>    );  };

上面代码中，我们将样式文件App.css输入到style对象，然后引用style.title代表一个class。

  .title {    color: red;  }

构建工具会将类名style.title编译成一个哈希字符串。

  <h1 class="_3zyde4l1yATCOkgn-DBWEL">    Hello World  </h1>

App.css也会同时被编译。

  ._3zyde4l1yATCOkgn-DBWEL {    color: red;  }

这样一来，这个类名就变成独一无二了，只对App组件有效。

CSS Modules 提供各种插件，支持不同的构建工具。本文使用的是 Webpack 的css-loader插件，因为它对 CSS Modules 的支持最好，而且很容易使用。顺便说一下，如果你想学 Webpack，可以阅读我的教程Webpack-Demos。

下面是这个示例的webpack.config.js。

  module.exports = {    entry: __dirname + '/index.js',    output: {      publicPath: '/',      filename: './bundle.js'    },    module: {      loaders: [        {          test: /\.jsx?$/,          exclude: /node_modules/,          loader: 'babel',          query: {            presets: ['es2015', 'stage-0', 'react']          }        },        {          test: /\.css$/,          loader: "style-loader!css-loader?modules"        },      ]    }  };

上面代码中，关键的一行是style-loader!css-loader?modules，它在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。

现在，运行这个Demo。

  $ npm run demo01

打开 http://localhost:8080 ，可以看到结果，h1标题显示为红色。

二、全局作用域

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

App.css加入一个全局class。

  .title {    color: red;  }    :global(.title) {    color: green;  }

App.js使用普通的class的写法，就会引用全局class。

  import React from 'react';  import styles from './App.css';    export default () => {    return (      <h1 className="title">        Hello World      </h1>    );  };

运行这个示例。

  $ npm run demo02

打开 http://localhost:8080，应该会看到h1标题显示为绿色。

CSS Modules 还提供一种显式的局部作用域语法:local(.className)，等同于.className，所以上面的App.css也可以写成下面这样。

  :local(.title) {    color: red;  }    :global(.title) {    color: green;  }

三、定制哈希类名

css-loader默认的哈希算法是[hash:base64]，这会将.title编译成._3zyde4l1yATCOkgn-DBWEL这样的字符串。

webpack.config.js里面可以定制哈希字符串的格式。

  module: {    loaders: [      // ...      {        test: /\.css$/,        loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"      },    ]  }

运行这个示例。

  $ npm run demo03

你会发现.title被编译成了demo03-components-App---title---GpMto。

四、 Class 的组合

在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。

在App.css中，让.title继承.className 。

  .className {    background-color: blue;  }    .title {    composes: className;    color: red;  }

App.js不用修改。

  import React from 'react';  import style from './App.css';    export default () => {    return (      <h1 className={style.title}>        Hello World      </h1>    );  };

运行这个示例。

  $ npm run demo04

打开http://localhost:8080，会看到红色的h1在蓝色的背景上。

App.css编译成下面的代码。

  ._2DHwuiHWMnKTOYG45T0x34 {    color: red;  }    ._10B-buq6_BEOTOl9urIjf8 {    background-color: blue;  }

相应地， h1的class也会编译成<h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8">。

五、输入其他模块

选择器也可以继承其他CSS文件里面的规则。

another.css

  .className {    background-color: blue;  }

App.css可以继承another.css里面的规则。

  .title {    composes: className from './another.css';    color: red;  }

运行这个示例。

  $ npm run demo05

打开http://localhost:8080，会看到蓝色的背景上有一个红色的h1。

六、输入变量

CSS Modules 支持使用变量，不过需要安装 PostCSS 和 postcss-modules-values。

  $ npm install --save postcss-loader postcss-modules-values

把postcss-loader加入webpack.config.js。

  var values = require('postcss-modules-values');    module.exports = {    entry: __dirname + '/index.js',    output: {      publicPath: '/',      filename: './bundle.js'    },    module: {      loaders: [        {          test: /\.jsx?$/,          exclude: /node_modules/,          loader: 'babel',          query: {            presets: ['es2015', 'stage-0', 'react']          }        },        {          test: /\.css$/,          loader: "style-loader!css-loader?modules!postcss-loader"        },      ]    },    postcss: [      values    ]  };

接着，在colors.css里面定义变量。

  @value blue: #0c77f8;  @value red: #ff0000;  @value green: #aaf200;

App.css可以引用这些变量。

  @value colors: "./colors.css";  @value blue, red, green from colors;    .title {    color: red;    background-color: blue;  }

运行这个示例。

  $ npm run demo06

打开http://localhost:8080，会看到蓝色的背景上有一个红色的h1。

（完）

文档信息
发帖者 时间：
订阅： 博文 (Atom)