atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>SunCafe</title>
  <subtitle>著意寻春不肯香 香在无寻处。</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://suncafe.cc/"/>
  <updated>2017-10-09T15:42:09.000Z</updated>
  <id>http://suncafe.cc/</id>
  
  <author>
    <name>SunCafe</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>离线友好的表单</title>
    <link href="http://suncafe.cc/2017/09/10/%E7%A6%BB%E7%BA%BF%E5%8F%8B%E5%A5%BD%E7%9A%84%E8%A1%A8%E5%8D%95/"/>
    <id>http://suncafe.cc/2017/09/10/离线友好的表单/</id>
    <published>2017-09-09T16:31:43.000Z</published>
    <updated>2017-10-09T15:42:09.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://mxb.at/blog/offline-forms/" target="_blank" rel="external">Offline-Friendly Forms</a></li>
<li>原文作者：<a href="https://twitter.com/intent/follow?screen_name=mxbck" target="_blank" rel="external">mxbck</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>本文永久链接：<a href="https://github.com/xitu/gold-miner/blob/master/TODO/offline-friendly-forms.md" target="_blank" rel="external">https://github.com/xitu/gold-miner/blob/master/TODO/offline-friendly-forms.md</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/yanyixin" target="_blank" rel="external">yanyixin</a>、<a href="https://github.com/Tina92" target="_blank" rel="external">Tina92</a></li>
</ul>
</blockquote>
<p>网络不佳时网页表单的表现通常并不理想。如果你试图在离线状态下提交表单，那就很可能丢失刚刚填好的数据。下面就看看我们是如何修复这个问题的。</p>
<p>太长，勿点：这里是本文的 <a href="https://codepen.io/mxbck/pen/ayYGGO/" target="_blank" rel="external">CodePen Demo</a>。</p>
<p>随着 Service Workers 的推行，现在开发者们甚至可以实现离线版的网页了。静态资源的缓存相对容易，而像表单这样需要服务器交互的情况就很难优化了。即使这样，提供一些有用的离线回退方案还是有可能的。</p>
<p>首先，我们为离线友好的表单创建一个新的类。接着我们保存一些 <code>&lt;form&gt;</code> 元素的属性然后绑定一个触发 submit 事件的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">class OfflineForm &#123;</div><div class="line">  // 配置实例。</div><div class="line">  constructor(form) &#123;</div><div class="line">    this.id = form.id;</div><div class="line">    this.action = form.action;</div><div class="line">    this.data = &#123;&#125;;</div><div class="line">    </div><div class="line">    form.addEventListener(&apos;submit&apos;, e =&gt; this.handleSubmit(e));</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>在 submit 处理函数中，我们使用 <code>navigator.onLine</code> 属性内置一个简单的网络检查器。<a href="http://caniuse.com/online-status/embed/" target="_blank" rel="external">浏览器对它的支持</a>很好，而且实现它也不难。</p>
<p>⚠️ 但它还是有一定<a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine" target="_blank" rel="external">误报</a>的可能，因为这个属性只能检查客户端是否连接到网络，而不能检测实际的网络连通性。另一方面，一个 <code>false</code> 值意味着“离线”是相对确定的。因此，比起其他方式这个判断方法是最好的。</p>
<p>如果一个用户当前处于离线状态，我们就暂停表单的提交，把数据存储在本地。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">handleSubmit(e) &#123;</div><div class="line">  e.preventDefault();</div><div class="line">  // 解析表单输入，存储到对象中</div><div class="line">  this.getFormData();</div><div class="line">  </div><div class="line">  if (!navigator.onLine) &#123;</div><div class="line">    // 用户离线，在设备中存储数据</div><div class="line">    this.storeData();</div><div class="line">  &#125; else &#123;</div><div class="line">    // 用户在线，通过 ajax 发送数据 </div><div class="line">    this.sendData();</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="存储表单数据"><a href="#存储表单数据" class="headerlink" title="存储表单数据"></a>存储表单数据</h2><p>存储数据到用户设备有<a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage" target="_blank" rel="external">几种不同的方式</a>。根据数据的不同，如果你不希望本地副本持久存储在内存中，可以使用 <code>sessionStorage</code>。在我们的例子中，我们可以一起使用  <code>localStorage</code>。</p>
<p>我们可以给表单数据附上时间戳，把它赋值给一个新的对象，并且使用 <code>localStorage.setItem</code> 保存。这个方法接受两个参数：<strong>key</strong>（表单 id）和 <strong>value</strong>（数据的 JSON 串）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">storeData() &#123;</div><div class="line">  // 检测 localStorage 是否可用</div><div class="line">  if (typeof Storage !== &apos;undefined&apos;) &#123;</div><div class="line">    const entry = &#123;</div><div class="line">      time: new Date().getTime(),</div><div class="line">      data: this.data,</div><div class="line">    &#125;;</div><div class="line">    // 把数据存储为 JSON 串</div><div class="line">    localStorage.setItem(this.id, JSON.stringify(entry));</div><div class="line">    return true;</div><div class="line">  &#125;</div><div class="line">  return false;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>提示：你可以在 Chrome 的开发者工具 “Application” 中查看存储数据。如果不出差错，你可以看到内容如下：</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/19/0bfa980df3c23f848fd97cdc53fc4a5d" alt=""></p>
<p>通知用户发生了什么也是个好主意，这样他们会知道他们的数据不会丢失。我们可以扩展 <code>handleSubmit</code> 函数来显示某些反馈信息。</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/19/a05e72751558fcf383e7417031b1821d" alt=""></p>
<p>多么周到的表单！</p>
<h2 id="检查保存的数据"><a href="#检查保存的数据" class="headerlink" title="检查保存的数据"></a>检查保存的数据</h2><p>一旦用户联网，我们想检查一下是否有被存储的提交。我们可以监听 <code>online</code> 事件来捕获网络链接的改变，还有页面刷新时的 <code>load</code> 事件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">constructor(form)&#123;</div><div class="line">  ...</div><div class="line">  window.addEventListener(&apos;online&apos;, () =&gt; this.checkStorage());</div><div class="line">  window.addEventListener(&apos;load&apos;, () =&gt; this.checkStorage());</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">checkStorage() &#123;</div><div class="line">  if (typeof Storage !== &apos;undefined&apos;) &#123;</div><div class="line">    // 检测我们是否在 localStorage 之中存储了数据</div><div class="line">    const item = localStorage.getItem(this.id);</div><div class="line">    const entry = item &amp;&amp; JSON.parse(item);</div><div class="line"></div><div class="line">    if (entry) &#123;</div><div class="line">      // 舍弃超过一天的提交。 （可选）</div><div class="line">      const now = new Date().getTime();</div><div class="line">      const day = 24 * 60 * 60 * 1000;</div><div class="line">      if (now - day &gt; entry.time) &#123;</div><div class="line">        localStorage.removeItem(this.id);</div><div class="line">        return;</div><div class="line">      &#125;</div><div class="line"></div><div class="line">      // 我们已经验证了表单数据，尝试提交它</div><div class="line">      this.data = entry.data;</div><div class="line">      this.sendData();</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>一旦我们成功提交了表单，那最后一步就是移除 <code>localStorage</code> 中的数据，来避免重复提交。假设是一个 ajax 表单，我们可以在服务器响应成功的回调里做这件事。很简单，这里我们可以使用 storage 对象的 <code>removeItem()</code> 方法。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">sendData() &#123;</div><div class="line">  // 向服务器发送 ajax 请求</div><div class="line">  axios.post(this.action, this.data)</div><div class="line">    .then((response) =&gt; &#123;</div><div class="line">      if (response.status === 200) &#123;</div><div class="line">        // 成功时移除存储的数据</div><div class="line">        localStorage.removeItem(this.id);</div><div class="line">      &#125;</div><div class="line">    &#125;)</div><div class="line">    .catch((error) =&gt; &#123;</div><div class="line">      console.warn(error);</div><div class="line">    &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>如果你不想使用 ajax 提交，另一个方案是将存储的数据回填到表单，然后调用 <code>form.submit()</code> 或让用户自己点击提交按钮。</p>
<p>☝️ 注意：简单起见，我在这个案例中省略了一些其他部分，比如表单验证和安全 token 验证等，这些东西在真正的生产环境是必不可少的。这里的另一个问题是处理敏感数据，就是说你不能在本地存储一些密码或者信用卡数据等私密信息。</p>
<p>如果你感兴趣，请查阅 <a href="https://codepen.io/mxbck/pen/ayYGGO" target="_blank" rel="external">CodePen 上的全部示例</a>。</p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>、<a href="http://weibo.com/juejinfanyi" target="_blank" rel="external">官方微博</a>、<a href="https://zhuanlan.zhihu.com/juejinfanyi" target="_blank" rel="external">知乎专栏</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://mxb.at/blog/offline-forms/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Offline-Friendly Forms&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;原
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>在HTTP/2的世界里管理CSS和JS</title>
    <link href="http://suncafe.cc/2017/08/27/%E5%9C%A8HTTP2%E7%9A%84%E4%B8%96%E7%95%8C%E9%87%8C%E7%AE%A1%E7%90%86CSS%E5%92%8CJS/"/>
    <id>http://suncafe.cc/2017/08/27/在HTTP2的世界里管理CSS和JS/</id>
    <published>2017-08-27T14:49:50.000Z</published>
    <updated>2017-10-09T15:37:36.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://www.viget.com/articles/managing-css-js-http-2/" target="_blank" rel="external">Managing CSS &amp; JS in an HTTP/2 World</a></li>
<li>原文作者：<a href="https://www.viget.com/about/team/tdavis" target="_blank" rel="external"><br>Trevor Davis</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>本文永久链接：<a href="https://github.com/xitu/gold-miner/blob/master/TODO/managing-css-js-http-2.md" target="_blank" rel="external">https://github.com/xitu/gold-miner/blob/master/TODO/managing-css-js-http-2.md</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/Usey95" target="_blank" rel="external">Usey95</a>、<a href="https://github.com/alfred-zhong" target="_blank" rel="external">alfred-zhong</a></li>
</ul>
</blockquote>
<p>使用了 HTTP/2，在网站中传输 CSS 和 JS 将变得完全不同，本文是结合我实践的一份指南。</p>
<p>我们已经听说 HTTP/2 很多年了。我们甚至写了<a href="https://www.viget.com/articles/getting-started-with-http-2-part-1" target="_blank" rel="external">一些</a><a href="https://www.viget.com/articles/getting-started-with-http-2-part-2" target="_blank" rel="external">关于它的博客</a>。但我们的真正实践并不多。一直到现在。在一些最近的项目中，我把使用 HTTP/2 作为一个目标，并弄清楚如何更好地应用<a href="https://http2.github.io/faq/#why-is-http2-multiplexed" target="_blank" rel="external">多路复用</a>。本文并不会主要去讲你为什么应该使用 HTTP/2，而是要讨论我是如何管理 CSS 和 JS 的从而解释这一范式转变。</p>
<h2 id="拆分-CSS"><a href="#拆分-CSS" class="headerlink" title="拆分 CSS"></a>拆分 CSS</h2><p>这是我们多年来作为最佳实践的反例。但为了汲取多路复用的好处，最好的方式还是把你的 CSS 拆分成更小的文件，这样在每一页只加载必要的CSS。应该像这个例子这样：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">	<span class="comment">&lt;!--每一页都是用的全局样式， header/footer/etc --&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"stylesheets/global/index.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line">	<span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"stylesheets/modules/text-block/index.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"text-block"</span>&gt;</span></div><div class="line">		...</div><div class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">	<span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"stylesheets/modules/two-column-block/index.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"two-column-block"</span>&gt;</span></div><div class="line">		...</div><div class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">	<span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"stylesheets/modules/image-promos-block/index.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"image-promos-block"</span>&gt;</span></div><div class="line">		...</div><div class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<p>没错，<code>&lt;link&gt;</code> 标签放在了 <code>&lt;body&gt;</code> 内部，但不必惊慌,这完全<a href="https://html.spec.whatwg.org/multipage/semantics.html#allowed-in-the-body" target="_blank" rel="external">合规</a>。因此对于每一个小的标签块，都可以拥有一个独立的只包含相应 CSS 的样式。假如你正在使用模块化风格构建你的页面，这很容易设置。</p>
<h3 id="管理-SCSS-文件"><a href="#管理-SCSS-文件" class="headerlink" title="管理 SCSS 文件"></a>管理 SCSS 文件</h3><p>经过一些实践，这是我整理的 SCSS 文件结构：</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/cb090dd1567a20824dc2ffa3bb1950f2" alt=""></p>
<p><strong>CONFIG 文件夹</strong></p>
<p>我使用这个文件夹设置一堆变量：</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/d1844e9b9edbd94360fe799553c72e71" alt=""></p>
<p>这里的入口文件是 <code>_index.scss</code>，它引入了所有其他 SCSS 文件，所以我可以访问到一些变量和 mixins。它是这样的：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">"variables"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"../functions/*"</span>;</div></pre></td></tr></table></figure>
<p><strong>FUNCTIONS 文件夹</strong></p>
<p>顾名思义，它包含了一些常见的 mixins 和函数，每一个 mixin 或函数都对应一个文件。</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/8b3766817c6ac244b5d961a73c26b9e9" alt=""></p>
<p><strong>GLOBAL 文件夹</strong></p>
<p>这个文件夹包含我每一页都使用的 CSS。特别适合放一些类似网站的 header、footer、reset、字体和其他通用样式之类的东西。</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/fdd61ca28a4854b6599c183a4f747f21" alt=""></p>
<p><code>index.scss</code> 看起来是这样的:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">"../config/index"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_fonts.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_reset.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_base.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_utility.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_skip-link.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_header.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_content.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"_footer.scss"</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">"components/*"</span>;</div></pre></td></tr></table></figure>
<p>最后一行引入了所有 components 的子目录，这是将额外全局样式模块化的捷径。</p>
<p><strong>MODULES 文件夹</strong></p>
<p>这是我们 HTTP/2 体系中最重要的文件夹。当我拆分样式到对应的模块，这个文件夹会包含非常非常多的文件。所以我从拆分每一个模块到子目录开始：</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/d5b0474363bd8ae233712ecba43665a1" alt=""></p>
<p>每个模块中的 <code>index.scss</code> 是这样的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">// 导入所有的全局变量和 mixin</div><div class="line">@import &quot;../../config/index&quot;;</div><div class="line"></div><div class="line">// 导入这个模块文件夹中的所有部分</div><div class="line">@import &quot;_*.scss&quot;;</div></pre></td></tr></table></figure>
<p>这样我可以访问到变量和 mixin，然后我可以把模块的 CSS 拆分为许多部分，它们组合成一个单独的 CSS 模块文件。</p>
<p><strong>PAGES 文件夹</strong></p>
<p>实质上这个文件夹和 modules 文件夹一样，但我为了页面特定的内容使用它”。这种更模块化的方式在我们最近做的东西里绝对罕见，但是它很好地把页面的特殊样式拆分出来了。</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/3ad7dcf0b199c3cd6404e68453b5f88b" alt=""></p>
<h3 id="适配-Blendid"><a href="#适配-Blendid" class="headerlink" title="适配 Blendid"></a>适配 Blendid</h3><p>最近所有的项目我们都是用 <a href="https://github.com/vigetlabs/blendid" target="_blank" rel="external">Blendid</a> 来构建的 。为了实现上文描述的 SCSS 配置，我需要添加 <a href="https://www.npmjs.com/package/node-sass-glob-importer" target="_blank" rel="external">node-sass-glob-importer</a>。一旦装好它，我只需把它添加到 Blendid 的 <code>task-config.js</code> 中。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var globImporter = require(&apos;node-sass-glob-importer&apos;);</div><div class="line"></div><div class="line">module.exports = &#123;</div><div class="line">	stylesheets: &#123;</div><div class="line">		...</div><div class="line">		sass: &#123;</div><div class="line">			importer: globImporter()</div><div class="line">		&#125;,</div><div class="line">  		...</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>duang，这样就完成了管理 SCSS 的 HTTP/2 配置。 </p>
<h3 id="彩蛋：Craft-宏"><a href="#彩蛋：Craft-宏" class="headerlink" title="彩蛋：Craft 宏"></a>彩蛋：Craft 宏</h3><p>很长一段时间以来，我们在 Viget 都主张使用 Craft，我就写了一个宏来减少这种引入样式的方式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&#123;%- macro css(stylesheet) -%&#125;</div><div class="line">	&lt;link rel=&quot;stylesheet&quot; href=&quot;/stylesheets&#123;&#123; stylesheet &#125;&#125;/index.css&quot; media=&quot;not print&quot;&gt;</div><div class="line">&#123;%- endmacro -%&#125;</div></pre></td></tr></table></figure>
<p>当我想要引入一个模块的 CSS 文件，我只需这样：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123;&#123; macros.css(&apos;/modules/image-block&apos;) &#125;&#125;</div></pre></td></tr></table></figure>
<p>如果我需要在整个网站上放置样式表引用，这就更简单了。</p>
<h2 id="管理-JS"><a href="#管理-JS" class="headerlink" title="管理 JS"></a>管理 JS</h2><p>就像 CSS 一样，我想要把 JS 拆分为模块，这样每一页只加载必要的 JS。一样的，使用 <a href="https://github.com/vigetlabs/blendid" target="_blank" rel="external">Blendid 配置</a>，为了一切正常运转我只需要做一点点微调。</p>
<p>我使用的是 <code>import()</code>，而非 Webpack 的<code>require()</code>，。因此现在的 <code>modules/index.js</code> 文件需要看起来是这样的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">const moduleElements = document.querySelectorAll(&apos;[data-module]&apos;);</div><div class="line"></div><div class="line">for (var i = 0; i &lt; moduleElements.length; i++) &#123;</div><div class="line">	const el = moduleElements[i];</div><div class="line">	const name = el.getAttribute(&apos;data-module&apos;);</div><div class="line"></div><div class="line">	import(`./$&#123;name&#125;`).then(Module =&gt; &#123;</div><div class="line">		new Module.default(el);</div><div class="line">	&#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>正如 Webpack 文档中所说：”这个特性内部依赖 Promise。如果你在旧版本浏览器使用 <code>import()</code>，记得使用一个 polyfill 来兼容 Promise，比如 es6-promise 或者 promise-polyfill“。</p>
<p>因此我把 <a href="https://www.npmjs.com/package/es6-promise" target="_blank" rel="external">es6-promise polyfill</a> 加入到我的入口文件 <code>app.js</code> 中，使其自动兼容。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">require(&apos;es6-promise/auto&apos;);</div></pre></td></tr></table></figure>
<p>是的，然后你就可以在 Blendid 开箱即用的模式触发模块生成对应特定的 JS。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;div data-module=&quot;carousel&quot;&gt;</div></pre></td></tr></table></figure>
<h2 id="这很完美吗？"><a href="#这很完美吗？" class="headerlink" title="这很完美吗？"></a>这很完美吗？</h2><p>还不,但至少可以引领你开始以合理的方式管理 HTTP/2 资源。随着我们对如何拆分代码来更好地使用 HTTP/2 的思考，我真切地希望这个配置将会越来越完善。</p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>、<a href="http://weibo.com/juejinfanyi" target="_blank" rel="external">官方微博</a>、<a href="https://zhuanlan.zhihu.com/juejinfanyi" target="_blank" rel="external">知乎专栏</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://www.viget.com/articles/managing-css-js-http-2/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Managing CSS &amp;amp
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>使用CSS栅格和Flexbox打造Trello布局</title>
    <link href="http://suncafe.cc/2017/08/19/%E4%BD%BF%E7%94%A8CSS%E6%A0%85%E6%A0%BC%E5%92%8CFlexbox%E6%89%93%E9%80%A0Trello%E5%B8%83%E5%B1%80/"/>
    <id>http://suncafe.cc/2017/08/19/使用CSS栅格和Flexbox打造Trello布局/</id>
    <published>2017-08-19T11:38:09.000Z</published>
    <updated>2017-10-09T15:35:07.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://www.sitepoint.com/building-trello-layout-css-grid-flexbox/" target="_blank" rel="external">Building a Trello Layout with CSS Grid and Flexbox</a></li>
<li>原文作者：<a href="https://www.sitepoint.com/author/gmainardi/" target="_blank" rel="external">Giulio Mainardi</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>本文永久链接：<a href="https://github.com/xitu/gold-miner/blob/master/TODO/building-trello-layout-css-grid-flexbox.md" target="_blank" rel="external">https://github.com/xitu/gold-miner/blob/master/TODO/building-trello-layout-css-grid-flexbox.md</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/Aladdin-ADD" target="_blank" rel="external">Aladdin-ADD</a>、<a href="https://github.com/ahonn" target="_blank" rel="external">ahonn</a></li>
</ul>
</blockquote>
<p>通过本教程，我将带你完成 <a href="https://trello.com/" target="_blank" rel="external">Trello</a> 看板 (<a href="https://trello.com/b/nC8QJJoZ/trello-development-roadmap" target="_blank" rel="external">查看示例</a>)的基本布局。这是一个响应式的、纯 CSS 的解决方案，并且我们将只开发布局的结构特性。</p>
<p><a href="https://codepen.io/SitePoint/pen/brmXRX?editors=0100" target="_blank" rel="external">这是一个 CodePen demo</a>，可预览一下最终结果。</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/e89c41435c114108c104881882a60a62" alt=""></p>
<p>除了<a href="https://www.sitepoint.com/introduction-css-grid-layout-module/" target="_blank" rel="external">栅格布局</a>和 <a href="https://www.sitepoint.com/flexbox-css-flexible-box-layout/" target="_blank" rel="external">Flexbox</a>，这个方案还采用了 <a href="https://www.sitepoint.com/css3-calc-function/" target="_blank" rel="external">calc</a> 和<a href="https://www.sitepoint.com/css-viewport-units-quick-start/" target="_blank" rel="external">视图单位</a>。我们也将利用 <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_" target="_blank" rel="external">Sass 变量</a>，让代码更可读和高效。</p>
<p>不提供向下兼容，所以请确保在支持的浏览器上运行。一切就绪，就让我们开始一步一步开发看板组件吧。</p>
<h2 id="屏幕布局"><a href="#屏幕布局" class="headerlink" title="屏幕布局"></a>屏幕布局</h2><p>一个 Trello 看板由一个 app 栏、一个 board 栏和一个包含卡片列表的部分组成。我使用以下标签骨架搭建出这一结构：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ui"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"navbar app"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">nav</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"navbar board"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">nav</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"lists"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"list"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">header</span>&gt;</span>...<span class="tag">&lt;/<span class="name">header</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>...<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">        ...</div><div class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>...<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">footer</span>&gt;</span>...<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>这个布局将通过 CSS 栅格实现。确切地说是 3×1 栅格（就是指一列三行）。第一行用于 app 栏，第二行用于 board 栏，第三行用于 <code>.lists</code> 元素。</p>
<p>前两行各自有一个固定的高度，而第三行将撑起可变窗口高度的其余部分：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.ui</span> &#123;</div><div class="line">  <span class="attribute">height</span>: <span class="number">100vh</span>;</div><div class="line">  <span class="attribute">display</span>: grid;</div><div class="line">  <span class="attribute">grid-template-rows</span>: $appbar-height $navbar-height <span class="number">1</span>fr;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>视图单位可以确保 <code>.ui</code> 容器总是和浏览器的窗口高度一致。</p>
<p>一个栅格化的上下文被分配给容器，并且指定了上文说的行和列。确切地说，是只指定了行，因为声明单独的列是没有必要的。一对 Sass 变量指定了两个栏目的高度，使用 <code>fr</code> 单位指定 <code>.lists</code> 元素高度使其撑起可变窗口高度的其余部分，这样每行的大小就设定完成了。</p>
<h2 id="卡片列表部分"><a href="#卡片列表部分" class="headerlink" title="卡片列表部分"></a>卡片列表部分</h2><p>如上所述，屏幕栅格的第三行托管着卡片列表的容器。这是标签的轮廓：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"lists"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"list"</span>&gt;</span></div><div class="line">    ...</div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  ...</div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"list"</span>&gt;</span></div><div class="line">    ...</div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>我用一个满屏宽的 Flexbox 单行行容器来格式化列表：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">.lists &#123;</div><div class="line">  display: flex;</div><div class="line">  overflow-x: auto;</div><div class="line">  &gt; * &#123;</div><div class="line">    flex: 0 0 auto; // &apos;rigid&apos; lists</div><div class="line">    margin-left: $gap;</div><div class="line">  &#125;</div><div class="line">  &amp;::after &#123;</div><div class="line">    content: &apos;&apos;;</div><div class="line">    flex: 0 0 $gap;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>给 <code>overflow-x</code> 指定 auto 值，当列表不适合视口提供的宽度时，浏览器会在屏幕底部显示一个水平滚动条。</p>
<p><code>flex</code> 简写属性用于 flex item 使列表更严格。<code>flex-basis</code> （简写的方式使用）的 auto 值指示布局引擎从 <code>.list</code> 元素的宽度属性取值，<code>flex-grow</code> 和 <code>flex-shrink</code> 的 0 值可以防止宽度的改变。</p>
<p>接下来我将在列表之间添加一个水平分隔。如果给列表设置右间距，当水平溢出时看板上最后一个列表之后的间距不会被渲染。为了解决这个问题，列表被一个左间距分隔并且最后一个列表和窗口右边缘的间距通过给每个 <code>.lists</code> 元素添加一个伪元素 <code>::after</code> 来实现。默认值 <code>flex-shrink: 1</code> 一定要被重写，否则这个伪元素会”吸收“所有的负空间，然后消失。</p>
<p>注意在 Firefox &lt; 54 的版本上要给 <code>.lists</code> 指定 <code>width: 100%</code> 以确保正确的布局渲染。</p>
<h2 id="卡片列表"><a href="#卡片列表" class="headerlink" title="卡片列表"></a>卡片列表</h2><p>每个卡片列表由一个 header 栏、一个卡片序列和一个 footer 栏目组成。以下 HTML 代码段实现了这一结构：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"list"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">header</span>&gt;</span>List header<span class="tag">&lt;/<span class="name">header</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>...<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    ...</div><div class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>...<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">footer</span>&gt;</span>Add a card...<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>这里的关键任务是如何管理列表的高度。header 和 footer 有固定的高度(未必相等)。然后有一些不定数量的卡片，每个卡片都有不定量的内容。因此随着卡片的添加和移除，这个列表也会增大和缩小。</p>
<p>但是高度不能无限增大，它需要有一个取决于 <code>.lists</code> 元素高度的上限。一旦突破上线，我想有一个垂直滚动条出现来允许访问溢出列表的卡片。</p>
<p>这听起来是 <code>max-height</code> 和 <code>overflow</code> 属性能做的。但如果根容器 <code>.list</code> 提供了这些属性，一旦列表达到了它的最大高度，所有的 <code>.list</code> 元素包括 header 和 footer 在内都会出现滚动条。下图左右两边分别显示错误的和正确的侧边条：</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/9/15/f9224e1661712636d2127622032d94f8" alt=""></p>
<p>因此，让我们把 <code>max-height</code> 约束给内部的 <code>&lt;ul&gt;</code>。应该提供什么值呢？header 和 footer 的高度必须从列表父容器(<code>.lists</code>)的高度之中扣除：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul &#123;</div><div class="line">  max-height: calc(100% - #&#123;$list-header-height&#125; - #&#123;$list-footer-height&#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>但还有一个问题。百分比数值并不参照 <code>.lists</code> 而是参照 <code>&lt;ul&gt;</code> 元素的父元素  <code>.list</code>，并且这个元素没有定义高度，因此这个百分比不能确定。这个问题可以通过设置 <code>.list</code> 和 <code>.lists</code> 同样高度来解决：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.list &#123;</div><div class="line">  height: 100%;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这样，既然 <code>.list</code> 和 <code>.lists</code> 总是一样高，它的 <code>background-color</code> 属性不能用于列表背景色，但可以使用它的子元素（header, footer 和卡片）来实现这一目的。</p>
<p>最后一个 list 高度的调整很有必要，可用来计算列表底部和窗口底部的一点空间（<code>$gap</code>）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.list &#123;</div><div class="line">  height: calc(100% - #&#123;$gap&#125; - #&#123;$scrollbar-thickness&#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>还有一个 <code>$scrollbar-thickness</code> 需要被减去，防止列表触及 <code>.list</code> 元素的水平滚动条。 事实上这个滚动条”增长“在 <code>.lists</code> 盒子内部。也就是说，100% 这个值是指包括滚动条在内的 <code>.lists</code> 的高度。</p>
<p>而在火狐中，这个滚动条被”附加“给 <code>.lists</code> 高度的外部，就是说 <code>.lists</code> 高度的 100% 并不包含滚动条。所以这个减法就没什么必要了。结果是当滚动条可见时，在火狐中已经触及最大高度的底部边框和滚动条的顶部之间的可视空间会稍大一些。</p>
<p>这是这个组件相应的 CSS 规则：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line">.list &#123;</div><div class="line">  width: $list-width;</div><div class="line">  height: calc(100% - #&#123;$gap&#125; - #&#123;$scrollbar-thickness&#125;);</div><div class="line"></div><div class="line">  &gt; * &#123;</div><div class="line">    background-color: $list-bg-color;</div><div class="line">    color: #333;</div><div class="line">    padding: 0 $gap;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  header &#123;</div><div class="line">    line-height: $list-header-height;</div><div class="line">    font-size: 16px;</div><div class="line">    font-weight: bold;</div><div class="line">    border-top-left-radius: $list-border-radius;</div><div class="line">    border-top-right-radius: $list-border-radius;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  footer &#123;</div><div class="line">    line-height: $list-footer-height;</div><div class="line">    border-bottom-left-radius: $list-border-radius;</div><div class="line">    border-bottom-right-radius: $list-border-radius;</div><div class="line">    color: #888;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  ul &#123;</div><div class="line">    list-style: none;</div><div class="line">    margin: 0;</div><div class="line">    max-height: calc(100% - #&#123;$list-header-height&#125; - #&#123;$list-footer-height&#125;);</div><div class="line">    overflow-y: auto;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>如上所述，列表背景色通过给每一个 <code>.list</code> 元素的子元素的 <code>background-color</code> 属性指定 <code>$list-bg-color</code> 值而被渲染。<code>overflow-y</code> 使得卡片滚动条只有按需显示。最后，给 header 和 footer 添加一些简单的样式。</p>
<h2 id="完成收尾"><a href="#完成收尾" class="headerlink" title="完成收尾"></a>完成收尾</h2><p>单个卡片包含的一个列表元素 HTML：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/li&gt;</div></pre></td></tr></table></figure>
<p>卡片也有可能包含一个封面图片：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"..."</span> <span class="attr">alt</span>=<span class="string">"..."</span>&gt;</span></div><div class="line">  Lorem ipsum dolor sit amet</div><div class="line"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></div></pre></td></tr></table></figure>
<p>这是相应的样式：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">li &#123;</div><div class="line">  background-color: #fff;</div><div class="line">  padding: $gap;</div><div class="line"></div><div class="line">  &amp;:not(:last-child) &#123;</div><div class="line">    margin-bottom: $gap;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  border-radius: $card-border-radius;</div><div class="line">  box-shadow: 0 1px 1px rgba(0,0,0, 0.1);</div><div class="line"></div><div class="line">  img &#123;</div><div class="line">    display: block;</div><div class="line">    width: calc(100% + 2 * #&#123;$gap&#125;);</div><div class="line">    margin: -$gap 0 $gap (-$gap);</div><div class="line">    border-top-left-radius: $card-border-radius;</div><div class="line">    border-top-right-radius: $card-border-radius;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>设置完一个背景、填充、和底部间距就差背景图片的布局了。这个图片宽度一定是跨越整个卡片的，从左填充的边缘到右填充的边缘：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">width: calc(100% + 2 * #&#123;$gap&#125;);</div></pre></td></tr></table></figure>
<p>然后，指定负边距以使图片水平和垂直对齐：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">margin: -$gap 0 $gap (-$gap);</div></pre></td></tr></table></figure>
<p>第三个正边距的值用于指定封面图片和文字之间的空间。</p>
<p>最后我给占据屏幕布局第一行的两条添加了一个 flex 格式化上下文，但它们只是草图。通过<a href="https://codepen.io/SitePoint/pen/brmXRX?editors=0100" target="_blank" rel="external">扩展 demo</a> 自由构建你自己的实现吧。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>这只是实现这种设计的一种可行方法，如果能看见其他方式那一定很有趣。此外，如果能完成整个布局那就更好了，比如完成最后的两个栏目。</p>
<p>另一个潜在的改进是能够为卡片列表实现自定义的滚动条。</p>
<p>所以，<a href="https://codepen.io/SitePoint/pen/brmXRX?editors=0100" target="_blank" rel="external">fork 这个 demo</a> 尽情发挥吧，记得在下面的讨论区留下你的链接哦。</p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>、<a href="http://weibo.com/juejinfanyi" target="_blank" rel="external">官方微博</a>、<a href="https://zhuanlan.zhihu.com/juejinfanyi" target="_blank" rel="external">知乎专栏</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://www.sitepoint.com/building-trello-layout-css-grid-flexbox/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Build
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>高性能React：3个新工具加速你的应用</title>
    <link href="http://suncafe.cc/2017/08/14/%E9%AB%98%E6%80%A7%E8%83%BDReact%EF%BC%9A3%E4%B8%AA%E6%96%B0%E5%B7%A5%E5%85%B7%E5%8A%A0%E9%80%9F%E4%BD%A0%E7%9A%84%E5%BA%94%E7%94%A8/"/>
    <id>http://suncafe.cc/2017/08/14/高性能React：3个新工具加速你的应用/</id>
    <published>2017-08-14T15:01:30.000Z</published>
    <updated>2017-10-09T15:32:51.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://medium.freecodecamp.org/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app-7ad39d3c1b82" target="_blank" rel="external">High Performance React: 3 New Tools to Speed Up Your Apps</a></li>
<li>原文作者：<a href="https://medium.freecodecamp.org/@edelstein" target="_blank" rel="external">Ben Edelstein</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>本文永久链接：<a href="https://github.com/xitu/gold-miner/blob/master/TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md" target="_blank" rel="external">https://github.com/xitu/gold-miner/blob/master/TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/yzgyyang" target="_blank" rel="external">yzgyyang</a>、<a href="https://github.com/reid3290" target="_blank" rel="external">reid3290</a></li>
</ul>
</blockquote>
<p><img src="https://cdn-images-1.medium.com/max/2000/1*mJFYp7LKVzZM3PPjFb0QXQ.png" alt=""></p>
<p>通常来说 React 是相当快的，但开发者也很容易犯一些错误导致出现性能问题。组件挂载过慢、组件树过深和一些非必要的渲染周期可以迅速地联手拉低你的应用速度。</p>
<p>幸运的是有大量的工具，甚至有些是 React 内置的，可以帮助我们检测性能问题。本文将着重介绍一些加快 React 应用的工具和技术。每一部分都配有一个可交互而且（希望是）有趣的 demo！</p>
<h3 id="工具-1-性能时间轴"><a href="#工具-1-性能时间轴" class="headerlink" title="工具 #1: 性能时间轴"></a>工具 #1: 性能时间轴</h3><p>React 15.4.0 引入了一个新的性能时间轴特性，可以精确展示组件何时挂载、更新和卸载。也可以让你可视化地观察组件生命周期相互之间的关系。</p>
<p><strong>注意：</strong> 目前，这一特性仅支持 Chrome、Edge 和 IE，因为它调用的 User Timing API 还没有在所有浏览器中实现。</p>
<h4 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h4><ol>
<li>打开你的应用并追加一个参数：<code>react_perf</code>。例如， <a href="http://localhost:3000?react_perf" target="_blank" rel="external"><code>http://localhost:3000?react_perf</code></a></li>
<li>打开 Chrome 开发者工具 <strong>Performance</strong> 栏并点击 <strong>Record</strong>。</li>
<li>执行你想要分析的操作。</li>
<li>停止记录。</li>
<li>观察 <strong>User Timing</strong> 选项下的可视化视图。</li>
</ol>
<p><img src="https://cdn-images-1.medium.com/max/1000/1*cOO5vUnbkdDUcqMW8ebJqA.png" alt=""></p>
<h4 id="理解输出结果"><a href="#理解输出结果" class="headerlink" title="理解输出结果"></a>理解输出结果</h4><p>每一个色条显示的是一个组件做“处理”的时间。由于 JavaScript 是单线程的，每当一个组件正在挂载或渲染，它都会霸占主线程，并阻塞其他代码运行。</p>
<p>像 <code>[update]</code> 这样中括号内的文字描述的是生命周期的哪一个阶段正在发生。把时间轴按照步骤分解，你可以看到依据方法的细粒度的计时，比如  <code>[componentDidMount]</code> <code>[componentWillReceiveProps]</code> <code>[ctor]</code> (constructor) 和 <code>[render]</code>。</p>
<p>堆叠的色条代表组件树，虽然在 React 拥有过深的组件树也比较典型，但如果你想优化一个频繁挂载的组件，减少嵌套组件的数量也是有帮助的，因为每一层都会增加少量的性能和内存消耗。</p>
<p>这里需要注意的是时间轴中的计时时长是针对 React 的开发环境构建的，会比生产环境慢很多。实际上性能时间轴本身也会拖慢你的应用。虽然这些时长不能代表真正的性能指标，但不同组件间的<strong>相对</strong>时间是精确的。而且一个组件是否完全被更新不取决于是否是生产环境的构建。</p>
<h4 id="Demo-1"><a href="#Demo-1" class="headerlink" title="Demo #1"></a>Demo #1</h4><p>出于乐趣，我故意写了一个具有<strong>严重</strong>性能问题的 TodoMVC 应用。你可以<a href="https://perf-demo.firebaseapp.com/?react_perf" target="_blank" rel="external">在这里尝试</a>。</p>
<p>打开 Chrome 开发者工具，切换到 “Performance” 栏，点击 Record 开始记录时间轴。然后在应用中添加一些 TODO，停止记录，检查时间轴。看看你能不能找出造成性能问题的组件 :)</p>
<h3 id="Tool-2-why-did-you-update"><a href="#Tool-2-why-did-you-update" class="headerlink" title="Tool #2: why-did-you-update"></a>Tool #2: why-did-you-update</h3><p>在 React 中最影响性能的问题之一就是非必要的渲染周期。默认情况下，一旦父组件渲染，React 组件就会跟着重新渲染，即使它们的 props 没有变化也是如此。</p>
<p>举个例子，如果我有一个简单的组件长这样：</p>
<pre><code>class DumbComponent extends Component {
  render() {
    return &lt;div&gt; {this.props.value} &lt;/div&gt;;
  }
}
</code></pre><p>它的父组件是这样：</p>
<pre><code>class Parent extends Component {
  render() {
    return &lt;div&gt;
      &lt;DumbComponent value={3} /&gt;
    &lt;/div&gt;;
  }
}
</code></pre><p>每当父组件渲染，<code>DumbComponent</code> 就会重新渲染，尽管它的 props 没有改变。</p>
<p>一般来讲，如果 <code>render</code> 运行，并且虚拟 DOM 没有改变，而且既然 <code>render</code> 应该是个纯净的没有任何副作用的方法，那么这就是一个不必要的渲染周期。在一个大型应用中检测这种事情是非常困难的，但幸运的是有一个工具可以帮得上忙。</p>
<h4 id="使用-why-did-you-update"><a href="#使用-why-did-you-update" class="headerlink" title="使用 why-did-you-update"></a>使用 why-did-you-update</h4><p><img src="https://cdn-images-1.medium.com/max/1000/1*Lb4nr_WLwnLt63jUoszrnQ.png" alt=""></p>
<p><code>why-did-you-update</code> 是一个 React 钩子工具，用来检测潜在的非必要组件渲染。它会检测到被调用但 props 没有改变的组件 <code>render</code>。</p>
<h4 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h4><ol>
<li>使用 npm 安装： <code>npm i --save-dev why-did-you-update</code></li>
<li><p>在你应用中的任何地方添加下面这个片段：</p>
<p> import React from ‘react’</p>
<p> if (process.env.NODE_ENV !== ‘production’) {<br>   const {whyDidYouUpdate} = require(‘why-did-you-update’)<br>   whyDidYouUpdate(React)<br> }</p>
</li>
</ol>
<p><strong>注意：</strong> 这个工具在本地开发环境使用起来非常棒，但是要确保生产环境要禁用掉，因为它会拖慢你的应用。</p>
<h4 id="理解输出结果-1"><a href="#理解输出结果-1" class="headerlink" title="理解输出结果"></a>理解输出结果</h4><p><code>why-did-you-update</code> 在运行时监听你的应用，并用日志输出可能存在非必要更新的组件。它让你看到一个渲染周期前后的 props 对比，来决定是否可能存在非必要的更新。</p>
<h4 id="Demo-2"><a href="#Demo-2" class="headerlink" title="Demo #2"></a>Demo #2</h4><p>为了演示 <code>why-did-you-update</code>，我在 TodoMVC 中安装了这个库并放在 Code Sandbox 网站上，这是一个在线的 React 练习场。 打开浏览器控制台，并添加一些 TODO 来查看输出。</p>
<p><a href="https://codesandbox.io/s/xGJP4QExn" target="_blank" rel="external">这里查看 demo</a>。</p>
<p>注意这个应用中很少的组件存在非必要渲染。尝试执行上述的技术来避免非必要渲染，如果操作正确，<code>why-did-you-update</code> 不会在控制台输出任何内容。</p>
<h3 id="Tool-3-React-Developer-Tools"><a href="#Tool-3-React-Developer-Tools" class="headerlink" title="Tool #3: React Developer Tools"></a>Tool #3: React Developer Tools</h3><p><img src="https://cdn-images-1.medium.com/max/1000/1*1Ih6h8djFyH13tfFK3D1sw.png" alt=""></p>
<p>React Developer Tools 这个 Chrome 扩展有一个内置特性用来可视化组件更新。这有助于防止非必要的渲染周期。使用它，首先要确保<a href="https://codesandbox.io/s/xGJP4QExn" target="_blank" rel="external">在这里安装了这个扩展</a>。</p>
<p>然后点击 Chrome 开发者工具中的 “React” 选项卡打开扩展并勾选“Highlight Updates”。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*GP4vXvW3WO0vTbggDfus4Q.png" alt=""></p>
<p>然后简单操作你的应用。和不同的组件交互并观察 DevTools 施展它的魔法。</p>
<h4 id="理解输出结果-2"><a href="#理解输出结果-2" class="headerlink" title="理解输出结果"></a>理解输出结果</h4><p>React Developer Tools 在给定的时间点高亮正在重新渲染的组件。根据更新的频率，使用不同的颜色。蓝色显示罕见更新，经过绿色、黄色的过渡，一直到红色用来显示更新频繁的组件。</p>
<p>看到黄色或红色并不<strong>必要</strong>觉得一定是坏事。它可能发生在调整一个滑块或频繁触发更新的其他 UI 元素，这属于意料之中。但如果当你点击一个简单的按钮并且看到了红色这可能就意味着事情不对了。这个工具的目的就是识破正在发生<strong>非必要</strong>更新的组件。作为应用的开发者，你应该对给定时间内哪个组件应该被更新有一个大体的概念。</p>
<h4 id="Demo-3"><a href="#Demo-3" class="headerlink" title="Demo #3"></a>Demo #3</h4><p>为了演示高亮，我故意让 TodoMVC 应用更新一些非必要的组件。</p>
<p><a href="https://highlight-demo.firebaseapp.com/" target="_blank" rel="external">这里查看 demo</a>。</p>
<p>打开上面的链接，然后打开 React Developer Tools 并启用更新高亮。当你在上面的文字输入框中输入内容时，你将看到所有的 TODO 非必要地高亮。你输入得越快，你会看到颜色变化指示更新越来越频繁。</p>
<h3 id="修复非必要渲染"><a href="#修复非必要渲染" class="headerlink" title="修复非必要渲染"></a>修复非必要渲染</h3><p>一旦你已经确定应用中非必要重新渲染的组件，有几种简单的方法来修复。</p>
<h4 id="使用-PureComponent"><a href="#使用-PureComponent" class="headerlink" title="使用 PureComponent"></a>使用 PureComponent</h4><p>在上面的例子中，<code>DumbComponent</code> 是只接收属性的纯函数。这样，组件就只有当它的 props 变化的时候才重新渲染。React 有一个特殊的内置组件类型叫做 <code>PureComponent</code>，就是适用这种情况的用例。</p>
<p>与继承自 React.Component 相反，像这样使用 React.PureComponent：</p>
<pre><code>class DumbComponent extends PureComponent {
  render() {
    return &lt;div&gt; {this.props.value} &lt;/div&gt;;
  }
}
</code></pre><p>那么只有当这个组件的 props 实际发生变化时它才会被重新渲染了。就是这样！</p>
<p>注意 <code>PureComponent</code> 对 props 做了一个浅对比，因此如果你使用复杂的数据结构，它可能会错失一些属性变化而不会更新你的组件。</p>
<h4 id="调用-shouldComponentUpdate"><a href="#调用-shouldComponentUpdate" class="headerlink" title="调用 shouldComponentUpdate"></a>调用 shouldComponentUpdate</h4><p><code>shouldComponentUpdate</code> 是一个在 <code>render</code> 之前 <code>props</code> 或 <code>state</code> 发生改变时被调用的组件方法。如果 <code>shouldComponentUpdate</code> 返回 true，<code>render</code> 将会被调用，如果返回 false 什么也不会发生。</p>
<p>通过执行这个方法，你可以命令 React 在 props 没有发生改变的时候避免给定组件的重新渲染。</p>
<p>例如，我们可以在上文中的 DumbComponent 中这样调用 <code>shouldComponentUpdate</code>。</p>
<pre><code>class DumbComponent extends Component {
  shouldComponentUpdate(nextProps) {
    if (this.props.value !== nextProps.value) {
      return true;
    } else {
      return false;
    }
  }

render() {
    return &lt;div&gt;foo&lt;/div&gt;;
  }
}
</code></pre><h3 id="在生产环境中调试性能问题"><a href="#在生产环境中调试性能问题" class="headerlink" title="在生产环境中调试性能问题"></a>在生产环境中调试性能问题</h3><p>React Developer Tools 只能在你自己的机器上运行的应用中使用。如果您有兴趣了解用户在生产中看到的性能问题，试试 <a href="https://logrocket.com" target="_blank" rel="external">LogRocket</a>。</p>
<p><img src="https://cdn-images-1.medium.com/max/1000/1*s_rMyo6NbrAsP-XtvBaXFg.png" alt=""></p>
<p><a href="https://logrocket.com" target="_blank" rel="external">LogRocket</a> 就像是 web 应用的 DVR，会记录发生在你的站点上的<strong>所有的一切</strong>。你可以重现带有 bug 或性能问题的会话来快速了解问题的根源，而不用猜测问题发生的原因。</p>
<p>LogRocket 工具为你的应用记录性能数据、Redux actions/state、日志、带有请求头和请求体的网络请求和响应以及浏览器的元数据。它也能记录页面上的 HTML 和 CSS，甚至可以为最复杂的单页面应用重新创建完美像素的视频。</p>
<p><a href="https://logrocket.com/" target="_blank" rel="external"><strong>LogRocket | 为 JavaScript 应用而生的日志记录和会话回放工具</strong><br>LogRocket 帮助你了解用影响你用户的问题，这样你就可以回过头来构建伟大的软件了。<br>logrocket.com</a></p>
<hr>
<p>感谢阅读，希望这些工具和技术能在你的下一个 React 项目中帮到你！</p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://medium.freecodecamp.org/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-ap
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>即将到来的正则表达式新特性</title>
    <link href="http://suncafe.cc/2017/07/29/%E5%8D%B3%E5%B0%86%E5%88%B0%E6%9D%A5%E7%9A%84%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%96%B0%E7%89%B9%E6%80%A7/"/>
    <id>http://suncafe.cc/2017/07/29/即将到来的正则表达式新特性/</id>
    <published>2017-07-29T13:21:40.000Z</published>
    <updated>2017-10-09T15:30:02.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://developers.google.com/web/updates/2017/07/upcoming-regexp-features" target="_blank" rel="external">Upcoming Regular Expression Features</a></li>
<li>原文作者：<a href="https://developers.google.com/web/resources/contributors#jgruber" target="_blank" rel="external">Jakob Gruber</a>、<a href="https://developers.google.com/web/resources/contributors#yangguo" target="_blank" rel="external">Yang Guo</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>本文永久链接：<a href="https://github.com/xitu/gold-miner/blob/master/TODO/upcoming-regexp-features.md" target="_blank" rel="external">https://github.com/xitu/gold-miner/blob/master/TODO/upcoming-regexp-features.md</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/atuooo" target="_blank" rel="external">atuooo</a>、<a href="https://github.com/Tina92" target="_blank" rel="external">Tina92</a></li>
</ul>
</blockquote>
<p>ES2015 给 JavaScript 语言引入了许多新特性，其中包括正则表达式语法的一些重大改进，新增了 Unicode 编码 （<code>/u</code>） 和粘滞位 （<code>/y</code>）两个修饰符。而在那之后，发展也并未停止。经过与 TC39（ECMAScript 标准委员会）的其他成员的紧密合作，V8 团队提议并共同设计了让正则表达式更强大的几个新特性。</p>
<p>这些新特性目前已经计划包含在 JavaScript 标准中。虽然提案还没有完全通过，但是它们已经进入 <a href="https://tc39.github.io/process-document/" target="_blank" rel="external">TC39 流程的候选阶段</a>了。我们已经以试验功能（见下文）在浏览器实现了这些特性，以便在最终定稿之前提供及时的设计和实现反馈给各自的提案作者。</p>
<p>本文给您预览一下这个令人兴奋的未来。如果您愿意跟着体验这些即将到来的示例，可以在 <code>chrome://flags/#enable-javascript-harmony</code> 页面中开启实验性 JavaScript 功能。</p>
<h2 id="命名捕获"><a href="#命名捕获" class="headerlink" title="命名捕获"></a>命名捕获</h2><p>正则表达式可以包含所谓的捕获（或捕获组），它可以捕获一部分匹配的文本。到目前为止，开发者只能通过索引来引用这些捕获，这取决于其在正则匹配中的位置。</p>
<pre><code>const pattern =/(\d{4})-(\d{2})-(\d{2})/u;
const result = pattern.exec(&apos;2017-07-10&apos;);
// result[0] === &apos;2017-07-10&apos;
// result[1] === &apos;2017&apos;
// result[2] === &apos;07&apos;
// result[3] === &apos;10&apos;
</code></pre><p>但正则表达式已经因难于读、写和维护而臭名昭著，并且数字引用会使事情进一步复杂化。例如，在一个更长的表达式中判断一个独特捕获的索引是很困难的事：</p>
<pre><code>/(?:(.)(.(?&lt;=[^(])(.)))/  // 最后一个捕获组的索引是？
</code></pre><p>更糟糕的是，更改一个表达式可能会潜在地转变所有已存在的捕获的索引：</p>
<pre><code>/(a)(b)(c)\3\2\1/     // 一些简单的有序的反向引用。
/(.)(a)(b)(c)\4\3\2/  // 所有都需要更新。
</code></pre><p>命名捕获是一个即将到来的特性，它允许开发者给捕获组分配名称来帮助尽可能地解决这些问题。语法类似于 Perl、Java、.Net 和 Ruby：</p>
<pre><code>const pattern =/(?&lt;year&gt;\d{4})-(?&lt;month&gt;\d{2})-(?&lt;day&gt;\d{2})/u;
const result = pattern.exec(&apos;2017-07-10&apos;);
// result.groups.year === &apos;2017&apos;
// result.groups.month === &apos;07&apos;
// result.groups.day === &apos;10&apos;
</code></pre><p>命名捕获组也可以被命名的反向引用来引用，并传入 <code>String.prototype.replace</code>：</p>
<pre><code>// 命名反向引用。
/(?&lt;LowerCaseX&gt;x)y\k&lt;LowerCaseX&gt;/.test(&apos;xyx&apos;);  //true

// 字符串替换。
const pattern =/(?&lt;fst&gt;a)(?&lt;snd&gt;b)/;
&apos;ab&apos;.replace(pattern,&apos;$&lt;snd&gt;$&lt;fst&gt;&apos;);                              // &apos;ba&apos;
&apos;ab&apos;.replace(pattern,(m, p1, p2, o, s,{fst, snd})=&gt; fst + snd);  // &apos;ba&apos;
</code></pre><p>关于这个新特性的全部详情可以在<a href="https://github.com/tc39/proposal-regexp-named-groups" target="_blank" rel="external">规范提案</a>中查看。</p>
<h2 id="dotAll-修饰符"><a href="#dotAll-修饰符" class="headerlink" title="dotAll 修饰符"></a>dotAll 修饰符</h2><p>默认情况下，元字符 <code>.</code> 在正则表达式中匹配除了换行符以外的任何字符：</p>
<pre><code>/foo.bar/u.test(&apos;foo\nbar&apos;);   // false
</code></pre><p>一个提案引入了 dotAll 模式，通过 <code>/s</code> 修饰符来开启。在 dotAll 模式中，<code>.</code> 也可以匹配换行符。</p>
<pre><code>/foo.bar/su.test(&apos;foo\nbar&apos;);  // true
</code></pre><p>关于这个新特性的全部详情可以在<a href="https://github.com/tc39/proposal-regexp-dotall-flag" target="_blank" rel="external">规范提案</a>中查看。</p>
<h2 id="Unicode-属性逃逸（Unicode-Property-Escapes）"><a href="#Unicode-属性逃逸（Unicode-Property-Escapes）" class="headerlink" title="Unicode 属性逃逸（Unicode Property Escapes）"></a>Unicode 属性逃逸（Unicode Property Escapes）</h2><p>正则表达式语法已经包含了特定字符类的简写。<code>\d</code> 代表数字并且只能是 <code>[0-9]</code>；<code>\w</code> 是单词字符的简写，或者写成 <code>[A-Za-z0-9_]</code>。</p>
<p>自从 ES2015 引入了 Unicode，突然间大量的字符可以被认为是数字，例如圈一：①；或者被认为是字符的，例如中文字符：雪。</p>
<p>它们都不会被 <code>\d</code> 或 <code>\w</code> 匹配。而改变这些简写的含义将会破坏已经存在的正则表达式模式。</p>
<p>于是，新的字串类被<a href="https://github.com/tc39/proposal-regexp-unicode-property-escapes" target="_blank" rel="external">引入</a>。注意它们只在使用 <code>/u</code> 修饰符的 Unicode-aware 正则表达式中可用。</p>
<pre><code>/\p{Number}/u.test(&apos;①&apos;);      // true
/\p{Alphabetic}/u.test(&apos;雪&apos;);  // true
</code></pre><p>排除型字符可以使用 <code>\P</code> 匹配。</p>
<pre><code>/\P{Number}/u.test(&apos;①&apos;);      // false
/\P{Alphabetic}/u.test(&apos;雪&apos;);  // false
</code></pre><p>统一码联盟还定义了许多方式来分类码位，例如数学符号和日语平假名字符：</p>
<pre><code>/^\p{Math}+$/u.test(&apos;∛∞∉&apos;);                            // true
/^\p{Script_Extensions=Hiragana}+$/u.test(&apos;ひらがな&apos;);  // true
</code></pre><p>全部受支持的 Unicode 属性类列表可以在目前的<a href="https://tc39.github.io/proposal-regexp-unicode-property-escapes/#sec-static-semantics-unicodematchproperty-p" target="_blank" rel="external">规范提案</a>中找到。更多示例请查看<a href="https://mathiasbynens.be/notes/es-unicode-property-escapes" target="_blank" rel="external">这篇内容丰富的文章</a>。</p>
<h2 id="后行断言"><a href="#后行断言" class="headerlink" title="后行断言"></a>后行断言</h2><p>先行断言从一开始就已经是 JavaScript 正则表达式语法的一部分。与之相对的后行断言也终于将被<a href="https://github.com/tc39/proposal-regexp-lookbehind" target="_blank" rel="external">引入</a>。你们中的一些人可能记得，这成为 V8 的一部分已经有一段时间了。我们甚至在底层已经用后行断言实现了 ES2015 规定的 Unicode 修饰符。</p>
<p>“后行断言”这个名字已经很好地描述了它的涵义。它提供一个方式来限制一个正则，只有后行组匹配通过之后才继续匹配。它提供匹配和非匹配两种选择：</p>
<pre><code>/(?&lt;=\$)\d+/.exec(&apos;$1 is worth about ¥123&apos;);  // [&apos;1&apos;]
/(?&lt;!\$)\d+/.exec(&apos;$1 is worth about ¥123&apos;);  //[&apos;123&apos;]
</code></pre><p>更多详细信息，查看我们<a href="https://v8project.blogspot.com/2016/02/regexp-lookbehind-assertions.html" target="_blank" rel="external">之前的一篇博文</a>，专门介绍了后行断言。相关示例可以查看<a href="https://github.com/v8/v8/blob/master/test/mjsunit/harmony/regexp-lookbehind.js" target="_blank" rel="external">V8 测试用例</a>。</p>
<h2 id="致谢"><a href="#致谢" class="headerlink" title="致谢"></a>致谢</h2><p>本文的完成有幸得到了很多相关人士的帮助，他们的辛勤工作造就了这一切：特别是语言之王<a href="https://twitter.com/mathias" target="_blank" rel="external">Mathias Bynens</a>、<a href="https://twitter.com/littledan" target="_blank" rel="external">Dan Ehrenberg</a>、<a href="https://github.com/claudepache" target="_blank" rel="external">Claude Pache</a>、<a href="https://twitter.com/bterlson" target="_blank" rel="external">Brian Terlson</a>、<a href="https://twitter.com/IgnoredAmbience" target="_blank" rel="external">Thomas Wood</a>、Gorkem Yakin、和正则大师 <a href="https://twitter.com/erikcorry" target="_blank" rel="external">Erik Corry</a>；还有为语言规范作出努力的每一个人以及 V8 团队对这些特性的实施。</p>
<p>希望您能像我们一样为这些新的正则表达式特性而感到兴奋！</p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://developers.google.com/web/updates/2017/07/upcoming-regexp-features&quot; target=&quot;_blank&quot; rel=&quot;externa
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript 的函数式编程是一种反模式</title>
    <link href="http://suncafe.cc/2017/07/06/JavaScript%E7%9A%84%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B%E6%98%AF%E4%B8%80%E7%A7%8D%E5%8F%8D%E6%A8%A1%E5%BC%8F/"/>
    <id>http://suncafe.cc/2017/07/06/JavaScript的函数式编程是一种反模式/</id>
    <published>2017-07-06T15:32:49.000Z</published>
    <updated>2017-10-09T15:28:31.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://hackernoon.com/functional-programming-in-JavaScript-is-an-antipattern-58526819f21e" target="_blank" rel="external">Functional programming in JavaScript is an antipattern</a></li>
<li>原文作者：<a href="https://hackernoon.com/@alexdixon" target="_blank" rel="external">Alex Dixon</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>本文永久链接：<a href="https://github.com/xitu/gold-miner/blob/master/TODO/functional-programming-in-javascript-is-an-antipattern.md" target="_blank" rel="external">https://github.com/xitu/gold-miner/blob/master/TODO/functional-programming-in-javascript-is-an-antipattern.md</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/leviding" target="_blank" rel="external">LeviDing</a>、<a href="https://github.com/xekri" target="_blank" rel="external">xekri</a></li>
</ul>
</blockquote>
<hr>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*Y6orLTOgb6JFfjVdANVgCQ.png" alt=""></p>
<h2 id="其实-Clojure-更简单些"><a href="#其实-Clojure-更简单些" class="headerlink" title="其实 Clojure 更简单些"></a>其实 Clojure 更简单些</h2><p>写了几个月 Clojure 之后我再次开始写 JavaScript。就在我试着写一些很普通的东西的时候，我总会想下面这些问题：</p>
<blockquote>
<p>“这是 ImmutableJS 变量还是 JavaScript 变量？”</p>
<p>“我如何 map 一个对象并且返回一个对象？”</p>
<p>“如果它是不可变的，要么使用 &lt;这种语法&gt; 的 &lt;这个函数&gt;，否则使用 &lt;不同的语法和完全不同行为&gt; 的 &lt;同一个函数的另一个版本&gt;”</p>
<p>“一个 React 组件的 state 可以是一个不可变的 Map 吗？”</p>
<p>“引入 lodash 了吗？”</p>
<p>“<code>fromJS</code> 然后 &lt;写代码&gt; 然后 <code>.toJS()</code>？”</p>
</blockquote>
<p>这些问题似乎没什么必要。但我猜想我已经思考这些问题上百万次了只是没有注意到，因为这些都是我知道的。</p>
<p>当使用 React、Redux、ImmutableJS、lodash、和像 lodash/fp、ramda 这样的函数式编程库的任意组合写 JavaScript 的时候，我觉得没什么方法能避免这种思考。</p>
<p>我需要一直把下面这些事记在脑海里：</p>
<ul>
<li>lodash 的 API、Immutable 的 API、lodash/fp 的 API、ramda 的 API、还有原生 JS 的 API 或一些组合的 API</li>
<li>处理 JavaScript 数据结构的可变编程技术</li>
<li>处理 Immutable 数据结构的不可变编程技术</li>
<li>使用 Redux 或 React 时，可变的 JavaScript 数据结构的不可变编程</li>
</ul>
<p>就算我能够记住这些东西，我依然会遇到上面那一堆问题。不可变数据、可变数据和某些情况下不能改变的可变数据。一些常用函数的签名和返回值也是这样，几乎每一行代码都有不同的情况要考虑。我觉得在 JavaScript 中使用函数式编程技术很棘手。</p>
<p>按照惯例像 Redux 和 React 这种库需要不可变性。所以即使我不使用 ImmutableJS，我也得记得“这个地方不能改变”。在 JavaScript 中不可变的转换比它本身的使用更难。我感觉这门语言给我前进的道路下了一路坑。此外，JavaScript 没有像 Object.map 这样的基本函数。所以像<a href="https://www.npmjs.com/package/lodash" target="_blank" rel="external">上个月 4300 多万人</a>一样，我使用 lodash，它提供大量 JavaScript 自身没有的函数。不过它的 API 也不是友好支持不可变的。一些函数返回新的数值，而另一些会更改已经存在的数据。再次强调，花时间来区分它们是很不划算的。事实大概如此，想要处理 JavaScript，我需要了解 lodash、它的函数名称、它的签名、它的返回值。更糟糕的是，它的<a href="https://www.youtube.com/watch?v=m3svKOdZijA" target="_blank" rel="external">“collection 在先， arguments 在后”</a>的方式对函数式编程来说也并不理想。</p>
<p>如果我使用 ramda 或者 lodash/fp 会好一些，可以很容易地组合函数并且写出清晰整洁的代码。但是它不能和 Immutable 数据结构一起使用。我可能还是要写一些参数集合在后而其他时候在前的代码。我必须知道更多的函数名、签名、返回值，并引入更多的基本函数。</p>
<p>当我单独使用 ImmutableJS，一些事变得容易些了。Map.set 返回全新的值。一切都返回全新的值！这就是我想要的。不幸的是，ImmutableJS 也有一些纠结的事情。我不可避免地要处理两套不同的数据结构。所以我不得不清楚 <code>x</code> 是 Immutable 的还是 JavaScript 的。通过学习其 API 和整体思维方式，我可以使用 Immutable 在 2 秒内知道如何解决问题。当我使用原生 JS 时，我必须跳过该解决方案，用另一种方式来解决问题。就像 ramda 和 lodash 一样，有大量的函数需要我了解 —— 它们返回什么、它们的签名、它们的名称。我也需要把我所知的所有函数分成两类：一类用于 Immutable 的，另一类用于其它。这往往也会影响我解决问题的方式。我有时会不自主地想到柯里化和组合函数的解决方案。但不能和 ImmutableJS 一起使用。所以我跳过这个解决方案，想想其他的。</p>
<p>当我全部想清楚以后，我才能尝试写一些代码。然后我转移到另一个文件，做一遍同样的事情。</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*FVBc2DWB09sW6QJwMxm_fw.png" alt=""></p>
<p>JavaScript 中的函数式编程。</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*MVU4TWwrkRMpQlmgkU9TuQ.png" alt=""></p>
<p>反模式的可视化。</p>
<p>我已孤立无援，并且把 JavaScript 的函数式编程称为一种反模式。这是一条迷人之路却将我引入迷宫。它似乎解决了一些问题，最终却创造了更多的问题。重点是这些问题似乎没有更高层次的解决方案能避免我一次有又一次地处理问题。</p>
<h3 id="这件事的长期成本是什么"><a href="#这件事的长期成本是什么" class="headerlink" title="这件事的长期成本是什么?"></a>这件事的长期成本是什么?</h3><p>我没有确切的数字，但我敢说如果不必去想“在这里我可以用什么函数？”和“我可否改变这个变量”这样的问题，我可以更高效地开发。这些问题对我想要解决的问题或者我想要增加的功能没有任何意义。它们是语言本身造成的。我能想到避免这个问题的唯一办法就是在路的起点就不要走下去 —— 不要使用 ImmutableJS 、ImmutableJS 数据结构、Redux/React 概念中的不可变数据，以及 ramda 表达式和 lodash。总之就是写 JavaScript 不要使用函数式编程技术，它看似不是什么好的解决方案。</p>
<p>如果你确定并同意我所说的（如果不同意，也很好），那么我认为值得花 5 分钟或一天甚至一周时间来考虑：保持在 JavaScript 路子上相比用一个不同的东西取代，耗费的长期成本是什么？</p>
<p>这个所谓不同的东西对于我来说就是 Clojurescript。它是一门像 ES6 一样的 “compile-to-JS” 语言。大体上说，它是一种使用不同语法的 JavaScript。它的底层是被设计成用于函数式编程的语言，操作不可变的数据结构。对我来说，它比 JavaScript 更容易，更有前途。</p>
<p><img src="https://cdn-images-1.medium.com/max/1200/1*_bhmf-j96fW9qSuPm7yEsw.png" alt=""></p>
<h3 id="Clojure-Clojurescript-是什么？"><a href="#Clojure-Clojurescript-是什么？" class="headerlink" title="Clojure/Clojurescript 是什么？"></a>Clojure/Clojurescript 是什么？</h3><p>Clojurescript 类似 Clojure，除了它的宿主语言是 JavaScript 而不是 Java。它们的语法完全相同：如果你学 Clojurescript，其实你就在学 Clojure。这意味着如果你了解了 Clojurescript，你就可以写 JavaScript 和 Java。“30 亿的设备上运行着 Java”；我非常确定其他设备上运行着 JavaScript。</p>
<p>和 JavaScript 一样，Clojure 和 Clojurescript 也是动态类型的。你可以 100% 地使用 Clojurescript 语言用 Node 写服务端的全栈应用。与单独编译成 JavaScript 的语言不同，你也可以选择写一个基于 Java 的 servrer 来支持多线程。</p>
<p>作为一个普通的 JavaScript/Node 开发者，学习这门语言及其生态系统对我来说并不困难。</p>
<h3 id="是什么使得-Clojurescript-更简单？"><a href="#是什么使得-Clojurescript-更简单？" class="headerlink" title="是什么使得 Clojurescript 更简单？"></a>是什么使得 Clojurescript 更简单？</h3><p><img src="https://cdn-images-1.medium.com/max/1600/1*cxIhT4wHooj6Cl50sryKIA.gif" alt=""></p>
<p>在编辑器中执行任意你想要执行的代码。</p>
<ol>
<li><strong>你可以在编辑器中一键执行任何代码。</strong> 的确如此，你可以在编辑器中输入任何你想写的代码，选中它（或者把光标放在上面）然后运行并查看结果。你可以定义函数，然后用你想用的参数调用它。你可以在应用运行的时候做这些事。所以，如果你不知道一些东西如何运作，你可以在你的编辑器的 REPL 里求值，看看会发生什么。</li>
<li><strong>函数可以作用于数组和对象。</strong> Map、reduce、filter 等对数组和对象的作用都相同。设计就是如此。我们毋须再纠结于 <code>map</code> 对数组和对象作用的不同之处。</li>
<li><strong>不可变的数据结构。</strong> 所有 Clojurescript 数据结构都是不可变的。因此你再也不必纠结一些东西是否可变了。你也不需要切换编程范式，从可变到不可变。你完全在不可变数据结构的领地上。</li>
<li><strong>一些基本函数是语言本身包含的。</strong> 像 map、filter、reduce、compose 和<a href="https://clojure.github.io/clojure/" target="_blank" rel="external">很多其他</a>函数都是核心语言的一部分，不需要外界引入。因此你的脑子里不必记着 4 种不同版本的“map”了（Array.map、lodash.map、ramda.map、Immutable.map）。你只需要知道一个。</li>
<li><strong>它很简洁。</strong> 相对于其他任何编程语言，它只需要短短几行的代码就能表达你的想法。（通常少得多）</li>
<li><strong>函数式编程。</strong> Clojurescript 是一门彻底的函数式编程语言 —— 支持隐式返回声明、函数是一等公民、lambda 表达式等等。</li>
<li><strong>使用 JavaScript 中所需的任何内容。</strong> 你可以使用 JavaScript 的一切以及它的生态系统，从 <code>console.log</code> 到 npm 库都可以。</li>
<li><strong>性能。</strong> Clojurescript 使用 Google Closure 编译器来优化输出的 JavaScript。Bundle 体积小到极致。用于生产的打包过程不需要从设置优化到 <code>:advanced</code> 的复杂配置。</li>
<li><strong>可读的库代码。</strong> 有时候了解“这个库的功能是干嘛的？”很有用。当我使用 JavaScript 中的“跳转到定义处”，我通常都会看到被压缩或错位的源代码。Clojure 和 Clojurescript 的库都直接被显示成写出来的样子，因此不需离开你的编辑器去看一些东西如何工作就很简单，因为你可以直接阅读源码。</li>
<li><strong>是一种 LISP 方言。</strong> 很难列举出这方面的好处，因为太多了。我喜欢的一点是它的公式化，（有这么一种模式可以依靠）代码是用语言的数据结构来表达的。（这使得元编程很容易）。Clojure 不同于 LISP 因为它并不是 100% 的 <code>()</code>。它的代码和数据结构中可以使用 <code>[]</code> 和 <code>{}</code>，就像大多数编程语言那样。</li>
<li><strong>元编程。</strong> Clojurescript 允许你编写生成代码的代码。这一点有我不想掩盖的巨大内涵。其中之一是你可以高效地扩展语言本身。这是一个出自 <a href="http://www.braveclojure.com/writing-macros/" target="_blank" rel="external">Clojure for the Brave and True</a> 的例子：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">(defmacro infix</div><div class="line">  [infixed]</div><div class="line">  (list (second infixed) (first infixed) (last infixed)))</div><div class="line">(infix (1 + 1))</div><div class="line">=&gt; 2</div><div class="line">(macroexpand &apos;(infix (1 + 1)))</div><div class="line">=&gt; (+ 1 1)</div><div class="line">; 这个宏把它传入 Clojure，Clojure 可以正确执行，因为是 Clojure 的原生语法。</div></pre></td></tr></table></figure>
<h3 id="为什么它并不流行？"><a href="#为什么它并不流行？" class="headerlink" title="为什么它并不流行？"></a>为什么它并不流行？</h3><p>既然说它这么棒，可它怎么不上天呢？有人指出它已经很流行了，它只是不如 lodash、React、Redux 等等那么流行而已。但既然它更好，不应该和它们一样流行吗？为什么偏爱函数式编程、不可变性和 React 的 JS 开发者还没有迁移到 Clojurescript？</p>
<p><strong>因为缺少工作机会吗？</strong> Clojure 可以编译成 JavaScript 和 Java。它实际上也可以编译成 C#。因此大量的 JavaScript 工作都可以当作 Clojurescript 工作。它是一种函数式语言，用于为所有编译目标完成所有的任务。先不论它的价值如何体现，2017 StackOverflow 的调查表明 <a href="http://www.techrepublic.com/article/what-are-the-highest-paid-jobs-in-programming-the-top-earning-languages-in-2017/" target="_blank" rel="external">Clojure 开发者的薪资水平是所有语言中全球平均最高的</a>。</p>
<p><strong>因为 JS 开发者很懒吗？</strong> 并不是。正如我在上面所展示的，我们做了大量的工作。有个词叫 <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4" target="_blank" rel="external">JavaScript 疲劳</a>，你可能已经听说过了。</p>
<p><strong>我们很抗拒，不想学点新东西吗？</strong> 并不是。 <a href="https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f" target="_blank" rel="external">我们已经因采用新技术而臭名昭著。</a></p>
<p><strong>因为缺乏熟悉的框架和工具吗？</strong> 这感觉上可能是个原因，但 Javascript 中有的东西， Clojurescript 都有与之对应的： <a href="https://github.com/Day8/re-frame" target="_blank" rel="external">re-frame</a> 对应 Redux、<a href="https://github.com/reagent-project/reagent" target="_blank" rel="external">reagent</a> 对应 React、<a href="https://github.com/bhauman/lein-figwheel" target="_blank" rel="external">figwheel</a> 对应 Webpack/热加载、<a href="https://github.com/technomancy/leiningen" target="_blank" rel="external">leiningen</a> 对应 yarn/npm、Clojurescript 对应 Underscore/Lodash。</p>
<p><strong>是因为括号的问题使得这门语言太难写了吗？</strong> 这方面也许谈的还不够多，但<a href="https://shaunlebron.github.io/parinfer/" target="_blank" rel="external">我们不必自己来区分圆括号方括号</a> 。基本上，Parinfer 使得 Clojure 成为了空格语言。</p>
<p><strong>因为在工作中很难使用？</strong> 可能是吧。它是一种新技术，就像 React 和 Redux 曾经那样，在某些时候也是很难推广的。即使也没什么技术限制 ——  Clojurescript 集成到现有代码库和集成 React 的方式是类似的。你可以把 Clojurescript 加入到已经存在的代码库中，每次重写一个文件的旧代码，新代码依然可以和未更改的旧代码交互。</p>
<p><strong>没有足够受欢迎？</strong> 很不幸，我想这就是它的原因。我使用 JavaScript 一部分原因就是它拥有庞大的社区。Clojurescript 太小众了。我使用 React 的部分原因是它是由 Facebook 维护的。而 Clojure 的维护者是<a href="https://avatars2.githubusercontent.com/u/34045?v=3&amp;s=400" target="_blank" rel="external">花大量时间思考的留着长发的家伙</a>。</p>
<p>有数量上的劣势，我认了。但“人多势众”否决了所有其他可能的因素。</p>
<p>假设有一条路通向 100 美元，它很不受欢迎，而另一条路通向 10 美元，它极其受欢迎，我会选择受欢迎的那条路吗？</p>
<p>恩，也许会的吧！那里有成功的先例。它一定比另一条路安全，因为更多的人选择了它。他们一定不会遇到什么可怕的事。而另一条路听起来美好，但我确定那一定是个陷阱。如果它像看起来那么美好，那么它就是最受欢迎的那条路了。</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*Y6orLTOgb6JFfjVdANVgCQ.png" alt=""></p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://hackernoon.com/functional-programming-in-JavaScript-is-an-antipattern-58526819f21e&quot; target=&quot;_bla
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>如何充分利用JavaScript控制台</title>
    <link href="http://suncafe.cc/2017/06/28/%5B%E8%AF%91%5D%E5%A6%82%E4%BD%95%E5%85%85%E5%88%86%E5%88%A9%E7%94%A8JavaScript%E6%8E%A7%E5%88%B6%E5%8F%B0/"/>
    <id>http://suncafe.cc/2017/06/28/[译]如何充分利用JavaScript控制台/</id>
    <published>2017-06-27T16:09:19.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://medium.freecodecamp.com/how-to-get-the-most-out-of-the-javascript-console-b57ca9db3e6d" target="_blank" rel="external">How to get the most out of the JavaScript console</a></li>
<li>原文作者：<a href="https://medium.freecodecamp.com/@darrylpargeter" target="_blank" rel="external">Darryl Pargeter</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/reid3290" target="_blank" rel="external">reid3290</a>、<a href="https://github.com/Aladdin-ADD" target="_blank" rel="external">Aladdin-ADD</a></li>
</ul>
</blockquote>
<hr>
<p><img src="https://cdn-images-1.medium.com/max/2000/1*mM2AMk0TRENA2zF2RMEebA.jpeg" alt=""></p>
<p>JavaScript 中最基本的调试工具之一就是 <code>console.log()</code>。<code>console</code> 还附带了一些其他好用的方法，可以添加到开发人员的调试工具包中。</p>
<p>你可以使用 <code>console</code> 执行以下任务：</p>
<ul>
<li>输出一个计时器来协助进行简单的基准测试</li>
<li>输出一个表格来以易读的格式显示一个数组或对象</li>
<li>使用 CSS 将颜色和其他样式选项应用于输出</li>
</ul>
<h3 id="Console-对象"><a href="#Console-对象" class="headerlink" title="Console 对象"></a>Console 对象</h3><p><code>console</code> 对象允许您访问浏览器的控制台。它允许你输出有助于调试代码的字符串、数组和对象。<code>console</code> 是 <code>window</code> 对象的属性，由<a href="https://www.w3schools.com/js/js_window.asp" target="_blank" rel="external">浏览器对象模型(BOM)</a>提供。</p>
<p>我们可以通过这两种方法之一访问 <code>console</code>：</p>
<ol>
<li><code>window.console.log(&#39;This works&#39;)</code></li>
<li><code>console.log(&#39;So does this&#39;)</code></li>
</ol>
<p>第二个选项本质上是对前者的引用，所以我们使用后者以精简代码。</p>
<p>关于 BOM 的快速提示：它没有设定标准，所以每家浏览器都以稍微不同的方式实现。我在 Chrome 和 Firefox 测试了所有示例，但你的输出可能有所不同，这取决于你使用的浏览器。</p>
<h3 id="输出文本"><a href="#输出文本" class="headerlink" title="输出文本"></a>输出文本</h3><p><img src="https://cdn-images-1.medium.com/max/800/1*eEnUT7quS8oCeOsoGn1Kxw.png" alt=""></p>
<p>将文本记录到控制台<br><code>console</code> 对象最常见的元素是 <code>console.log</code>，对于大多数情况，使用它就可以完成任务。</p>
<p>输出信息到控制台的四种方式：</p>
<ol>
<li><code>log</code></li>
<li><code>info</code></li>
<li><code>warn</code></li>
<li><code>error</code></li>
</ol>
<p>他们四个工作方式相同。你唯一要做的是给选择的方法传递一个或更多的参数。控制台会显示不同的图标来指示其记录级别。下面的例子中你可以看到 info 级别的记录和 warning/error 级别的不同之处。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*AKbeddGNDqLYaJOMQlrrMw.png" alt=""></p>
<p>简单易读的输出</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*3yKUiYLyju8f9gE71w1Sxw.png" alt=""></p>
<p>输出东西太多将变得难以阅读</p>
<p>你可能注意到了 error 日志消息 —— 它比其他消息更显眼。它显示着红色的背景和<a href="https://en.wikipedia.org/wiki/Stack_trace" target="_blank" rel="external">堆栈跟踪</a>，而 <code>info</code> 和 <code>warn</code> 就不会。但是在 Chrome 中 <code>warn</code> 确实有一个黄色的背景。</p>
<p>视觉上的区分有助于你在控制台快速浏览辨别出错误或警告信息。你应该确保在准备生产的应用中移除它们，除非你打算让它们来警示其他操作你的代码的开发者。</p>
<h3 id="字符串替换"><a href="#字符串替换" class="headerlink" title="字符串替换"></a>字符串替换</h3><p>这个技术可以使用字符串中的占位符来替换你向方法中传入的其他参数。</p>
<p><strong>输入</strong>： <code>console.log(&#39;string %s&#39;, &#39;substitutions&#39;)</code></p>
<p><strong>输出</strong>： <code>string substitutions</code></p>
<p><code>%s</code> 是逗号后面第二个参数 <code>&#39;substitutions&#39;</code> 的占位符。任何的字符串、整数或数组都将被转换成字符串并替换 <code>%s</code>。如果你传入一个对象，它将显示为 <code>[object Object]</code>。</p>
<p>如果你想传入对象，你需要使用 <code>%o</code> 或者 <code>%O</code>，而不是 <code>%s</code>。</p>
<p><code>console.log(&#39;this is an object %o&#39;, { obj: { obj2: &#39;hello&#39; }})</code></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*WhqTGnch8S2kAIQYxXOLhw.png" alt=""></p>
<h4 id="数字"><a href="#数字" class="headerlink" title="数字"></a>数字</h4><p>字符串替换可以与整数和浮点数一起使用：</p>
<ul>
<li>整数使用 <code>%i</code> 或 <code>%d</code>,</li>
<li>浮点数使用 <code>%f</code>。</li>
</ul>
<p><strong>输入</strong>： <code>console.log(&#39;int: %d, floating-point: %f&#39;, 1, 1.5)</code></p>
<p><strong>输出</strong>：<code>int: 1, floating-point: 1.500000</code></p>
<p>可以使用 <code>%.1f</code> 来格式化浮点数，使小数点后仅显示一位小数。你可以用 <code>%.nf</code> 来显示小数点后 n 位小数。</p>
<p>如果我们使用上述例子显示小数点后一位小数来格式化浮点数值，它看起来这样：</p>
<p><strong>输入</strong>： <code>console.log(&#39;int: %d, floating-point: %.1f&#39;, 1, 1.5)</code></p>
<p><strong>输出</strong>： <code>int: 1, floating-point: 1.5</code></p>
<h4 id="格式化说明符"><a href="#格式化说明符" class="headerlink" title="格式化说明符"></a>格式化说明符</h4><ol>
<li><code>%s</code> | 使用字符串替换元素</li>
<li><code>%(d|i)</code>| 使用整数替换元素</li>
<li><code>%f</code>| 使用浮点数替换元素</li>
<li><code>%(o|O)</code> | 元素显示为一个对象</li>
<li><code>%c</code> | 应用提供的 CSS</li>
</ol>
<h4 id="字符串模板"><a href="#字符串模板" class="headerlink" title="字符串模板"></a>字符串模板</h4><p>随着 ES6 的出现，模板字符串是替换或连接的替代品。他们使用反引号(``)来代替引号，变量包裹在 <code>${}</code> 中：</p>
<pre><code>const a = &apos;substitutions&apos;;

console.log(`bear: ${a}`);

// bear: substitutions
</code></pre><p>对象在模板字符串中显示为 <code>[object Object]</code>，所以你将需要使用 <code>%o</code> 或 <code>%O</code> 替换以看到详情，或单独记录。</p>
<p>比起使用字符串连接：<code>console.log(&#39;hello&#39; + str + &#39;!&#39;);</code>，使用替换或模板可以创建更易读的代码。</p>
<h4 id="美妙的彩色插曲！"><a href="#美妙的彩色插曲！" class="headerlink" title="美妙的彩色插曲！"></a>美妙的彩色插曲！</h4><p>现在，是时候来点更有趣而多彩的东西了！</p>
<p>是时候用字符串替换让我们的 <code>console</code> 弹出丰富多彩的颜色了。</p>
<p>我将使用一个模仿 Ajax 的例子，给我们显示一个请求成功（用绿色）和失败（用红色）。这是输出和代码：</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*BRAhnRn9GpZgrUf_SQfi3A.png" alt=""></p>
<p>成功的小熊和失败的蝙蝠</p>
<pre><code>const success = [
 &apos;background: green&apos;,
 &apos;color: white&apos;,
 &apos;display: block&apos;,
 &apos;text-align: center&apos;
].join(&apos;;&apos;);

const failure = [
 &apos;background: red&apos;,
 &apos;color: white&apos;,
 &apos;display: block&apos;,
 &apos;text-align: center&apos;
].join(&apos;;&apos;);

console.info(&apos;%c /dancing/bears was Successful!&apos;, success);
console.log({data: {
 name: &apos;Bob&apos;,
 age: &apos;unknown&apos;
}}); // &quot;mocked&quot; data response

console.error(&apos;%c /dancing/bats failed!&apos;, failure);
console.log(&apos;/dancing/bats Does not exist&apos;);
</code></pre><p>在字符串替换中使用 <code>%c</code> 占位符来应用你的样式规则。</p>
<pre><code>console.error(&apos;%c /dancing/bats failed!&apos;, failure);
</code></pre><p>然后把你的 CSS 元素作为参数，你就能看到应用 CSS 的日志了。 你也可以给你的字符串添加多个 <code>%c</code>。</p>
<pre><code>console.log(&apos;%cred %cblue %cwhite&apos;,&apos;color:red;&apos;,&apos;color:blue;&apos;, &apos;color: white;&apos;)
</code></pre><p>这将按照他们的代表的颜色输出字符 “red”、“blue” 和 “white”。</p>
<p>控制台仅仅支持少数 CSS 属性，建议你试验一下哪些支持哪些不支持。重申一下，你的输出结果可能因你的浏览器而异。</p>
<h3 id="其他可用的方法"><a href="#其他可用的方法" class="headerlink" title="其他可用的方法"></a>其他可用的方法</h3><p>还有几个其他可用的 <code>console</code> 方法。注意下面有几项还不是 API 标准，所以可能浏览器间互不兼容。这个例子使用的是 Firefox 51.0.1。</p>
<h4 id="Assert"><a href="#Assert" class="headerlink" title="Assert()"></a>Assert()</h4><p><code>Assert</code> 携带两个参数 —— 如果第一个参数计算为 false，那么它将显示第二个参数。</p>
<pre><code>let isTrue = false;

console.assert(isTrue, &apos;This will display&apos;);

isTrue = true;

console.assert(isTrue, &apos;This will not&apos;);
</code></pre><p>如果断言为 false，控制台将输出内容。它显示为一个上文提到的 error 级别的日志，给你显示一个红色的错误消息和堆栈跟踪。</p>
<h4 id="Dir"><a href="#Dir" class="headerlink" title="Dir()"></a>Dir()</h4><p><code>dir</code> 方法显示一个传入对象的可交互属性列表。</p>
<pre><code>console.dir(document.body);
</code></pre><p><img src="https://cdn-images-1.medium.com/max/800/1*4Zj5EuPTHcQH5-K0NWHb7g.png" alt=""></p>
<p>Chrome 会显示不同的层级<br>最终，<code>dir</code> 仅仅能节省一两次点击，如果你需要检查一个 API 响应返回的对象，你可以用它结构化地显示出来以节约一些时间。</p>
<h4 id="Table"><a href="#Table" class="headerlink" title="Table()"></a>Table()</h4><p><code>table</code> 方法用一个表格显示数组或对象</p>
<pre><code>console.table([&apos;Javascript&apos;, &apos;PHP&apos;, &apos;Perl&apos;, &apos;C++&apos;]);
</code></pre><p><img src="https://cdn-images-1.medium.com/max/800/1*nza7ZWxYG-_X47VJ54FtZg.png" alt=""></p>
<p>输出数组</p>
<p>数组的索引或对象的属性名位于左侧的索引栏，值显示在右侧列栏。</p>
<pre><code>const superhero = {
    firstname: &apos;Peter&apos;,
    lastname: &apos;Parker&apos;,
}
console.table(superhero);
</code></pre><p><img src="https://cdn-images-1.medium.com/max/800/1*BXhY3PzulYFzzcW-Qwga8Q.png" alt=""></p>
<p>输出对象</p>
<p><strong>Chrome 用户需要注意：</strong> 这是我的同事提醒我的，上述 <code>table</code> 方法的例子在 Chrome 中貌似不能工作。你可以通过将项目放入数组或对象数组中来解决此问题。</p>
<pre><code>console.table([[&apos;Javascript&apos;, &apos;PHP&apos;, &apos;Perl&apos;, &apos;C++&apos;]]);

const superhero = {
    firstname: &apos;Peter&apos;,
    lastname: &apos;Parker&apos;,
}
console.table([superhero]);
</code></pre><h4 id="Group"><a href="#Group" class="headerlink" title="Group()"></a>Group()</h4><p><code>console.group()</code> 由至少三个 <code>console</code> 调用组成，它可能是使用时需要打最多字的方法。但它也是最有用的方法之一（特别对使用 <a href="https://github.com/evgenyrodionov/redux-logger" target="_blank" rel="external">Redux Logger</a> 的开发者）。</p>
<p>稍基础的调用看起来是这样的：</p>
<pre><code>console.group();
console.log(&apos;I will output&apos;);
console.group();
console.log(&apos;more indents&apos;)
console.groupEnd();
console.log(&apos;ohh look a bear&apos;);
console.groupEnd();
</code></pre><p>这将输出多个层级，显示效果因你的显示器而异。</p>
<p>Firefox 显示成缩进列表：</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*xFU0AtDqgwLJVUwE4Yo9_w.png" alt=""></p>
<p>Chrome 显示成对象的风格：</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*9hJkBrf4uEXaC1PYe8bomQ.png" alt=""></p>
<p>每次调用 <code>console.group()</code> 都将开启一个新的组，如果在一个组内会创建一个新的层级。每次调用 <code>console.groupEnd()</code> 都会结束当前组或层级并向上移动一个层级。</p>
<p>我发现 Chrome 的输出样式更易读，因为它看起来像一个可折叠的对象。</p>
<p>你可以给 <code>group</code> 传入一个 header 参数，它将被显示并替代 <code>console.group</code>：</p>
<pre><code>console.group(&apos;Header&apos;);
</code></pre><p>如果你调用 <code>console.groupCollapsed()</code>，你可以从一开始就将这个组显示为折叠。据我所知，这个方法可能只有 Chrome 支持。</p>
<h4 id="Time"><a href="#Time" class="headerlink" title="Time()"></a>Time()</h4><p><code>time</code> 方法和上文的 <code>group</code> 方法类似，由两部分组成。</p>
<p>一个用于启动计时器的方法和一个停止它的方法。</p>
<p>一旦计时器完成，它将以毫秒为单位输出总运行时间。</p>
<p>启动计时器使用 <code>console.time(&#39;id for timer&#39;)</code>，结束计时器使用 <code>console.timeEnd(&#39;id for timer&#39;)</code>。您可以同时运行多达 10,000 个定时器。</p>
<p>输出结果可能有点像这样： <code>timer: 0.57ms</code>。</p>
<p>当你需要做一个快速的基准测试时，它非常有用。</p>
<h3 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h3><p>我们已经更深入地了解了 console 对象以及其中附带的其他一些方法。当我们需要调试代码时，这些方法是可用的好工具。</p>
<p>仍然有几种方法我没有谈论，因为他们的 API 依然在变动。具体可以阅读 <a href="https://developer.mozilla.org/en/docs/Web/API/console" target="_blank" rel="external">MDN Web API</a> 和 <a href="https://console.spec.whatwg.org/" target="_blank" rel="external">WHATWG 规范</a>。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*0SNCJfem2WVKSJIDzConxg.png" alt=""></p>
<p><a href="https://developer.mozilla.org/en/docs/Web/API/console" target="_blank" rel="external">https://developer.mozilla.org/en/docs/Web/API/console</a></p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://medium.freecodecamp.com/how-to-get-the-most-out-of-the-javascript-console-b57ca9db3e6d&quot; target=&quot;
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript：回调是什么鬼？</title>
    <link href="http://suncafe.cc/2017/06/22/%5B%E8%AF%91%5DJavaScript%EF%BC%9A%E5%9B%9E%E8%B0%83%E6%98%AF%E4%BB%80%E4%B9%88%E9%AC%BC/"/>
    <id>http://suncafe.cc/2017/06/22/[译]JavaScript：回调是什么鬼/</id>
    <published>2017-06-22T14:56:41.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced" target="_blank" rel="external">JavaScript: What the heck is a Callback?</a></li>
<li>原文作者：<a href="https://codeburst.io/@bmorelli25" target="_blank" rel="external">Brandon Morelli</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：<a href="https://github.com/reid3290" target="_blank" rel="external">reid3290</a>、<a href="https://github.com/wilsonandusa" target="_blank" rel="external">wilsonandusa</a></li>
</ul>
</blockquote>
<hr>
<p>配合简单的示例，用短短 6 分钟学习和理解回调的基本知识。</p>
<p><img src="https://cdn-images-1.medium.com/max/1000/1*pWGJIKats-zuumA3RQNEWQ.jpeg" alt=""></p>
<p>回调  —— 题图来自 <a href="https://unsplash.com/search/call?photo=qXn5L9BqRbE" target="_blank" rel="external">unsplash</a></p>
<h3 id="回调是什么？"><a href="#回调是什么？" class="headerlink" title="回调是什么？"></a>回调是什么？</h3><p><strong>简单讲：</strong> 回调是指在另一个函数执行完成<strong>之后</strong>被调用的函数  ——  因此得名“回调”。</p>
<p><strong>稍复杂地讲：</strong> 在 JavaScript 中，函数也是对象。因此，函数可以传入函数作为参数，也可以被其他函数返回。这样的函数称为<strong>高阶函数</strong>。被作为参数传入的函数就叫做<strong>回调函数</strong>。</p>
<p>^ 这听起来有点啰唆，让我们来看一些例子来简化一下。</p>
<h3 id="为什么我们需要回调？"><a href="#为什么我们需要回调？" class="headerlink" title="为什么我们需要回调？"></a>为什么我们需要回调？</h3><p>有一个非常重要的原因 —— JavaScript 是事件驱动的语言。这意味着，JavaScript 不会因为要等待一个响应而停止当前运行，而是在监听其他事件时继续执行。来看一个基本的例子：</p>
<pre><code>function first(){
  console.log(1);
}

function second(){
  console.log(2);
}

first();
second();
</code></pre><p>正如你所料，<code>first</code> 函数首先被执行，随后 <code>second</code> 被执行 —— 控制台输出下面内容：</p>
<pre><code>// 1
// 2
</code></pre><p>一切都如此美好。</p>
<p>但如果函数 <code>first</code> 包含某种不能立即执行的代码会如何呢？例如我们必须发送请求然后等待响应的 API 请求？为了模拟这种状况，我们将使用 <code>setTimeout</code>，它是一个在一段时间之后调用函数的 JavaScript 函数。我们将函数延迟 500 毫秒来模拟一个 API 请求，新代码长这样：</p>
<pre><code>function first(){
// 模拟代码延迟
  setTimeout( function(){
console.log(1);
  }, 500 );
}

function second(){
  console.log(2);
}

first();
second();
</code></pre><p>现在理解 <code>setTimeout()</code> 是如何工作的并不重要，重要的是你看到了我们已经把 <code>console.log(1);</code> 移动到了 500 秒延迟函数内部。那么现在调用函数会发生什么呢？</p>
<pre><code>first();
second();

// 2
// 1
</code></pre><p>即使我们首先调用了 <code>first()</code> 函数，我们记录的输出结果却在 <code>second()</code> 函数之后。</p>
<p>这不是 JavaScript 没有按照我们想要的顺序执行函数的问题，而是 <strong>JavaScript 在继续向下执行 <code>second()</code> 之前没有等待 <code>first()</code> 响应</strong>的问题。</p>
<p>所以为什么给你看这个？因为你不能一个接一个地调用函数并希望它们按照正确的顺序执行。回调正是确保一段代码执行完毕之后再执行另一段代码的方式。</p>
<h3 id="创建一个回调"><a href="#创建一个回调" class="headerlink" title="创建一个回调"></a>创建一个回调</h3><p>好了，说了这么多，让我们创建一个回调！</p>
<p>首先，打开你的 Chrome 开发者工具（<strong>Windows: Ctrl + Shift + J</strong>)(<strong>Mac: Cmd + Option + J</strong>），在控制台输入下面的函数声明：</p>
<pre><code>function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}
</code></pre><p>上面，我们已经创建了 <code>doHomework</code> 函数。我们的函数携带一个变量，是我们正在研究的课题。在控制台输入下面内容调用你的函数：</p>
<pre><code>doHomework(&apos;math&apos;);

// Alerts: Starting my math homework.
</code></pre><p>现在把我们的回调加进来，我们传入 <code>callback</code> 作为 <code>doHomework()</code> 的最后一个参数。这个回调函数是我们定义在接下来要调用的 <code>doHomework()</code> 函数的第二个参数。</p>
<pre><code>function doHomework(subject**, callback**) {
  alert(`Starting my ${subject} homework.`);
**callback();**
}

doHomework(&apos;math&apos;**, function() {
  alert(&apos;Finished my homework&apos;);
}**);
</code></pre><p>如你所见，如果你将上面的代码输入控制台，你将依次得到两个警告：第一个是“starting homework”，接着是“finished homework”。</p>
<p>但是你的回调函数并不总是必须定义在函数调用里面，它们也可以定义在你代码中的其他位置，比如这样：</p>
<pre><code>function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

function alertFinished(){
  alert(&apos;Finished my homework&apos;);
}

**doHomework(&apos;math&apos;, alertFinished);**
</code></pre><p>这个例子的结果和之前的例子完全一致。如你所见，我们在 <code>doHomework()</code> 函数调用中传入了 <code>alertFinished</code> 函数定义作为参数！</p>
<h3 id="实际应用案例"><a href="#实际应用案例" class="headerlink" title="实际应用案例"></a>实际应用案例</h3><p>上周我发表了一篇关于如何<a href="https://hackernoon.com/build-a-simple-twitter-bot-with-node-js-in-just-38-lines-of-code-ed92db9eb078" target="_blank" rel="external">用 38 行代码构建一个 Twitter 机器人</a>的文章。文中的代码可以实现的唯一原因就是我使用了 <a href="https://dev.twitter.com/rest/public" target="_blank" rel="external">Twitters API</a>。当你向一个 API 发送请求，在你操作响应内容之前你必须等待这个响应。这是回调在实际应用中的绝佳案例。请求长这样：</p>
<pre><code>T.get(&apos;search/tweets&apos;, params, function(err, data, response) {
  if(!err){
    // 这里是施展魔法之处
  } else {
    console.log(err);
  }
})
</code></pre><ul>
<li><code>T.get</code> 仅仅意味着我们将要向 Twitter 发送一个 get 请求</li>
<li>这个请求中有三个参数：<code>‘search/tweets’</code> 是请求的路径，<code>params</code> 是搜索参数，随后的一个匿名函数是我们的回调。</li>
</ul>
<p>回调在这里很重要，因为在我们的代码继续运行之前我们需要等待一个来自服务端的响应。我们并不知道 API 请求会成功还是会失败，所以通过 get 向 search/tweets 发送了请求参数以后，我们要等待。一旦 Twitter 响应，我们的回调函数就被调用。Twitter 要么发送一个 <code>err</code>（error）对象，要么发送一个 <code>response</code> 对象返回给我们。在我们的回调函数中我们可以使用 <code>if()</code> 语句来区分请求是否成功，然后相应地处理新数据。</p>
<h3 id="你做到了"><a href="#你做到了" class="headerlink" title="你做到了"></a>你做到了</h3><p>干得漂亮！你现在（理想状况下）已经理解了回调是什么，回调如何工作。这只是回调的冰山一角，记住学无止境啊！我每周都会更新一些文章/教程，如果你愿意接收每周一次的推送，<a href="https://docs.google.com/forms/d/e/1FAIpQLSeQYYmBCBfJF9MXFmRJ7hnwyXvMwyCtHC5wxVDh5Cq--VT6Fg/viewform" target="_blank" rel="external">点击这里</a>输入你的邮箱订阅吧！</p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced&quot; target=&quot;_blank&quot; rel=&quot;external&quot;
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>Airbnb 的前端重构</title>
    <link href="http://suncafe.cc/2017/06/04/%5B%E8%AF%91%5DAirbnb%E7%9A%84%E5%89%8D%E7%AB%AF%E9%87%8D%E6%9E%84/"/>
    <id>http://suncafe.cc/2017/06/04/[译]Airbnb的前端重构/</id>
    <published>2017-06-04T13:16:07.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2" target="_blank" rel="external">Rearchitecting Airbnb’s Frontend</a></li>
<li>原文作者：<a href="https://medium.com/@AdamRNeary" target="_blank" rel="external">Adam Neary</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>译者：<a href="https://github.com/sunui" target="_blank" rel="external">sunui</a></li>
<li>校对者：</li>
</ul>
</blockquote>
<p>概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 端的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）我们如何一步步摆脱遗留的 Rails 解决方案，（3）一些新技术栈的关键性支柱。彩蛋：我们将讨论接下来要做的事。</p>
<p>Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们流量最高的页面。近十年来，工程师们一直在发展、加强、和优化 Rails 输出页面的方式。</p>
<p>最近，我们转移到了主页以外的垂直页面，<a href="https://www.airbnb.com/new" target="_blank" rel="external">来介绍一些体验和去处</a>。作为 web 端新增产品的一部分，我们花时间重新思考了搜索体验本身。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*VMRwDmHVeYC3YnJhhtKn4Q.gif" alt=""></p>
<p>用于一个广泛搜索的路由间的过渡</p>
<p>我们希望用户体验流畅，要去斟酌用户在浏览页面和缩小搜索范围时遇到的内容，而不是从 <a href="http://www.airbnb.com" target="_blank" rel="external">www.airbnb.com</a> 着陆页导航，（1）访问一个搜索结果页，（2）访问一个单一列表页，（3）访问预订流程，（4）<strong>每个页面都由 Rails 单独传送</strong>。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*epBwi0kxrcW5a6Wv-T4rSg.gif" alt=""></p>
<p>设计三种浏览搜索页的状态：新用户，老用户，和营销页。</p>
<p>在标签页之间切换和与列表进行交互应该感到惬意而轻松。事实上，如今没有什么可以阻止我们致力于在中小屏幕上提供与本地应用相符的体验。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*y_gKoEDVvBvJpGq7hfcr_g.gif" alt=""></p>
<p>再标签页之间切换的未来概念，考虑异步加载内容</p>
<p>要开发这种类型的体验，我们需要摆脱传统的页面切换方法，最终我们兴奋地全面重构了前端代码。</p>
<p><a href="https://medium.com/@intelligibabble" target="_blank" rel="external">Leland Richardson</a> <a href="https://www.youtube.com/watch?v=tWitQoPgs8w" target="_blank" rel="external">最近在 React Conf 大会上发表了关于 React Native 的存在于高访问量 native 应用中的“褐色地带”。 </a>这篇文章将会探讨如何在类似的约束下进行强制性升级，不过是在 web 端。如果你遇到类似的情况，希望对你有帮助。</p>
<h3 id="从-Rails-之中解脱"><a href="#从-Rails-之中解脱" class="headerlink" title="从 Rails 之中解脱"></a>从 Rails 之中解脱</h3><p>在我们的烧烤开火之前，因为我们的线路图上存在所有有趣的<a href="https://developers.google.com/web/progressive-web-apps/" target="_blank" rel="external">渐进式 web 应用</a>（WPA）,我们需要从 Rails 中解脱出来（或者至少在 Airbnb 用 Rails 提供单独页面的这种方式）。</p>
<p>不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，触碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件替换一个 Rails presenter 备份过的小巧的 <a href="http://handlebarsjs.com/" target="_blank" rel="external">Handlebars</a> 模板，突然很多完全不相关的部分都崩掉了——甚至 API 响应都除了问题。原来，presenter 改变了后备 Rails 模型，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。</p>
<p>简而言之，我们在这个项目中，像 Indiana Jone 用自己的宝物交换了一袋沙子，突然间庙宇开始崩塌，我们正在从石块中奔跑。</p>
<h4 id="第-1-步：-调整-API-数据"><a href="#第-1-步：-调整-API-数据" class="headerlink" title="第 1 步： 调整 API 数据"></a>第 1 步： 调整 API 数据</h4><p>当使用 Rails 在服务器端渲染页面时，你可以用任何你喜欢的方式把数据丢给服务器端的 React 组件。Controllers、helpers 和 presenters 能生成任何形式的数据，甚至当你把部分页面迁移到 React 时，每个组件都能处理它所需的任何数据。</p>
<p>但一旦你想渲染客户端路由，你需要能够以预定的形式动态请求所需的数据。将来我们可能用类似 <a href="http://graphql.org/" target="_blank" rel="external">GraphQL</a> 的东西解决这个问题，但是现在暂且把它放到一边吧，因为这件事和重构代码没太大关系。相反，我们选择在我们的 API 的 “v2” 上进行调整，我们需要我们所有的组件来开始处理规范的数据格式。</p>
<p>如果你发现你自己和我们情况类似并且是一个大型的应用，你可能发现我们像我们这样做，规划迁移现有的服务器端数据管道是很容易的。简单地在任何地方用 Rails 渲染一个React组件，并确保数据输入是 API 所规定的类型。你可以用客户端的 React PropTypes 来进一步验证数据类型是否与 API v2 一致。</p>
<p>对我们来说棘手的问题是和那些参与客户预定流程交互的团队协作：商业旅游、发展、度假租赁团队；中国和印度市场团队，灾难恢复团队…等等，我们需要重新培训所有这些人，即使在技术上可以将数据直接传递到正在呈现的组件上(“是的，我明白，这仅仅是一种实验，但是…”)，所有的数据都要通过 API。</p>
<h4 id="第-2-步：-非-API-数据-配置、试验、惯用语、本地化、-国际化…"><a href="#第-2-步：-非-API-数据-配置、试验、惯用语、本地化、-国际化…" class="headerlink" title="第 2 步： 非 API 数据: 配置、试验、惯用语、本地化、 国际化…"></a>第 2 步： 非 API 数据: 配置、试验、惯用语、本地化、 国际化…</h4><p>有一类独特的数据和我们设想的 API 化的数据不同，包括应用配置，用户试验任务，国际化，本地化等等类似的问题。近年来，Airbnb 已经建立了一套难以置信的工具来支持这些功能，但是把这些数据传送到前端的机制就不那么令人愉快了（在革命开始之前，或许就已经很蹩脚了！）。</p>
<p>我们使用 <a href="https://www.npmjs.com/package/hypernova" target="_blank" rel="external">Hypernova</a> 来服务端渲染 React，但是在我们此次重构深入之前，无论服务端渲染时 React 组件中的试验交付会不会爆发或者客户端上提供的字符串转换是否都可以在服务器上可靠地使用，这些都还有点模糊。最重要的是，如果服务器和客户端输出匹配不到位，页面不仅会不断闪烁刷新 diff，还可以在加载后重新渲染整个页面，这对于性能来说很可怕。</p>
<p>更糟糕的是，我们有很久以前写过一些神奇的 Rails 功能，比如 <code>add_bootstrap_data(key, value)</code> 表面上可以在 Rails 中的任何地方调用，通过 <code>BootstrapData.get(key)</code> 使数据在客户端的全局可用（再次强调，对 Hypernova 来说已经不必要了）。这作为小团队的一个实用程序开始成为对大团队和应用来说不可溯源的巫术。由于每个团队拥有不同的页面或功能，因此“数据清洗”变得越来越棘手，因此每个团队都会培养出一种不同的加载配置的机制，以满足其独特需求。</p>
<p>显然，这已经崩溃了，所以我们融合了一个用于引导非 API 数据的规范机制，我们开始将所有应用程序和页面迁移到 Rails 和 React/Hypernova 之间的这种切换。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div></pre></td><td class="code"><pre><div class="line">import React, &#123; PropTypes &#125; from &apos;react&apos;;</div><div class="line">import &#123; compose &#125; from &apos;redux&apos;;</div><div class="line"></div><div class="line">import AirbnbUser from &apos;[our internal user management library]&apos;;</div><div class="line">import BootstrapData from &apos;[our internal bootstrap library]&apos;;</div><div class="line">import Experiments from &apos;[our internal experiment library]&apos;;</div><div class="line">import KillSwitch from &apos;[our internal kill switch library]&apos;;</div><div class="line">import L10n from &apos;[our internal l10n library]&apos;;</div><div class="line">import ImagePaths from &apos;[our internal CDN pipeline library]&apos;;</div><div class="line">import withPhrases from &apos;[our internal i18n library]&apos;;</div><div class="line">import &#123; forbidExtraProps &#125; from &apos;[our internal propTypes library]&apos;;</div><div class="line"></div><div class="line">const propTypes = forbidExtraProps(&#123;</div><div class="line">  behavioralUid: PropTypes.string,</div><div class="line">  bootstrapData: PropTypes.object,</div><div class="line">  experimentConfig: PropTypes.object,</div><div class="line">  i18nInit: PropTypes.object,</div><div class="line">  images: PropTypes.object,</div><div class="line">  killSwitches: PropTypes.objectOf(PropTypes.bool),</div><div class="line">  phrases: PropTypes.object,</div><div class="line">  userAttributes: PropTypes.object,</div><div class="line">&#125;);</div><div class="line"></div><div class="line">const defaultProps = &#123;</div><div class="line">  behavioralUid: null,</div><div class="line">  bootstrapData: &#123;&#125;,</div><div class="line">  experimentConfig: &#123;&#125;,</div><div class="line">  i18nInit: null,</div><div class="line">  images: &#123;&#125;,</div><div class="line">  killSwitches: &#123;&#125;,</div><div class="line">  phrases: &#123;&#125;,</div><div class="line">  userAttributes: null,</div><div class="line">&#125;;</div><div class="line"></div><div class="line">function withHypernovaBootstrap(App) &#123;</div><div class="line">  class HypernovaBootstrap extends React.Component &#123;</div><div class="line">    constructor(props) &#123;</div><div class="line">      super(props);</div><div class="line"></div><div class="line">      const &#123;</div><div class="line">        behavioralUid,</div><div class="line">        bootstrapData,</div><div class="line">        experimentConfig,</div><div class="line">        i18nInit,</div><div class="line">        images,</div><div class="line">        killSwitches,</div><div class="line">        userAttributes,</div><div class="line">      &#125; = props;</div><div class="line"></div><div class="line">      // 清除服务器上的引导数据，以避免泄露数据</div><div class="line">      if (!global.document) &#123;</div><div class="line">        BootstrapData.clear();</div><div class="line">      &#125;</div><div class="line">      BootstrapData.extend(bootstrapData);</div><div class="line">      ImagePaths.extend(images);</div><div class="line"></div><div class="line">      // 在测试中用空对象调用 L10n.init 是不安全的</div><div class="line">      if (i18nInit) &#123;</div><div class="line">        L10n.init(i18nInit);</div><div class="line">      &#125;</div><div class="line"></div><div class="line">      if (userAttributes) &#123;</div><div class="line">        AirbnbUser.setCurrent(userAttributes);</div><div class="line">      &#125;</div><div class="line"></div><div class="line">      if (userAttributes &amp;&amp; behavioralUid) &#123;</div><div class="line">        Experiments.initializeGlobalConfiguration(&#123;</div><div class="line">          experiments: experimentConfig,</div><div class="line">          userId: userAttributes.id,</div><div class="line">          visitorId: behavioralUid,</div><div class="line">        &#125;);</div><div class="line">      &#125; else &#123;</div><div class="line">        Experiments.setExperiments(experimentConfig);</div><div class="line">      &#125;</div><div class="line"></div><div class="line">      KillSwitches.extend(killSwitches);</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    render() &#123;</div><div class="line">      // 理想情况下，我们只想传输 bootstrapData</div><div class="line">      // 如果你有从 redux 或 alt 数据 从服务端到 bootstrap</div><div class="line">      // 你当然可以只传输一个在 bootstrapData 中的 key</div><div class="line">      // 其他属性被处理但是不会传入应用</div><div class="line">      return &lt;App bootstrapData=&#123;this.props.bootstrapData&#125; /&gt;;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  Bootstrap.propTypes = propTypes;</div><div class="line">  Bootstrap.defaultProps = defaultProps;</div><div class="line">  const wrappedComponentName = App.displayName || App.name || &apos;Component&apos;;</div><div class="line">  Bootstrap.displayName = `withHypernovaBootstrap($&#123;wrappedComponentName&#125;)`;</div><div class="line"></div><div class="line">  return Bootstrap;</div><div class="line">&#125;</div><div class="line"></div><div class="line">export default compose(withPhrases, withHypernovaBootstrap);</div></pre></td></tr></table></figure>
<p>用于引导非 API 数据规范的更高阶的组件</p>
<p>这个更高阶的组件做了两件更重要的事情：</p>
<ol>
<li>它接收一个引导数据作为普通的旧对象的规范形式，并且正确地初始化所有支持的工具，用于服务器渲染和客户端渲染。</li>
<li>它吞噬除了一切除了 <code>bootstrapData</code> ，它是另一个简单的对象，必要时把 <code>&lt;App&gt;</code> 组件传入 Redux 作为 children 使用。</li>
</ol>
<p>单纯来看，我们删除了 <code>add_bootstrap_data</code>，并阻止工程师将任意键传递到顶级的 React 组件。秩序被重新恢复，以前我们在客户端中动态地导航到路由，并且渲染材料复杂的 content，而不需要Rails来支持它。</p>
<h3 id="进击的前端"><a href="#进击的前端" class="headerlink" title="进击的前端"></a>进击的前端</h3><p>服务端的重构已经有了头绪，现在我们把目光转向客户端。</p>
<h4 id="懒加载的单页面应用"><a href="#懒加载的单页面应用" class="headerlink" title="懒加载的单页面应用"></a>懒加载的单页面应用</h4><p>那段日子已经过去了，朋友们，初始化时带着可怕 loading 的巨型单页面应用（SPA）已经不复存在了。当我们提出用 React Router 做客户端路由的方案时，可怕的 loading 是很多人提出拒绝的理由。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*O2fK16vfyWaDT-IR61drPw.png" alt=""></p>
<p>在 chrome Timeline 中 route 包的懒加载</p>
<p>但是，如果你看到上面的内容，你就会发现<a href="https://webpack.github.io/docs/code-splitting.html" target="_blank" rel="external">代码分割</a> 和<a href="https://webpack.js.org/guides/lazy-load-react/" target="_blank" rel="external">延迟加载</a> 捆绑路由的影响。实质上，我们是在服务端渲染的页面并且仅仅传输最低限度的一部分用于在浏览器端交互的 Javascript 代码，然后我们利用浏览器的空余时间主动下载其余部分。</p>
<p>在 Rails 端，我们有一个 controller 用于通过 SPA 交付的所有路由。每一个 action 只负责：（1）出发客户端导航中的一切请求，（2）将数据和配置引导到 Hypernova。我们把每个 action （controller、helpers 和 presenters 之间）上千行的 Ruby 代码缩减到 20-30 行。实力碾压。</p>
<p>但这不仅仅是代码的不同…</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*EpKNHdS4Xzl9fRdGekUgEA.gif" alt=""></p>
<p>两种方式加载东京主页的对比（4-5 倍的差距）</p>
<p>…现在页面间的过渡像奶油般顺滑，并且这一步大幅提升了速度（约 5 倍）。而且我们我们可以实现文章开头的那张动画特性。</p>
<h4 id="异步组件"><a href="#异步组件" class="headerlink" title="异步组件"></a>异步组件</h4><p>之前的 React ，我们需要一次渲染整个页面，我们以前的 React 都是这么做的。但现在我们使用异步组件，类似<a href="https://medium.com/@thejameskyle/react-loadable-2674c59de178" target="_blank" rel="external">这种</a>方式， mount 以后加载组件层次结构的部分。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></td><td class="code"><pre><div class="line">export default class AsyncComponent extends React.Component &#123;</div><div class="line">  constructor(props) &#123;</div><div class="line">    super(props);</div><div class="line">    this.state = &#123;</div><div class="line">      Component: null,</div><div class="line">    &#125;;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  componentDidMount() &#123;</div><div class="line">    this.props.loader().then((Component) =&gt; &#123;</div><div class="line">      this.setState(&#123; Component &#125;);</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  render() &#123;</div><div class="line">    const &#123; Component &#125; = this.state;</div><div class="line">    // `loader` 属性没有被使用。 它被提取，所以我们不会将其传递给包装的组件</div><div class="line">    // eslint-disable-next-line no-unused-vars</div><div class="line">    const &#123; renderPlaceholder, placeholderHeight, loader, ...rest &#125; = this.props;</div><div class="line">    if (Component) &#123;</div><div class="line">      return &lt;Component &#123;...rest&#125; /&gt;;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    return renderPlaceholder ?</div><div class="line">      renderPlaceholder() :</div><div class="line">      &lt;WrappedPlaceholder height=&#123;placeholderHeight&#125; /&gt;;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"></div><div class="line">AsyncComponent.propTypes = &#123;</div><div class="line">  // 注意 loader 是返回一个 promise 的函数。</div><div class="line">  // 这个 promise 应该处理一个可渲染的组件。</div><div class="line">  loader: PropTypes.func.isRequired,</div><div class="line">  placeholderHeight: PropTypes.number,</div><div class="line">  renderPlaceholder: PropTypes.func,</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>这对于最初不可见的重量级元素尤其有用，比如 Modals 和 Panels。我们的明确目标是精确地提供初始化页面可见部分所需的 所需的 JavaScript，并使其可交互，而不只一行。这也意味着如果，比方说团队想使用 D3 用于页面弹窗的一个图表，而其他部分不使用 D3，这时候他们就可以权衡一下下载仓库的代码，可以把他们的弹窗代码和其他代码隔离出来。</p>
<p>最重要的是，它可以简单地在任何需要的地方使用：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">import React from &apos;react&apos;;</div><div class="line">import AsyncComponent from &apos;../../../components/AsyncComponent&apos;;</div><div class="line">import scheduleAsyncLoad from &apos;../../../utils/scheduleAsyncLoad&apos;;</div><div class="line"></div><div class="line">function mapLoader() &#123;</div><div class="line">  return new Promise((resolve) =&gt; &#123;</div><div class="line">    if (process.env.LAZY_LOAD) &#123;</div><div class="line">      return airPORT(&apos;./Map&apos;, &apos;HomesSearchMap&apos;)</div><div class="line">         .then(x =&gt; x.default || x);</div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">export function scheduleMapLoad() &#123;</div><div class="line"> scheduleAsyncLoad(searchResultsMapLoader);</div><div class="line">&#125;</div><div class="line"></div><div class="line">export default function MapAsync(props) &#123;</div><div class="line">  return &lt;AsyncComponent loader=&#123;mapLoader&#125; &#123;...props&#125; /&gt;;</div><div class="line">&#125;</div><div class="line">view raw</div></pre></td></tr></table></figure>
<p>这里我们可以简单地把我们的同步版本的地图换成异步版本，这在小断点上特别有用，用户通过点击按钮显示地图。考虑到大多数用户用手机，在担心 Google 地图之前，让他们进入互动这样会缩短加载时的焦虑感。</p>
<p>另外，注意 <code>scheduleAsyncLoad()</code> 的效率，在用户交互之前就要请求包。考虑到地图如此频繁的使用，我们不需要等待用户交互就去请求它。而是在用户进入主页和搜索页的时候就把它加入队列，如果用户在下载完成之前就请求了它，他们会看到一个 <code>&lt;Loader /&gt;</code> 直到组件可用。没毛病。</p>
<p>这种方法的最后一个好处是 <code>HomesSearch_Map</code> 成为浏览器可以缓存的命名包。当我们分解较大的基于路由的捆绑包时，应用程序中 slowly-changing 的部分在更新时保持不变，从而进一步节省了 JavaScript 下载时间。</p>
<h4 id="构建无障碍的设计语言"><a href="#构建无障碍的设计语言" class="headerlink" title="构建无障碍的设计语言"></a>构建无障碍的设计语言</h4><p>毫无疑问，它保证的是一个专有的需求，但是我们已经开始构建内部组件库，其中辅助功能被强制为一个严格的约束。在接下来的几个月中，我们将替换所有与屏幕阅读器不兼容的 UI。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div></pre></td><td class="code"><pre><div class="line">import React, &#123; PropTypes &#125; from &apos;react&apos;;</div><div class="line"></div><div class="line">import &#123; forbidExtraProps &#125; from &apos;airbnb-prop-types&apos;;</div><div class="line"></div><div class="line">import CheckBox from &apos;../CheckBox&apos;;</div><div class="line">import FlexBar from &apos;../FlexBar&apos;;</div><div class="line">import Label from &apos;../Label&apos;;</div><div class="line">import HideAt from &apos;../HideAt&apos;;</div><div class="line">import ShowAt from &apos;../ShowAt&apos;;</div><div class="line">import Spacing from &apos;../Spacing&apos;;</div><div class="line">import Text from &apos;../Text&apos;;</div><div class="line">import CheckBoxOnly from &apos;../../private/CheckBoxOnly&apos;;</div><div class="line">import toggleArrayItem from &apos;../../utils/toggleArrayItem&apos;;</div><div class="line"></div><div class="line">import ROOM_TYPES from &apos;../../constants/roomTypes&apos;;</div><div class="line"></div><div class="line">const propTypes = forbidExtraProps(&#123;</div><div class="line">  id: PropTypes.string.isRequired,</div><div class="line">  roomTypes: PropTypes.arrayOf(PropTypes.oneOf(ROOM_TYPES.map(roomType =&gt; roomType.filterKey))),</div><div class="line">  onUpdate: PropTypes.func,</div><div class="line">&#125;);</div><div class="line"></div><div class="line">const defaultProps = &#123;</div><div class="line">  roomTypes: [],</div><div class="line">  onUpdate() &#123;&#125;,</div><div class="line">&#125;;</div><div class="line"></div><div class="line">export default function RoomTypeFilter(&#123; id, roomTypes, onUpdate &#125;) &#123;</div><div class="line">  return (</div><div class="line">    &lt;div&gt;</div><div class="line">      &#123;ROOM_TYPES.map((&#123; id: roomTypeId, filterKey, iconClass: IconClass, title, subtitle &#125;) =&gt; &#123;</div><div class="line">        const inputId = `$&#123;id&#125;-$&#123;roomTypeId&#125;-Checkbox`;</div><div class="line">        const titleId = `$&#123;id&#125;-$&#123;roomTypeId&#125;-title`;</div><div class="line">        const subtitleId = `$&#123;id&#125;-$&#123;roomTypeId&#125;-subtitle`;</div><div class="line">        const selected = roomTypes.includes(filterKey);</div><div class="line">        const checkbox = (</div><div class="line">          &lt;Spacing top=&#123;0.5&#125; right=&#123;1&#125;&gt;</div><div class="line">            &lt;CheckBoxOnly</div><div class="line">              id=&#123;inputId&#125;</div><div class="line">              describedById=&#123;subtitleId&#125;</div><div class="line">              name=&#123;`$&#123;roomTypeId&#125;-only`&#125;</div><div class="line">              checked=&#123;selected&#125;</div><div class="line">              onChange=&#123;() =&gt; onUpdate(&#123; roomTypes: toggleArrayItem(roomTypes, filterKey) &#125;)&#125;</div><div class="line">            /&gt;</div><div class="line">          &lt;/Spacing&gt;</div><div class="line">        );</div><div class="line">        return (</div><div class="line">          &lt;div key=&#123;roomTypeId&#125;&gt;</div><div class="line">            &lt;ShowAt breakpoint=&quot;mediumAndAbove&quot;&gt;</div><div class="line">              &lt;Label htmlFor=&#123;inputId&#125;&gt;</div><div class="line">                &lt;FlexBar align=&quot;top&quot; before=&#123;checkbox&#125; after=&#123;&lt;IconClass size=&#123;28&#125; /&gt;&#125;&gt;</div><div class="line">                  &lt;Spacing right=&#123;2&#125;&gt;</div><div class="line">                    &lt;div id=&#123;titleId&#125;&gt;</div><div class="line">                      &lt;Text light&gt;&#123;title&#125;&lt;/Text&gt;</div><div class="line">                    &lt;/div&gt;</div><div class="line">                    &lt;div id=&#123;subtitleId&#125;&gt;</div><div class="line">                      &lt;Text small light&gt;&#123;subtitle&#125;&lt;/Text&gt;</div><div class="line">                    &lt;/div&gt;</div><div class="line">                  &lt;/Spacing&gt;</div><div class="line">                &lt;/FlexBar&gt;</div><div class="line">              &lt;/Label&gt;</div><div class="line">            &lt;/ShowAt&gt;</div><div class="line">            &lt;HideAt breakpoint=&quot;mediumAndAbove&quot;&gt;</div><div class="line">              &lt;Spacing vertical=&#123;2&#125;&gt;</div><div class="line">                &lt;CheckBox</div><div class="line">                  id=&#123;roomTypeId&#125;</div><div class="line">                  name=&#123;roomTypeId&#125;</div><div class="line">                  checked=&#123;selected&#125;</div><div class="line">                  label=&#123;title&#125;</div><div class="line">                  onChange=&#123;() =&gt; onUpdate(&#123; roomTypes: toggleArrayItem(roomTypes, filterKey) &#125;)&#125;</div><div class="line">                  subtitle=&#123;subtitle&#125;</div><div class="line">                /&gt;</div><div class="line">              &lt;/Spacing&gt;</div><div class="line">            &lt;/HideAt&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">        );</div><div class="line">      &#125;)&#125;</div><div class="line">    &lt;/div&gt;</div><div class="line">  );</div><div class="line">&#125;</div><div class="line">RoomTypeFilter.propTypes = propTypes;</div><div class="line">RoomTypeFilter.defaultProps = defaultProps;</div></pre></td></tr></table></figure>
<p>通过我们的设计语言系统加入的无障碍设计到产品的例子</p>
<p>这个 UI 非常丰富，我们希望将 CheckBox 不仅与 title 相关联，还可以使用 <code>aria-describedby</code> 与 subtitle 关联。为了实现这一点，需要 DOM 中唯一的标识符，这意味着强制关联一个必须的 ID 作为任何调用方需要提供的属性。如果一个组件被用于生产，这些是 UI 是可以强制约束类型的，它提供内置的可访问性。</p>
<p>上面的代码也演示了我们的响应式实体 HideAt 和 ShowAt，它使我们能够大幅度地改变用户在不同屏幕尺寸下的体验，而无需使用 CSS 控制隐藏和显示。这造就了更精简的页面。</p>
<h4 id="关于状态的“外科”和“哲学”"><a href="#关于状态的“外科”和“哲学”" class="headerlink" title="关于状态的“外科”和“哲学”"></a>关于状态的“外科”和“哲学”</h4><p>不涉及关于如何处理应用程序状态的争论的前端文章不是完整的前端文章。</p>
<p>我们使用 Redux 来处理所有的 API 数据和“全局”数据比如认证状态和体验配置。个人来讲我喜欢 <a href="https://github.com/lelandrichardson/redux-pack" target="_blank" rel="external">redux-pack</a> 处理异步，你会发现新大陆。</p>
<p>然而，当遇到页面上所有的复杂性——特别是围绕搜索的——对于一些像表单元素这样低级的用户交互使用 redux 就没那么好用了。我们发现无论如何优化，Redux 循环依然会造成输入体验的卡顿。</p>
<p><img src="https://cdn-images-1.medium.com/max/600/1*12LgecpKz8HA2e2evkYacw.png" alt=""></p>
<p>我们的房间类型筛选器 (代码在上面)</p>
<p>所以对于用户的所有操作我们使用组件的本地状态，除非触发路由变化或者网络请求才是用 Redux，并且我们没再遇到什么麻烦。</p>
<p>同时，我喜欢 Redux container 组件的那种感觉，并且我们即使带有本地状态，我们依然可以构建可以共享的高阶组件。一个伟大的例子就是我们的筛选功能。搜索<a href="https://www.airbnb.com/s/Detroit--MI--United-States/homes" target="_blank" rel="external">在底特律的家</a>，你会在页面上看见几个不同的面板，每一个都可以独立操作，你可以更改你的搜索条件。在不同的断点之间，实际上有几十个组件需要知道当前应用的搜索过滤器以及如何更新它们，在用户交互期间被暂时或z正式地被用户接受。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div></pre></td><td class="code"><pre><div class="line">import React, &#123; PropTypes &#125; from &apos;react&apos;;</div><div class="line">import &#123; connect &#125; from &apos;react-redux&apos;;</div><div class="line"></div><div class="line">import SearchFiltersShape from &apos;../../shapes/SearchFiltersShape&apos;;</div><div class="line">import &#123; isDirty &#125; from &apos;../utils/SearchFiltersUtils&apos;;</div><div class="line"></div><div class="line">function mapStateToProps(&#123; exploreTab &#125;) &#123;</div><div class="line">  const &#123;</div><div class="line">    responseFilters,</div><div class="line">  &#125; = exploreTab;</div><div class="line"></div><div class="line">  return &#123;</div><div class="line">    responseFilters,</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">export const withFiltersPropTypes = &#123;</div><div class="line">  stagedFilters: SearchFiltersShape.isRequired,</div><div class="line">  responseFilters: SearchFiltersShape.isRequired,</div><div class="line">  updateFilters: PropTypes.func.isRequired,</div><div class="line">  clearFilters: PropTypes.func.isRequired,</div><div class="line">&#125;;</div><div class="line"></div><div class="line">export const withFiltersDefaultProps = &#123;</div><div class="line">  stagedFilters: &#123;&#125;,</div><div class="line">  responseFilters: &#123;&#125;,</div><div class="line">  updateFilters() &#123;&#125;,</div><div class="line">  clearFilters() &#123;&#125;,</div><div class="line">&#125;;</div><div class="line"></div><div class="line">export default function withFilters(WrappedComponent) &#123;</div><div class="line">  class WithFiltersHOC extends React.Component &#123;</div><div class="line">    constructor(props) &#123;</div><div class="line">      super(props);</div><div class="line">      this.state = &#123;</div><div class="line">        stagedFilters: props.responseFilters,</div><div class="line">      &#125;;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    componentWillReceiveProps(nextProps) &#123;</div><div class="line">      if (isDirty(nextProps.responseFilters, this.props.responseFilters)) &#123;</div><div class="line">        this.setState(&#123; stagedFilters: nextProps.responseFilters &#125;);</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    render() &#123;</div><div class="line">      const &#123; responseFilters &#125; = this.props;</div><div class="line">      const &#123; stagedFilters &#125; = this.state;</div><div class="line">      return (</div><div class="line">        &lt;WrappedComponent</div><div class="line">          &#123;...this.props&#125;</div><div class="line">          stagedFilters=&#123;stagedFilters&#125;</div><div class="line">          updateFilters=&#123;(&#123; updateObj, keysToRemove &#125;, callback) =&gt; &#123;</div><div class="line">            const newStagedFilters = omit(&#123; ...stagedFilters, ...updateObj &#125;, keysToRemove);</div><div class="line">            this.setState(&#123;</div><div class="line">              stagedFilters: newStagedFilters,</div><div class="line">            &#125;, () =&gt; &#123;</div><div class="line">              if (callback) &#123;</div><div class="line">                // setState callback can be called before withFilter state</div><div class="line">                // propagates to child props.</div><div class="line">                callback(newStagedFilters);</div><div class="line">              &#125;</div><div class="line">            &#125;);</div><div class="line">          &#125;&#125;</div><div class="line">          clearFilters=&#123;() =&gt; &#123;</div><div class="line">            this.setState(&#123;</div><div class="line">              stagedFilters: responseFilters,</div><div class="line">            &#125;);</div><div class="line">          &#125;&#125;</div><div class="line">        /&gt;</div><div class="line">      );</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  const wrappedComponentName = WrappedComponent.displayName</div><div class="line">    || WrappedComponent.name</div><div class="line">    || &apos;Component&apos;;</div><div class="line"></div><div class="line">  WithFiltersHOC.WrappedComponent = WrappedComponent;</div><div class="line">  WithFiltersHOC.displayName = `withFilters($&#123;wrappedComponentName&#125;)`;</div><div class="line">  if (WrappedComponent.propTypes) &#123;</div><div class="line">    WithFiltersHOC.propTypes = &#123;</div><div class="line">      ...omit(WrappedComponent.propTypes, &apos;stagedFilters&apos;, &apos;updateFilters&apos;, &apos;clearFilters&apos;),</div><div class="line">      responseFilters: SearchFiltersShape,</div><div class="line">    &#125;;</div><div class="line">  &#125;</div><div class="line">  if (WrappedComponent.defaultProps) &#123;</div><div class="line">    WithFiltersHOC.defaultProps = &#123; ...WrappedComponent.defaultProps &#125;;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  return connect(mapStateToProps)(WithFiltersHOC);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这里我们有一个利落的技巧。每一个需要和筛选交互的组件只需被 HOC 包裹起来，你就能做到了。它甚至还有属性类型。每个组件都通过 Redux 连接到<strong>responseFilters</strong>（与当前显示的结果相关联的那些）,并同时保有一个本地 stagedFilters 状态对象用于更改。</p>
<p>通过以这种方式处理状态，与我们的价格滑块进行交互对页面的其余部分没有影响，所以表现很好。而且但所有过滤器面板都具有相同的功能签名，因此开发也很简单。</p>
<h3 id="未来做些什么"><a href="#未来做些什么" class="headerlink" title="未来做些什么?"></a>未来做些什么?</h3><p>既然现在已经良策在手，我们可以把目光转向未来。</p>
<ul>
<li><a href="https://www.ampproject.org/" target="_blank" rel="external">AMP</a> 核心预订流程中的所有页面的 AMP 版本将会实现亚秒级（某些情况下）在手机 web 上 Google 搜索的 <strong>可交互时间</strong>，通过移动网络和桌面网络，所需的许多更改将在 P50 / P90 / P95 冷负载时间内实现显着改善。</li>
<li><a href="https://developers.google.com/web/progressive-web-apps/" target="_blank" rel="external">PWA</a> 功能将实现亚秒级（在某些情况下）返回访客的<strong>可交互时间</strong>，并将打开离线优先功能的大门，因此对于具有脆弱网络连接的用户非常关键。</li>
<li>将最终的锤子应用到传统的技术/框架上将会将包大小减少一半。这不是华而不实的工作，我们最终翻出 jQuery、Alt、Bootstrap、Underscore 以及所有额外的 CSS 请求（他们使渲染停滞，并且将近 97% 的规则是不会被使用！）不仅精简了我们的代码，还精简了新员工在上升时需要学习的足迹。</li>
<li>最后，yeoman 的手动捕捉瓶颈的工作、异步加载代码在初始渲染时不可见、避免不必要的重新渲染、并降低重新渲染的成本，这些改进正是拖拉机和顶级跑车之间的区别。</li>
</ul>
<p>下次请收听我们将追逐的这些机会的成果。因为这么多的成果会有一些数量上的冲突，我们将尽量选择一些具体的成果在下篇文章中总结。</p>
<p><strong>自然，如果你欣赏本文并觉得这是一个有趣的挑战，我们一直在寻找优秀出色的人<a href="https://www.airbnb.com/careers/departments/engineering" target="_blank" rel="external">加入团队</a>。如果你只想做一些交流，那么随时可以点击我的 twitter <a href="https://twitter.com/AdamRNeary" target="_blank" rel="external">@adamrneary</a>。</strong></p>
<p>最后，深切地向 <a href="https://twitter.com/therealsalih" target="_blank" rel="external">Salih Abdul-Karim</a> 和 <a href="https://twitter.com/hugoahlberg" target="_blank" rel="external">Hugo Ahlberg</a> 两位体验设计师致敬，他们的令人动容的动画至今让我目不转睛。许多工程师在他们的领域值得赞美，作出努力人的名单难以一一列出的，但绝对包括 Nick Sorrentino、<a href="https://medium.com/@lencioni" target="_blank" rel="external">Joe Lencioni</a>、<a href="https://medium.com/@mikeland86" target="_blank" rel="external">Michael Landau</a>、Jack Zhang、Walker Henderson 和 Nico Moschopoulos.</p>
<hr>
<blockquote>
<p><a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im" target="_blank" rel="external">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android" target="_blank" rel="external">Android</a>、<a href="https://github.com/xitu/gold-miner#ios" target="_blank" rel="external">iOS</a>、<a href="https://github.com/xitu/gold-miner#react" target="_blank" rel="external">React</a>、<a href="https://github.com/xitu/gold-miner#前端" target="_blank" rel="external">前端</a>、<a href="https://github.com/xitu/gold-miner#后端" target="_blank" rel="external">后端</a>、<a href="https://github.com/xitu/gold-miner#产品" target="_blank" rel="external">产品</a>、<a href="https://github.com/xitu/gold-miner#设计" target="_blank" rel="external">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a>。</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2&quot; target=&quot;_blank&quot; rel=
    
    </summary>
    
    
      <category term="前端" scheme="http://suncafe.cc/tags/%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript算法笔记——初级篇</title>
    <link href="http://suncafe.cc/2017/05/09/Javascript%E7%AE%97%E6%B3%95%E7%AC%94%E8%AE%B0%E2%80%94%E2%80%94%E5%88%9D%E7%BA%A7%E7%AF%87/"/>
    <id>http://suncafe.cc/2017/05/09/Javascript算法笔记——初级篇/</id>
    <published>2017-05-09T14:43:32.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<h3 id="Reverse-a-String-字符串反转"><a href="#Reverse-a-String-字符串反转" class="headerlink" title="Reverse a String 字符串反转"></a>Reverse a String 字符串反转</h3><h6 id="point"><a href="#point" class="headerlink" title="point:"></a>point:</h6><ul>
<li>Global String Object</li>
<li>String.prototype.split()</li>
<li>Array.prototype.reverse()</li>
<li>Array.prototype.join()</li>
</ul>
<h6 id="code"><a href="#code" class="headerlink" title="code:"></a>code:</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">function reverseString(str) &#123;</div><div class="line">  return str.split(&quot;&quot;).reverse().join(&quot;&quot;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">reverseString(&quot;hello&quot;);</div></pre></td></tr></table></figure>
<h3 id="Factorialize-a-Number-求阶乘"><a href="#Factorialize-a-Number-求阶乘" class="headerlink" title="Factorialize a Number 求阶乘"></a>Factorialize a Number 求阶乘</h3><h6 id="point-1"><a href="#point-1" class="headerlink" title="point:"></a>point:</h6><ul>
<li>Arithmetic Operators</li>
</ul>
<h6 id="code-1"><a href="#code-1" class="headerlink" title="code:"></a>code:</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">function factorialize(num) &#123;</div><div class="line">  if (num === 0) &#123; return 1; &#125;</div><div class="line">  return num * factorialize(num-1);</div><div class="line">&#125;</div><div class="line"></div><div class="line">factorialize(5);</div></pre></td></tr></table></figure>
<h3 id="Check-for-Palindromes-回文"><a href="#Check-for-Palindromes-回文" class="headerlink" title="Check for Palindromes 回文"></a>Check for Palindromes 回文</h3><h5 id="point-2"><a href="#point-2" class="headerlink" title="point"></a>point</h5><ul>
<li>String.prototype.replace()</li>
<li>String.prototype.toLowerCase()</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">function palindrome(str) &#123;</div><div class="line">  var re = /[\W_]/g;</div><div class="line">  var lowRegStr = str.toLowerCase().replace(re, &apos;&apos;);</div><div class="line">  var reverseStr = lowRegStr.split(&apos;&apos;).reverse().join(&apos;&apos;);</div><div class="line">  return reverseStr === lowRegStr;</div><div class="line">&#125;</div><div class="line">palindrome(&quot;eye&quot;);</div></pre></td></tr></table></figure>
<h3 id="Find-the-Longest-Word-in-a-String-查找最长单词"><a href="#Find-the-Longest-Word-in-a-String-查找最长单词" class="headerlink" title="Find the Longest Word in a String 查找最长单词"></a>Find the Longest Word in a String 查找最长单词</h3><ul>
<li>String.prototype.split()</li>
<li>String.length</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">function findLongestWord(str) &#123;</div><div class="line">  return Math.max.apply(null,str.split(&quot; &quot;).map(function(one)&#123;</div><div class="line">    return one.length</div><div class="line">  &#125;))</div><div class="line">&#125;</div><div class="line"></div><div class="line">findLongestWord(&quot;The quick brown fox jumped over the lazy dog&quot;);</div></pre></td></tr></table></figure>
<h3 id="Title-Case-a-Sentence-句子变成标题"><a href="#Title-Case-a-Sentence-句子变成标题" class="headerlink" title="Title Case a Sentence   句子变成标题"></a>Title Case a Sentence   句子变成标题</h3><ul>
<li>String.prototype.split()</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">function titleCase(str) &#123;</div><div class="line">  return str.toLowerCase().split(&apos; &apos;).map(function(word) &#123;</div><div class="line">    return word.replace(word[0], word[0].toUpperCase());</div><div class="line">  &#125;).join(&apos; &apos;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">titleCase(&quot;I&apos;m a little tea pot&quot;);</div></pre></td></tr></table></figure>
<h3 id="Return-Largest-Numbers-in-Arrays-数组中的最大值"><a href="#Return-Largest-Numbers-in-Arrays-数组中的最大值" class="headerlink" title="Return Largest Numbers in Arrays 数组中的最大值"></a>Return Largest Numbers in Arrays 数组中的最大值</h3><ul>
<li>Comparison Operators<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">function largestOfFour(arr) &#123;</div><div class="line">  return arr.map(function(innerarr)&#123;</div><div class="line">    return Math.max.apply(null,innerarr)</div><div class="line">  &#125;)</div><div class="line">&#125;</div><div class="line"></div><div class="line">largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="Confirm-the-Ending-确认结尾"><a href="#Confirm-the-Ending-确认结尾" class="headerlink" title="Confirm the Ending 确认结尾"></a>Confirm the Ending 确认结尾</h3><ul>
<li>String.prototype.substr()</li>
<li>String.prototype.substring()</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">function confirmEnding(str, target) &#123;</div><div class="line">  return str.substr(-target.length)===target;</div><div class="line">&#125;</div><div class="line"></div><div class="line">confirmEnding(&quot;Bastian&quot;, &quot;n&quot;);</div></pre></td></tr></table></figure>
<h4 id="Repeat-a-string-repeat-a-string-重复字符串"><a href="#Repeat-a-string-repeat-a-string-重复字符串" class="headerlink" title="Repeat a string repeat a string 重复字符串"></a>Repeat a string repeat a string 重复字符串</h4><ul>
<li>Global String Object<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">function repeatStringNumTimes(str, num) &#123;</div><div class="line">  if(num&lt;1) return &quot;&quot; ;</div><div class="line">  return str+repeatStringNumTimes(str, num-1);</div><div class="line">&#125;</div><div class="line">repeatStringNumTimes(&quot;abc&quot;,8);</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="Repeat-a-string-repeat-a-string-重复字符串-1"><a href="#Repeat-a-string-repeat-a-string-重复字符串-1" class="headerlink" title="Repeat a string repeat a string 重复字符串"></a>Repeat a string repeat a string 重复字符串</h4><ul>
<li>Global String Object</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">function truncateString(str, num) &#123;</div><div class="line">  if (str.length &lt;= num) &#123;</div><div class="line">    return str;</div><div class="line">  &#125; else &#123;</div><div class="line">    return str.slice(0, num &gt; 3 ? num - 3 : num) + &apos;...&apos;;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">truncateString(&quot;A-tisket a-tasket A green and yellow basket&quot;, 11);</div></pre></td></tr></table></figure>
<h4 id="Chunky-Monkey-分割数组"><a href="#Chunky-Monkey-分割数组" class="headerlink" title="Chunky Monkey 分割数组"></a>Chunky Monkey 分割数组</h4><ul>
<li>Array.prototype.slice()</li>
<li>Array.prototype.splice()<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">function chunkArrayInGroups(arr, size) &#123;</div><div class="line">  var temp=[];</div><div class="line">  var newArr=[];</div><div class="line">  arr.forEach(function(item,index)&#123;</div><div class="line">    temp.push(item);</div><div class="line">    if(temp.length===size||index===arr.length-1)&#123;</div><div class="line">      newArr.push(temp);</div><div class="line">      temp=[];</div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line">  return newArr;</div><div class="line">&#125;</div><div class="line"></div><div class="line">chunkArrayInGroups([&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;], 2);</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="Mutations-字符查找"><a href="#Mutations-字符查找" class="headerlink" title="Mutations 字符查找"></a>Mutations 字符查找</h4><ul>
<li>String.prototype.indexOf()<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">function mutation(arr) &#123;</div><div class="line">  var string1=arr[0].toLowerCase();</div><div class="line">  var string2=arr[1].toLowerCase();</div><div class="line">  for(var i=0;i&lt;string2.length;i++)&#123;</div><div class="line">   if(string1.indexOf(string2[i])===-1)return false;</div><div class="line">  &#125;</div><div class="line">  return true;</div><div class="line">&#125;</div><div class="line"></div><div class="line">mutation([&quot;hello&quot;, &quot;hey&quot;]);</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="Falsy-Bouncer-过滤数组"><a href="#Falsy-Bouncer-过滤数组" class="headerlink" title="Falsy Bouncer 过滤数组"></a>Falsy Bouncer 过滤数组</h4><ul>
<li>Boolean Objects</li>
<li>Array.prototype.filter()</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">function bouncer(arr) &#123;</div><div class="line">  return arr.filter(Boolean);</div><div class="line">&#125;</div><div class="line"></div><div class="line">bouncer([7, &quot;ate&quot;, &quot;&quot;, false, 9]);</div></pre></td></tr></table></figure>
<h4 id="Seek-and-Destroy-过滤数组-转换arguments"><a href="#Seek-and-Destroy-过滤数组-转换arguments" class="headerlink" title="Seek and Destroy  过滤数组 转换arguments"></a>Seek and Destroy  过滤数组 转换arguments</h4><ul>
<li>Arguments object</li>
<li>Array.prototype.filter()<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">function destroyer(arr) &#123;</div><div class="line">  var arr2=Array.prototype.slice.call(arguments);</div><div class="line">  return arr.filter(function(item)&#123;</div><div class="line">    return arr2.slice(1).indexOf(item)===-1;</div><div class="line">  &#125;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">destroyer([1, 2, 3, 1, 2, 3], 2, 3);</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="Where-do-I-belong-排序"><a href="#Where-do-I-belong-排序" class="headerlink" title="Where do I belong 排序"></a>Where do I belong 排序</h4><ul>
<li>Array.prototype.sort()<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">function getIndexToIns(arr, num) &#123;</div><div class="line">  arr.sort(function(a, b) &#123;</div><div class="line">    return a - b;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  for (var a = 0; a &lt; arr.length; a++) &#123;</div><div class="line">    if (arr[a] &gt;= num)</div><div class="line">      return parseInt(a);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  return arr.length;</div><div class="line">&#125;</div><div class="line"></div><div class="line">getIndexToIns([40, 60], 50);</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="Caesars-Cipher-撒开密码"><a href="#Caesars-Cipher-撒开密码" class="headerlink" title="Caesars Cipher 撒开密码"></a>Caesars Cipher 撒开密码</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">function rot13(str) &#123;</div><div class="line">  var rotCharArray = [];</div><div class="line">  var regEx = /[A-Z]/ ;</div><div class="line">  str = str.split(&quot;&quot;);</div><div class="line">  for (var x in str) &#123;</div><div class="line">    if (regEx.test(str[x])) &#123;</div><div class="line">      // A more general approach</div><div class="line">      // possible because of modular arithmetic</div><div class="line">      // and cyclic nature of rot13 transform</div><div class="line">      rotCharArray.push((str[x].charCodeAt() - 65 + 13) % 26 + 65);</div><div class="line">    &#125; else &#123;</div><div class="line">      rotCharArray.push(str[x].charCodeAt());</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">  str = String.fromCharCode.apply(String, rotCharArray);</div><div class="line">  return str;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;Reverse-a-String-字符串反转&quot;&gt;&lt;a href=&quot;#Reverse-a-String-字符串反转&quot; class=&quot;headerlink&quot; title=&quot;Reverse a String 字符串反转&quot;&gt;&lt;/a&gt;Reverse a String 字符串
    
    </summary>
    
    
      <category term="JavaScript" scheme="http://suncafe.cc/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>函数式程序员的JavaScript简介(软件编写)（第三部分）</title>
    <link href="http://suncafe.cc/2017/04/18/%5B%E8%AF%91%5D%20%E5%87%BD%E6%95%B0%E5%BC%8F%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%20JavaScript%20%E7%AE%80%E4%BB%8B%20(%E8%BD%AF%E4%BB%B6%E7%BC%96%E5%86%99)%EF%BC%88%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%EF%BC%89/"/>
    <id>http://suncafe.cc/2017/04/18/[译] 函数式程序员的 JavaScript 简介 (软件编写)（第三部分）/</id>
    <published>2017-04-18T15:54:12.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30" target="_blank" rel="external">A Functional Programmer’s Introduction to JavaScript (Composing Software)(part 3)</a></li>
<li>原文作者：<a href="https://medium.com/@_ericelliott?source=post_header_lockup" target="_blank" rel="external">Eric Elliott</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>译者：<a href="http://suncafe.cc">sunui</a></li>
<li>校对者：<a href="https://github.com/Aladdin-ADD" target="_blank" rel="external">Aladdin-ADD</a>、<a href="https://github.com/avocadowang" target="_blank" rel="external">avocadowang</a></li>
</ul>
</blockquote>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg"></p>
<p>烟雾艺术魔方 — MattysFlicks — (CC BY 2.0)</p>
<blockquote>
<p>注意：这是“软件编写”系列文章的第三部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 <a href="https://en.wikipedia.org/wiki/Composability" target="_blank" rel="external">Composability</a>）。后续还有更多精彩内容，敬请期待！<br><a href="https://github.com/gy134340/gold-miner/blob/69bca85e75f4b99b33c193c21f577db93622ee8b/TODO/why-learn-functional-programming-in-javascript-composing-software.md" target="_blank" rel="external">&lt; 上一篇</a>  | <a href="https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md" target="_blank" rel="external">&lt;&lt;第一篇</a>  | <a href="https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md" target="_blank" rel="external">下一篇 &gt;</a></p>
</blockquote>
<p>对于不熟悉 JavaScript 或 ES6+ 的同学，这里做一个简短的介绍。无论你是 JavaScript 开发新手还是有经验的老兵，你都可能学到一些新东西。以下内容仅是浅尝辄止，吊吊大家的兴致。如果想知道更多，还需深入学习。敬请期待吧。</p>
<p>学习编程最好的方法就是动手编程。我建议您使用交互式 JavaScript 编程环境（如 <a href="https://codepen.io/" target="_blank" rel="external">CodePen</a> 或 <a href="https://babeljs.io/repl/" target="_blank" rel="external">Babel REPL</a>）。</p>
<p>或者，您也可以使用 Node 或浏览器控制台 REPL。</p>
<h3 id="表达式和值"><a href="#表达式和值" class="headerlink" title="表达式和值"></a>表达式和值</h3><p>表达式是可以求得数据值的代码块。</p>
<p>下面这些都是 JavaScript 中合法的表达式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">7;</div><div class="line"></div><div class="line">7 + 1; // 8</div><div class="line"></div><div class="line">7 * 2; // 14</div><div class="line"></div><div class="line">&apos;Hello&apos;; // Hello</div></pre></td></tr></table></figure>
<p>表达式的值可以被赋予一个名称。执行此操作时，表达式首先被计算，取得的结果值被赋值给该名称。对于这一点我们将使用 <code>const</code> 关键字。这不是唯一的方式，但这将是你使用最多的，所以目前我们就可以坚持使用 <code>const</code>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const hello = &apos;Hello&apos;;</div><div class="line">hello; // Hello</div></pre></td></tr></table></figure>
<h3 id="var、let-和-const"><a href="#var、let-和-const" class="headerlink" title="var、let 和 const"></a>var、let 和 const</h3><p>JavaScript 支持另外两种变量声明关键字：<code>var</code>，还有 <code>let</code>。我喜欢根据选择的顺序来考虑它们。默认情况下，我选择最严格的声明方式：<code>const</code>。用 <code>const</code> 关键字声明的变量不能被重新赋值。最终值必须在声明时分配。这可能听起来很严格，但限制是一件好事。这是个标识在提醒你“赋给这个名称的值将不会改变”。它可以帮你全面了解这个名称的意义，而无需阅读整个函数或块级作用域。</p>
<p>有时，给变量重新赋值很有用。比如，如果你正在写一个手动的强制性迭代，而不是一个更具功能性的方法，你可以迭代一个用 <code>let</code> 赋值的计数器。</p>
<p>因为 <code>var</code> 能告诉你很少关于这个变量的信息，所以它是最无力的声明标识。自从开始用 ES6，我就再也没在实际软件项目中有意使用 <code>var</code> 作声明了。</p>
<p>注意一下，一个变量一旦用 <code>let</code> 或 <code>const</code> 声明，任何再次声明的尝试都将导致报错。如果你在 REPL（读取-求值-输出循环）环境中更喜欢多一些实验性和灵活性，那么建议你使用 <code>var</code> 声明变量，与 <code>let</code> 和 <code>const</code> 不同，使用 <code>var</code> 重新声明变量是合法的。</p>
<p>本文将使用 const 来让您习惯于为实际程序中用 <code>const</code>，而出于试验的目的自由切换回 <code>var</code>。</p>
<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><p>目前为止我们见到了两种数据类型：数字和字符串。JavaScript 也有布尔值（<code>true</code> 或 <code>false</code>）、数组、对象等。稍后我们再看其他类型。</p>
<p>数组是一系列值的有序列表。可以把它比作一个能够装很多元素的容器。这是一个数组字面量：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">[1, 2, 3];</div></pre></td></tr></table></figure>
<p>当然，它也是一个可被赋予名称的表达式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">const arr = [1, 2, 3];</div></pre></td></tr></table></figure>
<p>在 JavaScript 中，对象是一系列键值对的集合。它也有字面量：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">  key: &apos;value&apos;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>当然，你也可以给对象赋予名称：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">const foo = &#123;</div><div class="line">  bar: &apos;bar&apos;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>如果你想将现有变量赋值给同名的对象属性，这有个捷径。你可以仅输入变量名，而不用同时提供一个键和一个值：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">const a = &apos;a&apos;;</div><div class="line">const oldA = &#123; a: a &#125;; // 长而冗余的写法</div><div class="line">const oA = &#123; a &#125;; // 短小精悍！</div></pre></td></tr></table></figure>
<p>为了好玩而已，让我们再来一次：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const b = &apos;b&apos;;</div><div class="line">const oB = &#123; b &#125;;</div></pre></td></tr></table></figure>
<p>对象可以轻松合并到新的对象中：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">const c = &#123;...oA, ...oB&#125;; // &#123; a: &apos;a&apos;, b: &apos;b&apos; &#125;</div></pre></td></tr></table></figure>
<p>这些点是对象扩展运算符。它迭代 <code>oA</code> 的属性并分配到新的对象中，<code>oB</code> 也是一样，在新对象中已经存在的键都会被重写。在撰写本文时，对象扩展是一个新的试验特性，可能还没有被所有主流浏览器支持，但如果你那不能用，还可以用 <code>Object.assign()</code> 替代：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">const d = Object.assign(&#123;&#125;, oA, oB); // &#123; a: &apos;a&apos;, b: &apos;b&apos; &#125;</div></pre></td></tr></table></figure>
<p>这个 <code>Object.assign()</code> 的例子代码很少，如果你想合并很多对象，它甚至可以节省一些打字。注意当你使用 <code>Object.assign()</code> 时，你必须传一个目标对象作为第一个参数。它就是那个源对象的属性将被复制过去的对象。如果你忘了传，第一个参数传递的对象将被改变。</p>
<p>以我的经验，改变一个已经存在的对象而不创建一个新的对象常常引发 bug。至少至少，它很容易出错。要小心使用 <code>Object.assign()</code>。</p>
<h3 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h3><p>对象和数组都支持解构，这意味着你可以从中提取值分配给命过名的变量：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">const [t, u] = [&apos;a&apos;, &apos;b&apos;];</div><div class="line">t; // &apos;a&apos;</div><div class="line">u; // &apos;b&apos;</div><div class="line"></div><div class="line">const blep = &#123;</div><div class="line">  blop: &apos;blop&apos;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">// 下面等同于：</div><div class="line">// const blop = blep.blop;</div><div class="line">const &#123; blop &#125; = blep;</div><div class="line">blop; // &apos;blop&apos;</div></pre></td></tr></table></figure>
<p>和上面数组的例子类似，你可以一次解构多次分配。下面这行你在大量的 Redux 项目中都能见到。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">const &#123; type, payload &#125; = action;</div></pre></td></tr></table></figure>
<p>下面是它在一个 reducer（后面的话题再详细说） 的上下文中的使用方法。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">const myReducer = (state = &#123;&#125;, action = &#123;&#125;) =&gt; &#123;</div><div class="line">  const &#123; type, payload &#125; = action;</div><div class="line">  switch (type) &#123;</div><div class="line">    case &apos;FOO&apos;: return Object.assign(&#123;&#125;, state, payload);</div><div class="line">    default: return state;</div><div class="line">  &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>如果不想为新绑定使用不同的名称，你可以分配一个新名称：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const &#123; blop: bloop &#125; = blep;</div><div class="line">bloop; // &apos;blop&apos;</div></pre></td></tr></table></figure>
<p>读作：把 <code>blep.blop</code> 分配给 <code>bloop</code>。</p>
<h3 id="比较运算符和三元表达式"><a href="#比较运算符和三元表达式" class="headerlink" title="比较运算符和三元表达式"></a>比较运算符和三元表达式</h3><p>你可以用严格的相等操作符（有时称为“三等于”）来比较数据值：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">3 + 1 === 4; // true</div></pre></td></tr></table></figure>
<p>还有另外一种宽松的相等操作符。它正式地被称为“等于”运算符。非正式地可以叫“双等于”。双等于有一两个有效的用例，但大多数时候默认使用 <code>===</code> 操作符是更好的选择。</p>
<p>其它比较操作符有:</p>
<ul>
<li><code>&gt;</code> 大于</li>
<li><code>&lt;</code> 小于</li>
<li><code>&gt;=</code> 大于或等于</li>
<li><code>&lt;=</code> 小于或等于</li>
<li><code>!=</code> 不等于</li>
<li><code>!==</code> 严格不等于</li>
<li><code>&amp;&amp;</code> 逻辑与</li>
<li><code>||</code> 逻辑或</li>
</ul>
<p>三元表达式是一个可以让你使用一个比较器来问问题的表达式，运算出的不同答案取决于表达式是否为真:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">14 - 7 === 7 ? &apos;Yep!&apos; : &apos;Nope.&apos;; // Yep!</div></pre></td></tr></table></figure>
<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><p>JavaScript 支持函数表达式，函数可以这样分配名称：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">const double = x =&gt; x * 2;</div></pre></td></tr></table></figure>
<p>这和数学表达式 <code>f(x) = 2x</code> 是一个意思。大声说出来，这个函数读作 <code>x</code> 的 <code>f</code> 等于 <code>2x</code>。这个函数只有当你用一个具体的 <code>x</code> 的值应用它的时候才有意思。在其它方程式里面你写 <code>f(2)</code>，就等同于 <code>4</code>。</p>
<p>换种说话就是 <code>f(2) = 4</code>。您可以将数学函数视为从输入到输出的映射。这个例子里 <code>f(x)</code> 是输入数值 <code>x</code> 到相应的输出数值的映射，等于输入数值和 <code>2</code> 的乘积。</p>
<p>在 JavaScript 中，函数表达式的值是函数本身：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">double; // [Function: double]</div></pre></td></tr></table></figure>
<p>你可以使用 <code>.toString()</code> 方法看到这个函数的定义。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">double.toString(); // &apos;x =&gt; x * 2&apos;</div></pre></td></tr></table></figure>
<p>如果要将函数应用于某些参数，则必须使用函数调用来调用它。函数调用会接收参数并且计算一个返回值。</p>
<p>你可以使用 <code>&lt;functionName&gt;(argument1, argument2, ...rest)</code> 调用一个函数。比如调用我们的 double 函数，就加一对括号并传进去一个值：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">double(2); // 4</div></pre></td></tr></table></figure>
<p>和一些函数式语言不同，这对括号是有意义的。没有它们，函数将不会被调用。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">double 4; // SyntaxError: Unexpected number</div></pre></td></tr></table></figure>
<h3 id="签名"><a href="#签名" class="headerlink" title="签名"></a>签名</h3><p>函数的签名可以包含以下内容：</p>
<ol>
<li>一个 <strong>可选的</strong> 函数名。</li>
<li>在括号里的一组参数。 参数的命名是可选的。</li>
<li>返回值的类型。</li>
</ol>
<p>JavaScript 的签名无需指定类型。JavaScript 引擎将会在运行时断定类型。如果你提供足够的线索，签名信息也可以通过开发工具推断出来，比如一些 IDE（集成开发环境）和使用数据流分析的 <a href="http://ternjs.net/" target="_blank" rel="external">Tern.js</a>。</p>
<p>JavaScript 缺少它自己的函数签名语法，所以有几个竞争标准：JSDoc 在历史上非常流行，但它太过笨拙臃肿，没有人会不厌其烦地维护更新文档与代码同步，所以很多 JS 开发者都弃坑了。</p>
<p>TypeScript 和 Flow 是目前的大竞争者。这二者都不能让我确定地知道怎么表达我需要的一切，所以我使用 <a href="https://github.com/ericelliott/rtype" target="_blank" rel="external">Rtype</a>，仅仅用于写文档。一些人倒退回 Haskell 的 curry-only <a href="http://web.cs.wpi.edu/~cs4536/c12/milner-damas_principal_types.pdf" target="_blank" rel="external">Hindley–Milner 类型系统</a>。如果仅用于文档，我很乐意看到 JavaScript 能有一个好的标记系统标准，但目前为止，我觉得当前的解决方案没有能胜任这个任务的。现在，怪异的类型标记即使和你在用的不尽相同，也就将就先用着吧。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">functionName(param1: Type, param2: Type) =&gt; Type</div></pre></td></tr></table></figure>
<p>double 函数的签名是：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">double(x: n) =&gt; n</div></pre></td></tr></table></figure>
<p>尽管事实上 JavaScript 不需要注释签名，知道何为签名和它意味着什么依然很重要，它有助于你高效地交流函数是如何使用和如何构建的。大多数可重复使用的函数构建工具都需要你传入同样类型签名的函数。</p>
<h3 id="默认参数值"><a href="#默认参数值" class="headerlink" title="默认参数值"></a>默认参数值</h3><p>JavaScript 支持默认参数值。下面这个函数类似一个恒等函数（以你传入参数为返回值的函数），一旦你用 <code>undefined</code> 调用它，或者根本不传入参数——它就会返回 0，来替代：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">const orZero = (n = 0) =&gt; n;</div></pre></td></tr></table></figure>
<p>如上，若想设置默认值，只需在传入参数时带上 <code>=</code> 操作符，比如 <code>n = 0</code>。当你用这种方式传入默认值，像 <a href="http://ternjs.net/" target="_blank" rel="external">Tern.js</a>、Flow、或者 TypeScript 这些类型检测工具可以自行推断函数的类型签名，甚至你不需要刻意声明类型注解。</p>
<p>结果就是这样，在你的编辑器或者 IDE 中安装正确的插件，在你输入函数调用时，你可以看见内联显示的函数签名。依据它的调用签名，函数的使用方法也一目了然。无论起不起作用，使用默认值可以让你写出更具可读性的代码。</p>
<blockquote>
<p>注意： 使用默认值的参数不会增加函数的 <code>.length</code> 属性，比如使用依赖 <code>.length</code> 值的自动柯里化会抛出不可用异常。如果你碰上它，一些柯里化工具（比如 <code>lodash/curry</code>）允许你传入自定义参数来绕开这个限制。</p>
</blockquote>
<h3 id="命名参数"><a href="#命名参数" class="headerlink" title="命名参数"></a>命名参数</h3><p>JavaScript 函数可以传入对象字面量作为参数，并且使用对象解构来分配参数标识，这样做可以达到命名参数的同样效果。注意，你也可以使用默认参数特性传入默认值。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">const createUser = (&#123;</div><div class="line">  name = &apos;Anonymous&apos;,</div><div class="line">  avatarThumbnail = &apos;/avatars/anonymous.png&apos;</div><div class="line">&#125;) =&gt; (&#123;</div><div class="line">  name,</div><div class="line">  avatarThumbnail</div><div class="line">&#125;);</div><div class="line"></div><div class="line">const george = createUser(&#123;</div><div class="line">  name: &apos;George&apos;,</div><div class="line">  avatarThumbnail: &apos;avatars/shades-emoji.png&apos;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">george;</div><div class="line">/*</div><div class="line">&#123;</div><div class="line">  name: &apos;George&apos;,</div><div class="line">  avatarThumbnail: &apos;avatars/shades-emoji.png&apos;</div><div class="line">&#125;</div><div class="line">*/</div></pre></td></tr></table></figure>
<h3 id="剩余和展开"><a href="#剩余和展开" class="headerlink" title="剩余和展开"></a>剩余和展开</h3><p>JavaScript 中函数共有的一个特性是可以在函数参数中使用剩余操作符 <code>...</code> 来将一组剩余的参数聚集到一起。</p>
<p>例如下面这个函数简单地丢弃第一个参数，返回其余的参数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const aTail = (head, ...tail) =&gt; tail;</div><div class="line">aTail(1, 2, 3); // [2, 3]</div></pre></td></tr></table></figure>
<p>剩余参数将各个元素组成一个数组。而展开操作恰恰相反：它将一个数组中的元素扩展为独立元素。研究一下这个：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const shiftToLast = (head, ...tail) =&gt; [...tail, head];</div><div class="line">shiftToLast(1, 2, 3); // [2, 3, 1]</div></pre></td></tr></table></figure>
<p>JavaScript 数组在使用扩展操作符的时候会调用一个迭代器，对于数组中的每一个元素，迭代器都会传递一个值。在 <code>[...tail, head]</code> 表达式中，迭代器按顺序从 <code>tail</code> 数组中拷贝到一个刚刚创建的新的数组。之前 head 已经是一个独立元素了，我们只需把它放到数组的末端，就完成了。</p>
<h3 id="柯里化"><a href="#柯里化" class="headerlink" title="柯里化"></a>柯里化</h3><p>可以通过返回另一个函数来实现柯里化（Curry）和偏应用（partial application）：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const highpass = cutoff =&gt; n =&gt; n &gt;= cutoff;</div><div class="line">const gt4 = highpass(4); // highpass() 返回了一个新函数</div></pre></td></tr></table></figure>
<p>你可以不使用箭头函数。JavaScript 也有一个 <code>function</code> 关键字。我们使用箭头函数是因为 <code>function</code> 关键字需要打更多的字。<br>这种写法和上面的 <code>highPass()</code> 定义是一样的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">const highpass = function highpass(cutoff) &#123;</div><div class="line">  return function (n) &#123;</div><div class="line">    return n &gt;= cutoff;</div><div class="line">  &#125;;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>JavaScript 中箭头的大致意义就是“函数”。使用不同种的方式声明，函数行为会有一些重要的不同点（<code>=&gt;</code> 缺少了它自己的 <code>this</code> ，不能作为构造函数），但当我们遇见那就知道不同之处了。现在，当你看见 <code>x =&gt; x</code>，想到的是 “一个携带 <code>x</code> 并且返回 <code>x</code> 的函数”。所以 <code>const highpass = cutoff =&gt; n =&gt; n &gt;= cutoff;</code> 可以这样读：</p>
<p>“<code>highpass</code> 是一个携带 <code>cutoff</code> 返回一个携带 <code>n</code> 并返回结果 <code>n &gt;= cutoff</code> 的函数的函数”</p>
<p>既然 <code>highpass()</code> 返回一个函数，你可以使用它创建一个更独特的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">const gt4 = highpass(4);</div><div class="line"></div><div class="line">gt4(6); // true</div><div class="line">gt4(3); // false</div></pre></td></tr></table></figure>
<p>自动柯里化函数，有利于获得最大的灵活性。比如你有一个函数 <code>add3()</code>:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">const add3 = curry((a, b, c) =&gt; a + b + c);</div></pre></td></tr></table></figure>
<p>使用自动柯里化，你可以有很多种不同方法使用它，它将根据你传入多少个参数返回正确结果：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">add3(1, 2, 3); // 6</div><div class="line">add3(1, 2)(3); // 6</div><div class="line">add3(1)(2, 3); // 6</div><div class="line">add3(1)(2)(3); // 6</div></pre></td></tr></table></figure>
<p>令 Haskell 粉遗憾的是，JavaScript 没有内置自动柯里化机制，但你可以从 Lodash 引入：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install --save lodash</div></pre></td></tr></table></figure>
<p>然后在你的模块里:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">import curry from &apos;lodash/curry&apos;;</div></pre></td></tr></table></figure>
<p>或者你可以使用下面这个魔性写法:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">// 精简的递归自动柯里化</div><div class="line">const curry = (</div><div class="line">  f, arr = []</div><div class="line">) =&gt; (...args) =&gt; (</div><div class="line">  a =&gt; a.length === f.length ?</div><div class="line">    f(...a) :</div><div class="line">    curry(f, a)</div><div class="line">)([...arr, ...args]);</div></pre></td></tr></table></figure>
<h3 id="函数组合"><a href="#函数组合" class="headerlink" title="函数组合"></a>函数组合</h3><p>当然你能够开始组合函数了。组合函数是传入一个函数的返回值作为参数给另一个函数的过程。用数学符号标识：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">f . g</div></pre></td></tr></table></figure>
<p>翻译成 JavaScript:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">f(g(x))</div></pre></td></tr></table></figure>
<p>这是从内到外地求值：</p>
<ol>
<li><code>x</code> 是被求数值</li>
<li><code>g()</code> 应用给 <code>x</code></li>
<li><code>f()</code> 应用给 <code>g(x)</code> 的返回值</li>
</ol>
<p>例如:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const inc = n =&gt; n + 1;</div><div class="line">inc(double(2)); // 5</div></pre></td></tr></table></figure>
<p>数值 <code>2</code> 被传入 <code>double()</code>，求得 <code>4</code>。 <code>4</code> 被传入 <code>inc()</code> 求得 <code>5</code>。</p>
<p>你可以给函数传入任何表达式作为参数。表达式在函数应用之前被计算:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">inc(double(2) * double(2)); // 17</div></pre></td></tr></table></figure>
<p>既然 <code>double(2)</code> 求得 <code>4</code>，你可以读作 <code>inc(4 * 4)</code>，然后计算得 <code>inc(16)</code>，然后求得 <code>17</code>。</p>
<p>函数组合是函数式编程的核心。我们后面还会介绍很多。</p>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><p>数组有一些内置方法。方法是指对象关联的函数，通常是这个对象的属性：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const arr = [1, 2, 3];</div><div class="line">arr.map(double); // [2, 4, 6]</div></pre></td></tr></table></figure>
<p>这个例子里，<code>arr</code> 是对象，<code>.map()</code> 是一个以函数为值的对象属性。当你调用它，这个函数会被应用给参数，和一个特别的参数叫做 <code>this</code>，<code>this</code> 在方法被调用之时自动设置。这个 <code>this</code> 的存在使 <code>.map()</code> 能够访问数组的内容。</p>
<p>注意我们传递给 <code>map</code> 的是 <code>double</code> 函数而不是直接调用。因为 <code>map</code> 携带一个函数作为参数并将函数应用给数组的每一个元素。它返回一个包含了 <code>double()</code> 返回值的新的数组。</p>
<p>注意原始的 <code>arr</code> 值没有改变：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">arr; // [1, 2, 3]</div></pre></td></tr></table></figure>
<h3 id="方法链"><a href="#方法链" class="headerlink" title="方法链"></a>方法链</h3><p>你也可以链式调用方法。方法链是指在函数返回值上直接调用方法的过程，在此期间不需要给返回值命名：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">const arr = [1, 2, 3];</div><div class="line">arr.map(double).map(double); // [4, 8, 12]</div></pre></td></tr></table></figure>
<p>返回布尔值（<code>true</code> 或 <code>false</code>）的函数叫做 <strong>断言</strong>（predicate）。<code>.filter()</code> 方法携带断言并返回一个新的数组，新数组中只包含传入断言函数（返回 <code>true</code>）的元素：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">[2, 4, 6].filter(gt4); // [4, 6]</div></pre></td></tr></table></figure>
<p>你常常会想要从一个列表选择一些元素，然后把这些元素序列化到一个新列表中：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">[2, 4, 6].filter(gt4).map(double); [8, 12]</div></pre></td></tr></table></figure>
<p>注意：后面的文章你将看到使用叫做 <strong>transducer</strong> 东西更高效地同时选择元素并序列化，不过这之前还有一些其他东西要了解。</p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>如果你现在有点发懵，不必担心。我们仅仅概览了一下很多事情的表面，它们尚需大量的解释和总结。很快我们就会回过头来，深入探讨其中的一些话题。</p>
<p><a href="https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md" target="_blank" rel="external"><strong>继续阅读 “高阶函数”…</strong></a></p>
<h3 id="接下来"><a href="#接下来" class="headerlink" title="接下来"></a>接下来</h3><p>想要学习更多 JavaScript 函数式编程知识？</p>
<p><a href="http://ericelliottjs.com/product/lifetime-access-pass/" target="_blank" rel="external">和 Eric Elliott 一起学习 JavaScript</a>。 如果你不是其中一员，千万别错过！</p>
<p><a href="https://ericelliottjs.com/product/lifetime-access-pass/" target="_blank" rel="external"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
</a></p>
<p><strong><em>Eric Elliott</em></strong> 是 <a href="http://pjabook.com" target="_blank" rel="external"><em>“JavaScript 应用程序设计”</em></a>  (O’Reilly) 以及 <a href="http://ericelliottjs.com/product/lifetime-access-pass/" target="_blank" rel="external"><em>“和 Eric Elliott 一起学习 JavaScript”</em></a> 的作者。 曾就职于 <strong>Adobe Systems、Zumba Fitness、The Wall Street Journal、ESPN、BBC and top recording artists including Usher、Frank Ocean、Metallica</strong> 等公司，具有丰富的软件实践经验。</p>
<p><strong>他大多数时间在 San Francisco By Area ，和世界上最美丽的姑娘在一起。</strong></p>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-softwa
    
    </summary>
    
    
      <category term="JavaScript" scheme="http://suncafe.cc/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>写给“老派” Web开发者的“现代”JavaScript指南</title>
    <link href="http://suncafe.cc/2017/04/11/%5B%E8%AF%91%5D%20%E5%86%99%E7%BB%99%E2%80%9C%E8%80%81%E6%B4%BE%E2%80%9D%20Web%20%E5%BC%80%E5%8F%91%E8%80%85%E7%9A%84%E2%80%9C%E7%8E%B0%E4%BB%A3%E2%80%9D%20JavaScript%20%E6%8C%87%E5%8D%97/"/>
    <id>http://suncafe.cc/2017/04/11/[译] 写给“老派” Web 开发者的“现代” JavaScript 指南/</id>
    <published>2017-04-11T13:24:32.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://trackchanges.postlight.com/modern-javascript-for-ancient-web-developers-58e7cae050f9#.ibsx51ylz" target="_blank" rel="external">Modern JavaScript for Ancient Web Developers</a></li>
<li>原文作者：<a href="https://trackchanges.postlight.com/@ginatrapani?source=post_header_lockup" target="_blank" rel="external">Gina Trapani</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>译者：<a href="http://suncafe.cc">suncafe</a></li>
<li>校对者：<a href="https://github.com/xilihuasi" target="_blank" rel="external">xilihuasi</a>、 <a href="https://github.com/reid3290" target="_blank" rel="external">Reid</a></li>
</ul>
</blockquote>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*_5XMNVNbpIDCDHU1YXZPyA.png"></p>
<p>用 JavaScript 学习 JavaScript。图片来自 <a href="https://github.com/workshopper/learnyounode" target="_blank" rel="external">learnyounode</a>。</p>
<p>有这样一种守旧的后端 web 开发者，他们很久以前就掌握了诸如 Perl 、Python、PHP 或 Java Server Pages 一类的东西，甚至还掌握了 Rails 或者 Django。他们使用巨大的关系型数据库构建 JSON API 服务，呃甚至是 XML。</p>
<p>他是个<strong>后端</strong>开发者， 因此对他而言，JavaScript 一直只是个可以添加一些前端花招，使网页上的东西变色的有趣小玩具。如果说 JavaScript 真的很有用，那也不过是给表单添加验证，以防止错误的数据进入数据库。八年前 <a href="https://twitter.com/ginatrapani/status/3252157585" target="_blank" rel="external">jQuery 让这个人十分震惊</a>。JavaScript 本身依然是可以被容忍但从未被接纳的语言。</p>
<p> 随后 JavaScript 及其现代框架侵蚀了后端、前端和他们之间的一切，对于 JavaScript 开发者而言，2017年正是重新成为一个全新 web 开发者的时刻。</p>
<p>Hi.我是一个正在学习现代 JavaScript 的“老派” web 开发者。我才刚刚起步玩得也还算尽兴，当然也踩了一些坑。有一些现代 JavaScript 的概念我希望我能在开始学习之前就融会贯通。</p>
<p>在旧编程语言的惯性思维模式之上学习一个新的生态系统，我在心态和期望方面得做下面一些改变。</p>
<h3 id="转移目标-jS"><a href="#转移目标-jS" class="headerlink" title="转移目标 (.jS)"></a>转移目标 (.jS)</h3><p>现代 JS 的特点就是朝气蓬勃和发展迅速，所以很容易就选择了过时的框架、模板引擎、构建工具、 教程或者已经不是最佳实践的技术。（如果真有一个被广泛接受的最佳实践的概念的话）</p>
<p>这种情况下，就有必要向你身边的 JavaScript 工程师朋友伸手求助了，和他们聊一聊你的技术路线。我很荣幸在 Postlight 得到了工程师朋友(特别是 <a href="https://medium.com/@mutewinter" target="_blank" rel="external">Jeremy Mack</a>)的精湛指导，感谢他们容忍我无穷无尽的问题。</p>
<p>我要说的是，学习现代的 JavaScript 需要人为干预。事物还在不断发展变化，各种教程尚未成熟和定型，所谓最佳实践也未形成正式规范。如果你身边没有大牛，那么至少也得检查 Medium 上文章或教程的日期，或 GitHub 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。</p>
<h3 id="新的问题，而不是已经确定的解决方案"><a href="#新的问题，而不是已经确定的解决方案" class="headerlink" title="新的问题，而不是已经确定的解决方案"></a>新的问题，而不是已经确定的解决方案</h3><p>走类似这样的路线：当你在学习现代 JavaScript 时，你遇到的问题的解决方案还在渐渐得到解决，这正是一个好机会。事实上，很可能仅仅差一次 code review，你在使用这个包时就可以修复问题。</p>
<p>当你在使用一种像 PHP 这样的古老的语言的时候，你可以 Google 一个提问或者问题，几乎百分之百能找到一个 5 年前的 Stack Overflow 回答来解决它，或者你能在（详尽的、大量评论的、无与伦比的）<a href="http://docs.php.net/docs.php" target="_blank" rel="external">文档</a>里找到整个描述。</p>
<p>现代 JavaScript 就并非如此了。 我曾经徜徉在 GitHub issues 和源码的时候不止一次找到的都是一些过时的文档。剖析 GitHub 版本库是学习和使用各种包的一部分，而且对于我这样的“老派人”，差之毫厘的学习总是令人迷惑。</p>
<h3 id="工具过载"><a href="#工具过载" class="headerlink" title="工具过载"></a>工具过载</h3><p>在 2017 年学习 JavaScript 还有另一个不一样的地方：创建程序花费的时间感觉和写应用的时间一样多。需要以“正确的方式”去做的工具、插件、软件包和依赖以及编辑器配置和构建配置所需的绝对数量足以使你在启动项目之前望而却步。</p>
<p><a href="https://twitter.com/capndesign/status/832638513048850433/photo/1" target="_blank" rel="external"><img src="https://user-gold-cdn.xitu.io/2017/4/10/7aae3b939a650e882bf4e264d9930d03.png" alt="Markdown"></a></p>
<p><strong>不要因此止步不前</strong>。我不得不放手去做，从起步到正确配置，允许自己的不完美甚至一些业余，只为舒适地使用自己的工具。（我不会告诉你我曾用 <a href="https://nodemon.io/" target="_blank" rel="external">nodemon</a> 做代码检查）随后我会找到更好的方法并且在每个新项目中纳入进来。</p>
<p>这方面 JS 还有大量的工作要做。现代 JavaScript 领域依然是不断变化的，但我一个现代 JS 工程师亲友告诉我，<a href="https://github.com/verekia/js-stack-from-scratch" target="_blank" rel="external">这份来自 Jonathan Verrecchia 的教程</a>是目前构建一个当代 JavaScript 栈的不二之选。对，就是现在。</p>
<p><a href="https://github.com/verekia/js-stack-from-scratch" target="_blank" rel="external"><img src="https://user-gold-cdn.xitu.io/2017/4/10/a22c67eb87f4b7f39747baeb6c2b8294.png" alt="Markdown"></a></p>
<h3 id="教程-项目-舍弃-重复"><a href="#教程-项目-舍弃-重复" class="headerlink" title="教程 / 项目 / 舍弃 / 重复"></a>教程 / 项目 / 舍弃 / 重复</h3><p>无论学习什么语言都要经历写代码 - 舍弃 - 写更多代码这个过程。我的现代 JavaScript 学习经历已经成为一个个教程组成的阶梯，然后做一个小巧简单的项目，期间总结出现的疑问和困惑列出清单。然后和我的同事碰头以获得答案和解释，然后刷更多的教程，然后做一个稍微大一些的项目，更多的问题，再碰头，如此重复。</p>
<p>这是迄今为止我在这个过程中经历过的一些研讨会和教程的不完整列表。</p>
<ul>
<li><a href="https://github.com/workshopper/how-to-npm" target="_blank" rel="external">HOW-TO-NPM</a> —— npm 是 JavaScript 的包管理器。即使在学习这个教程之前我已经敲打过上千次 “npm install”，但是知道学完这个我才知道 npm 做的所有事情。（在很多项目中我已经转移使用 <a href="https://github.com/yarnpkg/yarn" target="_blank" rel="external">yarn</a>，而不是 npm，但所有的概念都是相通的）</li>
</ul>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*0NydvP4xLtp13z_HE2Xqyw.png"></p>
<p><code>npm i -g how-to-npm</code></p>
<ul>
<li><p><a href="https://github.com/workshopper/learnyounode" target="_blank" rel="external">learnyounode</a>——我打算专注于服务端 JavaScript，因为那有令我安逸的东西，那就是 Node.js。Learnyounode 是一个交互式教程，结构上类似 how-to-npm。</p>
</li>
<li><p><a href="https://github.com/azat-co/expressworks" target="_blank" rel="external">expressworks</a> —— 和前面两个项目类似，Expressworks 是 Express.js 的介绍，一个 Node.js 的 web 框架。在 Postlight 公司 Express 没有得到广泛使用，但对于初学者，它值得学习去上手构建一个简单的 web 应用。</p>
</li>
<li>现在是时候做点真东西了。我发现 Tomomi Imura 的一篇教程 <a href="http://www.girliemac.com/blog/2016/10/24/slack-command-bot-nodejs/" target="_blank" rel="external">Creating a Slack Command Bot from Scratch with Node.js</a> 已经可以学到足够的 Node 和 Express 的新技能来应对工作。因为我专注于后端，使用 Slack 创建一个 “/” 命令是一个很好的开始，因为没有前端演示（Slack 帮你做好了）</li>
<li>在构建这个命令的过程中，我不使用演练中所推荐的 ngrok 或者 Heroku，而是使用 <a href="https://zeit.co/now" target="_blank" rel="external">Zeit Now</a>，这是任何人可用的、创建快速一次性的 JS 应用的宝贵工具。</li>
<li>一旦开始写真正意义的代码，我也开始掉下工具无底洞了，安装 Sublime 插件，获取正确的 <a href="https://github.com/postlight/lux/blob/master/CONTRIBUTING.md#nodejs-version-requirements" target="_blank" rel="external">Node 版本</a>，配置 ESLint，使用 <a href="https://github.com/airbnb/javascript" target="_blank" rel="external">Airbnb 的代码规范 (Postlight 公司的偏好)</a> —— 这些事情拖了我的后退，但也都是有价值的初始化投资。对于这方面我还在坑里，例如 Webpack 对我来说依然美妙又神秘，不过<a href="https://www.youtube.com/watch?v=WQue1AN93YU" target="_blank" rel="external">这个视频是个很不错的介绍</a><em>.</em></li>
<li>某些时候 JS 的异步执行（特别是<a href="http://callbackhell.com/" target="_blank" rel="external">回调地狱</a>）开始困扰我，<a href="https://github.com/stevekane/promise-it-wont-hurt" target="_blank" rel="external">Promise It Won’t Hurt</a> 是另一个教你怎样使用 Promise 书写优雅异步逻辑的教程。Promise 是用于解决异步执行的 JS 新概念。说实话 Promise 令我耳目一新，他们是巧妙的范式转变。感谢 <a href="http://kosamari.com/notes/the-promise-of-a-burger-party" target="_blank" rel="external">Mariko Kosaka</a>，现在我每次买汉堡的时候都能想起这些。<br><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*Gh5Pv0ujTuikxGZMeANfCg.png"></li>
</ul>
<p>burger.resolve() — 图片来自 <a href="http://kosamari.com/notes/the-promise-of-a-burger-party" target="_blank" rel="external">The Promise of a Burger Party</a>.</p>
<p>我知道在这会陷入各种各样的麻烦，比如尝试使用 <a href="https://facebook.github.io/jest/" target="_blank" rel="external">Jest</a> 测试，使用 <a href="https://github.com/howdyai/botkit" target="_blank" rel="external">Botkit</a> 让 Slack 机器人更有趣，使用 <a href="https://serverless.com/" target="_blank" rel="external">Serverless</a> 真正打破函数式编程的价值。如果你不知道这些是什么意思，其实也没关系。这是一个大世界，我们都有属于自己的路要走。</p>
<h3 id="“首先做，然后做对，然后做得更好-”"><a href="#“首先做，然后做对，然后做得更好-”" class="headerlink" title="“首先做，然后做对，然后做得更好.”"></a><strong>“首先做，然后做对，然后做得更好</strong>.”</h3><p>最后这件最重要的事我一定要提起：不断去做就是学习的过程，做得很糟糕？那也是学习的过程。</p>
<p><a href="https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.kclvczou2" target="_blank" rel="external">这年头学习现代 JavaScript</a> 感觉就像是在不知所以然得做无用功。当你在想有这么多时间搬搬砖不是更好吗的时候，Google 的 <a href="https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3#.t599ja0j3" target="_blank" rel="external">Addy Osmani 有个不错的建议</a></p>
<blockquote>
<p>我鼓励人们采用这种方法来跟上 JavaScript 生态系统：<strong>首先做，然后做对，然后才是做得更好</strong>. […]</p>
<p>掌握任何新技能的基本要求都需要时间，实践和技巧。如果不使用每日一库或者响应式学习，容易产生挫败感。学会正确使用 Babel 和 React 花费了我数周时间，学习 Isomorphic JS，WebPack 和其他所有相关的库花了更多的时间。 <strong>简简单单地开始并且从基础做起就好.</strong></p>
</blockquote>
<p>这里<strong>感谢</strong> <a href="https://nodeschool.io/" target="_blank" rel="external"> <strong>NodeSchool</strong></a> 和 <a href="https://www.freecodecamp.com/" target="_blank" rel="external"><strong>Free Code Camp</strong></a>，帮助初学者学习 JavaScript 的两个神奇的网站.  </p>
<hr>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://trackchanges.postlight.com/modern-javascript-for-ancient-web-developers-58e7cae050f9#.ibsx51ylz&quot;
    
    </summary>
    
    
      <category term="JavaScript" scheme="http://suncafe.cc/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>搜索结果页的最佳实践</title>
    <link href="http://suncafe.cc/2017/03/28/%5B%E8%AF%91%5D%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C%E9%A1%B5%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/"/>
    <id>http://suncafe.cc/2017/03/28/[译]搜索结果页的最佳实践/</id>
    <published>2017-03-28T13:09:42.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<ul>
<li>原文地址：<a href="https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311#.8pysknjlm" target="_blank" rel="external">Best Practices for Search Results</a></li>
<li>原文作者：<a href="https://uxplanet.org/@101?source=post_header_lockup" target="_blank" rel="external">Nick Babich</a></li>
<li>译文出自：<a href="https://github.com/xitu/gold-miner" target="_blank" rel="external">掘金翻译计划</a></li>
<li>译者：<a href="http://suncafe.cc">suncafe</a></li>
<li>校对者：<a href="https://github.com/iloveivyxuan" target="_blank" rel="external">iloveivyxuan</a>、<a href="https://github.com/Graning" target="_blank" rel="external">Graning</a></li>
</ul>
</blockquote>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*HgoOq5VKfmNfswUF8GM7pg.jpeg"></p>
<p>搜索就像是用户和系统之间的一次对话：用户用一次查询来表达他们需要的信息，而系统用一组结果做为回应。搜索结果页恰恰是整个搜索体验中的一个关键部分：它提供了让用户参与对话的机会，来指导用户的信息需求。</p>
<p>这篇文章中，我愿意分享 10 个最佳实践，来帮助你提升搜索结果页的用户体验。</p>
<h3 id="1-点击搜索按钮后，不要清除用户的查询内容"><a href="#1-点击搜索按钮后，不要清除用户的查询内容" class="headerlink" title="1. 点击搜索按钮后，不要清除用户的查询内容"></a>1. 点击搜索按钮后，不要清除用户的查询内容</h3><p><strong>保留用户输入的原始文字。</strong> 再次查询是信息检索中关键的一步。如果用户没有找到他们想要的信息，他们可能会把一部分查询内容改为更清晰的关键词再搜索一遍。为了方便用户进行查询，在搜索框中留下初始的关键词，让用户不至于重复输入。</p>
<h3 id="2-提供准确而且相关的搜索结果"><a href="#2-提供准确而且相关的搜索结果" class="headerlink" title="2. 提供准确而且相关的搜索结果"></a>2. 提供准确而且相关的搜索结果</h3><p><strong>搜索结果的第一页是黄金位置。</strong> 搜索结果页是一次搜索体验最核心的地方，它可以提升一个网站的转化率也可以毁掉它。通常用户可以基于一两组搜索结果就可以快速判断一个网站是否存在价值。</p>
<p>将准确的结果返回给用户显然非常重要，否则他们将不再相信这个搜索工具。所以你的搜索工具必须以合理的方式确定结果的优先级，并把所有重要的结果放置在第一页。</p>
<h3 id="3-使用有效的自动提示"><a href="#3-使用有效的自动提示" class="headerlink" title="3. 使用有效的自动提示"></a>3. 使用有效的自动提示</h3><p><strong>无效的自动提示会让搜索体验大打折扣。</strong> 请确保自动提示是有效的。当用户输入文字时，像识别词根、预测文本、搜索建议都是一些对用户很有帮助的功能。这些做法有助于加快搜索进度，并让用户在跳转间依旧保持工作状态。</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*AQFWWqXrznprydFeOL-axg.png"></p>
<p>图片来源: ThinkWithGoogle</p>
<h3 id="4-纠正拼写错误"><a href="#4-纠正拼写错误" class="headerlink" title="4. 纠正拼写错误"></a>4. 纠正拼写错误</h3><p><strong>打字本来就很容易出错。</strong> 如果用户错误的输入了搜索关键词，而你可以检测到这个错误，那么可以针对系统猜测或“更正”后的关键词来显示搜索结果。这样就避免了由于没有返回结果，用户不得不再次输入关键词的尴尬。</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*U3xATz5_lkAgYsjJXNlH7g.png"></p>
<p>不支持搜索重组的苹果商店上没有搜索到结果页面。</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*i0oGvymAq0dl7rhLjdLvug.png"></p>
<p>Asos 网站在用户打字错误时，很好地显示了一组代替结果来避免激怒用户。它会这样提示用户：“您的初始搜索为 ‘Overcoatt’，我们也为您搜索了‘Overcoats’的相关结果”</p>
<h3 id="5-显示搜索结果的数量"><a href="#5-显示搜索结果的数量" class="headerlink" title="5. 显示搜索结果的数量"></a>5. 显示搜索结果的数量</h3><p>显示相关搜索结果的数量，让与用户能够知道他们大概会花费多长时间来浏览这些搜索结果。</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*WC83Jp1xpJtLdMbuc5hhiQ.png"></p>
<p>相关结果数量能够让用户更清楚如何进行再次搜索。</p>
<h3 id="6-保留用户最近的搜索记录"><a href="#6-保留用户最近的搜索记录" class="headerlink" title="6. 保留用户最近的搜索记录"></a>6. 保留用户最近的搜索记录</h3><p>即使用户很熟悉搜索引擎的功能，搜索这件事仍然需要用户从他们的记忆里唤起信息。为了想出一个有意义的关键词，用户需要考虑到他要查找的目标所具有的相关属性，并将它们融合到查询条件中。设计搜索体验时，你应该时刻记住基本的可用性原则：</p>
<blockquote>
<p>尊重用户的努力</p>
</blockquote>
<p>你的网站应该 <strong>保存所有最近的站内搜索记录</strong>, 当用户下一次创建搜索的时候把这些记录提供给他们.</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*F5VdrzysdFsaIBLQqxJvdw.png"></p>
<p>保存最近搜索记录的好处是用户再次搜索同样的内容时可以节约他们的时间和精力。</p>
<p><strong>提示:</strong> 提供的条目不要超过 10 个 (并且不要有滚动条) 这样不会让用户觉得信息过载。</p>
<h3 id="7-选择合适的页面布局"><a href="#7-选择合适的页面布局" class="headerlink" title="7. 选择合适的页面布局"></a>7. 选择合适的页面布局</h3><p>显示搜索结果的一个挑战是不同的页面内容需要不同的布局来支撑。内容展现最基本的两种布局分别是列表视图和网格视图。一个经验法则：</p>
<blockquote>
<p>列表用于详情展示，网格用于图片展示</p>
</blockquote>
<p>不妨一起在产品页面中验证一下这个法则。这时产品的细节特征在就显得尤为重要了。对于类似家用电器这样的产品，诸如型号、评级和尺寸等 <strong>细节</strong> 是用户在 <strong>选择购买过程中</strong> 关注的重要因素，因此列表视图更有意义。</p>
<p><img src="https://user-gold-cdn.xitu.io/2017/3/28/d83c879c6ece2d6265c9376ada40f774" alt=""></p>
<p>列表布局更适合细节导向的布局</p>
<p>对于一些 <strong>需要更少的产品细节信息</strong> 的产品，<strong>网格视图</strong> 是一个更好的选择。比如服装这样的产品，用户在挑选产品的过程中对文字描述信息不会太关心，而是依赖于 <strong>产品外观</strong> 做决定。对于这类产品用户更关心产品间的视觉差异，并且更愿意在一个长页面上来回滚动挑选，而不是在一个列表页和产品详情页面里反复切换。</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*HplfdblSUuoURLFBCEWDfg.png"></p>
<p>网格布局更适合视觉导向的布局</p>
<p><strong>提示:</strong></p>
<ul>
<li>允许用户为搜索结果选择“列表视图”或“网格视图”，让用户选择他们自己更期望的方式来浏览他们的查询结果。</li>
</ul>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*ebjnL_m2ojhNM9duJac9qg.png"></p>
<p>允许用户通过一个功能菜单来更改布局</p>
<ul>
<li>设计网格布局的时候，选择一个合适的图片尺寸，既要足够大到清晰识别细节，又要足够小到让用户一次尽量看到更多的条目。</li>
</ul>
<h3 id="8-显示搜索进度"><a href="#8-显示搜索进度" class="headerlink" title="8. 显示搜索进度"></a>8. 显示搜索进度</h3><p>理想状况下，搜索结果应该 <strong>立即</strong> 显示，但如果做不到，应该使用进度条来为用户提供系统的反馈。你应该给你的用户一个清晰的指示，让他们知道还要等待多久。</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*SXF1nALfezQeQyYOSu1l-A.gif"></p>
<p>Aviasales 网站提示用户 <strong>搜索需要一些时间</strong></p>
<p><strong>提示:</strong> 如果搜索过于耗时，你可以使用动画. 好的动画能够分散访客的注意力，让他们忽略漫长的等待。</p>
<h3 id="9-提供排序和筛选的选项"><a href="#9-提供排序和筛选的选项" class="headerlink" title="9. 提供排序和筛选的选项"></a>9. 提供排序和筛选的选项</h3><p>用户搜索返回的结果和关键词相关度较低或者结果太多的时候，他们往往感觉很迷茫。你应该提供给用户一些与其搜索相关的筛选选项，并且在他们应用筛选选项的时候要支持多选。</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*sKSFUtpTpH1KH6rKtJrDYQ.png"></p>
<p>筛选选项可以帮助用户减少搜索结果并对其排序，不然会需要大量的（过多的）滚动和分页。</p>
<p><strong>提示:</strong></p>
<ul>
<li>不要给用户过多的筛选选项这一点很重要。如果你的搜索需要大量的筛选，应该为它们设定默认值。</li>
<li>不要在筛选功能中隐藏排序功能，它们是不一样的。</li>
<li>当用户限制了搜索范围，在搜索结果页的顶部要明确说明这这个范围。</li>
</ul>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*ScC1SnfDGtI6fZ6UUpvNPg.png"></p>
<h3 id="10-不要反馈-“没有找到相关结果”"><a href="#10-不要反馈-“没有找到相关结果”" class="headerlink" title="10. 不要反馈 “没有找到相关结果”"></a>10. 不要反馈 “没有找到相关结果”</h3><p>把一个没有搜索结果的页面丢给用户会令他很沮丧。如果他们搜索了多次都返回这样的结果那就更过分了。 当它们的搜索没有匹配到结果时 <strong>应该避免让他们陷入死胡同</strong> ，为他们提供有价值的替代品。（例如，网店可以从相似类别的商品中为用户推荐替代商品）</p>
<p><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*vWXgR6cGUC7oMrjGw1xwMg.png"></p>
<p>惠普网站的“没有找到相关结果”页就是一个死胡同的例子。它与在无结果页面上显示有价值的替代品的页面形成鲜明对比，例如亚马逊的页面。</p>
<h3 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h3><p>搜索引擎是构建一个优秀网站的关键要素。用户在寻找和学习事物时期望一个流畅的体验，而且他们通常基于一两组搜索结果的质量对网站的价值做出非常快速的判断。一个优秀的搜索工具应当能够帮助用户快速而简单地查找他们想要的结果。</p>
<p>谢谢!</p>
<hr>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;原文地址：&lt;a href=&quot;https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311#.8pysknjlm&quot; target=&quot;_blank&quot; rel=&quot;ext
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>我是怎么思考前端工程的</title>
    <link href="http://suncafe.cc/2016/12/17/%E6%88%91%E6%98%AF%E6%80%8E%E4%B9%88%E6%80%9D%E8%80%83%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E7%9A%84/"/>
    <id>http://suncafe.cc/2016/12/17/我是怎么思考前端工程的/</id>
    <published>2016-12-16T17:05:42.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<p>这是公司技术分享会上的分享笔记</p>
<h3 id="前端目标："><a href="#前端目标：" class="headerlink" title="前端目标："></a>前端目标：</h3><ul>
<li>对现有优秀框架的了解与整合使用</li>
<li>根据项目的业务特点构建出合适的开发模式</li>
<li>设计前端测试方案保证代码质量</li>
<li>用工程化方案组织起团队的开发流程。</li>
</ul>
<h3 id="发展历程"><a href="#发展历程" class="headerlink" title="发展历程"></a>发展历程</h3><table>
<thead>
<tr>
<th>历程</th>
<th>经历</th>
</tr>
</thead>
<tbody>
<tr>
<td>WEB 1.0</td>
<td>官网</td>
</tr>
<tr>
<td>php asp jsp</td>
<td>交易平台</td>
</tr>
<tr>
<td>ajax富应用时代</td>
<td>交易平台后台</td>
</tr>
<tr>
<td>工程化大前端</td>
<td>万有</td>
</tr>
</tbody>
</table>
<p>VR、可穿戴设备、智能家电…</p>
<ul>
<li>拉仇恨定律：任何能够用JavaScript实现的应用系统，最终都必将用JavaScript实现。 —— Atwood</li>
</ul>
<h3 id="痛点"><a href="#痛点" class="headerlink" title="痛点"></a>痛点</h3><ol>
<li>代码耦合，前后端协作不顺畅</li>
<li>前端工作流程繁琐</li>
<li>代码复用性差，服务器压力大，后端API不通用</li>
<li>首屏时间长，javascript代码增量大</li>
<li>状态难以管理 路由控制 组件化</li>
<li>依赖难以管理</li>
<li>新语法的兼容性(浏览器)</li>
<li>可维护性(全局变量)</li>
<li>前端专属的开发服务器</li>
<li>前端测试</li>
</ol>
<h3 id="万有前端的解决方案"><a href="#万有前端的解决方案" class="headerlink" title="万有前端的解决方案"></a>万有前端的解决方案</h3><blockquote>
<p>面向企业 管理系统</p>
</blockquote>
<ol>
<li>前后端分离</li>
<li>webpack自动构建</li>
<li>SPA =&gt;</li>
<li>webpack打包 按需加载</li>
<li>react react-router Redux(flux)</li>
<li>npm</li>
<li>babel</li>
<li>es6 模块化</li>
<li>webpack-dev-server</li>
<li>karma</li>
</ol>
<h3 id="react"><a href="#react" class="headerlink" title="react"></a>react</h3><blockquote>
<p>组件化使应用程序更易于开发和维护<br>学习曲线平缓，核心 API 简洁清晰，易于学习<br>JSX 语法不落俗套，充分发挥了 JavaScript 的能量<br>天生适配 Flux 和 Redux<br>社区活跃且具有创造力，奉献了诸多优秀的开发工具<br>单向数据流比双向数据绑定的方式更适合复杂应用程序，质量更高<br>支持服务端</p>
</blockquote>
<h3 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h3><blockquote>
<p>通过配置可以应对各种情况<br>支持主流的模块加载方式（AMD，CommonJS，globals）<br>内部机制可以修复破损的模块<br>可以处理 CSS<br>全面的缓存系统<br>支持热重载<br>可以加载大多数的资源<br>提供高效的性能优化方案</p>
</blockquote>
<h3 id="改进："><a href="#改进：" class="headerlink" title="改进："></a>改进：</h3><blockquote>
<p>jquery （fetch）<br>react-bootstrap<br>state  （redux）<br>test   （karma）<br>动画</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &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;ul&gt;
&lt;li&gt;对现有优秀框架的了解与整合使用&lt;/li&gt;
&lt;li&gt;根据项目
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>my beatiful lover [Prisma]</title>
    <link href="http://suncafe.cc/2016/12/07/%E7%9B%B8%E5%86%8C/"/>
    <id>http://suncafe.cc/2016/12/07/相册/</id>
    <published>2016-12-07T15:56:02.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <summary type="html">
    
    </summary>
    
    
      <category term="照片" scheme="http://suncafe.cc/tags/%E7%85%A7%E7%89%87/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript 数据类型与数据结构</title>
    <link href="http://suncafe.cc/2016/05/02/JavaScript%20%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%92%8C%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/"/>
    <id>http://suncafe.cc/2016/05/02/JavaScript 数据类型和数据结构/</id>
    <published>2016-05-02T15:57:00.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<h3 id="Javascript-是一种弱类型语言"><a href="#Javascript-是一种弱类型语言" class="headerlink" title="Javascript 是一种弱类型语言"></a>Javascript 是一种弱类型语言</h3><blockquote>
<p>在程序运行过程中，类型会被自动确定<br>同一个变量,可以保存不同类型的数据</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">var a=1;</div><div class="line">var a=&quot;1&quot;;</div><div class="line">var a=true;</div><div class="line">var a=&#123;&#125;;</div><div class="line">var a=[];</div></pre></td></tr></table></figure>
<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><ul>
<li>原始类型<ul>
<li>Boolean</li>
<li>Null</li>
<li>Undefined</li>
<li>String</li>
<li>Number</li>
<li>Symbol //es6</li>
</ul>
</li>
<li>Object</li>
</ul>
<h3 id="原始值"><a href="#原始值" class="headerlink" title="原始值"></a>原始值</h3><blockquote>
<p>除 Object 以外的所有类型都是不可变的（值本身无法被改变）。如，JavaScript 中对字符串的操作一定返回了一个新字符串，原始字符串并没有被改变。我们称这些类型的值为“原始值”。</p>
</blockquote>
<h5 id="数字类型注意事项"><a href="#数字类型注意事项" class="headerlink" title="数字类型注意事项"></a>数字类型注意事项</h5><blockquote>
<p>JavaScript 中只有一种数字类型：基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(263 -1) 到 263 -1）。它并没有为整数给出一种特定的类型。除了能够表示浮点数外，还有一些带符号的值：+Infinity，-Infinity 和 NaN (非数值，Not-a-Number)。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">42 / +0; // Infinity</div><div class="line">42 / -0; // -Infinity</div></pre></td></tr></table></figure>
<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><blockquote>
<p>在计算机科学中, 对象是指内存中的可以被 标识符引用的一块区域.</p>
</blockquote>
<ul>
<li>标准对象 一个 Javascript 对象就是键和值之间的映射.</li>
<li>函数 函数是一个附带可被调用功能的常规对象。</li>
<li>日期 当你想要显示日期时，毋庸置疑，使用内建的 Date 对象。</li>
<li>数组 数组是一种使用整数作为键(integer-key-ed)属性和长度(length)属性之间关联的常规对象。</li>
<li>结构化数据: JSON ,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，来源于 JavaScrip 同时也被多种语言所使用。 JSON 用于构建通用的数据结构。</li>
</ul>
<h3 id="typeof-操作符"><a href="#typeof-操作符" class="headerlink" title="typeof 操作符"></a>typeof 操作符</h3><blockquote>
<p>可以查询变量的类型</p>
</blockquote>
<table>
<thead>
<tr>
<th>Type</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Undefined</td>
<td>“undefined”</td>
</tr>
<tr>
<td>Null</td>
<td>“object” (see below)</td>
</tr>
<tr>
<td>Boolean</td>
<td>“boolean”</td>
</tr>
<tr>
<td>Number</td>
<td>“number”</td>
</tr>
<tr>
<td>String</td>
<td>“string”</td>
</tr>
<tr>
<td>Symbol</td>
<td>“symbol”</td>
</tr>
<tr>
<td>Host</td>
<td>object (provided by the JS environment)    Implementation -dependent</td>
</tr>
<tr>
<td>Function</td>
<td>object (implements [[Call]] in ECMA-262 terms)    “ function”</td>
</tr>
<tr>
<td>Any other object</td>
<td>“object”</td>
</tr>
</tbody>
</table>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;Javascript-是一种弱类型语言&quot;&gt;&lt;a href=&quot;#Javascript-是一种弱类型语言&quot; class=&quot;headerlink&quot; title=&quot;Javascript 是一种弱类型语言&quot;&gt;&lt;/a&gt;Javascript 是一种弱类型语言&lt;/h3&gt;&lt;bloc
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>JavaScript 中的相等性判断</title>
    <link href="http://suncafe.cc/2016/05/02/JavaScript%20%E4%B8%AD%E7%9A%84%E7%9B%B8%E7%AD%89%E6%80%A7%E5%88%A4%E6%96%AD/"/>
    <id>http://suncafe.cc/2016/05/02/JavaScript 中的相等性判断/</id>
    <published>2016-05-02T15:12:00.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<h3 id="相等性判断操作符"><a href="#相等性判断操作符" class="headerlink" title="相等性判断操作符"></a>相等性判断操作符</h3><ul>
<li><code>===</code> 严格相等,比较时进行类型转换</li>
<li><code>==</code> 非严格相等,如果类型不同会直接返回 false</li>
<li><code>Object.is</code> 在三等号判等的基础上特别处理了 NaN 、 -0 和 +0 ，保证 -0 和 +0 不再相同，但 Object.is(NaN, NaN) 会返回 true。</li>
</ul>
<blockquote>
<p>这三个运算符的原语中，没有一个会比较两个变量是否结构上概念类似。对于任意两个不同的非原始对象，即便他们有相同的结构， 以上三个运算符都会计算得到 false</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&#123;&#125;==&#123;&#125; //false</div><div class="line">[]==[] //false</div><div class="line">[1,2,3]==[1,2,3] //false</div><div class="line"></div><div class="line">var obj=&#123;&#125;</div><div class="line">obj===obj //true</div></pre></td></tr></table></figure>
<h4 id="严格相等的注意事项"><a href="#严格相等的注意事项" class="headerlink" title="严格相等的注意事项"></a>严格相等的注意事项</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">+0===0 //true</div><div class="line">-0===0 //true</div><div class="line"></div><div class="line">NaN===NaN //false NaN与其他任何值都不相等</div><div class="line"></div><div class="line">var x=NaN;</div><div class="line">x !== x //true</div></pre></td></tr></table></figure>
<h4 id="非严格相等的注意事项"><a href="#非严格相等的注意事项" class="headerlink" title="非严格相等的注意事项"></a>非严格相等的注意事项</h4><blockquote>
<p>相等操作符比较两个值是否相等，在比较前将两个被比较的值转换为相同类型。在转换后（等式的一边或两边都可能被转换），最终的比较方式等同于全等操作符 === 的比较方式。 相等操作符满足交换律。</p>
<p>最好有限使用全等而不是相等,全等操作符的结果更容易预测，并且因为没有隐式转换，全等比较的操作会更快。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">var num = 0;</div><div class="line">var obj = new String(&quot;0&quot;);</div><div class="line">var str = &quot;0&quot;;</div><div class="line">var b = false;</div><div class="line"></div><div class="line">console.log(num == num); // true</div><div class="line">console.log(obj == obj); // true</div><div class="line">console.log(str == str); // true</div><div class="line"></div><div class="line">console.log(num == obj); // true</div><div class="line">console.log(num == str); // true</div><div class="line">console.log(obj == str); // true</div><div class="line">console.log(null == undefined); // true</div><div class="line"></div><div class="line">console.log(obj == null);</div><div class="line">console.log(obj == undefined);</div></pre></td></tr></table></figure>
<h4 id="Object-is"><a href="#Object-is" class="headerlink" title="Object.is"></a>Object.is</h4><blockquote>
<p>Object.is 应该被认为是有其特殊的用途，而不应说他和其他的相等更宽松或严格。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">Object.is(NaN,NaN) //true</div><div class="line">Object.is(-0,0) //false</div></pre></td></tr></table></figure>
]]></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;code&gt;===&lt;/code&gt; 严格相等,比较时进行类型转换&lt;/li&gt;
&lt;li
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>前端基础之HTTP的相关概念</title>
    <link href="http://suncafe.cc/2016/05/01/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E4%B9%8BHTTP%E7%9A%84%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5/"/>
    <id>http://suncafe.cc/2016/05/01/前端基础之HTTP的相关概念/</id>
    <published>2016-05-01T11:20:00.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><p>HTTP 是一种传输网络资源的协议，是web上数据交换的基础。</p>
<p>HTTP 是一种 client-server 协议，也就是说请求通常是由像浏览器这样的接受方发起的。</p>
<p>客户端和服务端通过交换各自的消息（与数据流正好相反）来进行交互。</p>
<ul>
<li>requests 由像浏览器这样的客户端发出的消息</li>
<li>responses 被服务端回应的消息。</li>
</ul>
<h3 id="基于HTTP-的组件系统"><a href="#基于HTTP-的组件系统" class="headerlink" title="基于HTTP 的组件系统"></a>基于HTTP 的组件系统</h3><p>Client &lt;==&gt; Proxy &lt;==&gt; Proxy &lt;==&gt; Server</p>
<p>在一个浏览器和处理请求的服务器之间，还有计算机、路由器、调制解调器等等许多实体。</p>
<p>HTTP是在最上层应用层中的，虽然下面的层次对分析网络问题非常重要，但是对HTTP的描述来说，这些大多数都是不相关的。</p>
<h4 id="客户端：user-agent"><a href="#客户端：user-agent" class="headerlink" title="客户端：user-agent"></a>客户端：user-agent</h4><p>user-agent 通常由浏览器来扮演，浏览器作为发起一个请求的实体，获取这个页面的HTML文档，再解析它并根据文档中的资源信息发送其他的请求来获取脚本信息，或者CSS来进行页面布局渲染，还有一些其它的页面资源（如图片和视频等）。</p>
<p>然后，它把这些资源结合到一起，展现出来一个完整的文档，也就是网页。</p>
<h4 id="Web服务端"><a href="#Web服务端" class="headerlink" title="Web服务端"></a>Web服务端</h4><p>web Server 它可以是许多共同分担负载（负载平衡）的一组服务器组成的计算机群，也可以是一种复杂的软件，通过向其他计算机发起请求来获取部分或全部资源的软件。</p>
<p>Server不再只是一个单独的机器，它可以是在同一个机器上装载的许多服务之一。</p>
<h4 id="Proxies"><a href="#Proxies" class="headerlink" title="Proxies"></a>Proxies</h4><p>在浏览器和服务器之间,有许多传输层、网络层和物理层的计算机和其他设备参与了HTTP 的转发 ，对于HTTP的应用层来说他们大多就是透明的，而还有一部分表现在应用层上的，就叫做proxies了</p>
<p>功能：</p>
<ul>
<li>缓存</li>
<li>过滤</li>
<li>负载均衡，让多个服务器服务不同的请求</li>
<li>对不同资源的权限控制</li>
<li>登陆，允许存储历史信息</li>
</ul>
<h3 id="HTTP的特性"><a href="#HTTP的特性" class="headerlink" title="HTTP的特性"></a>HTTP的特性</h3><ul>
<li>简单 可读</li>
<li>可扩展 （通过headers）前后端协商添加功能</li>
<li>无状态 cookies的使用可以创建有状态的会话<ul>
<li>http cookies 是一种headers扩展</li>
</ul>
</li>
<li>HTTP依赖于TCP进行消息传递<ul>
<li>TCP是可靠的面向连接的传输层协议，http是应用层，网络层使用IP协议</li>
</ul>
</li>
<li>打开一个TCP 链接很耗时，HTTP/1.1引入了持久链接的概念，默认使用长连接，<code>Connection:keep-alive</code></li>
<li>TCP连接的建立是需要三次握手的，而释放则需要4次握手所以每个连接的建立都是需要资源消耗和时间消耗的</li>
<li>短连接的操作步骤是：<br>建立连接——数据传输——关闭连接…建立连接——数据传输——关闭连接</li>
<li>长连接的操作步骤是：<br>建立连接——数据传输…（保持连接）…数据传输——关闭连接</li>
</ul>
<h3 id="HTTP-控制的常见特性"><a href="#HTTP-控制的常见特性" class="headerlink" title="HTTP 控制的常见特性"></a>HTTP 控制的常见特性</h3><p>HTTP良好的扩展性控制着越来越多Web的功能。</p>
<ul>
<li>缓存 （cookeis）</li>
<li>开放同源限制 （cors）</li>
<li>认证 （Authenticate 或者 cookies）</li>
<li>代理 （例如SOCKS协议的代理）</li>
<li>会话 cookies</li>
</ul>
<h3 id="HTTP-流"><a href="#HTTP-流" class="headerlink" title="HTTP 流"></a>HTTP 流</h3><ol>
<li>打开一个TCP连接</li>
<li>发送一个http报文</li>
<li>读取服务端返回的报文</li>
<li>关闭连接或者为以后的请求重用连接。</li>
</ol>
<h3 id="HTTP-报文"><a href="#HTTP-报文" class="headerlink" title="HTTP 报文"></a>HTTP 报文</h3><p>在HTTP/2中，这些报文被嵌入到了一个新的二进制结构中－帧。帧可以允许实现很多优化，如复用和报文头部的压缩。即使只有原始HTTP报文的一部分以这种HTTP/2版本的方式发送出来，每个报文的语义依旧不变</p>
<p>request：</p>
<ol>
<li>HTTP的method</li>
<li>获取资源的路径</li>
<li>HTTP协议的版本号。</li>
<li>headers</li>
<li>body</li>
</ol>
<p>response：</p>
<ol>
<li>HTTP的版本号</li>
<li>状态码</li>
<li>状态信息</li>
<li>HTTP headers</li>
<li>body</li>
</ol>
]]></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;HTTP 是一种传输网络资源的协议，是web上数据交换的基础。&lt;/p&gt;
&lt;p&gt;HTTP 是一种 client-server 协议，也就是说请
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>谈谈工具</title>
    <link href="http://suncafe.cc/2016/04/08/%E8%B0%88%E8%B0%88%E5%B7%A5%E5%85%B7/"/>
    <id>http://suncafe.cc/2016/04/08/谈谈工具/</id>
    <published>2016-04-08T14:33:32.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<p>前一阵子Adobe公司发布了一款新软件叫Adobe XD，传言是Sketch的劲敌。Sketch也在设计圈里火了有段日子了，不过由于只有OS版本，在国内难以达到UI标配的程度。然而显然PS在界面设计方面是有点臃肿的，UI行业火爆到开始平息的时候新软件的出现为时不晚。如果如果XD发布windows版本，那么Sketch就真的有成为过客的危险了。</p>
<p>高中毕业时候我在书店里买了一本Photoshop教程书，那时谈不上设计，但那时已是我接触生产力工具的启蒙，我被复杂的界面所倾倒，被变换的像素所震撼，被未知的强大所吸引。掰掰手指已是四年多，CS456到CC软件也算是伴随着我成长。如今我做前端的工作，每天面对更多的是文本编辑器和命令行工具，PS打开的时候越来越少了，这让我总有些不舍。</p>
<p>如今的互联网行业真的是日新月异，各类开发设计原型巴拉巴拉的工具比比皆是群芳争艳乐此不疲。这其中自然也不乏开天辟地的神作。所有的工具都凝聚了开发人员的心血与智慧，然而并不是所有工具都适合你，选择自然是个问题。<br>1.最重要的你要做的是什么<br>2.有什么可选择你问google<br>3.别被学习曲线吓到也别死磕<br>4.计算时间成本</p>
<p>本想总结一下前端开发工具然而发现善良的好多网友总结的比我的全的多，那么我来开启传送门。<br><a href="http://www.fefork.com/fetool/" target="_blank" rel="external">http://www.fefork.com/fetool/</a><br>感谢@nieweidong的前端工具集。</p>
<p>另外今晚最重要的一句：真诚的向程序开发人员致敬！</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;前一阵子Adobe公司发布了一款新软件叫Adobe XD，传言是Sketch的劲敌。Sketch也在设计圈里火了有段日子了，不过由于只有OS版本，在国内难以达到UI标配的程度。然而显然PS在界面设计方面是有点臃肿的，UI行业火爆到开始平息的时候新软件的出现为时不晚。如果如果
    
    </summary>
    
    
      <category term="工具" scheme="http://suncafe.cc/tags/%E5%B7%A5%E5%85%B7/"/>
    
  </entry>
  
  <entry>
    <title>今天是个值得庆祝的好日子</title>
    <link href="http://suncafe.cc/2016/04/08/%E4%BB%8A%E5%A4%A9%E6%98%AF%E4%B8%AA%E5%80%BC%E5%BE%97%E5%BA%86%E7%A5%9D%E7%9A%84%E5%A5%BD%E6%97%A5%E5%AD%90/"/>
    <id>http://suncafe.cc/2016/04/08/今天是个值得庆祝的好日子/</id>
    <published>2016-04-07T16:38:59.000Z</published>
    <updated>2017-06-26T17:03:04.809Z</updated>
    
    <content type="html"><![CDATA[<p>原因很简单，因为我开启了hexo新篇章，哈哈哈</p>
<p>还要练习使用markdown呢，希望自己坚持下去</p>
<p>这篇博客呢，主要是记录一下自己的前端学习笔记，以及自己想说的话</p>
<p>万事开头难，今天折腾了好久终于把博客搭建起来，感谢google 感谢网上所有无私奉献的人们</p>
<p>千里之行始于足下，滴水穿石巴拉巴拉~</p>
<p>Hello word！</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原因很简单，因为我开启了hexo新篇章，哈哈哈&lt;/p&gt;
&lt;p&gt;还要练习使用markdown呢，希望自己坚持下去&lt;/p&gt;
&lt;p&gt;这篇博客呢，主要是记录一下自己的前端学习笔记，以及自己想说的话&lt;/p&gt;
&lt;p&gt;万事开头难，今天折腾了好久终于把博客搭建起来，感谢google 感谢网
    
    </summary>
    
    
      <category term="碎碎念" scheme="http://suncafe.cc/tags/%E7%A2%8E%E7%A2%8E%E5%BF%B5/"/>
    
  </entry>
  
</feed>