atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>YeaseonZhang</title>
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://yeaseonzhang.github.io/"/>
  <updated>2017-12-17T09:12:49.578Z</updated>
  <id>https://yeaseonzhang.github.io/</id>
  
  <author>
    <name>Yeaseon</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>高效JavaScript 68诫</title>
    <link href="https://yeaseonzhang.github.io/2017/12/17/%E9%AB%98%E6%95%88JavaScript-68%E8%AF%AB/"/>
    <id>https://yeaseonzhang.github.io/2017/12/17/高效JavaScript-68诫/</id>
    <published>2017-12-17T09:07:09.000Z</published>
    <updated>2017-12-17T09:12:49.578Z</updated>
    
    <content type="html"><![CDATA[<p>将《编写高质量JavaScript代码的68个有效方法》书中提到的68个方法分享给大家。</p>
<h3 id="让自己习惯JavaScript"><a href="#让自己习惯JavaScript" class="headerlink" title="让自己习惯JavaScript"></a>让自己习惯<code>JavaScript</code></h3><ol>
<li>了解你使用的JavaScript版本</li>
<li>理解JavaScript的浮点数</li>
<li>当心隐式的强制转换</li>
<li>原始类型优于封装对象</li>
<li>避免对混合类型使用<code>==</code>运算符</li>
<li>了解分号插入的局限</li>
<li>视字符串为16位的代码单元序列</li>
</ol>
<a id="more"></a>
<h3 id="变量作用域"><a href="#变量作用域" class="headerlink" title="变量作用域"></a>变量作用域</h3><ol>
<li>尽量少用全局对象</li>
<li>始终声明局部变量</li>
<li>避免使用<code>with</code></li>
<li>熟练掌握闭包</li>
<li>理解变量声明提升</li>
<li>使用立即调用的函数表达式创建局部函数</li>
<li>当心命名函数表达式笨拙的作用域</li>
<li>当心局部块函数声明笨拙的作用域</li>
<li>避免使用<code>eval</code>创建局部变量</li>
<li>间接调用<code>eval</code>函数优于直接调用</li>
</ol>
<h3 id="使用函数"><a href="#使用函数" class="headerlink" title="使用函数"></a>使用函数</h3><ol>
<li>理解函数调用、方法调用及构造函数</li>
<li>熟练掌握高阶函数</li>
<li>使用<code>call</code>方法自定义接收者来调用函数</li>
<li>使用<code>apply</code>方法通过不同数量的参数调用函数</li>
<li>使用<code>arguments</code>创建可变参数的函数</li>
<li>永远不要修改<code>arguments</code>对象</li>
<li>使用变量保存<code>arguments</code>的引用</li>
<li>使用<code>bind</code>方法提取具有确定接收者的方法</li>
<li>使用<code>bind</code>方法实现函数柯里化</li>
<li>使用闭包而不是字符串来封装代码</li>
<li>不要信赖函数对象的<code>toString</code>方法</li>
<li>避免使用非标准的栈检查属性</li>
</ol>
<h3 id="对象和原型"><a href="#对象和原型" class="headerlink" title="对象和原型"></a>对象和原型</h3><ol>
<li>理解<code>prototype</code>、<code>getPrototypeOf</code>和<code>__proto__</code>之间的不同</li>
<li>使用<code>Object.getPrototypeOf</code>函数而不要使用<code>__proto__</code>属性</li>
<li>始终不要修改<code>__proto__</code>属性</li>
<li>使构造函数与<code>new</code>操作符无关</li>
<li>在原型中存储方法</li>
<li>使用闭包存储私有数据</li>
<li>只将实例状态存储在实例对象中</li>
<li>认识到<code>this</code>变量的隐式绑定问题</li>
<li>在子类的构造函数中调用父类的构造函数</li>
<li>不要重用父类的属性名</li>
<li>避免继承标准类</li>
<li>将原型视为实现细节</li>
<li>避免使用轻率的<strong>猴子补丁</strong>(monkey-patching)</li>
</ol>
<h3 id="数组和字典"><a href="#数组和字典" class="headerlink" title="数组和字典"></a>数组和字典</h3><ol>
<li>使用<code>Object</code>的直接实例构造轻量级的字典</li>
<li>使用<code>null</code>原型以防止原型污染</li>
<li>使用数组而不要使用字典存储有序集合</li>
<li>使用<code>hasOwnProperty</code>方法以避免原型污染</li>
<li>使用数组而不要使用字典来存储有序集合</li>
<li>绝不要在<code>Object.prototype</code>中增加可枚举的属性</li>
<li>避免在枚举期间修改对象</li>
<li>数组迭代要优先使用<code>for</code>循环而不是<code>for...in</code>循环</li>
<li>迭代方法由于循环</li>
<li>在类数组对象上复用通用的数组方法</li>
<li>数组字面量优于数组构造函数</li>
</ol>
<h3 id="库和API设计"><a href="#库和API设计" class="headerlink" title="库和API设计"></a>库和API设计</h3><ol>
<li>保持一致的约定</li>
<li>将<code>undefined</code>看做“没有值”</li>
<li>接收关键字参数的选项对象</li>
<li>避免不必要的状态</li>
<li>使用结构类型设计灵活的接口</li>
<li>区分数组对象和类数组对象</li>
<li>避免过度的强制转换</li>
<li>支持方法链</li>
</ol>
<h3 id="并发"><a href="#并发" class="headerlink" title="并发"></a>并发</h3><ol>
<li>不要阻塞I/O事件队列</li>
<li>在异步序列中使用嵌套或命名的回调函数</li>
<li>当心丢弃错误</li>
<li>对异步循环使用递归</li>
<li>不要在计算时阻塞事件队列</li>
<li>使用计数器来执行并行操作</li>
<li>绝不要同步的调用异步的回调函数</li>
<li>使用<code>promise</code>模式清洁异步逻辑</li>
</ol>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;将《编写高质量JavaScript代码的68个有效方法》书中提到的68个方法分享给大家。&lt;/p&gt;
&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;让自己习惯&lt;code&gt;JavaScript&lt;/code&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;了解你使用的JavaScript版本&lt;/li&gt;
&lt;li&gt;理解JavaScript的浮点数&lt;/li&gt;
&lt;li&gt;当心隐式的强制转换&lt;/li&gt;
&lt;li&gt;原始类型优于封装对象&lt;/li&gt;
&lt;li&gt;避免对混合类型使用&lt;code&gt;==&lt;/code&gt;运算符&lt;/li&gt;
&lt;li&gt;了解分号插入的局限&lt;/li&gt;
&lt;li&gt;视字符串为16位的代码单元序列&lt;/li&gt;
&lt;/ol&gt;
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://yeaseonzhang.github.io/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>2017年书单</title>
    <link href="https://yeaseonzhang.github.io/2017/12/17/2017%E5%B9%B4%E4%B9%A6%E5%8D%95/"/>
    <id>https://yeaseonzhang.github.io/2017/12/17/2017年书单/</id>
    <published>2017-12-17T08:42:16.000Z</published>
    <updated>2017-12-17T08:43:02.115Z</updated>
    
    <content type="html"><![CDATA[<img src="/2017/12/17/2017年书单/library.jpg" alt="營業據點" title="營業據點">
<h1 id="2017年书单（15-12）"><a href="#2017年书单（15-12）" class="headerlink" title="2017年书单（15/12）"></a>2017年书单（15/12）</h1><p>去年计划读12本书，很显然没有完成任务。2017年继续“12本书计划”。</p>
<p>“人丑就该多读书”其实只是前半句，后半句是“不丑多读书也没坏处”。</p>
<a id="more"></a>
<ol>
<li>《你不知道的JavaScript·上卷》 于 #2017.3.16# 读完</li>
<li>《万物简史》 于 #2017.3.17# 读完</li>
<li>《我脑袋里的怪东西》 于 #2017.4.12# 读完</li>
<li>《JavaScript高级程序设计》 于 #2017.4.26# 读完</li>
<li>《你不知道的JavaScript·中卷》 于 #2017.4.29# 读完</li>
<li>《二手时间》 于 #2017.5.11# 读完</li>
<li>《CSS设计指南》 于 #2017.5.14# 读完</li>
<li>《JavaScript语言精粹》 于 #2017.5.26# 读完</li>
<li>《拖延心理学》 于 #2017.6.1# 读完</li>
<li>《CSS揭秘》 于 #2017.6.25# 读完</li>
<li>《极简宇宙史》 于 #2017.6.26# 读完</li>
<li>《巨人的陨落》 于 #2017.7.22# 读完</li>
<li>《Node即学即用》 于 #2017.8.28# 读完</li>
<li>《灰犀牛》 于 #2017.9.25# 读完</li>
<li>《编写高质量JavaScript代码的68个有效方法》 于 #2017.12.17# 读完</li>
</ol>
<p>持续更新…</p>
]]></content>
    
    <summary type="html">
    
      &lt;img src=&quot;/2017/12/17/2017年书单/library.jpg&quot; alt=&quot;營業據點&quot; title=&quot;營業據點&quot;&gt;
&lt;h1 id=&quot;2017年书单（15-12）&quot;&gt;&lt;a href=&quot;#2017年书单（15-12）&quot; class=&quot;headerlink&quot; title=&quot;2017年书单（15/12）&quot;&gt;&lt;/a&gt;2017年书单（15/12）&lt;/h1&gt;&lt;p&gt;去年计划读12本书，很显然没有完成任务。2017年继续“12本书计划”。&lt;/p&gt;
&lt;p&gt;“人丑就该多读书”其实只是前半句，后半句是“不丑多读书也没坏处”。&lt;/p&gt;
    
    </summary>
    
    
      <category term="阅读" scheme="https://yeaseonzhang.github.io/tags/%E9%98%85%E8%AF%BB/"/>
    
  </entry>
  
  <entry>
    <title>Promise深入理解</title>
    <link href="https://yeaseonzhang.github.io/2017/12/07/Promise%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3/"/>
    <id>https://yeaseonzhang.github.io/2017/12/07/Promise深入理解/</id>
    <published>2017-12-07T08:48:57.000Z</published>
    <updated>2017-12-11T13:40:23.383Z</updated>
    
    <content type="html"><![CDATA[<h2 id="什么是Promise"><a href="#什么是Promise" class="headerlink" title="什么是Promise"></a>什么是<strong>Promise</strong></h2><p><strong>Promise</strong>的核心理念是一个异步操作的结果，<strong>Promise</strong>包含两部分</p>
<ul>
<li><code>[[PromiseStates]]</code></li>
<li><code>[[PromiseValue]]</code></li>
</ul>
<p><strong>Promise</strong>状态三种可能：</p>
<ul>
<li><code>pending</code>: 悬而未决</li>
<li><code>resolved</code>: 决定</li>
<li><code>rejected</code>: 拒绝</li>
</ul>
<img src="/2017/12/07/Promise深入理解/state.png" alt="Promise状态" title="Promise状态">
<a id="more"></a>
<h2 id="异步性"><a href="#异步性" class="headerlink" title="异步性"></a>异步性</h2><figure class="highlight javascript"><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="keyword">const</span> p = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="string">'success'</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(<span class="string">'Called first ?'</span>);</div></pre></td></tr></table></figure>
<p><strong>Promise</strong>的<code>then()</code>具有异步性，当执行到<code>.then()</code>部分，这部分会自动进入到<strong>Promise</strong>的异步事件队列，不会阻塞同步代码的执行，所以<code>Called first?</code>先输出。</p>
<blockquote>
<p>输出结果</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">Called first ?</div><div class="line">success</div></pre></td></tr></table></figure>
<h2 id="立即执行性"><a href="#立即执行性" class="headerlink" title="立即执行性"></a>立即执行性</h2><figure class="highlight javascript"><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">const</span> p = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'Create a promise'</span>);</div><div class="line">  resolve(<span class="string">'success'</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(<span class="string">'After new Promise'</span>);</div></pre></td></tr></table></figure>
<p>从<strong>Promise</strong>的<strong>异步性</strong>，我们可以推断出，<code>After new Promise</code>，会先于<code>then()</code>方法中的输出。同时<strong>Promise</strong>的<strong>立即执行性</strong>，定义了<code>promise</code>定义的同时就会立即执行，并不依赖于<code>then()</code>的调用。而且与函数明显不同，函数需要主动调用才会执行。</p>
<blockquote>
<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></pre></td><td class="code"><pre><div class="line">Create a promise</div><div class="line">After new Promise</div><div class="line">success</div></pre></td></tr></table></figure>
<h2 id="Promise的状态"><a href="#Promise的状态" class="headerlink" title="Promise的状态"></a>Promise的状态</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="number">1</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">    resolve(<span class="number">2</span>);</div><div class="line">  &#125;, <span class="number">500</span>);</div><div class="line">&#125;);</div><div class="line"><span class="keyword">const</span> p3 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">    reject(<span class="number">3</span>);</div><div class="line">  &#125;, <span class="number">500</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(p1);</div><div class="line"><span class="built_in">console</span>.log(p2);</div><div class="line"><span class="built_in">console</span>.log(p3);</div><div class="line"></div><div class="line">setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2-setTimeout:'</span>, p2);</div><div class="line">&#125;, <span class="number">501</span>);</div><div class="line"></div><div class="line">setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p3-setTimeout:'</span>, p3);</div><div class="line">&#125;, <span class="number">501</span>);</div><div class="line"></div><div class="line">p1.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1-then:'</span>, value);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p2.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2-then:'</span>, value);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p3.catch(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p3-catch'</span>, err);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>当<strong>Promise</strong>创建完成时，处于 <em>pending</em> 状态；<br>当<strong>Promise</strong>执行了<code>resolve</code>方法，<strong>Promise</strong>对象的状态会变成 <em>resolved</em> 状态；<br>当<strong>Promise</strong>执行了<code>reject</code>方法，<strong>Promise</strong>对象的状态会变成 <em>rejected</em> 状态；</p>
<img src="/2017/12/07/Promise深入理解/timeline.png" alt="执行顺序" title="执行顺序">
<blockquote>
<p>先输出</p>
</blockquote>
<figure class="highlight javascript"><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"><span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"resolved"</span>, [[PromiseValue]]: <span class="number">1</span>&#125;</div><div class="line"><span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"pending"</span>, [[PromiseValue]]: <span class="literal">undefined</span>&#125;</div><div class="line"><span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"pending"</span>, [[PromiseValue]]: <span class="literal">undefined</span>&#125;</div></pre></td></tr></table></figure>
<blockquote>
<p>然后输出</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">p1-then: 1</div></pre></td></tr></table></figure>
<p>500ms之后，<code>p2</code>和<code>p3</code>的<strong>Promise</strong>状态被执行，<code>then</code>被触发，输出：<br><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">p2-then: 2</div><div class="line">p3-catch 3</div></pre></td></tr></table></figure></p>
<blockquote>
<p>最后会输出:</p>
</blockquote>
<figure class="highlight javascript"><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">p2-setTimeout: <span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"resolved"</span>, [[PromiseValue]]: <span class="number">2</span>&#125;</div><div class="line">p3-setTimeout: <span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"rejected"</span>, [[PromiseValue]]: <span class="number">3</span>&#125;</div></pre></td></tr></table></figure>
<h2 id="状态不可逆性"><a href="#状态不可逆性" class="headerlink" title="状态不可逆性"></a>状态不可逆性</h2><figure class="highlight javascript"><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"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="string">'p1 success 1'</span>);</div><div class="line">  resolve(<span class="string">'p1 success 2'</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="string">'p2 success'</span>);</div><div class="line">  reject(<span class="string">'p2 reject'</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p1.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p2.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(err);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><strong>Promise</strong>一旦变成<code>resolved</code>或是<code>rejected</code>，这个状态就不能再次变化，这就是<strong>Promise</strong>的不可逆性。</p>
<blockquote>
<p>输出</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">p1 success 1</div><div class="line">p2 success</div></pre></td></tr></table></figure>
<h2 id="链式调用"><a href="#链式调用" class="headerlink" title="链式调用"></a>链式调用</h2><figure class="highlight javascript"><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"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">(resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="number">1</span>);</div><div class="line">&#125;));</div><div class="line"></div><div class="line">p.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">  <span class="keyword">return</span> value * <span class="number">2</span>;</div><div class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(<span class="string">'resolve'</span>);</div><div class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">'reject'</span>);</div><div class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'resolve: '</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'reject: '</span>, err);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><strong>Jquery</strong>对象链式调用是执行<code>jquery</code>方法之后，会继续返回<code>jquery</code>对象；类似这个原理，<strong>Promise</strong>对象的<code>then</code>方法会返回一个新的<code>Promise对象</code>，这样就可以继续调用<code>then</code>方法。同样<code>then</code>方法中的两个参数还是<code>fulfilled</code>对象和<code>rejected</code>对象。</p>
<img src="/2017/12/07/Promise深入理解/chain.png" alt="链式调用" title="链式调用">
<p>当<code>return</code>一个值或者<code>Promise.resolve()</code>时，状态为 <em>resolved</em><br>当<code>throw</code>一个异常或者<code>return</code> <code>Promise.reject()</code>,状态为 <em>rejected</em></p>
<p><strong>注</strong>: 当<code>then()</code>方法中没有<code>return</code>时，会默认返回<code>undefined</code>，状态为 <em>resolved</em></p>
<blockquote>
<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></pre></td><td class="code"><pre><div class="line">1</div><div class="line">2</div><div class="line">undefined</div><div class="line">resolve</div><div class="line">reject: reject</div></pre></td></tr></table></figure>
<h2 id="Promise中的异常处理"><a href="#Promise中的异常处理" class="headerlink" title="Promise中的异常处理"></a>Promise中的异常处理</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  foo.bar();</div><div class="line">  resolve(<span class="number">1</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p1.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1 then value: '</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1 then err: '</span>, err);</div><div class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1 then then value: '</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1 then then err: '</span>, err);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="number">2</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p2.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2 then value: '</span>, value);</div><div class="line">  foo.bar();</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2 then err: '</span>, err);</div><div class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2 then then value: '</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2 then then err: '</span>, err);</div><div class="line">  <span class="keyword">return</span> <span class="number">1</span>;</div><div class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2 then then then value: '</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2 then then then err: '</span>, err);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><strong>Promise</strong>中的异常会交给<code>then</code>方法中的第二个回调函数处理，一旦处理完成，会继续返回一个<code>Promise</code>对象给后续<code>then</code>方法。</p>
<p>可以看到输出是<code>p1</code>和<code>p2</code>交替输出的，这个并不一定是交替输出，取决于执行情况，也可能是<code>p2</code>先输出。</p>
<blockquote>
<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></pre></td><td class="code"><pre><div class="line">p1 then err:  ReferenceError: foo is not defined</div><div class="line">p2 then value:  2</div><div class="line">p1 then then value:  undefined</div><div class="line">p2 then then err:  ReferenceError: foo is not defined</div><div class="line">p2 then then then value:  1</div></pre></td></tr></table></figure>
<h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve()"></a>Promise.resolve()</h2><p><code>Promise.resolve()</code>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Promise</span>.resolve(value);</div></pre></td></tr></table></figure>
<ul>
<li><code>value</code>: 用来解析待返回<code>promise</code>对象的参数，既可以是一个<code>promise</code>对象，也可以是一个<code>thenable</code>（即带有<code>then</code>方法）。</li>
</ul>
<figure class="highlight javascript"><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> p1 = <span class="built_in">Promise</span>.resolve(<span class="number">1</span>);</div><div class="line"><span class="keyword">const</span> p2 = <span class="built_in">Promise</span>.resolve(p1);</div><div class="line"><span class="keyword">const</span> p3 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="number">1</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">const</span> p4 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(p1);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="comment">// console.log(p1);</span></div><div class="line"><span class="comment">// console.log(p2);</span></div><div class="line"><span class="comment">// console.log(p3);</span></div><div class="line"><span class="comment">// console.log(p4);</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(p1 === p2);</div><div class="line"><span class="built_in">console</span>.log(p1 === p3);</div><div class="line"><span class="built_in">console</span>.log(p1 === p4);</div><div class="line"><span class="built_in">console</span>.log(p3 === p4);</div><div class="line"></div><div class="line">p4.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p4 = '</span>, value);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p2.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2 = '</span>, value);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p1.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1 = '</span>, value);</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p><code>p1</code>: 接收了一个普通值<code>1</code>，所以会返回一个<code>resolved</code>状态的<strong>Promise</strong>对象，并且值为<code>1</code>。<br><code>p2</code>: 接收了一个promise对象<code>p1</code>，会直接返回这个promise对象。<br><code>p3</code>和<code>p4</code>: 通过<code>new</code>方式创建了一个新的promise对象。</p>
<p>所以，<code>p1 === p2</code>,<code>p3</code>和<code>p4</code>都是创建的新对象，所以自身和其他三个对象都不相等。</p>
<blockquote>
<p>输出<br><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">true</div><div class="line">false</div><div class="line">false</div><div class="line">false</div></pre></td></tr></table></figure></p>
</blockquote>
<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">p2 = 1</div><div class="line">p1 = 1</div><div class="line">p4 = 1</div></pre></td></tr></table></figure>
<p>很有意思的是，明明是<code>p4</code>先执行的<code>then</code>方法，但是却是后输出的。</p>
<p>在定义完4个promise对象时，状态分别为：<br><figure class="highlight javascript"><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="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"resolved"</span>, [[PromiseValue]]: <span class="number">1</span>&#125;</div><div class="line"><span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"resolved"</span>, [[PromiseValue]]: <span class="number">1</span>&#125;</div><div class="line"><span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"resolved"</span>, [[PromiseValue]]: <span class="number">1</span>&#125;</div><div class="line"><span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"pending"</span>, [[PromiseValue]]: <span class="literal">undefined</span>&#125;</div></pre></td></tr></table></figure></p>
<p>很明显，<code>p4</code>是<code>pending</code>状态，与其他三个不同，因为<code>p4</code>的<code>resolve</code>中接收的参数是一个promise对象<code>p1</code>，<code>resolve</code>会对<code>p1</code>进行“拆箱”操作，这个过程是异步的。</p>
<p><strong>注</strong>：把基本数据类型转换为对应的引用类型的操作称为装箱，把引用类型转换为基本的数据类型称为拆箱。</p>
<h2 id="resolve-amp-reject-的区别"><a href="#resolve-amp-reject-的区别" class="headerlink" title="resolve() &amp; reject() 的区别"></a>resolve() &amp; reject() 的区别</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="built_in">Promise</span>.resolve(<span class="string">'resolve'</span>));</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  resolve(<span class="built_in">Promise</span>.reject(<span class="string">'reject'</span>));</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">const</span> p3 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">  reject(<span class="built_in">Promise</span>.resolve(<span class="string">'resolve'</span>));</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p1.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1-resolve:'</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p1-reject:'</span>, err);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p2.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2-resolve:'</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p2-reject:'</span>, err);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">p3.then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p3-resolve:'</span>, value);</div><div class="line">&#125;, (err) =&gt; &#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'p3-reject:'</span>, err);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><code>resolve</code>方法和<code>reject</code>方法除了在状态上有区别，处理方式上也有区别，<code>resolve</code>方法上面提到了会对<strong>promise对象</strong>“拆箱”，但是<code>reject</code>方法不会。</p>
<p><code>p3</code>没有“拆箱”操作，所以会最先输出，直接调用<code>reject</code>方法，输出<code>Promise.resolve(&#39;resolve&#39;)</code>对象<br><code>p1</code>会“拆箱”得到<code>Promise.resolve(&#39;resolve&#39;)</code>这个<strong>promise对象</strong>的状态和值，调用<code>resolve</code>方法。<br><code>p2</code>会“拆箱”得到<code>Promise.reject(&#39;reject&#39;)</code>这个<strong>promise对象</strong>的状态和值，因为得到的状态是<code>rejected</code>，所以会调用<code>reject</code>方法。</p>
<blockquote>
<p>输出</p>
</blockquote>
<figure class="highlight javascript"><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">p3-reject: <span class="built_in">Promise</span> &#123;[[PromiseStatus]]: <span class="string">"resolved"</span>, [[PromiseValue]]: <span class="string">"resolve"</span>&#125;</div><div class="line">p1-resolve: resolve</div><div class="line">p2-reject: reject</div></pre></td></tr></table></figure>
<h2 id="all-amp-race-amp-then-区别"><a href="#all-amp-race-amp-then-区别" class="headerlink" title="all() &amp; race() &amp; then() 区别"></a>all() &amp; race() &amp; then() 区别</h2><p><code>Promise.all()</code>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Promise</span>.all(iterable);</div></pre></td></tr></table></figure>
<p><code>Promise.race()</code>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Promise</span>.race(iterable)</div></pre></td></tr></table></figure>
<ul>
<li><code>iterable</code>: 可迭代对象，例如一个数组。</li>
</ul>
<figure class="highlight javascript"><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> timerPromisefy = <span class="function">(<span class="params">delay</span>) =&gt;</span> &#123;</div><div class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</div><div class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">      resolve(delay);</div><div class="line">    &#125;, delay);</div><div class="line">  &#125;);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">let</span> timerPromisefyReject = <span class="function">(<span class="params">delay</span>) =&gt;</span> &#123;</div><div class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</div><div class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">      reject(delay);</div><div class="line">    &#125;, delay);</div><div class="line">  &#125;);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="built_in">console</span>.time(<span class="string">'Promise all'</span>);</div><div class="line"><span class="built_in">Promise</span>.all([</div><div class="line">  timerPromisefy(<span class="number">1</span>),</div><div class="line">  timerPromisefy(<span class="number">7</span>),</div><div class="line">  timerPromisefy(<span class="number">10</span>),</div><div class="line">  timerPromisefy(<span class="number">9</span>)</div><div class="line">]).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.timeEnd(<span class="string">'Promise all'</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.time(<span class="string">'Promise then'</span>);</div><div class="line">timerPromisefy(<span class="number">1</span>).then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">  <span class="keyword">return</span> timerPromisefy(<span class="number">7</span>)</div><div class="line">&#125;).then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">  <span class="keyword">return</span> timerPromisefy(<span class="number">10</span>)</div><div class="line">&#125;).then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">  <span class="keyword">return</span> timerPromisefy(<span class="number">9</span>)</div><div class="line">&#125;).then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.timeEnd(<span class="string">'Promise then'</span>)</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.time(<span class="string">'Promise race'</span>);</div><div class="line"><span class="built_in">Promise</span>.race([</div><div class="line">  timerPromisefy(<span class="number">1</span>),</div><div class="line">  timerPromisefy(<span class="number">7</span>),</div><div class="line">  timerPromisefy(<span class="number">10</span>),</div><div class="line">  timerPromisefy(<span class="number">9</span>)</div><div class="line">]).then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</div><div class="line">  <span class="built_in">console</span>.timeEnd(<span class="string">'Promise race'</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><code>Promise.all()</code>方法返回一个<code>Promise</code>，当<code>iterable</code>参数中的 <em>promise</em> 并行执行，当所有 <em>promise</em> 都已经 <em>resolve</em> 了，返回 <em>resolved</em> 状态。当传递的 <em>promise</em> 包含一个 <em>reject</em> ,则返回 <em>rejected</em> 状态。<br>如果<code>Promise.all()</code>返回 <em>resolved</em> , 那么执行时间取决于执行最最慢的那个 <em>promise</em>；如果<code>Promise.all()</code>返回 <em>rejected</em> , 执行时间取决于第一个返回 <em>rejected</em> 的执行时间。</p>
<p><code>Promise.race()</code>方法返回一个<code>Promise</code>，当<code>iterable</code>参数中只要有一个 <em>promise</em> 状态被判定了，那么就返回该状态。<br>所以<code>Promise.race()</code>的执行时间取决于执行最快的那个 <em>promise</em>。</p>
<p><code>Promise.then()</code>方法的执行时间，是每个链式调用总时间之和。</p>
<blockquote>
<p>输出<br><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">Promise race: 2.3232421875ms</div><div class="line">Promise all: 3.675048828125ms</div><div class="line">Promise then: 31.32373046875ms</div></pre></td></tr></table></figure></p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;什么是Promise&quot;&gt;&lt;a href=&quot;#什么是Promise&quot; class=&quot;headerlink&quot; title=&quot;什么是Promise&quot;&gt;&lt;/a&gt;什么是&lt;strong&gt;Promise&lt;/strong&gt;&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;Promise&lt;/strong&gt;的核心理念是一个异步操作的结果，&lt;strong&gt;Promise&lt;/strong&gt;包含两部分&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;[[PromiseStates]]&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;[[PromiseValue]]&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Promise&lt;/strong&gt;状态三种可能：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;pending&lt;/code&gt;: 悬而未决&lt;/li&gt;
&lt;li&gt;&lt;code&gt;resolved&lt;/code&gt;: 决定&lt;/li&gt;
&lt;li&gt;&lt;code&gt;rejected&lt;/code&gt;: 拒绝&lt;/li&gt;
&lt;/ul&gt;
&lt;img src=&quot;/2017/12/07/Promise深入理解/state.png&quot; alt=&quot;Promise状态&quot; title=&quot;Promise状态&quot;&gt;
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://yeaseonzhang.github.io/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>CSS单位全解</title>
    <link href="https://yeaseonzhang.github.io/2017/11/24/CSS%E5%8D%95%E4%BD%8D%E5%85%A8%E8%A7%A3/"/>
    <id>https://yeaseonzhang.github.io/2017/11/24/CSS单位全解/</id>
    <published>2017-11-24T13:33:07.000Z</published>
    <updated>2017-11-23T16:47:07.962Z</updated>
    
    <content type="html"><![CDATA[<h2 id="对于css单位的认识"><a href="#对于css单位的认识" class="headerlink" title="对于css单位的认识"></a>对于css单位的认识</h2><p>对于网页布局的单位，只知道<code>px</code>是仅仅不够的，还需要知道其他几个比较常见的单位，特别是css3推出的一些新的度量单位。</p>
<a id="more"></a>
<h2 id="em"><a href="#em" class="headerlink" title="em"></a>em</h2><p><code>em</code>是一种相对单位，它相对于父元素的字体大小。</p>
<p><code>em</code>常用于存在缩放需求时使用，比如在多行文本段落中，如果行高设置为<code>line-height: 18px</code>，如果文字的大小因为缩放发生改变，行高值是不会随之改变的，一直都是<code>18px</code>，如果将行高设置成一种相对值<code>line-height: 1.2em</code>，那么此时的行高值就会随着字体的大小改变而变化。</p>
<p>因为<code>em</code>是相对于父元素的字体大小，所以该单位存在明显的嵌套层级关系，浏览器默认的字体大小是<code>16px</code>，因此<code>1em = 16px</code>，需要注意的是<strong>chrome</strong>浏览器能够显示的最小字体是<code>12px</code>，当字体大小设置小于<code>12px</code>字体将按照<code>12px</code>显示。</p>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="MOowbV" data-default-tab="jjresult" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="em" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/MOowbV/" target="_blank" rel="external">em</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<h2 id="rem"><a href="#rem" class="headerlink" title="rem"></a>rem</h2><p><code>rem</code>(<strong>root em</strong>)是一种相对单位，和<code>em</code>不同点是<code>rem</code>相对于根元素<code>html</code>的字体大小。</p>
<p>利用这个特性，我们常常使用<code>rem</code>单位进行移动端页面的布局。</p>
<p><code>rem</code>布局的本质是等比缩放，一般是基于宽度。</p>
<img src="/2017/11/24/CSS单位全解/rem.png" alt="rem浏览器兼容性" title="rem浏览器兼容性">
<table>
<thead>
<tr>
<th>兼容性</th>
<th>iOS</th>
<th>Android</th>
</tr>
</thead>
<tbody>
<tr>
<td> rem</td>
<td>4.1+</td>
<td>2.1+</td>
</tr>
</tbody>
</table>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="YEQmjJ" data-default-tab="result" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="rem" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/YEQmjJ/" target="_blank" rel="external">rem</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assetsi/embed/ei.js"></script>

<p>现在移动端设计稿的尺寸大多为以iPhone6为基准的<code>750px</code>，首先将页面划分为100份，每一份的宽度为<code>npx</code>, 设置<code>1rem = 10n</code>，所以以<code>750px</code>为基准的话，每份就是<code>7.5px</code>，<code>1rem</code>就对应<code>75px</code>。但这仅仅只能适配宽度为<code>750px</code>的设备，所以通过加载页面时动态计算设备的尺寸来，修改<code>html</code>的<code>font-size</code>值，就能实现页面缩放适配。</p>
<p>最简单设置rem基准值的方法。<br><figure class="highlight js"><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="built_in">document</span>.addEventListener(<span class="string">'DOMContentLoaded'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">  <span class="keyword">var</span> rem = <span class="built_in">window</span>.innerWidth / <span class="number">10</span> + <span class="string">'px'</span>;</div><div class="line">  <span class="built_in">document</span>.getElementsByTagName(<span class="string">'html'</span>)[<span class="number">0</span>].style.fontSize = rem;</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<p>使用<strong>scss</strong>将<code>px</code>转换为<code>rem</code>值<br><figure class="highlight scss"><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">@function px2rem (<span class="variable">$px</span>) &#123;</div><div class="line">  <span class="variable">$rem</span>: <span class="number">75px</span>;</div><div class="line">  @return (<span class="variable">$px</span> / <span class="variable">$rem</span>) + rem;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>也有人建议将设计稿宽度划分成100份，每一份就是一个<code>rem</code>单位，那么<code>750px</code>宽度的设计稿，对应的<code>html</code>的<code>font-size = 1rem = 7.5px</code>，方便兼容<code>vh/vw</code>单位。但是不建议这么做，你知道什么吗？</p>
<h2 id="vh-vw"><a href="#vh-vw" class="headerlink" title="vh/vw"></a>vh/vw</h2><p><code>vh/vw</code>单位类似于百分比单位不同之处在于<code>vh/vw</code>单位的布局不依赖于父级的宽高，而是相对于视口的宽高。<br><code>1vh</code>等于1%的视口高度，<code>1vw</code>等于1%的视口宽度。若视口宽度是<code>750px</code>，那么<code>1vw</code>就是<code>7.5px</code>。</p>
<img src="/2017/11/24/CSS单位全解/v-unit.png" alt="视口单位兼容性" title="视口单位兼容性">
<p>目前移动端高端机型对于视口单位基本全面支持。</p>
<table>
<thead>
<tr>
<th>兼容性</th>
<th>iOS</th>
<th>Android</th>
</tr>
</thead>
<tbody>
<tr>
<td> vw</td>
<td>6.1+</td>
<td>4.4+</td>
</tr>
</tbody>
</table>
<p></p><p data-height="705" data-theme-id="0" data-slug-hash="JOvLOy" data-default-tab="result" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="v-unit" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/JOvLOy/" target="_blank" rel="external">v-unit</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>


<p><strong>注</strong>：不同浏览器在获取视口的方法不同<br>IE9+、Firefox、Safari、Opera和Chrome均提供了4个属性<code>innerWidth</code>、<code>innerHeight</code>、<code>outerWidth</code>和<code>outerHeight</code>。</p>
<ul>
<li>IE9+、Safari和Firefox中，<code>outerWidth</code>和<code>outerHeight</code>返回浏览器窗口本身的尺寸，而<code>innerWidth</code>和<code>innerHeight</code>则表示该容器中页面视图区的大小（减去边框宽度）</li>
<li>Chrome中，<code>inner*</code>和<code>outer*</code>返回相同的值，即视口大小而非浏览器窗口的大小。</li>
<li>在IE、Firefox、Safari、Opera和Chrome中，都能通过<code>document.documentElement.clientWidth</code>和<code>document.documentElement.clientHeight</code>中保存了页面视口信息。</li>
</ul>
<p>获取页面视口大小<br><figure class="highlight js"><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"><span class="keyword">var</span> pageWidth = <span class="built_in">window</span>.innerWidth,</div><div class="line">  pageHeight = <span class="built_in">window</span>.innerHeight;</div><div class="line"></div><div class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> pageWidth != <span class="string">'number'</span>) &#123;</div><div class="line">  <span class="keyword">if</span> (<span class="built_in">document</span>.compatMode == <span class="string">'CSS1Compat'</span>) &#123; <span class="comment">// 浏览器标准模式</span></div><div class="line">    pageWidth = <span class="built_in">document</span>.documentElement.clientWidth;</div><div class="line">    pageHeight = <span class="built_in">document</span>.documentElement.clientHeight;</div><div class="line">  &#125; <span class="keyword">else</span> &#123;  <span class="comment">// IE6 混杂模式</span></div><div class="line">    pageWidth = <span class="built_in">document</span>.body.clientWidth;</div><div class="line">    pageHeight = <span class="built_in">document</span>.doby.clientHeight;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>其实，<code>vw</code>还可以和<code>rem</code>方案结合，这样就不需要js计算来设置<code>html</code>字体大小。<br><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></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">html</span> &#123;</div><div class="line">  <span class="attribute">font-size</span>: <span class="number">1vw</span></div><div class="line">&#125;</div><div class="line"><span class="selector-tag">p</span> &#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">15rem</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>往往一份设计稿为了兼容大屏设备，我们会采取限制布局的最大宽度。大于这个宽度的话页面居中并且，两边会留白。这个时候<code>vw</code>单位就无法满足我们的需求了。</p>
<h2 id="vmin-vmax"><a href="#vmin-vmax" class="headerlink" title="vmin/vmax"></a>vmin/vmax</h2><p><code>vmin</code>是指<code>vh</code>和<code>vw</code>中较小的那一个的大小，当然<code>vmax</code>就是<code>vh</code>和<code>vw</code>中较大的那一个。</p>
<p>例如，浏览器视口宽<code>1100px</code>、高<code>700px</code>，那么<code>1vmin = 7px; 1vmax = 11px</code>；如果浏览器视口宽<code>800px</code>，高<code>1080px</code>，那么<code>1vmin = 8px; 1vmax = 10.8px</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></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.box</span> &#123;</div><div class="line">  <span class="attribute">height</span>: <span class="number">100vmin</span>;</div><div class="line">  <span class="attribute">width</span>: <span class="number">100vmin</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<img src="/2017/11/24/CSS单位全解/vmin.png" alt="vmin.png" title="">
<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></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.box</span> &#123;</div><div class="line">  <span class="attribute">height</span>: <span class="number">100vmax</span>;</div><div class="line">  <span class="attribute">width</span>: <span class="number">100vmax</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<img src="/2017/11/24/CSS单位全解/vmax.png" alt="vmax.png" title="">
<h2 id="ch-和-ex"><a href="#ch-和-ex" class="headerlink" title="ch 和 ex"></a>ch 和 ex</h2><p><code>ch</code>和<code>ex</code>单位都是基于当前字体的特定单位。</p>
<p><code>ch</code>单位，被定义为当前字体<code>0</code>字符的宽度。所以如果你使用的是等宽字体，那么你就可以直接定义一个盒子能够容纳多少个字符。</p>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="EbLLPQ" data-default-tab="result" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="ch" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/EbLLPQ/" target="_blank" rel="external">ch</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<p><code>ex</code>单位，被定义为当前字体<code>x</code>字符高度。这个单位通常用于排版微调，确保精确控制。</p>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="WXJJMR" data-default-tab="css,result" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="ex" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/WXJJMR/" target="_blank" rel="external">ex</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><ul>
<li><p><code>em</code>单位，还是老老实实作为字体/行高单位，如果用做布局使用，会牵一发而动全身，一个节点变化导致后代元素都需要重新计算</p>
</li>
<li><p><code>rem</code>单位，需要结合<code>js</code>脚本动态设置<code>html</code>字体大小，如果用户禁用了js(少数情况)，这种时候我们可以选择<code>&lt;noscript&gt;开启JavaScript，获得更高的用户体验&lt;/noscript&gt;</code>；第二个方案就是使用媒体查询，为主流尺寸的设备设置<code>html</code>字体大小</p>
</li>
<li><p><code>vh/vw/vmin/vmax</code>单位，对于设备系统浏览器要求比较高，如果不考虑兼容低版本浏览器，可以选择使用。当你选择使用<code>vw/vh</code>单位的时候，配合<code>calc</code>计算属性会更精确完成布局，例如<code>width: calc(50vw - 40px)</code></p>
</li>
<li><p><code>ch/ex</code>单位，使用的频率不高。如果使用的是等宽字体，<code>ch</code>单位可以用来布局，但是中文字体和英文字体等宽肯定是不一样宽的，所以还是不要考虑用来布局了。<code>ex</code>单位的应用场景，基本上使用<code>em</code>单位都能完成，所以也是一个可用可不用的单位。</p>
</li>
</ul>
<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul>
<li><p><a href="https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573" target="_blank" rel="external">7 CSS Units You Might Not Know About</a></p>
</li>
<li><p><a href="https://www.w3.org/Style/Examples/007/units.zh_HK.html" target="_blank" rel="external">網頁樣式表 CSS提示以及技巧</a></p>
</li>
<li><a href="http://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/" target="_blank" rel="external">Rem布局的原理解析</a></li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;对于css单位的认识&quot;&gt;&lt;a href=&quot;#对于css单位的认识&quot; class=&quot;headerlink&quot; title=&quot;对于css单位的认识&quot;&gt;&lt;/a&gt;对于css单位的认识&lt;/h2&gt;&lt;p&gt;对于网页布局的单位，只知道&lt;code&gt;px&lt;/code&gt;是仅仅不够的，还需要知道其他几个比较常见的单位，特别是css3推出的一些新的度量单位。&lt;/p&gt;
    
    </summary>
    
    
      <category term="css" scheme="https://yeaseonzhang.github.io/tags/css/"/>
    
  </entry>
  
  <entry>
    <title>前端跨域常用方法</title>
    <link href="https://yeaseonzhang.github.io/2017/10/12/%E5%89%8D%E7%AB%AF%E8%B7%A8%E5%9F%9F%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/"/>
    <id>https://yeaseonzhang.github.io/2017/10/12/前端跨域常用方法/</id>
    <published>2017-10-11T16:38:06.000Z</published>
    <updated>2017-10-12T14:37:42.118Z</updated>
    
    <content type="html"><![CDATA[<img src="/2017/10/12/前端跨域常用方法/security.png" alt="security.png" title="">
<p>在开发过程中经常会涉及跨域问题，解决跨域问题的方案也有很多种，接下来就来梳理一下前端跨域的常用方法。</p>
<h2 id="同源策略"><a href="#同源策略" class="headerlink" title="同源策略"></a>同源策略</h2><p>何为<strong>跨域</strong>，<strong>跨域</strong>是相对于同源而言。协议、域名和端口均相同，则为<strong>同源</strong>。<br>浏览器通过<strong>同源策略</strong>限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制，摘抄自<a href="https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy" target="_blank" rel="external">MDN</a>。</p>
<a id="more"></a>
<h2 id="常见解决方案"><a href="#常见解决方案" class="headerlink" title="常见解决方案"></a>常见解决方案</h2><h3 id="document-domain"><a href="#document-domain" class="headerlink" title="document.domain"></a>document.domain</h3><p>这种方案主要用于主域相同，子域不同的跨域情况。例如: <code>https://jdc.jd.com/</code> 和 <code>https://www.jd.com/</code>。</p>
<p>通过在<a href="https://www.jd.com/" target="_blank" rel="external">https://www.jd.com/</a>打开一个<a href="https://jdc.jd.com/" target="_blank" rel="external">https://jdc.jd.com/</a>，此时JDC的域名是<code>jdc.jd.com/</code>，通过控制台执行<code>document.domain = &#39;jd.com&#39;</code>;。强制设置主域，实现同源。</p>
<figure class="highlight javascript"><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="keyword">var</span> jdc = <span class="built_in">window</span>.open(<span class="string">'https://jdc.jd.com/'</span>);</div><div class="line"><span class="comment">// JDC 页面加载完成后执行</span></div><div class="line"><span class="keyword">var</span> divs = jdc.document.getElementsByTagName(<span class="string">'div'</span>);</div><div class="line"></div><div class="line">$(divs).css(<span class="string">'border'</span>, <span class="string">'1px solid red'</span>);</div></pre></td></tr></table></figure>
<p>通常的做法是通过<code>iframe</code>加载一个跨域页面资源。因为<code>window.open</code>这个方法在浏览器中会被当做谈广告禁止掉。</p>
<blockquote>
<p><a href="http://domain.com/index.html" target="_blank" rel="external">http://domain.com/index.html</a></p>
</blockquote>
<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">iframe</span> <span class="attr">id</span>=<span class="string">"sub"</span> <span class="attr">src</span>=<span class="string">"http://sub.domain.com/index.html"</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">var</span> username = <span class="string">'yeseonzhang'</span>;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<blockquote>
<p><a href="http://sub.domain.com/index.html" target="_blank" rel="external">http://sub.domain.com/index.html</a></p>
</blockquote>
<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">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="built_in">document</span>.domain = <span class="string">'domain.com'</span>;</div><div class="line">  <span class="built_in">console</span>.log(<span class="built_in">window</span>.parent.username);</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="location-hash"><a href="#location-hash" class="headerlink" title="location.hash"></a>location.hash</h3><p>这种跨域方法主要是通过<strong>设置/监听</strong>url的hash部分，来实现跨域，同时需要借助第三个页面来进行辅助。</p>
<img src="/2017/10/12/前端跨域常用方法/location-hash.png" alt="location-hash.png" title="">
<p>上图就是三个页面的包含关系，以及<code>hash</code>的传递过程。</p>
<blockquote>
<p><a href="http://domain-a.com/a.html" target="_blank" rel="external">http://domain-a.com/a.html</a></p>
</blockquote>
<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></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">id</span>=<span class="string">"iframe-b"</span> <span class="attr">src</span>=<span class="string">"http://domain-b.com/b.html"</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">var</span> bPage = <span class="built_in">document</span>.getElementById(<span class="string">'iframe-b'</span>);</div><div class="line"></div><div class="line">  <span class="comment">/* step 1 */</span></div><div class="line">  bPage.src = bPage.src + <span class="string">'#user=yeaseonzhang'</span>;</div><div class="line"></div><div class="line">  <span class="function"><span class="keyword">function</span> <span class="title">cb</span> (<span class="params">res</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(res);</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<blockquote>
<p><a href="http://domain-b.com/b.html" target="_blank" rel="external">http://domain-b.com/b.html</a></p>
</blockquote>
<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">iframe</span> <span class="attr">id</span>=<span class="string">"iframe-c"</span> <span class="attr">src</span>=<span class="string">"http://domain-a.com/c.html"</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">var</span> cPage = <span class="built_in">document</span>.getElementById(<span class="string">'iframe-c'</span>);</div><div class="line"></div><div class="line">  <span class="built_in">window</span>.onhashchange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="comment">/* step 2 */</span></div><div class="line">    cPage.src = cPage.src + location.hash;</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<blockquote>
<p><a href="http://domain-a.com/c.html" target="_blank" rel="external">http://domain-a.com/c.html</a></p>
</blockquote>
<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></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="built_in">window</span>.onhashchange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="comment">/* step 3 */</span></div><div class="line">     <span class="built_in">window</span>.parent.parent.cb(<span class="string">'success: '</span> + location.hash);</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>由于<strong>a页面</strong>和<strong>c页面</strong>是同域资源，所以<strong>c页面</strong>可以通过<code>window.parent.parent</code>访问<strong>a页面</strong>资源。</p>
<h3 id="window-name"><a href="#window-name" class="headerlink" title="window.name"></a>window.name</h3><p>这个方案类似<code>location.hash</code>，需要通过第三个页面进行辅助。<br><code>window.name</code>属性是用来获取/设置窗口的名称。需要注意的是，当前窗口的<code>window.name</code>并不会因为页面的重载和跳转而更改，所以可以利用这个特性将跨域的<code>window.name</code>通过重定向到同域页面进行读取。</p>
<img src="/2017/10/12/前端跨域常用方法/window-name.png" alt="window-name.png" title="">
<blockquote>
<p><a href="http://domain-a.com/a.html" target="_blank" rel="external">http://domain-a.com/a.html</a></p>
</blockquote>
<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">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">var</span> iframe = <span class="built_in">document</span>.createElement(<span class="string">'iframe'</span>);</div><div class="line">  <span class="comment">/* step 1 加载跨域页面 */</span></div><div class="line">  iframe.src = <span class="string">'http://domain-b.com/b.html'</span>;</div><div class="line">  <span class="keyword">var</span> domain = <span class="string">'diff'</span>;</div><div class="line"></div><div class="line">  <span class="comment">/* 监听iframe加载 */</span></div><div class="line">  iframe.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span> (<span class="string">'diff'</span> == domain) &#123;</div><div class="line">      <span class="comment">/* step 2 重定向到同域页面 */</span></div><div class="line">      iframe.contentWindow.location = <span class="string">'http://www.domain-a.com/c.html'</span>;</div><div class="line">      domain = <span class="string">'same'</span>;</div><div class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="string">'same'</span> == domain) &#123;</div><div class="line">      <span class="comment">/* 获取同域资源的window.name信息 */</span></div><div class="line">      cb(iframe.contentWindow.name);</div><div class="line">      <span class="comment">/* 清空数据 */</span></div><div class="line">      iframe.contentWindow.name = <span class="string">''</span>;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  <span class="function"><span class="keyword">function</span> <span class="title">cb</span> (<span class="params">res</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="built_in">JSON</span>.parse(res));</div><div class="line">  &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<blockquote>
<p><a href="http://domain-b.com/b.html" target="_blank" rel="external">http://domain-b.com/b.html</a></p>
</blockquote>
<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></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">scirpt</span>&gt;</span></div><div class="line">  /* 写入相关数据 */</div><div class="line">  var obj = &#123;</div><div class="line">    username: 'yeaseonzhang'</div><div class="line">  &#125;</div><div class="line">  window.name = JSON.stringify(obj);</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<blockquote>
<p><a href="http://domain-a.com/c.html" target="_blank" rel="external">http://domain-a.com/c.html</a></p>
</blockquote>
<p>同域<strong>c页面</strong>，可以是一个空页面，不需要进行任何操作。</p>
<h3 id="JSONP"><a href="#JSONP" class="headerlink" title="JSONP"></a>JSONP</h3><p><strong>JSONP</strong>(JSON with Padding)是<strong>JSON</strong>的一种使用方式。这种方式允许用户传递一个<code>callback</code>参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据。</p>
<p>众所周知，html页面中所有带有<code>src</code>属性的标签(<code>&lt;img&gt;</code>,<code>&lt;script&gt;</code>和<code>iframe</code>)都拥有跨域能力。所以最简单的实现方式就是动态加载JS。</p>
<blockquote>
<p>客户端</p>
</blockquote>
<figure class="highlight js"><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"><span class="function"><span class="keyword">function</span> <span class="title">todo</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'The author is: '</span>+ data.name);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</div><div class="line"><span class="comment">/* callback参数，用来指定回调函数的名字。 */</span></div><div class="line">script.src = <span class="string">'http://www.yeaseonzhang.com/author?callback=todo'</span>;</div><div class="line"><span class="built_in">document</span>.body.appendChild(script);</div></pre></td></tr></table></figure>
<blockquote>
<p>服务端</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">/* 服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。 */</div><div class="line">todo(&#123;&quot;name&quot;: &quot;yeaseonzhang&quot;&#125;);</div></pre></td></tr></table></figure>
<p><code>todo()</code>函数会被作为全局函数来执行，只要定义了<code>todo()</code>函数，该函数就会被立即调用。</p>
<h3 id="postMessage"><a href="#postMessage" class="headerlink" title="postMessage"></a>postMessage</h3><p><code>window.postMessage</code>是HTML5中一个安全的，基于事件的消息API。</p>
<img src="/2017/10/12/前端跨域常用方法/postmessage.png" alt="postmessage.png" title="">
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">otherWindow.postMessage(message, targetOrigin, [transfer]);</div></pre></td></tr></table></figure>
<p><code>postMessage()</code>，方法包含三个参数：</p>
<ul>
<li><code>message</code>: 消息内容</li>
<li><code>targetOrigin</code>: 接受消息窗口的源，即”协议 + 域名 + 端口”。也可以设置为通配符<code>*</code>，向所有窗口发送</li>
<li><code>transfer</code>: 可选参数(布尔值)，是一串和message 同时传递的<code>Transferable</code>对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。</li>
</ul>
<p><strong>发送者</strong>和<strong>接收者</strong>都可以通过<code>message</code>事件，监听对方的消息。<code>message</code>事件的事件对象<code>event</code>包含三个属性：</p>
<ul>
<li><code>event.source</code>: 发送消息的窗口对象的引用，可以用此在两个窗口建立双向通信。</li>
<li><code>event.origin</code>: 发送消息的URI</li>
<li><code>event.data</code>: 消息内容</li>
</ul>
<blockquote>
<p>发送者： <a href="http://domain-a.com/a.html" target="_blank" rel="external">http://domain-a.com/a.html</a></p>
</blockquote>
<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></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">var</span> newWindow = <span class="built_in">window</span>.open(<span class="string">'http://domain-b.com/b.html'</span>);</div><div class="line">  <span class="comment">/* 向b.html发送消息 */</span></div><div class="line">  newWindow.postMessage(<span class="string">'Hello'</span>, <span class="string">'http://domain-b.com/b.html'</span>);</div><div class="line"></div><div class="line">  <span class="comment">/* 双向通信，接收b.html的回复消息 */</span></div><div class="line">  <span class="keyword">var</span> onmessage = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</div><div class="line">    <span class="keyword">var</span> data = event.data;</div><div class="line">    <span class="keyword">var</span> origin = event.origin;</div><div class="line">    <span class="keyword">var</span> source = event.source;</div><div class="line">    <span class="keyword">if</span> (origin == <span class="string">'http://domain-b.com/b.html'</span>) &#123;</div><div class="line">      <span class="built_in">console</span>.log(data); <span class="comment">//Nice to see you!</span></div><div class="line">    &#125;</div><div class="line">  &#125;;</div><div class="line">  <span class="built_in">window</span>.addEventListener(<span class="string">'message'</span>, onmessage, <span class="literal">false</span>);</div><div class="line"><span class="xml"><span class="tag">&lt;/<span class="name">scirpt</span>&gt;</span></span></div></pre></td></tr></table></figure>
<blockquote>
<p>接收者：<a href="http://domain-b.com/b.html" target="_blank" rel="external">http://domain-b.com/b.html</a></p>
</blockquote>
<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></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">  <span class="keyword">var</span> onmessage = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</div><div class="line">    <span class="keyword">var</span> data = event.data;</div><div class="line">    <span class="keyword">var</span> origin = event.origin;</div><div class="line">    <span class="keyword">var</span> source = event.source;</div><div class="line">    <span class="keyword">if</span> (origin == <span class="string">'http://domain-a.com/a.html'</span>) &#123;</div><div class="line">      <span class="built_in">console</span>.log(data); <span class="comment">//Hello</span></div><div class="line">      <span class="comment">/* 回复a.html的消息 */</span></div><div class="line">      source.postMessage(<span class="string">'Nice to see you!'</span>, <span class="string">'http://domain-a.com/a.html'</span>);</div><div class="line">    &#125;</div><div class="line">  &#125;;</div><div class="line">  <span class="built_in">window</span>.addEventListener(<span class="string">'message'</span>, onmessage, <span class="literal">false</span>);</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="WebSocket"><a href="#WebSocket" class="headerlink" title="WebSocket"></a>WebSocket</h3><p><code>WebSocket</code>是一种HTML5的一种新的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案，详细介绍请访问<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket" target="_blank" rel="external">MDN</a>。</p>
<img src="/2017/10/12/前端跨域常用方法/websocket.png" alt="websocket.png" title="">
<figure class="highlight js"><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></pre></td><td class="code"><pre><div class="line"><span class="comment">/* websocket协议为ws/wss, 类似http/https的区别 */</span></div><div class="line">wsUrl = <span class="string">'wss://127.0.0.1:8090/ws/'</span>;</div><div class="line"></div><div class="line"><span class="comment">/* 发送 */</span></div><div class="line">ws = <span class="keyword">new</span> WebSocket(wsUrl);</div><div class="line"></div><div class="line"><span class="comment">/* 连接成功建立时调用 */</span></div><div class="line">ws.onopen = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">"websocket command onopen"</span>);</div><div class="line">  <span class="keyword">var</span> msg = &#123;</div><div class="line">    <span class="attr">username</span>: <span class="string">'YeaseonZhang'</span></div><div class="line">  &#125;</div><div class="line">  <span class="comment">/* 通过 send() 方法向服务端发送消息，参数必须为字符串 */</span></div><div class="line">  ws.send(<span class="built_in">JSON</span>.stringify(msg));</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="comment">/* 服务端向客户端发送消息时调用 */</span></div><div class="line">ws.onmessage = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</div><div class="line">  <span class="comment">/* event.data包含了服务端发送过来的消息 */</span></div><div class="line">  <span class="built_in">console</span>.log(<span class="string">"websocket command onmessage: "</span> + event.data);</div><div class="line">  <span class="keyword">if</span> (event.data === <span class="string">'success'</span>) &#123;</div><div class="line">    <span class="comment">/* 通过 close() 方法断开websocket连接 */</span></div><div class="line">    ws.close();</div><div class="line">  &#125;</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="comment">/* 连接被关闭时调用 */</span></div><div class="line">ws.onclose = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">"websocket command onclose: "</span> + event.data);</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="comment">/* 出现错误时调用 */</span></div><div class="line">ws.onerror = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">"websocket command onerror: "</span> + event.data);</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p><code>WebSocket</code>的优势是除了可以实现跨域，还有就是可以保持长连接，而不需要通过轮询实现实时性。</p>
<h3 id="CORS"><a href="#CORS" class="headerlink" title="CORS"></a>CORS</h3><p><code>CORS</code>是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。</p>
<p>只需要后端同学支持就ok，前端不需要做很多额外工作(除了携带<code>cookie</code>)。</p>
<p>只要服务器返回的相应中包含头部信息<code>Access-Control-Allow-Origin: domain-name</code>，<code>domain-name</code>为允许跨域的域名，也可以设置成<code>*</code>，浏览器就会允许本次跨域请求。</p>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>以上就是我所了解的跨域的解决方案，希望对你有所帮助。</p>
]]></content>
    
    <summary type="html">
    
      &lt;img src=&quot;/2017/10/12/前端跨域常用方法/security.png&quot; alt=&quot;security.png&quot; title=&quot;&quot;&gt;
&lt;p&gt;在开发过程中经常会涉及跨域问题，解决跨域问题的方案也有很多种，接下来就来梳理一下前端跨域的常用方法。&lt;/p&gt;
&lt;h2 id=&quot;同源策略&quot;&gt;&lt;a href=&quot;#同源策略&quot; class=&quot;headerlink&quot; title=&quot;同源策略&quot;&gt;&lt;/a&gt;同源策略&lt;/h2&gt;&lt;p&gt;何为&lt;strong&gt;跨域&lt;/strong&gt;，&lt;strong&gt;跨域&lt;/strong&gt;是相对于同源而言。协议、域名和端口均相同，则为&lt;strong&gt;同源&lt;/strong&gt;。&lt;br&gt;浏览器通过&lt;strong&gt;同源策略&lt;/strong&gt;限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制，摘抄自&lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;MDN&lt;/a&gt;。&lt;/p&gt;
    
    </summary>
    
    
      <category term="web安全" scheme="https://yeaseonzhang.github.io/tags/web%E5%AE%89%E5%85%A8/"/>
    
  </entry>
  
  <entry>
    <title>2017前端面试题及答案总结</title>
    <link href="https://yeaseonzhang.github.io/2017/09/17/2017%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E5%8F%8A%E7%AD%94%E6%A1%88%E6%80%BB%E7%BB%93/"/>
    <id>https://yeaseonzhang.github.io/2017/09/17/2017前端面试题及答案总结/</id>
    <published>2017-09-17T13:42:57.000Z</published>
    <updated>2017-09-25T15:10:53.071Z</updated>
    
    <content type="html"><![CDATA[<p>“金三银四，金九银十”，用来形容求职最好的几个月。但是随着行业的饱和，初中级前端er就业形势不容乐观。</p>
<p>行业状态不可控，我们能做的当然只是让自己变得更加具有竞争力。</p>
<p>今年自己也用了几个月的时间来准备笔记面试，巩固基础知识。特此将自己在这个过程总结的题目分享出来，希望对于求职和准备求职的同学有所帮助。</p>
<a id="more"></a>
<h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2><h3 id="列举不同的清除浮动的技巧"><a href="#列举不同的清除浮动的技巧" class="headerlink" title="列举不同的清除浮动的技巧"></a>列举不同的清除浮动的技巧</h3><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></pre></td><td class="code"><pre><div class="line">/* 1.添加新元素 */</div><div class="line">&lt;div class=&quot;outer&quot;&gt;</div><div class="line">  &lt;div class=&quot;div1&quot;&gt;&lt;/div&gt;</div><div class="line">  &lt;div class=&quot;div2&quot;&gt;&lt;/div&gt;</div><div class="line">  &lt;div class=&quot;div3&quot;&gt;&lt;/div&gt;</div><div class="line">  &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</div><div class="line">&lt;/div&gt;</div><div class="line">.clearfix &#123;</div><div class="line">  clear: both;</div><div class="line">&#125;</div><div class="line"></div><div class="line">/* 2.为父元素增加样式 */</div><div class="line">.clearfix &#123;</div><div class="line">  overflow: auto;</div><div class="line">  zoom: 1; // 处理兼容性</div><div class="line">&#125;</div><div class="line"></div><div class="line">/* 3.:after 伪元素方法 (作用于父元素) */</div><div class="line">.outer &#123;</div><div class="line">  zoom: 1;</div><div class="line">  &amp;:after &#123;</div><div class="line">    display: block;</div><div class="line">    height: 0;</div><div class="line">    clear: both;</div><div class="line">    content: &apos;.&apos;;</div><div class="line">    visibillity: hidden;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="一像素边框"><a href="#一像素边框" class="headerlink" title="一像素边框"></a>一像素边框</h3><p>使用<code>sass</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><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></pre></td><td class="code"><pre><div class="line">/* 定义 */</div><div class="line">@mixin border-1px ($color) &#123;</div><div class="line">    position: relative;</div><div class="line">    &amp;:after &#123;</div><div class="line">        display: block;</div><div class="line">        position: absolute;</div><div class="line">        left: 0;</div><div class="line">        bottom: 0;</div><div class="line">        width: 100%;</div><div class="line">        border-top: 1px solid $color;</div><div class="line">        context: &apos;&apos;;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">@media (-webkit-min-device-pixel-radio: 1.5), (min-device-pixel-radio: 1.5) &#123;</div><div class="line">    border-1px &#123;</div><div class="line">        &amp;:after &#123;</div><div class="line">            -webkit-transform: scaleY(0.7);</div><div class="line">            transform: scaleY(0.7);</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) &#123;</div><div class="line">    border-1px &#123;</div><div class="line">        &amp;:after &#123;</div><div class="line">            -webkit-transform: scaleY(0.5);</div><div class="line">            transform: scaleY(0.5);</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">/* 使用方式 */</div><div class="line">@inclue border-1px(rgba(7, 17, 27, .1));</div></pre></td></tr></table></figure>
<h3 id="形成BFC-Block-Formatting-Context-的几种方式"><a href="#形成BFC-Block-Formatting-Context-的几种方式" class="headerlink" title="形成BFC(Block Formatting Context)的几种方式"></a>形成<strong>BFC</strong>(Block Formatting Context)的几种方式</h3><p>BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。</p>
<ul>
<li><code>float</code>为 <code>left|right</code></li>
<li><code>overflow</code>为 <code>hidden|auto|scroll</code></li>
<li><code>display</code>为 <code>table-cell|table-caption|inline-block</code></li>
<li><code>position</code>为 <code>absolute|fixed</code></li>
</ul>
<h3 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h3><ul>
<li><p><a href="https://yeaseonzhang.github.io/2017/07/05/CSS布局/"><strong>圣杯布局</strong>和<strong>双飞翼布局</strong></a></p>
</li>
<li><p>左定宽右自适应宽度，并且等高布局(最小高度200px)</p>
</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><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></pre></td><td class="code"><pre><div class="line">/* HTML */</div><div class="line">&lt;div class=&quot;container&quot;&gt;</div><div class="line">  &lt;div class=&quot;left&quot;&gt;Left silder&lt;/div&gt;</div><div class="line">  &lt;div class=&quot;content&quot;&gt;Main content&lt;/div&gt;</div><div class="line">&lt;/div&gt;</div><div class="line"></div><div class="line">/* CSS */</div><div class="line">.container &#123;</div><div class="line">  overflow: hidden;</div><div class="line">&#125;</div><div class="line"></div><div class="line">.left &#123;</div><div class="line">  float: left；</div><div class="line">  width: 200px;</div><div class="line">  margin-bottom: -9999px;</div><div class="line">  padding-bottom: 9999px;</div><div class="line">  background-color: #eee;</div><div class="line">&#125;</div><div class="line"></div><div class="line">.content &#123;</div><div class="line">  margin-left: 200px;</div><div class="line">  margin-bottom: -9999px;</div><div class="line">  padding-bottom: 9999px;</div><div class="line">  background-color: #ccc;</div><div class="line">&#125;</div><div class="line"></div><div class="line">.left, .content &#123;</div><div class="line">  min-height: 200px;</div><div class="line">  height: auto !important;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h2><h3 id="async与defer区别"><a href="#async与defer区别" class="headerlink" title="async与defer区别"></a><code>async</code>与<code>defer</code>区别</h3><p>异步(async) 脚本将在其加载完成后立即执行，而 延迟(defer) 脚本将等待 HTML 解析完成后，并按加载顺序执行。</p>
<h3 id="location-replace-与location-assign-区别"><a href="#location-replace-与location-assign-区别" class="headerlink" title="location.replace()与location.assign()区别"></a><code>location.replace()</code>与<code>location.assign()</code>区别</h3><p><code>location.replace()</code>的url不会出现在history中</p>
<h3 id="new操作符"><a href="#new操作符" class="headerlink" title="new操作符"></a><code>new</code>操作符</h3><ul>
<li>创建一个空对象，并且<code>this</code>变量引用该对象，同时还继承了 该函数的原型</li>
<li>属性和方法被加入到<code>this</code>引用的对象中</li>
<li>新创建的对象由<code>this</code>所引用，并且最后隐式的返回<code>this</code></li>
</ul>
<h3 id="AMD-CMD-CommonJS"><a href="#AMD-CMD-CommonJS" class="headerlink" title="AMD CMD CommonJS"></a>AMD CMD CommonJS</h3><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></pre></td><td class="code"><pre><div class="line">/* AMD是RequireJS对模块化的定义</div><div class="line"> * CMD是seaJS对模块化的定义</div><div class="line"> * CommonJS是Node对模块化的规范</div><div class="line"> **/</div><div class="line"></div><div class="line">/* AMD 依赖关系前置 */</div><div class="line">define([&apos;./a&apos;, &apos;./b&apos;], function (a, b) &#123;</div><div class="line">    a.something();</div><div class="line">    b.something();</div><div class="line">&#125;)</div><div class="line"></div><div class="line">/* CMD 按需加载，依赖就近 */</div><div class="line">define(function (require, exports, module) &#123;</div><div class="line">    var a = require(&apos;./a&apos;);</div><div class="line">    a.something();</div><div class="line"></div><div class="line">    var b = require(&apos;./b&apos;);</div><div class="line">    b.something();</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<h4 id="DOM-操作"><a href="#DOM-操作" class="headerlink" title="DOM 操作"></a>DOM 操作</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><div class="line">18</div></pre></td><td class="code"><pre><div class="line">// 创建节点</div><div class="line">createDocumentFragment()</div><div class="line">createElement()</div><div class="line">createTextNode()</div><div class="line"></div><div class="line">// 添加 移除 替换 插入</div><div class="line">appendChild()</div><div class="line">removeChild()</div><div class="line">replaceChild()</div><div class="line">insertBefore()</div><div class="line"></div><div class="line">// 查找</div><div class="line">getElementsByTagName()</div><div class="line">getElementsByName()</div><div class="line">getElementsByClassName()</div><div class="line">getElementById()</div><div class="line">querySelector()</div><div class="line">querySelectorAll()</div></pre></td></tr></table></figure>
<h3 id="JS设置css样式的几种方式"><a href="#JS设置css样式的几种方式" class="headerlink" title="JS设置css样式的几种方式"></a>JS设置css样式的几种方式</h3><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">/* 1.直接设置style属性 */</div><div class="line">element.style.height = &apos;100px&apos;;</div><div class="line"></div><div class="line">/* 2.直接设置属性 */</div><div class="line">element.setAttribute(&apos;height&apos;, &apos;100px&apos;);</div><div class="line"></div><div class="line">/* 3.使用setAttribute设置style属性 */</div><div class="line">element.setAttribute(&apos;style&apos;, &apos;height: 100px !important&apos;);</div><div class="line"></div><div class="line">/* 4.使用setProperty设置属性，通过第三个参数设置important */</div><div class="line">element.style.setProperty(&apos;height&apos;, &apos;300px&apos;, &apos;important&apos;);</div><div class="line"></div><div class="line">/* 5.设置cssText */</div><div class="line">element.style.cssText += &apos;height: 100px !important&apos;;</div></pre></td></tr></table></figure>
<h3 id="阻止默认行为"><a href="#阻止默认行为" class="headerlink" title="阻止默认行为"></a>阻止默认行为</h3><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">function stopDefault( e ) &#123;</div><div class="line">    // 阻止默认浏览器动作(W3C)</div><div class="line">    if ( e &amp;&amp; e.preventDefault ) &#123;</div><div class="line">        e.preventDefault();</div><div class="line">    &#125; else &#123;</div><div class="line">        // IE中阻止函数器默认动作的方式</div><div class="line">        window.event.returnValue = false;</div><div class="line">    &#125;</div><div class="line">    return false;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="阻止冒泡"><a href="#阻止冒泡" class="headerlink" title="阻止冒泡"></a>阻止冒泡</h3><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">function stopBubble(e) &#123;</div><div class="line">    // 如果提供了事件对象，则这是一个非IE浏览器</div><div class="line">    if ( e &amp;&amp; e.stopPropagation ) &#123;</div><div class="line">        // 因此它支持W3C的stopPropagation()方法</div><div class="line">        e.stopPropagation();</div><div class="line">    &#125; else &#123;</div><div class="line">        // 否则，我们需要使用IE的方式来取消事件冒泡</div><div class="line">        window.event.cancelBubble = true;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="Ajax交互过程"><a href="#Ajax交互过程" class="headerlink" title="Ajax交互过程"></a>Ajax交互过程</h3><ul>
<li>创建XMLHttpRequest对象,也就是创建一个异步调用对象.</li>
<li>创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.</li>
<li>设置响应HTTP请求状态变化的函数.</li>
<li>发送HTTP请求.</li>
<li>获取异步调用返回的数据.</li>
<li>使用JavaScript和DOM实现局部刷新.</li>
</ul>
<h3 id="考察知识点最广的JS面试题"><a href="#考察知识点最广的JS面试题" class="headerlink" title="考察知识点最广的JS面试题"></a>考察知识点最广的JS面试题</h3><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 Foo() &#123;</div><div class="line">    getName = function () &#123; alert(1); &#125;</div><div class="line">    return this;</div><div class="line">&#125;</div><div class="line">Foo.getName = function () &#123; alert(2); &#125;</div><div class="line">Foo.prototype.getName = function () &#123; alert(3); &#125;</div><div class="line">var getName = function () &#123; alert(4); &#125;</div><div class="line">function getName () &#123; alert(5); &#125;</div><div class="line"></div><div class="line">/* 写出输出 */</div><div class="line">Foo.getName();</div><div class="line">getName();</div><div class="line">Foo().getName();</div><div class="line">getName();</div><div class="line">new Foo.getName();</div><div class="line">new Foo().getName();</div><div class="line">new new Foo().getName();</div></pre></td></tr></table></figure>
<p>具体讲解参见<a href="http://www.cnblogs.com/xxcanghai/p/5189353.html" target="_blank" rel="external">一道常被人轻视的前端JS面试题</a></p>
<h3 id="JS数组深浅拷贝"><a href="#JS数组深浅拷贝" class="headerlink" title="JS数组深浅拷贝"></a>JS数组深浅拷贝</h3><ul>
<li><code>slice</code>实现</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">var arr = [&apos;old&apos;, 1, true, null, undefined];</div><div class="line"></div><div class="line">var new_arr = arr.slice();</div><div class="line"></div><div class="line">new_arr[0] = &apos;new&apos;;</div><div class="line"></div><div class="line">console.log(arr) // [&quot;old&quot;, 1, true, null, undefined]</div><div class="line">console.log(new_arr) // [&quot;new&quot;, 1, true, null, undefined]</div></pre></td></tr></table></figure>
<ul>
<li><code>concat</code>实现</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">var arr = [&apos;old&apos;, 1, true, null, undefined];</div><div class="line"></div><div class="line">var new_arr = arr.concat();</div><div class="line"></div><div class="line">new_arr[0] = &apos;new&apos;;</div><div class="line"></div><div class="line">console.log(arr) // [&quot;old&quot;, 1, true, null, undefined]</div><div class="line">console.log(new_arr) // [&quot;new&quot;, 1, true, null, undefined]</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><div class="line">9</div></pre></td><td class="code"><pre><div class="line">var arr = [&apos;old&apos;, 1, true, [&apos;old1&apos;, &apos;old2&apos;], &#123;old: 1&#125;];</div><div class="line"></div><div class="line">var new_arr = arr.concat();</div><div class="line"></div><div class="line">new_arr[0] = &apos;new&apos;;</div><div class="line">new_arr[3][0] = &apos;new1&apos;;</div><div class="line"></div><div class="line">console.log(arr) // [&quot;old&quot;, 1, true, [&apos;new1&apos;, &apos;old2&apos;], &#123;old: 1&#125;]</div><div class="line">console.log(new_arr) // [&quot;new&quot;, 1, true, [&apos;new1&apos;, &apos;old2&apos;], &#123;old: 1&#125;]</div></pre></td></tr></table></figure>
<ul>
<li><code>JSON.stringify</code>实现数组深拷贝</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">var arr = [&apos;old&apos;, 1, true, [&apos;old1&apos;, &apos;old2&apos;], &#123;old: 1&#125;];</div><div class="line"></div><div class="line">var new_arr = JSON.parse(JSON.stringify(arr));</div><div class="line"></div><div class="line">new_arr[0] = &apos;new&apos;;</div><div class="line">new_arr[3][0] = &apos;new1&apos;;</div><div class="line"></div><div class="line">console.log(arr) // [&quot;old&quot;, 1, true, [&apos;old1&apos;, &apos;old2&apos;], &#123;old: 1&#125;]</div><div class="line">console.log(new_arr) // [&quot;new&quot;, 1, true, [&apos;new1&apos;, &apos;old2&apos;], &#123;old: 1&#125;]</div></pre></td></tr></table></figure>
<p>简单粗暴，但是问题是不能拷贝函数，不推荐。</p>
<p>然后我们来手动实现深浅拷贝。</p>
<ul>
<li>浅拷贝</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><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">var shallowCopy = function (obj) &#123;</div><div class="line">	// 判断是否是数组或者对象</div><div class="line">    if (typeof obj !== &apos;object&apos;) &#123;</div><div class="line">        return</div><div class="line">    &#125;</div><div class="line">    var newObj = obj instanceof Array ? [] : &#123;&#125;;</div><div class="line">    for (var key in obj) &#123;</div><div class="line">        if (obj.hasOwnProperty(key)) &#123;</div><div class="line">            newObj[key] = obj[key];</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">    return newObj;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ul>
<li>深拷贝</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><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">var deepCopy = function (obj) &#123;</div><div class="line">    if (typeof obj !== &apos;object&apos;) &#123;</div><div class="line">        return</div><div class="line">    &#125;</div><div class="line">    var newObj = obj instanceof Array ? [] : &#123;&#125;;</div><div class="line">    for (var key in obj) &#123;</div><div class="line">        if (obj.hasOwnProperty(key)) &#123;</div><div class="line">            newObj[key] = typeof obj[key] === &apos;object&apos; ? deepCopy(obj[key]) : obj[key];</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">    return newObj</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="数组去重"><a href="#数组去重" class="headerlink" title="数组去重"></a>数组去重</h3><ul>
<li><code>filter</code> + <code>indexOf</code></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></pre></td><td class="code"><pre><div class="line">function unique (arr) &#123;</div><div class="line">    var res = arr.filter(function (item, index, array) &#123;</div><div class="line">        return array.indexOf(item) === index;</div><div class="line">    &#125;)</div><div class="line">    return res;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ul>
<li><code>filter</code> + <code>sort</code></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 unique (arr) &#123;</div><div class="line">    return arr.concat().sort().filter(function (item, index, array) &#123;</div><div class="line">        return !index || item !== array[index - 1];</div><div class="line">    &#125;)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ul>
<li><code>ES6</code></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></pre></td><td class="code"><pre><div class="line">function uniqu3 (arr) &#123;</div><div class="line">    return [... new Set(arr)];</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="找出数组中的最大值"><a href="#找出数组中的最大值" class="headerlink" title="找出数组中的最大值"></a>找出数组中的最大值</h3><ul>
<li><code>reduce</code></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">var arr = [6, 4, 1, 8, 2, 11, 3];</div><div class="line"></div><div class="line">function max (prev, next) &#123;</div><div class="line">    return Math.max(prev, next)</div><div class="line">&#125;</div><div class="line"></div><div class="line">console.log(arr.reduce(max));</div></pre></td></tr></table></figure>
<ul>
<li><code>apply</code></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></pre></td><td class="code"><pre><div class="line">var arr = [6, 4, 1, 8, 2, 11, 3];</div><div class="line"></div><div class="line">console.log(Math.max.apply(null, arr));</div></pre></td></tr></table></figure>
<ul>
<li><code>ES6</code></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">var arr = [6, 4, 1, 8, 2, 11, 3];</div><div class="line"></div><div class="line">function max (arr) &#123;</div><div class="line">    return Math.max(...arr);</div><div class="line">&#125;</div><div class="line"></div><div class="line">console.log(max(arr));</div></pre></td></tr></table></figure>
<h3 id="打乱数组的方法"><a href="#打乱数组的方法" class="headerlink" title="打乱数组的方法"></a>打乱数组的方法</h3><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">var arr = [];</div><div class="line">for (var i = 0; i &lt; 100; i++) &#123;</div><div class="line">	arr[i] = i;</div><div class="line">&#125;</div><div class="line"></div><div class="line">arr.sort(function () &#123;</div><div class="line">	return 0.5 - Math.random();</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="数组扁平化"><a href="#数组扁平化" class="headerlink" title="数组扁平化"></a>数组扁平化</h3><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">var arr = [1, [2, [3, 4]]];</div><div class="line"></div><div class="line">function flatten(arr) &#123;</div><div class="line"></div><div class="line">    while (arr.some(item =&gt; Array.isArray(item))) &#123;</div><div class="line">        arr = [].concat(...arr);</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    return arr;</div><div class="line">&#125;</div><div class="line"></div><div class="line">console.log(flatten(arr))</div></pre></td></tr></table></figure>
<h3 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h3><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">// 冒泡</div><div class="line">function bubbleSort2(arr) &#123;</div><div class="line">    var len = arr.length;</div><div class="line">    for (var i = 0; i &lt;= len - 1; i++) &#123;</div><div class="line">        for (var j = 0; j &lt;= len - i; j++) &#123;</div><div class="line">            if (arr[j + 1] &lt; arr[j]) &#123;</div><div class="line">                var temp;</div><div class="line">                temp = arr[j];</div><div class="line">                arr[j] = arr[j + 1];</div><div class="line">                arr[j + 1] = temp;</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">    return arr;</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 快速排序</div><div class="line">function quickSort(arr) &#123;</div><div class="line">    if(arr.length == 0) &#123;</div><div class="line">        return [];    // 返回空数组</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    var cIndex = Math.floor(arr.length / 2);</div><div class="line">    var c = arr.splice(cIndex, 1);</div><div class="line">    var l = [];</div><div class="line">    var r = [];</div><div class="line"></div><div class="line">    for (var i = 0; i &lt; arr.length; i++) &#123;</div><div class="line">        if(arr[i] &lt; c) &#123;</div><div class="line">            l.push(arr[i]);</div><div class="line">        &#125; else &#123;</div><div class="line">            r.push(arr[i]);</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    return quickSort(l).concat(c, quickSort(r));</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="数字格式化-1234567890-gt-1-234-567-890"><a href="#数字格式化-1234567890-gt-1-234-567-890" class="headerlink" title="数字格式化 1234567890 -&gt; 1,234,567,890"></a>数字格式化 <code>1234567890 -&gt; 1,234,567,890</code></h3><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">function formatNum (num) &#123;</div><div class="line">    return num.replace(/\B(?=(\d&#123;3&#125;)+(?!\d))/g, &apos;,&apos;);</div><div class="line">&#125;</div><div class="line">var num = &apos;1234567890&apos;;</div><div class="line">var res = formatNum(num);</div><div class="line">console.log(res);</div></pre></td></tr></table></figure>
<h3 id="打乱数组的方法-1"><a href="#打乱数组的方法-1" class="headerlink" title="打乱数组的方法"></a>打乱数组的方法</h3><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">var arr = [];</div><div class="line">for (var i = 0; i &lt; 100; i++) &#123;</div><div class="line">    arr[i] = i;</div><div class="line">&#125;</div><div class="line"></div><div class="line">arr.sort(function () &#123;</div><div class="line">    return 0.5 - Math.random();</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<h3 id="尾调用优化"><a href="#尾调用优化" class="headerlink" title="尾调用优化"></a>尾调用优化</h3><p>即只保存内层函数的调用帧(只有开启严格模式，才会生效),只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则无法进行“尾调用优化。<br><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">function factorial(n) &#123;</div><div class="line">	if (n === 1) return 1;</div><div class="line">	return n * factorial(n-1);</div><div class="line">&#125;</div><div class="line">factorial(5)</div><div class="line"></div><div class="line">/* 优化尾递归 */</div><div class="line">function factorial(n, total) &#123;</div><div class="line">	if (n === 1) return total;</div><div class="line">	return factorial(n - 1, n * total);</div><div class="line">&#125;</div><div class="line">factorial(5, 1)</div></pre></td></tr></table></figure></p>
<h3 id="柯里化"><a href="#柯里化" class="headerlink" title="柯里化"></a>柯里化</h3><p>实现<code>add(1,2)</code>和<code>add(1)(2)</code>均输出<code>3</code><br><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></pre></td><td class="code"><pre><div class="line">function add () &#123;</div><div class="line">    let sum = 0;</div><div class="line">    Array.prototype.forEach.call(arguments, function (item, index)&#123;</div><div class="line">        if (typeof item !== &apos;number&apos;) &#123;</div><div class="line">            return false;</div><div class="line">        &#125; else &#123;</div><div class="line">            sum += item;</div><div class="line">        &#125;</div><div class="line">    &#125;)</div><div class="line">    var tmp = function () &#123;</div><div class="line">        Array.prototype.forEach.call(arguments, function (item, index)&#123;</div><div class="line">            if (typeof item !== &apos;number&apos;) &#123;</div><div class="line">                return false;</div><div class="line">            &#125; else &#123;</div><div class="line">               sum += item;</div><div class="line">            &#125;</div><div class="line">        &#125;)</div><div class="line">        return tmp;</div><div class="line">    &#125;</div><div class="line">    tmp.toString = function () &#123;</div><div class="line">        return sum</div><div class="line">    &#125;</div><div class="line">    return tmp;</div><div class="line">&#125;</div><div class="line">add(1, 2); // 3</div><div class="line">add(1)(2); // 3</div><div class="line">add(1, 2, 3)(1, 4)(2, 2)(1) // 16</div></pre></td></tr></table></figure></p>
<h3 id="ES8-新特性"><a href="#ES8-新特性" class="headerlink" title="ES8 新特性"></a>ES8 新特性</h3><ul>
<li>字符串填充</li>
</ul>
<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">str.padStart(targetLength [, padString])</div><div class="line">str.padEnd(targetLength [, padString])</div></pre></td></tr></table></figure>
<ul>
<li><code>values</code>和<code>entries</code>函数</li>
</ul>
<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.values(obj)</div><div class="line">Object.entries(obj)</div></pre></td></tr></table></figure>
<ul>
<li><code>getOwnPropertyDescriptors</code>函数</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Object.getOwnPropertyDescriptors(obj)</div></pre></td></tr></table></figure>
<ul>
<li>函数参数逗号结尾</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">function es8(var1, var2, var3,) &#123;&#125;</div></pre></td></tr></table></figure>
<ul>
<li>异步函数<br>由<code>async</code>关键词定义的函数声明了一个可以异步执行的函数，返回一个<code>AsyncFunction</code>类型的对象。</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><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">fucntion fetchTextByPromise () &#123;</div><div class="line">	return new Promise(resolve =&gt; &#123;</div><div class="line">		setTimeout(() =&gt; &#123;</div><div class="line">			resolve(&apos;es8&apos;);</div><div class="line">		&#125;, 2000);</div><div class="line">	&#125;);</div><div class="line">&#125;</div><div class="line">async function sayHello () &#123;</div><div class="line">	const externalFetchedText = await fetchTextByPromise();</div><div class="line">	console.log(`Hello, $&#123;externalFetchedText&#125;`);</div><div class="line">&#125;</div><div class="line">sayHello();</div></pre></td></tr></table></figure>
<h3 id="数据类型判断"><a href="#数据类型判断" class="headerlink" title="数据类型判断"></a>数据类型判断</h3><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 class2type = &#123;&#125;;</div><div class="line"></div><div class="line">&apos;Boolean Number String Function Array Date RegExp Object Error Null Undefined&apos;.split(&apos; &apos;).map((item, index) =&gt; &#123;</div><div class="line">    class2type[&apos;[object &apos; + item + &apos;]&apos;] = item.toLowerCase();</div><div class="line">&#125;)</div><div class="line"></div><div class="line">function type (obj) &#123;</div><div class="line">    return typeof obj === &apos;object&apos; || typeof obj === &apos;function&apos; ?</div><div class="line">        class2type[&#123;&#125;.toString.call(obj)] || &apos;object&apos; : typeof obj;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h3><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></pre></td><td class="code"><pre><div class="line">/*</div><div class="line"> * func：需要调用的函数</div><div class="line"> * wait: 防抖时间</div><div class="line"> * immediate：布尔值，是否立即执行</div><div class="line"> **/</div><div class="line"></div><div class="line">var debounce = function (func, wait, immediate) &#123;</div><div class="line">  var timeout;</div><div class="line">  return function () &#123;</div><div class="line">    var context = this;</div><div class="line">    var args = arguments;</div><div class="line"></div><div class="line">    if (timeout) clearTimeout(timeout);</div><div class="line"></div><div class="line">    if (immediate) &#123;  // 是否立即执行func</div><div class="line">      var callNow = !timeout;</div><div class="line">      timeout = setTimeout(function () &#123;</div><div class="line">        timeout = null;</div><div class="line">      &#125;, wait)；</div><div class="line"></div><div class="line">      if (callNow) &#123;</div><div class="line">        func.apply(context, args);</div><div class="line">      &#125;</div><div class="line">    &#125; else &#123;</div><div class="line">      timeout = setTimeout(function () &#123;</div><div class="line">        func.apply(context, args);</div><div class="line">      &#125;, wait);</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="简单的字符串模板"><a href="#简单的字符串模板" class="headerlink" title="简单的字符串模板"></a>简单的字符串模板</h3><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></pre></td><td class="code"><pre><div class="line">var TemplateEngine = function(tpl, data) &#123;</div><div class="line">    var re = /&lt;%([^%&gt;]+)?%&gt;/g, match;</div><div class="line">    while(match = re.exec(tpl)) &#123;</div><div class="line">        tpl = tpl.replace(match[0], data[match[1]])</div><div class="line">    &#125;</div><div class="line">    return tpl;</div><div class="line">&#125;</div><div class="line"></div><div class="line">var template = &apos;&lt;p&gt;Hello, my name is &lt;%name%&gt;. I\&apos;m &lt;%age%&gt; years old.&lt;/p&gt;&apos;;</div><div class="line">console.log(TemplateEngine(template, &#123;</div><div class="line">    name: &quot;Yeaseon&quot;,</div><div class="line">    age: 24</div><div class="line">&#125;));</div><div class="line"></div><div class="line">// &apos;&lt;p&gt;Hello, my name is Yeaseon. I\&apos;m 24 years old.&lt;/p&gt;&apos;;</div></pre></td></tr></table></figure>
<h3 id="apply、call和bind"><a href="#apply、call和bind" class="headerlink" title="apply、call和bind"></a><code>apply</code>、<code>call</code>和<code>bind</code></h3><ul>
<li><code>apply</code>和<code>call</code></li>
</ul>
<p>在严格模式下，未指定环境对象而调用函数，则this 值不会转型为window。除非明确把函数添加到某个对象或者调用apply()或call()，否则this 值将是undefined。</p>
<p>在非严格模式下，call、apply的第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window。</p>
<ul>
<li><code>apply</code>、<code>call</code>和<code>bind</code>比较</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><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">var obj = &#123;</div><div class="line">	x: 81</div><div class="line">&#125;;</div><div class="line"></div><div class="line">var foo = &#123;</div><div class="line">	getX: function () &#123;</div><div class="line">		return this.x;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">console.log(foo.getX.bind(obj)());</div><div class="line">console.log(foo.getX.apply(obj));</div><div class="line">console.log(foo.getX.call(obj));</div></pre></td></tr></table></figure>
<p>很明显，<code>bind</code>方法后面多了一对括号。也就是说，当你希望改变上下文环境之后并且立即执行，而是回调执行的时候（多用于事件监听器函数），使用<code>bind()</code>方法，而<code>apply/call</code>则会立即执行函数。</p>
<ul>
<li>定义一个 log 方法，让它可以代理 console.log 方法。</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 log()&#123;</div><div class="line">  console.log.apply(console, arguments);</div><div class="line">&#125;;</div><div class="line">log(1);    //1</div><div class="line">log(1,2);    //1 2</div></pre></td></tr></table></figure>
<ul>
<li>给每一个 log 消息添加一个”(app)”的前辍，比如：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">log(&quot;hello world&quot;);    //(app)hello world</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></pre></td><td class="code"><pre><div class="line">function log()&#123;</div><div class="line">  var args = Array.prototype.slice.call(arguments);</div><div class="line">  args.unshift(&apos;(app)&apos;);</div><div class="line">  console.log.apply(console, args);</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<ul>
<li><code>apply</code>实现<code>bind</code></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 bind (fn, context) &#123;</div><div class="line">    return function () &#123;</div><div class="line">        return fn.apply(context, argument);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="创建对象"><a href="#创建对象" class="headerlink" title="创建对象"></a>创建对象</h3><ul>
<li>工厂模式</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><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">function createPerson(name, age, job)&#123;</div><div class="line">	var o = new Object();</div><div class="line">	o.name = name;</div><div class="line">	o.age = age;</div><div class="line">	o.job = job;</div><div class="line">	o.sayName = function()&#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;;</div><div class="line">	return o;</div><div class="line">&#125;</div><div class="line">var person1 = createPerson(&quot;Nicholas&quot;, 29, &quot;Software Engineer&quot;);</div><div class="line">var person2 = createPerson(&quot;Greg&quot;, 27, &quot;Doctor&quot;);</div></pre></td></tr></table></figure>
<ul>
<li>构造函数模式</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><div class="line">10</div></pre></td><td class="code"><pre><div class="line">function Person(name, age, job)&#123;</div><div class="line">	this.name = name;</div><div class="line">	this.age = age;</div><div class="line">	this.job = job;</div><div class="line">	this.sayName = function()&#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;;</div><div class="line">&#125;</div><div class="line">var person1 = new Person(&quot;Nicholas&quot;, 29, &quot;Software Engineer&quot;);</div><div class="line">var person2 = new Person(&quot;Greg&quot;, 27, &quot;Doctor&quot;);</div></pre></td></tr></table></figure>
<ul>
<li>原型模式</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><div class="line">10</div></pre></td><td class="code"><pre><div class="line">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype.name = &quot;Nicholas&quot;;</div><div class="line">Person.prototype.age = 29;</div><div class="line">Person.prototype.job = &quot;Software Engineer&quot;;</div><div class="line">Person.prototype.sayName = function()&#123;</div><div class="line">	alert(this.name);</div><div class="line">&#125;;</div><div class="line">var person1 = new Person();</div><div class="line">person1.sayName(); //&quot;Nicholas&quot;</div></pre></td></tr></table></figure>
<ul>
<li>构造函数 + 原型模式</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><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">function Person(name, age, job)&#123;</div><div class="line">	this.name = name;</div><div class="line">	this.age = age;</div><div class="line">	this.job = job;</div><div class="line">	this.friends = [&quot;Shelby&quot;, &quot;Court&quot;];</div><div class="line">&#125;</div><div class="line">Person.prototype = &#123;</div><div class="line">	constructor : Person,</div><div class="line">	sayName : function()&#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">var person1 = new Person(&quot;Nicholas&quot;, 29, &quot;Software Engineer&quot;);</div><div class="line">var person2 = new Person(&quot;Greg&quot;, 27, &quot;Doctor&quot;);</div><div class="line">person1.friends.push(&quot;Van&quot;);</div><div class="line">alert(person1.friends); //&quot;Shelby,Count,Van&quot;</div><div class="line">alert(person2.friends); //&quot;Shelby,Count&quot;</div><div class="line">alert(person1.friends === person2.friends); //false</div><div class="line">alert(person1.sayName === person2.sayName); //true</div></pre></td></tr></table></figure>
<h3 id="JS实现Jquery的extend-方法"><a href="#JS实现Jquery的extend-方法" class="headerlink" title="JS实现Jquery的extend()方法"></a>JS实现Jquery的<code>extend()</code>方法</h3><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></pre></td><td class="code"><pre><div class="line">function extend() &#123;</div><div class="line">    // 默认不进行深拷贝</div><div class="line">    var deep = false;</div><div class="line">    var name, options, src, copy, clone, copyIsArray;</div><div class="line">    var length = arguments.length;</div><div class="line">    // 记录要复制的对象的下标</div><div class="line">    var i = 1;</div><div class="line">    // 第一个参数不传布尔值的情况下，target 默认是第一个参数</div><div class="line">    var target = arguments[0] || &#123;&#125;;</div><div class="line">    // 如果第一个参数是布尔值，第二个参数是 target</div><div class="line">    if (typeof target == &apos;boolean&apos;) &#123;</div><div class="line">        deep = target;</div><div class="line">        target = arguments[i] || &#123;&#125;;</div><div class="line">        i++;</div><div class="line">    &#125;</div><div class="line">    // 如果target不是对象，我们是无法进行复制的，所以设为 &#123;&#125;</div><div class="line">    if (typeof target !== &quot;object&quot; &amp;&amp; !isFunction(target)) &#123;</div><div class="line">        target = &#123;&#125;;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    // 循环遍历要复制的对象们</div><div class="line">    for (; i &lt; length; i++) &#123;</div><div class="line">        // 获取当前对象</div><div class="line">        options = arguments[i];</div><div class="line">        // 要求不能为空 避免 extend(a,,b) 这种情况</div><div class="line">        if (options != null) &#123;</div><div class="line">            for (name in options) &#123;</div><div class="line">                // 目标属性值</div><div class="line">                src = target[name];</div><div class="line">                // 要复制的对象的属性值</div><div class="line">                copy = options[name];</div><div class="line"></div><div class="line">                // 解决循环引用</div><div class="line">                if (target === copy) &#123;</div><div class="line">                    continue;</div><div class="line">                &#125;</div><div class="line"></div><div class="line">                // 要递归的对象必须是 plainObject 或者数组</div><div class="line">                if (deep &amp;&amp; copy &amp;&amp; (isPlainObject(copy) ||</div><div class="line">                        (copyIsArray = Array.isArray(copy)))) &#123;</div><div class="line">                    // 要复制的对象属性值类型需要与目标属性值相同</div><div class="line">                    if (copyIsArray) &#123;</div><div class="line">                        copyIsArray = false;</div><div class="line">                        clone = src &amp;&amp; Array.isArray(src) ? src : [];</div><div class="line"></div><div class="line">                    &#125; else &#123;</div><div class="line">                        clone = src &amp;&amp; isPlainObject(src) ? src : &#123;&#125;;</div><div class="line">                    &#125;</div><div class="line"></div><div class="line">                    target[name] = extend(deep, clone, copy);</div><div class="line"></div><div class="line">                &#125; else if (copy !== undefined) &#123;</div><div class="line">                    target[name] = copy;</div><div class="line">                &#125;</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    return target;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<h3 id="自定义事件（通过观察者模式）"><a href="#自定义事件（通过观察者模式）" class="headerlink" title="自定义事件（通过观察者模式）"></a>自定义事件（通过观察者模式）</h3><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></pre></td><td class="code"><pre><div class="line">function EventTarget () &#123;</div><div class="line">    this.handlers = &#123;&#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">EventTarget.prototype = &#123;</div><div class="line">    constructor: EventTarget,</div><div class="line">    addHandler: function (type, handler) &#123;</div><div class="line">        if (typeof this.handlers[type] == &apos;undefined&apos;) &#123;</div><div class="line">            this.handlers[type] = [];</div><div class="line">        &#125;</div><div class="line">        this.handlers[type].push(handler)</div><div class="line">    &#125;,</div><div class="line">    fire: function (event) &#123;</div><div class="line">        if (!event.target) &#123;</div><div class="line">            event.target = this;</div><div class="line">        &#125;</div><div class="line">        if (this.handlers[event.type] instanceof Array) &#123;</div><div class="line">            var handlers = this.handlers[event.type];</div><div class="line">            for (var i = 0, len = handlers.length; i &lt; len; i++) &#123;</div><div class="line">                handlers[i](event);</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">    &#125;,</div><div class="line">    removeHandler: function (type, handler) &#123;</div><div class="line">        if (this.handlers[type] instanceof Array) &#123;</div><div class="line">            var handlers = this.handlers[type];</div><div class="line">            for (var i = 0, len = handlers.length; i &lt; len; i++) &#123;</div><div class="line">                if (handlers[i] === handler) &#123;</div><div class="line">                    break;</div><div class="line">                &#125;</div><div class="line">            &#125;</div><div class="line">            handlers.splice(i, 1);</div><div class="line">        &#125;</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><h3 id="跨域的几种方法"><a href="#跨域的几种方法" class="headerlink" title="跨域的几种方法"></a>跨域的几种方法</h3><ol>
<li>主域相同的跨域</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">document.domain</div></pre></td></tr></table></figure>
<ol>
<li><p><code>window.postMessage</code></p>
</li>
<li><p><code>JSONP</code>跨域(只支持<code>GET</code>)</p>
</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><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">function todo(data)&#123;</div><div class="line">  console.log(&apos;The author is: &apos;+ data.name);</div><div class="line">&#125;</div><div class="line"></div><div class="line">var script = document.createElement(&apos;script&apos;);</div><div class="line">/* 向服务器www.yeaseonzhang.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字。 */</div><div class="line">script.src = &apos;http://www.yeaseonzhang.com/author?callback=todo&apos;;</div><div class="line">document.body.appendChild(script);</div><div class="line">/* 服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。 */</div><div class="line">todo(&#123;&quot;name&quot;: &quot;fewjq&quot;&#125;);</div><div class="line">/* 由于&lt;script&gt;元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了todo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象。*/</div></pre></td></tr></table></figure>
<ol>
<li><code>websocket</code>跨域</li>
</ol>
<h3 id="XSS-和-CSRF"><a href="#XSS-和-CSRF" class="headerlink" title="XSS 和 CSRF"></a>XSS 和 CSRF</h3><ul>
<li><a href="http://blog.csdn.net/ghsau/article/details/17027893" target="_blank" rel="external">XSS</a></li>
<li><a href="http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html" target="_blank" rel="external">CSRF</a></li>
</ul>
<h2 id="性能"><a href="#性能" class="headerlink" title="性能"></a>性能</h2><h3 id="CSS-优化"><a href="#CSS-优化" class="headerlink" title="CSS 优化"></a>CSS 优化</h3><ul>
<li>正确的时机调用CSS</li>
<li>使用媒体查询标记<code>&lt;link&gt;</code>，选择性加载</li>
<li>减少css文件数量</li>
<li>压缩css代码</li>
</ul>
<h3 id="渲染"><a href="#渲染" class="headerlink" title="渲染"></a>渲染</h3><ul>
<li><a href="http://coolshell.cn/articles/9666.html" target="_blank" rel="external">浏览器渲染原理</a></li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;“金三银四，金九银十”，用来形容求职最好的几个月。但是随着行业的饱和，初中级前端er就业形势不容乐观。&lt;/p&gt;
&lt;p&gt;行业状态不可控，我们能做的当然只是让自己变得更加具有竞争力。&lt;/p&gt;
&lt;p&gt;今年自己也用了几个月的时间来准备笔记面试，巩固基础知识。特此将自己在这个过程总结的题目分享出来，希望对于求职和准备求职的同学有所帮助。&lt;/p&gt;
    
    </summary>
    
    
      <category term="面试" scheme="https://yeaseonzhang.github.io/tags/%E9%9D%A2%E8%AF%95/"/>
    
  </entry>
  
  <entry>
    <title>深入理解Flex属性</title>
    <link href="https://yeaseonzhang.github.io/2017/07/05/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Flex%E5%B1%9E%E6%80%A7/"/>
    <id>https://yeaseonzhang.github.io/2017/07/05/深入理解Flex属性/</id>
    <published>2017-07-05T06:25:59.000Z</published>
    <updated>2017-10-12T14:12:17.929Z</updated>
    
    <content type="html"><![CDATA[<p>Flex 是 Flexible Box的缩写，意为“弹性布局”，可以简便、完整、响应式地实现各种页面布局。</p>
<p>Flex的出现就是为了解决传统布局的<code>display</code>属性 + <code>position</code>属性 + <code>float</code>属性的复杂性。</p>
<a id="more"></a>
<h2 id="浏览器对于Flex的支持性"><a href="#浏览器对于Flex的支持性" class="headerlink" title="浏览器对于Flex的支持性"></a>浏览器对于Flex的支持性</h2><img src="/2017/07/05/深入理解Flex属性/caniuse.png" alt="https://caniuse.com/" title="https://caniuse.com/">
<p>可以看到浏览器对于Flex布局的支持性已经很好了，所以我们可以放心大胆的用在我们项目中。</p>
<h2 id="flex-属性"><a href="#flex-属性" class="headerlink" title="flex 属性"></a>flex 属性</h2><p><code>flex: flex-grow | flex-shrink | flex-basis</code></p>
<p>flex属性包含三个值：<code>flex-grow</code>、<code>flex-shrink</code>和<code>flex-basis</code></p>
<ul>
<li><code>flex-grow</code>: 扩展比例</li>
<li><code>flex-shrink</code>: 收缩比例</li>
<li><code>flex-basis</code>: 伸缩基准值</li>
</ul>
<p>首先我们简单写一个flex布局的Demo</p>
<blockquote>
<p>HTML</p>
</blockquote>
<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></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">"parent"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child_1"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child_2"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child_3"</span>&gt;</span><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>
<blockquote>
<p>CSS</p>
</blockquote>
<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><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></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.child_1</span>,</div><div class="line"><span class="selector-class">.child_2</span>,</div><div class="line"><span class="selector-class">.child_3</span> &#123;</div><div class="line">  <span class="attribute">flex</span>: <span class="number">1</span>;</div><div class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_1</span> &#123;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 0, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_2</span> &#123;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 255, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_3</span> &#123;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 0, 255, .5);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="yzqpeQ" data-default-tab="css,result" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="Flex-1" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/yzqpeQ/" target="_blank" rel="external">Flex-1</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<p>设置父元素<code>display: flex</code>，其子元素就能使用flex布局，我们只是简单的为子元素使用了<code>flex: 1</code>就实现了三等分，而且会随着父元素的宽度变化而变化。这就是我们平时flex布局的简单用法，即各个子元素按照比例布局。</p>
<p><code>flex: 1</code>其实是<code>flex: 1 1 0%</code>的简写属性，即伸缩比例都是1。下面我们就分别理解下三个属性值对于布局的影响。</p>
<h2 id="flex-basis-属性"><a href="#flex-basis-属性" class="headerlink" title="flex-basis 属性"></a>flex-basis 属性</h2><p><code>flex-basis</code>属性是伸缩的基准值，这个属性也是我们计算最终宽度的决定性因素。</p>
<p>通过子元素<code>flex-basis</code>属性和与父元素(容器)宽度值进行比较，会出现两种情况(忽略相等的情况)：</p>
<ul>
<li>子元素<code>flex-basis</code>属性和 &lt; 父元素宽度</li>
<li>子元素<code>flex-basis</code>属性和 &gt; 父元素宽度</li>
</ul>
<p>上面的两种情况就分别对应了<code>flex-grow</code>和<code>flex-shrink</code>属性生效的情况，也就是说当子元素的<code>flex-basis</code>属性宽度和小于父元素的宽度值时<code>flex-grow</code>生效，反之<code>flex-shrink</code>生效。</p>
<h2 id="flex-grow-属性"><a href="#flex-grow-属性" class="headerlink" title="flex-grow 属性"></a>flex-grow 属性</h2><p><code>flex-grow</code>属性是扩展比例，上面我们也谈到了当子元素的<code>flex-basis</code>总和小于父元素的宽度值时<code>flex-grow</code>生效。</p>
<p>现在我们就来改变CSS，满足这个前提条件。</p>
<blockquote>
<p>CSS</p>
</blockquote>
<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><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></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.parent</span> &#123;</div><div class="line">  <span class="attribute">display</span>: flex;</div><div class="line">  <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_1</span>,</div><div class="line"><span class="selector-class">.child_2</span>,</div><div class="line"><span class="selector-class">.child_3</span> &#123;</div><div class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_1</span> &#123;</div><div class="line">  <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">0</span> <span class="number">150px</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 0, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_2</span> &#123;</div><div class="line">  <span class="attribute">flex</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">100px</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 255, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_3</span> &#123;</div><div class="line">  <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">0</span> <span class="number">150px</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 0, 255, .5);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="NaBXpz" data-default-tab="css,result" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="Flex-2" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/NaBXpz/" target="_blank" rel="external">Flex-2</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<p>此时，各个元素的<code>flex-basis</code>和为<code>(150 + 100 + 150) = 400px</code>, 小于父元素的<code>600px</code>,我们就来分别计算每个子元素的宽度值。<br><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">可用空间 = 父元素width - 子元素flex-basis总和 =&gt; 600 - (150 + 100 + 150) = 200</div><div class="line"></div><div class="line">单位扩展空间 = 可用空间/子元素flex-grow总和 =&gt; 200/(1 + 0 + 1) = 100</div></pre></td></tr></table></figure></p>
<p>子元素的计算公式为<code>width = flex-basis + flex-grow * 单位扩展空间</code></p>
<p>所以<code>child_1</code>宽度为<code>(150 + 1 * 100) = 250px</code>, <code>child_2</code>宽度为<code>(100 + 0 * 100) = 100px</code>, <code>child_3</code> 同 <code>child_1</code>。</p>
<h2 id="flex-shrink-属性"><a href="#flex-shrink-属性" class="headerlink" title="flex-shrink 属性"></a>flex-shrink 属性</h2><p><code>flex-shrink</code> 属性是收缩比例，当子元素的<code>flex-basis</code>总和大于父元素的宽度值时<code>flex-grow</code>生效。</p>
<p>现在我们就修改CSS满足这个前提。</p>
<blockquote>
<p>CSS</p>
</blockquote>
<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><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></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.parent</span> &#123;</div><div class="line">  <span class="attribute">display</span>: flex;</div><div class="line">  <span class="attribute">width</span>: <span class="number">600px</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_1</span>,</div><div class="line"><span class="selector-class">.child_2</span>,</div><div class="line"><span class="selector-class">.child_3</span> &#123;</div><div class="line">  <span class="comment">/*flex: 1;*/</span></div><div class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_1</span> &#123;</div><div class="line">  <span class="attribute">flex</span>: <span class="number">0</span> <span class="number">1</span> <span class="number">400px</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 0, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_2</span> &#123;</div><div class="line">  <span class="attribute">flex</span>: <span class="number">0</span> <span class="number">1</span> <span class="number">200px</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 255, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-class">.child_3</span> &#123;</div><div class="line">  <span class="attribute">flex</span>: <span class="number">0</span> <span class="number">2</span> <span class="number">400px</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 0, 255, .5);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p></p><p data-height="265" data-theme-id="0" data-slug-hash="ZXjvyN" data-default-tab="css,result" data-user="YeaseonZhang" data-embed-version="2" data-pen-title="Flex-3" class="codepen">See the Pen <a href="https://codepen.io/YeaseonZhang/pen/ZXjvyN/" target="_blank" rel="external">Flex-3</a> by YeaseonZhang (<a href="https://codepen.io/YeaseonZhang" target="_blank" rel="external">@YeaseonZhang</a>) on <a href="https://codepen.io" target="_blank" rel="external">CodePen</a>.</p><p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

<p>当然啦，我们可以按照<code>flex-grow</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">溢出空间 = 父元素width - 子元素flex-basis总和 =&gt; 600 - (400 + 200 + 400) = -400</div><div class="line"></div><div class="line">单位收缩空间 = 溢出空间/子元素flex-shrink总和 =&gt; -400/(1 + 2 + 2) = -100</div></pre></td></tr></table></figure>
<p>子元素的计算公式为<code>width = flex-basis + flex-shrink * 单位收缩空间</code></p>
<p>所以<code>child_1</code>宽度为<code>(400 + 1 * (-100)) = 300px</code>, <code>child_2</code>宽度为<code>(200 + 1 * (-100)) = 100px</code>, <code>child_3</code> 同 <code>(400 + 2 * (-100)) = 200px</code>。</p>
<p>大功告成了？其实并没有实例情况并不是我们计算的那样<code>300px 100px 200px</code>，而是<code>285.72px 142.86px 171.42px</code>。</p>
<p>通过Google，发现了一种收缩因数的计算方法：<br><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">理想空间 = 子元素(flex-basis * flex-shrink)之和 =&gt; 400 * 1 + 200 * 1 + 400 * 2 = 1400</div><div class="line"></div><div class="line">溢出空间 = 父元素width - 子元素flex-basis总和 =&gt; 600 - (400 + 200 + 400) = -400</div><div class="line"></div><div class="line">收缩因数 = (flex-basis * flex-shrink) / 理想空间 =&gt; 400 / 1400 = 0.286; 200 / 1400 = 0.143; 800 / 1400 = 0.571</div></pre></td></tr></table></figure></p>
<p>分别为每个子元素计算了收缩因数就能计算我们子元素的实际宽度，子元素的计算公式<code>width = flex-basis + 收缩因数 * 溢出空间</code></p>
<p>所以<code>child_1</code>宽度为<code>400 + 0.286 * (-400) = 285.6</code>, <code>child_2</code>宽度为<code>200 + 0.143 * (-400) = 142.8</code>, <code>child_3</code>宽度为<code>400 + 0.571 * (-400) = 171.6</code></p>
<p>现在我们计算出的值与浏览器渲染出的值基本上是相同的，我们对于<code>flex</code>属性的了解已经不再是单单的比例计算了，希望本文对你有所帮助。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Flex 是 Flexible Box的缩写，意为“弹性布局”，可以简便、完整、响应式地实现各种页面布局。&lt;/p&gt;
&lt;p&gt;Flex的出现就是为了解决传统布局的&lt;code&gt;display&lt;/code&gt;属性 + &lt;code&gt;position&lt;/code&gt;属性 + &lt;code&gt;float&lt;/code&gt;属性的复杂性。&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>CSS布局</title>
    <link href="https://yeaseonzhang.github.io/2017/07/05/CSS%E5%B8%83%E5%B1%80/"/>
    <id>https://yeaseonzhang.github.io/2017/07/05/CSS布局/</id>
    <published>2017-07-05T03:05:06.000Z</published>
    <updated>2017-07-23T15:04:40.249Z</updated>
    
    <content type="html"><![CDATA[<p>由于最近工作比较饱和，也没有太多的心思去写博客。今天更新一篇，我们来谈谈圣杯布局和双飞翼布局。</p>
<a id="more"></a>
<h3 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局"></a>圣杯布局</h3><blockquote>
<p>HTML</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><div class="line">17</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</div><div class="line">  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;</div><div class="line">  &lt;title&gt;Holy Grail Layout&lt;/title&gt;</div><div class="line">  &lt;link rel=&quot;stylesheet&quot; href=&quot;./base.css&quot;&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">    &lt;div class=&quot;container&quot;&gt;</div><div class="line">      &lt;div class=&quot;main&quot;&gt;&lt;/div&gt;</div><div class="line">      &lt;div class=&quot;sub&quot;&gt;&lt;/div&gt;</div><div class="line">      &lt;div class=&quot;extra&quot;&gt;&lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<blockquote>
<p>CSS</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><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></pre></td><td class="code"><pre><div class="line">body &#123;</div><div class="line">  min-width: 600px;</div><div class="line">&#125;</div><div class="line"></div><div class="line">.container &#123;</div><div class="line">  padding-left: 210px;</div><div class="line">  padding-right: 190px;</div><div class="line">&#125;</div><div class="line"></div><div class="line">.main &#123;</div><div class="line">  float: left;</div><div class="line">  width: 100%;</div><div class="line">  height: 300px;</div><div class="line">  background-color: rgba(255, 0, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line">.sub &#123;</div><div class="line">  position: relative;</div><div class="line">  left: -210px;</div><div class="line">  float: left;</div><div class="line">  width: 200px;</div><div class="line">  height: 300px;</div><div class="line">  margin-left: -100%;</div><div class="line">  background-color: rgba(0, 255, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line">.extra &#123;</div><div class="line">  position: relative;</div><div class="line">  right: -190px;</div><div class="line">  float: left;</div><div class="line">  width: 180px;</div><div class="line">  height: 300px;</div><div class="line">  margin-left: -180px;</div><div class="line">  background-color: rgba(0, 0, 255, 0.5);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="双飞翼布局"><a href="#双飞翼布局" class="headerlink" title="双飞翼布局"></a>双飞翼布局</h3><blockquote>
<p>HTML</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><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">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line"></div><div class="line">&lt;head&gt;</div><div class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</div><div class="line">  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;</div><div class="line">  &lt;title&gt;Double Wing Layout&lt;/title&gt;</div><div class="line">  &lt;link rel=&quot;stylesheet&quot; href=&quot;./base.css&quot;&gt;</div><div class="line">&lt;/head&gt;</div><div class="line"></div><div class="line">&lt;body&gt;</div><div class="line">  &lt;div class=&quot;main-wrapper&quot;&gt;</div><div class="line">    &lt;div class=&quot;main&quot;&gt;&lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">  &lt;div class=&quot;sub&quot;&gt;&lt;/div&gt;</div><div class="line">  &lt;div class=&quot;extra&quot;&gt;&lt;/div&gt;</div><div class="line">&lt;/body&gt;</div><div class="line"></div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<blockquote>
<p>CSS</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><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></pre></td><td class="code"><pre><div class="line">.main-wrapper &#123;</div><div class="line">  float: left;</div><div class="line">  width: 100%;</div><div class="line">&#125;</div><div class="line"></div><div class="line">.main &#123;</div><div class="line">  height: 300px;</div><div class="line">  margin-left: 210px;</div><div class="line">  margin-right: 190px;</div><div class="line">  background-color: rgba(255, 0, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line">.sub &#123;</div><div class="line">  float: left;</div><div class="line">  width: 200px;</div><div class="line">  height: 300px;</div><div class="line">  margin-left: -100%;</div><div class="line">  background-color: rgba(0, 255, 0, .5);</div><div class="line">&#125;</div><div class="line"></div><div class="line">.extra &#123;</div><div class="line">  float: left;</div><div class="line">  width: 180px;</div><div class="line">  height: 300px;</div><div class="line">  margin-left: -180px;</div><div class="line">  background-color: rgba(0, 0, 255, .5);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;由于最近工作比较饱和，也没有太多的心思去写博客。今天更新一篇，我们来谈谈圣杯布局和双飞翼布局。&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>CSS设计指南·读书笔记</title>
    <link href="https://yeaseonzhang.github.io/2017/05/14/CSS%E8%AE%BE%E8%AE%A1%E6%8C%87%E5%8D%97%C2%B7%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/"/>
    <id>https://yeaseonzhang.github.io/2017/05/14/CSS设计指南·读书笔记/</id>
    <published>2017-05-14T05:30:08.000Z</published>
    <updated>2017-06-24T16:56:26.140Z</updated>
    
    <content type="html"><![CDATA[<img src="/2017/05/14/CSS设计指南·读书笔记/stylin_with_css.jpg" alt="CSS设计指南" title="CSS设计指南">
<p>前端开发中，JS很重要，但CSS也不能轻视，我们来一场CSS学习之旅。</p>
<a id="more"></a>
<h2 id="CSS-工作原理"><a href="#CSS-工作原理" class="headerlink" title="CSS 工作原理"></a>CSS 工作原理</h2><h3 id="特殊的上下文选择符"><a href="#特殊的上下文选择符" class="headerlink" title="特殊的上下文选择符"></a>特殊的上下文选择符</h3><h4 id="子选择符-gt"><a href="#子选择符-gt" class="headerlink" title="子选择符  &gt;"></a>子选择符  &gt;</h4><p><code>标签1 &gt; 标签2</code></p>
<p><strong>标签2</strong>必须是<strong>标签1</strong>的子元素，反过来说，<strong>标签1</strong>是<strong>标签2</strong>的父元素。</p>
<h4 id="紧邻同胞选择符"><a href="#紧邻同胞选择符" class="headerlink" title="紧邻同胞选择符 +"></a>紧邻同胞选择符 +</h4><p><code>标签1 + 标签2</code></p>
<p><strong>标签2</strong>必须紧跟在其同胞<strong>标签1</strong>的后面。</p>
<h4 id="一般同胞选择符"><a href="#一般同胞选择符" class="headerlink" title="一般同胞选择符 ~"></a>一般同胞选择符 ~</h4><p><code>标签1 ~ 标签2</code></p>
<p><strong>标签2</strong>必须跟在其同胞<strong>标签1</strong>后面。</p>
<h4 id="通用选择符"><a href="#通用选择符" class="headerlink" title="通用选择符 *"></a>通用选择符 *</h4><p>通用选择符<code>*</code>是一个通配符，它匹配任何元素。不过，一般在使用<code>*</code>选择符时，都会同时使用另一个选择符，比如：<br><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">p * &#123;</div><div class="line">	color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>这样只会把<code>p</code>包含的所有元素的文本变成红色。</p>
<p>还可以用它构成<strong>非子选择符</strong>，比如：<br><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">section * a &#123;</div><div class="line">	font-size: 14px;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>所有<code>section</code>孙子元素<code>a</code>都会被选中，至于<code>a</code>的父元素是什么，没有关系。</p>
<h3 id="ID和类选择符"><a href="#ID和类选择符" class="headerlink" title="ID和类选择符"></a>ID和类选择符</h3><h4 id="ID-属性"><a href="#ID-属性" class="headerlink" title="ID 属性"></a>ID 属性</h4><p>用于页内导航ID<br><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">&lt;a href=&quot;#first&quot;&gt;First title&lt;/a&gt;</div><div class="line"></div><div class="line">&lt;h2 id=&quot;first&quot;&gt;First title&lt;/h2&gt;</div></pre></td></tr></table></figure></p>
<p><code>href</code>属性以<code>#</code>开头，<code>#first</code>就是一个页面的锚点，会与使用了CSS选择符里面相同的<code>id=&quot;first&quot;</code>元素做匹配，就会把页面定位到<code>h2#first</code>的位置，这也就是为什么CSS的<code>id</code>选择器在页面中只能使用一次。</p>
<h3 id="属性选择符"><a href="#属性选择符" class="headerlink" title="属性选择符"></a>属性选择符</h3><h4 id="属性名选择符"><a href="#属性名选择符" class="headerlink" title="属性名选择符"></a>属性名选择符</h4><p><code>标签名[属性名]</code></p>
<p>选择任何带有<code>属性名</code>的<code>标签名</code></p>
<h4 id="属性值选择符"><a href="#属性值选择符" class="headerlink" title="属性值选择符"></a>属性值选择符</h4><p><code>标签名[属性名=&#39;属性值&#39;]</code></p>
<p><strong>注</strong>：在HTML5中，<code>属性值</code>的引号可以不加，但是推荐添加。</p>
<h3 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a>伪类</h3><p>伪类这个叫法源自它们与类相似，但实际上没有类会附加到标记中的标签上。</p>
<ul>
<li><strong>UI伪类</strong>会在HTML元素处于某个状态时，为该元素应用CSS样式。</li>
<li><strong>结构化伪类</strong>会在标记中存在某个结构上的关系时，为相应元素应用CSS样式。</li>
</ul>
<h4 id="UI伪类"><a href="#UI伪类" class="headerlink" title="UI伪类"></a>UI伪类</h4><h5 id="链接伪类"><a href="#链接伪类" class="headerlink" title="链接伪类"></a>链接伪类</h5><ul>
<li>Link，未点击状态</li>
<li>Visited，点击过这个链接</li>
<li>Hover，鼠标悬停在这个链接上</li>
<li>Active，链接正在被点击（鼠标在元素上按下，还没有释放）</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></pre></td><td class="code"><pre><div class="line">a:link &#123; color: black; &#125;</div><div class="line">a:visited &#123; color: gray; &#125;</div><div class="line">a:hover &#123; text-decoration: none; &#125;</div><div class="line">a:active &#123; color: red; &#125;</div></pre></td></tr></table></figure>
<p>按照<code>LoVe HA</code>的顺序使用它们，否则浏览器可能不会显示预期结果。</p>
<blockquote>
<p>一个冒号（<code>:</code>）表示伪类，两个冒号（<code>::</code>）表示CSS3新增伪类。</p>
</blockquote>
<h5 id="focus-伪类"><a href="#focus-伪类" class="headerlink" title=":focus 伪类"></a>:focus 伪类</h5><p><code>e:focus</code></p>
<blockquote>
<p>在后续例子中，e表示任何元素，不再以文字表示</p>
</blockquote>
<p>获得焦点时，<code>:focus</code>伪类生效<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">input:focus &#123; border: 1px solid blue; &#125;</div></pre></td></tr></table></figure></p>
<h5 id="target-伪类"><a href="#target-伪类" class="headerlink" title=":target 伪类"></a>:target 伪类</h5><p><code>e:target</code></p>
<p>如果用户点击一个指向页面中其他元素的链接，则那个元素就是<strong>target</strong>，可以用<code>:target</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></pre></td><td class="code"><pre><div class="line">&lt;a href=&quot;#more_info&quot;&gt;More Information&lt;/a&gt;</div><div class="line"></div><div class="line">&lt;h2 id=&quot;more_info&quot;&gt;This is the information you are looking for.&lt;/h2&gt;</div><div class="line"></div><div class="line">// CSS</div><div class="line">#more_info:target &#123; background: #eee &#125;</div></pre></td></tr></table></figure>
<p>当用户点击链接转向<strong>ID</strong>为<code>more_info</code>的元素时，为该元素添加<code>#eee</code>背景。</p>
<h4 id="结构化伪类"><a href="#结构化伪类" class="headerlink" title="结构化伪类"></a>结构化伪类</h4><h5 id="first-child-和-last-child"><a href="#first-child-和-last-child" class="headerlink" title=":first-child 和 :last-child"></a>:first-child 和 :last-child</h5><p><code>e:first-child</code><br><code>e:last-child</code></p>
<p><code>:first-child</code>代表一组同胞元素中的第一个元素，而<code>:last-child</code>代表最后一个。<br><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">// css</div><div class="line">ol.results li:first-child &#123;</div><div class="line">  color:blue;</div><div class="line">&#125;</div><div class="line"></div><div class="line">// html</div><div class="line">&lt;ol class=&quot;results&quot;&gt;</div><div class="line">  &lt;li&gt;My Fast Pony&lt;/li&gt;</div><div class="line">  &lt;li&gt;Steady Trotter&lt;/li&gt;</div><div class="line">  &lt;li&gt;Slow Ol&apos; Nag&lt;/li&gt;</div><div class="line">&lt;/ol&gt;</div></pre></td></tr></table></figure></p>
<p>第一个<code>&lt;li&gt;</code>就会被选中，<strong>My Fast Pony</strong>就会变成蓝色。</p>
<h5 id="nth-child"><a href="#nth-child" class="headerlink" title=":nth-child"></a>:nth-child</h5><p><code>e:nth-child(n)</code></p>
<blockquote>
<p>n 表示一个数值（也可以是 odd 或 even)</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">li:nth-child(3) &#123;...&#125;</div></pre></td></tr></table></figure>
<h3 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h3><p>伪元素就是文档中若有实无的元素。</p>
<h4 id="first-letter-伪元素"><a href="#first-letter-伪元素" class="headerlink" title="::first-letter 伪元素"></a>::first-letter 伪元素</h4><p><code>e::first-letter</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">p::first-letter &#123;</div><div class="line">  font-size: 300%;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>上面的CSS样式就可以得到段落首字母放大的效果。</p>
<h4 id="first-line-伪元素"><a href="#first-line-伪元素" class="headerlink" title="::first-line 伪元素"></a>::first-line 伪元素</h4><p><code>e::first-line</code></p>
<p>可以选中文本段落的第一行。</p>
<h4 id="before-和-after-伪元素"><a href="#before-和-after-伪元素" class="headerlink" title="::before 和 ::after 伪元素"></a>::before 和 ::after 伪元素</h4><p><code>e::before</code><br><code>e::after</code></p>
<p>可用于在特定元素前面或后面添加特殊内容。<br><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">&lt;p class=&quot;age&quot;&gt;25&lt;/p&gt;</div><div class="line"></div><div class="line">// css</div><div class="line">p.age::before &#123;</div><div class="line">  content: &apos;Age: &apos;;</div><div class="line">&#125;</div><div class="line">p.age::after &#123;</div><div class="line">  content: &apos; years.&apos;;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>就能得到结果：<br><code>Age: 25 years.</code></p>
<h3 id="层叠"><a href="#层叠" class="headerlink" title="层叠"></a>层叠</h3><h4 id="计算特指度"><a href="#计算特指度" class="headerlink" title="计算特指度"></a>计算特指度</h4><p>下面具体讲讲怎么计算选择符的特指度。首先，有一个简单的计分规则，即每个选择符都要按下面的“<strong>ICE</strong>”公式计算三个值：<br><code>I - C - E</code> (ID Class Element)</p>
<p>针对这个公式的计分方法如下：</p>
<ol>
<li>选择符中有一个ID，就在<strong>I</strong>的位置上加1</li>
<li>选择符中有一个类，就在<strong>C</strong>的位置上加1</li>
<li>选择符中有一个元素名，就在<strong>E</strong>的位置上加1</li>
<li>得到一个三位数</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></pre></td><td class="code"><pre><div class="line">p                                    0-0-1 特指度=1</div><div class="line">p.largetext                          0-1-1 特指度=11</div><div class="line">p#largetext                          1-0-1 特指度=101</div><div class="line">body p#largetext                     1-0-2 特指度=102</div><div class="line">body p#largetext ul.mylist           1-1-3 特指度=113</div><div class="line">body p#largetext ul.mylist li        1-1-4 特指度=114</div></pre></td></tr></table></figure>
<h3 id="规则声明"><a href="#规则声明" class="headerlink" title="规则声明"></a>规则声明</h3><h4 id="数字值"><a href="#数字值" class="headerlink" title="数字值"></a>数字值</h4><p><code>em</code> 和 <code>ex</code> 都是字体大小的单位，但在CSS中，它们作为长度单位适用于任何元素。</p>
<ul>
<li><code>em</code>，它表示一种字体中字母<strong>M</strong>的宽度，因此大小取决于字体</li>
<li><code>ex</code>，表示给定字体中字母<strong>x</strong>的高度，不包括字母上、下突出的部分</li>
</ul>
<h4 id="颜色值"><a href="#颜色值" class="headerlink" title="颜色值"></a>颜色值</h4><h5 id="颜色名"><a href="#颜色名" class="headerlink" title="颜色名"></a>颜色名</h5><ul>
<li>aqua    浅绿色</li>
<li>black   黑色</li>
<li>blue    蓝色</li>
<li>fuchsia 紫红色</li>
<li>gray    灰色</li>
<li>green   绿色</li>
<li>lime    黄绿色</li>
<li>maroon  褐红色</li>
<li>navy    深蓝色</li>
<li>olive   茶青色</li>
<li>purple  紫色</li>
<li>red     红色</li>
<li>sliver  银色</li>
<li>teal    青色</li>
<li>white   白色</li>
<li>yellow  黄色</li>
</ul>
<p>以上就是<strong>W3C</strong>定义了16个颜色的关键字。</p>
<h2 id="定位元素"><a href="#定位元素" class="headerlink" title="定位元素"></a>定位元素</h2><h3 id="盒子有多大"><a href="#盒子有多大" class="headerlink" title="盒子有多大"></a>盒子有多大</h3><p>盒模型结论一：没有（就是没有设置<code>width</code>的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，<br>会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。</p>
<p>盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的<code>width</code>属性设定的只是盒子内容区的宽度，<br>而非盒子要占据的水平宽度。</p>
<p>CSS3新增的<strong>box-sizing</strong>属性，强制转换盒子模型。</p>
<h3 id="浮动与清除"><a href="#浮动与清除" class="headerlink" title="浮动与清除"></a>浮动与清除</h3><h4 id="围住浮动元素的三种方法"><a href="#围住浮动元素的三种方法" class="headerlink" title="围住浮动元素的三种方法"></a>围住浮动元素的三种方法</h4><ul>
<li>为父元素添加<code>overflow:hidden</code></li>
<li>同时浮动父元素<code>float: left/right</code></li>
<li>添加非浮动的清除元素或者给父元素添加<code>clearfix</code>类</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><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">// HTML</div><div class="line">&lt;section class=&quot;clearfix&quot;&gt;</div><div class="line">  &lt;img src=&quot;images/rubber_duck.jpg&quot;&gt;</div><div class="line">  &lt;p&gt;It&apos;s fun to float.&lt;/p&gt;</div><div class="line">&lt;/section&gt;</div><div class="line">&lt;footer&gt;Here is the footer element...&lt;/footer&gt;</div><div class="line"></div><div class="line">// CSS</div><div class="line">.clearfix:after &#123;</div><div class="line">  content: &apos;.&apos;;</div><div class="line">  display: block;</div><div class="line">  height: 0;</div><div class="line">  visibility:hidden;</div><div class="line">  clear:both;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><h4 id="背景属性"><a href="#背景属性" class="headerlink" title="背景属性"></a>背景属性</h4><p>CSS规定的与背景相关的属性：</p>
<ul>
<li><code>background-color</code></li>
<li><code>background-image</code></li>
<li><code>background-repeat</code></li>
<li><code>background-position</code></li>
<li><code>background-size</code></li>
<li><code>background-attachment</code></li>
<li><code>background</code></li>
<li><code>background-clip</code></li>
<li><code>background-origin</code></li>
<li><code>background-break</code></li>
</ul>
<h4 id="背景渐变"><a href="#背景渐变" class="headerlink" title="背景渐变"></a>背景渐变</h4><h5 id="渐变点"><a href="#渐变点" class="headerlink" title="渐变点"></a>渐变点</h5><p>渐变点就是渐变方向上的点，可以在这些点上设定颜色和不透明度。<br><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">.gradient1 &#123;</div><div class="line">  background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);</div><div class="line">&#125;</div><div class="line">.gradient2 &#123;</div><div class="line">  background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>第一个例子在50%处包含一个渐变点。注意，开始和结束位置如果没有声明，则默认为0% 和 100%。</p>
<blockquote>
<p>如果不是使用百分比或其他值声明渐变点的位置，则三种颜色会均匀分布于整个渐变，其实际位置是0%、50%和100%。</p>
</blockquote>
<h5 id="放射性渐变"><a href="#放射性渐变" class="headerlink" title="放射性渐变"></a>放射性渐变</h5><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">.gradient1 &#123;</div><div class="line">  background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);</div><div class="line">&#125;</div><div class="line">.gradient2 &#123;</div><div class="line">  background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);</div><div class="line">&#125;</div><div class="line">.gradient3 &#123;</div><div class="line">  background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, #4947ba);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>三个三色放射性渐变。第一个是默认的填满图形渐变，第二个是圆形渐变，第三个是指定位置的圆形渐变</p>
<h2 id="字体和文本"><a href="#字体和文本" class="headerlink" title="字体和文本"></a>字体和文本</h2><h3 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h3><p>网页中的字体的三个来源：</p>
<ul>
<li>用户机器中安装的字体</li>
<li>保存在第三方网站上的字体</li>
<li>保存在你的Web服务器上的字体，通过<code>@font-face</code>引入。</li>
</ul>
<p>与字体样式相关的6个属性：</p>
<ul>
<li><code>font-family</code></li>
<li><code>font-size</code></li>
<li><code>font-style</code></li>
<li><code>font-weight</code></li>
<li><code>font-variant</code></li>
<li><code>font</code></li>
</ul>
<h4 id="字体族-font-family"><a href="#字体族-font-family" class="headerlink" title="字体族 font-family"></a>字体族 <code>font-family</code></h4><p>通用的字体类：</p>
<ul>
<li><code>serif</code>，也就是衬线字体，在每个字符笔画的末尾会有一些装饰线</li>
<li><code>sans-serif</code>，无衬线字体，字符笔画的末尾没有装饰线</li>
<li><code>monospace</code>，等宽字体</li>
<li><code>cursive</code>，草书体或者手写体</li>
<li><code>fantasy</code>，不能归入其他类的字体</li>
</ul>
<h4 id="字体大小-font-size"><a href="#字体大小-font-size" class="headerlink" title="字体大小 font-size"></a>字体大小 <code>font-size</code></h4><p>浏览器样式表在设定所有元素的字体大小时，使用的都是相对单位<code>em</code>。默认情况下，<code>1em</code>等于16像素，这也是<code>font-size</code>的基准大小。</p>
<h5 id="绝对字体大小"><a href="#绝对字体大小" class="headerlink" title="绝对字体大小"></a>绝对字体大小</h5><p>设定绝对字体大小时，也是可以使用关键字值，比如<code>x-small</code>、<code>medium</code>、<code>x-large</code>等等。</p>
<h5 id="相对字体大小"><a href="#相对字体大小" class="headerlink" title="相对字体大小"></a>相对字体大小</h5><p>使用百分比、<code>em</code>或<code>rem</code>等设置字体大小。如果给某个元素设定了相对字体大小，则该元素的字体大小要相对于最近的”被设定过字体大小”的祖先元素来确定。</p>
<p>如果想使用<code>em</code>，但有需要设定具体的像素大小，可以通过把<code>body</code>的<code>font-size</code>设定为<code>62.5%</code>。这样就把基准大小从16像素改为10像素（16 * 62.5% = 10）。这样em与像素之间的换算关系就更加明显了，1em 等于 10像素。</p>
<h5 id="关于rem单位"><a href="#关于rem单位" class="headerlink" title="关于rem单位"></a>关于<code>rem</code>单位</h5><p>CSS3新增了一个相对单位<code>rem</code>（root em）。与<code>em</code> 区别在于使用rem 为元素设定字体大小时，仍然是相对大小，但相对于的只是HTML根元素。</p>
<h4 id="字体样式-font-style"><a href="#字体样式-font-style" class="headerlink" title="字体样式 font-style"></a>字体样式 <code>font-style</code></h4><ul>
<li><code>italic</code> 斜体</li>
<li><code>oblique</code> 倾斜体</li>
<li><code>normal</code> 正体</li>
</ul>
<h4 id="字体变化-font-variant"><a href="#字体变化-font-variant" class="headerlink" title="字体变化 font-variant"></a>字体变化 <code>font-variant</code></h4><ul>
<li><code>small-caps</code></li>
<li><code>normal</code></li>
</ul>
<p><code>small-caps</code>会导致所有小写英文字母变成小型大写字母（就是大小与小写字母相同的大写字母）。</p>
<h4 id="字体-font"><a href="#字体-font" class="headerlink" title="字体 font"></a>字体 <code>font</code></h4><p><code>font</code>属性是一个简写形式，但是使用这个简写需要遵守两条规则，否则浏览器无法正确解释声明的值。<br><strong>规则一</strong>：必须声明<code>font-size</code>和<code>font-family</code>的值。<br><strong>规则二</strong>：所有值必须按如下顺序声明</p>
<ol>
<li><code>font-weight</code>、<code>font-style</code>和<code>font-variant</code>部分先后</li>
<li>然后是<code>font-size</code></li>
<li>最后是<code>font-family</code></li>
</ol>
<h3 id="文本属性"><a href="#文本属性" class="headerlink" title="文本属性"></a>文本属性</h3><p>CSS的文本属性：</p>
<ul>
<li><code>line-height</code></li>
<li><code>letter-spacing</code></li>
<li><code>text-align</code></li>
<li><code>text-decoration</code></li>
<li><code>text-indent</code></li>
<li><code>text-transform</code></li>
<li><code>word-spacing</code></li>
<li><code>vertical-align</code></li>
</ul>
<h4 id="文本缩进-text-indent"><a href="#文本缩进-text-indent" class="headerlink" title="文本缩进 text-indent"></a>文本缩进 <code>text-indent</code></h4><p><code>text-indent</code>属性设定行内盒子相对于包含元素的起点。默认情况下，这个起点就是包含元素的左上角。</p>
<p><strong>注</strong>：有个继承问题，需要说明一下<br>这里有一个非常重要的问题，必须请读者注意：text-indent 是可以被子元素继承的。如果你在一个div 上设定了text-indent 属性，那么div 中的所有段落都会继承该缩进值。然而，与所有继承的CSS 值一样，这个缩进并不是祖先元素中设定的值，而是计算的值。下面举一个例子说明。<br>假设有一个400 像素宽的div，包含的文本缩进5%，则缩进的距离是20 像素（400 的5%）。在这个div 中有一个200 像素宽的段落。作为子元素，它继承父元素的text-indent 值，所以它包含的文本也缩进。但继承的缩进是多少呢？不是5%，而是20 像素。也就是说，子元素继承的是根据父元素宽度计算得到的缩进值。结果，虽然段落只有父元素一半宽，但其中的文本也会缩进20 像素。这样可以确保无论段落多宽，它们的缩进距离都一样。当然在子元素上重新设定text-indent 属性，可以覆盖继承的值。</p>
<h4 id="字符间距-letter-spacing"><a href="#字符间距-letter-spacing" class="headerlink" title="字符间距 letter-spacing"></a>字符间距 <code>letter-spacing</code></h4><p><code>letter-spacing</code>为正值时增大字符间距，为负值时缩小间距。</p>
<p><strong>注</strong>：无论设定字体大小时使用的是什么单位，设定字符间距一定要用<strong>相对单位</strong>，以便字间距能随字体大小同比例变化。</p>
<h4 id="单词间距-word-spacing"><a href="#单词间距-word-spacing" class="headerlink" title="单词间距 word-spacing"></a>单词间距 <code>word-spacing</code></h4><p>单词间距与字符间距很相似，区别在于只调整单词间距，而不影响字符间距。</p>
<h4 id="文本装饰-text-decoration"><a href="#文本装饰-text-decoration" class="headerlink" title="文本装饰 text-decoration"></a>文本装饰 <code>text-decoration</code></h4><ul>
<li><code>underline</code> 下划线</li>
<li><code>overline</code> 上划线</li>
<li><code>line-through</code> 中划线</li>
<li><code>blink</code> 闪烁效果</li>
<li><code>none</code></li>
</ul>
<h4 id="文本对齐-text-align"><a href="#文本对齐-text-align" class="headerlink" title="文本对齐 text-align"></a>文本对齐 <code>text-align</code></h4><ul>
<li><code>left</code> 左对齐</li>
<li><code>right</code> 右对齐</li>
<li><code>center</code> 居中</li>
<li><code>justify</code> 两端对齐</li>
</ul>
<h4 id="行高-line-height"><a href="#行高-line-height" class="headerlink" title="行高 line-height"></a>行高 <code>line-height</code></h4><p>CSS通过<code>line-height</code>属性实现了印刷行业中常说的加铅条，铅条在活字排版时代用于在文本行之间增加间距。</p>
<h4 id="文本转换-text-transform"><a href="#文本转换-text-transform" class="headerlink" title="文本转换 text-transform"></a>文本转换 <code>text-transform</code></h4><ul>
<li><code>none</code></li>
<li><code>uppercase</code> 大写</li>
<li><code>lowercase</code> 小写</li>
<li><code>capitalize</code> 单词首字母大写</li>
</ul>
<p><code>text-transform</code>属性用于转换元素中文本的大小写。</p>
<h4 id="垂直对齐-vertical-align"><a href="#垂直对齐-vertical-align" class="headerlink" title="垂直对齐 vertical-align"></a>垂直对齐 <code>vertical-align</code></h4><ul>
<li><code>sub</code></li>
<li><code>super</code></li>
<li><code>top</code></li>
<li><code>middle</code></li>
<li><code>bottom</code></li>
<li>任意长度值</li>
</ul>
<p><code>vertical-align</code> 以基线为参照上下移动文本，但这个属性只影响行内元素。如果你想在垂直方向上对齐块级元素，必须把其<code>display</code> 属性设定为<code>inline</code>。</p>
<h2 id="页面布局"><a href="#页面布局" class="headerlink" title="页面布局"></a>页面布局</h2><h3 id="布局的基本概念"><a href="#布局的基本概念" class="headerlink" title="布局的基本概念"></a>布局的基本概念</h3><p>多栏布局有三种基本的实现方法：固定宽度、流动、弹性。</p>
<h3 id="三栏-中栏流动布局"><a href="#三栏-中栏流动布局" class="headerlink" title="三栏-中栏流动布局"></a>三栏-中栏流动布局</h3><img src="/2017/05/14/CSS设计指南·读书笔记/threecol.png" alt="三栏布局" title="三栏布局">
<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></pre></td><td class="code"><pre><div class="line">&lt;div id=&quot;main_wrapper&quot;&gt;</div><div class="line">  &lt;header&gt;</div><div class="line"></div><div class="line">  &lt;/header&gt;</div><div class="line">  &lt;div id=&quot;threecolwrap&quot;&gt;</div><div class="line">    &lt;div id=&quot;twocolwrap&quot;&gt;</div><div class="line">      &lt;nav&gt;</div><div class="line"></div><div class="line">      &lt;/nav&gt;</div><div class="line">      &lt;article&gt;</div><div class="line"></div><div class="line">      &lt;/article&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">    &lt;aside&gt;</div><div class="line"></div><div class="line">    &lt;/aside&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">  &lt;footer&gt;</div><div class="line"></div><div class="line">  &lt;/footer&gt;</div><div class="line">&lt;/div&gt;</div><div class="line"></div><div class="line">// sass</div><div class="line">* &#123;</div><div class="line">  margin: 0;</div><div class="line">  padding: 0;</div><div class="line">&#125;</div><div class="line">body &#123;</div><div class="line">  font: 1em helvetica, arial, sans-serif;</div><div class="line">&#125;</div><div class="line"></div><div class="line">div#main_wrapper &#123;</div><div class="line">  min-width: 600px;</div><div class="line">  max-width: 1100px;</div><div class="line">  margin: 0 auto;</div><div class="line">  header &#123;</div><div class="line">    padding: 5px 10px;</div><div class="line">    background: #3f7ccf;</div><div class="line">  &#125;</div><div class="line">  div#threecolwrap &#123;</div><div class="line">    float: left;</div><div class="line">    width: 100%;</div><div class="line">    div#twocolwrap &#123;</div><div class="line">      float: left;</div><div class="line">      width: 100%;</div><div class="line">      margin-right: -210px;</div><div class="line">      nav &#123;</div><div class="line">        float: left;</div><div class="line">        width: 150px;</div><div class="line">        background: #f00;</div><div class="line">        padding: 20px 0;</div><div class="line">        &amp; &gt; * &#123;</div><div class="line">          margin: 0 10px;</div><div class="line">        &#125;</div><div class="line">      &#125;</div><div class="line">      article &#123;</div><div class="line">        width: auto;</div><div class="line">        margin-left: 150px;</div><div class="line">        margin-right: 210px;</div><div class="line">        background: #eee;</div><div class="line">        padding: 20px 0;</div><div class="line">        &amp; &gt; * &#123;</div><div class="line">          margin: 0 20px;</div><div class="line">        &#125;</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">    aside &#123;</div><div class="line">      float: left;</div><div class="line">      width: 210px;</div><div class="line">      background: #ffed53;</div><div class="line">      padding: 20px 0;</div><div class="line">      &amp; &gt; * &#123;</div><div class="line">        margin: 0 10px;</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">  footer &#123;</div><div class="line">    clear: both;</div><div class="line">    width: 100%;</div><div class="line">    text-align: center;</div><div class="line">    background: #000;</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><h3 id="弹出层"><a href="#弹出层" class="headerlink" title="弹出层"></a>弹出层</h3><h4 id="堆叠上下文和-z-index"><a href="#堆叠上下文和-z-index" class="headerlink" title="堆叠上下文和 z-index"></a>堆叠上下文和 z-index</h4><p><code>z-index</code>值较大的元素，在堆叠层次中位于<code>z-index</code>值较小的元素上方。<code>z-index</code>属性值可以是0到任意大的数值，默认值是<code>auto</code>即为0。</p>
<p>不过<code>z-index</code>只对脱离了普通流的元素才有效，也就是<code>position</code>为<code>absolute</code>、<code>relative</code>或者<code>fixed</code>定位才可以。</p>
<h2 id="CSS3实战"><a href="#CSS3实战" class="headerlink" title="CSS3实战"></a>CSS3实战</h2><h3 id="页眉"><a href="#页眉" class="headerlink" title="页眉"></a>页眉</h3><ul>
<li>盒阴影 <code>box-shadow</code></li>
</ul>
<p><code>box-shadow: 4px 4px 5px 8px #aaa inset;</code></p>
<p><code>box-shadow</code>属性的这几个值分别代表：水平偏移量、垂直偏移量、模糊量、扩展量、颜色和阴影位置（默认边框外部，即<code>outset</code>）。</p>
<ul>
<li>水平居中</li>
</ul>
<p><strong>注</strong>：不能给<code>display: inline-block</code>元素设定外边距为<code>auto</code>，所以无法通过<code>margin: 0 auto</code>实现居中。只能通过为父元素添加<code>text-align: center</code>实现居中。</p>
<p>个人理解<code>display: inline-block</code>元素就是行内元素，不能像块状元素那样定位。</p>
<ul>
<li>垂直居中</li>
</ul>
<p>如果想要在一个固定高度的元素垂直居中一行文本，可以把这一行文本的<code>line-height</code>设定为该元素的高度。<br><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">text-align: center; /* 水平居中 */</div><div class="line">line-height: xx px; /* 垂直居中： 行高=容器高度 */</div></pre></td></tr></table></figure></p>
<p>如果垂直居中其他元素，比如图片，可以将容器的<code>display: table-row</code>，再设定(只对单元格有效)<code>vertical-align: middle</code>。<br><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">display: table-cell; /* 使用表格的行为 */</div><div class="line">vertical-align: middle; /* 垂直居中 */</div><div class="line">text-align: center; /* 水平居中 */</div></pre></td></tr></table></figure></p>
<h3 id="专题区"><a href="#专题区" class="headerlink" title="专题区"></a>专题区</h3><ul>
<li>文本阴影 <code>text-shadow</code></li>
</ul>
<p><code>text-shadow: 4px 4px 5px #aaa;</code></p>
<p><code>text-shadow</code> 这几值的含义按顺序分别是：水平偏移量、垂直偏移量、模糊量和颜色。与盒阴影不同的是，文本阴影没有扩展量。</p>
<h3 id="图书区"><a href="#图书区" class="headerlink" title="图书区"></a>图书区</h3><h4 id="CSS3变换"><a href="#CSS3变换" class="headerlink" title="CSS3变换"></a>CSS3变换</h4><p><code>transform</code>属性能够调用函数，调用不同的变换函数可以实现不同的形式的变换，而通过传入的参数可以控制变换的结果。</p>
<p><code>transform: 函数名()</code></p>
<ul>
<li><code>scale</code>：用于放大或者缩小元素</li>
<li><code>rotate</code>：根据指定的度数旋转元素</li>
<li><code>skew</code>：让元素在X轴和Y轴方向倾斜</li>
<li><code>translate</code>：根据指定的距离沿X轴和Y轴平移对象</li>
</ul>
<h2 id="响应式设计"><a href="#响应式设计" class="headerlink" title="响应式设计"></a>响应式设计</h2><h3 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h3><p>媒体类型</p>
<ul>
<li>all：匹配所有设备</li>
<li>handled：匹配手持设备</li>
<li>print：匹配分页媒体或打印预览模式下的屏幕</li>
<li>screen：匹配彩色计算机屏幕</li>
</ul>
<p>媒体特性</p>
<ul>
<li><code>min-device-width</code> 和 <code>max-device-width</code>：匹配设备屏幕的尺寸</li>
<li><code>min-width</code> 和 <code>max-width</code>：匹配视口的宽度，例如浏览器窗口宽度</li>
<li><p><code>orientation</code>：匹配设备是横屏还是竖屏。</p>
</li>
<li><p><code>&lt;link&gt;</code>标签的<code>media</code>属性<br>通过在<code>&lt;link&gt;</code>标签的<code>media</code>属性中指定条件，有选择的加载样式表。</p>
</li>
</ul>
<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">&lt;link rel=&quot;stylesheet&quot; media=&quot;print&quot; href=&quot;css/print_styles.css&quot; /&gt;</div><div class="line">&lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (max-width:568px)&quot; href=&quot;css/ipone_styles.css&quot; /&gt;</div></pre></td></tr></table></figure>
<h2 id="附录"><a href="#附录" class="headerlink" title="附录"></a>附录</h2><h3 id="条件注释"><a href="#条件注释" class="headerlink" title="条件注释"></a>条件注释</h3><p>小于等于<strong>IE8</strong>加载<br><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">&lt;!--[if lte IE 8]&gt; &lt;!-- IE 条件注释 --&gt;</div><div class="line">&lt;link src=&quot;ie_only.css&quot; rel=&quot;stylesheet&quot; /&gt;</div><div class="line">&lt;![endif]--&gt;</div></pre></td></tr></table></figure></p>
]]></content>
    
    <summary type="html">
    
      &lt;img src=&quot;/2017/05/14/CSS设计指南·读书笔记/stylin_with_css.jpg&quot; alt=&quot;CSS设计指南&quot; title=&quot;CSS设计指南&quot;&gt;
&lt;p&gt;前端开发中，JS很重要，但CSS也不能轻视，我们来一场CSS学习之旅。&lt;/p&gt;
    
    </summary>
    
    
      <category term="CSS 笔记" scheme="https://yeaseonzhang.github.io/tags/CSS-%E7%AC%94%E8%AE%B0/"/>
    
  </entry>
  
  <entry>
    <title>JS红宝书·读书笔记</title>
    <link href="https://yeaseonzhang.github.io/2017/04/27/JS%E7%BA%A2%E5%AE%9D%E4%B9%A6%C2%B7%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/"/>
    <id>https://yeaseonzhang.github.io/2017/04/27/JS红宝书·读书笔记/</id>
    <published>2017-04-27T02:24:55.000Z</published>
    <updated>2017-07-23T15:04:40.253Z</updated>
    
    <content type="html"><![CDATA[<img src="/2017/04/27/JS红宝书·读书笔记/book.jpg" alt="JavaScript高级程序设计" title="JavaScript高级程序设计">
<p>花了半个多月的时间，终于又把“JS红宝书”又撸了一遍。</p>
<p>第一次读“JS红宝书”还是<strong>2015</strong>年初学JS的时候，那时候只是把语法部分读了一遍，还有一些浏览器相关知识做了下了解，大概也就读了半本的样子，<br>就开始了用JS进行开发了，在成长的道路上遇见了<strong>JQuery</strong>，当时真的是感觉到<strong>JQuery</strong>太友好了，慢慢放下了原生开发。</p>
<p>现在呢，更多的时候是在用框架进行开发，越来越觉得自己的JS基础很缺乏，然后就开启了“JS红宝书”二刷之路。</p>
<p>下面就把书中自己觉得重要的、没有掌握的知识整理出来。因为我觉得还是会三刷“JS红宝书”，希望把这本700多页的书越读越薄，勉励。</p>
<a id="more"></a>
<h2 id="在HTML中使用JavaScript"><a href="#在HTML中使用JavaScript" class="headerlink" title="在HTML中使用JavaScript"></a>在HTML中使用JavaScript</h2><hr>
<h3 id="async"><a href="#async" class="headerlink" title="async"></a><code>async</code></h3><p>加载外部脚本文件，通知浏览器立即下载，异步执行。</p>
<h3 id="noscript元素"><a href="#noscript元素" class="headerlink" title="noscript元素"></a><code>noscript</code>元素</h3><p><code>noscript</code>标签显示条件：</p>
<ul>
<li>浏览器不支持脚本</li>
<li>浏览器支持脚本，但是脚本被禁用</li>
</ul>
<h2 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h2><hr>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><h4 id="标识符"><a href="#标识符" class="headerlink" title="标识符"></a>标识符</h4><ul>
<li>第一个字符必须是一个字母、下划线或者一个美元符号</li>
<li>其他字符可以是字母、下划线、美元或者数字</li>
</ul>
<h4 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式</h4><p>支持严格模式的浏览器包括：IE10+、Firefox4+、Safari 5.1+、Opera 12+和Chrome。</p>
<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><h4 id="undefined"><a href="#undefined" class="headerlink" title="undefined"></a>undefined</h4><p>对未初始化的变量执行<code>typeof</code>操作会返回<code>undefined</code>值，而对于未声明的变量执行<code>typeof</code>操作同样会返回<code>undefined</code>值。</p>
<h4 id="null"><a href="#null" class="headerlink" title="null"></a>null</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">typeof null	// -&gt; object</div></pre></td></tr></table></figure>
<p><strong>undefined</strong>值派生自<code>null</code>值。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">console.log(null == undefind)	// -&gt; true</div></pre></td></tr></table></figure></p>
<h4 id="isFinite"><a href="#isFinite" class="headerlink" title="isFinite()"></a>isFinite()</h4><p>测试一个数值是不是无穷值。</p>
<p><code>Number.NEGATIVE_INFINITY</code>：负无穷<br><code>Number.POSITION_INFINITY</code>：正无穷</p>
<h4 id="NaN"><a href="#NaN" class="headerlink" title="NaN"></a>NaN</h4><p>在ECMAScript中，任何数值除以0会返回<code>NaN</code>。</p>
<p><code>isNaN()</code>接受一个参数，确定这个参数是否”不是数值”。</p>
<h4 id="数值转换"><a href="#数值转换" class="headerlink" title="数值转换"></a>数值转换</h4><p><code>Number()</code></p>
<ul>
<li>如果是<code>null</code>，返回<code>0</code></li>
<li>如果是<code>undefined</code>，返回<code>NaN</code></li>
</ul>
<p><code>parseInt()</code><br>在ES5 中不支持解析八进制的能力。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">parseInt(&apos;070&apos;);	// -&gt; 70 not 56</div></pre></td></tr></table></figure></p>
<p>通过第二个参数，指定转换基数（进制）默认十进制。</p>
<h4 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h4><ul>
<li>ECMAScript中的字符串是不可变的</li>
<li><code>toString()</code></li>
</ul>
<p>在调用数值的<code>toString</code>方法，可以传递一个参数：输出数值的基数。没有<code>toString</code>方法的则返回该值的字面量<br><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">var num = 10;</div><div class="line">console.log(num.toString(2));	// -&gt; &apos;1010&apos;</div></pre></td></tr></table></figure></p>
<h4 id="object类型"><a href="#object类型" class="headerlink" title="object类型"></a>object类型</h4><p>Object类型的属性方法：</p>
<ul>
<li>constructor</li>
<li>hasOwnProperty(propertyName)</li>
<li>isPrototypeOf(obj)</li>
<li>propertyIsEnumerable(propertyName)</li>
<li>toLocalString()</li>
<li>toString()</li>
<li>valueOf()</li>
</ul>
<h3 id="操作符"><a href="#操作符" class="headerlink" title="操作符"></a>操作符</h3><ul>
<li><code>++</code> or <code>--</code></li>
</ul>
<p>前置与后置的区别<br><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">var num1 = 2;</div><div class="line">var num2 = 20;</div><div class="line">var num3 = --num1 + num2;	// 21</div><div class="line">var num4 = num1 + num2;		// 21</div><div class="line"></div><div class="line">var num5 = 2;</div><div class="line">var num6 = 20;</div><div class="line">var num7 = num5-- + num6;	// 22</div><div class="line">var num8 = num5 + num6;		// 21</div></pre></td></tr></table></figure></p>
<ul>
<li>一元加操作符用于强制类型转换，隐式<code>Number()</code>效果</li>
</ul>
<h4 id="for-in-语句"><a href="#for-in-语句" class="headerlink" title="for-in 语句"></a>for-in 语句</h4><p><code>for-in</code>语句是一种精确的迭代语句，可以用来枚举对象的属性。</p>
<p>通过<code>for-in</code>循环输出的属性名的顺序是不可预测的。</p>
<p>如果要迭代的对象的变量值为<code>null</code>或<code>undefined</code>，<code>for-in</code>语句会抛出错误。<strong>ES5</strong>更正了这一行为，不再抛出错误，只是不再执行循环体。</p>
<p><strong>建议</strong>：在是使用<code>for-in</code>循环之前，先检查对象值是不是<code>null</code>或者<code>undefined</code>。</p>
<h2 id="变量、作用域和内存问题"><a href="#变量、作用域和内存问题" class="headerlink" title="变量、作用域和内存问题"></a>变量、作用域和内存问题</h2><hr>
<h3 id="基本类型和引用类型"><a href="#基本类型和引用类型" class="headerlink" title="基本类型和引用类型"></a>基本类型和引用类型</h3><h4 id="复制变量值"><a href="#复制变量值" class="headerlink" title="复制变量值"></a>复制变量值</h4><ul>
<li>复制基本类型值，这两个变量相互独立，互不影响。</li>
<li>复制引用类型（对象），值引用是一个指针，改变其中一个对象，会影响另一个对象。</li>
</ul>
<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></pre></td><td class="code"><pre><div class="line">function setName(obj) &#123;</div><div class="line">	obj.name = &quot;Nicholas&quot;;</div><div class="line">&#125;</div><div class="line">var person = new Object();</div><div class="line">setName(person);</div><div class="line">alert(person.name); //&quot;Nicholas&quot;</div></pre></td></tr></table></figure>
<p>以上代码中创建一个对象，并将其保存在了变量<code>person</code> 中。然后，这个变量被传递到<code>setName()</code>函数中之后就被复制给了<code>obj</code>。在这个函数部，<code>obj</code> 和<code>person</code> 引用的是同一个对象。换句话说，即使这个变量是按值传递的，<code>obj</code> 也会按引用来访问同一个对象。于是，当在函数内部为<code>obj</code> 添加<code>name</code>属性后，函数外部的<code>person</code> 也将有所反映；因为<code>person</code> 指向的对象在堆内存中只有一个，而且是全局对象。有很多开发人员错误地认为：在局部作用域中修改的对象会在全局作用域中反映出来，就说明参数是按引用传递的。为了证明对象是按值传递的，我们再看一看下面这个经过修改的例子：<br><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 setName(obj) &#123;</div><div class="line">	obj.name = &quot;Nicholas&quot;;</div><div class="line">	obj = new Object();</div><div class="line">	obj.name = &quot;Greg&quot;;</div><div class="line">&#125;</div><div class="line">var person = new Object();</div><div class="line">setName(person);</div><div class="line">alert(person.name); //&quot;Nicholas&quot;</div></pre></td></tr></table></figure></p>
<p>这个例子与前一个例子的唯一区别，就是在<code>setName()</code>函数中添加了两行代码：一行代码为<code>obj</code>重新定义了一个对象，另一行代码为该对象定义了一个带有不同值的<code>name</code>属性。在把<code>person</code>传递给<code>setName()</code>后，其<code>name</code> 属性被设置为”Nicholas”。然后，又将一个新对象赋给变量<code>obj</code>，同时将其<code>name</code>属性设置为”Greg”。如果<code>person</code> 是按引用传递的，那么<code>person</code> 就会自动被修改为指向其<code>name</code>属性值为”Greg”的新对象。但是，当接下来再访问<code>person.name</code> 时，显示的值仍然是”Nicholas”。这说明即使在函数内部修改了参数的值，但原始的引用仍然保持未变。实际上，当在函数内部重写<code>obj</code>时，这个变量引用的就是一个局部对象了。<strong>而这个局部对象会在函数执行完毕后立即被销毁。</strong></p>
<h4 id="检测类型"><a href="#检测类型" class="headerlink" title="检测类型"></a>检测类型</h4><p>虽然在检测基本数据类型时<code>typeof</code> 是非常得力的助手，但在检测引用类型的值时，这个操作符的用处不大。通常，我们并不是想知道某个值是对象，而是想知道它是什么类型的对象。为此，ECMAScript提供了<code>instanceof</code> 操作符。</p>
<h4 id="延长作用域"><a href="#延长作用域" class="headerlink" title="延长作用域"></a>延长作用域</h4><ul>
<li><code>try-catch</code>语句中的<code>catch</code>块</li>
<li><code>with</code>语句</li>
</ul>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ul>
<li>基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中；</li>
<li>从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本；</li>
<li>引用类型的值是对象，保存在堆内存中；</li>
<li>包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针；</li>
</ul>
<h2 id="引用类型"><a href="#引用类型" class="headerlink" title="引用类型"></a>引用类型</h2><hr>
<h3 id="Array类型"><a href="#Array类型" class="headerlink" title="Array类型"></a>Array类型</h3><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></pre></td><td class="code"><pre><div class="line">if (value instanceof Array) &#123;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>ECMAScript5新增了 <code>Array.isArray()</code>方法<br><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">if (Array.isArray(value)) &#123;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h4 id="sort方法"><a href="#sort方法" class="headerlink" title="sort方法"></a>sort方法</h4><p>该方法有缺陷，<code>sort()</code>方法会调用每个数组项的<code>toString()</code>转型方法，然后比较字符串进行排序。<br><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">var values = [0, 1, 5, 10, 15];</div><div class="line">values.sort();</div><div class="line">alert(values); //0,1,10,15,5</div></pre></td></tr></table></figure></p>
<p>因此<code>sort()</code>方法接受一个比较函数作为参数。<br><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">function compare(value1, value2) &#123;</div><div class="line">	if (value1 &lt; value2) &#123;</div><div class="line">		return -1;</div><div class="line">	&#125; else if (value1 &gt; value2) &#123;</div><div class="line">		return 1;</div><div class="line">	&#125; else &#123;</div><div class="line">		return 0;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">var values = [0, 1, 5, 10, 15];</div><div class="line">values.sort(compare);</div><div class="line">alert(values); //0,1,5,10,15</div></pre></td></tr></table></figure></p>
<h4 id="splice方法"><a href="#splice方法" class="headerlink" title="splice方法"></a>splice方法</h4><p><code>splice</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></pre></td><td class="code"><pre><div class="line">var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;];</div><div class="line">var removed = colors.splice(0,1); // 删除第一项</div><div class="line">alert(colors); // green,blue</div><div class="line">alert(removed); // red，返回的数组中只包含一项</div><div class="line"></div><div class="line">removed = colors.splice(1, 0, &quot;yellow&quot;, &quot;orange&quot;); // 从位置1 开始插入两项</div><div class="line">alert(colors); // green,yellow,orange,blue</div><div class="line">alert(removed); // 返回的是一个空数组</div><div class="line"></div><div class="line">removed = colors.splice(1, 1, &quot;red&quot;, &quot;purple&quot;); // 插入两项，删除一项</div><div class="line">alert(colors); // green,red,purple,orange,blue</div><div class="line">alert(removed); // yellow，返回的数组中只包含一项</div></pre></td></tr></table></figure>
<h4 id="迭代方法"><a href="#迭代方法" class="headerlink" title="迭代方法"></a>迭代方法</h4><p>ECMAScript5为数组定义了5个迭代方法。</p>
<ul>
<li><code>every()</code>: 对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。</li>
<li><code>filter()</code>: 对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。</li>
<li><code>forEach()</code>: 对数组中的每一项运行给定函数。这个方法没有返回值。</li>
<li><code>map()</code>: 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。</li>
<li><code>some()</code>: 对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。</li>
</ul>
<h4 id="归并方法"><a href="#归并方法" class="headerlink" title="归并方法"></a>归并方法</h4><p>ECMAScript 5 还新增了两个归并数组的方法。</p>
<ul>
<li><code>reduce()</code></li>
<li><code>reduceRight()</code><br><code>reduce()</code>和<code>reduceRight()</code>的函数接收4 个参数：前一个值、当前值、项的索引和数组对象。<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 values = [1, 2, 3, 4, 5];</div><div class="line">var sum = values.reduce((prev, cur, index, array) =&gt; &#123;</div><div class="line">	return prev + cur;</div><div class="line">&#125;);</div><div class="line">console.log(sum);</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="RegExp类型"><a href="#RegExp类型" class="headerlink" title="RegExp类型"></a>RegExp类型</h3><h4 id="正则表达式中的元字符"><a href="#正则表达式中的元字符" class="headerlink" title="正则表达式中的元字符"></a>正则表达式中的元字符</h4><p><code>( [ { \ ^ $ | ) ? * + . ] }</code></p>
<p><strong>注</strong>：匹配元字符必须转义</p>
<h4 id="RegExp-构造函数"><a href="#RegExp-构造函数" class="headerlink" title="RegExp 构造函数"></a><code>RegExp</code> 构造函数</h4><p>接受两个参数： 一个是要匹配的字符串模式，另一个是可选的标志字符串。<br><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">var pattern1 = /[bc]at/i;</div><div class="line">// 等价于</div><div class="line">var pattern2 = new RegExp(&apos;[bc]at&apos;, &apos;i&apos;);</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：由于RegExp构造函数的模式是字符串，所以在某些情况下要对字符串进行双重转义，所有元字符都必须双重转义。例如<code>\n</code>在字符串中被转义为<code>\\n</code>，而在正则表达式字符串中就会变成<code>\\\\n</code>。</p>
<h4 id="RegExp实例方法"><a href="#RegExp实例方法" class="headerlink" title="RegExp实例方法"></a><code>RegExp</code>实例方法</h4><h5 id="exec-方法"><a href="#exec-方法" class="headerlink" title="exec()方法"></a><code>exec()</code>方法</h5><p>该方法是专门为捕获组而设计的。<code>exec()</code>接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回<code>null</code>。返回的数组虽然是Array 的实例，但包含两个额外的属性：<code>index</code> 和<code>input</code>。其中，<code>index</code> 表示匹配项在字符串中的位置，而<code>input</code> 表示应用正则表达式的字符串。在数组中，第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串（如果模式中没有捕获组，则该数组只包含一项）。<br><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">var text = &quot;mom and dad and baby&quot;;</div><div class="line">var pattern = /mom( and dad( and baby)?)?/gi;</div><div class="line"></div><div class="line">var matches = pattern.exec(text);</div><div class="line">alert(matches.index); // 0</div><div class="line">alert(matches.input); // &quot;mom and dad and baby&quot;</div><div class="line">alert(matches[0]); // &quot;mom and dad and baby&quot;</div><div class="line">alert(matches[1]); // &quot; and dad and baby&quot;</div><div class="line">aler t(matches[2]); // &quot; and baby&quot;</div></pre></td></tr></table></figure></p>
<p>对于<code>exec()</code>方法而言，即使在模式中设置了全局标志（<code>g</code>），它每次也只会返回一个匹配项。在不设置全局标志的情况下，在同一个字符串上多次调用<code>exec()</code>将始终返回第一个匹配项的信息。而在<strong>设置</strong>全局标志的情况下，每次调用<code>exec()</code>则都会在字符串中继续查找新匹配项。</p>
<h5 id="test-方法"><a href="#test-方法" class="headerlink" title="test()方法"></a><code>test()</code>方法</h5><p>接受一个字符串参数。在模式与该参数匹配的情况下返回<code>true</code>；否则，返回<code>false</code>。<br><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">var text = &quot;000-00-0000&quot;;</div><div class="line">var pattern = /\d&#123;3&#125;-\d&#123;2&#125;-\d&#123;4&#125;/;</div><div class="line"></div><div class="line">if (pattern.test(text))&#123;</div><div class="line">	alert(&quot;The pattern was matched.&quot;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>RegExp实例继承的<code>toLocaleString()</code>和<code>toString()</code>方法都会返回正则表达式的字面量，与创建正则表达式的方式无关。<br><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">var pattern = new RegExp(&quot;\\[bc\\]at&quot;, &quot;gi&quot;);</div><div class="line">alert(pattern.toString()); // /\[bc\]at/gi</div><div class="line">alert(pattern.toLocaleString()); // /\[bc\]at/gi</div></pre></td></tr></table></figure></p>
<h3 id="Function类型"><a href="#Function类型" class="headerlink" title="Function类型"></a>Function类型</h3><h4 id="函数声明与函数表达式"><a href="#函数声明与函数表达式" class="headerlink" title="函数声明与函数表达式"></a>函数声明与函数表达式</h4><p>解析器会率先读取函数声明，并使其在执行任何代码之前可用；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。<br><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">// ok</div><div class="line">alert(sum(10,10));</div><div class="line">function sum(num1, num2)&#123;</div><div class="line">	return num1 + num2;</div><div class="line">&#125;</div><div class="line"></div><div class="line">// unexpected identifier(意外标识符)</div><div class="line">alert(sum(10,10));</div><div class="line">var sum = function(num1, num2)&#123;</div><div class="line">	return num1 + num2;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：要访问函数的指针而不执行函数的话，必须去掉函数名后的那对圆括号。</p>
<h4 id="函数内部属性"><a href="#函数内部属性" class="headerlink" title="函数内部属性"></a>函数内部属性</h4><ul>
<li><code>arguments</code></li>
<li><code>this</code></li>
</ul>
<p><code>arguments</code>具有一个<code>callee</code>属性，该属性是一个指针，指向拥有这个<code>arguments</code>对象的函数。<br><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 factorial(num)&#123;</div><div class="line">	if (num &lt;=1) &#123;</div><div class="line">		return 1;</div><div class="line">	&#125; else &#123;</div><div class="line">		return num * factorial(num-1)</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>等价于<br><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 factorial(num)&#123;</div><div class="line">	if (num &lt;=1) &#123;</div><div class="line">		return 1;</div><div class="line">	&#125; else &#123;</div><div class="line">		return num * arguments.callee(num-1)</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>达到一种解耦的效果。</p>
<p>ECMAScript 5也规范了一个函数对象属性：<code>caller</code>(看着很像<code>callee</code>)，这个属性中保存着调用当前函数的函数的引用，如果实在全局作用域中调用当前函数，它的值为<code>null</code>。<br><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 outer()&#123;</div><div class="line">	inner();</div><div class="line">&#125;</div><div class="line">function inner()&#123;</div><div class="line">	alert(inner.caller);</div><div class="line">&#125;</div><div class="line">outer();</div></pre></td></tr></table></figure></p>
<p><code>inner.caller</code>指向<code>outer()</code>。为了实现更松散的耦合，也可以通过<code>argument.callee.caller</code>来访问相同的信息。<br><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 outer() &#123;</div><div class="line">	inner();</div><div class="line">&#125;</div><div class="line">function inner() &#123;</div><div class="line">	alert(arguments.callee.caller);</div><div class="line">&#125;</div><div class="line">outer();</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：当函数在<strong>严格模式</strong>下运行时，访问<code>arguments.callee</code> 会导致错误。ECMAScript 5 还定义了<code>arguments.caller</code>属性，但在严格模式下访问它也会导致错误，而在非严格模式下这个属性始终是<code>undefined</code>。定义这个属性是为了分清<code>arguments.caller</code> 和函数的<code>caller</code> 属性。以上变化都是为了加强这门语言的安全性，这样第三方代码就不能在相同的环境里窥视其他代码了。<br><strong>严格模式</strong>还有一个限制：不能为函数的<code>caller</code> 属性赋值，否则会导致错误。</p>
<h4 id="函数属性和方法"><a href="#函数属性和方法" class="headerlink" title="函数属性和方法"></a>函数属性和方法</h4><p>每个函数都包含两个属性:</p>
<ul>
<li><code>length</code>: 表示函数希望接收的命名参数的个数</li>
<li><code>prototype</code>: 保存实例方法</li>
</ul>
<p>每个函数都包含两个非继承而来的方法：</p>
<ul>
<li><code>apply()</code></li>
<li><code>call()</code><br>这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内<code>this</code> 对象的值。首先，<code>apply()</code>方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是<code>Array</code> 的实例，也可以是<code>arguments</code>对象。<br><code>call()</code>方法与<code>apply()</code>方法的作用相同，它们的区别仅在于接收参数的方式不同。对于<code>call()</code>方法而言，第一个参数是<code>this</code> 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用<code>call()</code>方法时，传递给函数的参数必须逐个列举出来。</li>
</ul>
<p><strong>注</strong>：在严格模式下，未指定环境对象而调用函数，则<code>this</code> 值不会转型为<code>window</code>。除非明确把函数添加到某个对象或者调用<code>apply()</code>或<code>call()</code>，否则this 值将是<code>undefined</code>。</p>
<p>在非严格模式下，<code>call</code>、<code>apply</code>的第一个参数传递为<code>null</code>或<code>undefined</code>时，函数体内的<code>this</code>会指向默认的宿主对象，在浏览器中则是<code>window</code>。</p>
<p><strong>ECMAScript 5</strong>定义了一个方法<code>bind()</code>，这个方法会创建一个函数的实例，其<code>this</code>值会被绑定到传给<code>bind()</code>函数的值。</p>
<h3 id="基本包装类型"><a href="#基本包装类型" class="headerlink" title="基本包装类型"></a>基本包装类型</h3><p>使用<code>new</code>调用基本包装类型的构造函数，与直接调用同名的转型函数是不一样的。<br><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">var value = &apos;25&apos;;</div><div class="line">var number = Number(value);	// 转型函数</div><div class="line">console.log(typeof number);	// &apos;number&apos;</div><div class="line"></div><div class="line">var obj = new Number(value); // 构造函数</div><div class="line">console.log(typeof obj);	// &apos;object&apos;</div></pre></td></tr></table></figure></p>
<h4 id="Number类型"><a href="#Number类型" class="headerlink" title="Number类型"></a>Number类型</h4><p>Number类型的<code>toString()</code>方法很特别，可以传递一个表示基数的参数。<br><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">var num = 10;</div><div class="line">alert(num.toString()); //&quot;10&quot;</div><div class="line">alert(num.toString(2)); //&quot;1010&quot;</div><div class="line">alert(num.toString(8)); //&quot;12&quot;</div><div class="line">alert(num.toString(10)); //&quot;10&quot;</div><div class="line">alert(num.toString(16)); //&quot;a&quot;</div></pre></td></tr></table></figure></p>
<h4 id="String类型"><a href="#String类型" class="headerlink" title="String类型"></a>String类型</h4><h5 id="字符方法"><a href="#字符方法" class="headerlink" title="字符方法"></a>字符方法</h5><ul>
<li><code>charAt()</code></li>
<li><code>charCodeAt()</code></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></pre></td><td class="code"><pre><div class="line">var stringValue = &quot;hello world&quot;;</div><div class="line"></div><div class="line">alert(stringValue.charAt(1)); //&quot;e&quot;</div><div class="line">alert(stringValue.charCodeAt(1)); //输出字符编码&quot;101&quot;</div></pre></td></tr></table></figure>
<h5 id="字符串操作方法"><a href="#字符串操作方法" class="headerlink" title="字符串操作方法"></a>字符串操作方法</h5><ul>
<li><code>concat()</code></li>
<li><code>slice()</code></li>
<li><code>substr()</code></li>
<li><code>substring()</code></li>
</ul>
<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><div class="line">22</div></pre></td><td class="code"><pre><div class="line">var stringValue = &quot;hello &quot;;</div><div class="line">var result = stringValue.concat(&quot;world&quot;, &quot;!&quot;);</div><div class="line">alert(result); //&quot;hello world!&quot;</div><div class="line"></div><div class="line">var stringValue = &quot;hello world&quot;;</div><div class="line">alert(stringValue.slice(3)); //&quot;lo world&quot;</div><div class="line">alert(stringValue.substring(3)); //&quot;lo world&quot;</div><div class="line">alert(stringValue.substr(3)); //&quot;lo world&quot;</div><div class="line">alert(stringValue.slice(3, 7)); //&quot;lo w&quot;</div><div class="line">alert(stringValue.substring(3,7)); //&quot;lo w&quot;</div><div class="line">alert(stringValue.substr(3, 7)); //&quot;lo worl&quot;</div><div class="line"></div><div class="line">// 参数是负值的情况下，它们的行为就不尽相同了。</div><div class="line">// 其中，slice()方法会将传入的负值与字符串的长度相加，</div><div class="line">// substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。</div><div class="line">// 最后，substring()方法会把所有负值参数都转换为0。</div><div class="line">alert(stringValue.slice(-3)); //&quot;rld&quot;</div><div class="line">alert(stringValue.substring(-3)); //&quot;hello world&quot;</div><div class="line">alert(stringValue.substr(-3)); //&quot;rld&quot;</div><div class="line">alert(stringValue.slice(3, -4)); //&quot;lo w&quot;</div><div class="line">alert(stringValue.substring(3, -4)); //&quot;hel&quot;</div><div class="line">alert(stringValue.substr(3, -4)); //&quot;&quot;（空字符串）</div></pre></td></tr></table></figure>
<h5 id="字符串位置方法"><a href="#字符串位置方法" class="headerlink" title="字符串位置方法"></a>字符串位置方法</h5><ul>
<li><code>indexOf()</code></li>
<li><code>lastIndexOf()</code></li>
</ul>
<p>两个方法的第二个参数，表示从字符串中哪个位置开始搜索。</p>
<h5 id="trim-方法"><a href="#trim-方法" class="headerlink" title="trim()方法"></a>trim()方法</h5><p><strong>ECMAScript 5</strong>方法</p>
<h5 id="字符串转换大小写方法"><a href="#字符串转换大小写方法" class="headerlink" title="字符串转换大小写方法"></a>字符串转换大小写方法</h5><ul>
<li><code>toLowerCase()</code></li>
<li><code>toLocaleLowerCase()</code></li>
<li><code>toUpperCase()</code></li>
<li><code>toLocaleUpperCase()</code></li>
</ul>
<h5 id="字符串的模式匹配方法"><a href="#字符串的模式匹配方法" class="headerlink" title="字符串的模式匹配方法"></a>字符串的模式匹配方法</h5><ul>
<li><code>match()</code></li>
<li><code>search()</code></li>
<li><code>replace()</code></li>
<li><code>split()</code></li>
</ul>
<p><code>match()</code>方法，在字符串上调用这个方法，本质上和调用<code>RegExp</code>的<code>exec()</code>方法相同。<code>match()</code>方法只接受一个参数，要么是一个正则表达式，要么是一个<strong>RegExp</strong>对象。<br><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">var text = &apos;cat, bat, sat, fat&apos;;</div><div class="line">var pattern = /.at/;</div><div class="line"></div><div class="line">// 等价于 pattern.exec(text)</div><div class="line">var matches = text.match(pattern);</div><div class="line">alert(matches.index); //0</div><div class="line">alert(matches[0]); //&quot;cat&quot;</div><div class="line">alert(pattern.lastIndex); //0</div></pre></td></tr></table></figure></p>
<p><code>search()</code>方法的参数与<code>match()</code>方法相同，该方法返回字符串中第一个匹配项的索引，没有匹配项返回<code>-1</code>；个人认为<code>serch()</code>就是正则版的<code>indexOf()</code>。<br><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">var text = &quot;cat, bat, sat, fat&quot;;</div><div class="line">var pos = text.search(/at/);</div><div class="line">aler t(pos); //1</div></pre></td></tr></table></figure></p>
<p><strong>ECMAScript</strong>提供了<code>replace()</code>方法，该方法接受两个参数，第一个参数可以是<strong>RegExp</strong>对象或者是一个字符串，第二个参数可以是一个字符串或者一个函数。<br><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">var text = &quot;cat, bat, sat, fat&quot;;</div><div class="line">var result = text.replace(&quot;at&quot;, &quot;ond&quot;);</div><div class="line">alert(result); //&quot;cond, bat, sat, fat&quot;</div><div class="line"></div><div class="line">result = text.replace(/at/g, &quot;ond&quot;);</div><div class="line">aler t(result); //&quot;cond, bond, sond, fond&quot;</div></pre></td></tr></table></figure></p>
<table>
<thead>
<tr>
<th>字符序列</th>
<th>替换文本</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$$</code></td>
<td><code>$</code></td>
</tr>
<tr>
<td><code>$&amp;</code></td>
<td>匹配整个模式的子字符串。RegExp.lastMatch</td>
</tr>
<tr>
<td><code>$&#39;</code></td>
<td>匹配子字符串之前的字符串。RegExp.leftContext</td>
</tr>
<tr>
<td>$`</td>
<td>匹配的子字符串之后的字符串。 RegExp.rightContext</td>
</tr>
<tr>
<td><code>$n</code></td>
<td>匹配第n个捕获组的子字符串 n: 0~9</td>
</tr>
<tr>
<td><code>$nn</code></td>
<td>匹配第nn个捕获组的子字符串 nn: 01~99</td>
</tr>
</tbody>
</table>
<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">var text = &quot;cat, bat, sat, fat&quot;;</div><div class="line">result = text.replace(/(.at)/g, &quot;word ($1)&quot;);</div><div class="line">alert(result); //word (cat), word (bat), word (sat), word (fat)</div></pre></td></tr></table></figure>
<p><code>split()</code>方法可以基于指定的分隔符(字符串 or RegExp对象)将一个字符串分割成多个子字符串，并将结构放在一个数组中。可以接受可选的第二个参数，用于指定数组的大小。<br><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">var colorText = &quot;red,blue,green,yellow&quot;;</div><div class="line">var colors1 = colorText.split(&quot;,&quot;); //[&quot;red&quot;, &quot;blue&quot;, &quot;green&quot;, &quot;yellow&quot;]</div><div class="line">var colors2 = colorText.split(&quot;,&quot;, 2); //[&quot;red&quot;, &quot;blue&quot;]</div><div class="line">var colors3 = colorText.split(/[^\,]+/); //[&quot;&quot;, &quot;,&quot;, &quot;,&quot;, &quot;,&quot;, &quot;&quot;]</div></pre></td></tr></table></figure></p>
<h5 id="localeCompare-方法"><a href="#localeCompare-方法" class="headerlink" title="localeCompare()方法"></a>localeCompare()方法</h5><p>比较两个字符串，并返回下列值中的 一个：</p>
<ul>
<li>如果字符串在字母表中应该排在字符串参数之前，则返回一个负数</li>
<li>如果字符串等于字符串参数，则返回0；</li>
<li>如果字符串在字母表中应该排在字符串参数之后，则返回一个正数</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></pre></td><td class="code"><pre><div class="line">var stringValue = &quot;yellow&quot;;</div><div class="line">alert(stringValue.localeCompare(&quot;brick&quot;)); //1</div><div class="line">alert(stringValue.localeCompare(&quot;yellow&quot;)); //0</div><div class="line">alert(stringValue.localeCompare(&quot;zoo&quot;)); //-1</div></pre></td></tr></table></figure>
<h5 id="fromCharCode-方法"><a href="#fromCharCode-方法" class="headerlink" title="fromCharCode()方法"></a>fromCharCode()方法</h5><p>这个方法的任务是接收一个或多个字符编码，然后将它们转换成一个字符串。相当于<code>charCodeAt()</code>反操作。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">alert(String.fromCharCode(104, 101, 108, 108, 111)); //&quot;hello&quot;</div></pre></td></tr></table></figure></p>
<h4 id="Math-对象"><a href="#Math-对象" class="headerlink" title="Math 对象"></a>Math 对象</h4><ul>
<li><code>min()</code></li>
<li><code>max()</code></li>
<li><code>ceil()</code></li>
<li><code>floor()</code></li>
<li><code>round()</code></li>
<li><code>random()</code></li>
</ul>
<h2 id="面向对象的程序设计"><a href="#面向对象的程序设计" class="headerlink" title="面向对象的程序设计"></a>面向对象的程序设计</h2><h3 id="理解对象"><a href="#理解对象" class="headerlink" title="理解对象"></a>理解对象</h3><h4 id="属性类型"><a href="#属性类型" class="headerlink" title="属性类型"></a>属性类型</h4><h5 id="数据类型-1"><a href="#数据类型-1" class="headerlink" title="数据类型"></a>数据类型</h5><ul>
<li><code>[[Configurable]]</code>: 表示能否通过<code>delete</code>删除属性从而重新定义属性，能够修改属性的特性，或者能否把属性修改为访问器属性</li>
<li><code>[[Enumerable]]</code>: 表示能否通过<code>for-in</code>循环返回属性</li>
<li><code>[[Writable]]</code>: 表示能否修改属性的值</li>
<li><code>[[Value]]</code>: 包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。默认值<code>undefined</code></li>
</ul>
<p>要修改属性默认的特性，必须使用<strong>ECMAScript 5</strong>的<code>Object.defineProperty()</code>方法。这个方法接受三个参数：属性所在对象，属性名和一个描述符对象。其中描述符对象的属性值必须是：<code>configurable</code>、<code>enumerable</code>、<code>writable</code>和<code>value</code>。设置其中一个或多个。<br><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 person = &#123;&#125;;</div><div class="line">Object.defineProperty(person, &apos;name&apos;, &#123;</div><div class="line">	writable: false,</div><div class="line">	value: &apos;Yeaseon&apos;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p><code>Object.defineProperty()</code>方法不能对<code>configurable: false</code>的对象进行修改。</p>
<h5 id="访问器属性"><a href="#访问器属性" class="headerlink" title="访问器属性"></a>访问器属性</h5><ul>
<li><code>[[Configurable]]</code>: 表示能否通过<code>delete</code>删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。</li>
<li><code>[[Enumerable]]</code>: 表示能否通过<code>for-in</code>循环返回属性。</li>
<li><code>[[Get]]</code>: 在读取属性时调用的函数，默认<code>undefined</code></li>
<li><code>[[Set]]</code>: 在写入属性时调用的函数，默认<code>undefined</code></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><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">var book = &#123;</div><div class="line">	_year: 2004,</div><div class="line">	edition: 1</div><div class="line">&#125;;</div><div class="line">Object.defineProperty(book, &quot;year&quot;, &#123;</div><div class="line">	get: function()&#123;</div><div class="line">		return this._year;</div><div class="line">	&#125;,</div><div class="line">	set: function(newValue)&#123;</div><div class="line">		if (newValue &gt; 2004) &#123;</div><div class="line">			this._year = newValue;</div><div class="line">			this.edition += newValue - 2004;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;);</div><div class="line">book.year = 2005;</div><div class="line">alert(book.edition); //2</div></pre></td></tr></table></figure>
<h4 id="读取属性的特性"><a href="#读取属性的特性" class="headerlink" title="读取属性的特性"></a>读取属性的特性</h4><p><strong>ECMAScript 5</strong>的<code>Object.getOwnPropertyDescriptor()</code>方法，可以取得给定属性的描述符。该方法接收两个参数：属性所在的对象和要读取器描述符的属性名称，返回值是对象。</p>
<h3 id="创建对象"><a href="#创建对象" class="headerlink" title="创建对象"></a>创建对象</h3><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><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">function createPerson(name, age, job)&#123;</div><div class="line">	var o = new Object();</div><div class="line">	o.name = name;</div><div class="line">	o.age = age;</div><div class="line">	o.job = job;</div><div class="line">	o.sayName = function()&#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;;</div><div class="line">	return o;</div><div class="line">&#125;</div><div class="line">var person1 = createPerson(&quot;Nicholas&quot;, 29, &quot;Software Engineer&quot;);</div><div class="line">var person2 = createPerson(&quot;Greg&quot;, 27, &quot;Doctor&quot;);</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><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">function Person(name, age, job)&#123;</div><div class="line">	this.name = name;</div><div class="line">	this.age = age;</div><div class="line">	this.job = job;</div><div class="line">	this.sayName = function()&#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;;</div><div class="line">&#125;</div><div class="line">var person1 = new Person(&quot;Nicholas&quot;, 29, &quot;Software Engineer&quot;);</div><div class="line">var person2 = new Person(&quot;Greg&quot;, 27, &quot;Doctor&quot;);</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><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">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype.name = &quot;Nicholas&quot;;</div><div class="line">Person.prototype.age = 29;</div><div class="line">Person.prototype.job = &quot;Software Engineer&quot;;</div><div class="line">Person.prototype.sayName = function()&#123;</div><div class="line">	alert(this.name);</div><div class="line">&#125;;</div><div class="line"></div><div class="line">var person1 = new Person();</div><div class="line">person1.sayName(); //&quot;Nicholas&quot;</div></pre></td></tr></table></figure>
<p><code>Person.prototype.constructor</code>会指向<code>Person</code>，<code>person1</code>并没有直接连接到构造函数<code>Person</code>。</p>
<img src="/2017/04/27/JS红宝书·读书笔记/prototype-1.png" alt="prototype-1.png" title="">
<ul>
<li>可以通过<code>isPrototypeOf()</code>方法来确定对象之间是否存在原型关系。从本质上讲，<code>[[Prototype]]</code>指向调用<code>isPrototypeOf()</code>方法的对象<code>Person.prototype</code>，则会返回<code>true</code>。</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">alert(Person.prototype.isPrototypeOf(person1)); //true</div></pre></td></tr></table></figure>
<p>在<strong>ECMAScript 5</strong>增加了<code>Object.getPrototypeOf()</code>方法，该方法返回<code>[[Prototype]]</code>的值。<br><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">alert(Object.getPrototypeOf(person1) == Person.prototype); //true</div><div class="line">alert(Object.getPrototypeOf(person1).name); //&quot;Nicholas&quot;</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>: 虽然可以通过对象实例<code>person1</code>访问保存在原型中的值，但却不能重写原型中的值。<br><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></pre></td><td class="code"><pre><div class="line">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype.name = &quot;Nicholas&quot;;</div><div class="line">Person.prototype.age = 29;</div><div class="line">Person.prototype.job = &quot;Software Engineer&quot;;</div><div class="line">Person.prototype.sayName = function()&#123;</div><div class="line">	alert(this.name);</div><div class="line">&#125;;</div><div class="line"></div><div class="line">var person1 = new Person();</div><div class="line">var person2 = new Person();</div><div class="line"></div><div class="line">person1.name = &quot;Greg&quot;; //实质是在实例上增加一个name属性</div><div class="line">alert(person1.name); //&quot;Greg&quot;——来自实例</div><div class="line">alert(person2.name); //&quot;Nicholas&quot;——来自原型</div></pre></td></tr></table></figure></p>
<p>可以通过<code>delete</code>删除实例属性，从而继续访问原型中的属性。<br><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></pre></td><td class="code"><pre><div class="line">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype.name = &quot;Nicholas&quot;;</div><div class="line">Person.prototype.age = 29;</div><div class="line">Person.prototype.job = &quot;Software Engineer&quot;;</div><div class="line">Person.prototype.sayName = function()&#123;</div><div class="line">	alert(this.name);</div><div class="line">&#125;;</div><div class="line">var person1 = new Person();</div><div class="line"></div><div class="line">person1.name = &quot;Greg&quot;;</div><div class="line">alert(person1.name); //&quot;Greg&quot;——来自实例</div><div class="line"></div><div class="line">delete person1.name;</div><div class="line">alert(person1.name); //&quot;Nicholas&quot;——来自原型</div></pre></td></tr></table></figure></p>
<ul>
<li><code>hasOwnProperty()</code>方法可以检测一个属性是不是存在于实例，是则返回<code>true</code>。</li>
</ul>
<img src="/2017/04/27/JS红宝书·读书笔记/prototype-2.png" alt="prototype-2.png" title="">
<ul>
<li><p><code>in</code>操作符<br>（prop in obj）通过<code>in</code>操作符可以判定对象是否有该属性，不论是本身含有还是原型含有，都返回<code>true</code>。<br>可以通过<code>in</code>配合<code>hasOwnProperty()</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></pre></td><td class="code"><pre><div class="line">function detectProperty(obj, name) &#123;</div><div class="line">	if (name in obj) &#123;</div><div class="line">		obj.hasOwnProperty(name) ? &apos;在对象中&apos; : &apos;在原型中&apos;;</div><div class="line">	&#125; else &#123;</div><div class="line">		console.log(&apos;不含有该属性&apos;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p><strong>ECMAScript 5</strong><code>Object.keys()</code>方法可以取得对象上所有可枚举的实例属性。</p>
</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><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">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype.name = &quot;Nicholas&quot;;</div><div class="line">Person.prototype.age = 29;</div><div class="line">Person.prototype.job = &quot;Software Engineer&quot;;</div><div class="line">Person.prototype.sayName = function()&#123;</div><div class="line">	alert(this.name);</div><div class="line">&#125;;</div><div class="line">var keys = Object.keys(Person.prototype);</div><div class="line">alert(keys); //&quot;name,age,job,sayName&quot;</div><div class="line"></div><div class="line">var p1 = new Person();</div><div class="line">p1.name = &quot;Rob&quot;;</div><div class="line">p1.age = 31;</div><div class="line">var p1keys = Object.keys(p1);</div><div class="line">alert(p1keys); //&quot;name,age&quot;</div></pre></td></tr></table></figure>
<ul>
<li><code>Object.getOwnPropertyNames</code>会得到所有实例属性，不论是否可枚举。</li>
</ul>
<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">var keys = Object.getOwnPropertyNames(Person.prototype);</div><div class="line">alert(keys); //&quot;constructor,name,age,job,sayName&quot;</div></pre></td></tr></table></figure>
<p>简化<code>Person.prototype</code>写法：<br><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">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype = &#123;</div><div class="line">	name : &quot;Nicholas&quot;,</div><div class="line">	age : 29,</div><div class="line">	job: &quot;Software Engineer&quot;,</div><div class="line">	sayName : function () &#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>这样写有一个缺陷，<code>constructor</code>属性则会等于<code>Object</code>，我们需要手动设置<code>constructor</code>。<br><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">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype = &#123;</div><div class="line">	constructor : Person,</div><div class="line">	name : &quot;Nicholas&quot;,</div><div class="line">	age : 29,</div><div class="line">	job: &quot;Software Engineer&quot;,</div><div class="line">	sayName : function () &#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>但这同时也会导致<code>constructor</code>的<code>[[Enumerable]]</code>特性变成了<code>true</code>，默认情况下是<code>false</code>。再修改下写法：<br><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></pre></td><td class="code"><pre><div class="line">function Person()&#123;</div><div class="line">&#125;</div><div class="line">Person.prototype = &#123;</div><div class="line">	name : &quot;Nicholas&quot;,</div><div class="line">	age : 29,</div><div class="line">	job : &quot;Software Engineer&quot;,</div><div class="line">	sayName : function () &#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">Object.defineProperty(Person.prototype, &quot;constructor&quot;, &#123;</div><div class="line">	enumerable: false,</div><div class="line">	value: Person</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p><strong>原型重写</strong>会导致构造函数与最初原型之间的联系切断。<br><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">function Person()&#123;</div><div class="line">&#125;</div><div class="line">var friend = new Person();</div><div class="line">Person.prototype = &#123;  //重写</div><div class="line">	constructor: Person,</div><div class="line">	name : &quot;Nicholas&quot;,</div><div class="line">	age : 29,</div><div class="line">	job : &quot;Software Engineer&quot;,</div><div class="line">	sayName : function () &#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;</div><div class="line">&#125;;</div><div class="line">friend.sayName(); //error</div></pre></td></tr></table></figure></p>
<img src="/2017/04/27/JS红宝书·读书笔记/prototype-3.png" alt="prototype-3.png" title="">
<h4 id="结合使用构造函数和原型模式"><a href="#结合使用构造函数和原型模式" class="headerlink" title="结合使用构造函数和原型模式"></a>结合使用构造函数和原型模式</h4><p>用构造函数模式定义实例属性，用原型模式定义方法和共享属性。<br><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">function Person(name, age, job)&#123;</div><div class="line">	this.name = name;</div><div class="line">	this.age = age;</div><div class="line">	this.job = job;</div><div class="line">	this.friends = [&quot;Shelby&quot;, &quot;Court&quot;];</div><div class="line">&#125;</div><div class="line">Person.prototype = &#123;</div><div class="line">	constructor : Person,</div><div class="line">	sayName : function()&#123;</div><div class="line">		alert(this.name);</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">var person1 = new Person(&quot;Nicholas&quot;, 29, &quot;Software Engineer&quot;);</div><div class="line">var person2 = new Person(&quot;Greg&quot;, 27, &quot;Doctor&quot;);</div><div class="line"></div><div class="line">person1.friends.push(&quot;Van&quot;);</div><div class="line">alert(person1.friends); //&quot;Shelby,Count,Van&quot;</div><div class="line">alert(person2.friends); //&quot;Shelby,Count&quot;</div><div class="line">alert(person1.friends === person2.friends); //false</div><div class="line">alert(person1.sayName === person2.sayName); //true</div></pre></td></tr></table></figure></p>
<h3 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h3><p>构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型的内部指针。</p>
<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><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">function SuperType () &#123;</div><div class="line">	this.property = true;</div><div class="line">&#125;</div><div class="line"></div><div class="line">SuperType.prototype.getSuperValue = function () &#123;</div><div class="line">	return this.property;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">function SubType () &#123;</div><div class="line">	this.subproperty = false;</div><div class="line">&#125;</div><div class="line"></div><div class="line">SubType.prototype = new SuperType();</div><div class="line"></div><div class="line">SubType.prototype.getSubValue = function () &#123;</div><div class="line">	return this.subproperty;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">var instance = new SubType();</div><div class="line">console.log(instance.getSuperValue());  // true</div></pre></td></tr></table></figure>
<img src="/2017/04/27/JS红宝书·读书笔记/prototype-4.png" alt="prototype-4.png" title="">
<h5 id="instanceof操作符"><a href="#instanceof操作符" class="headerlink" title="instanceof操作符"></a><code>instanceof</code>操作符</h5><p>用来确定原型和实例之间的关系。<br><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">alert(instance instanceof Object); //true</div><div class="line">alert(instance instanceof SuperType); //true</div><div class="line">alert(instance instanceof SubType); //true</div></pre></td></tr></table></figure></p>
<p>第二种方式就是<code>isPrototypeOf()</code>方法，只要原型链中出现过的原型，都可以说是该原型链所派生的实例的原型。<br><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">alert(Object.prototype.isPrototypeOf(instance)); //true</div><div class="line">alert(SuperType.prototype.isPrototypeOf(instance)); //true</div><div class="line">alert(SubType.prototype.isPrototypeOf(instance)); //true</div></pre></td></tr></table></figure></p>
<h2 id="函数表达式"><a href="#函数表达式" class="headerlink" title="函数表达式"></a>函数表达式</h2><p>由于有声明提升的存在，定义函数不要放在条件表达式中<br><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">if (condition) &#123;</div><div class="line">	function sayHi () &#123;</div><div class="line">		console.log(&apos;Hi&apos;);</div><div class="line">	&#125;</div><div class="line">&#125; else &#123;</div><div class="line">	function sayHi () &#123;</div><div class="line">		console.log(&apos;Yo&apos;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>在<strong>ECMAScript</strong>中属于无效语法，在不同浏览器中修正的做法并不一致。推荐的写法，如下：<br><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">var sayHi;</div><div class="line"></div><div class="line">if (condition) &#123;</div><div class="line">	sayHi = function () &#123;</div><div class="line">		console.log(&apos;Hi&apos;);</div><div class="line">	&#125;</div><div class="line">&#125; else &#123;</div><div class="line">	sayHi = function () &#123;</div><div class="line">		console.log(&apos;Yo&apos;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>这种函数表达式不存在声明提升，所以OK。</p>
<h3 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h3><h4 id="函数作用域链"><a href="#函数作用域链" class="headerlink" title="函数作用域链"></a>函数作用域链</h4><p>当某个函数被调用时，会创建一个执行环境及相应的作用域链。然后，使用<code>arguments</code>和其他命名参数的值来初始化函数的活动对象。在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位…，直到作用域终点的全局执行环境。</p>
<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><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 createFunctions () &#123;</div><div class="line">	var result = new Array();</div><div class="line">	for (var i=0; i &lt; 10; i++)&#123;</div><div class="line">		result[i] = function()&#123;</div><div class="line">			return i;</div><div class="line">		&#125;;</div><div class="line">	&#125;</div><div class="line">	return result;</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></pre></td><td class="code"><pre><div class="line">function createFunction () &#123;</div><div class="line">	var result = new Array();</div><div class="line">	for (var i = 0; i &lt; 10; i++) &#123;</div><div class="line">		result[i] = function (num) &#123;</div><div class="line">			return function () &#123;</div><div class="line">				return num;</div><div class="line">			&#125;;</div><div class="line">		&#125;(i);</div><div class="line">	&#125;</div><div class="line">	return result;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><strong>注</strong>：在闭包中使用<code>this</code>对象可能会导致一些问题。匿名函数的执行环境具有全局性，因此其<code>this</code>对象通常指向<code>window</code>。<br><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">var name = &apos;The window&apos;;</div><div class="line"></div><div class="line">var obj = &#123;</div><div class="line">	name: &apos;my object&apos;,</div><div class="line">	getNameFunc: function () &#123;</div><div class="line">		return function () &#123;</div><div class="line">			return this.nam;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">console.log(obj.getNameFunc()());  // The Window (非严格模式)</div></pre></td></tr></table></figure></p>
<h3 id="模仿块级作用域"><a href="#模仿块级作用域" class="headerlink" title="模仿块级作用域"></a>模仿块级作用域</h3><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></pre></td><td class="code"><pre><div class="line">(function () &#123;</div><div class="line">	// 这里是块级作用域</div><div class="line">&#125;)();</div></pre></td></tr></table></figure>
<h2 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h2><hr>
<h3 id="window-对象"><a href="#window-对象" class="headerlink" title="window 对象"></a>window 对象</h3><h4 id="全局作用域"><a href="#全局作用域" class="headerlink" title="全局作用域"></a>全局作用域</h4><p>抛开全局变量会成为<code>window</code>对象的属性不谈，定义全局变量与在<code>window</code>对象上直接定义属性还是有一点差别：<strong>全局变量不能通过<code>delete</code>操作符删除，而直接定义在<code>window</code>对象上的定义的属性可以</strong>。</p>
<h4 id="窗口位置"><a href="#窗口位置" class="headerlink" title="窗口位置"></a>窗口位置</h4><p>获得窗口左边和上边的位置。<br><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">var leftPos = (typeof window.screenLeft == &apos;number&apos;) ? window.screenLeft : window.screenX;</div><div class="line">var topPos = (typeof window.screenTop == &apos;number&apos;) ? window.screenTop : window.screenY;</div></pre></td></tr></table></figure></p>
<p>Firefox支持<code>screenX</code>和<code>screenY</code>，其他浏览器均支持<code>screenLeft</code>、<code>screenTop</code>。</p>
<p>但是还是需要注意一个问题：在<code>IE</code> <code>Opera</code>中，<code>screenLeft  screenTop</code> 保存的的是可见区域的距离，也就是我们浏览器中不包含工具栏的区域与屏幕的距离；在<code>Chrome</code>、<code>Firefox</code>和<code>Safari</code>中<code>screenY</code>或<code>screenTop</code>返回的是整个浏览器窗口相对于屏幕坐标的值。</p>
<h4 id="窗口大小"><a href="#窗口大小" class="headerlink" title="窗口大小"></a>窗口大小</h4><p>IE9+、Firefox、Safari、Opera和Chrome均提供了4个属性<code>innerWidth</code>、<code>innerHeight</code>、<code>outerWidth</code>和<code>outerHeight</code>。</p>
<ul>
<li>IE9+、Safari和Firefox中，<code>outerWidth</code>和<code>outerHeight</code>返回浏览器窗口本身的尺寸，而<code>innerWidth</code>和<code>innerHeight</code>则表示该容器中页面视图区的大小（减去边框宽度）</li>
<li>Chrome中，<code>inner*</code>和<code>outer*</code>返回相同的值，即视口大小而非浏览器窗口的大小。</li>
<li>在IE、Firefox、Safari、Opera和Chrome中，都能通过<code>document.documentElement.clientWidth</code>和<code>document.documentElement.clientHeight</code>中保存了页面视口信息。</li>
</ul>
<p>获取页面视口大小<br><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">var pageWidth = window.innerWidth,</div><div class="line">	pageHeight = window.innerHeight;</div><div class="line"></div><div class="line">if (typeof pageWidth != &apos;number&apos;) &#123;</div><div class="line">	if (document.compatMode == &apos;CSS1Compat&apos;) &#123; // 浏览器标准模式</div><div class="line">		pageWidth = document.documentElement.clientWidth;</div><div class="line">		pageHeight = document.documentElement.clientHeight;</div><div class="line">	&#125; else &#123;  // IE6 混杂模式</div><div class="line">		pageWidth = document.body.clientWidth;</div><div class="line">		pageHeight = document.doby.clientHeight;</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<ul>
<li><code>resizeTo()</code>接受浏览器窗口的新宽度和新高度</li>
<li><code>resizeBy()</code>接受新窗口与原窗口的宽度和高度差。</li>
</ul>
<p>这两个方法可能被浏览器禁用。</p>
<h4 id="导航"><a href="#导航" class="headerlink" title="导航"></a>导航</h4><p>如果是浏览器内置的屏蔽程序组织的弹出窗口，那么<code>window.open()</code>很可能会返回<code>null</code>。<br><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">var newWindow = window.open(&apos;https://www.google.com.hk&apos;, &apos;_blank&apos;);</div><div class="line">if (newWindow == null) &#123;</div><div class="line">	console.log(&apos;The popup was blocked!&apos;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>如果是浏览器扩展或其他程序组织的弹出窗口，那么<code>window.open()</code>通常会抛出一个错误。<br><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">var blocked = false;</div><div class="line"></div><div class="line">try &#123;</div><div class="line">	var newWindow = window.open(&apos;https://www.google.com.hk&apos;, &apos;_blank&apos;);</div><div class="line">	if (newWindow == null) &#123;</div><div class="line">		blocked = true;</div><div class="line">	&#125;</div><div class="line">&#125; catch (ex) &#123;</div><div class="line">	blocked = true;</div><div class="line">&#125;</div><div class="line"></div><div class="line">if (blocked) &#123;</div><div class="line">	console.log(&apos;The popup was blocked&apos;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="location-对象"><a href="#location-对象" class="headerlink" title="location 对象"></a>location 对象</h3><p><code>location</code>对象的属性</p>
<ul>
<li><code>hash</code></li>
<li><code>host</code></li>
<li><code>hostname</code>：与<code>host</code>不同的是，不带端口号</li>
<li><code>href</code></li>
<li><code>pathname</code>: 返回URL中的目录和（或）文件名</li>
<li><code>port</code></li>
<li><code>protocol</code></li>
<li><code>search</code>：返回URL的查询字符串，这个字符串<code>?</code>开头</li>
</ul>
<h3 id="navigator-对象"><a href="#navigator-对象" class="headerlink" title="navigator 对象"></a>navigator 对象</h3><p><code>location</code>对象的属性</p>
<ul>
<li><code>appCodeName</code>: 浏览器的名称，通常都是Mozilla</li>
<li><code>appMinorVersion</code>：此版本信息</li>
<li><code>appName</code>: 完整的浏览器名称</li>
<li><code>appVersion</code>：浏览器的版本</li>
<li><code>buildID</code>：浏览器编译版本</li>
<li><code>cookieEnabled</code>：表示<code>cookie</code>是否可用</li>
<li><code>cpuClass</code>：客户端计算机中使用的CPU类型</li>
<li><code>javaEnabled()</code>：表示当前浏览器中是否启用了java</li>
<li><code>language</code>: 浏览器的主语言</li>
<li><code>mimeTypes</code>：浏览器中注册的MIME类型数组</li>
<li><code>onLine</code>：表示浏览器是都连接到因特网</li>
<li><code>oscpu</code>：客户端计算机的操作系统或使用的CPU</li>
<li><code>platform</code>：浏览器所在的系统平台</li>
<li><code>plugins</code>：浏览器中安装的插件信息的数组</li>
<li><code>preference()</code>：设置用户的首选项</li>
<li><code>systemLanguage</code>：操作系统的语言</li>
<li><code>userAgent</code>：浏览器的用户代理字符串</li>
</ul>
<h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><hr>
<h3 id="节点层次"><a href="#节点层次" class="headerlink" title="节点层次"></a>节点层次</h3><h4 id="Node类型"><a href="#Node类型" class="headerlink" title="Node类型"></a>Node类型</h4><p>每个节点都有一个<code>nodeType</code>属性，用于表明节点的类型。</p>
<ul>
<li><code>Node.ELEMENT_NODE(1)</code></li>
<li><code>Node.ATTRIBUTE_NODE(2)</code></li>
<li><code>Node.TEXT_NODE(3)</code></li>
<li><code>Node.CDATA_SECTION_NODE(4)</code></li>
<li><code>Node.ENTITY_REFERENCE_NODE(5)</code></li>
<li><code>Node.ENTITY_NODE(6)</code></li>
<li><code>Node.PROCESSING_INSTRUCTION_NODE(7)</code></li>
<li><code>Node.COMMENT_NODE(8)</code></li>
<li><code>Node.DOCUMENT_NODE(9)</code></li>
<li><code>Node.DOCUMENT_TYPE_NODE(10)</code></li>
<li><code>Node.DOCUMENT_FRAGMENT_NODE(11)</code></li>
<li><code>Node.NOTATION_NODE(12)</code></li>
</ul>
<p>为了确保跨浏览器兼容，将<code>nodeType</code>属性与数字值进行比较：<br><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">if (someNode.nodeType == 1) &#123;</div><div class="line">	console.log(&apos;Node is an element&apos;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<ul>
<li><code>nodeName</code>属性<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">if (someNode.nodeType == 1) &#123;</div><div class="line">	var value = someNode.nodeName;  // nodeName的值是元素的标签名</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
</ul>
<h5 id="节点关系"><a href="#节点关系" class="headerlink" title="节点关系"></a>节点关系</h5><ul>
<li><code>childNodes</code>属性</li>
</ul>
<p>每个节点都有一个<code>childNodes</code>属性，其中保存着一个<code>NodeList</code>对象，该对象是一种类数组对象。</p>
<ul>
<li><code>parentNode</code>属性</li>
</ul>
<p>每个节点都有一个<code>parentNode</code>属性，该属性指向文档树中的父节点。包含在<code>childNodes</code>列表中的每个节点相互都是兄弟节点。使用<code>previousSibling</code>和<code>nextSibling</code>属性，可以访问其他兄弟节点。</p>
<p><strong>注</strong>：列表中第一个节点的<code>previousSibling</code>属性值为<code>null</code>，同理列表中最后一个节点的<code>nextSibling</code>属性也是<code>null</code>。父节点的<code>firstChild</code>和<code>lastChild</code>属性分别指向其<code>childNodes</code>列表中的第一个和最后一个节点。如果不存在则为<code>null</code>。</p>
<p><code>hasChildNodes()</code>方法在节点包含一个或多个子节点的情况下返回<code>true</code>，比查询<code>childNodes.length</code>更简便。</p>
<p>最后一个属性<code>ownerDocument</code>，该属性指向表示整个文档的文档节点（root），直接返回根节点不需要一层层向上回溯。</p>
<h5 id="操作节点"><a href="#操作节点" class="headerlink" title="操作节点"></a>操作节点</h5><ul>
<li><code>appendChild()</code></li>
</ul>
<p>用于向<code>childNodes</code>列表的末尾添加一个节点。<br><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">var returnedNode = someNode.appendChild(newNode);</div><div class="line">alert(returnedNode == newNode); //true</div><div class="line">alert(someNode.lastChild == newNode); //true</div></pre></td></tr></table></figure></p>
<p>任何DOM节点不可能同时出现在多个位置。<br><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">//someNode 有多个子节点</div><div class="line">var returnedNode = someNode.appendChild(someNode.firstChild);</div><div class="line">alert(returnedNode == someNode.firstChild); //false</div><div class="line">alert(returnedNode == someNode.lastChild); //true</div></pre></td></tr></table></figure></p>
<ul>
<li><code>insertBefore()</code></li>
</ul>
<p>把节点放在指定位置，该方法接受两个参数：要插入的节点和作为参考的节点。插入节点后，被插入的节点会变成参照节点的前一个兄弟节点。参照节点是<code>null</code>的话，<code>insertBefore</code>与<code>appendChild</code>执行相同的操作，都插入列表末尾。<br><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">//插入后成为最后一个子节点</div><div class="line">returnedNode = someNode.insertBefore(newNode, null);</div><div class="line">alert(newNode == someNode.lastChild); //true</div><div class="line"></div><div class="line">//插入后成为第一个子节点</div><div class="line">var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);</div><div class="line">alert(returnedNode == newNode); //true</div><div class="line">alert(newNode == someNode.firstChild); //true</div><div class="line"></div><div class="line">//插入到最后一个子节点前面</div><div class="line">returnedNode = someNode.insertBefore(newNode, someNode.lastChild);</div><div class="line">alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true</div></pre></td></tr></table></figure></p>
<ul>
<li><code>replaceChild()</code></li>
</ul>
<p>替换节点，接受两个参数：要插入的节点和要替换的节点。<br><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">//替换第一个子节点</div><div class="line">var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);</div><div class="line"></div><div class="line">//替换最后一个子节点</div><div class="line">returnedNode = someNode.replaceChild(newNode, someNode.lastChild);</div></pre></td></tr></table></figure></p>
<ul>
<li><code>removeChild()</code></li>
</ul>
<p>移除节点，接受一个参数：要被移除的节点。<br><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">//移除第一个子节点</div><div class="line">var formerFirstChild = someNode.removeChild(someNode.firstChild);</div><div class="line"></div><div class="line">//移除最后一个子节点</div><div class="line">var formerLastChild = someNode.removeChild(someNode.lastChild);</div></pre></td></tr></table></figure></p>
<ul>
<li><code>cloneNode()</code></li>
</ul>
<p>复制节点，接受一个布尔值，表示是否深复制。复制后返回的节点没有父节点，可以通过插入等操作手动指定。<br><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 deepList = myList.cloneNode(true);</div><div class="line">alert(deepList.childNodes.length); //3（IE &lt; 9）或7（其他浏览器）</div><div class="line"></div><div class="line">var shallowList = myList.cloneNode(false);</div><div class="line">alert(shallowList.childNodes.length); //0</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：<code>cloneNode</code>方法不会复制DOM节点的<code>js</code>属性。IE存在一个bug，它会复制事件处理程序。</p>
<ul>
<li><code>normalize()</code></li>
</ul>
<p>稍后讨论</p>
<p>以上方法的返回值，都是被操作的节点。</p>
<h4 id="Document类型"><a href="#Document类型" class="headerlink" title="Document类型"></a>Document类型</h4><p><code>Document</code>节点具有下列特征：</p>
<ul>
<li><code>nodeType</code>的值为9</li>
<li><code>nodeName</code>的值为<code>#document</code></li>
<li><code>nodeValue</code>的值为<code>null</code></li>
<li><code>parentNode</code>的值为<code>null</code></li>
<li><code>ownerDocument</code>的值为<code>null</code></li>
<li>其子节点可能是一个<code>DocumentType</code>（最多一个）、<code>Element</code>（最多一个）、<code>ProcessingInstruction</code>或<code>Comment</code></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><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">// 通过`documentElement`属性访问&lt;html&gt;元素</div><div class="line">var html = document.documentElement;</div><div class="line">// 访问 &lt;body&gt; 元素</div><div class="line">var body = document.body;</div><div class="line">// &lt;!DOCTYPE&gt;</div><div class="line">var doctype = document.doctype;</div><div class="line">// &lt;title&gt;</div><div class="line">var title = document.title;</div><div class="line">// 完整 url</div><div class="line">var url = document.URL;</div><div class="line">// domain 域名</div><div class="line">var domain = document.domain;</div><div class="line">// 取得来源页面的URL(也就是导航到这页的页面)</div><div class="line">var referrer = document.referrer;</div></pre></td></tr></table></figure>
<p>查找元素的方法：</p>
<ul>
<li><code>document.getElementById()</code></li>
<li><code>document.getElementsByTagName()</code></li>
<li><code>document.getElementsByName()</code></li>
</ul>
<p>文档写入：</p>
<ul>
<li><code>document.write()</code></li>
<li><code>document.writeln()</code>在字符串尾加换行符(\n)</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></pre></td><td class="code"><pre><div class="line">&lt;script type=&quot;text/javascript&quot;&gt;</div><div class="line">	document.write(&quot;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;file.js\&quot;&gt;&quot; + &quot;&lt;\/script&gt;&quot;);</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<h4 id="Element类型"><a href="#Element类型" class="headerlink" title="Element类型"></a>Element类型</h4><p><code>Element</code>类型提供了对元素标签名、子节点及特性的访问。</p>
<ul>
<li><code>nodeType</code>的值为1</li>
<li><code>nodeName</code>的值为元素的标签名</li>
<li><code>nodeValue</code>的值为<code>null</code></li>
<li><code>parentNode</code>可能是<code>Document</code>或<code>Element</code></li>
<li>其子节点可能是<code>Element</code>、<code>Text</code>、<code>Comment</code>、<code>ProcessingInstruction</code>、<code>CDATASection</code>或<code>EntityReference</code></li>
</ul>
<p>访问元素的标签名，可以使用<code>nodeName</code>属性，也可以使用<code>tagName</code>属性，后者更直观。<br><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">&lt;div id=&quot;myDiv&quot;&gt;&lt;/div&gt;</div><div class="line"></div><div class="line">var div = document.getElementById(&quot;myDiv&quot;);</div><div class="line">alert(div.tagName); //&quot;DIV&quot;</div><div class="line">alert(div.tagName == div.nodeName); //true</div></pre></td></tr></table></figure></p>
<p>操作特性的方法：</p>
<ul>
<li><code>getAttribute()</code></li>
<li><code>setAttribute()</code></li>
<li><code>removeAttribute()</code></li>
</ul>
<p><code>attributes</code>属性</p>
<p><code>Element</code>类型是使用<code>attributes</code>属性的唯一一个DOM节点属性。<code>attributes</code>属性包含一个<code>NamedNodeMap</code>。元素的每一个特性都由一个<code>Attr</code>节点表示，每个节点都保存在<code>NamedNodeMap</code>对象中。</p>
<p><code>NamedNodeMap</code>对象的方法：</p>
<ul>
<li><code>getNamedItem(name)</code>：返回<code>nodeName</code>属性等于<code>name</code>的节点</li>
<li><code>removeNamedItem(name)</code>：从列表中移除<code>nodeName</code>属性等于<code>name</code>的节点</li>
<li><code>setNamedItem(node)</code>：向列表中添加节点，以节点的<code>nodeName</code>属性为索引</li>
<li><code>item(pos)</code>：返回位于数字<code>pos</code>位置处的节点</li>
</ul>
<p><code>attributes</code>属性中包含一系列节点，每个节点的<code>nodeName</code>就是特性的名称，而节点<code>nodeValue</code>就是特性的值。<br><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">var id = element.attributes.getNamedItem(&apos;id&apos;).nodeValue;</div><div class="line">// 简写</div><div class="line">var id = element.attributes[&apos;id&apos;].nodeValue;</div></pre></td></tr></table></figure></p>
<p>创建元素<br><code>document.createElement()</code>方法可以创建新元素，这个方法接受一个参数（标签名）<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var div = document.createElement(&apos;div&apos;);</div></pre></td></tr></table></figure></p>
<h4 id="Text类型"><a href="#Text类型" class="headerlink" title="Text类型"></a>Text类型</h4><p>文本节点由<code>Text</code>类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。</p>
<ul>
<li><code>nodeType</code>的值为3</li>
<li><code>nodeName</code>的值为<code>#text</code></li>
<li><code>nodeValue</code>的值为节点所包含的文本</li>
<li><code>parentNode</code>是一个<code>Element</code></li>
</ul>
<p>操作节点中的文本：</p>
<ul>
<li><code>appendData(text)</code>：将<code>text</code>添加到节点的末尾</li>
<li><code>deleteData(offset, count)</code>：从<code>offset</code>指定的位置开始删除<code>count</code>个字符</li>
<li><code>insertData(offset, text)</code>：在<code>offset</code>指定的位置插入<code>text</code></li>
<li><code>replaceData(offset, count, text)</code>：用<code>text</code>替换从<code>offset</code>指定的位置开始到<code>offset+count</code>为止的文本</li>
<li><code>splitText(offset)</code>：从<code>offset</code>指定的位置将当前文本分成两个文本节点</li>
<li><code>substringData(offset, count)</code>：提取从<code>offset</code>指定的位置开始到<code>offset+count</code>为止处的字符串。</li>
</ul>
<p>在向DOM文档中插入文本之前，应该先对其进行<code>HTML</code>编码</p>
<p>创建文本节点</p>
<ul>
<li><code>document.createTextNode()</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var textNode = document.createTextNode(&quot;&lt;strong&gt;Hello&lt;/strong&gt; world!&quot;);</div></pre></td></tr></table></figure>
<h3 id="DOM-操作技术"><a href="#DOM-操作技术" class="headerlink" title="DOM 操作技术"></a>DOM 操作技术</h3><p>使用函数实现加载外部<code>JS</code>文件<br><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 loadScript(url) &#123;</div><div class="line">	var script = document.createElement(&apos;script&apos;);</div><div class="line">	script.type = &apos;text/javascript&apos;;</div><div class="line">	script.src = url;</div><div class="line">	document.body.appendChild(script);</div><div class="line">&#125;</div><div class="line">loadScirpt(&apos;xx.js&apos;);</div></pre></td></tr></table></figure></p>
<p>IE将<code>&lt;script&gt;</code>视为一个特殊的元素，不允许DOM访问其子节点。不过可以使用<code>&lt;script&gt;</code>元素的<code>text</code>属性指定<code>JS</code>代码。</p>
<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><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></pre></td><td class="code"><pre><div class="line">// create table</div><div class="line">var table = document.createElement(&apos;table&apos;);</div><div class="line">table.border = 1;</div><div class="line">table.width = &apos;100%&apos;;</div><div class="line"></div><div class="line">// create tbody</div><div class="line">var tbody = document.createElement(&apos;tbody&apos;);</div><div class="line">table.appendChild(tbody);</div><div class="line"></div><div class="line">// create row1</div><div class="line">var row1 = document.createElement(&apos;tr&apos;);</div><div class="line">tbody.appendChild(row1);</div><div class="line"></div><div class="line">var cell1_1 = document.createElement(&apos;td&apos;);</div><div class="line">cell1_1.appendChild(document.createTextNode(&apos;Cell 1,1&apos;));</div><div class="line">row1.appendChild(cell1_1);</div><div class="line"></div><div class="line">var cell2_1 = document.createElement(&apos;td&apos;);</div><div class="line">cell2_1.appendChild(document.createTextNode(&apos;Cell 2,1&apos;));</div><div class="line">row1.appendChild(cell2_1);</div><div class="line"></div><div class="line">// create row2</div><div class="line">var row2 = document.createElement(&apos;tr&apos;);</div><div class="line">tbody.appendChild(row2);</div><div class="line"></div><div class="line">var cell1_2 = document.createElement(&apos;td&apos;);</div><div class="line">cell1_2.appendChild(document.createTextNode(&apos;Cell 1,2&apos;));</div><div class="line">row1.appendChild(cell1_2);</div><div class="line"></div><div class="line">var cell2_2 = document.createElement(&apos;td&apos;);</div><div class="line">cell2_2.appendChild(document.createTextNode(&apos;Cell 2,2&apos;));</div><div class="line">row1.appendChild(cell2_2);</div><div class="line"></div><div class="line">document.body.appendChild(table);</div></pre></td></tr></table></figure>
<h2 id="DOM-扩展"><a href="#DOM-扩展" class="headerlink" title="DOM 扩展"></a>DOM 扩展</h2><hr>
<h3 id="选择符-API"><a href="#选择符-API" class="headerlink" title="选择符 API"></a>选择符 API</h3><ul>
<li><code>querySelector()</code>方法</li>
</ul>
<p><code>querySelector()</code>方法接受一个<strong>CSS</strong>选择符，返回与该模式匹配的<strong>第一个元素</strong>，若没有，返回<code>null</code>。</p>
<p>可以通过<code>Document</code>类型调用，也可以通过<code>Element</code>类型调用，后者只会在该元素后代元素的范围内查找匹配的元素。</p>
<ul>
<li><code>querySelectorAll()</code>方法</li>
</ul>
<p><code>querySelectorAll()</code>方法返回的是所有匹配的元素，是一个<code>NodeList</code>实例。</p>
<ul>
<li><code>matchesSelector()</code>方法</li>
</ul>
<p>为<code>Element</code>类型新增的一个方法，接受一个参数<code>CSS</code>选择符，如果调用元素与该选择符匹配，返回<code>true</code>，否则返回<code>false</code>。</p>
<h3 id="元素遍历"><a href="#元素遍历" class="headerlink" title="元素遍历"></a>元素遍历</h3><ul>
<li><code>childElementCount</code>：返回子元素（不包含文本节点和注释）的个数</li>
<li><code>firstElementChild</code>：指向第一个子元素</li>
<li><code>lastElementChild</code>：指向最后一个子元素</li>
<li><code>previousElementSibling</code>：指向前一个兄弟元素</li>
<li><code>nextElementSibling</code>：指向后一个兄弟元素</li>
</ul>
<p>不同于前面的返回<strong>节点</strong>的方法。<br><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></pre></td><td class="code"><pre><div class="line">// 节点版本</div><div class="line">var i,</div><div class="line">	len,</div><div class="line">	child = element.firstChild;</div><div class="line">while(child != element.lastChild)&#123;</div><div class="line">	if (child.nodeType == 1)&#123; //检查是不是元素</div><div class="line">		processChild(child);</div><div class="line">	&#125;</div><div class="line">	child = child.nextSibling;</div><div class="line">&#125;</div><div class="line">// 元素版本</div><div class="line">var i,</div><div class="line">	len,</div><div class="line">	child = element.firstElementChild;</div><div class="line">while(child != element.lastElementChild)&#123;</div><div class="line">	processChild(child); //已知其是元素</div><div class="line">	child = child.nextElementSibling;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="HTML5"><a href="#HTML5" class="headerlink" title="HTML5"></a>HTML5</h3><ul>
<li><code>getElementsByClassName()</code>方法</li>
<li><code>classList</code>属性，这个属性是新集合类型<code>DOMTokenList</code>的实例。<ul>
<li><code>add(value)</code></li>
<li><code>contains(value)</code></li>
<li><code>remove(value)</code></li>
<li><code>toggle(value)</code></li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">div.classList.remove(&quot;user&quot;);</div></pre></td></tr></table></figure>
<h4 id="焦点管理"><a href="#焦点管理" class="headerlink" title="焦点管理"></a>焦点管理</h4><p><code>document.activeElement</code>属性，始终会引用DOM中前端获得了焦点的元素。<br><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">var button = document.getElementById(&quot;myButton&quot;);</div><div class="line">button.focus();</div><div class="line">alert(document.activeElement === button); //true</div></pre></td></tr></table></figure></p>
<p><code>document.hasFocus()</code>方法，可以确定文档是否获得了焦点。<br><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">var button = document.getElementById(&quot;myButton&quot;);</div><div class="line">button.focus();</div><div class="line">alert(document.hasFocus()); //true</div></pre></td></tr></table></figure></p>
<h4 id="HTMLDocument的变化"><a href="#HTMLDocument的变化" class="headerlink" title="HTMLDocument的变化"></a><code>HTMLDocument</code>的变化</h4><pre><code>+ `readyState`属性有两个值，`loading`和`complete`
</code></pre><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">if (document.readyState == &apos;complete&apos;) &#123;</div><div class="line">	// 加载完成</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="document-charset字符集属性"><a href="#document-charset字符集属性" class="headerlink" title="document.charset字符集属性"></a><code>document.charset</code>字符集属性</h4><h4 id="data-自定义数据属性"><a href="#data-自定义数据属性" class="headerlink" title="data-自定义数据属性"></a><code>data-</code>自定义数据属性</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></pre></td><td class="code"><pre><div class="line">&lt;div id=&quot;myDiv&quot; data-appId=&quot;12345&quot; data-myname=&quot;Nicholas&quot;&gt;&lt;/div&gt;</div><div class="line"></div><div class="line">var div = document.getElementById(&quot;myDiv&quot;);</div><div class="line"></div><div class="line">//取得自定义属性的值</div><div class="line">var appId = div.dataset.appId;</div><div class="line">var myName = div.dataset.myname;</div><div class="line"></div><div class="line">//设置值</div><div class="line">div.dataset.appId = 23456;</div><div class="line">div.dataset.myname = &quot;Michael&quot;;</div></pre></td></tr></table></figure>
<h4 id="innerHTML属性"><a href="#innerHTML属性" class="headerlink" title="innerHTML属性"></a><code>innerHTML</code>属性</h4><p>在读模式下，<code>innerHTML</code> 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应<br>的HTML 标记。在写模式下，<code>innerHTML</code> 会根据指定的值创建新的DOM树，然后用这个DOM树完全<br>替换调用元素原先的所有子节点</p>
<h4 id="outerHTML属性"><a href="#outerHTML属性" class="headerlink" title="outerHTML属性"></a><code>outerHTML</code>属性</h4><p>在读模式下，<code>outerHTML</code> 返回调用它的元素及所有子节点的HTML 标签。在写模式下，<code>outerHTML</code><br>会根据指定的HTML 字符串创建新的DOM 子树，然后用这个DOM子树完全替换调用元素。</p>
<h4 id="insertAdjacentHTML-方法"><a href="#insertAdjacentHTML-方法" class="headerlink" title="insertAdjacentHTML()方法"></a><code>insertAdjacentHTML()</code>方法</h4><p>插入元素的新增方法，接受两个参数，插入的位置和要插入的HTML文本，第一个参数的值：</p>
<ul>
<li><code>&#39;beforebegin&#39;</code></li>
<li><code>&#39;afterbegin&#39;</code></li>
<li><code>&#39;beforeend&#39;</code></li>
<li><code>&#39;afterend&#39;</code></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><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">//作为前一个同辈元素插入</div><div class="line">element.insertAdjacentHTML(&quot;beforebegin&quot;, &quot;&lt;p&gt;Hello world!&lt;/p&gt;&quot;);</div><div class="line"></div><div class="line">//作为第一个子元素插入</div><div class="line">element.insertAdjacentHTML(&quot;afterbegin&quot;, &quot;&lt;p&gt;Hello world!&lt;/p&gt;&quot;);</div><div class="line"></div><div class="line">//作为最后一个子元素插入</div><div class="line">element.insertAdjacentHTML(&quot;beforeend&quot;, &quot;&lt;p&gt;Hello world!&lt;/p&gt;&quot;);</div><div class="line"></div><div class="line">//作为后一个同辈元素插入</div><div class="line">element.insertAdjacentHTML(&quot;afterend&quot;, &quot;&lt;p&gt;Hello world!&lt;/p&gt;&quot;);</div></pre></td></tr></table></figure>
<h4 id="scrollIntoView-方法"><a href="#scrollIntoView-方法" class="headerlink" title="scrollIntoView()方法"></a><code>scrollIntoView()</code>方法</h4><p><code>scrollIntoView</code>方法可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果这个方法传入<code>true</code>作为参数，或者不传参数，那么窗口滚动之后就会让调用元素的顶部与视口顶部 尽可能平齐，如果传入<code>false</code>，调用元素会尽可能全部出现在视口中，不过顶部不一定平齐。<br><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">// 让元素可见</div><div class="line">document.form[0].scrollIntoView();</div></pre></td></tr></table></figure></p>
<h3 id="专有扩展"><a href="#专有扩展" class="headerlink" title="专有扩展"></a>专有扩展</h3><h4 id="插入文本"><a href="#插入文本" class="headerlink" title="插入文本"></a>插入文本</h4><ul>
<li><code>innerText</code>属性</li>
<li><code>outerText</code>属性</li>
</ul>
<h4 id="滚动"><a href="#滚动" class="headerlink" title="滚动"></a>滚动</h4><ul>
<li><code>scrollIntoViewIfNeeded(alignCenter)</code>：只有在当前元素不可见的情况下，才滚动浏览器或窗口或容器元素最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。</li>
<li><code>scrollByLines(lineCount)</code>：将元素的内容滚动指定的行高，<code>lineCount</code>值可以是正值，也可以是负值。</li>
<li><code>scrollByPages(pageCount)</code>：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。</li>
</ul>
<p><code>scrollIntoView()</code>和<code>scrollIntoViewIfNeeded()</code>的作用对象是元素的容器，而<code>scrollByLines()</code>和<code>scrollByPages()</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">//在当前元素不可见的时候，让它进入浏览器的视口</div><div class="line">document.images[0].scrollIntoViewIfNeeded();</div><div class="line"></div><div class="line">//将页面主体往回滚动1 页</div><div class="line">document.body.scrollByPages(-1);</div></pre></td></tr></table></figure>
<h2 id="DOM2-和-DOM3"><a href="#DOM2-和-DOM3" class="headerlink" title="DOM2 和 DOM3"></a>DOM2 和 DOM3</h2><hr>
<h3 id="样式"><a href="#样式" class="headerlink" title="样式"></a>样式</h3><h3 id="元素大小"><a href="#元素大小" class="headerlink" title="元素大小"></a>元素大小</h3><h4 id="偏移量"><a href="#偏移量" class="headerlink" title="偏移量"></a>偏移量</h4><ul>
<li><code>offsetHeight</code>：元素在垂直方向上占用的空间大小。包括元素的高度，（可见的）水平滚动条的高度，上边框高度和下边框高度</li>
<li><code>offsetWidth</code>：元素在水平方向上占用的空间大小。包括元素的宽度，（可见的）垂直滚动条的宽度，左边框宽度和右边框宽度</li>
<li><code>offsetLeft</code>：元素的左外边框至包含元素的左内边框之间的像素距离。</li>
<li><code>offsetTop</code>：元素的上外边框至包含元素的上内边框之间的像素距离。</li>
</ul>
<img src="/2017/04/27/JS红宝书·读书笔记/offset-1.png" alt="offset-1.png" title="">
<p>其中，<code>offsetLeft</code>和<code>offsetTop</code>属性与包含元素有关，包含元素的引用保存在<code>offsetParent</code>属性中。<code>offsetParent</code>属性不一定与<code>parentNode</code>的值相等。<br><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">// 元素上偏移</div><div class="line">function getElementLeft (ele) &#123;</div><div class="line">	var actualLeft = ele.offsetLeft;</div><div class="line">	var current = ele.offsetParent;</div><div class="line"></div><div class="line">	while (current !== null) &#123;</div><div class="line">		actualLeft += current.offsetLeft;</div><div class="line">		current = current.offsetParent;</div><div class="line">	&#125;</div><div class="line">	return actualLeft;</div><div class="line">&#125;</div><div class="line">// 元素左偏移同理</div></pre></td></tr></table></figure></p>
<p>一般来说，页面中所有的元素都被包含在几个<code>&lt;div&gt;</code>元素中，而这些<code>&lt;div&gt;</code>元素的<code>offsetParent</code>又是<code>&lt;body&gt;</code>元素，所以<code>getElementLeft()</code>与<code>getElementTop()</code>会返回与<code>offsetLeft</code>和<code>offsetTop</code>相同的值。</p>
<h4 id="客户区大小"><a href="#客户区大小" class="headerlink" title="客户区大小"></a>客户区大小</h4><ul>
<li><code>clientWidth</code>：元素内容区宽度加上左右内边距宽度</li>
<li><code>clientHeight</code>: 元素内容区高度加上上下内边距高度</li>
</ul>
<img src="/2017/04/27/JS红宝书·读书笔记/offset-2.png" alt="offset-2.png" title="">
<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">function getViewport()&#123;</div><div class="line">	if (document.compatMode == &quot;BackCompat&quot;)&#123;  // IE7之前</div><div class="line">			return &#123;</div><div class="line">				width: document.body.clientWidth,</div><div class="line">				height: document.body.clientHeight</div><div class="line">			&#125;;</div><div class="line">		&#125; else &#123;</div><div class="line">			return &#123;</div><div class="line">				width: document.documentElement.clientWidth,</div><div class="line">				height: document.documentElement.clientHeight</div><div class="line">			&#125;;</div><div class="line">		&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="滚动大小"><a href="#滚动大小" class="headerlink" title="滚动大小"></a>滚动大小</h4><p><strong>滚动大小</strong>，指的是包含滚动内容的元素的大小。有些元素（<code>&lt;html&gt;</code>），即使没有执行任何代码也能自动添加滚动条；但另外一些元素，则需要通过<strong>CSS</strong>的<code>overflow</code>属性设置才能滚动。</p>
<ul>
<li><code>scrollHeight</code>：在没有滚动条的情况下，元素内容的总高度</li>
<li><code>scrollWidth</code>：在没有滚动条的情况下，元素内容的总宽度</li>
<li><code>scrollLeft</code>：被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置</li>
<li><code>scrollTop</code>：被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置</li>
</ul>
<img src="/2017/04/27/JS红宝书·读书笔记/scroll-1.png" alt="scroll-1.png" title="">
<p><code>scrollWidth</code>和<code>scrollHeight</code>主要用于确定元素内容的实际大小。</p>
<p><code>scrollWidth</code> 和<code>scrollHeight</code> 与<code>clientWidth</code> 和<code>clientHeight</code> 之间的关系？</p>
<ul>
<li><strong>Firefox</strong>中这两组属性始终相等，但大小代表的是文档内容区域的实际尺寸，非视口尺寸</li>
<li><strong>Opera Safari Chrome</strong>中这两组属性有区别，其中<code>scrollWidth</code> 和<code>scrollHeight</code> 等于视口大小，而<code>clientWidth</code> 和<code>clientHeight</code> 等于文档内容区域的大小。</li>
<li><strong>IE（在标准模式）</strong>中的这两组属性不相等，其中<code>scrollWidth</code> 和<code>scrollHeight</code> 等于文档内容区域的大小，而<code>clientWidth</code> 和<code>clientHeight</code> 等于视口大小。</li>
</ul>
<p>通过<code>scrollLeft</code> 和<code>scrollTop</code> 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。在元素尚未被滚动时，这两个属性的值都等于0。如果元素被垂直滚动了，那么<code>scrollTop</code> 的值会大于0，且表示元素上方不可见内容的像素高度。如果元素被水平滚动了，那么<code>scrollLeft</code> 的值会大于0，且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的，因此将元素的<code>scrollLeft</code> 和<code>scrollTop</code> 设置为0，就可以重置元素的滚动位置。下面这个函数会检测元素是否位于顶部，如果不是就将其回滚到顶部。<br><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 scrollToTop(element)&#123;</div><div class="line">	if (element.scrollTop != 0)&#123;</div><div class="line">		element.scrollTop = 0;</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h4 id="确定元素大小"><a href="#确定元素大小" class="headerlink" title="确定元素大小"></a>确定元素大小</h4><ul>
<li><code>getBoundingClientRect()</code>方法，会返回一个矩形对象，包含<code>left top right bottom</code>四个属性。这些属性给出了元素在页面中相对于视口的位置。</li>
</ul>
<h3 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h3><h4 id="NodeIterator"><a href="#NodeIterator" class="headerlink" title="NodeIterator"></a>NodeIterator</h4><p>可以使用<code>document.createNodeIterator()</code>方法创建它的新实例，接受4个参数。</p>
<ul>
<li><code>root</code>：想要作为搜索起点的树中的节点</li>
<li><code>whatToShow</code>：表示要访问哪些节点的数字代码</li>
<li><code>filter</code>：是一个<code>NodeFilter</code>对象，或者一个表示应该接受还是拒绝某种特定节点的函数</li>
<li><code>entityReferenceExpansion</code>：布尔值，表示是否要扩展实体引用。</li>
</ul>
<p><code>whatToShow</code>这个参数的值以常量形式在<code>NodeFilter</code>类型中定义：</p>
<ul>
<li><code>NodeFilter.SHOW_ALL</code></li>
<li><code>NodeFilter.SHOW_ELEMENT</code></li>
<li><code>NodeFilter.SHOW_ATTRIBUTE</code></li>
<li><code>NodeFilter.SHOW_TEXT</code></li>
<li><code>NodeFilter.SHOW_CDATA_SECTION</code></li>
<li><code>NodeFilter.SHOW_ENTITY_REFERENCE</code></li>
<li><code>NodeFilter.SHOW_ENTITYE</code></li>
<li><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></li>
<li><code>NodeFilter.SHOW_COMMENT</code></li>
<li><code>NodeFilter.SHOW_DOCUMENT</code></li>
<li><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></li>
<li><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></li>
<li><code>NodeFilter.SHOW_NOTATION</code></li>
</ul>
<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><hr>
<h3 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h3><h4 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h4><p>IE的事件流叫做<strong>事件冒泡</strong>，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。</p>
<h4 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h4><p>Netscape 团队提出的事件流叫做<strong>事件捕获</strong>，事件捕获的用意在于在事件到达预定目标之前捕获它。</p>
<h4 id="DOM事件流"><a href="#DOM事件流" class="headerlink" title="DOM事件流"></a>DOM事件流</h4><p>“DOM2级事件”规定的事件流包括三个阶段：<code>事件捕获阶段</code>、<code>处于目标阶段</code>和<code>事件冒泡阶段</code>。</p>
<h3 id="事件处理程序"><a href="#事件处理程序" class="headerlink" title="事件处理程序"></a>事件处理程序</h3><h4 id="DOM0-级事件处理程序"><a href="#DOM0-级事件处理程序" class="headerlink" title="DOM0 级事件处理程序"></a>DOM0 级事件处理程序</h4><p>每个元素（包括<code>window</code>和<code>document</code>）都有自己的事件处理程序，这些属性通常全部小写。<br><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">var btn = document.getElementById(&apos;myBtn&apos;);</div><div class="line">btn.onclick = function () &#123;</div><div class="line">	console.log(&apos;clicked&apos;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>DOM 0级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行，也就是说程序中的<code>this</code>可以引用当前元素。<br><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">var btn = document.getElementById(&apos;myBtn&apos;);</div><div class="line">btn.onclick = function () &#123;</div><div class="line">	console.log(this.id);  // &apos;myBtn&apos;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>以这种方式添加的事件处理程序会在事件流的<strong>冒泡阶段</strong>被处理。</p>
<h4 id="DOM2-级事件处理程序"><a href="#DOM2-级事件处理程序" class="headerlink" title="DOM2 级事件处理程序"></a>DOM2 级事件处理程序</h4><ul>
<li><code>addEventListener()</code></li>
<li><code>removeEventListener()</code></li>
</ul>
<p>定义了两个方法用于处理指定和删除事件处理程序的操作。所有的DOM节点中都包含这两个方法，接受三个参数：<strong>事件名</strong>、<strong>事件处理程序</strong>和<strong>布尔值</strong>。最后这个布尔值如果是<code>true</code>，表示在捕获阶段调用事件处理程序；<code>false</code>表示在冒泡阶段调用事件处理程序，默认是<code>false</code>。</p>
<p>通过<code>addEventListener()</code>添加的事件处理程序只能使用<code>removeEventListener()</code>来移除。如果通过<code>addEventListener()</code>添加的匿名函数将无法移除。<br><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">btn.addEventListener(&apos;click&apos;, function () &#123;  //匿名函数</div><div class="line">	...</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段（<code>false</code>），这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。</p>
<h4 id="IE事件处理程序"><a href="#IE事件处理程序" class="headerlink" title="IE事件处理程序"></a>IE事件处理程序</h4><ul>
<li><code>attachEvent()</code></li>
<li><code>detachEvent()</code></li>
</ul>
<p>这两个方法接受两个参数：事件名（带<code>on</code>）和事件处理函数。<br><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">var btn = document.getElementById(&quot;myBtn&quot;);</div><div class="line">btn.attachEvent(&quot;onclick&quot;, function()&#123;</div><div class="line">	alert(&quot;Clicked&quot;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：在IE 中使用<code>attachEvent()</code>与使用DOM0 级方法的主要区别在于事件处理程序的作用域。</p>
<ul>
<li>DOM0 级作用域是其所属元素</li>
<li><code>attachEvent()</code>方法的作用域是全局（<code>this === window</code>）</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">var btn = document.getElementById(&quot;myBtn&quot;);</div><div class="line">btn.attachEvent(&quot;onclick&quot;, function()&#123;</div><div class="line">	alert(&quot;Clicked&quot;);</div><div class="line">&#125;);</div><div class="line">btn.attachEvent(&quot;onclick&quot;, function()&#123;</div><div class="line">	alert(&quot;Hello world!&quot;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><strong>注</strong>：与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。单击这个例子中的按钮，首先看到的是”Hello world!”，然后才是”Clicked”。</p>
<h3 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h3><p>在触发DOM上的某个事件时，会产生一个事件对象<code>event</code>。</p>
<h4 id="DOM中的事件对象"><a href="#DOM中的事件对象" class="headerlink" title="DOM中的事件对象"></a>DOM中的事件对象</h4><p><code>event</code>对象成员</p>
<table>
<thead>
<tr>
<th>属性/方法</th>
<th>类型</th>
<th>读/写</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>bubbles</code></td>
<td><code>Boolean</code></td>
<td>只读</td>
<td>表明事件是否冒泡</td>
</tr>
<tr>
<td><code>cancelable</code></td>
<td><code>Boolean</code></td>
<td>只读</td>
<td>表明是否可以取消事件的默认行为</td>
</tr>
<tr>
<td><code>currentTarget</code></td>
<td><code>Element</code></td>
<td>只读</td>
<td>其事件处理程序当前正在处理事件的那个元素</td>
</tr>
<tr>
<td><code>defaultPrevented</code></td>
<td><code>Boolean</code></td>
<td>只读</td>
<td>为<code>true</code>表示已经调用<code>preventDefault()</code></td>
</tr>
<tr>
<td><code>detail</code></td>
<td><code>Integer</code></td>
<td>只读</td>
<td>与事件相关的细节信息</td>
</tr>
<tr>
<td><code>eventPhase</code></td>
<td><code>Integer</code></td>
<td>只读</td>
<td>调用事件处理程序的阶段：1 捕获，2 处于目标，3 冒泡</td>
</tr>
<tr>
<td><code>preventDefault()</code></td>
<td><code>Function</code></td>
<td>只读</td>
<td>取消事件的默认行为。如果<code>cancelable</code> 是<code>true</code>，则可以使用这个方法</td>
</tr>
<tr>
<td><code>stopImmediatePropagation()</code></td>
<td><code>Function</code></td>
<td>只读</td>
<td>取消事件的进一步冒泡或捕获，同时阻止任何事件处理程序被调用</td>
</tr>
<tr>
<td><code>stopPropagation()</code></td>
<td><code>Function</code></td>
<td>只读</td>
<td>取消事件的进一步捕获或冒泡。如果<code>bubbles</code>为<code>true</code>，则可以使用这个方法</td>
</tr>
<tr>
<td><code>target</code></td>
<td><code>Element</code></td>
<td>只读</td>
<td>事件的目标</td>
</tr>
<tr>
<td><code>trusted</code></td>
<td><code>Boolean</code></td>
<td>只读</td>
<td>为<code>true</code>表示事件是浏览器生成，<code>false</code>是开发人员创建</td>
</tr>
<tr>
<td><code>type</code></td>
<td><code>String</code></td>
<td>只读</td>
<td>被触发的事件类型</td>
</tr>
<tr>
<td><code>view</code></td>
<td><code>AbstractView</code></td>
<td>只读</td>
<td>与事件关联的抽象视图。等同于发生事件的<code>window</code>对象</td>
</tr>
</tbody>
</table>
<p>在事件处理程序内部，对象<code>this</code> 始终等于<code>currentTarget</code> 的值，而<code>target</code> 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则<code>this</code>、<code>currentTarget</code> 和<code>target</code> 包含相同的值。<br><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">document.body.onclick = function(event)&#123;</div><div class="line">	alert(event.currentTarget === document.body); //true</div><div class="line">	alert(this === document.body); //true</div><div class="line">	alert(event.target === document.getElementById(&quot;myBtn&quot;)); //true</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>调用<code>event</code>方法<br><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">var link = document.getElementById(&quot;myLink&quot;);</div><div class="line">link.onclick = function(event)&#123;</div><div class="line">	event.preventDefault();</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<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><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></pre></td><td class="code"><pre><div class="line">var EventUtil = &#123;</div><div class="line">	addHandler: function(element, type, handler)&#123;</div><div class="line">		//省略的代码</div><div class="line">	&#125;,</div><div class="line">	getEvent: function(event)&#123;</div><div class="line">		return event ? event : window.event;</div><div class="line">	&#125;,</div><div class="line">	getTarget: function(event)&#123;</div><div class="line">		return event.target || event.srcElement;</div><div class="line">	&#125;,</div><div class="line">	preventDefault: function(event)&#123;</div><div class="line">		if (event.preventDefault)&#123;</div><div class="line">			event.preventDefault();</div><div class="line">		&#125; else &#123;</div><div class="line">			event.returnValue = false;</div><div class="line">		&#125;</div><div class="line">	&#125;,</div><div class="line">	removeHandler: function(element, type, handler)&#123;</div><div class="line">		//省略的代码</div><div class="line">	&#125;,</div><div class="line">	stopPropagation: function(event)&#123;</div><div class="line">		if (event.stopPropagation)&#123;</div><div class="line">			event.stopPropagation();</div><div class="line">		&#125; else &#123;</div><div class="line">			event.cancelBubble = true;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<h3 id="事件类型"><a href="#事件类型" class="headerlink" title="事件类型"></a>事件类型</h3><h4 id="UI-事件"><a href="#UI-事件" class="headerlink" title="UI 事件"></a>UI 事件</h4><ul>
<li><code>load</code>事件</li>
<li><code>unload</code>事件</li>
<li><code>resize</code>事件</li>
<li><code>scroll</code>事件</li>
</ul>
<h4 id="焦点事件"><a href="#焦点事件" class="headerlink" title="焦点事件"></a>焦点事件</h4><ul>
<li><code>blur</code>事件：失去焦点</li>
<li><code>focus</code>事件：获得焦点</li>
</ul>
<h4 id="鼠标与滚动事件"><a href="#鼠标与滚动事件" class="headerlink" title="鼠标与滚动事件"></a>鼠标与滚动事件</h4><ul>
<li><code>click</code>事件</li>
<li><code>dbclick</code>事件</li>
<li><code>mousedown</code>事件：按下鼠标</li>
<li><code>mouseenter</code>事件：光标移入</li>
<li><code>mouseleave</code>事件：光标移出</li>
<li><code>mousemove</code>事件：鼠标在元素内部移动重复触发</li>
<li><code>mouseout</code>事件：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素</li>
<li><code>mouseover</code>事件：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发</li>
<li><code>mouseup</code>事件：释放鼠标按钮时触发</li>
</ul>
<p>页面上的所有元素都支持鼠标事件。除了<code>mouseenter</code> 和<code>mouseleave</code>，所有鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。</p>
<p>只有在同一个元素上相继触发<code>mousedown</code> 和<code>mouseup</code> 事件，才会触发<code>click</code> 事件；如果<code>mousedown</code> 或<code>mouseup</code> 中的一个被取消，就不会触发<code>click</code> 事件。</p>
<h4 id="触摸设备"><a href="#触摸设备" class="headerlink" title="触摸设备"></a>触摸设备</h4><p>iOS和Android设备的相关事件：</p>
<ul>
<li>不支持<code>dbclick</code>事件。双击浏览器窗口会放大画面</li>
<li>轻击可单击元素会触发<code>mousemove</code>事件。。如果此操作会导致内容变化，将不再有其他事件发生；如果屏幕没有因此变化，那么会依次发生<code>mousedown</code>、<code>mouseup</code> 和<code>click</code> 事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素（如链接），或者那些已经被指定了<code>onclick</code> 事件处理程序的元素。</li>
<li><code>mousemove</code>事件也会触发<code>mouseover</code>和<code>mouseout</code>事件</li>
<li>两个手指放在屏幕上且页面随手指移动而滚动时会触发<code>mousewheel</code>和<code>scroll</code>事件。</li>
</ul>
<h4 id="HTML5事件"><a href="#HTML5事件" class="headerlink" title="HTML5事件"></a>HTML5事件</h4><ul>
<li><code>contextmenu</code>事件</li>
<li><code>beforeunload</code>事件</li>
<li><code>DOMContentLoaded</code>事件</li>
<li><code>readystatechange</code>事件<ul>
<li><code>uninitialized</code>未初始化</li>
<li><code>loading</code></li>
<li><code>loaded</code></li>
<li><code>interactive</code>:可以操作对象，但还没有完全加载</li>
<li><code>complete</code></li>
</ul>
</li>
<li><code>hashchange</code>事件</li>
</ul>
<h4 id="设备事件"><a href="#设备事件" class="headerlink" title="设备事件"></a>设备事件</h4><ul>
<li><code>orientationchange</code>事件：横竖屏，有三个值： -90 ，0， 90</li>
</ul>
<h4 id="触摸与手势事件"><a href="#触摸与手势事件" class="headerlink" title="触摸与手势事件"></a>触摸与手势事件</h4><ul>
<li>触摸事件<ul>
<li><code>touchstart</code></li>
<li><code>touchmove</code></li>
<li><code>touchend</code></li>
<li><code>touchcancel</code></li>
</ul>
</li>
<li>手势事件<ul>
<li><code>gesturestart</code></li>
<li><code>gesturechange</code></li>
<li><code>gestureend</code></li>
</ul>
</li>
</ul>
<h3 id="内存和性能"><a href="#内存和性能" class="headerlink" title="内存和性能"></a>内存和性能</h3><h4 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h4><p>例如在<code>&lt;ul&gt;</code>为添加一个<code>click</code>事件，所有<code>&lt;li&gt;</code>子元素点击事件都会冒泡到<code>&lt;ul&gt;</code>上。</p>
<h2 id="表单脚本"><a href="#表单脚本" class="headerlink" title="表单脚本"></a>表单脚本</h2><hr>
<h3 id="表单基础知识"><a href="#表单基础知识" class="headerlink" title="表单基础知识"></a>表单基础知识</h3><h4 id="提交表单"><a href="#提交表单" class="headerlink" title="提交表单"></a>提交表单</h4><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;input type=&quot;submit&quot; value=&quot;Submit Form&quot;&gt;</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></pre></td><td class="code"><pre><div class="line">&lt;input type=&quot;reset&quot; value=&quot;Reset Form&quot;&gt;</div></pre></td></tr></table></figure>
<h4 id="表单字段"><a href="#表单字段" class="headerlink" title="表单字段"></a>表单字段</h4><p>每个表单都有<code>elements</code>属性，该属性是表单中所有表单元素的集合。<br><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">var form = document.getElementById(&quot;form1&quot;);</div><div class="line">//取得表单中的第一个字段</div><div class="line">var field1 = form.elements[0];</div><div class="line">//取得名为&quot;textbox1&quot;的字段</div><div class="line">var field2 = form.elements[&quot;textbox1&quot;];</div><div class="line">//取得表单中包含的字段的数量</div><div class="line">var fieldCount = form.elements.length;</div></pre></td></tr></table></figure></p>
<h3 id="文本框脚本"><a href="#文本框脚本" class="headerlink" title="文本框脚本"></a>文本框脚本</h3><h4 id="过滤输入"><a href="#过滤输入" class="headerlink" title="过滤输入"></a>过滤输入</h4><p>屏蔽特定的字符，需要检测<code>keypress</code>事件对应的字符编码。<br><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">EventUtil.addHandler(textbox, &apos;keypress&apos;, function (event) &#123;</div><div class="line">	event = EventUtil.getEvent(event);</div><div class="line">	var target = EventUtil.getTarget(event);</div><div class="line">	var charCode = EventUtil.getCharCode(event);</div><div class="line"></div><div class="line">	if (!/\d/.test(String.fromCharCode(charCode))) &#123;</div><div class="line">		EventUtil.preventDefault(event);</div><div class="line">	&#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<h4 id="HTML5约束验证API"><a href="#HTML5约束验证API" class="headerlink" title="HTML5约束验证API"></a>HTML5约束验证API</h4><h5 id="输入模式"><a href="#输入模式" class="headerlink" title="输入模式"></a>输入模式</h5><p>HTML5为文本字段新增了<code>pattern</code>属性。<br><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;input type=&quot;text&quot; pattern=&quot;\d+&quot; name=&quot;count&quot;&gt;</div></pre></td></tr></table></figure></p>
<h5 id="检测有效性"><a href="#检测有效性" class="headerlink" title="检测有效性"></a>检测有效性</h5><p>使用<code>checkValidity()</code>方法可以检测表单中的某个字段是否有效。是否有效的判断依据是一些<code>&lt;input&gt;</code>的约束条件。<br><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">if (document.forms[0].elements[0].checkValidity())&#123;</div><div class="line">	//字段有效，继续</div><div class="line">&#125; else &#123;</div><div class="line">	//字段无效</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>也可以检测整个表单是否有效<br><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">if(document.forms[0].checkValidity())&#123;</div><div class="line">	//表单有效，继续</div><div class="line">&#125; else &#123;</div><div class="line">	//表单无效</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h5 id="禁用验证"><a href="#禁用验证" class="headerlink" title="禁用验证"></a>禁用验证</h5><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">&lt;form method=&quot;post&quot; action=&quot;signup.php&quot; novalidate&gt;</div><div class="line">	&lt;!--这里插入表单元素--&gt;</div><div class="line">&lt;/form&gt;</div></pre></td></tr></table></figure>
<h2 id="HTML5-脚本编程"><a href="#HTML5-脚本编程" class="headerlink" title="HTML5 脚本编程"></a>HTML5 脚本编程</h2><hr>
<h3 id="跨文档消息传递"><a href="#跨文档消息传递" class="headerlink" title="跨文档消息传递"></a>跨文档消息传递</h3><p><strong>跨文档消息传送</strong>（cross-document messaging）简称XDM。其核心方法是<code>postMessage()</code>方法。</p>
<p><code>postMessage()</code>方法接受两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。<br><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">// 注意：所有支持XDM的浏览器也支持iframe的`contentWindow`属性</div><div class="line">var iframeWindow = document.getElementById(&apos;myframe&apos;).contentWindow;</div><div class="line">iframeWindow.postMessage(&apos;A secret&apos;, &apos;https://yeasoenzhang.github.io&apos;);</div></pre></td></tr></table></figure></p>
<p>尝试向内嵌框架中发送一条消息，并指定框架中的文档必须来源于<code>https://yeasonzhang.github.io</code>域。</p>
<p>接收到<strong>XDM</strong>消息时，会触发<code>window</code>对象的<code>message</code>事件，这个事件是以异步形式触发。<br>传递的<code>onmessage</code>处理程序的事件对象包含三个重要信息：</p>
<ul>
<li><code>data</code>：作为<code>postMessage()</code>第一个参数传入的字符串数据</li>
<li><code>origin</code>：发送消息的文档所在的域。</li>
<li><code>source</code>：发送消息的文档的<code>window</code>对象的代理。</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">EventUtil.addHandler(window, &quot;message&quot;, function(event)&#123;</div><div class="line">	//确保发送消息的域是已知的域</div><div class="line">	if (event.origin == &quot;https://yeasonzhang.github.io&quot;)&#123;</div><div class="line">		//处理接收到的数据</div><div class="line">		processMessage(event.data);</div><div class="line">		//可选：向来源窗口发送回执</div><div class="line">		event.source.postMessage(&quot;Received!&quot;, &quot;http://p2p.wrox.com&quot;);</div><div class="line">	&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>XDM 还有一些怪异之处。首先，<code>postMessage()</code>的第一个参数最早是作为“永远都是字符串”来实现的。但后来这个参数的定义改了，改成允许传入任何数据结构。可是，并非所有浏览器都实现了这一变化。为保险起见，使用<code>postMessage()</code>时，最好还是只传字符串。如果你想传入结构化的数据，最佳选择是先在要传入的数据上调用<code>JSON.stringify()</code>，通过<code>postMessage()</code>传入得到的字符串，然后再在<code>onmessage</code> 事件处理程序中调用<code>JSON.parse()</code>。</p>
<h3 id="原生拖放"><a href="#原生拖放" class="headerlink" title="原生拖放"></a>原生拖放</h3><h4 id="拖放事件"><a href="#拖放事件" class="headerlink" title="拖放事件"></a>拖放事件</h4><p>拖动某个元素时，将依次触发的事件：</p>
<ul>
<li><code>dragstart</code></li>
<li><code>drag</code></li>
<li><code>dragend</code></li>
</ul>
<p>当某个元素被拖动到一个有效的放置目标时，会依次触发下列事件：</p>
<ul>
<li><code>dragenter</code></li>
<li><code>dragover</code></li>
<li><code>dragleave</code>（离开）或<code>drag</code>（放进去了）</li>
</ul>
<h4 id="dataTransfer对象"><a href="#dataTransfer对象" class="headerlink" title="dataTransfer对象"></a>dataTransfer对象</h4><p><code>dataTransfer</code>对象，它是事件对象的一个属性，用于被拖动元素向放置目标传递<strong>字符串格式</strong>的数据。该对象有两个主要方法:</p>
<ul>
<li><code>getData()</code></li>
<li><code>setData()</code><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">event.dataTransfer.setData(&quot;text&quot;, &quot;some text&quot;);</div><div class="line">var text = event.dataTransfer.getData(&quot;text&quot;);</div><div class="line"></div><div class="line">//设置和接收URL</div><div class="line">event.dataTransfer.setData(&quot;URL&quot;, &quot;http://www.wrox.com/&quot;);</div><div class="line">var url = event.dataTransfer.getData(&quot;URL&quot;);</div></pre></td></tr></table></figure>
</li>
</ul>
<p>不过，保存在<code>dataTransfer</code>对象中的数据只能在<code>drap</code>事件处理程序中读取。如果在<code>ondrop</code> 处理程序中没有读到数据，那就是<code>dataTransfer</code> 对象已经被销毁，数据也丢失了。</p>
<h4 id="drapEffect-与-effectAllowed"><a href="#drapEffect-与-effectAllowed" class="headerlink" title="drapEffect 与 effectAllowed"></a>drapEffect 与 effectAllowed</h4><p><code>dateTransfer</code>对象有两个属性：</p>
<ul>
<li><code>dropEffect</code></li>
<li><code>effectAllowed</code></li>
</ul>
<p><code>dropEffect</code>，属性可以知道被拖动的元素能够执行那种放置行为。</p>
<ul>
<li><code>none</code>：不能放在这里</li>
<li><code>move</code>：应该把拖放的元素移动到放置目标</li>
<li><code>copy</code>：应该把拖动的元素复制到放置目标</li>
<li><code>link</code>：表示放置目标会打开拖动的元素</li>
</ul>
<p>要使用<code>dropEffect</code>属性，必须在<code>ondragenter</code>事件处理程序中针对放置目标来设置。</p>
<p><code>effectAllowed</code>属性表示允许拖动元素的哪种<code>dropEffect</code>。</p>
<ul>
<li><code>uninitialized</code>：没有给被拖动的元素放置任何放置行为</li>
<li><code>none</code>：被拖动的元素不能有任何行为</li>
<li><code>copy</code>：只允许值为<code>copy</code>的<code>dropEffect</code></li>
<li><code>link</code>：只允许值为<code>link</code>的<code>dropEffect</code></li>
<li><code>move</code>：只允许值为<code>move</code>的<code>dropEffect</code></li>
<li><code>copyLink</code>：允许值为<code>copy</code>和<code>link</code>的<code>dropEffect</code></li>
<li><code>copyMove</code>：允许值为<code>copy</code>和<code>move</code>的<code>dropEffect</code></li>
<li><code>linkMove</code>：允许值为<code>link</code>和<code>move</code>的<code>dropEffect</code></li>
<li><code>all</code>: 允许任意<code>dropEffect</code></li>
</ul>
<p>必须在<code>ondragstart</code> 事件处理程序中设置<code>effectAllowed</code> 属性。</p>
<h4 id="可拖动"><a href="#可拖动" class="headerlink" title="可拖动"></a>可拖动</h4><p>HTML5为所有元素规定了<code>draggable</code>属性，表示元素是否可以拖动。只有图像和链接的<code>draggable</code>默认是<code>true</code><br><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">&lt;!-- 让这个图像不可以拖动 --&gt;</div><div class="line">&lt;img src=&quot;smile.gif&quot; draggable=&quot;false&quot; alt=&quot;Smiley face&quot;&gt;</div><div class="line">&lt;!-- 让这个元素可以拖动 --&gt;</div><div class="line">&lt;div draggable=&quot;true&quot;&gt;...&lt;/div&gt;</div></pre></td></tr></table></figure></p>
<h4 id="其他成员"><a href="#其他成员" class="headerlink" title="其他成员"></a>其他成员</h4><p>HTML5规定了<code>dateTransfer</code>对象还应该包含下列方法和属性。</p>
<ul>
<li><code>addElement(element)</code></li>
<li><code>clearData(format)</code></li>
<li><code>setDragImage(element, x, y)</code></li>
<li><code>type</code></li>
</ul>
<h2 id="错误处理与调试"><a href="#错误处理与调试" class="headerlink" title="错误处理与调试"></a>错误处理与调试</h2><hr>
<h3 id="错误处理"><a href="#错误处理" class="headerlink" title="错误处理"></a>错误处理</h3><h4 id="try-catch-语句"><a href="#try-catch-语句" class="headerlink" title="try-catch 语句"></a>try-catch 语句</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></pre></td><td class="code"><pre><div class="line">try &#123;</div><div class="line">	// 可能出错的代码</div><div class="line">&#125; catch (err) &#123;</div><div class="line">	// 处理发生的错误</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h5 id="finally子句"><a href="#finally子句" class="headerlink" title="finally子句"></a><code>finally</code>子句</h5><p>只要代码中包含<code>finially</code>子句，无论<code>try</code>还是<code>catch</code>语句中的<code>return</code>语句都将被忽略。</p>
<h5 id="错误类型"><a href="#错误类型" class="headerlink" title="错误类型"></a>错误类型</h5><ul>
<li><code>Error</code></li>
<li><code>EvalError</code></li>
<li><code>RangeError</code></li>
<li><code>ReferenceError</code></li>
<li><code>SyntaxError</code></li>
<li><code>TypeError</code></li>
<li><code>URIError</code></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">try &#123;</div><div class="line">	someFunction();</div><div class="line">&#125; catch (error) &#123;</div><div class="line">	if (error instanceof TypeError) &#123;</div><div class="line">		//...</div><div class="line">	&#125; else &#123;</div><div class="line">		//</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="抛出错误"><a href="#抛出错误" class="headerlink" title="抛出错误"></a>抛出错误</h4><p>与<code>try-catch</code> 语句相配的还有一个<code>throw</code> 操作符，用于随时抛出自定义错误。抛出错误时，必须要给<code>throw</code> 操作符指定一个值，这个值是什么类型，没有要求。<br><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">throw 12345;</div><div class="line">throw &quot;Hello world!&quot;;</div><div class="line">throw true;</div><div class="line">throw &#123; name: &quot;JavaScript&quot;&#125;;</div></pre></td></tr></table></figure></p>
<p>遇到<code>throw</code>操作符时，代码会立即停止执行。只有当<code>try-catch</code>语句捕获到被抛出值，代码才会继续执行</p>
<h5 id="自定义错误类型"><a href="#自定义错误类型" class="headerlink" title="自定义错误类型"></a>自定义错误类型</h5><p>可以利用原型链通过继承<code>Error</code>创建自定义错误类型。需要为新创建的错误类型指定<code>name</code>和<code>message</code>属性<br><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 CustomError (message) &#123;</div><div class="line">	this.name = &apos;CustomError&apos;;</div><div class="line">	this.message = message;</div><div class="line">&#125;</div><div class="line"></div><div class="line">CustomError.prototype = new Error();</div><div class="line"></div><div class="line">throw new CustomError(&apos;Error msg&apos;);</div></pre></td></tr></table></figure></p>
<h4 id="Error事件"><a href="#Error事件" class="headerlink" title="Error事件"></a>Error事件</h4><p>任何没有通过<code>try-catch</code>处理的错误都会触发<code>window</code>对象的<code>error</code>事件。</p>
<p>在任何Web浏览器中，<code>onerror</code>事件处理程序都不会创建<code>event</code>对象，但它可以接受三个参数：错误消息、错误所在的URL和行号。</p>
<p>要指定onerror 事件处理程序，必须使用如下所示的DOM0 级技术，它没有遵循“DOM2 级事件”的标准格式（<code>addEventListener</code>）。<br><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">window.onerror = function(message, url, line)&#123;</div><div class="line">	alert(message);</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>只要发生错误，无论是不是浏览器生成的，都会触发<code>error</code>事件，然后让浏览器的默认机制发挥作用，这时候我们需要阻止浏览器的默认行为（<code>return false</code>）。<br><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">window.onerror = function (message, url, line) &#123;</div><div class="line">	console.log(message);</div><div class="line">	retrun false;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h4 id="常见的错误类型"><a href="#常见的错误类型" class="headerlink" title="常见的错误类型"></a>常见的错误类型</h4><ul>
<li>类型转换错误</li>
<li>数据类型错误</li>
<li>通信错误</li>
</ul>
<p>在数据检测的时候，基本类型的值应该使用<code>typeof</code>来检测，对象的值应该使用<code>instanceof</code>。</p>
<h2 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h2><hr>
<h3 id="解析与序列化"><a href="#解析与序列化" class="headerlink" title="解析与序列化"></a>解析与序列化</h3><h4 id="JSON对象"><a href="#JSON对象" class="headerlink" title="JSON对象"></a>JSON对象</h4><p><code>JSON</code>对象有两个方法：<code>stringify</code>和<code>parse()</code>。<br><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">var book = &#123;</div><div class="line">	title: &quot;Professional JavaScript&quot;,</div><div class="line">	authors: [</div><div class="line">		&quot;Nicholas C. Zakas&quot;</div><div class="line">	],</div><div class="line">	edition: 3,</div><div class="line">	year: 2011</div><div class="line">&#125;;</div><div class="line">var jsonText = JSON.stringify(book);</div></pre></td></tr></table></figure></p>
<p>以上就把<code>Javascript</code>对象序列化为一个<code>JSON</code>字符串（没有空格和缩进）<br><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;&quot;title&quot;:&quot;Professional JavaScript&quot;,&quot;authors&quot;:[&quot;Nicholas C. Zakas&quot;],&quot;edition&quot;:3,&quot;year&quot;:2011&#125;</div></pre></td></tr></table></figure></p>
<p>如果传给<code>JSON.parse()</code>的字符串不是有效的<code>JSON</code>，会抛出错误。</p>
<h4 id="序列化选项"><a href="#序列化选项" class="headerlink" title="序列化选项"></a>序列化选项</h4><p><code>JSON.stringify()</code>除了要序列化的<code>JS</code>对象外，还可以接受两个参数，一个是过滤器（数组或函数），第二个参数是一个选项，表示是都在<code>JSON</code>字符串中保留缩进。</p>
<h5 id="过滤结果"><a href="#过滤结果" class="headerlink" title="过滤结果"></a>过滤结果</h5><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">var book = &#123;</div><div class="line">	&quot;title&quot;: &quot;Professional JavaScript&quot;,</div><div class="line">	&quot;authors&quot;: [</div><div class="line">		&quot;Nicholas C. Zakas&quot;</div><div class="line">	],</div><div class="line">	edition: 3,</div><div class="line">	year: 2011</div><div class="line">&#125;;</div><div class="line">var jsonText = JSON.stringify(book, [&quot;title&quot;, &quot;edition&quot;]);</div></pre></td></tr></table></figure>
<p>第二个参数中包含两个字符串<code>&quot;title&quot;, &quot;edition&quot;</code>，所以只会返回对应的属性<br><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;&quot;title&quot;:&quot;Professional JavaScript&quot;,&quot;edition&quot;:3&#125;</div></pre></td></tr></table></figure></p>
<p>过滤器为函数<br><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">var book = &#123;</div><div class="line">	&quot;title&quot;: &quot;Professional JavaScript&quot;,</div><div class="line">	&quot;authors&quot;: [</div><div class="line">		&quot;Nicholas C. Zakas&quot;</div><div class="line">	],</div><div class="line">	edition: 3,</div><div class="line">	year: 2011</div><div class="line">&#125;;</div><div class="line">var jsonText = JSON.stringify(book, function(key, value)&#123;</div><div class="line">	switch(key)&#123;</div><div class="line">		case &quot;authors&quot;:</div><div class="line">			return value.join(&quot;,&quot;)</div><div class="line">		case &quot;year&quot;:</div><div class="line">			return 5000;</div><div class="line">		case &quot;edition&quot;:</div><div class="line">			return undefined;</div><div class="line">		default:</div><div class="line">			return value;</div><div class="line">	&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：返回<code>undefined</code>删除该属性，上例的<code>edition</code>属性就会被删除。</p>
<h5 id="字符串缩进"><a href="#字符串缩进" class="headerlink" title="字符串缩进"></a>字符串缩进</h5><p><code>JSON.stringify()</code>方法的第三个参数用于控制结果中的缩进和空白符。可以是数字，表示缩进的空格数；也可以是字符串，将该字符串作为缩进的表示。</p>
<h5 id="toJSON-方法"><a href="#toJSON-方法" class="headerlink" title="toJSON()方法"></a><code>toJSON()</code>方法</h5><h4 id="解析选项"><a href="#解析选项" class="headerlink" title="解析选项"></a>解析选项</h4><p><code>JSON.parse()</code>方法也可以接受第二参数，该参数是一个函数（被称为还原函数），传入函数的参数均为<code>key, value</code>。</p>
<p>如果还原函数返回<code>undefined</code>，则表示要从结果中删除响应的键。</p>
<h2 id="Ajax与Comet"><a href="#Ajax与Comet" class="headerlink" title="Ajax与Comet"></a>Ajax与Comet</h2><hr>
<h3 id="XMLHttpRequest-对象"><a href="#XMLHttpRequest-对象" class="headerlink" title="XMLHttpRequest 对象"></a>XMLHttpRequest 对象</h3><h4 id="XHR的用法"><a href="#XHR的用法" class="headerlink" title="XHR的用法"></a>XHR的用法</h4><ul>
<li><code>open(&#39;method&#39;, &#39;url&#39;, bool)</code>：第三个参数表示是否异步发送</li>
<li><code>send()</code>：接受一个参数作为请求主体发送的数据，如果不需要则传入<code>null</code></li>
</ul>
<p><code>XHR</code>对象的属性</p>
<ul>
<li><code>responseText</code>：作为相应主体被返回的文本</li>
<li><code>responseXML</code>：如果相应的内容类型是<code>&quot;text/xml&quot;</code>或<code>&quot;application/xml&quot;</code>，这个属性中将包含这响应数据的XML DOM文档</li>
<li><code>status</code>：响应的HTTP状态</li>
<li><code>statusText</code>：HTTP状态的说明</li>
</ul>
<p>同步请求<br><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">xhr.open(&quot;get&quot;, &quot;example.txt&quot;, false);</div><div class="line">xhr.send(null);</div><div class="line">if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status == 304)&#123;</div><div class="line">	alert(xhr.responseText);</div><div class="line">&#125; else &#123;</div><div class="line">	alert(&quot;Request was unsuccessful: &quot; + xhr.status);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<ul>
<li><code>readyState</code>：表示请求/响应过程的阶段<ul>
<li>0：未初始化，尚未调用<code>open()</code>方法</li>
<li>1：启动，调用了<code>open()</code>方法，尚未调用<code>send()</code>方法</li>
<li>2：发送，调用了<code>send()</code>方法，尚未接收到响应。</li>
<li>3：接收，接收到部分响应数据</li>
<li>4：完成，已经接收到全部响应数据</li>
</ul>
</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><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">var xhr = createXHR();</div><div class="line">xhr.onreadystatechange = function()&#123;</div><div class="line">	if (xhr.readyState == 4)&#123;</div><div class="line">		if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status == 304)&#123;</div><div class="line">			alert(xhr.responseText);</div><div class="line">		&#125; else &#123;</div><div class="line">			alert(&quot;Request was unsuccessful: &quot; + xhr.status);</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;;</div><div class="line">xhr.open(&quot;get&quot;, &quot;example.txt&quot;, true);</div><div class="line">xhr.send(null);</div></pre></td></tr></table></figure>
<ul>
<li><code>abort()</code>：在接收到响应之前通过该方法取消异步请求。<br>建议调用这个方法之后，对<code>XHR</code>对象进行解引用操作。</li>
</ul>
<h4 id="HTTP-头部信息"><a href="#HTTP-头部信息" class="headerlink" title="HTTP 头部信息"></a>HTTP 头部信息</h4><p>默认情况下，在发送<code>XHR</code>请求的同时，还会发送下列头部信息：</p>
<ul>
<li><code>Accept</code>：浏览器能够处理的内容类型</li>
<li><code>Accept-Charset</code>：浏览器能够显示的字符集</li>
<li><code>Accept-Encoding</code>：浏览器能够处理的压缩编码</li>
<li><code>Accept-Language</code>：浏览器当前设置的语言</li>
<li><code>Connection</code>：浏览器与服务器之间连接的类型</li>
<li><code>Cookie</code>： 当前页面的 Cookie</li>
<li><code>Host</code>：发出请求的页面所在的域</li>
<li><code>Referer</code>：发出请求的页面的URI</li>
<li><code>User-Agent</code>：浏览器的用户代理</li>
</ul>
<p>自定义请求头部信息，使用<code>setRequestHeader()</code>方法，该方法接受两个参数：头部字段的名称和头部字段的值。</p>
<p>要成功发送请求头部信息，必须在调用<code>open()</code>方法之后且调用<code>send()</code>方法之前调用<code>serRequestHeader()</code>。<br><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">var xhr = createXHR();</div><div class="line">xhr.onreadystatechange = function()&#123;</div><div class="line">	// ...</div><div class="line">&#125;;</div><div class="line">xhr.open(&quot;get&quot;, &quot;example.php&quot;, true);</div><div class="line">xhr.setRequestHeader(&quot;MyHeader&quot;, &quot;MyValue&quot;);</div><div class="line">xhr.send(null);</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>建议使用自定义的头部字段名称，不要使用浏览器正常发送的字段名称，否则有可能会影响服务器的响应。有的浏览器允许开发人员重写默认的头部信息，但有的浏览器则不允许这样做。</p>
<p>调用<code>XHR</code>对象的<code>getResponseHeader()</code>方法，接受一个参数：头部字段名称。就能取得相应的响应头部信息。<br>调用<code>getAllResponseHeaders()</code>方法可以取得包含所有头部信息的字符串。</p>
<h4 id="GET请求"><a href="#GET请求" class="headerlink" title="GET请求"></a>GET请求</h4><p>使用<code>GET</code>请求经常会发生一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用<code>encodeURIComponent()</code>进行编码，然后才能放到URL的末尾。<br><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">function addURLParam(url, name, value) &#123;</div><div class="line">	url += (url.indexOf(&quot;?&quot;) == -1 ? &quot;?&quot; : &quot;&amp;&quot;);</div><div class="line">	url += encodeURIComponent(name) + &quot;=&quot; + encodeURIComponent(value);</div><div class="line">	return url;</div><div class="line">&#125;</div><div class="line"></div><div class="line">var url = &quot;example.php&quot;;</div><div class="line">//添加参数</div><div class="line">url = addURLParam(url, &quot;name&quot;, &quot;Nicholas&quot;);</div><div class="line">url = addURLParam(url, &quot;book&quot;, &quot;Professional JavaScript&quot;);</div><div class="line">//初始化请求</div><div class="line">xhr.open(&quot;get&quot;, url, false);</div></pre></td></tr></table></figure></p>
<h4 id="POST请求"><a href="#POST请求" class="headerlink" title="POST请求"></a>POST请求</h4><p>如果我们希望用XHR模仿表单提交，需要将<code>Content-Type</code>头部信息设置为<code>application/x-www-form-urlencoded</code>(表单提交的内容类型)<br><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">function submitData()&#123;</div><div class="line">	var xhr = createXHR();</div><div class="line">	xhr.onreadystatechange = function()&#123;</div><div class="line">		if (xhr.readyState == 4)&#123;</div><div class="line">			if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status == 304)&#123;</div><div class="line">				alert(xhr.responseText);</div><div class="line">			&#125; else &#123;</div><div class="line">				alert(&quot;Request was unsuccessful: &quot; + xhr.status);</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">	&#125;;</div><div class="line">	xhr.open(&quot;post&quot;, &quot;postexample.php&quot;, true);</div><div class="line">	xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);</div><div class="line">	var form = document.getElementById(&quot;user-info&quot;);</div><div class="line">	xhr.send(serialize(form));</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="XMLHttpRequest-2-级"><a href="#XMLHttpRequest-2-级" class="headerlink" title="XMLHttpRequest 2 级"></a>XMLHttpRequest 2 级</h3><h4 id="FormData"><a href="#FormData" class="headerlink" title="FormData"></a>FormData</h4><p><code>FormData</code>为序列化表单以及创建于表单格式相同的数据提供了便利。<br><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">var data = new FormData();</div><div class="line">data.append(&apos;name&apos;, &apos;Yeaseon&apos;);</div></pre></td></tr></table></figure></p>
<p><code>append</code>方法可以将表单的字段和值，传入<code>FormData</code>对象中。也可以预先填入表单中的字段：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var data = new FormData(document.form[0]);</div></pre></td></tr></table></figure></p>
<p><code>FormData</code>的方便就在于不必手动修改XHR对象的请求头部。</p>
<h4 id="超时设定"><a href="#超时设定" class="headerlink" title="超时设定"></a>超时设定</h4><p><code>XHR</code>对象添加了一个<code>timeout</code>属性，表示请求在等待多少毫秒之后终止。如果规定时间内浏览器没有收到响应，就会触发<code>timeout</code>事件，进而调用<code>ontimeout</code>事件处理程序。<br><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 xhr = createXHR();</div><div class="line">xhr.onreadystatechange = function()&#123;</div><div class="line">	// ...</div><div class="line">&#125;;</div><div class="line">xhr.open(&quot;get&quot;, &quot;timeout.php&quot;, true);</div><div class="line">xhr.timeout = 1000; //将超时设置为1 秒钟</div><div class="line">xhr.ontimeout = function()&#123;</div><div class="line">	alert(&quot;Request did not return in a second.&quot;);</div><div class="line">&#125;;</div><div class="line">xhr.send(null);</div></pre></td></tr></table></figure></p>
<p>超时之后请求终止，但是此时的<code>readyState</code>可能已经变为了<code>4</code>，就意味着会调用<code>onreadystatechange</code>事件。</p>
<p>可是，如果在超时终止请求之后再访问<code>status</code> 属性，就会导致错误。为避免浏览器报告错误，可以将检查<code>status</code> 属性的语句封装在一个<code>try-catch</code>语句当中。</p>
<h4 id="overrideMimeType-方法"><a href="#overrideMimeType-方法" class="headerlink" title="overrideMimeType()方法"></a>overrideMimeType()方法</h4><p>用于重写<code>XHR</code>响应的<code>MIME</code>类型。因为返回响应的<code>MIME</code> 类型决定了<code>XHR</code> 对象如何处理它，所以提供一种方法能够重写服务器返回的<code>MIME</code> 类型是很有用的。<br><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">var xhr = createXHR();</div><div class="line">xhr.open(&quot;get&quot;, &quot;text.php&quot;, true);</div><div class="line">xhr.overrideMimeType(&quot;text/xml&quot;);</div><div class="line">xhr.send(null);</div></pre></td></tr></table></figure></p>
<h4 id="进度事件"><a href="#进度事件" class="headerlink" title="进度事件"></a>进度事件</h4><p>有以下6个进度事件：</p>
<ul>
<li><code>loadstart</code>：在接收到响应数据的第一个字节触发</li>
<li><code>progress</code>：在接收响应期间持续不断地触发</li>
<li><code>error</code>：在请求发生错误时触发</li>
<li><code>abort</code>：在因为调用<code>abort()</code>方法而终止连接时触发</li>
<li><code>load</code>：在接收到完整的响应数据时触发</li>
<li><code>loadend</code>：在通信完成或者触发<code>error</code>、<code>abort</code>，或<code>load</code>事件后触发</li>
</ul>
<p><strong>progress</strong>事件<br><code>onprogress</code>事件处理程序会接收到一个<code>event</code>对象，<code>target</code>属性指向<code>XHR</code>对象，包含着三个额外的属性：</p>
<ul>
<li><code>lengthComputable</code>：表示进度信息是否可用的布尔值</li>
<li><code>position</code>：表示已经接受的字节数</li>
<li><code>totalSize</code>：表示根据<code>Content-Length</code>响应头部确定的预期字节数。</li>
</ul>
<h3 id="跨资源共享"><a href="#跨资源共享" class="headerlink" title="跨资源共享"></a>跨资源共享</h3><h4 id="IE对CORS的实现"><a href="#IE对CORS的实现" class="headerlink" title="IE对CORS的实现"></a>IE对CORS的实现</h4><p>微软在IE8中引入了<code>XDR</code>类型，类似与<code>XHR</code>对象，两者的不同之处：</p>
<ul>
<li>cookie不会随请求发送，也不会随响应返回</li>
<li>只能设置请求头部信息中的<code>Content-Type</code>字段</li>
<li>不能访问响应头部信息</li>
<li>只支持<code>GET</code>和<code>POST</code>请求</li>
</ul>
<p>请求返回之后，就会触发<code>load</code>事件，响应数据也会保存在<code>responseText</code>属性中：<br><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">var xdr = new XDomainRequest();</div><div class="line">xdr.onload = function () &#123;</div><div class="line">	console.log(xdr.responseText);</div><div class="line">&#125;;</div><div class="line">xdr.onerror = function()&#123;</div><div class="line">	alert(&quot;An error occurred.&quot;);</div><div class="line">&#125;;</div><div class="line">xdr.open(&apos;get&apos;, &apos;http://..../xxx/&apos;);</div><div class="line">xdr.send(null);</div></pre></td></tr></table></figure></p>
<p>在请求返回之前可以调用<code>abort()</code>方法终止请求。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xdr.abort();</div></pre></td></tr></table></figure></p>
<p><code>XDR</code>对象也支持<code>timeout</code>属性以及<code>ontimeout</code>事件处理程序<br><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">var xdr = new XDomainRequest();</div><div class="line">xdr.onload = function()&#123;</div><div class="line">	alert(xdr.responseText);</div><div class="line">&#125;;</div><div class="line">xdr.onerror = function()&#123;</div><div class="line">	alert(&quot;An error occurred.&quot;);</div><div class="line">&#125;;</div><div class="line">xdr.timeout = 1000;</div><div class="line">xdr.ontimeout = function()&#123;</div><div class="line">	alert(&quot;Request took too long.&quot;);</div><div class="line">&#125;;</div><div class="line">xdr.open(&quot;get&quot;, &quot;http://www.somewhere-else.com/page/&quot;);</div><div class="line">xdr.send(null);</div></pre></td></tr></table></figure></p>
<p>为了支持<code>POST</code>请求，<code>XDR</code>对象提供了<code>contentType</code>属性，用来表示发送数据的格式。<br><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 xdr = new XDomainRequest();</div><div class="line">xdr.onload = function () &#123;</div><div class="line">	//</div><div class="line">&#125;</div><div class="line">xdr.onerror = function () &#123;</div><div class="line">	//</div><div class="line">&#125;</div><div class="line">xdr.open(&apos;post&apos;, &apos;http://www.somewhere-else.com/page/&apos;);</div><div class="line">xdr.contentType = &apos;application/x-www-form-urlencoded&apos;;</div><div class="line">xdr.send(&apos;name1=value1&amp;name2=value2&apos;);</div></pre></td></tr></table></figure></p>
<h4 id="其他浏览器对CORS的实现"><a href="#其他浏览器对CORS的实现" class="headerlink" title="其他浏览器对CORS的实现"></a>其他浏览器对CORS的实现</h4><p>与IE中的<code>XDR</code>对象不同，通过跨域<code>XHR</code>对象可以访问<code>status</code>和<code>statusText</code>属性，并且支持同步请求。同时也有一些限制：</p>
<ul>
<li>不能使用<code>setRequestHeader()</code>设置自定义头部</li>
<li>不能发送和接收<code>cookie</code></li>
<li>调用<code>getAllResponseHeaders()</code>方法总会返回空字符串</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><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">var xhr = createXHR();</div><div class="line">xhr.onreadystatechange = function()&#123;</div><div class="line">	if (xhr.readyState == 4)&#123;</div><div class="line">		if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status == 304)&#123;</div><div class="line">			alert(xhr.responseText);</div><div class="line">		&#125; else &#123;</div><div class="line">			alert(&quot;Request was unsuccessful: &quot; + xhr.status);</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;;</div><div class="line">xhr.open(&quot;get&quot;, &quot;http://www.somewhere-else.com/page/&quot;, true);</div><div class="line">xhr.send(null);</div></pre></td></tr></table></figure>
<h3 id="其他跨域技术"><a href="#其他跨域技术" class="headerlink" title="其他跨域技术"></a>其他跨域技术</h3><h4 id="图像Ping"><a href="#图像Ping" class="headerlink" title="图像Ping"></a>图像Ping</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></pre></td><td class="code"><pre><div class="line">var img = new Image();</div><div class="line">img.onload = img.onerror = function()&#123;</div><div class="line">	alert(&quot;Done!&quot;);</div><div class="line">&#125;;</div><div class="line">img.src = &quot;http://www.example.com/test?name=Nicholas&quot;;</div></pre></td></tr></table></figure>
<h4 id="JSONP"><a href="#JSONP" class="headerlink" title="JSONP"></a>JSONP</h4><p><code>JSONP</code>是<strong>JSON with padding</strong>的简写。<code>JSONP</code>只不过时被包含在函数调用中的<code>JSON</code>：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">callback(&#123;&quot;name&quot;: &quot;Yeaseon&quot;&#125;);</div></pre></td></tr></table></figure></p>
<p><code>JSONP</code>由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是请求中指定的。下面是一个经典的<code>JSONP</code>请求<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">http://freegeoip.net/json/?callback=handleResponse</div></pre></td></tr></table></figure></p>
<p>这里指定的回调函数的名字叫做<code>handleResponse</code>。</p>
<p><code>JSONP</code>是通过动态<code>&lt;script&gt;</code>元素来使用的，使用时可以为<code>src</code>属性指定一个跨域<code>URL</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></pre></td><td class="code"><pre><div class="line">function handleResponse(response)&#123;</div><div class="line">	alert(&quot;You’re at IP address &quot; + response.ip + &quot;, which is in &quot; +</div><div class="line">		response.city + &quot;, &quot; + response.region_name);</div><div class="line">&#125;</div><div class="line">var script = document.createElement(&quot;script&quot;);</div><div class="line">script.src = &quot;http://freegeoip.net/json/?callback=handleResponse&quot;;</div><div class="line">document.body.insertBefore(script, document.body.firstChild);</div></pre></td></tr></table></figure>
<h4 id="服务器发送事件"><a href="#服务器发送事件" class="headerlink" title="服务器发送事件"></a>服务器发送事件</h4><p><strong>SSE</strong>支持短轮询、长轮训和HTTP流，而且能在断开连接时自动确定何时重新连接。</p>
<h5 id="SSE-API"><a href="#SSE-API" class="headerlink" title="SSE API"></a>SSE API</h5><p>要预订新的事件流，首先要创建一个新的<code>EventSource</code>对象，并传入一个入口点：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var source = new EventSource(&apos;myevents.php&apos;);</div></pre></td></tr></table></figure></p>
<p>传入的URL必须与创建对象的页面同源。<br><code>EventSource</code>的实例有一个<code>readyState</code>属性：<code>0</code>表示正连接到服务器，<code>1</code>表示打开了连接，<code>2</code>表示关闭了连接。<br><code>EventSource</code>实例还有三个事件：</p>
<ul>
<li><code>open</code>：在建立连接时触发</li>
<li><code>message</code>：在从服务器接收到新事件时触发</li>
<li><code>error</code>：在无法建立连接时触发</li>
</ul>
<p>服务器发回的数据以字符串形式保存在<code>event.data</code>中。<br>默认情况下，<code>EventSource</code>对象会保持与服务器的活动连接。如果想强制立即断开连接并且不在重新连接，可以调用<code>close()</code>方法。</p>
<h4 id="Web-Sockets"><a href="#Web-Sockets" class="headerlink" title="Web Sockets"></a>Web Sockets</h4><p>由于 Web Sockets 使用了自定义的协议,所以 URL 模式也略有不同。未加密的连接不再是 http:// ,而是 ws:// ;加密的连接也不是 https:// ,而是 wss:// 。</p>
<h5 id="Web-Sockets-API"><a href="#Web-Sockets-API" class="headerlink" title="Web Sockets API"></a>Web Sockets API</h5><p>创建一个WebSockets实例对象：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var socket = new WebSocket(&quot;ws://www.example.com/server.php&quot;);</div></pre></td></tr></table></figure></p>
<p>WebSocket也有一个表示当前状态的<code>readyState</code>属性：</p>
<ul>
<li><code>WebSocket.OPENING (0)</code> ：正在建立连接</li>
<li><code>WebSocket.OPEN (1)</code>：已经建立连接</li>
<li><code>WebSocket.CLOSING (2)</code>：正在关闭连接</li>
<li><code>WebSocket.CLOSE (3)</code>：已经关闭连接</li>
</ul>
<h5 id="发送和接收数据"><a href="#发送和接收数据" class="headerlink" title="发送和接收数据"></a>发送和接收数据</h5><p>向服务器发送数据，使用<code>send()</code>方法并传入任意字符串：<br><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">var socket = new WebSocket(&apos;ws:// www.example.com/server.php&apos;);</div><div class="line">socket.send(&apos;Hello World&apos;);</div></pre></td></tr></table></figure></p>
<p>Web Sockets只能发送纯文本数据，对于复杂的数据结构，在发送之前，必须进行序列化。<br><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">var message = &#123;</div><div class="line">	time: new Date(),</div><div class="line">	text: &apos;Hello world&apos;,</div><div class="line">	clientId: &apos;adfalsf39&apos;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">socket.send(JSON.stringify(message));</div></pre></td></tr></table></figure></p>
<p>当服务器向客户端发来消息时，WebSocket对象就会触发<code>message</code>事件。这个<code>message</code>事件与其他传递消息的协议类似，也是把返回的数据保存在<code>event.data</code>属性中。<br><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">socket.onmessage = function (event) &#123;</div><div class="line"> var data = event.data;</div><div class="line"> // ....</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>与<code>send()</code>类似，<code>event.data</code>中返回的数据也是字符串，需要手工解析这些数据。</p>
<h5 id="其他事件"><a href="#其他事件" class="headerlink" title="其他事件"></a>其他事件</h5><p>WebSocket对象还有其他三个事件，在连接生命周期的不同阶段触发：</p>
<ul>
<li><code>open</code>：在成功建立连接时触发</li>
<li><code>error</code>：在发生错误时触发，连接不能持续</li>
<li><code>close</code>：在连接关闭时触发</li>
</ul>
<p>WebSocked对象不支持DOM 2级事件监听：<br><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 socket = new WebSocket(&quot;ws://www.example.com/server.php&quot;);</div><div class="line">socket.onopen = function()&#123;</div><div class="line">	alert(&quot;Connection established.&quot;);</div><div class="line">&#125;;</div><div class="line">socket.onerror = function()&#123;</div><div class="line">	alert(&quot;Connection error.&quot;);</div><div class="line">&#125;;</div><div class="line">socket.onclose = function()&#123;</div><div class="line">	alert(&quot;Connection closed.&quot;);</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<h2 id="高级技巧"><a href="#高级技巧" class="headerlink" title="高级技巧"></a>高级技巧</h2><hr>
<h3 id="高级函数"><a href="#高级函数" class="headerlink" title="高级函数"></a>高级函数</h3><h4 id="安全的类型检测"><a href="#安全的类型检测" class="headerlink" title="安全的类型检测"></a>安全的类型检测</h4><p>用于区分原生和非原生<strong>JavaScript</strong>对象，通过<code>Object.prototype.toString()</code>。<br><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">function isArray(value)&#123;</div><div class="line">	return Object.prototype.toString.call(value) == &quot;[object Array]&quot;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">function isFunction(value)&#123;</div><div class="line">	return Object.prototype.toString.call(value) == &quot;[object Function]&quot;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">function isRegExp(value)&#123;</div><div class="line">	return Object.prototype.toString.call(value) == &quot;[object RegExp]&quot;;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h4 id="作用域安全的构造函数"><a href="#作用域安全的构造函数" class="headerlink" title="作用域安全的构造函数"></a>作用域安全的构造函数</h4><p>防止构造函数内<code>this</code>指针的指向被改变（指向<code>window</code>）<br><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 Person (name, age, job) &#123;</div><div class="line">	if (this instanceof Person) &#123;</div><div class="line">		this.name = name;</div><div class="line">		this.age = age;</div><div class="line">		this.job = job;</div><div class="line">	&#125; else &#123;</div><div class="line">		return new Person(name, age, job);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<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><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></pre></td><td class="code"><pre><div class="line">function createXHR()&#123;</div><div class="line">	if (typeof XMLHttpRequest != &quot;undefined&quot;)&#123;</div><div class="line">		return new XMLHttpRequest();</div><div class="line">	&#125; else if (typeof ActiveXObject != &quot;undefined&quot;)&#123;</div><div class="line">		if (typeof arguments.callee.activeXString != &quot;string&quot;)&#123;</div><div class="line">			var versions = [&quot;MSXML2.XMLHttp.6.0&quot;, &quot;MSXML2.XMLHttp.3.0&quot;, &quot;MSXML2.XMLHttp&quot;],</div><div class="line">				i,len;</div><div class="line">			for (i=0,len=versions.length; i &lt; len; i++)&#123;</div><div class="line">				try &#123;</div><div class="line">					new ActiveXObject(versions[i]);</div><div class="line">					arguments.callee.activeXString = versions[i];</div><div class="line">					break;</div><div class="line">				&#125; catch (ex)&#123;</div><div class="line">					//跳过</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">		return new ActiveXObject(arguments.callee.activeXString);</div><div class="line">	&#125; else &#123;</div><div class="line">		throw new Error(&quot;No XHR object available.&quot;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>第一种改法：<br><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></pre></td><td class="code"><pre><div class="line">function createXHR () &#123;</div><div class="line">	if (typeof XMLHttpRequest != &apos;undefined&apos;) &#123;</div><div class="line">		createXHR = function () &#123;</div><div class="line">			return new XMLHttpRequest();</div><div class="line">		&#125;;</div><div class="line">	&#125; else if (typeof ActiveXObjext != &apos;undefined&apos;) &#123;</div><div class="line">		createXHR = function () &#123;</div><div class="line">			if (typeof arguments.callee.activeXString != &apos;string&apos;) &#123;</div><div class="line">				var versions = [&quot;MSXML2.XMLHttp.6.0&quot;, &quot;MSXML2.XMLHttp.3.0&quot;, &quot;MSXML2.XMLHttp&quot;],</div><div class="line">					i,len;</div><div class="line">				for (i = 0; len = versions.length; i &lt; len; i++) &#123;</div><div class="line">					try &#123;</div><div class="line">						new ActiveXObject(versions[i]);</div><div class="line">						arguments.callee.activeXString = versions[i];</div><div class="line">						break;</div><div class="line">					&#125; catch (e) &#123;</div><div class="line">						// skip</div><div class="line">					&#125;</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">			return new ActiveXObject(arguments.callee.activeXString);</div><div class="line">		&#125;;</div><div class="line">	&#125; else &#123;</div><div class="line">		createXHR = function () &#123;</div><div class="line">			throw new Error(&apos;No XHR object available.&apos;);</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	return createXHR();</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>第二种改法：<br><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></pre></td><td class="code"><pre><div class="line">var createXHR = (function () &#123;</div><div class="line">	if (typeof XMLHttpRequest != &apos;undefined&apos;) &#123;</div><div class="line">		return function () &#123;</div><div class="line">			return new XMLHttpRequest();</div><div class="line">		&#125;;</div><div class="line">	&#125; else if (typeof ActiveXObjext != &apos;undefined&apos;) &#123;</div><div class="line">		return function () &#123;</div><div class="line">			if (typeof arguments.callee.activeXString != &apos;string&apos;) &#123;</div><div class="line">				var versions = [&quot;MSXML2.XMLHttp.6.0&quot;, &quot;MSXML2.XMLHttp.3.0&quot;, &quot;MSXML2.XMLHttp&quot;],</div><div class="line">					i,len;</div><div class="line">				for (i = 0; len = versions.length; i &lt; len; i++) &#123;</div><div class="line">					try &#123;</div><div class="line">						new ActiveXObject(versions[i]);</div><div class="line">						arguments.callee.activeXString = versions[i];</div><div class="line">						break;</div><div class="line">					&#125; catch (e) &#123;</div><div class="line">						// skip</div><div class="line">					&#125;</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">			return new ActiveXObject(arguments.callee.activeXString);</div><div class="line">		&#125;;</div><div class="line">	&#125; else &#123;</div><div class="line">		return function () &#123;</div><div class="line">			throw new Error(&apos;No XHR object available.&apos;);</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;)();</div></pre></td></tr></table></figure></p>
<h4 id="函数绑定"><a href="#函数绑定" class="headerlink" title="函数绑定"></a>函数绑定</h4><p><code>bind()</code>函数，语法如下：<br><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 bind (fn, context) &#123;</div><div class="line">	return function () &#123;</div><div class="line">		return fn.apply(context, arguments);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h2 id="离线应用与客户端存储"><a href="#离线应用与客户端存储" class="headerlink" title="离线应用与客户端存储"></a>离线应用与客户端存储</h2><hr>
<h3 id="离线检测"><a href="#离线检测" class="headerlink" title="离线检测"></a>离线检测</h3><p><code>navigator.onLine</code>属性可以判断设备否能访问网络。</p>
<p>HTML5定义两个事件：<code>online</code>和<code>offline</code>，当网络状态变化时，分别触发这两个事件：<br><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">EventUtil.addHandler(window, &apos;online&apos;, function () &#123;</div><div class="line">	console.log(&apos;online&apos;);</div><div class="line">&#125;);</div><div class="line">EventUtil.addHandler(window, &apos;offline&apos;, function () &#123;</div><div class="line">	console.log(&apos;offline&apos;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h3 id="数据存储"><a href="#数据存储" class="headerlink" title="数据存储"></a>数据存储</h3><h4 id="Web存储机制"><a href="#Web存储机制" class="headerlink" title="Web存储机制"></a>Web存储机制</h4><p>Web Storage规范包含两种对象的定义：<code>sessionStorage</code>和<code>globalStorage</code>。这两个对象在支持的浏览器中都是以<code>windows</code>对象属性的形式存在。</p>
<h5 id="Storage类型"><a href="#Storage类型" class="headerlink" title="Storage类型"></a><code>Storage</code>类型</h5><p><code>Storage</code>类型提供最大的存储空间来存储名值对。</p>
<ul>
<li><code>clear()</code>：删除所有值</li>
<li><code>getItem(name)</code>：根据指定的名字<code>name</code>获取对应的值</li>
<li><code>key(index)</code>：获得<code>index</code>位置处的值的名字</li>
<li><code>removeItem(name)</code>：删除由<code>name</code>指定的名值对</li>
<li><code>setItem(name, value)</code>：为指定的<code>name</code>设置一个对应的值</li>
</ul>
<h5 id="sessionStorage对象"><a href="#sessionStorage对象" class="headerlink" title="sessionStorage对象"></a><code>sessionStorage</code>对象</h5><p><code>sessionStorage</code>对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。存储在<code>sessionStorage</code>中的数据可以跨越页面刷新而存在。<br><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">//使用方法存储数据</div><div class="line">sessionStorage.setItem(&quot;name&quot;, &quot;Nicholas&quot;);</div><div class="line">//使用属性存储数据</div><div class="line">sessionStorage.book = &quot;Professional JavaScript&quot;;</div><div class="line"></div><div class="line">//使用方法读取数据</div><div class="line">var name = sessionStorage.getItem(&quot;name&quot;);</div><div class="line">//使用属性读取数据</div><div class="line">var book = sessionStorage.book;</div><div class="line"></div><div class="line">//使用delete 删除一个值——在WebKit 中无效</div><div class="line">delete sessionStorage.name;</div><div class="line">//使用方法删除一个值</div><div class="line">sessionStorage.removeItem(&quot;book&quot;);</div></pre></td></tr></table></figure></p>
<p>可以通过结合<code>length</code>属性和<code>key()</code>方法来迭代<code>sessionStorage</code>中的值：<br><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">for (var i = 0, len = sessionStorage.length; i &lt; len; i++) &#123;</div><div class="line">	var key = sessionStorage.key(i);</div><div class="line">	var value = sessionStorage.getItem(key);</div><div class="line">	console.log(key + &apos; = &apos; + value);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>还可以使用<code>for-in</code>循环来迭代<code>sessionStorage</code>中的值：<br><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">for (var key in sessionStorage) &#123;</div><div class="line">	var value = sessionStorage.getItem(key);</div><div class="line">	console.log(key + &apos; = &apos; + value);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h5 id="globalStorage对象"><a href="#globalStorage对象" class="headerlink" title="globalStorage对象"></a><code>globalStorage</code>对象</h5><p>这个对象的目的是跨越会话存储数据，，但有特定的访问限制。要使用<code>globalStorage</code>，首先要指定哪些域可以访问该数据。<br><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">// 保存数据</div><div class="line">globalStorage[&apos;wrox.com&apos;].name = &apos;Yeaseon&apos;;</div><div class="line"></div><div class="line">// 获取数据</div><div class="line">var name = globalStorage[&apos;wrox.com&apos;].name;</div></pre></td></tr></table></figure></p>
<p>上例，访问的是针对域名<code>wrox.com</code>的存储空间。<code>globalStorage</code>对象不是<code>Storage</code>的实例，<br>而具体的<code>globalStorage[&#39;wrox.com&#39;]</code>才是。这个存储空间对于<code>wrox.com</code>及其所有子域都是可以访问的。<br><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">globalStorage[&quot;www.wrox.com&quot;].name = &quot;Yeaseon&quot;;</div><div class="line">globalStorage[&quot;www.wrox.com&quot;].book = &quot;Professional JavaScript&quot;;</div><div class="line">globalStorage[&quot;www.wrox.com&quot;].removeItem(&quot;name&quot;);</div><div class="line">var book = globalStorage[&quot;www.wrox.com&quot;].getItem(&quot;book&quot;);</div></pre></td></tr></table></figure></p>
<h5 id="localStorage对象"><a href="#localStorage对象" class="headerlink" title="localStorage对象"></a><code>localStorage</code>对象</h5><p><code>localStorage</code>对象是HTML5规范中作为持久保存客户端数据的方案，并且取代<code>globalStorage</code>。要访问同一个<code>localStorage</code>对象，页面必须来自同一个域名（子域名无效），必须同源。<br><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">//使用方法存储数据</div><div class="line">localStorage.setItem(&quot;name&quot;, &quot;Nicholas&quot;);</div><div class="line">//使用属性存储数据</div><div class="line">localStorage.book = &quot;Professional JavaScript&quot;;</div><div class="line"></div><div class="line">//使用方法读取数据</div><div class="line">var name = localStorage.getItem(&quot;name&quot;);</div><div class="line">//使用属性读取数据</div><div class="line">var book = localStorage.book;</div></pre></td></tr></table></figure></p>
<h5 id="storage事件"><a href="#storage事件" class="headerlink" title="storage事件"></a><code>storage</code>事件</h5><p>对<code>Storage</code>对象进行任何修改，都会在文档上触发<code>storage</code>事件。这个事件的<code>event</code>对象有以下属性。</p>
<ul>
<li><code>domain</code>：发生变化的存储空间的域名</li>
<li><code>key</code>：设置或删除的键名</li>
<li><code>newValue</code>：如果是设置值，则是新值；如果是删除键，则是<code>null</code></li>
<li><code>oldValue</code>：键被更改之前的值</li>
</ul>
<p>在这四个属性中，IE8 和Firefox 只实现了<code>domain</code> 属性。在撰写本书的时候，WebKit 尚不支持<br><code>storage</code> 事件</p>
<h4 id="IndexedDB"><a href="#IndexedDB" class="headerlink" title="IndexedDB"></a>IndexedDB</h4><p>Indexed Database API，简称<strong>IndexedDB</strong>，是在浏览器中保存结构化数据的一种数据库。<strong>IndexedDB</strong>设计的操作完全是异步进行。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;</div></pre></td></tr></table></figure></p>
<h5 id="数据库"><a href="#数据库" class="headerlink" title="数据库"></a>数据库</h5><p><strong>IndexedDB</strong>就是一个数据库，它最大的特色就是使用对象保存数据，而不是使用表来保存数据。</p>
<p><code>indexDB.open()</code>，传入一个数据库参数。如果该数据库存在就会发送一个打开它的请求；如果该数据库不存在，就会发送一个创建并打开它的请求。请求会返回一个<code>IDBRequest</code>对象，这个对象上可以添加<code>onerror</code>和<code>onsuccess</code>事件处理程序。<br><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">var request, database;</div><div class="line"></div><div class="line">request = indexedDB.open(&apos;admin&apos;);</div><div class="line">request.onerror = function (event) &#123;</div><div class="line">	console.log(event.target.errorCode);</div><div class="line">&#125;;</div><div class="line">request.onsuccess = function (event) &#123;</div><div class="line">	database = event.target.result;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p><code>event.target</code>都指向<code>request</code>对象，因此他们可以互换使用。<br>发生错误了，<code>event.target.errorCode</code>中将会保存一个错误码：</p>
<ul>
<li><code>IDBDatebaseException.UNKNOWN_ERR(1)</code>：意外错误</li>
<li><code>IDBDatebaseException.NON_TRANSIENT_ERR(2)</code>：操作不合法</li>
<li><code>IDBDatebaseException.NOT_FOUND_ERR(3)</code>：未发现要操作的数据库</li>
<li><code>IDBDatebaseException.CONSTRAINT_ERR(4)</code>：违反了数据库约束</li>
<li><code>IDBDatebaseException.DATA_ERR(5)</code>：提供给事务的数据不能满足要求</li>
<li><code>IDBDatebaseException.NOT_ALLOWED_ERR(6)</code>：操作不合法</li>
<li><code>IDBDatebaseException.TRANSACTION_INACTIVE_ERR(7)</code>：试图重用已完成的事务</li>
<li><code>IDBDatebaseException.ABORT_ERR(8)</code>：请求中断</li>
<li><code>IDBDatebaseException.READ_ONLY_ERR(9)</code>：试图在只读模式下写入或修改数据</li>
<li><code>IDBDatebaseException.TIMEOUT_ERR(10)</code>：在有效时间内未完成操作</li>
<li><code>IDBDatebaseException.QUOTA_ERR(11)</code>：磁盘空间不足</li>
</ul>
<p>指定数据库版本号，通过<code>setVersion()</code>方法：<br><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">if (database.version != &apos;1.0&apos;) &#123;</div><div class="line">	request = database.setVersion(&apos;1.0&apos;)；</div><div class="line">	request.onerror = function (event) &#123;</div><div class="line">		console.log(event.target.errorCode);</div><div class="line">	&#125;;</div><div class="line">	request.onsuccess = function (event) &#123;</div><div class="line">		console.log(&apos;&apos;Database name: &apos; + database.name + &apos;, Version: &apos; + database.version);</div><div class="line">	&#125;</div><div class="line">&#125; else &#123;</div><div class="line">	console.log(&apos;&apos;Database name: &apos; + database.name + &apos;, Version: &apos; + database.version);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h5 id="对象存储空间"><a href="#对象存储空间" class="headerlink" title="对象存储空间"></a>对象存储空间</h5><p>假设要保存的用户记录由用户名、密码等组成，那么保存一条记录的对象应该类似：<br><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">var user = &#123;</div><div class="line">	username: &apos;007&apos;,</div><div class="line">	firstname: &apos;James&apos;,</div><div class="line">	lastname: &apos;Bond&apos;,</div><div class="line">	password: &apos;foo&apos;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>如果使用<code>username</code>属性作为这个对象存储空间的键，这个<code>username</code>必须全局唯一，而且大部分时候都要通过这个键来访问数据。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var store = db.createObjectStore(&apos;users&apos;, &#123; keyPath: &apos;username&apos; &#125;);</div></pre></td></tr></table></figure></p>
<p>其中第二个参数中的<code>keyPath</code>属性，就是空间中将要保存的对象的一个属性，而这个属性将作为存储空间的键来使用。</p>
<p>通过<code>add()</code>或<code>put()</code>方法来向存储空间添加数据。着两个方法都接收一个参数，就是要保存的对象。<br><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></pre></td><td class="code"><pre><div class="line">//users 中保存着一批用户对象</div><div class="line">var i=0,</div><div class="line">	request,</div><div class="line">	requests = [],</div><div class="line">	len = users.length;</div><div class="line">while(i &lt; len)&#123;</div><div class="line">	request = store.add(users[i++]);</div><div class="line">	request.onerror = function()&#123;</div><div class="line">		//处理错误</div><div class="line">	&#125;;</div><div class="line">	request.onsuccess = function()&#123;</div><div class="line">		//处理成功</div><div class="line">	&#125;;</div><div class="line">	requests.push(request);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h5 id="事务"><a href="#事务" class="headerlink" title="事务"></a>事务</h5><p>在数据库对象上调用<code>transaction()</code>可以创建事务，任何时候，只要想读取或修改数据，都要通过事务来组织所有操作。<br><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">// 创建事务</div><div class="line">var transaction = db.transaction();</div></pre></td></tr></table></figure></p>
<p>可以传入要访问的一或多个对象存储空间。<br><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">var transaction = db.transaction(&apos;users&apos;);</div><div class="line"></div><div class="line">var transaction = db.transaction([&apos;users&apos;, &apos;anotherStore&apos;]);</div></pre></td></tr></table></figure></p>
<p>前面这些事务都是以<strong>只读</strong>方式访问数据。要修改访问方式，必须在创建事务时传入第二个参数，这个参数表示访问模式：</p>
<ul>
<li><code>IDBTransaction.READ_ONLY(0)</code>：只读</li>
<li><code>IDBTransaction.READ_WRITE(1)</code>：读写</li>
<li><code>IDBTransaction.VERSION_CHANGE(2)</code>：改变</li>
</ul>
<p>在Chrome中叫做<code>webkitIDBTransaction</code>，可以使用一下代码兼容：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;</div></pre></td></tr></table></figure></p>
<p>这样就能方便的指定<code>transaction()</code>第二个参数:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var transaction = db.transaction(&apos;users&apos;, IDBTransaction.READ_WRITE);</div></pre></td></tr></table></figure></p>
<p>取得事务的索引后，使用<code>objectStore()</code>方法并传入存储空间的名称，就可以访问指定的存储空间。然后通过如下方法操作对象：</p>
<ul>
<li><code>add()</code></li>
<li><code>put()</code></li>
<li><code>get()</code></li>
<li><code>delete()</code></li>
<li><code>clear()</code></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">var request = db.transaction(&apos;users&apos;).objectStore(&apos;users&apos;).get(&apos;007&apos;);</div><div class="line">request.onerror = function (event) &#123;</div><div class="line">	console.log(&apos;Did not get the object!&apos;);</div><div class="line">&#125;;</div><div class="line">request.onsuccess = function (event) &#123;</div><div class="line">	var result = event.target.result;</div><div class="line">	console.log(result.firstName);  // &apos;James&apos;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>也可以针对事务对象本身进行事件处理，存在两个事件<code>onerror</code>，<code>oncomplete</code>：<br><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">transaction.onerror = function (event) &#123;</div><div class="line">	// 整个事务都被取消了</div><div class="line">&#125;</div><div class="line">transaction.oncomplete = function (event) &#123;</div><div class="line">	// 整个事务都成功完成了</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>：在<code>oncomplete</code>事件的事件对象中访问不到<code>get()</code>请求返回的数据，必须在<code>onsuccess</code>事件中处理。</p>
<h5 id="键范围"><a href="#键范围" class="headerlink" title="键范围"></a>键范围</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;</div></pre></td></tr></table></figure>
<p>有四种定义键范围的方法：</p>
<ul>
<li><code>only()</code>：取得指定对象的键</li>
<li><code>lowerBound()</code>：指定结果集的下界</li>
<li><code>upperBound()</code>：指定结果集的上界</li>
<li><code>bound()</code>：同时指定上、下界</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><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">var onlyRange = IDBKeyRange.only(&quot;007&quot;);</div><div class="line"></div><div class="line">//从键为&quot;007&quot;的对象开始，然后可以移动到最后</div><div class="line">var lowerRange = IDBKeyRange.lowerBound(&quot;007&quot;);</div><div class="line">//从键为&quot;007&quot;的对象的下一个对象开始，然后可以移动到最后</div><div class="line">var lowerRange = IDBKeyRange.lowerBound(&quot;007&quot;, true);</div><div class="line"></div><div class="line">//从头开始，到键为&quot;ace&quot;的对象为止</div><div class="line">var upperRange = IDBKeyRange.upperBound(&quot;ace&quot;);</div><div class="line">//从头开始，到键为&quot;ace&quot;的对象的上一个对象为止</div><div class="line">var upperRange = IDBKeyRange.upperBound(&quot;ace&quot;, true);</div><div class="line"></div><div class="line">//从键为&quot;007&quot;的对象开始，到键为&quot;ace&quot;的对象为止</div><div class="line">var boundRange = IDBKeyRange.bound(&quot;007&quot;, &quot;ace&quot;);</div><div class="line">//从键为&quot;007&quot;的对象的下一个对象开始，到键为&quot;ace&quot;的对象为止</div><div class="line">var boundRange = IDBKeyRange.bound(&quot;007&quot;, &quot;ace&quot;, true);</div><div class="line">//从键为&quot;007&quot;的对象的下一个对象开始，到键为&quot;ace&quot;的对象的上一个对象为止</div><div class="line">var boundRange = IDBKeyRange.bound(&quot;007&quot;, &quot;ace&quot;, true, true);</div><div class="line">//从键为&quot;007&quot;的对象开始，到键为&quot;ace&quot;的对象的上一个对象为止</div><div class="line">var boundRange = IDBKeyRange.bound(&quot;007&quot;, &quot;ace&quot;, false, true);</div></pre></td></tr></table></figure>
<h2 id="新型的API"><a href="#新型的API" class="headerlink" title="新型的API"></a>新型的API</h2><hr>
<h3 id="Page-Visibility-API"><a href="#Page-Visibility-API" class="headerlink" title="Page Visibility API"></a>Page Visibility API</h3><p>Page Visibility API 是为了让开发人员知道页面是否对用户可见推出的。</p>
<ul>
<li><code>document.hidden</code>：表示页面是否隐藏的布尔值。</li>
<li><code>document.visibilityState</code><ul>
<li>页面在后台标签页中或浏览器最小化</li>
<li>页面在前台标签页中</li>
<li>实际的页面已经隐藏，但用户可以看到页面的预览</li>
<li>页面在屏幕外执行预渲染处理</li>
</ul>
</li>
<li><code>visibilitychange</code>事件：当文档可见性发生改变时，触发该事件。</li>
</ul>
<h3 id="Geolocation-API"><a href="#Geolocation-API" class="headerlink" title="Geolocation API"></a>Geolocation API</h3><p>Geolocation API 在浏览器中的实现是<code>navigator.geolocation</code>对象。</p>
<ul>
<li><code>getCurrentPosition()</code></li>
</ul>
<p>调用这个方法就会触发请求用户共享地理定位信息的对话框。这个方法接收三个参数：成功回调，可选的失败回调和可选的选项对象。</p>
<p><code>成功回调</code>会接收到一个<code>Position</code>对象参数，该对象有两个属性:<code>coords</code>和<code>timestamp</code>。</p>
<p><code>coords</code>对象中包含于位置相关的信息：</p>
<ul>
<li><code>latitude</code>：十进制度数表示的纬度</li>
<li><code>longitude</code>：十进制度数表示的经度</li>
<li><code>accuracy</code>：经纬度坐标的精度，以米为单位</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></pre></td><td class="code"><pre><div class="line">navigator.geolocation.getCurrentPosition(function (position) &#123;</div><div class="line">	drawMapCenteredAt(position.coords.latitude, position.coords.longitude);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><code>失败回调</code>在被调用的时候也会接受到一个参数，这个参数是一个对象，包含连个属性：<code>message</code>和<code>code</code>。<code>code</code>保存着一个数值，表示错误的类型：用户拒绝共享（1）、位置无效（2）或者超时（3）。<br><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">navigator.geolocation.getCurrentPosition(function (position) &#123;</div><div class="line">	drawMapCenteredAt(position.coords.latitude, position.coords.longitude);</div><div class="line">&#125;, function (error) &#123;</div><div class="line">	console.log(&apos;Error code:&apos; + error.code);</div><div class="line">	console.log(&apos;Error message:&apos; + error.message);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>第三个参数是一个<code>可选对象</code>，用于设定信息的类型。可以设置的选项有三个：</p>
<ul>
<li><code>enableHightAccuracy</code>：布尔值，表示必须尽可能使用最准确定的位置信息</li>
<li><code>timeout</code>：以毫秒数表示的等待位置信息的最长时间</li>
<li><code>maximumAge</code>：表示上一次取得的坐标信息的有效时间，以毫秒表示，如果时间到则重新取得新坐标信息</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><div class="line">10</div></pre></td><td class="code"><pre><div class="line">navigator.geolocation.getCurrentPosition(function (position) &#123;</div><div class="line">	drawMapCenteredAt(position.coords.latitude, position.coords.longitude);</div><div class="line">&#125;, function (error) &#123;</div><div class="line">	console.log(&apos;Error code:&apos; + error.code);</div><div class="line">	console.log(&apos;Error message:&apos; + error.message);</div><div class="line">&#125;, &#123;</div><div class="line">	enableHighAccuracy: true,</div><div class="line">	timeout: 5000,</div><div class="line">	maximumAge: 25000</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="File-API"><a href="#File-API" class="headerlink" title="File API"></a>File API</h3><p>File API 在表单中的文件输入字段的基础上，又添加了一些直接访问文件信息的接口。HTML5在DOM中为文件输入元素添加了一个<code>files</code>集合。每个<strong>File</strong>对象都有下列只读属性。</p>
<ul>
<li><code>name</code>：本地文件系统的文件名</li>
<li><code>size</code>：文件的字节大小</li>
<li><code>type</code>：字符串，文件的MIME类型</li>
<li><code>lastModifiedDate</code>：字符串，文件上一次修改的时间</li>
</ul>
<h4 id="FileReader-类型"><a href="#FileReader-类型" class="headerlink" title="FileReader 类型"></a>FileReader 类型</h4><p>FileReader 类型实现的是一种异步文件读取机制。可以把<code>FileReader</code>想象成<code>XMLHttpRequest</code>。</p>
<ul>
<li><code>readAsText(file, encoding)</code>：以纯文本形式读取文件，将读取到的文本保存在<code>result</code>属性中，第二个参数用于指定编码类型（可选）</li>
<li><code>readAsDataURL(file)</code>：读取文件并将文件以数据URI形式保存在<code>result</code>属性中</li>
<li><code>readAsBinaryString(file)</code>：读取文件并将一个字符串保存在<code>result</code>属性中，字符串中的每个字符表示一字节</li>
<li><code>readAsArrayBuffer(file)</code>：读取文件并将一个包含文件内容的<code>ArrayBuffer</code>保存在<code>result</code>属性中</li>
</ul>
<p>由于读取过程是异步的，所以<code>FileReader</code>提供了三个事件：</p>
<ul>
<li><code>progress</code></li>
<li><code>error</code></li>
<li><code>load</code></li>
</ul>
<p><code>progress</code>事件，每50ms就会触发一次，通过事件对象可以获得与<code>XHR</code>的<code>progress</code>事件相同的信息：</p>
<ul>
<li><code>lengthComputable</code></li>
<li><code>loaded</code></li>
<li><code>total</code></li>
</ul>
<p>由于种种原因无法读取文件，都会触发<code>error</code>事件，相关信息都会保存到<code>FileReader</code>的<code>error</code>属性中。<code>error.code</code>即错误码：</p>
<ul>
<li><code>1</code>：为找到文件</li>
<li><code>2</code>：安全性错误</li>
<li><code>3</code>：读取中断</li>
<li><code>4</code>：文件不可读</li>
<li><code>5</code>：编码错误</li>
</ul>
<p>文件加载成功后会触发<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><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></pre></td><td class="code"><pre><div class="line">var filesList = document.getElementById(&apos;files-list&apos;);</div><div class="line">EventUtil.addHandler(filesList, &apos;change&apos;, function (event) &#123;</div><div class="line">	var info = &apos;&apos;,</div><div class="line">		output = document.getElementById(&apos;output&apos;),</div><div class="line">		progress = document.getElementById(&apos;progress&apos;),</div><div class="line">		files = EventUtil.getTarget(event).files,</div><div class="line">		type = &apos;default&apos;,</div><div class="line">		reader = new FileReader();</div><div class="line"></div><div class="line">	if (/image/.test(files[0].type)) &#123;</div><div class="line">		reader.readAsDateURL(files[0]);</div><div class="line">		type = &apos;image&apos;;</div><div class="line">	&#125; else &#123;</div><div class="line">		reader.readAsText(files[0]);</div><div class="line">		type = &apos;text&apos;;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	reader.onerror = function () &#123;</div><div class="line">		output.innerHTML = &apos;Could not read file, error code is &apos; + reader.error.code;</div><div class="line">	&#125;;</div><div class="line"></div><div class="line">	reader.onprogress = function () &#123;</div><div class="line">		if (event.lengthComputable) &#123;</div><div class="line">			progress.innerHTML = event.loaded + &apos;/&apos; + event.total;</div><div class="line">		&#125;</div><div class="line">	&#125;;</div><div class="line"></div><div class="line">	reader.onload = function () &#123;</div><div class="line">		var html = &apos;&apos;;</div><div class="line">		switch (type) &#123;</div><div class="line">			case &apos;image&apos;:</div><div class="line">				html = &apos;&lt;img src=\&quot;&apos; + reader.result + &apos;\&quot;&gt;&apos;;</div><div class="line">				break;</div><div class="line">			case &apos;text&apos;:</div><div class="line">				html = reader.result;</div><div class="line">				break;</div><div class="line">		&#125;</div><div class="line">		output.innerHTML = html;</div><div class="line">	&#125;;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h4 id="读取拖放的文件"><a href="#读取拖放的文件" class="headerlink" title="读取拖放的文件"></a>读取拖放的文件</h4><p>从桌面上把文件拖放到浏览器中会触发<code>drop</code> 事件。而且可以在<code>event.dataTransfer. files</code>中读取到被放置的文件，当然此时它是一个<code>File</code> 对象，与通过文件输入字段取得的<code>File</code> 对象一样。<br><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></pre></td><td class="code"><pre><div class="line">var droptarget = document.getElementById(&apos;droptarget&apos;);</div><div class="line"></div><div class="line">function handleEvent(event) &#123;</div><div class="line">	var info = &apos;&apos;,</div><div class="line">		output = document.getElementById(&apos;output&apos;);</div><div class="line">		files, i, len;</div><div class="line">	EventUtil.preventDefault(event);</div><div class="line">	if (event.type == &apos;drop&apos;) &#123;</div><div class="line">		files = event.dataTransfer.files;  //转换成File对象</div><div class="line">		i = 0;</div><div class="line">		len = files.length;</div><div class="line"></div><div class="line">		while (i &lt; len) &#123;</div><div class="line">			info += files[i].name + &apos; (&apos; + files[i].type + &apos;, &apos; + files[i].size + &apos; bytes)&lt;br&gt;&apos;;</div><div class="line">			i++;</div><div class="line">		&#125;</div><div class="line">		output.innerHTML = info;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">// 阻止默认事件，只有 drop 事件会被处理</div><div class="line">EventUtil.addHandler(droptarget, &quot;dragenter&quot;, handleEvent);</div><div class="line">EventUtil.addHandler(droptarget, &quot;dragover&quot;, handleEvent);</div><div class="line">EventUtil.addHandler(droptarget, &quot;drop&quot;, handleEvent);</div></pre></td></tr></table></figure></p>
<h4 id="使用XHR上传文件"><a href="#使用XHR上传文件" class="headerlink" title="使用XHR上传文件"></a>使用XHR上传文件</h4><p>创建一个<code>FormDate</code>对象，通过它调用<code>append()</code>方法并传入相应的<code>File</code>对象作为参数，再把<code>FormData</code>对象传递给<code>XHR</code>的<code>send()</code>方法。<br><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></pre></td><td class="code"><pre><div class="line">var droptarget = document.getElementById(&apos;droptarget&apos;);</div><div class="line"></div><div class="line">function handleEvent(event) &#123;</div><div class="line">	var info = &apos;&apos;,</div><div class="line">		output = document.getElementById(&apos;output&apos;),</div><div class="line">		data, xhr,</div><div class="line">		files, i, len;</div><div class="line"></div><div class="line">	EventUtil.preventDefault(event);</div><div class="line"></div><div class="line">	if (event.type == &apos;drop&apos;) &#123;</div><div class="line">		data = new FormData();</div><div class="line">		files = event.dataTransfer.files;</div><div class="line">		i = 0;</div><div class="line">		len = files.length;</div><div class="line"></div><div class="line">		while (i &lt; len) &#123;</div><div class="line">			data.append(&apos;file&apos; + i, files[i]);</div><div class="line">			i++;</div><div class="line">		&#125;</div><div class="line"></div><div class="line">		xhr = new XMLHttpRequest();</div><div class="line">		xhr.open(&apos;post&apos;, &apos;FileAPIExapleUpload.php&apos;, true);</div><div class="line">		xhr.onreadystatechange = function () &#123;</div><div class="line">			if (xhr.readyState == 4) &#123;</div><div class="line">				console.log(xhr.responseText);</div><div class="line">			&#125;</div><div class="line">		&#125;;</div><div class="line">		xhr.send(data);</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">EventUtil.addHandler(droptarget, &quot;dragenter&quot;, handleEvent);</div><div class="line">EventUtil.addHandler(droptarget, &quot;dragover&quot;, handleEvent);</div><div class="line">EventUtil.addHandler(droptarget, &quot;drop&quot;, handleEvent);</div></pre></td></tr></table></figure></p>
]]></content>
    
    <summary type="html">
    
      &lt;img src=&quot;/2017/04/27/JS红宝书·读书笔记/book.jpg&quot; alt=&quot;JavaScript高级程序设计&quot; title=&quot;JavaScript高级程序设计&quot;&gt;
&lt;p&gt;花了半个多月的时间，终于又把“JS红宝书”又撸了一遍。&lt;/p&gt;
&lt;p&gt;第一次读“JS红宝书”还是&lt;strong&gt;2015&lt;/strong&gt;年初学JS的时候，那时候只是把语法部分读了一遍，还有一些浏览器相关知识做了下了解，大概也就读了半本的样子，&lt;br&gt;就开始了用JS进行开发了，在成长的道路上遇见了&lt;strong&gt;JQuery&lt;/strong&gt;，当时真的是感觉到&lt;strong&gt;JQuery&lt;/strong&gt;太友好了，慢慢放下了原生开发。&lt;/p&gt;
&lt;p&gt;现在呢，更多的时候是在用框架进行开发，越来越觉得自己的JS基础很缺乏，然后就开启了“JS红宝书”二刷之路。&lt;/p&gt;
&lt;p&gt;下面就把书中自己觉得重要的、没有掌握的知识整理出来。因为我觉得还是会三刷“JS红宝书”，希望把这本700多页的书越读越薄，勉励。&lt;/p&gt;
    
    </summary>
    
    
      <category term="JavaScript 笔记" scheme="https://yeaseonzhang.github.io/tags/JavaScript-%E7%AC%94%E8%AE%B0/"/>
    
  </entry>
  
  <entry>
    <title>Vuex 通俗版教程</title>
    <link href="https://yeaseonzhang.github.io/2017/03/16/Vuex-%E9%80%9A%E4%BF%97%E7%89%88/"/>
    <id>https://yeaseonzhang.github.io/2017/03/16/Vuex-通俗版/</id>
    <published>2017-03-16T05:56:48.000Z</published>
    <updated>2017-03-17T16:22:05.492Z</updated>
    
    <content type="html"><![CDATA[<p>本文基本上是<a href="http://vuex.vuejs.org/zh-cn/intro.html" target="_blank" rel="external">官方教程</a>的盗版，用通俗易懂的文字讲解<strong>Vuex</strong>，也对原文内容有删减。</p>
<p>如果你对以上声明不介意，那么就可以继续看本文，希望对你有所帮助。</p>
<a id="more"></a>
<p>学习一个新技术，必须要清楚两个<strong>W</strong>，”What &amp;&amp; Why”。</p>
<p>“XX 是什么？”，”为什么要使用 XX ，或者说 XX 有什么好处”，最后才是”XX 怎么使用”。</p>
<h2 id="Vuex是什么？"><a href="#Vuex是什么？" class="headerlink" title="Vuex是什么？"></a>Vuex是什么？</h2><p>Vuex 类似 Redux 的<strong>状态管理器</strong>，用来管理<strong>Vue</strong>的所有组件状态。</p>
<h2 id="为什么使用Vuex？"><a href="#为什么使用Vuex？" class="headerlink" title="为什么使用Vuex？"></a>为什么使用Vuex？</h2><p>当你打算开发大型单页应用（SPA），会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态。</p>
<p>遇到以上情况时候，你就应该考虑使用Vuex了，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。这样不管你在何处改变状态，都会通知使用该状态的组件做出相应修改。</p>
<p>下面讲解如何使用Vuex。</p>
<h2 id="最简单的Vuex示例"><a href="#最简单的Vuex示例" class="headerlink" title="最简单的Vuex示例"></a>最简单的Vuex示例</h2><p>本文就不涉及如何安装Vuex，直接通过代码讲解。</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></pre></td><td class="code"><pre><div class="line">import Vue from &apos;vue&apos;;</div><div class="line">import Vuex form &apos;vuex&apos;;</div><div class="line"></div><div class="line">Vue.use(Vuex);</div><div class="line"></div><div class="line">const store = new Vuex.Store(&#123;</div><div class="line">    state: &#123;</div><div class="line">        count: 0</div><div class="line">    &#125;,</div><div class="line">    mutations: &#123;</div><div class="line">        increment (state) &#123;</div><div class="line">            state.count++</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>以上就是一个最简单的Vuex，每一个Vuex应用就是一个store，在store中包含组件中的共享<strong>状态</strong><code>state</code>和改变状态的<strong>方法</strong>（暂且称作方法）<code>mutations</code>。</p>
<p>需要注意的是只能通过<code>mutations</code>改变store的<code>state</code>的状态，不能通过<code>store.state.count = 5;</code>直接更改（其实可以更改，不建议这么做，不通过<code>mutations</code>改变<code>state</code>，状态不会被同步）。<br>使用<code>store.commit</code>方法触发<code>mutations</code>改变<code>state</code>:<br><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">store.commit(&apos;increment&apos;);</div><div class="line"></div><div class="line">console.log(store.state.count)  // 1</div></pre></td></tr></table></figure></p>
<p>一个简简单单的Vuex应用就实现了。</p>
<h2 id="在Vue组件使用Vuex"><a href="#在Vue组件使用Vuex" class="headerlink" title="在Vue组件使用Vuex"></a>在Vue组件使用Vuex</h2><p>如果希望Vuex状态更新，相应的Vue组件也得到更新，最简单的方法就是在Vue的<code>computed</code>（计算属性）获取<code>state</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></pre></td><td class="code"><pre><div class="line">// Counter 组件</div><div class="line">const Counter = &#123;</div><div class="line">    template: `&lt;div&gt;&#123;&#123; count &#125;&#125;&lt;/div&gt;`,</div><div class="line">    computed: &#123;</div><div class="line">        count () &#123;</div><div class="line">            return store.state.count;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>上面的例子是直接操作全局状态<code>store.state.count</code>，那么每个使用该Vuex的组件都要引入。为了解决这个，Vuex通过<code>store</code>选项，提供了一种机制将状态从根组件<strong>注入</strong>到每一个子组件中。</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></pre></td><td class="code"><pre><div class="line">// 根组件</div><div class="line">import Vue from &apos;vue&apos;;</div><div class="line">import Vuex form &apos;vuex&apos;;</div><div class="line"></div><div class="line">Vue.use(Vuex);</div><div class="line">const app = new Vue(&#123;</div><div class="line">    el: &apos;#app&apos;,</div><div class="line">    store,</div><div class="line">    components: &#123;</div><div class="line">        Counter</div><div class="line">    &#125;,</div><div class="line">    template: `</div><div class="line">        &lt;div class=&quot;app&quot;&gt;</div><div class="line">            &lt;counter&gt;&lt;/counter&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">    `</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>通过这种<strong>注入</strong>机制，就能在子组件<code>Counter</code>通过<code>this.$store</code>访问：<br><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">// Counter 组件</div><div class="line">const Counter = &#123;</div><div class="line">    template: `&lt;div&gt;&#123;&#123; count &#125;&#125;&lt;/div&gt;`,</div><div class="line">    computed: &#123;</div><div class="line">        count () &#123;</div><div class="line">            return this.$store.state.count</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="mapState函数"><a href="#mapState函数" class="headerlink" title="mapState函数"></a>mapState函数</h3><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">computed: &#123;</div><div class="line">    count () &#123;</div><div class="line">        return this.$store.state.count</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这样通过<code>count</code>计算属性获取同名<code>state.count</code>属性，是不是显得太重复了，我们可以使用<code>mapState</code>函数简化这个过程。<br><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">import &#123; mapState &#125; from &apos;vuex&apos;;</div><div class="line"></div><div class="line">export default &#123;</div><div class="line">    computed: mapState (&#123;</div><div class="line">        count: state =&gt; state.count,</div><div class="line">        countAlias: &apos;count&apos;,    // 别名 `count` 等价于 state =&gt; state.count</div><div class="line">    &#125;)</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>还有更简单的使用方法：<br><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">computed: mapState([</div><div class="line">  // 映射 this.count 为 store.state.count</div><div class="line">  &apos;count&apos;</div><div class="line">])</div></pre></td></tr></table></figure></p>
<h3 id="Getters对象"><a href="#Getters对象" class="headerlink" title="Getters对象"></a>Getters对象</h3><p>如果我们需要对<code>state</code>对象进行做处理计算，如下：<br><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">computed: &#123;</div><div class="line">    doneTodosCount () &#123;</div><div class="line">        return this.$store.state.todos.filter(todo =&gt; todo.done).length</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>如果多个组件都要进行这样的处理，那么就要在多个组件中复制该函数。这样是很没有效率的事情，当这个处理过程更改了，还有在多个组件中进行同样的更改，这就更加不易于维护。</p>
<p>Vuex中<code>getters</code>对象，可以方便我们在<code>store</code>中做集中的处理。Getters接受<code>state</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">const store = new Vuex.Store(&#123;</div><div class="line">  state: &#123;</div><div class="line">    todos: [</div><div class="line">      &#123; id: 1, text: &apos;...&apos;, done: true &#125;,</div><div class="line">      &#123; id: 2, text: &apos;...&apos;, done: false &#125;</div><div class="line">    ]</div><div class="line">  &#125;,</div><div class="line">  getters: &#123;</div><div class="line">    doneTodos: state =&gt; &#123;</div><div class="line">      return state.todos.filter(todo =&gt; todo.done)</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p><strong>在Vue中通过<code>store.getters</code>对象调用。</strong><br><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">computed: &#123;</div><div class="line">  doneTodos () &#123;</div><div class="line">    return this.$store.getters.doneTodos</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>Getter也可以接受其他<strong>getters</strong>作为第二个参数：<br><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">getters: &#123;</div><div class="line">  doneTodos: state =&gt; &#123;</div><div class="line">      return state.todos.filter(todo =&gt; todo.done)</div><div class="line">  &#125;,</div><div class="line">  doneTodosCount: (state, getters) =&gt; &#123;</div><div class="line">    return getters.doneTodos.length</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="mapGetters辅助函数"><a href="#mapGetters辅助函数" class="headerlink" title="mapGetters辅助函数"></a>mapGetters辅助函数</h3><p>与<code>mapState</code>类似，都能达到简化代码的效果。<code>mapGetters</code>辅助函数仅仅是将store中的getters映射到局部计算属性：<br><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">import &#123; mapGetters &#125; from &apos;vuex&apos;</div><div class="line"></div><div class="line">export default &#123;</div><div class="line">  // ...</div><div class="line">  computed: &#123;</div><div class="line">    // 使用对象展开运算符将 getters 混入 computed 对象中</div><div class="line">    ...mapGetters([</div><div class="line">      &apos;doneTodosCount&apos;,</div><div class="line">      &apos;anotherGetter&apos;,</div><div class="line">      // ...</div><div class="line">    ])</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></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></pre></td><td class="code"><pre><div class="line">computed: mapGetters([</div><div class="line">      &apos;doneTodosCount&apos;,</div><div class="line">      &apos;anotherGetter&apos;,</div><div class="line">      // ...</div><div class="line">    ])</div></pre></td></tr></table></figure>
<p>所以在Vue的<code>computed</code>计算属性中会存在两种辅助函数：<br><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">import &#123; mapState, mapGetters &#125; form &apos;vuex&apos;;</div><div class="line"></div><div class="line">export default &#123;</div><div class="line">    // ...</div><div class="line">    computed: &#123;</div><div class="line">        mapState(&#123; ... &#125;),</div><div class="line">        mapGetter(&#123; ... &#125;)</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="Mutations"><a href="#Mutations" class="headerlink" title="Mutations"></a>Mutations</h3><p>之前也说过了，更改Vuex的store中的状态的唯一方法就是<code>mutations</code>。</p>
<p>每一个<code>mutation</code>都有一个<strong>事件类型</strong><code>type</code>和一个<strong>回调函数</strong><code>handler</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></pre></td><td class="code"><pre><div class="line">const store = new Vuex.Store(&#123;</div><div class="line">  state: &#123;</div><div class="line">    count: 1</div><div class="line">  &#125;,</div><div class="line">  mutations: &#123;</div><div class="line">    increment (state) &#123;</div><div class="line">      // 变更状态</div><div class="line">      state.count++</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>调用<code>mutation</code>，需要通过<code>store.commit</code>方法调用<code>mutation type</code>：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">store.commit(&apos;increment&apos;)</div></pre></td></tr></table></figure></p>
<h4 id="Payload-提交载荷"><a href="#Payload-提交载荷" class="headerlink" title="Payload 提交载荷"></a>Payload 提交载荷</h4><p>也可以向<code>store.commit</code>传入第二参数，也就是mutation的<code>payload</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></pre></td><td class="code"><pre><div class="line">mutaion: &#123;</div><div class="line">    increment (state, n) &#123;</div><div class="line">        state.count += n;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">store.commit(&apos;increment&apos;, 10);</div></pre></td></tr></table></figure>
<p>单单传入一个<code>n</code>，可能并不能满足我们的业务需要，这时候我们可以选择传入一个<code>payload</code>对象：<br><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">mutation: &#123;</div><div class="line">    increment (state, payload) &#123;</div><div class="line">        state.totalPrice += payload.price + payload.count;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">store.commit(&#123;</div><div class="line">    type: &apos;increment&apos;,</div><div class="line">    price: 10,</div><div class="line">    count: 8</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<h4 id="mapMutations函数"><a href="#mapMutations函数" class="headerlink" title="mapMutations函数"></a>mapMutations函数</h4><p>不例外，mutations也有映射函数<code>mapMutations</code>，帮助我们简化代码，使用<code>mapMutations</code>辅助函数将组件中的<code>methods</code>映射为<code>store.commit</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">import &#123; mapMutations &#125; from &apos;vuex&apos;</div><div class="line"></div><div class="line">export default &#123;</div><div class="line">  // ...</div><div class="line">  methods: &#123;</div><div class="line">    ...mapMutations([</div><div class="line">      &apos;increment&apos; // 映射 this.increment() 为 this.$store.commit(&apos;increment&apos;)</div><div class="line">    ]),</div><div class="line">    ...mapMutations(&#123;</div><div class="line">      add: &apos;increment&apos; // 映射 this.add() 为 this.$store.commit(&apos;increment&apos;)</div><div class="line">    &#125;)</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><strong>注</strong> Mutations必须是同步函数。</p>
<p>如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要<code>Actions</code>了。</p>
<h3 id="Aciton"><a href="#Aciton" class="headerlink" title="Aciton"></a>Aciton</h3><p>相信看完之前的Vuex的内容，你就已经入门了。那么<strong>Action</strong>就自己进行学习吧（Action有点复杂，我还需要时间消化）。</p>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>上个月看Vuex还是一头雾水，现在看来Vuex也是很容易理解的。</p>
<p>学习一门新技术最重要的就是实践，单单看教程和demo是远远不够的。</p>
<p>前端路途漫漫，共勉。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;本文基本上是&lt;a href=&quot;http://vuex.vuejs.org/zh-cn/intro.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;官方教程&lt;/a&gt;的盗版，用通俗易懂的文字讲解&lt;strong&gt;Vuex&lt;/strong&gt;，也对原文内容有删减。&lt;/p&gt;
&lt;p&gt;如果你对以上声明不介意，那么就可以继续看本文，希望对你有所帮助。&lt;/p&gt;
    
    </summary>
    
    
      <category term="Vue Vuex" scheme="https://yeaseonzhang.github.io/tags/Vue-Vuex/"/>
    
  </entry>
  
  <entry>
    <title>微信浏览器Bug</title>
    <link href="https://yeaseonzhang.github.io/2017/03/06/%E5%BE%AE%E4%BF%A1%E6%B5%8F%E8%A7%88%E5%99%A8Bug/"/>
    <id>https://yeaseonzhang.github.io/2017/03/06/微信浏览器Bug/</id>
    <published>2017-03-06T10:19:13.000Z</published>
    <updated>2017-03-17T16:22:05.492Z</updated>
    
    <content type="html"><![CDATA[<p>不是一个笑话，微信浏览器真的有Bug。</p>
<p>一个我觉得不应该出Bug的地方，它居然有<strong>Bug</strong>，真的很坑。</p>
<a id="more"></a>
<h3 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h3><p>在微信浏览器中做上传文件的功能，发现iOS微信浏览器正常工作，但是Android微信浏览器<code>input[file]</code>不能触发<code>change</code>事件。</p>
<h3 id="思考"><a href="#思考" class="headerlink" title="思考"></a>思考</h3><p>出于“自省”，我觉得是我代码写的有问题，我是使用<strong>Vue2</strong>调用的<code>change</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">&lt;input type=&quot;file&quot; accept=&quot;*/*&quot; name=&quot;file&quot; @change=&quot;fileChange()&quot;/&gt;</div></pre></td></tr></table></figure>
<p>第一反应就是，微信内置浏览器不支持<strong>Vue2</strong>的<code>@change</code>事件。</p>
<p>然后我就通过原生JS的写法监听<code>change</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">document.getElementsByName(&apos;file&apos;)[0].addEventListener(&apos;change&apos;, fileChange);</div></pre></td></tr></table></figure>
<p>这样修改之后还是不能触发<code>change</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">&lt;input type=&quot;file&quot; accept=&quot;*/*&quot; name=&quot;file&quot; onchange=&quot;fileChange()&quot;/&gt;</div></pre></td></tr></table></figure>
<p>不出所料，这样写还是没什么效果。</p>
<p>之后就是疯狂的<strong>Google</strong>，发现也有人遇到类似的问题，但是没有给出实质性的解决方案。</p>
<h3 id="转机"><a href="#转机" class="headerlink" title="转机"></a>转机</h3><p>发现知乎上有关于<a href="https://www.zhihu.com/question/21452742" target="_blank" rel="external">微信内置的浏览器如何上传文件？</a>的讨论。</p>
<p>也在其中找到了根本的解决原因。</p>
<img src="/2017/03/06/微信浏览器Bug/zhihu.png" alt="知乎" title="知乎">
<p>这位兄台说，<code>accept=&quot;*/*&quot;</code>上传图片，在<strong>6.3.30</strong>版本不能触发<code>change</code>事件了，证明之前是可行。</p>
<p>微信浏览器团队在升级中引入了<strong>Bug</strong>，从<em>2016-11-14</em>至今也没修复。</p>
<p>然后我就将我的<code>accept</code>更改为<code>accept=&quot;image/*&quot;</code>果然就可行，鉴定是<strong>Bug</strong>无误。</p>
<p>但是我不仅要上传图片，任意格式都要支持啊，我果断把<code>accept</code>属性去掉了，测试居然所有类型都能支持上传了。</p>
<p>当初为什么要手贱写上<code>accept</code>属性，不然就不会搞到崩溃。</p>
<p>可是，仔细想想如果没有遇到这个<strong>Bug</strong>，也不会了解到微信内置浏览器(X5内核)也会出现这种想不到的<strong>Bug</strong>。</p>
<h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p>谁的程序都会出错，遇到问题就应该一个个的排除，总会找到解决问题的办法。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;不是一个笑话，微信浏览器真的有Bug。&lt;/p&gt;
&lt;p&gt;一个我觉得不应该出Bug的地方，它居然有&lt;strong&gt;Bug&lt;/strong&gt;，真的很坑。&lt;/p&gt;
    
    </summary>
    
    
      <category term="微信 input change" scheme="https://yeaseonzhang.github.io/tags/%E5%BE%AE%E4%BF%A1-input-change/"/>
    
  </entry>
  
  <entry>
    <title>History API 使用指北</title>
    <link href="https://yeaseonzhang.github.io/2017/03/03/History-API-%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8C%97/"/>
    <id>https://yeaseonzhang.github.io/2017/03/03/History-API-使用指北/</id>
    <published>2017-03-03T09:54:22.000Z</published>
    <updated>2017-03-17T16:22:05.484Z</updated>
    
    <content type="html"><![CDATA[<img src="/2017/03/03/History-API-使用指北/html5-history.png" alt="History API" title="History API">
<p>HTML5 History API，基本上是为了SPA(单页应用)而生。</p>
<p>History API能够在不刷新页面的情况下，通过和<code>url</code>匹配历史堆栈中的数据取出来，这样就能大大减少数据请求，提高用户体验。</p>
<p>其实说实话，能不能提高用户体验，我不知道；在历史记录中切换（前进、后退）真的是如丝般顺滑。</p>
<a id="more"></a>
<h3 id="History-API-简介"><a href="#History-API-简介" class="headerlink" title="History API 简介"></a>History API 简介</h3><p>在浏览器环境下，我们可以通过<code>window.history</code>访问我们的浏览器访问历史。<br><img src="/2017/03/03/History-API-使用指北/console.png" alt="console.png" title=""><br>可能说的有点问题，你只能得到三个值<code>length</code>,<code>scrollRestoration</code>和<code>state</code>。其中只有<code>state</code>的值是我们需要的，接下来会提到。</p>
<h4 id="back"><a href="#back" class="headerlink" title="back()"></a><code>back()</code></h4><p><code>back()</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">window.history.back();</div></pre></td></tr></table></figure>
<h4 id="forward"><a href="#forward" class="headerlink" title="forward()"></a><code>forward()</code></h4><p><code>forward()</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">window.history.forward();</div></pre></td></tr></table></figure>
<h4 id="go-n"><a href="#go-n" class="headerlink" title="go(n)"></a><code>go(n)</code></h4><p><code>go(n)</code>方法允许你在历史<strong>session</strong>前进或者后退<code>n</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">// Go back two entries.</div><div class="line">window.history.go(-2);</div><div class="line"></div><div class="line">// Go forward 3 entries.</div><div class="line">window.history.go(3);</div></pre></td></tr></table></figure>
<h4 id="length"><a href="#length" class="headerlink" title="length"></a><code>length</code></h4><p>就是我们上文在浏览器得到的<code>length</code>属性。</p>
<p>下面就是我们的重头戏，<strong>HTML5 History API</strong>，上面的属性方法只是简单的热身，你可能不需要热身。</p>
<h3 id="HTML5-History-API"><a href="#HTML5-History-API" class="headerlink" title="HTML5 History API"></a>HTML5 History API</h3><p>HTML5 History API包含两个方法和一个事件。</p>
<ul>
<li><code>pushState()</code></li>
<li><code>replaceState()</code></li>
<li><code>popstate</code></li>
</ul>
<p>在详细介绍之前，我们先来看看各个浏览器对于HTML5 History API支持情况。</p>
<img src="/2017/03/03/History-API-使用指北/caniuse.png" alt="caniuse.com" title="caniuse.com">
<p>可以说现在主流的浏览器对于HTML5 History API支持都是很好的，不过也要考虑向下兼容。</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">if (!!history.pushState) &#123;</div><div class="line">    // support</div><div class="line">&#125; else &#123;</div><div class="line">    // dont support</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="pushState"><a href="#pushState" class="headerlink" title="pushState()"></a><code>pushState()</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">pushState(state, title, url)</div></pre></td></tr></table></figure>
<ul>
<li><code>state</code>: 传递给<code>history.state</code></li>
<li><code>title</code>: 似乎浏览器还没有很好支持，传<code>null</code>就好</li>
<li><code>url</code>: 可选，这个参数会改变你的浏览器<code>url</code></li>
</ul>
<p>这个方法是在浏览器堆栈历史中<code>push</code>一条新的数据，然后将指针指向这条数据。</p>
<h4 id="replaceState"><a href="#replaceState" class="headerlink" title="replaceState()"></a><code>replaceState()</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">replaceState(state, title, url)</div></pre></td></tr></table></figure>
<p><code>replace()</code>方法与<code>pushState()</code>方法类似，主要是能够替换更新<code>pushState()</code>的<code>state</code>数据。</p>
<p>参数描述详见<code>pushState()</code>的描述。</p>
<h4 id="popstate事件"><a href="#popstate事件" class="headerlink" title="popstate事件"></a><code>popstate</code>事件</h4><p>当用户点击浏览器的前进/后退按钮，<code>popstate</code>事件会被调用。<br><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">window.addEventListener(&apos;popstate&apos;, function (event) &#123;</div><div class="line">    // update the page content</div><div class="line">&#125;);</div><div class="line"></div><div class="line">// or </div><div class="line">window.onpopstate = function (event) &#123;</div><div class="line">    // update the page content</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>以上就把<strong>History API</strong>简略介绍了一下，详细说明请访问<a href="https://developer.mozilla.org/en-US/docs/Web/API/History" target="_blank" rel="external">MDN</a>。</p>
<h3 id="手把手实战"><a href="#手把手实战" class="headerlink" title="手把手实战"></a>手把手实战</h3><h4 id="需求分析"><a href="#需求分析" class="headerlink" title="需求分析"></a>需求分析</h4><p>网上也不乏介绍H5 History API应用的文章，大概也都是比较简单的Demo。</p>
<img src="/2017/03/03/History-API-使用指北/demo.png" alt="http://html5demos.com/history" title="http://html5demos.com/history">
<p>点击链接<strong>first、second、third..</strong>,<code>url</code>会改变为<code>http://html5demos.com/history#fitst</code>,<code>http://html5demos.com/history#second</code>…</p>
<p>获取不同<code>#first</code>,<code>#second</code>的数据，渲染页面中的数据。具体实现<a href="http://blog.teamtreehouse.com/getting-started-with-the-history-api" target="_blank" rel="external">源码</a>。</p>
<p>本文，我想介绍的不是这种demo，而是比较实际的项目开发。</p>
<p>实现一个文件系统的浏览页面，通过<code>url</code>哈希值<code>#...</code>记录文件夹的路径。</p>
<p>例如，<code>www.demo.com/filesystem.html#abc/</code>就是根目录下<code>abc</code>文件夹；<code>www.demo.com/filesystem.html#abc/def/</code>代表<code>abc</code>文件夹下的<code>def</code>文件夹。</p>
<img src="/2017/03/03/History-API-使用指北/fs.jpg" alt="file system" title="file system">
<p>如上图，该目录下有文件和文件夹，点击<strong>文件</strong>会直接在浏览器打开该文件或者下载，点击<strong>文件夹</strong>会进入该文件夹，页面显示该文件夹的内容。</p>
<p>这样就需要我们把<code>url</code>的<code>hash</code>值动态改变，然后根据<code>hash</code>值确定所在文件路径向后台获取资源。</p>
<h4 id="前后端接口API"><a href="#前后端接口API" class="headerlink" title="前后端接口API"></a>前后端接口API</h4><h5 id="显示目录"><a href="#显示目录" class="headerlink" title="显示目录"></a>显示目录</h5><p>请求：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">GET /api/v1/fileproxy/pub/abc/ HTTP/1.1</div></pre></td></tr></table></figure></p>
<p>响应：<br><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">HTTP/1.1 200 OK</div><div class="line">Content-Type: application/json; charset=utf-8</div><div class="line">&#123;</div><div class="line">    &quot;error&quot;: 0,</div><div class="line">    &quot;errormsg&quot;: &quot;success&quot;,</div><div class="line">    &quot;data&quot;: [</div><div class="line">        &#123;</div><div class="line">            &quot;name&quot;: &quot;a.txt&quot;,</div><div class="line">            &quot;size&quot;: 1234,</div><div class="line">            &quot;time&quot;: 1235153531,</div><div class="line">            &quot;isdir&quot;: false,</div><div class="line">        &#125;,</div><div class="line">        &#123;</div><div class="line">            &quot;name&quot;: &quot;a.txt&quot;,</div><div class="line">            &quot;size&quot;: 1234,</div><div class="line">            &quot;time&quot;: 1235153531,</div><div class="line">            &quot;isdir&quot;: false,</div><div class="line">        &#125;</div><div class="line">    ]</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h5 id="打开-下载文件"><a href="#打开-下载文件" class="headerlink" title="打开/下载文件"></a>打开/下载文件</h5><p>请求：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">GET /api/v1/fileproxy/pub/abc/a.txt HTTP/1.1</div></pre></td></tr></table></figure></p>
<p>从后端获取到的文件信息包括<code>name</code>文件(夹)名,<code>size</code>大小,<code>time</code>修改时间,<code>isdir</code>是否是文件夹。</p>
<h4 id="流程"><a href="#流程" class="headerlink" title="流程"></a>流程</h4><ul>
<li><code>initGetfile()</code></li>
<li><code>openDir(str)</code></li>
<li><code>window.onpopstate</code></li>
</ul>
<p><code>initGetfile()</code>函数，首次进入或者刷新页面自动执行该函数，渲染文件列表。</p>
<p><code>openDir(str)</code>函数，当点击文件夹时调用该函数，获取新的文件列表。</p>
<p><code>window.onpopstate</code>也就是<code>popstate</code>事件。</p>
<p>在没有使用<code>History API</code>时，是通过<code>hashchange</code>事件来触发文件列表的更新，这就导致每一次前进后退都会发起一次<code>ajax</code>请求，没有把之前请求过的数据进行缓存，影响用户体验。</p>
<blockquote>
<p>对了在此要声明一下，<code>psuhState()</code>和<code>replaceState()</code>不会触发<code>hashchange</code>事件</p>
</blockquote>
<p>怎么理解呢，就是当你通过<code>psuhState()</code>和<code>replaceState()</code>的第三个参数<code>url</code>对于hash值有更改的时候，也不会触发<code>hashchange</code>事件。</p>
<p><strong>Chrome 和 Safari浏览器在重载页面的时候会触发<code>popstate</code>事件，Firefox浏览器不会。</strong></p>
<h4 id="重头戏"><a href="#重头戏" class="headerlink" title="重头戏"></a>重头戏</h4><p>下面将会贴上我的代码，使用Vue2 和 <a href="https://github.com/mzabriskie/axios" target="_blank" rel="external">axios</a>实现。</p>
<h5 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h5><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></pre></td><td class="code"><pre><div class="line">&lt;div class=&quot;file-list&quot;&gt;</div><div class="line">    &lt;div class=&quot;weui-cells&quot;&gt;</div><div class="line">        &lt;a v-if=&quot;fileList.length&quot; v-for=&quot;item in fileList&quot; href=&quot;javascript:;&quot; class=&quot;weui-cell weui-cell_access&quot;&gt;</div><div class="line">                &lt;!-- Dir --&gt;</div><div class="line">                &lt;div v-if=&quot;item.isdir&quot;&gt;</div><div class="line">                    &lt;div class=&quot;weui-cell__hd&quot;&gt;</div><div class="line">                        &lt;span class=&quot;icon-size an-folder&quot;&gt;&lt;/span&gt;</div><div class="line">                    &lt;/div&gt; </div><div class="line">                    &lt;div class=&quot;weui-cell__bd&quot; @click=&quot;openDir(item)&quot;&gt;</div><div class="line">                        &lt;p&gt;&#123;&#123; item.name &#125;&#125;&lt;/p&gt;</div><div class="line">                    &lt;/div&gt;</div><div class="line">                &lt;/div&gt;</div><div class="line">                &lt;!-- File --&gt;</div><div class="line">                &lt;div v-else&gt;</div><div class="line">                    &lt;div v-else class=&quot;weui-cell__hd&quot;&gt;</div><div class="line">                        &lt;span class=&quot;icon-size an-file&quot;&gt;&lt;/span&gt;</div><div class="line">                    &lt;/div&gt;</div><div class="line">                    &lt;div class=&quot;weui-cell__bd&quot; @click=&quot;openFile(item)&quot;&gt;</div><div class="line">                        &lt;p&gt;&#123;&#123; item.name &#125;&#125;&lt;/p&gt;</div><div class="line">                    &lt;/div&gt;</div><div class="line">                </div><div class="line">                &lt;/div&gt;</div><div class="line">        &lt;/a&gt;</div><div class="line">        &lt;a v-if=&quot;!fileList.length&quot; class=&quot;weui-cell weui-cell_access&quot; href=&quot;javascript:;&quot;&gt; </div><div class="line">            &lt;div class=&quot;weui-cell__bd&quot;&gt; </div><div class="line">                    &lt;p&gt;No such file or directory&lt;/p&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/a&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<p>将文件夹和文件分成两类进行渲染，绑定不同的点击函数，并传递参数为文件(夹)名，前面的前后端API也提示我们是通过<code>name</code>进行请求。</p>
<h5 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h5><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></pre></td><td class="code"><pre><div class="line">(function (exports) &#123;</div><div class="line">    exports.app = new Vue(&#123;</div><div class="line">        el: &apos;.file-list&apos;,</div><div class="line"></div><div class="line">        data: &#123;</div><div class="line">            haveFile: true,</div><div class="line">            fileList: [],</div><div class="line">        &#125;,</div><div class="line"></div><div class="line">        mounted: fucntion () &#123;  // 挂载之后，自动执行</div><div class="line">            this.$nextTick(function () &#123;</div><div class="line">                this.initGetfile();</div><div class="line">            &#125;)</div><div class="line">        &#125;，</div><div class="line"></div><div class="line">        methods: &#123;</div><div class="line">            initGetfile: function () &#123;</div><div class="line">                var _this = this;</div><div class="line">                var hash = _this.getHash();</div><div class="line">                var url = &apos;/api/v1/fileproxy/&apos; + hash;</div><div class="line">                axios.get(url)</div><div class="line">                    .then(function (res)&#123;</div><div class="line">                        _this.fileList = res.data.data;</div><div class="line">                        </div><div class="line">                        // replaceState()</div><div class="line">                        history.replaceState(_this.fileList, null);</div><div class="line"></div><div class="line">                        if (!res.data.data.length) &#123;</div><div class="line">                            _this.haveFile = false;</div><div class="line">                        &#125; else &#123;</div><div class="line">                            _this.haveFile = true;</div><div class="line">                        &#125;</div><div class="line">                    &#125;)</div><div class="line">            &#125;,</div><div class="line"></div><div class="line">            openDir: function (item) &#123;</div><div class="line">                var _this = this;</div><div class="line">                _this.loadFile = true;</div><div class="line">                var hash = _this.getHash();</div><div class="line">                var url = &apos;/api/v1/fileproxy/-/&apos; + hash + item.name +&apos;/&apos;;</div><div class="line"></div><div class="line">                axios.get(url)</div><div class="line">                    .then(function (res) &#123;</div><div class="line">                        _this.fileList = res.data.data;</div><div class="line">                       </div><div class="line">                        _this.loadFile = false;</div><div class="line"></div><div class="line">                        var newUrl = window.location.href + item.name + &apos;/&apos;;</div><div class="line"></div><div class="line">                        // pushState()</div><div class="line">                        history.pushState(_this.fileList,null, newUrl);</div><div class="line"></div><div class="line">                        if (!res.data.data.length) &#123;</div><div class="line">                            _this.haveFile = false;</div><div class="line">                        &#125; else &#123;</div><div class="line">                            _this.haveFile = true;</div><div class="line">                        &#125;</div><div class="line">                    &#125;);</div><div class="line">            &#125;,</div><div class="line"></div><div class="line">            openFile: function (item) &#123;</div><div class="line">                var _this = this;</div><div class="line">                var hash = _this.getHash();</div><div class="line">                var url = &apos;/api/v1/fileproxy/-/&apos; + hash + item.name;</div><div class="line">                window.open(url);</div><div class="line">            &#125;,</div><div class="line"></div><div class="line">            getHash: function () &#123;</div><div class="line">                var hash = window.location.hash.substr(1);</div><div class="line">                if (hash.substr(-1) != &apos;/&apos;) &#123;</div><div class="line">                    hash += &apos;/&apos;;</div><div class="line">                &#125;</div><div class="line">                return hash;</div><div class="line">            &#125;,</div><div class="line"></div><div class="line">        &#125;</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    window.onpopstate = function (e) &#123;</div><div class="line">        console.log(&apos;pop state&apos;);</div><div class="line">        console.log(&apos;state&apos;, JSON.stringify(e.state));</div><div class="line">        if (e.state != null) &#123;</div><div class="line">            app.fileList = e.state;</div><div class="line">        &#125; else &#123;</div><div class="line">            window.location.reload();</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;)(window);</div></pre></td></tr></table></figure>
<p>以上就是我完成基本功能的源码，添加<strong>History API</strong>到项目中并没有做太多改动：</p>
<ol>
<li><p>增加<code>pushState()</code>和<code>repalceState()</code>函数</p>
</li>
<li><p>替换原有的<code>hashchange</code>事件为<code>popstate</code>事件。</p>
</li>
</ol>
<h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p>本没有对源码做过多的分析，因为可能需求不一样采取的处理方法也不一样，我只是提供一个<code>#abc/def...</code>这种hash值比较复杂需求的一种实现。</p>
<p>希望能够对你有所启发，也是现学现卖，如有不妥之处，望指正。</p>
]]></content>
    
    <summary type="html">
    
      &lt;img src=&quot;/2017/03/03/History-API-使用指北/html5-history.png&quot; alt=&quot;History API&quot; title=&quot;History API&quot;&gt;
&lt;p&gt;HTML5 History API，基本上是为了SPA(单页应用)而生。&lt;/p&gt;
&lt;p&gt;History API能够在不刷新页面的情况下，通过和&lt;code&gt;url&lt;/code&gt;匹配历史堆栈中的数据取出来，这样就能大大减少数据请求，提高用户体验。&lt;/p&gt;
&lt;p&gt;其实说实话，能不能提高用户体验，我不知道；在历史记录中切换（前进、后退）真的是如丝般顺滑。&lt;/p&gt;
    
    </summary>
    
    
      <category term="HTML5 History" scheme="https://yeaseonzhang.github.io/tags/HTML5-History/"/>
    
  </entry>
  
  <entry>
    <title>浅谈JavaScript--声明提升</title>
    <link href="https://yeaseonzhang.github.io/2017/02/28/%E6%B5%85%E8%B0%88JavaScript-%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/"/>
    <id>https://yeaseonzhang.github.io/2017/02/28/浅谈JavaScript-声明提升/</id>
    <published>2017-02-28T12:06:37.000Z</published>
    <updated>2017-10-12T15:31:47.962Z</updated>
    
    <content type="html"><![CDATA[<p><strong>JavaScript</strong>是一种动态语言，不同于<strong>C</strong>、<strong>Java</strong>等静态语言先编译后执行，</p>
<p>所以代码中的执行顺序并不像你看到的那样执行，有个词你需要知道<strong>声明提升</strong>，</p>
<p>下面我们就来聊聊声明提升。</p>
<a id="more"></a>
<h3 id="抛砖"><a href="#抛砖" class="headerlink" title="抛砖"></a>抛砖</h3><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">a = 1;</div><div class="line">var a;</div><div class="line">console.log(a); // 1</div></pre></td></tr></table></figure>
<p>结果是<code>1</code>，不是<code>undefined</code>。虽然在<code>var a;</code>在<code>a = 1;</code>后面，但是存在声明提升，等价于：<br><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">var a;</div><div class="line">a = 1;</div><div class="line">console.log(a);</div></pre></td></tr></table></figure></p>
<h3 id="再抛一块"><a href="#再抛一块" class="headerlink" title="再抛一块"></a>再抛一块</h3><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">console.log(a); // undefined</div><div class="line">var a = 1;</div></pre></td></tr></table></figure>
<p>为什么这次结果就是<code>undefined</code>了，声明同样提升了，但是。。。等下再告诉你，上面的代码等价于：<br><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">var a;</div><div class="line">console.log(a); // undefined</div><div class="line">a = 2;</div></pre></td></tr></table></figure></p>
<p>也就是说声明虽然提升了，但是赋值操作（执行）被留在了本身的位置。</p>
<h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><p>引擎在对解释js的代码的时候，首先进行的是编译。<br>找到所有的声明，并用合适的作用域把它们关联起来。</p>
<p>so，<code>var a = 2</code>，js会将其看成两个声明<code>var a; a = 2;</code></p>
<h3 id="第三块砖"><a href="#第三块砖" class="headerlink" title="第三块砖"></a>第三块砖</h3><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">foo();</div><div class="line"></div><div class="line">function foo() &#123;</div><div class="line">  console.log(a); // undefined</div><div class="line">  var a = 2;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个就很好理解了吧，那么你回答下一个<br><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">foo();</div><div class="line"></div><div class="line">var foo = function bar() &#123;</div><div class="line">  console.log(a);</div><div class="line">  var a = 2;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>先别说你的答案，估计你也猜错了，不是<code>undefined</code>也不是<code>2</code>；</p>
<p>因为还没执行到<code>bar()</code>，<code>foo()</code>就已经报错了<code>TypeError</code>，函数声明可以提升，但是函数表达式的声明不能提升。</p>
<p>即使是具名函数表达式，在名称标识符在赋值之前也无法在作用域中使用：<br><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">foo();	// TypeError;</div><div class="line">bar();	// ReferenceError;</div><div class="line"></div><div class="line">var foo = function bar() &#123;</div><div class="line">  console.log(a);</div><div class="line">  var a = 2;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>其实经过提升之后，代码变成了：<br><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">var foo;</div><div class="line"></div><div class="line">foo();	// TypeError;</div><div class="line">bar();	// ReferenceError;</div><div class="line"></div><div class="line">foo = function () &#123;</div><div class="line">  var bar = function () &#123;</div><div class="line">    console.log(a);</div><div class="line">    var a = 2;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="优先原则"><a href="#优先原则" class="headerlink" title="优先原则"></a>优先原则</h3><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">foo();	// 1</div><div class="line"></div><div class="line">var foo;</div><div class="line"></div><div class="line">function foo () &#123;</div><div class="line">  console.log(1);</div><div class="line">&#125;</div><div class="line"></div><div class="line">foo = function () &#123;</div><div class="line">  console.log(2);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>输出的是1，而不是2。<br><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">var foo;</div><div class="line">function foo () &#123;...&#125;</div></pre></td></tr></table></figure></p>
<p>这两个都是声明，但是在声明中函数会首先被提升(<code>var foo</code>同时被忽略了)。也就变成了：<br><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 foo() &#123;</div><div class="line">  console.log(1);</div><div class="line">&#125;</div><div class="line">foo();	// 1</div><div class="line"></div><div class="line">foo = function () &#123;</div><div class="line">  console.log(2);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p><strong>注</strong>： 重复声明，后面函数声明会覆盖前面的。<br><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">foo();	// 3</div><div class="line"></div><div class="line">function foo() &#123;</div><div class="line">  console.log(1);</div><div class="line">&#125;</div><div class="line"></div><div class="line">foo = function () &#123;</div><div class="line">  console.log(2);</div><div class="line">&#125;</div><div class="line"></div><div class="line">function foo() &#123;</div><div class="line">  console.log(3);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>为了避免踩坑，我们要做到<strong>先声明，避免重复声明</strong>。</p>
<blockquote>
<p>参考：《你不知道的JavaScript》</p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;strong&gt;JavaScript&lt;/strong&gt;是一种动态语言，不同于&lt;strong&gt;C&lt;/strong&gt;、&lt;strong&gt;Java&lt;/strong&gt;等静态语言先编译后执行，&lt;/p&gt;
&lt;p&gt;所以代码中的执行顺序并不像你看到的那样执行，有个词你需要知道&lt;strong&gt;声明提升&lt;/strong&gt;，&lt;/p&gt;
&lt;p&gt;下面我们就来聊聊声明提升。&lt;/p&gt;
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://yeaseonzhang.github.io/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>移动端文件上传美化&amp;一键上传</title>
    <link href="https://yeaseonzhang.github.io/2017/02/27/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E7%BE%8E%E5%8C%96-%E4%B8%80%E9%94%AE%E4%B8%8A%E4%BC%A0/"/>
    <id>https://yeaseonzhang.github.io/2017/02/27/移动端文件上传美化-一键上传/</id>
    <published>2017-02-27T04:40:39.000Z</published>
    <updated>2017-02-27T14:57:56.098Z</updated>
    
    <content type="html"><![CDATA[<p>最近项目中文件系统需要适配移动端，发现很多PC端的交互在移动端显得很累赘。</p>
<p>下面就改造一下<strong>文件上传</strong>，让它变得更加适合移动端。</p>
<a id="more"></a>
<h3 id="PC端实现方案"><a href="#PC端实现方案" class="headerlink" title="PC端实现方案"></a>PC端实现方案</h3><p>就拿上传文件来说，之前在移动端是<strong>点击上传icon</strong>，弹出一个对话框选择文件，然后通过对话框的按钮进行上传。</p>
<img src="/2017/02/27/移动端文件上传美化-一键上传/1.png" alt="PC端" title="PC端">
<p>分解起来就是，选择文件和上传文件，其实是两步。但是在移动端，我们点击<code>input[file]</code>会调用原生的文件系统(iOS是选择照片/拍照上传)，<br>百度云的做法是在调用原生的文件系统，选择完要上传的文件，无需用户点击<strong>上传</strong>按钮直接上传。现在我们来学习下百度云的做法。</p>
<h3 id="美化input控件"><a href="#美化input控件" class="headerlink" title="美化input控件"></a>美化input控件</h3><p>在没有使用插件的原生<code>input[file]</code>是很难看的，上面的PC端上传文件是使用了<a href="https://github.com/kartik-v/bootstrap-fileinput" target="_blank" rel="external">file-input</a>组件，<br>所以我们自定义样式之后会显得比较好看。</p>
<img src="/2017/02/27/移动端文件上传美化-一键上传/2.png" alt="原生效果" title="原生效果">
<p>但是在移动端我们不使用弹框效果了，所以<code>input[file]</code>也就没必要美化，直接隐藏就好。通过上传按钮调用<code>input[file]</code><br><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">// HTML</div><div class="line">&lt;span class=&quot;upload&quot; onclick=&quot;chooseFile()&quot;&gt;&lt;/span&gt;</div><div class="line">&lt;input type=&quot;file&quot; accept=&quot;*/*&quot; name=&quot;uploadFile&quot; style=&quot;display: none; opacity: 0&quot;/&gt;</div><div class="line"></div><div class="line">// JS</div><div class="line">function chooseFile() &#123;</div><div class="line">    var fileObj = document.getElementsByName(&apos;uploadFile&apos;)[0];</div><div class="line">    fileObj.click();</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>在上面的代码中，我们使用一个上传icon触发<code>input[file]</code>这样文件就选择完毕了</p>
<h3 id="一键上传"><a href="#一键上传" class="headerlink" title="一键上传"></a>一键上传</h3><p>现在文件选择完成了，我们发现没有办法<strong>上传文件</strong>了，因为<code>input[file]</code>已经被我们隐藏了。</p>
<p>让我们来转换一下思维方式，为什么还需要第二步上传操作，我们不能选择完成之后直接上传吗？事实证明百度云就是这么做的。</p>
<p><code>input[file]</code>也是一个普通的<code>input</code>，那我们就能使用它的<code>change</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><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></pre></td><td class="code"><pre><div class="line">// HTML</div><div class="line">&lt;span class=&quot;upload&quot; onclick=&quot;chooseFile()&quot;&gt;&lt;/span&gt;</div><div class="line">&lt;input type=&quot;file&quot; accept=&quot;*/*&quot; name=&quot;uploadFile&quot; onchange=&quot;uploadFile()&quot; style=&quot;display: none; opacity: 0&quot;/&gt;</div><div class="line"></div><div class="line">// JS</div><div class="line">function chooseFile() &#123;</div><div class="line">    var fileObj = document.getElementsByName(&apos;uploadFile&apos;)[0];</div><div class="line">    fileObj.click();</div><div class="line">&#125;</div><div class="line"></div><div class="line">function uploadFile() &#123;</div><div class="line">    var formData = new formData();</div><div class="line">    var fileObj = document.getElementsByName(&apos;uploadFile&apos;)[0].files[0];</div><div class="line">    formData.appenf(&apos;file&apos;, fileObj);</div><div class="line"></div><div class="line">    axios.post(url, formData)</div><div class="line">        .then(function (res) &#123;</div><div class="line">            // success</div><div class="line">        &#125;)</div><div class="line">        .catch(function () &#123;</div><div class="line">            // error</div><div class="line">        &#125;)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>为<code>input[file]</code>添加一个<code>change</code>事件，就能在我们选择完文件，自动调用相关函数进行上传。<br>在这里我没有使用原生的AJAX，我使用的是<a href="https://github.com/mzabriskie/axios" target="_blank" rel="external">axios</a>，感兴趣的话可以自行Google。</p>
<h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p>至此，我们就实现了一个简单移动端的上传文件，还有很多不足，会在后续工作中优化。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;最近项目中文件系统需要适配移动端，发现很多PC端的交互在移动端显得很累赘。&lt;/p&gt;
&lt;p&gt;下面就改造一下&lt;strong&gt;文件上传&lt;/strong&gt;，让它变得更加适合移动端。&lt;/p&gt;
    
    </summary>
    
    
      <category term="H5" scheme="https://yeaseonzhang.github.io/tags/H5/"/>
    
  </entry>
  
  <entry>
    <title>提高你开发效率的工具 -- BrowserSync</title>
    <link href="https://yeaseonzhang.github.io/2017/01/23/%E6%8F%90%E9%AB%98%E4%BD%A0%E5%BC%80%E5%8F%91%E6%95%88%E7%8E%87%E7%9A%84%E5%B7%A5%E5%85%B7-BrowserSync/"/>
    <id>https://yeaseonzhang.github.io/2017/01/23/提高你开发效率的工具-BrowserSync/</id>
    <published>2017-01-23T02:35:56.000Z</published>
    <updated>2017-02-27T14:57:56.098Z</updated>
    
    <content type="html"><![CDATA[<p><strong>Browser-Sync</strong>是一款前端实时可视化开发工具，之前老旧的开发环境需要修改完<code>code</code>，在浏览器按<strong>F5</strong>查看更新后的效果，这样一次不会有什么感觉繁琐，但是长时间的手动刷新页面，确实会浪费很多时间。</p>
<p>当你有了<strong>Browser-Sync</strong>之后，你的<strong>F5</strong>基本上可以退休了。</p>
<a id="more"></a>
<h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p><strong>Browser-Sync</strong>是一款基于<code>node</code>的模块，这样你就可以无视<strong>操作系统</strong>和<strong>浏览器</strong>，尽情使用<strong>Browser-Sync</strong>。<br><strong>Browser-Sync</strong>能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。</p>
<h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>因为<strong>Browser-Sync</strong>是基于<code>node</code>的模块,所以我们需要使用NPM来安装<strong>Browser-Sync</strong>。<br><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 -g browser-sync</div></pre></td></tr></table></figure></p>
<h3 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h3><p>用命令行工具进入你的项目目录下，建议进入需要监听的文件目录下，如果是监听根目录太浪费资源了。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">browser-sync start --server --files &quot;**&quot;</div></pre></td></tr></table></figure></p>
<p><code>**</code>是监听该目录任意文件，你也可以指定需要监听的文件名。</p>
<p>这样在浏览器访问<code>localhost:3000/*.html</code>就能实时在页面中响应你代码的变化。</p>
<p>访问<code>localhost:3001</code>,你就会感叹<code>Browser-Sync</code> <strong> It’s awesome !!! </strong></p>
<h3 id="详情"><a href="#详情" class="headerlink" title="详情"></a>详情</h3><p>详细说明请访问<a href="https://browsersync.io/" target="_blank" rel="external">官网</a>，配合<code>gulp</code>或者<code>grunt</code>使用更赞。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;strong&gt;Browser-Sync&lt;/strong&gt;是一款前端实时可视化开发工具，之前老旧的开发环境需要修改完&lt;code&gt;code&lt;/code&gt;，在浏览器按&lt;strong&gt;F5&lt;/strong&gt;查看更新后的效果，这样一次不会有什么感觉繁琐，但是长时间的手动刷新页面，确实会浪费很多时间。&lt;/p&gt;
&lt;p&gt;当你有了&lt;strong&gt;Browser-Sync&lt;/strong&gt;之后，你的&lt;strong&gt;F5&lt;/strong&gt;基本上可以退休了。&lt;/p&gt;
    
    </summary>
    
    
      <category term="前端工具 BrowserSync" scheme="https://yeaseonzhang.github.io/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7-BrowserSync/"/>
    
  </entry>
  
  <entry>
    <title>Lodash学习-Collection</title>
    <link href="https://yeaseonzhang.github.io/2017/01/18/Lodash%E5%AD%A6%E4%B9%A0-Collection/"/>
    <id>https://yeaseonzhang.github.io/2017/01/18/Lodash学习-Collection/</id>
    <published>2017-01-18T08:44:19.000Z</published>
    <updated>2017-10-12T13:49:54.283Z</updated>
    
    <content type="html"><![CDATA[<p>上篇文章，我们已经把关于Array部分的API学习了一遍，现在我们来开始下一篇<strong>Collection</strong>。</p>
<a id="more"></a>
<p>下列API的<strong><code>collection</code></strong>参数指代<code>Array | Object</code>两种类型。</p>
<h3 id="countBy"><a href="#countBy" class="headerlink" title="_.countBy"></a><code>_.countBy</code></h3><ul>
<li><code>_.countBy(collection, [iteratee=_.identity])</code></li>
</ul>
<p>创建一个<code>key-value</code>的对象，<code>key</code>是通过将<code>collection</code>按照<code>iteratee</code>规则迭代得到的，对应的<code>value</code>则是，这个<code>key</code>值出现了N次，<code>value</code>就是N。也就是迎合了API的<strong>count</strong>的意思。</p>
<p>例子：<br><figure class="highlight js"><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">_.countBy([<span class="number">6.1</span>, <span class="number">4.2</span>, <span class="number">6.3</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; &#123; '4': 1, '6': 2 &#125;</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.countBy([<span class="string">'one'</span>, <span class="string">'two'</span>, <span class="string">'three'</span>], <span class="string">'length'</span>);</div><div class="line"><span class="comment">// =&gt; &#123; '3': 2, '5': 1 &#125;</span></div></pre></td></tr></table></figure></p>
<p>解释第一个例子吧，<code>[6.1, 4.2, 6.3]</code>分别执行<code>Math.floor</code>得到<code>[6, 4, 6]</code>,其中<code>4</code>出现1次，<code>6</code>出现2次,所以结果是<code>{ &#39;4&#39;: 1, &#39;6&#39;: 2 }</code>。</p>
<h3 id="every"><a href="#every" class="headerlink" title="_.every"></a><code>_.every</code></h3><ul>
<li><code>_.every(collection, [predicate=_.identity])</code></li>
</ul>
<p>如果<code>collection</code>全部元素满足<code>predicate</code>条件，返回<code>true</code>；否则只要出现不满足的，就返回<code>false</code>。<code>predicate</code>调用三个参数<code>value, index, array</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.every([<span class="literal">true</span>, <span class="number">1</span>, <span class="literal">null</span>, <span class="string">'yes'</span>], <span class="built_in">Boolean</span>);</div><div class="line"><span class="comment">// =&gt; false</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'age'</span>: <span class="number">36</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'age'</span>: <span class="number">40</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.every(users, &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;);</div><div class="line"><span class="comment">// =&gt; false</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.every(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; true</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.every(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; false</span></div></pre></td></tr></table></figure></p>
<h3 id="filter"><a href="#filter" class="headerlink" title="_.filter"></a><code>_.filter</code></h3><ul>
<li><code>_.filter(collection, [predicate=_.identity])</code></li>
</ul>
<p>遍历<code>collection</code>全部元素，返回满足<code>predicate</code>条件的元素组成的新数组。<code>predicate</code>调用三个参数<code>value, index, array</code>。</p>
<p>例子:<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'age'</span>: <span class="number">36</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'age'</span>: <span class="number">40</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.filter(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> !o.active; &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['fred']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.filter(users, &#123; <span class="string">'age'</span>: <span class="number">36</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['barney']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.filter(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; objects for ['fred']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.filter(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; objects for ['barney']</span></div></pre></td></tr></table></figure></p>
<h3 id="find"><a href="#find" class="headerlink" title="_.find"></a><code>_.find</code></h3><ul>
<li><code>_.find(collection, [predicate=_.identity], [fromIndex=0])</code></li>
</ul>
<p>与上面<code>_.filter</code>不同的是<code>_.find</code>只返回第一个匹配的元素，可以通过<code>fromIndex</code>指定查找位置，默认<code>fromIndex=0</code>。如果没有匹配的，返回<code>undefined</code>。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>,  <span class="string">'age'</span>: <span class="number">36</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,    <span class="string">'age'</span>: <span class="number">40</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'age'</span>: <span class="number">1</span>,  <span class="string">'active'</span>: <span class="literal">true</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.find(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> o.age &lt; <span class="number">40</span>; &#125;);</div><div class="line"><span class="comment">// =&gt; object for 'barney'</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.find(users, &#123; <span class="string">'age'</span>: <span class="number">1</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;);</div><div class="line"><span class="comment">// =&gt; object for 'pebbles'</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.find(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; object for 'fred'</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.find(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; object for 'barney'</span></div></pre></td></tr></table></figure></p>
<h3 id="findLast"><a href="#findLast" class="headerlink" title="_.findLast"></a><code>_.findLast</code></h3><ul>
<li><code>_findLast(collection, [predicate=_.identity], [fromIndex=collection.length-1])</code></li>
</ul>
<p><code>_.findLast</code>与<code>_find</code>方法不同的是从右到左查找，<code>fromIndex</code>默认值<code>collection.length-1</code>。</p>
<p>例子:<br><figure class="highlight js"><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">_.findLast([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>], <span class="function"><span class="keyword">function</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> n % <span class="number">2</span> == <span class="number">1</span>;</div><div class="line">&#125;);</div><div class="line"><span class="comment">// =&gt; 3</span></div></pre></td></tr></table></figure></p>
<h3 id="flatMap"><a href="#flatMap" class="headerlink" title="_flatMap"></a><code>_flatMap</code></h3><ul>
<li><code>_.flatMap(collection, [iteratee=_.identity])</code></li>
</ul>
<p><code>collection</code>全部元素迭代执行<code>iteratee</code>，将得到的元素组合成一个<strong>flattened</strong>数组（我理解的就是变成N-1维数组），<code>iteratee</code>调用三个参数<code>value, index|key, collection</code>。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="function"><span class="keyword">function</span> <span class="title">duplicate</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> [n, n];</div><div class="line">&#125;</div><div class="line"></div><div class="line">_.flatMap([<span class="number">1</span>, <span class="number">2</span>], duplicate);</div><div class="line"><span class="comment">// =&gt; [1, 1, 2, 2]</span></div></pre></td></tr></table></figure></p>
<p>解释一下，<code>[1, 2]</code>调用<code>duplicate</code>得到<code>[[1, 1], [2, 2]]</code>，通过<code>_.flatMap</code>使其扁平化<code>[1, 1, 2, 2]</code>。</p>
<h3 id="flatMapDeep"><a href="#flatMapDeep" class="headerlink" title="_.flatMapDeep"></a><code>_.flatMapDeep</code></h3><ul>
<li><code>_.flatMapDeep(collection, [iteratee=_.identity])</code></li>
</ul>
<p>这个方法是<code>_.flatMap</code>的升级版，会把多维数组变成一维数组。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="function"><span class="keyword">function</span> <span class="title">duplicate</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> [[[n, n]]];</div><div class="line">&#125;</div><div class="line"></div><div class="line">_.flatMapDeep([<span class="number">1</span>, <span class="number">2</span>], duplicate);</div><div class="line"><span class="comment">// =&gt; [1, 1, 2, 2]</span></div></pre></td></tr></table></figure></p>
<h3 id="flatMapDepth"><a href="#flatMapDepth" class="headerlink" title="_.flatMapDepth"></a><code>_.flatMapDepth</code></h3><ul>
<li><code>_.flatMapDepth(collection, [iteratee=_.identity], [depth=1])</code></li>
</ul>
<p>这个是可以指定降维次数<code>_.flatMapDeep</code>的版本。<code>depth</code>降维次数默认为1。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="function"><span class="keyword">function</span> <span class="title">duplicate</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> [[[n, n]]];</div><div class="line">&#125;</div><div class="line"></div><div class="line">_.flatMapDepth([<span class="number">1</span>, <span class="number">2</span>], duplicate, <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [[1, 1], [2, 2]]</span></div></pre></td></tr></table></figure></p>
<h3 id="forEach"><a href="#forEach" class="headerlink" title="_.forEach"></a><code>_.forEach</code></h3><ul>
<li><code>_.forEach(collection, [iteratee=_.identity])</code></li>
</ul>
<p>对<code>collection</code>每个元素执行<code>iteratee</code>方法，<code>iteratee</code>可以调用三个参数<code>value, index|key, collection</code>，当<code>collection</code>是数组时第二个参数为<code>index</code>，当<code>collection</code>是对象时第二个参数为<code>key</code>。<br><code>iteratee</code>函数可以通过显式返回<code>false</code>提前退出迭代。</p>
<p>返回值：返回<code>collection</code>本身</p>
<p>例子：<br><figure class="highlight js"><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">_.forEach([<span class="number">1</span>, <span class="number">2</span>], <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">&#125;);</div><div class="line"><span class="comment">// =&gt; Logs `1` then `2`.</span></div><div class="line"></div><div class="line">_.forEach(&#123; <span class="string">'a'</span>: <span class="number">1</span>, <span class="string">'b'</span>: <span class="number">2</span> &#125;, <span class="function"><span class="keyword">function</span>(<span class="params">value, key</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(key);</div><div class="line">&#125;);</div><div class="line"><span class="comment">// =&gt; Logs 'a' then 'b' (iteration order is not guaranteed).</span></div></pre></td></tr></table></figure></p>
<h3 id="forEachRight"><a href="#forEachRight" class="headerlink" title="_.forEachRight"></a><code>_.forEachRight</code></h3><ul>
<li><code>_.forEachRight(collection, [iteratee=_.identity])</code></li>
</ul>
<p>和<code>_.forEach</code>方法的区别，<code>collection</code>元素从右到左执行<code>iteratee</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.forEachRight([<span class="number">1</span>, <span class="number">2</span>], <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(value);</div><div class="line">&#125;);</div><div class="line"><span class="comment">// =&gt; Logs `2` then `1`.</span></div></pre></td></tr></table></figure></p>
<h3 id="groupBy"><a href="#groupBy" class="headerlink" title="_.groupBy"></a><code>_.groupBy</code></h3><ul>
<li><code>_.groupBy(collection, [iteratee=_.identity])</code></li>
</ul>
<p>对<code>collection</code>元素执行<code>iteratee</code>方法，得到<code>key</code>，<code>value</code>就是该元素。<code>iteratee</code>方法调用一个参数<code>value</code>。</p>
<p>返回值：返回<code>key-value</code>组成的新对象</p>
<p>例子：<br><figure class="highlight js"><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">_.groupBy([<span class="number">6.1</span>, <span class="number">4.2</span>, <span class="number">6.3</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; &#123; '4': [4.2], '6': [6.1, 6.3] &#125;</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.groupBy([<span class="string">'one'</span>, <span class="string">'two'</span>, <span class="string">'three'</span>], <span class="string">'length'</span>);</div><div class="line"><span class="comment">// =&gt; &#123; '3': ['one', 'two'], '5': ['three'] &#125;</span></div></pre></td></tr></table></figure></p>
<h3 id="includes"><a href="#includes" class="headerlink" title="_.includes"></a><code>_.includes</code></h3><ul>
<li><code>_.incluede(collection, value, [fromIndex=0])</code></li>
</ul>
<p>检查<code>value</code>是否在<code>collection</code>中，<code>fromIndex</code>指定检查的位置，默认是<code>0</code>。存在返回<code>true</code>，不存在返回<code>false</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.includes([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">1</span>);</div><div class="line"><span class="comment">// =&gt; true</span></div><div class="line"></div><div class="line">_.includes([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">1</span>, <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; false</span></div><div class="line"></div><div class="line">_.includes(&#123; <span class="string">'a'</span>: <span class="number">1</span>, <span class="string">'b'</span>: <span class="number">2</span> &#125;, <span class="number">1</span>);</div><div class="line"><span class="comment">// =&gt; true</span></div><div class="line"></div><div class="line">_.includes(<span class="string">'abcd'</span>, <span class="string">'bc'</span>);</div><div class="line"><span class="comment">// =&gt; true</span></div></pre></td></tr></table></figure></p>
<h3 id="invokeMap"><a href="#invokeMap" class="headerlink" title="_.invokeMap"></a><code>_.invokeMap</code></h3><ul>
<li><code>_.invokeMap(collection, path, [args])</code></li>
</ul>
<p>为<code>collection</code>每个元素调用<code>path</code>方法，返回调用后的结果组成的新数组。<code>args</code>参数将会提供给被调用的方法。</p>
<p>例子：<br><figure class="highlight js"><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">_.invokeMap([[<span class="number">5</span>, <span class="number">1</span>, <span class="number">7</span>], [<span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>]], <span class="string">'sort'</span>);</div><div class="line"><span class="comment">// =&gt; [[1, 5, 7], [1, 2, 3]]</span></div><div class="line"></div><div class="line">_.invokeMap([<span class="number">123</span>, <span class="number">456</span>], <span class="built_in">String</span>.prototype.split, <span class="string">''</span>);</div><div class="line"><span class="comment">// =&gt; [['1', '2', '3'], ['4', '5', '6']]</span></div></pre></td></tr></table></figure></p>
<h3 id="keyBy"><a href="#keyBy" class="headerlink" title="_.keyBy"></a><code>_.keyBy</code></h3><ul>
<li><code>_.keyBy(collection, [iteratee=_.identity])</code></li>
</ul>
<p>返回一个<code>key-value</code>对象，<code>key</code>是<code>collection</code>每个元素执行<code>iteratee</code>后的结果，对应的<code>value</code>是最后一个生成该<code>key</code>的<code>collection</code>值。<code>iteratee</code>调用一个参数<code>value</code>。</p>
<p>例子:<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [</div><div class="line">  &#123; <span class="string">'dir'</span>: <span class="string">'left'</span>, <span class="string">'code'</span>: <span class="number">97</span> &#125;,</div><div class="line">  &#123; <span class="string">'dir'</span>: <span class="string">'right'</span>, <span class="string">'code'</span>: <span class="number">100</span> &#125;,</div><div class="line">  &#123; <span class="string">'dir'</span>: <span class="string">'right'</span>, <span class="string">'code'</span>: <span class="number">99</span>&#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.keyBy(array, <span class="string">'dir'</span>);</div><div class="line"><span class="comment">// =&gt; &#123; 'left': &#123; 'dir': 'left', 'code': 97 &#125;, 'right': &#123; 'dir': 'right', 'code': 99 &#125; &#125;</span></div></pre></td></tr></table></figure></p>
<h3 id="map"><a href="#map" class="headerlink" title="_.map"></a><code>_.map</code></h3><ul>
<li><code>_.map(collection, [iteratee=_.identity])</code></li>
</ul>
<p>这个就比较简单了，为<code>collection</code>的每个元素执行<code>iteratee</code>方法，得到的结果映射成一个新的数组。</p>
<p>例子：<br><figure class="highlight js"><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></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">square</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> n * n;</div><div class="line">&#125;</div><div class="line"></div><div class="line">_.map([<span class="number">4</span>, <span class="number">8</span>], square);</div><div class="line"><span class="comment">// =&gt; [16, 64]</span></div><div class="line"></div><div class="line">_.map(&#123; <span class="string">'a'</span>: <span class="number">4</span>, <span class="string">'b'</span>: <span class="number">8</span> &#125;, square);</div><div class="line"><span class="comment">// =&gt; [16, 64] (iteration order is not guaranteed)</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.map(users, <span class="string">'user'</span>);</div><div class="line"><span class="comment">// =&gt; ['barney', 'fred']</span></div></pre></td></tr></table></figure></p>
<h3 id="orderBy"><a href="#orderBy" class="headerlink" title="_.orderBy"></a><code>_.orderBy</code></h3><ul>
<li><code>_.orderBy(collection, [iteratees=[_.identity], [orders])</code></li>
</ul>
<p>这个方法很像<code>_.sortBy</code>，不过<code>_.orderBy</code>允许指定排序方式<code>iteratees</code>。<code>orders</code>默认是<code>asc</code>（升序），也可以指定为<code>desc</code>，返回一个新的有序的数组。</p>
<p>例子：<br><figure class="highlight js"><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">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'age'</span>: <span class="number">48</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'age'</span>: <span class="number">34</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'age'</span>: <span class="number">40</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'age'</span>: <span class="number">36</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line"><span class="comment">// Sort by `user` in ascending order and by `age` in descending order.</span></div><div class="line">_.orderBy(users, [<span class="string">'user'</span>, <span class="string">'age'</span>], [<span class="string">'asc'</span>, <span class="string">'desc'</span>]);</div><div class="line"><span class="comment">// =&gt; objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]</span></div></pre></td></tr></table></figure></p>
<p>这个例子，排序关键字有两个<code>user</code>和<code>age</code>，两个<code>for</code>循环，排序完成一个，在做另一个排序。</p>
<h3 id="partition"><a href="#partition" class="headerlink" title="_.partition"></a><code>_.partition</code></h3><ul>
<li><code>_.partition(collection, [predicate=_.identity])</code></li>
</ul>
<p>将<code>collection</code>分成两组，一组是执行<code>predicate</code>返回<code>true</code>，另一组是返回<code>false</code>。返回的结果应该是一个二维数组。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>,  <span class="string">'age'</span>: <span class="number">36</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,    <span class="string">'age'</span>: <span class="number">40</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'age'</span>: <span class="number">1</span>,  <span class="string">'active'</span>: <span class="literal">false</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.partition(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> o.active; &#125;);</div><div class="line"><span class="comment">// =&gt; objects for [['fred'], ['barney', 'pebbles']]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.partition(users, &#123; <span class="string">'age'</span>: <span class="number">1</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;);</div><div class="line"><span class="comment">// =&gt; objects for [['pebbles'], ['barney', 'fred']]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.partition(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; objects for [['barney', 'pebbles'], ['fred']]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.partition(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; objects for [['fred'], ['barney', 'pebbles']]</span></div></pre></td></tr></table></figure></p>
<h3 id="reduce"><a href="#reduce" class="headerlink" title="_.reduce"></a><code>_.reduce</code></h3><ul>
<li><code>_.reduce(collection, [iteratee=_.identity], [accumulator])</code></li>
</ul>
<p>该方法作为一个累加器，把数组中的每个值(从左到右)执行<code>iteratee</code>方法开始缩减，最终变成一个值。如果<code>accumulator</code>没有给出，<code>collection</code>的第一个元素被当做初始值。<br><code>iteratee</code>调用四个参数<code>accumulator, value， index|key, collection</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.reduce([<span class="number">1</span>, <span class="number">2</span>], <span class="function"><span class="keyword">function</span>(<span class="params">sum, n</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> sum + n;</div><div class="line">&#125;, <span class="number">0</span>);</div><div class="line"><span class="comment">// =&gt; 3</span></div><div class="line"></div><div class="line">_.reduce(&#123; <span class="string">'a'</span>: <span class="number">1</span>, <span class="string">'b'</span>: <span class="number">2</span>, <span class="string">'c'</span>: <span class="number">1</span> &#125;, <span class="function"><span class="keyword">function</span>(<span class="params">result, value, key</span>) </span>&#123;</div><div class="line">  (result[value] || (result[value] = [])).push(key);</div><div class="line">  <span class="keyword">return</span> result;</div><div class="line">&#125;, &#123;&#125;);</div><div class="line"><span class="comment">// =&gt; &#123; '1': ['a', 'c'], '2': ['b'] &#125; (iteration order is not guaranteed)</span></div></pre></td></tr></table></figure></p>
<h3 id="reduceRight"><a href="#reduceRight" class="headerlink" title="_.reduceRight"></a><code>_.reduceRight</code></h3><ul>
<li><code>_.reduceRight(collection, [iteratee=_.identity], [accumulator])</code></li>
</ul>
<p>这个方法与<code>_.reduce()</code>方法不同的是从右到左计算。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [[<span class="number">0</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>]];</div><div class="line"></div><div class="line">_.reduceRight(array, <span class="function"><span class="keyword">function</span>(<span class="params">flattened, other</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> flattened.concat(other);</div><div class="line">&#125;, []);</div><div class="line"><span class="comment">// =&gt; [4, 5, 2, 3, 0, 1]</span></div></pre></td></tr></table></figure></p>
<h3 id="reject"><a href="#reject" class="headerlink" title="_.reject"></a><code>_.reject</code></h3><ul>
<li><code>_.reject(collection, [predicate=_.identity])</code></li>
</ul>
<p>这个方法与<code>_.filter</code>相反，返回<code>collection</code>执行<code>predicate</code>返回<code>false</code>条件的元素组成的新数组。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'age'</span>: <span class="number">36</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'age'</span>: <span class="number">40</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.reject(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> !o.active; &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['fred']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.reject(users, &#123; <span class="string">'age'</span>: <span class="number">40</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['barney']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.reject(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; objects for ['fred']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.reject(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; objects for ['barney']</span></div></pre></td></tr></table></figure></p>
<h3 id="sample"><a href="#sample" class="headerlink" title="_.sample"></a><code>_.sample</code></h3><ul>
<li><code>_.sample(collection)</code></li>
</ul>
<p>返回<code>collection</code>中随机的一个元素。</p>
<p>例子：<br><figure class="highlight js"><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">_.sample([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]);</div><div class="line"><span class="comment">// =&gt; 2</span></div></pre></td></tr></table></figure></p>
<h3 id="sampleSize"><a href="#sampleSize" class="headerlink" title="_.sampleSize"></a><code>_.sampleSize</code></h3><ul>
<li><code>_.sampleSize(collection, [n=1])</code></li>
</ul>
<p>返回<code>collection</code>中随机的<code>n</code>个数，默认<code>n=1</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.sampleSize([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [3, 1]</span></div><div class="line"></div><div class="line">_.sampleSize([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">4</span>);</div><div class="line"><span class="comment">// =&gt; [2, 3, 1]</span></div></pre></td></tr></table></figure></p>
<h3 id="shuffle"><a href="#shuffle" class="headerlink" title="_.shuffle"></a><code>_.shuffle</code></h3><ul>
<li><code>_.shuffle(collection)</code></li>
</ul>
<p>把<code>collection</code>元素的顺序随机打乱，返回打乱后的<code>collection</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.shuffle([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]);</div><div class="line"><span class="comment">// =&gt; [4, 1, 3, 2]</span></div></pre></td></tr></table></figure></p>
<h3 id="size"><a href="#size" class="headerlink" title="_.size"></a><code>_.size</code></h3><ul>
<li><code>_.size(collection)</code></li>
</ul>
<p>返回<code>collection</code>的<code>length</code>,<code>collection</code>可以是<code>Array|Object|string</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.size([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; 3</span></div><div class="line"></div><div class="line">_.size(&#123; <span class="string">'a'</span>: <span class="number">1</span>, <span class="string">'b'</span>: <span class="number">2</span> &#125;);</div><div class="line"><span class="comment">// =&gt; 2</span></div><div class="line"></div><div class="line">_.size(<span class="string">'pebbles'</span>);</div><div class="line"><span class="comment">// =&gt; 7</span></div></pre></td></tr></table></figure></p>
<h3 id="some"><a href="#some" class="headerlink" title="_.some"></a><code>_.some</code></h3><ul>
<li><code>_.some(collection, [predicate=_.identity])</code></li>
</ul>
<p>对<code>collection</code>元素执行<code>predicate</code>，返回布尔值,迭代过程遇到返回<code>false</code>就停止。<code>predicate</code>调用三个参数<code>value, index|key, collection</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.some([<span class="literal">null</span>, <span class="number">0</span>, <span class="string">'yes'</span>, <span class="literal">false</span>], <span class="built_in">Boolean</span>);</div><div class="line"><span class="comment">// =&gt; true</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'active'</span>: <span class="literal">false</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.some(users, &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;);</div><div class="line"><span class="comment">// =&gt; false</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.some(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; true</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.some(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; true</span></div></pre></td></tr></table></figure></p>
<h3 id="sortBy"><a href="#sortBy" class="headerlink" title="_.sortBy"></a><code>_.sortBy</code></h3><ul>
<li><code>_.sortBy(collection, [iteratee=[_.identity]])</code></li>
</ul>
<p>按照<code>iteratee</code>规则对<code>collection</code>进行排序。</p>
<p>例子:<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'age'</span>: <span class="number">48</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'age'</span>: <span class="number">36</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,   <span class="string">'age'</span>: <span class="number">40</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'age'</span>: <span class="number">34</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.sortBy(users, [<span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> o.user; &#125;]);</div><div class="line"><span class="comment">// =&gt; objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]</span></div><div class="line"></div><div class="line">_.sortBy(users, [<span class="string">'user'</span>, <span class="string">'age'</span>]);</div><div class="line"><span class="comment">// =&gt; objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]</span></div></pre></td></tr></table></figure></p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;上篇文章，我们已经把关于Array部分的API学习了一遍，现在我们来开始下一篇&lt;strong&gt;Collection&lt;/strong&gt;。&lt;/p&gt;
    
    </summary>
    
    
      <category term="Lodash" scheme="https://yeaseonzhang.github.io/tags/Lodash/"/>
    
  </entry>
  
  <entry>
    <title>jQuery Validation 简单使用</title>
    <link href="https://yeaseonzhang.github.io/2016/12/22/jQuery-Validation-%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8/"/>
    <id>https://yeaseonzhang.github.io/2016/12/22/jQuery-Validation-简单使用/</id>
    <published>2016-12-22T09:46:19.000Z</published>
    <updated>2017-03-18T16:09:48.033Z</updated>
    
    <content type="html"><![CDATA[<p><code>jQuery.validation</code>是一个十分易用的表单验证插件，官方文档也比较详细。很适合刚刚上手<code>jQuery</code>的web前端开发者，接下来介绍我个人的使用心得。</p>
<a id="more"></a>
<h3 id="相关资料"><a href="#相关资料" class="headerlink" title="相关资料"></a>相关资料</h3><ul>
<li><a href="https://jqueryvalidation.org/" target="_blank" rel="external">官网</a></li>
<li><a href="https://github.com/jzaefferer/jquery-validation" target="_blank" rel="external">Github</a></li>
<li><a href="http://www.runoob.com/jquery/jquery-plugin-validate.html" target="_blank" rel="external">菜鸟教程</a></li>
</ul>
<h3 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h3><p>前面的资料中也有很详尽的使用方法，可以看完我写的作为深入学习的资料。</p>
<h4 id="引入jquery-validate-js，还需要引入有依赖关系的jquery-js"><a href="#引入jquery-validate-js，还需要引入有依赖关系的jquery-js" class="headerlink" title="引入jquery.validate.js，还需要引入有依赖关系的jquery.js"></a>引入<code>jquery.validate.js</code>，还需要引入有依赖关系的<code>jquery.js</code></h4><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">&lt;script src=&quot;yourDir/jquery.js&quot;&gt;&lt;/scirpt&gt;</div><div class="line">&lt;script src=&quot;yourDir/jquery.validate.js&quot;&gt;&lt;/scirpt&gt;</div></pre></td></tr></table></figure>
<h4 id="将校验规则写到JS文件中"><a href="#将校验规则写到JS文件中" class="headerlink" title="将校验规则写到JS文件中"></a>将校验规则写到JS文件中</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">$(&apos;#yourForm&apos;).validate(&#123;</div><div class="line">  rules: &#123;</div><div class="line">    key1: &#123;</div><div class="line">      validateMethod1: true,</div><div class="line">      validateMethod2: false,</div><div class="line">      ...</div><div class="line">    &#125;,</div><div class="line">    key2: &quot;validateMethod3&quot;</div><div class="line">  &#125;,</div><div class="line">  messages: &#123;</div><div class="line">    key1: &#123;</div><div class="line">      validateMethod1: &quot;Tips1&quot;,</div><div class="line">      validateMethod2: &quot;Tips2&quot;</div><div class="line">    &#125;,</div><div class="line">    key2: &quot;Tips3&quot;</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>以上就是最基本的一个表单验证的雏形了，也很容易看懂。不过还是稍微说一下，为<code>&lt;form id=&quot;yourForm&quot;&gt;&lt;/form&gt;</code>绑定一个表单验证。<br><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">$(&apos;#yourForm&apos;).validate(&#123;</div><div class="line">  // do something you want</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<p>和其他<code>jQuery</code>插件一样，在上面函数内部自定义你的配置。<br>最基本的有<code>rules、messages</code>，分别是<strong>验证规则</strong>，和验证未通过时的<strong>提示信息</strong>。</p>
<ul>
<li><code>key</code> 就是表单元素的<code>name</code>值</li>
<li><code>rules</code>中的<code>vaildateMethod</code>可以设置为<code>true/false</code>来设置开启/关闭该方法的验证。如果该表单元素只有一个规则，也可以像<code>key2</code>那样直接指出。</li>
<li><code>messages</code>将对应规则的<strong>提示信息</strong>列出来，就可以在验证未通过时提示用户。</li>
</ul>
<h4 id="官方提供的validateMethod能满足基本的开发需要。"><a href="#官方提供的validateMethod能满足基本的开发需要。" class="headerlink" title="官方提供的validateMethod能满足基本的开发需要。"></a>官方提供的<code>validateMethod</code>能满足基本的开发需要。</h4><ul>
<li><code>required</code>: 必须输入的字段。</li>
<li><code>remote:&quot;check.php&quot;</code>: 使用 ajax 方法调用 check.php 验证输入值。</li>
<li><code>email</code>: 必须输入正确格式的电子邮件。</li>
<li><code>date</code>: 必须输入正确格式的日期。日期校验 ie6 出错，慎用。</li>
<li><code>dateISO</code>: 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。</li>
<li><code>number</code>: 必须输入合法的数字。</li>
<li><code>digits</code>: 必须输入整数。</li>
<li><code>creditcard</code>: 必须输入合法的信用卡号。</li>
<li><code>equalTo:&quot;#field&quot;</code>: 必输入值必须和 <code>#field</code> 相同。</li>
</ul>
<p>还有一些对于输入长度的，在此就不提及了。<br>也可以使用<code>jQuery.validator.addMethod()</code>添加自定义验证方法<a href="https://jqueryvalidation.org/jQuery.validator.addMethod/" target="_blank" rel="external">API</a>，接下来详细介绍。</p>
<h4 id="其他配置"><a href="#其他配置" class="headerlink" title="其他配置"></a>其他配置</h4><p>除了<code>rules</code>、<code>messages</code>还有其他一些常用的配置项。<br><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></pre></td><td class="code"><pre><div class="line">$(&apos;#addBookmarkForm&apos;).validate(&#123;</div><div class="line">  rules: &#123;</div><div class="line">    //</div><div class="line">  &#125;,</div><div class="line">  messages: &#123;</div><div class="line">    //</div><div class="line">  &#125;,</div><div class="line"></div><div class="line">  errorClass: &apos;modalError&apos;,</div><div class="line">  errorElement: &apos;div&apos;,</div><div class="line">  errorPlacement: function (error, element) &#123;</div><div class="line">    error.insertAfter(element.parent());</div><div class="line">  &#125;,</div><div class="line"></div><div class="line">  submitHandler: function () &#123;</div><div class="line">    // Your method</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<ul>
<li><code>errorClass</code>:  错误信息的类名。</li>
<li><code>errorElement</code>: 修改错误信息提示消息的标签，默认是<code>&lt;label&gt;</code>。</li>
<li><code>errorPlacement</code>: 修改错误信息显示的位置。这是一个回调函数，<code>error</code>参数也就是<code>errorElement</code>，<code>element</code>参数是验证的表单。通过修改插入的位置，实现不同的样式效果。</li>
<li><code>submitHandler</code>: 当所有验证规则通过后执行的回调函数，做ajax还是别的什么，取决于你的业务场景。</li>
</ul>
<h4 id="触发方式"><a href="#触发方式" class="headerlink" title="触发方式"></a>触发方式</h4><p>说了这么半天，还没有谈到怎么触发表单验证，其实很简单就是<code>submit</code>，你可以用多种方式实现<code>submit</code>。</p>
<ul>
<li><code>type=&quot;submit&quot;</code>的<code>&lt;button&gt;</code>或者<code>&lt;input&gt;</code></li>
<li><code>$(&#39;#yourForm&#39;).submit()</code></li>
</ul>
<h4 id="增加自定义验证规则"><a href="#增加自定义验证规则" class="headerlink" title="增加自定义验证规则"></a>增加自定义验证规则</h4><p>先贴一段我自己业务需要的验证规则<br><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></pre></td><td class="code"><pre><div class="line">validateMethod: function () &#123;</div><div class="line">  var regEx1 = new RegExp(/[&amp;\(\\\&quot;\&apos;\%\)]/);</div><div class="line">  var regEx2 = new RegExp(/^(http|https):\/\/.&#123;1,250&#125;/);</div><div class="line">  var regEx3 = new RegExp(/^\/\/\d&#123;1,3&#125;\.\d&#123;1,3&#125;\.\d&#123;1,3&#125;\.\d&#123;1,3&#125;\/.&#123;1,255&#125;$/);</div><div class="line">  var regEx4 = new RegExp(/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/);</div><div class="line"></div><div class="line">  jQuery.validator.addMethod(&apos;bookmarkRule1&apos;, function (value, element, parans) &#123;</div><div class="line">    return this.optional( element ) || !regEx1.test(value);</div><div class="line">  &#125;, &apos;URL should not include char &amp; ( ) \\ % \&quot; \&apos; &apos;);</div><div class="line"></div><div class="line">  jQuery.validator.addMethod(&apos;bookmarkRule2&apos;, function (value, element, parans) &#123;</div><div class="line">    if ($(&apos;#type&apos;).val() == &apos;0&apos;) &#123;</div><div class="line">      return this.optional( element ) || regEx2.test(value);</div><div class="line">    &#125; else &#123;</div><div class="line">      return true;</div><div class="line">    &#125;</div><div class="line">  &#125;, &apos;Please input correct Web URL!&apos;);</div><div class="line"></div><div class="line">  jQuery.validator.addMethod(&apos;bookmarkRule3&apos;, function (value, element, parans) &#123;</div><div class="line">    if ($(&apos;#type&apos;).val() == &apos;1&apos;) &#123;</div><div class="line">      return this.optional( element ) || regEx3.test(value);</div><div class="line">    &#125; else &#123;</div><div class="line">      return true;</div><div class="line">    &#125;</div><div class="line">  &#125;, &apos;Please input correct File URL!&apos;);</div><div class="line"></div><div class="line">  jQuery.validator.addMethod(&apos;bookmarkRule4&apos;, function (value, element, parans) &#123;</div><div class="line">    if ($(&apos;#type&apos;).val() == &apos;2&apos;) &#123;</div><div class="line">      return this.optional( element ) || regEx4.test(value);</div><div class="line">    &#125; else &#123;</div><div class="line">      return true;</div><div class="line">    &#125;</div><div class="line">  &#125;, &apos;Please input correct Desktop!&apos;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>我相信你根据<strong>API</strong>，就能写出自己需要的验证规则。</p>
<h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p>希望看完本文章对你能有所帮助。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;code&gt;jQuery.validation&lt;/code&gt;是一个十分易用的表单验证插件，官方文档也比较详细。很适合刚刚上手&lt;code&gt;jQuery&lt;/code&gt;的web前端开发者，接下来介绍我个人的使用心得。&lt;/p&gt;
    
    </summary>
    
    
      <category term="jQuery Plugin" scheme="https://yeaseonzhang.github.io/tags/jQuery-Plugin/"/>
    
  </entry>
  
  <entry>
    <title>2016年书单</title>
    <link href="https://yeaseonzhang.github.io/2016/11/20/2016%E5%B9%B4%E4%B9%A6%E5%8D%95/"/>
    <id>https://yeaseonzhang.github.io/2016/11/20/2016年书单/</id>
    <published>2016-11-20T13:42:29.000Z</published>
    <updated>2016-11-22T16:22:12.019Z</updated>
    
    <content type="html"><![CDATA[<h1 id="2016年书单（6-12）"><a href="#2016年书单（6-12）" class="headerlink" title="2016年书单（6/12）"></a>2016年书单（6/12）</h1><p>2016年计划读12本书，平均每个月一本，然后把书中值得分享的语句感想发读书笔记。<br>今年6月底毕业，估计今年12本书的计划不大可能实现了，但也会在余下的时间多读书，有句话不是说：“人丑就要多读书”。<br><a id="more"></a></p>
<ol>
<li>《Just For fun》</li>
<li>《人类简史》</li>
<li>《黑客与画家》</li>
<li>《ECMAScript 6入门》</li>
<li>《ES 6标准入门》 （在读）</li>
<li>《深入浅出nodejs》 （在读）</li>
<li>《图解CSS3》 （在读）</li>
<li>《马克·扎克伯格：后乔布斯时代的传奇》</li>
<li>《希拉里：通向白宫的最后一英里》</li>
<li>《证券分析（上）》 (在读)</li>
</ol>
]]></content>
    
    <summary type="html">
    
      &lt;h1 id=&quot;2016年书单（6-12）&quot;&gt;&lt;a href=&quot;#2016年书单（6-12）&quot; class=&quot;headerlink&quot; title=&quot;2016年书单（6/12）&quot;&gt;&lt;/a&gt;2016年书单（6/12）&lt;/h1&gt;&lt;p&gt;2016年计划读12本书，平均每个月一本，然后把书中值得分享的语句感想发读书笔记。&lt;br&gt;今年6月底毕业，估计今年12本书的计划不大可能实现了，但也会在余下的时间多读书，有句话不是说：“人丑就要多读书”。&lt;br&gt;
    
    </summary>
    
    
      <category term="阅读" scheme="https://yeaseonzhang.github.io/tags/%E9%98%85%E8%AF%BB/"/>
    
  </entry>
  
  <entry>
    <title>Lodash学习--Array</title>
    <link href="https://yeaseonzhang.github.io/2016/11/08/Lodash%E5%AD%A6%E4%B9%A0-Array/"/>
    <id>https://yeaseonzhang.github.io/2016/11/08/Lodash学习-Array/</id>
    <published>2016-11-08T06:46:33.000Z</published>
    <updated>2017-10-12T13:47:34.697Z</updated>
    
    <content type="html"><![CDATA[<p><strong>Lodash</strong>是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。还有一个类似的库是<strong>underscore</strong>，不过<strong>underscore</strong>不能按需加载。<br>朋友说：这种工具库，平时都是先用先写的。<br>不过我觉得，还是很有必要学习一下的，看下源码的实现。<br>本文主要是对<strong>Lodash</strong>的API,用自己理解的方式做一下说明。可能理解有误，不过还是要记录下来，当再用的时候有据可查。</p>
<a id="more"></a>
<h3 id="chunk"><a href="#chunk" class="headerlink" title="_.chunk"></a><code>_.chunk</code></h3><ul>
<li><code>_.chunk(array, [size=1])</code></li>
</ul>
<p>将数组进行分块，按照<code>size</code>指定的长度，默认长度<code>1</code></p>
<h3 id="compact"><a href="#compact" class="headerlink" title="_.compact"></a><code>_.compact</code></h3><ul>
<li><code>_.compact(array)</code></li>
</ul>
<p>剔除数组中没有意义的值，比如<code>false, null, 0, &quot;&quot;, undefined 和 NaN</code></p>
<h3 id="concat"><a href="#concat" class="headerlink" title="_.concat"></a><code>_.concat</code></h3><ul>
<li><code>_.concat(array, [values])</code></li>
</ul>
<p>创建一个新的数组来保存原始数组，增加值/数组之后的结果</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [<span class="number">1</span>];</div><div class="line"><span class="keyword">var</span> other = _.concat(array, <span class="number">2</span>, [<span class="number">3</span>], [[<span class="number">4</span>]]);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(other);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3, [4]]</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; [1]</span></div></pre></td></tr></table></figure></p>
<h3 id="difference"><a href="#difference" class="headerlink" title="_.difference"></a><code>_.difference</code></h3><ul>
<li><code>_.difference(array, [values])</code></li>
</ul>
<p>这个函数就比较复杂了，就想看一下源码，发现嵌套的函数太多。就投机取巧直接测试吧。这个函数，大概的作用就是将<code>array</code>和<code>[values]</code>进行比较，将<code>array</code>中比<code>[values]</code>中多出的值，保存到一个新的数组中。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="comment">//官网就比较敷衍了</span></div><div class="line">_.difference([<span class="number">2</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [1]</span></div><div class="line"></div><div class="line"><span class="comment">//下面是我做的一些测试</span></div><div class="line">_.difference([<span class="number">1</span>, <span class="number">1</span>, <span class="string">"1"</span>, <span class="number">2</span>, <span class="number">2</span>], [<span class="number">1</span>]);</div><div class="line"><span class="comment">// =&gt; ["1", 2, 2]</span></div><div class="line"><span class="comment">// 只要array中比[values]中多出的值，都会返回，不管个数出现了几次</span></div></pre></td></tr></table></figure></p>
<h3 id="differenceBy"><a href="#differenceBy" class="headerlink" title="_.differenceBy"></a><code>_.differenceBy</code></h3><ul>
<li><code>_.differenceBy(array, [values], [iteratee=_.identity])</code></li>
</ul>
<p>这个方法就是在<code>_.difference</code>方法的基础上，增加了一个参数。反正是看了一会，才看明白这个第三个参数，怎么工作的。</p>
<p>例子：<br><figure class="highlight js"><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">_.differenceBy([<span class="number">2.1</span>, <span class="number">1.2</span>], [<span class="number">2.3</span>, <span class="number">3.4</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; [1.2]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.differenceBy([&#123; <span class="string">'x'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], [&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], <span class="string">'x'</span>);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 2 &#125;]</span></div></pre></td></tr></table></figure></p>
<p>第一个官方例子，就是看了半天没看懂。我以为是先<code>_.difference</code>在对得到的结果进行<code>Math.floor</code>运算，其实是想错了。 如果这么工作的话，就没必要设计<code>_.differenceBy</code>了，直接用<code>_.difference.xx()</code>就可以，所以我一开始的想当然是有问题的。<br>正确地工作步骤是，对前两个参数，分别执行第三个参数过滤，然后再比较找出<code>array</code>中比<code>[values]</code>中多出的部分，然后返回这些多余部分的原始值的一个数组。<br>就拿第一个说吧，执行过滤之后是<code>[2,1]</code>和<code>[2,3]</code>，应该是返回<code>[1]</code>的原始值<code>[1.2]</code>，就酱。</p>
<h3 id="differenceWith"><a href="#differenceWith" class="headerlink" title="_.differenceWith"></a><code>_.differenceWith</code></h3><ul>
<li><code>_.differenceWith(array, [values], [comparator])</code></li>
</ul>
<p>没太看懂。。。</p>
<h3 id="drop"><a href="#drop" class="headerlink" title="_.drop"></a><code>_.drop</code></h3><ul>
<li><code>_.drop(array, [n=1])</code></li>
</ul>
<p>我理解的是抛弃前n个数组元素，返回剩下的数组元素，默认抛弃第一个。</p>
<p>例子：<br><figure class="highlight js"><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">_.drop([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [2, 3]</span></div><div class="line"></div><div class="line">_.drop([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [3]</span></div><div class="line"></div><div class="line">_.drop([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">5</span>);</div><div class="line"><span class="comment">// =&gt; []</span></div><div class="line"></div><div class="line">_.drop([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">0</span>);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3]</span></div></pre></td></tr></table></figure></p>
<h3 id="dropRight"><a href="#dropRight" class="headerlink" title="_.dropRight"></a><code>_.dropRight</code></h3><ul>
<li><code>_.dropRight(array, [n=1])</code></li>
</ul>
<p><code>_.dropRight</code>和<code>_.drop</code>功能是一样的，就是<code>_.drop</code>是从后往前抛弃n个数组元素，默认抛弃最后一个。</p>
<p>例子：<br><figure class="highlight js"><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">_.dropRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [1, 2]</span></div><div class="line"></div><div class="line">_.dropRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [1]</span></div><div class="line"></div><div class="line">_.dropRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">5</span>);</div><div class="line"><span class="comment">// =&gt; []</span></div><div class="line"></div><div class="line">_.dropRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">0</span>);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3]</span></div></pre></td></tr></table></figure></p>
<h3 id="dropRightWhile"><a href="#dropRightWhile" class="headerlink" title="_.dropRightWhile"></a><code>_.dropRightWhile</code></h3><ul>
<li><code>_.dropRightWhile(array, [predicate=_.identity])</code></li>
</ul>
<p>从尾端查询数组<code>array</code>，第一个不满足<code>predicate</code>条件的元素开始截取数组。<br>参数<code>predicate</code>提供的是一个属性名称，就通过提供的参数使用<code>_.property</code>方法返回一个回调函数。<br>参数<code>predicate</code>提供的是一个对象，就用<code>_.matches</code>方法匹配相同的元素，相同返回<code>true</code>，不同返回<code>false</code>。<br>参数<code>predicate</code>也可以提供一个函数，该函数有三个参数<code>value, index, array</code></p>
<p><code>_.dropRightWhile</code>这个函数还牵扯到另外两个函数，<code>_.property</code>和<code>_.matches</code>。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>,  <span class="string">'active'</span>: <span class="literal">true</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,    <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.dropRightWhile(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> !o.active; &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['barney']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.dropRightWhile(users, &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['barney', 'fred']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.dropRightWhile(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; objects for ['barney']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.dropRightWhile(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; objects for ['barney', 'fred', 'pebbles']</span></div></pre></td></tr></table></figure></p>
<h3 id="dropWhile"><a href="#dropWhile" class="headerlink" title="_.dropWhile"></a><code>_.dropWhile</code></h3><ul>
<li><code>_.dropWhile(array, [predicate=_.identity])</code></li>
</ul>
<p>这个方法与上面<code>_.dropRightWhile</code>不同之处，是从数组的首端开始查询。</p>
<h3 id="fill"><a href="#fill" class="headerlink" title="_.fill"></a><code>_.fill</code></h3><ul>
<li><code>_.fill(array, value, [start=0], [end=array.length])</code></li>
</ul>
<p>将<code>value</code>填充到<code>array</code>中，<code>start</code>默认为0，<code>end</code>默认为<code>array.length</code>。这个就比较好理解了。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</div><div class="line"></div><div class="line">_.fill(array, <span class="string">'a'</span>);</div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; ['a', 'a', 'a']</span></div><div class="line"></div><div class="line">_.fill(<span class="built_in">Array</span>(<span class="number">3</span>), <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [2, 2, 2]</span></div><div class="line"></div><div class="line">_.fill([<span class="number">4</span>, <span class="number">6</span>, <span class="number">8</span>, <span class="number">10</span>], <span class="string">'*'</span>, <span class="number">1</span>, <span class="number">3</span>);</div><div class="line"><span class="comment">// =&gt; [4, '*', '*', 10]</span></div></pre></td></tr></table></figure></p>
<h3 id="findIndex"><a href="#findIndex" class="headerlink" title="_.findIndex"></a><code>_.findIndex</code></h3><ul>
<li><code>_.findIndex(array, [predicate=_.identity], [fromIndex=0])</code></li>
</ul>
<p>返回满足<code>predicate</code>条件的一个<code>array</code>数组的<code>index</code>，也可以指定从哪里开始查询，没找到满足条件的返回<code>-1</code></p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>,  <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,    <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.findIndex(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> o.user == <span class="string">'barney'</span>; &#125;);</div><div class="line"><span class="comment">// =&gt; 0</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.findIndex(users, &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;);</div><div class="line"><span class="comment">// =&gt; 1</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.findIndex(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; 0</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.findIndex(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; 2</span></div></pre></td></tr></table></figure></p>
<h3 id="findLastIndex"><a href="#findLastIndex" class="headerlink" title="_.findLastIndex"></a><code>_.findLastIndex</code></h3><ul>
<li><code>_.findLastIndex(array, [predicate=_.identity], [fromIndex=array.length -1])</code></li>
</ul>
<p>和<code>_.findIndex</code>基本相同，不过<code>_.findLastIndex</code>是从尾部往首部开始查找。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>,  <span class="string">'active'</span>: <span class="literal">true</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,    <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.findLastIndex(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> o.user == <span class="string">'pebbles'</span>; &#125;);</div><div class="line"><span class="comment">// =&gt; 2</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.findLastIndex(users, &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;);</div><div class="line"><span class="comment">// =&gt; 0</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.findLastIndex(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; 2</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.findLastIndex(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; 0</span></div></pre></td></tr></table></figure></p>
<h3 id="flatten"><a href="#flatten" class="headerlink" title="_.flatten"></a><code>_.flatten</code></h3><ul>
<li><code>_.flatten(array)</code></li>
</ul>
<p>这个函数的作用是将<code>array</code>减少一个维度。</p>
<p>例子：<br><figure class="highlight js"><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">_.flatten([<span class="number">1</span>, [<span class="number">2</span>, [<span class="number">3</span>, [<span class="number">4</span>]], <span class="number">5</span>]]);</div><div class="line"><span class="comment">// =&gt; [1, 2, [3, [4]], 5]</span></div></pre></td></tr></table></figure></p>
<h3 id="flattenDeep"><a href="#flattenDeep" class="headerlink" title="_.flattenDeep"></a><code>_.flattenDeep</code></h3><ul>
<li><code>_.flattenDeep(array)</code></li>
</ul>
<p>相当于递归执行<code>_.flatten</code>，最终将<code>array</code>变成一维数组。</p>
<p>例子：<br><figure class="highlight js"><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">_.flattenDeep([<span class="number">1</span>, [<span class="number">2</span>, [<span class="number">3</span>, [<span class="number">4</span>]], <span class="number">5</span>]]);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3, 4, 5]</span></div></pre></td></tr></table></figure></p>
<h3 id="flattenDepth"><a href="#flattenDepth" class="headerlink" title="_.flattenDepth"></a><code>_.flattenDepth</code></h3><ul>
<li><code>_.flattenDepth(array, [depth=1])</code></li>
</ul>
<p>相当于指定执行<code>_.flattenDepth``depth</code>次，默认<code>depth</code>为1。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [<span class="number">1</span>, [<span class="number">2</span>, [<span class="number">3</span>, [<span class="number">4</span>]], <span class="number">5</span>]];</div><div class="line"></div><div class="line">_.flattenDepth(array, <span class="number">1</span>);</div><div class="line"><span class="comment">// =&gt; [1, 2, [3, [4]], 5]</span></div><div class="line"></div><div class="line">_.flattenDepth(array, <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3, [4], 5]</span></div></pre></td></tr></table></figure></p>
<h3 id="fromPairs"><a href="#fromPairs" class="headerlink" title="_.fromPairs"></a><code>_.fromPairs</code></h3><ul>
<li><code>_.fromPairs(pairs)</code></li>
</ul>
<p>将<code>pairs</code>键值对转换成一个对象。</p>
<p>例子：<br><figure class="highlight js"><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">_.fromPairs([[<span class="string">'a'</span>, <span class="number">1</span>], [<span class="string">'b'</span>, <span class="number">2</span>]]);</div><div class="line"><span class="comment">// =&gt; &#123; 'a': 1, 'b': 2 &#125;</span></div><div class="line"></div><div class="line">_.fromPairs([[<span class="string">'a'</span>, <span class="number">1</span>], [<span class="string">'b'</span>, <span class="number">2</span>], [<span class="string">'c'</span>, [<span class="string">'d'</span>, <span class="number">4</span>]]]);</div><div class="line"><span class="comment">// =&gt; &#123; 'a': 1, 'b': 2, 'c': [ 'd', 4 ] &#125;</span></div></pre></td></tr></table></figure></p>
<h3 id="head"><a href="#head" class="headerlink" title="_.head"></a><code>_.head</code></h3><ul>
<li><code>_.head(array)</code></li>
</ul>
<p>返回<code>array</code>的第一个元素，别名<code>_.first</code></p>
<p>例子：<br><figure class="highlight js"><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">_.head([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; 1</span></div><div class="line"></div><div class="line">_.head([]);</div><div class="line"><span class="comment">// =&gt; undefined</span></div><div class="line"></div><div class="line">_.head([[<span class="number">1</span>, <span class="number">4</span>], <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [1, 4]</span></div></pre></td></tr></table></figure></p>
<h3 id="last"><a href="#last" class="headerlink" title="_.last"></a><code>_.last</code></h3><ul>
<li><code>_.last(array)</code></li>
</ul>
<p>返回<code>array</code>的最后一个元素。</p>
<p>例子：<br><figure class="highlight js"><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">_.last([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; 3</span></div></pre></td></tr></table></figure></p>
<h3 id="nth"><a href="#nth" class="headerlink" title="_.nth"></a><code>_.nth</code></h3><ul>
<li><code>_.nth(array, [n=0])</code></li>
</ul>
<p>获取指定<code>index</code>的<code>array</code>数组元素。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'d'</span>];</div><div class="line"></div><div class="line">_.nth(array, <span class="number">1</span>);</div><div class="line"><span class="comment">// =&gt; 'b'</span></div><div class="line"></div><div class="line">_.nth(array, <span class="number">-2</span>);</div><div class="line"><span class="comment">// =&gt; 'c';</span></div></pre></td></tr></table></figure></p>
<h3 id="tail"><a href="#tail" class="headerlink" title="_.tail"></a><code>_.tail</code></h3><ul>
<li><code>_.tail(array)</code></li>
</ul>
<p>返回去除第一个元素的数组。</p>
<p>例子：<br><figure class="highlight js"><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">_.tail([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [2, 3]</span></div></pre></td></tr></table></figure></p>
<h3 id="indexOf"><a href="#indexOf" class="headerlink" title="_.indexOf"></a><code>_.indexOf</code></h3><ul>
<li><code>_.indexOf(array, value, [fromIndex=0])</code></li>
</ul>
<p>在<code>array</code>中查找<code>value</code>，返回找到的第一个匹配的<code>index</code>，没找到则返回<code>-1</code>，第三个参数<code>fromIndex</code>指定查找的起始位置，默认为0；</p>
<p>例子：<br><figure class="highlight js"><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">_.indexOf([<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>], <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; 1</span></div><div class="line"></div><div class="line">_.indexOf([<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>], <span class="number">3</span>);</div><div class="line"><span class="comment">// =&gt; -1</span></div><div class="line"></div><div class="line"><span class="comment">// Search from the `fromIndex`.</span></div><div class="line">_.indexOf([<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>], <span class="number">2</span>, <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; 3</span></div></pre></td></tr></table></figure></p>
<h3 id="lastIndexOf"><a href="#lastIndexOf" class="headerlink" title="_.lastIndexOf"></a><code>_.lastIndexOf</code></h3><ul>
<li><code>_.lastIndexOf(array, value, [fromIndex=array.length-1])</code></li>
</ul>
<p>和<code>_.indexOf</code>方法一样，不过是从尾部开始查找。</p>
<p>例子：<br><figure class="highlight js"><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">_.lastIndexOf([<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>], <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; 3</span></div><div class="line"></div><div class="line"><span class="comment">// Search from the `fromIndex`.</span></div><div class="line">_.lastIndexOf([<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>], <span class="number">2</span>, <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; 1</span></div></pre></td></tr></table></figure></p>
<h3 id="initial"><a href="#initial" class="headerlink" title="_.initial"></a><code>_.initial</code></h3><ul>
<li><code>_.initial(array)</code></li>
</ul>
<p>去除<code>array</code>最后一个元素，并返回。</p>
<p>例子：<br><figure class="highlight js"><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">_.initial([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [1, 2]</span></div><div class="line"></div><div class="line">_.initial([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, [<span class="number">4</span>, <span class="number">5</span>]]);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3]</span></div></pre></td></tr></table></figure></p>
<h3 id="intersection"><a href="#intersection" class="headerlink" title="_.intersection"></a><code>_.intersection</code></h3><ul>
<li><code>_.intersection([arrays])</code></li>
</ul>
<p>取出各数组中全等的元素，使用<code>SameValueZero</code>方式平等比较。</p>
<p>例子：<br><figure class="highlight js"><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">_.intersection([<span class="number">2</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [2]</span></div><div class="line"></div><div class="line">_.intersection([<span class="number">1</span>, <span class="number">2</span>], [<span class="number">4</span>, <span class="number">2</span>], [<span class="number">2</span>, <span class="number">1</span>]);</div><div class="line"><span class="comment">// =&gt; [2]</span></div></pre></td></tr></table></figure></p>
<h3 id="intersectionBy"><a href="#intersectionBy" class="headerlink" title="_.intersectionBy"></a><code>_.intersectionBy</code></h3><ul>
<li><code>_.intersectionBy([arrays], [iteratee=_.identity])</code></li>
</ul>
<p><code>_.intersectionBy</code>就是在<code>_.intersection</code>的基础上接受了一个<code>iteratee</code>迭代器，生成了一个比较的标准，类似于<code>_.differenceBy</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.intersectionBy([<span class="number">2.1</span>, <span class="number">1.2</span>], [<span class="number">2.3</span>, <span class="number">3.4</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; [2.1]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.intersectionBy([&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], [&#123; <span class="string">'x'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], <span class="string">'x'</span>);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 1 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="intersectionWith"><a href="#intersectionWith" class="headerlink" title="_.intersectionWith"></a><code>_.intersectionWith</code></h3><ul>
<li><code>_.intersectionWith([arrays], [comparator])</code></li>
</ul>
<p>这个函数和<code>_.differenceWith</code>差不多，一样没太看懂。<br>先略过。</p>
<h3 id="join"><a href="#join" class="headerlink" title="_.join"></a><code>_.join</code></h3><ul>
<li><code>_.join(array, [separator=&#39;,&#39;])</code></li>
</ul>
<p>将<code>array</code>转换成字符串类型并通过<code>separator</code>分隔开，默认使用<code>,</code>分隔。</p>
<p>例子：<br><figure class="highlight js"><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">_.join([<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>], <span class="string">'~'</span>);</div><div class="line"><span class="comment">// =&gt; 'a~b~c'</span></div><div class="line"></div><div class="line">_.join([<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, [<span class="string">'d'</span>, <span class="string">'e'</span>]], <span class="string">'-'</span>);</div><div class="line"><span class="comment">// =&gt; 'a-b-c-d,e'</span></div></pre></td></tr></table></figure></p>
<h3 id="pull"><a href="#pull" class="headerlink" title="_.pull"></a><code>_.pull</code></h3><ul>
<li><code>_.pull(array, [values])</code></li>
</ul>
<p>移除<code>array</code>中所有的指定<code>values</code>，需要注意的是这个函数会对原始<code>array</code>做修改。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> array = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</div><div class="line"></div><div class="line">_.pull(array, <span class="string">'a'</span>, <span class="string">'c'</span>);</div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; ['b', 'b']</span></div></pre></td></tr></table></figure></p>
<h3 id="pullAll"><a href="#pullAll" class="headerlink" title="_.pullAll"></a><code>_.pullAll</code></h3><ul>
<li><code>_.pullAll(array, values)</code></li>
</ul>
<p><code>_.pullAll</code>方法应该是<code>_.pull</code>方法的升级，这个方法是在<strong>Lodash 4.0.0</strong>中提出的。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> array = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</div><div class="line"></div><div class="line">_.pullAll(array, [<span class="string">'a'</span>, <span class="string">'c'</span>]);</div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; ['b', 'b']</span></div></pre></td></tr></table></figure></p>
<h3 id="pullAllBy"><a href="#pullAllBy" class="headerlink" title="_.pullAllBy"></a><code>_.pullAllBy</code></h3><ul>
<li><code>_.pullAllBy(array, values, [iteratee=_.identity])</code></li>
</ul>
<p><code>_.pullAllBy</code>方法很像<code>_.pullAll</code>方法，除了可以接受一个迭代器<code>iteratee</code>，为每一个数组元素执行迭代器并生成一个比较的标准，这个迭代器调用一个参数<code>value</code>。<br><strong>注</strong>：原始数组改变</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array1 = [&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">3</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;];</div><div class="line"></div><div class="line">_.pullAllBy(array1, [&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">3</span> &#125;], <span class="string">'x'</span>);</div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 2 &#125;]</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> array2 = [&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">3</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'y'</span>: <span class="number">4</span>&#125;];</div><div class="line"></div><div class="line">_.pullAllBy(array, [&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], <span class="string">'y'</span>);</div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; [&#123; 'y': 4 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="pullAllWith"><a href="#pullAllWith" class="headerlink" title="_.pullAllWith"></a><code>_.pullAllWith</code></h3><ul>
<li><code>_.pullAllWith(array, values, [comoarator])</code></li>
</ul>
<p>这个跳过。。。</p>
<h3 id="pullAt"><a href="#pullAt" class="headerlink" title="_.pullAt"></a><code>_.pullAt</code></h3><ul>
<li><code>_.pullAt(array, [indexes])</code></li>
</ul>
<p>移除相应<code>index</code>的元素，返回被移除元素的数组。<br><strong>注</strong>：原始数组改变</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'d'</span>];</div><div class="line"><span class="keyword">var</span> pulled = _.pullAt(array, [<span class="number">1</span>, <span class="number">3</span>]);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; ['a', 'c']</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(pulled);</div><div class="line"><span class="comment">// =&gt; ['b', 'd']</span></div></pre></td></tr></table></figure></p>
<h3 id="remove"><a href="#remove" class="headerlink" title="_.remove"></a><code>_.remove</code></h3><ul>
<li><code>_.remove(array, [predicate=_.identity])</code></li>
</ul>
<p>移除所有<code>predicate</code>返回<strong>真</strong>的数组元素，并返回被移除的数组元素。<code>predicate</code>调用三个参数<code>value, index, array</code>。</p>
<p>例子：<br><figure class="highlight js"><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">var</span> array = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</div><div class="line"><span class="keyword">var</span> evens = _.remove(array, <span class="function"><span class="keyword">function</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> n % <span class="number">2</span> == <span class="number">0</span>;</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; [1, 3]</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(evens);</div><div class="line"><span class="comment">// =&gt; [2, 4]</span></div></pre></td></tr></table></figure></p>
<h3 id="reverse"><a href="#reverse" class="headerlink" title="_.reverse"></a><code>_.reverse</code></h3><ul>
<li><code>_.reverse(array)</code></li>
</ul>
<p>这个就比较简单了，是一个反序排列的方法，也会对原始方法进行更改</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> array = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</div><div class="line"></div><div class="line">_.reverse(array);</div><div class="line"><span class="comment">// =&gt; [3, 2, 1]</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(array);</div><div class="line"><span class="comment">// =&gt; [3, 2, 1]</span></div></pre></td></tr></table></figure></p>
<h3 id="slice"><a href="#slice" class="headerlink" title="_.slice"></a><code>_.slice</code></h3><ul>
<li><code>_.slice(array, [start=0], [end=array.length])</code></li>
</ul>
<p>对数组进行分割。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> array = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</div><div class="line"></div><div class="line">_.slice(array, <span class="number">1</span>, <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [2]</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedIndex"><a href="#sortedIndex" class="headerlink" title="_.sortedIndex"></a><code>_.sortedIndex</code></h3><ul>
<li><code>_.sortedIndex(array, value)</code><br>向一个有序数组中插入一个<code>value</code>，将返回这个值插入之后的有序位置。（使用二分查找）</li>
</ul>
<p>例子：<br><figure class="highlight js"><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">_.sortedIndex([<span class="number">30</span>, <span class="number">50</span>], <span class="number">40</span>);</div><div class="line"><span class="comment">// =&gt; 1</span></div><div class="line"></div><div class="line">_.sortedIndex([<span class="number">30</span>, <span class="number">50</span>], <span class="number">30</span>);</div><div class="line"><span class="comment">// =&gt; 0</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedIndexBy"><a href="#sortedIndexBy" class="headerlink" title="_.sortedIndexBy"></a><code>_.sortedIndexBy</code></h3><ul>
<li><code>_.sortedIndexBy(array, value, [iteratee=_.identity])</code></li>
</ul>
<p>凡是带<code>By</code>的方法方法，都是这种结构的函数。<br><code>_.sortIndexBy</code>比<code>_.sortIndex</code>方法多一个参数，接收一个迭代器<code>iteratee</code>去计算排序，这个<code>iteratee</code>调用一个参数<code>value</code>。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> objects = [&#123; <span class="string">'x'</span>: <span class="number">4</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">5</span> &#125;];</div><div class="line"></div><div class="line">_.sortedIndexBy(objects, &#123; <span class="string">'x'</span>: <span class="number">4</span> &#125;, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> o.x; &#125;);</div><div class="line"><span class="comment">// =&gt; 0</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.sortedIndexBy(objects, &#123; <span class="string">'x'</span>: <span class="number">4</span> &#125;, <span class="string">'x'</span>);</div><div class="line"><span class="comment">// =&gt; 0</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedIndexOf"><a href="#sortedIndexOf" class="headerlink" title="_.sortedIndexOf"></a><code>_.sortedIndexOf</code></h3><ul>
<li><code>_.sortedIndexOf(array, value)</code></li>
</ul>
<p>这个方法很像<code>_.indexOf</code>，<code>_.sortedIndexOf</code>是对一个有序数组进行二分查找。</p>
<p>例子：<br><figure class="highlight js"><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">_.sortedIndexOf([<span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">6</span>], <span class="number">5</span>);</div><div class="line"><span class="comment">// =&gt; 1</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedLastIndex"><a href="#sortedLastIndex" class="headerlink" title="_.sortedLastIndex"></a><code>_.sortedLastIndex</code></h3><ul>
<li><code>_.sortedLastIndex(array, value)</code></li>
</ul>
<p>这个方法很像<code>_.sortedIndex</code>，这个方法在保持有序的前提下会把<code>value</code>插进最大的那个位置。</p>
<p>例子：<br><figure class="highlight js"><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">_.sortedLastIndex([<span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">6</span>], <span class="number">5</span>);</div><div class="line"><span class="comment">// =&gt; 4</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedLastIndexBy"><a href="#sortedLastIndexBy" class="headerlink" title="_.sortedLastIndexBy"></a><code>_.sortedLastIndexBy</code></h3><ul>
<li><code>_.sortedLastIndexBy(array, value, [iteratee=_.identity])</code></li>
</ul>
<p>这个方法很像<code>_.sortedLastIndex</code>，只不过多了一个参数<code>iteratee</code>,这个迭代器为每个元素值计算他们的排序，这个迭代器调用一个参数<code>value</code>。返回应该被插入后的数组下标。</p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> objects = [&#123; <span class="string">'x'</span>: <span class="number">4</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">5</span> &#125;];</div><div class="line"></div><div class="line">_.sortedLastIndexBy(objects, &#123; <span class="string">'x'</span>: <span class="number">4</span> &#125;, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> o.x; &#125;);</div><div class="line"><span class="comment">// =&gt; 1</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.sortedLastIndexBy(objects, &#123; <span class="string">'x'</span>: <span class="number">4</span> &#125;, <span class="string">'x'</span>);</div><div class="line"><span class="comment">// =&gt; 1</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedLastIndexOf"><a href="#sortedLastIndexOf" class="headerlink" title="_.sortedLastIndexOf"></a><code>_.sortedLastIndexOf</code></h3><ul>
<li><code>_.sortedLastIndexOf(array, value)</code></li>
</ul>
<p>这个方法很像<code>_.lastIndexOf</code>，只不过它对一个有序数组进行二分查找。</p>
<p>例子：<br><figure class="highlight js"><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">_.sortedLastIndexOf([<span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">6</span>], <span class="number">5</span>);</div><div class="line"><span class="comment">// =&gt; 3</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedUniq"><a href="#sortedUniq" class="headerlink" title="_.sortedUniq"></a><code>_.sortedUniq</code></h3><ul>
<li><code>_.sortedUniq(array)</code></li>
</ul>
<p>这个方法很像<code>_.uniq</code>，这个方法是为了有序数组设计且优化的，返回一个去重的数组。</p>
<p>例子：<br><figure class="highlight js"><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">_.sortedUniq([<span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>]);</div><div class="line"><span class="comment">// =&gt; [1, 2]</span></div></pre></td></tr></table></figure></p>
<h3 id="sortedUniqBy"><a href="#sortedUniqBy" class="headerlink" title="_.sortedUniqBy"></a><code>_.sortedUniqBy</code></h3><ul>
<li><code>_.sortedUniqBy(array, [iteratee])</code></li>
</ul>
<p>这个方法很像<code>_.uniqBy</code>，它返回经过<code>iteratee</code>计算之后，去除重复值，只返回重复值的第一个原值和不重复值组成的有序数组。</p>
<p>例子：<br><figure class="highlight js"><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">_.sortedUniqBy([<span class="number">1.1</span>, <span class="number">1.2</span>, <span class="number">2.3</span>, <span class="number">2.4</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; [1.1, 2.3]</span></div></pre></td></tr></table></figure></p>
<h3 id="take"><a href="#take" class="headerlink" title="_.take"></a><code>_.take</code></h3><ul>
<li><code>_.take(array, [n=1])</code></li>
</ul>
<p>创建一个分割后的数组，从<code>array</code>数组的开始到第<code>n</code>个元素。</p>
<p>例子：<br><figure class="highlight js"><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">_.take([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [1]</span></div><div class="line"></div><div class="line">_.take([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [1, 2]</span></div><div class="line"></div><div class="line">_.take([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">5</span>);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3]</span></div><div class="line"></div><div class="line">_.take([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">0</span>);</div><div class="line"><span class="comment">// =&gt; []</span></div></pre></td></tr></table></figure></p>
<h3 id="takeRight"><a href="#takeRight" class="headerlink" title="_.takeRight"></a><code>_.takeRight</code></h3><ul>
<li><code>_.takeRight(array, [n=1])</code></li>
</ul>
<p>创建一个分割后的数组，从<code>array</code>数组的结尾开始，分割<code>n</code>个元素出来。</p>
<p>例子：<br><figure class="highlight js"><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">_.takeRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</div><div class="line"><span class="comment">// =&gt; [3]</span></div><div class="line"></div><div class="line">_.takeRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [2, 3]</span></div><div class="line"></div><div class="line">_.takeRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">5</span>);</div><div class="line"><span class="comment">// =&gt; [1, 2, 3]</span></div><div class="line"></div><div class="line">_.takeRight([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">0</span>);</div><div class="line"><span class="comment">// =&gt; []</span></div></pre></td></tr></table></figure></p>
<h3 id="takeRightWhile"><a href="#takeRightWhile" class="headerlink" title="_.takeRightWhile"></a><code>_.takeRightWhile</code></h3><ul>
<li><code>_.takeRightWhile(array, [predicate=_.identity])</code></li>
</ul>
<p>同样是从<code>array</code>结尾开始分割数组，不过是通过<code>predicate</code>控制，直到返回<strong>falsey</strong>停止。<code>predicate</code>调用三个参数<code>value, index, array</code></p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>,  <span class="string">'active'</span>: <span class="literal">true</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,    <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.takeRightWhile(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> !o.active; &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['fred', 'pebbles']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.takeRightWhile(users, &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['pebbles']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.takeRightWhile(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; objects for ['fred', 'pebbles']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.takeRightWhile(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; []</span></div></pre></td></tr></table></figure></p>
<h3 id="takeWhile"><a href="#takeWhile" class="headerlink" title="_.takeWhile"></a><code>_.takeWhile</code></h3><ul>
<li><code>_.takeWhile(array, [predivate=_.identity])</code></li>
</ul>
<p>是从<code>array</code>开头开始分割数组，不过是通过<code>predicate</code>控制，直到返回<strong>falsey</strong>停止。<code>predicate</code>调用三个参数<code>value, index, array</code></p>
<p>例子：<br><figure class="highlight js"><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"><span class="keyword">var</span> users = [</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>,  <span class="string">'active'</span>: <span class="literal">false</span> &#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'fred'</span>,    <span class="string">'active'</span>: <span class="literal">false</span>&#125;,</div><div class="line">  &#123; <span class="string">'user'</span>: <span class="string">'pebbles'</span>, <span class="string">'active'</span>: <span class="literal">true</span> &#125;</div><div class="line">];</div><div class="line"></div><div class="line">_.takeWhile(users, <span class="function"><span class="keyword">function</span>(<span class="params">o</span>) </span>&#123; <span class="keyword">return</span> !o.active; &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['barney', 'fred']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matches` iteratee shorthand.</span></div><div class="line">_.takeWhile(users, &#123; <span class="string">'user'</span>: <span class="string">'barney'</span>, <span class="string">'active'</span>: <span class="literal">false</span> &#125;);</div><div class="line"><span class="comment">// =&gt; objects for ['barney']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.matchesProperty` iteratee shorthand.</span></div><div class="line">_.takeWhile(users, [<span class="string">'active'</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; objects for ['barney', 'fred']</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.takeWhile(users, <span class="string">'active'</span>);</div><div class="line"><span class="comment">// =&gt; []</span></div></pre></td></tr></table></figure></p>
<h3 id="union"><a href="#union" class="headerlink" title="_.union"></a><code>_.union</code></h3><ul>
<li><code>_.union([arrays])</code></li>
</ul>
<p>创建一个没有重复值的数组，组合所有被传入的数组元素。</p>
<p>例子：<br><figure class="highlight js"><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">_.union([<span class="number">2</span>], [<span class="number">1</span>, <span class="number">2</span>]);</div><div class="line"><span class="comment">// =&gt; [2, 1]</span></div></pre></td></tr></table></figure></p>
<h3 id="unionBy"><a href="#unionBy" class="headerlink" title="_.unionBy"></a><code>_.unionBy</code></h3><ul>
<li><code>_.unionBy([arrays], [iteratee=_.identity])</code></li>
</ul>
<p>通过<code>iteratee</code>对每个元素值进行执行，生成一个唯一性的标准，并选择第一个出现的值，作为要返回的值，去除重复的元素。<code>iteratee</code>调用一个参数<code>value</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.unionBy([<span class="number">2.1</span>], [<span class="number">1.2</span>, <span class="number">2.3</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; [2.1, 1.2]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.unionBy([&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], [&#123; <span class="string">'x'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], <span class="string">'x'</span>);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 1 &#125;, &#123; 'x': 2 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="unionWith"><a href="#unionWith" class="headerlink" title="_.unionWith"></a><code>_.unionWith</code></h3><ul>
<li><code>_.unionWith([arrays], [comparator])</code></li>
</ul>
<p>这个没太看懂。。。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> objects = [&#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">2</span>, <span class="string">'y'</span>: <span class="number">1</span> &#125;];</div><div class="line"><span class="keyword">var</span> others = [&#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">2</span> &#125;];</div><div class="line"></div><div class="line">_.unionWith(objects, others, _.isEqual);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 1, 'y': 2 &#125;, &#123; 'x': 2, 'y': 1 &#125;, &#123; 'x': 1, 'y': 1 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="uniq"><a href="#uniq" class="headerlink" title="_.uniq"></a><code>_.uniq</code></h3><ul>
<li><code>_.uniq(array)</code></li>
</ul>
<p>数组去重。</p>
<p>例子：<br><figure class="highlight js"><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">_.uniq([<span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>]);</div><div class="line"><span class="comment">// =&gt; [2, 1]</span></div></pre></td></tr></table></figure></p>
<h3 id="uniqBy"><a href="#uniqBy" class="headerlink" title="_.uniqBy"></a><code>_.uniqBy</code></h3><ul>
<li><code>_.uniqBy(array, [iteratee=_.identity])</code></li>
</ul>
<p>这个方法是有条件的数组去重，通过<code>iteratee</code>迭代器生成一个唯一性的标准。<code>iteratee</code>调用一个参数<code>value</code>.</p>
<p>例子：<br><figure class="highlight js"><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">_.uniqBy([<span class="number">2.1</span>, <span class="number">1.2</span>, <span class="number">2.3</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; [2.1, 1.2]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.uniqBy([&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], <span class="string">'x'</span>);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 1 &#125;, &#123; 'x': 2 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="uniqWith"><a href="#uniqWith" class="headerlink" title="_.uniqWith"></a><code>_.uniqWith</code></h3><ul>
<li><code>_.uniqWith(array, [comparator])</code></li>
</ul>
<p>没太分清<code>_.uniqWith</code>和<code>_.uniqBy</code>之间有什么区别。<code>_.uniqWith</code>传入的是一个比较器。<code>comparator</code>调用两个参数<code>arrVal, othVal</code>。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> objects = [&#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">2</span>, <span class="string">'y'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">2</span> &#125;];</div><div class="line"></div><div class="line">_.uniqWith(objects, _.isEqual);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 1, 'y': 2 &#125;, &#123; 'x': 2, 'y': 1 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="without"><a href="#without" class="headerlink" title="_.without"></a><code>_.without</code></h3><ul>
<li><code>_.without(array, [values])</code></li>
</ul>
<p>创建一个新的数组，去除所有传入的<code>values</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.without([<span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="number">1</span>, <span class="number">2</span>);</div><div class="line"><span class="comment">// =&gt; [3]</span></div></pre></td></tr></table></figure></p>
<h3 id="xor"><a href="#xor" class="headerlink" title="_.xor"></a><code>_.xor</code></h3><ul>
<li><code>_.xor([arrays])</code></li>
</ul>
<p><strong>xor</strong>就是异或，相同为0，不同为1，1为<code>true</code>，应该被返回。<br>创建一个唯一值的数组，返回被给数组之间对称差（没有交集的部分）的元素。结果值的顺序由它们在数组中出现的顺序确定。</p>
<p>例子：<br><figure class="highlight js"><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">_.xor([<span class="number">2</span>, <span class="number">1</span>, <span class="number">4</span>], [<span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>]);</div><div class="line"><span class="comment">// =&gt; [1, 4, 3, 5]</span></div><div class="line"></div><div class="line">_.xor([<span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]);</div><div class="line"><span class="comment">// =&gt; [2, 3, 4, 5, 6]</span></div></pre></td></tr></table></figure></p>
<h3 id="xorBy"><a href="#xorBy" class="headerlink" title="_.xorBy"></a><code>_.xorBy</code></h3><ul>
<li><code>_.xorBy([arrays], [iteratee=_.identity])</code></li>
</ul>
<p>有条件的<code>_.xor</code>方法，和所有<code>_.xxBy</code>方法一样，接收一个<code>iteratee</code>方法生成一个标准，<code>iteratee</code>接受一个参数<code>value</code>。</p>
<p>例子：<br><figure class="highlight js"><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">_.xorBy([<span class="number">2.1</span>, <span class="number">1.2</span>], [<span class="number">2.3</span>, <span class="number">3.4</span>], <span class="built_in">Math</span>.floor);</div><div class="line"><span class="comment">// =&gt; [1.2, 3.4]</span></div><div class="line"></div><div class="line"><span class="comment">// The `_.property` iteratee shorthand.</span></div><div class="line">_.xorBy([&#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], [&#123; <span class="string">'x'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span> &#125;], <span class="string">'x'</span>);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 2 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="xorWith"><a href="#xorWith" class="headerlink" title="_.xorWith"></a><code>_.xorWith</code></h3><ul>
<li><code>_.xorWith([arrays], [comparator])</code></li>
</ul>
<p>这个方法类似于<code>_.xor</code>，除了它接受比较器<code>comparator</code>，它被调用来比较数组的元素。结果值的顺序由它们在数组中出现的顺序确定。<code>comparator</code>调用两个参数<code>arrVal，othVal</code>。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> objects = [&#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">2</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">2</span>, <span class="string">'y'</span>: <span class="number">1</span> &#125;];</div><div class="line"><span class="keyword">var</span> others = [&#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">1</span> &#125;, &#123; <span class="string">'x'</span>: <span class="number">1</span>, <span class="string">'y'</span>: <span class="number">2</span> &#125;];</div><div class="line"></div><div class="line">_.xorWith(objects, others, _.isEqual);</div><div class="line"><span class="comment">// =&gt; [&#123; 'x': 2, 'y': 1 &#125;, &#123; 'x': 1, 'y': 1 &#125;]</span></div></pre></td></tr></table></figure></p>
<h3 id="zip"><a href="#zip" class="headerlink" title="_.zip"></a><code>_.zip</code></h3><ul>
<li><code>_.zip([arrays])</code></li>
</ul>
<p>创建一个元素组数组，把每个传入数组，第一个元素组合到一起，第二个元素组合在一起，以此类推。</p>
<p>例子：<br><figure class="highlight js"><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">_.zip([<span class="string">'a'</span>, <span class="string">'b'</span>], [<span class="number">1</span>, <span class="number">2</span>], [<span class="literal">true</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; [['a', 1, true], ['b', 2, false]]</span></div><div class="line"></div><div class="line">_.zip([<span class="string">'a'</span>, <span class="string">'b'</span>], [<span class="number">1</span>], [<span class="literal">true</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; [['a', 1, true], ['b', undefined, false]]</span></div></pre></td></tr></table></figure></p>
<h3 id="unzip"><a href="#unzip" class="headerlink" title="_.unzip"></a><code>_.unzip</code></h3><ul>
<li><code>_.unzip(array)</code></li>
</ul>
<p>就是把<code>_.zip</code>函数打包好的，或是元素组数组，对其进行解包。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> zipped = _.zip([<span class="string">'a'</span>, <span class="string">'b'</span>], [<span class="number">1</span>, <span class="number">2</span>], [<span class="literal">true</span>, <span class="literal">false</span>]);</div><div class="line"><span class="comment">// =&gt; [['a', 1, true], ['b', 2, false]]</span></div><div class="line"></div><div class="line">_.unzip(zipped);</div><div class="line"><span class="comment">// =&gt; [['a', 'b'], [1, 2], [true, false]]</span></div></pre></td></tr></table></figure></p>
<h3 id="zipObject"><a href="#zipObject" class="headerlink" title="_.zipObject"></a><code>_.zipObject</code></h3><ul>
<li><code>_.zipObject([props=[]], [values=[]])</code></li>
</ul>
<p>这个方法很像<code>_.fromPairs</code>，<code>_.zipObject</code>接受两个数组，一个属性数组和一个相应的对应值数组。</p>
<p>例子：<br><figure class="highlight js"><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">_.zipObject([<span class="string">'a'</span>, <span class="string">'b'</span>], [<span class="number">1</span>, <span class="number">2</span>]);</div><div class="line"><span class="comment">// =&gt; &#123; 'a': 1, 'b': 2 &#125;</span></div><div class="line"></div><div class="line">_.zipObject([<span class="string">'a'</span>, <span class="string">'b'</span>], [<span class="number">1</span>]);</div><div class="line"><span class="comment">// =&gt; &#123; 'a': 1, 'b': undefined &#125;</span></div></pre></td></tr></table></figure></p>
<h3 id="zipObjectDeep"><a href="#zipObjectDeep" class="headerlink" title="_.zipObjectDeep"></a><code>_.zipObjectDeep</code></h3><ul>
<li>`_.zipObjectDeep([props=[]], [values=[]])</li>
</ul>
<p>这个方法像<code>_.zipObject</code>方法一样，不过它支持属性路径<code>property paths</code></p>
<p>例子：<br><figure class="highlight js"><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">_.zipObjectDeep([<span class="string">'a.b[0].c'</span>, <span class="string">'a.b[1].d'</span>], [<span class="number">1</span>, <span class="number">2</span>]);</div><div class="line"><span class="comment">// =&gt; &#123; 'a': &#123; 'b': [&#123; 'c': 1 &#125;, &#123; 'd': 2 &#125;] &#125; &#125;</span></div></pre></td></tr></table></figure></p>
<h3 id="zipWith"><a href="#zipWith" class="headerlink" title="_.zipWith"></a><code>_.zipWith</code></h3><ul>
<li><code>_.zipWith([arrays], [iteratee=_.identity])</code></li>
</ul>
<p>这个方法像类似<code>_.zip</code>，接受一个迭代器<code>iteratee</code>去指定怎么如何组合分组值。这个迭代器为每个组的元素调用<code>...group</code>，还是看例子比较直观。</p>
<p>例子：<br><figure class="highlight js"><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">_.zipWith([<span class="number">1</span>, <span class="number">2</span>], [<span class="number">10</span>, <span class="number">20</span>], [<span class="number">100</span>, <span class="number">200</span>], <span class="function"><span class="keyword">function</span>(<span class="params">a, b, c</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> a + b + c;</div><div class="line">&#125;);</div><div class="line"><span class="comment">// =&gt; [111, 222]</span></div></pre></td></tr></table></figure></p>
<h3 id="unzipWith"><a href="#unzipWith" class="headerlink" title="_.unzipWith"></a><code>_.unzipWith</code></h3><ul>
<li><code>_.unzipWith(array, [iteratee=_.identity])</code></li>
</ul>
<p>这个方法很像<code>_.unzip</code>，它接受一个迭代器<code>iteratee</code>去指定怎样重组组合值。<code>iteratee</code>调用一个参数<code>...group</code>。</p>
<p>例子：<br><figure class="highlight js"><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="keyword">var</span> zipped = _.zip([<span class="number">1</span>, <span class="number">2</span>], [<span class="number">10</span>, <span class="number">20</span>], [<span class="number">100</span>, <span class="number">200</span>]);</div><div class="line"><span class="comment">// =&gt; [[1, 10, 100], [2, 20, 200]]</span></div><div class="line"></div><div class="line">_.unzipWith(zipped, _.add);</div><div class="line"><span class="comment">// =&gt; [3, 30, 300]</span></div></pre></td></tr></table></figure></p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;strong&gt;Lodash&lt;/strong&gt;是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。还有一个类似的库是&lt;strong&gt;underscore&lt;/strong&gt;，不过&lt;strong&gt;underscore&lt;/strong&gt;不能按需加载。&lt;br&gt;朋友说：这种工具库，平时都是先用先写的。&lt;br&gt;不过我觉得，还是很有必要学习一下的，看下源码的实现。&lt;br&gt;本文主要是对&lt;strong&gt;Lodash&lt;/strong&gt;的API,用自己理解的方式做一下说明。可能理解有误，不过还是要记录下来，当再用的时候有据可查。&lt;/p&gt;
    
    </summary>
    
    
      <category term="lodash" scheme="https://yeaseonzhang.github.io/tags/lodash/"/>
    
  </entry>
  
</feed>