atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>lightSky&#39;Blog</title>
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://www.lightskystreet.com/"/>
  <updated>2016-11-22T01:32:23.000Z</updated>
  <id>http://www.lightskystreet.com/</id>
  
  <author>
    <name>lightSky</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>设计模式基础</title>
    <link href="http://www.lightskystreet.com/2016/11/23/design-summary/"/>
    <id>http://www.lightskystreet.com/2016/11/23/design-summary/</id>
    <published>2016-11-22T16:00:00.000Z</published>
    <updated>2016-11-22T01:32:23.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h3><p>最近在负责一个新项目的基础搭建，过程中涉及到一些模块的划分、设计，之前也确实没有系统的学习过设计模式相关的知识，因此就花了些时间看了下设计模式，记录下来。本篇为设计模式的一些基础概念，但我觉得受益匪浅，当你掌握了基本概念和一些理论，才能更好地去从更高的层次去理解、设计一个模块，一些新知识的学习也是如此，Rx、RN，这些框架的思想都很重要，当然最终还是要回归到实践，才能更深地理解和掌握某一个新技术和新知识点。后面会有设计模式相关的文章，除了一些设计模式的具体介绍也会对一些优秀开源库从设计方面做一些分析，有兴趣的，可以关注下。</p>
<h2 id="一-设计模式的分类"><a href="#一-设计模式的分类" class="headerlink" title="一 设计模式的分类"></a>一 设计模式的分类</h2><h3 id="目的准则"><a href="#目的准则" class="headerlink" title="目的准则"></a>目的准则</h3><p>模依据其目的可分为创建型 (Creational)、 结构型(Structural) 、 或行为型(Behavioral) 三种。</p>
<ul>
<li>创建型模式与对象的创建有关</li>
<li>结构型模式处理类或对象的组合</li>
<li>行为型模式对类或对象怎样交互和怎样分配职责进行描述</li>
</ul>
<h3 id="范围准则"><a href="#范围准则" class="headerlink" title="范围准则"></a>范围准则</h3><p>指定模式主要是用于类还是用于对象</p>
<ul>
<li>类模式处理类和子类之间的关系，这些关系通过继承建立，是静态的，在编译时刻便确定下来了</li>
<li>对象模式处理对象间的关系，这些关系在运行时刻是可以变化的，更具动态性</li>
<li>创建型类模式将对象的部分创建工作延迟到子类，而创建型对象模式则将它延迟到另一 个对象中</li>
</ul>
<a id="more"></a>
<p><img src="/img/designpattern/pattern-category.png">  </p>
<h2 id="二-描述对象的实现"><a href="#二-描述对象的实现" class="headerlink" title="二 描述对象的实现"></a>二 描述对象的实现</h2><h3 id="2-1-类继承与接口实现的比较"><a href="#2-1-类继承与接口实现的比较" class="headerlink" title="2.1.类继承与接口实现的比较"></a>2.1.类继承与接口实现的比较</h3><p>一个类定义了对象的实现，同时也定义了对象的内部状态和操作的实现。</p>
<p>对象类型只与它的接口有关，接口即是对象能响应请求的集合。一个对象可以有多个类型，不同的对象可以有相同的类型。</p>
<p>类继承根据一个对象的实现定义另一个对象的实现。简而言之，它是代码和表示的共享机制。而接口继实现(或类型化)描述一个对象什么时候能替换另一个对象。</p>
<h3 id="2-2-针对接口编程，而不是针对实现编程"><a href="#2-2-针对接口编程，而不是针对实现编程" class="headerlink" title="2.2.针对接口编程，而不是针对实现编程"></a>2.2.<strong>针对接口编程，而不是针对实现编程</strong></h3><p>类继承是通过复用父类功能扩展应用功能的基本机制，创建和使用都比较简单。但为了让继承体系拥有相同接口的对象的能力很重要，因为多态依赖这种能力，实现动态绑定。为了达到这种能力，可以通过抽象类来实现，所有从抽象类导出的类将共享该抽象类的接口。</p>
<p>只根据抽象类中定义的接口来操纵对象有以下两个好处:</p>
<ul>
<li>使用者无须知道对象的特定类型，只须对象有他们所期望的接口</li>
<li>使用者无须知道对象是用什么类来实现的，他们只须知道定义接口的抽象类</li>
</ul>
<p>这将极大地减少子系统实现之间的相互依赖关系，也产生了可复用的面向对象设计的原则:</p>
<blockquote>
<p>针对接口编程，而不是针对实现编程</p>
</blockquote>
<p>通常我们不应该将变量声明为某个特定的具体类对象，而是让它遵从抽象类所定义的接口。</p>
<p>当你不得不在系统的某个地方实例化具体的类 (即指定一个特定的实现 )时，可采用创建型模式。创建型模可以确保我们的系统针对接口编程，而不是针对实现。</p>
<h2 id="三-运用复用机制"><a href="#三-运用复用机制" class="headerlink" title="三 运用复用机制"></a>三 运用复用机制</h2><p>理解对象、接口、类和继承之类的概念并不难，问题的关键在于如何运它们写出灵活的、可复的软件。        </p>
<p>​    </p>
<h3 id="3-1-继承和组合的比较"><a href="#3-1-继承和组合的比较" class="headerlink" title="3.1 继承和组合的比较"></a>3.1 继承和组合的比较</h3><p>面向对象系统中功能复用的两种最常用技术是<strong>类继承</strong>和<strong>对象组合(object composition)</strong>。</p>
<h4 id="类继承"><a href="#类继承" class="headerlink" title="类继承"></a>类继承</h4><p>类继承允许你根据现有的类来定义一个类的实现。这种通过生成子类的复用通常被称为<strong>白箱复用</strong>(white-box reuse)。“白箱”是相对可视性而言:在继承方 式中，父类的内部细节对子类可见。</p>
<ul>
<li><p>优点</p>
<p>类继承是在编译时刻静态定义的，且可直接使用，也可以方便的实现复用。当子类定义了部分操作时，它也能影响子类的操作。</p>
<p>​</p>
</li>
</ul>
<ul>
<li><p>缺点</p>
<p><strong>静态的</strong></p>
<p>因为继承在编译时刻就定义了，所以无法在运行时刻改变从父类继承的实现。</p>
<p>​</p>
<p><strong>破坏了封装性</strong></p>
<p>父类通常至少定义了部分子类的具体表示。因为继承对子类揭示了其父类的实现细节，导致父类实现中的任何变化必然导致子类发生变化。</p>
</li>
</ul>
<h4 id="对象组合"><a href="#对象组合" class="headerlink" title="对象组合"></a>对象组合</h4><p>对象组合是类继承之外的另一种复用选择。复杂的功能可以通过组装或组合对象来获得。</p>
<p>这种复用风格被称为<strong>黑箱复用</strong> (black-box reuse)，因为对象的内部细节是不可见的。</p>
<ul>
<li><p>优点</p>
<p><strong>良好的封装性</strong></p>
<p>组合要求对象遵守彼此的接口约定，而这些接口并不妨碍你将一个对象和其他对象 一起使用。因为对象只能通过接口访问，所以并不破坏封装性。而且由于对象的实现是基于接口写的，所以实现上存在较少的依赖关系。</p>
<p>​</p>
<p><strong>较小规模的类层次</strong></p>
<p>对象组合对系统设计还有另一个作用，即优先使用对象组合有助于你保持每个类被封装并被集中在单个任务上。因此，基于对象组合的设计会有更多的对象 (而有较少的类)，这样类和类继承层次会保持较小规模，并且不太可能增长为不可控的庞然大物。</p>
<p>​</p>
<p><strong>动态性</strong></p>
<p>对象组合是通过获得对其他对象的引用而在<strong>运行时刻动态</strong>定义的。且系统的行为将依赖于对象间的关系而不是被定义在某个类中，只要类型一致，运行时刻还可以用一个对象来替代另一个对象。</p>
</li>
</ul>
<ul>
<li><p>缺点</p>
<p>动态的、 高度参数化的软件比静态软件更难于理解</p>
<p>因为存在间接性，运行效率低效</p>
<p>​</p>
</li>
</ul>
<p><strong>基于以上优点，在实际开发中，因优先使用组合、而不是继承</strong></p>
<h3 id="3-2-委托"><a href="#3-2-委托" class="headerlink" title="3.2 委托"></a>3.2 委托</h3><p>委托(delegation) 是一种组合方式，它使组合具有与继承同样的复用能力。</p>
<p>在委托方式下，有两个对象参与处理一个请求，接受请求的对象将操作委托给它的代理者(delegate)。这类似于子类将请求交给它的父类处理。</p>
<ul>
<li><p>优点</p>
<p>在于它便于<strong>运行时刻</strong>组合对象操作以及改变这些操作的组合方式。</p>
</li>
<li><p>缺点</p>
<p>与对象组合以取得软件灵活性的技术一样，动态的、 高度参数化的软件比静态软件更难于理解</p>
<p>因为存在间接性，运行效率较低</p>
</li>
</ul>
<p>委托的效率与上下有关，也与开发者的个人经验有关。委托最适于符合特定的情形，即标准模式的情形。有一些模式使用了委托，如 <code>State</code> 、<code>Strategy</code>和<code>Visitor</code></p>
<p>委托是对象组合的特例。它告诉你对象组合作为一个代码复用机制可以替代继承。</p>
<h2 id="四-设计应支持变化"><a href="#四-设计应支持变化" class="headerlink" title="四 设计应支持变化"></a>四 设计应支持变化</h2><p>为了避免后期的重构和重新设计，构建健壮性的系统，我们在写代码之前必须考虑系统在它的生命周期内会发生怎样的变化。设计模式可以确保系统能以特定方式变化，从而帮助我们避免重新设计系统。每一个设计模式可以确保系统结构的某个方面的变化独立于其他方面，这样产生的系统对于某一种特殊变化将更健壮。</p>
<p>下面阐述一些导致重新设计的一般原因，以及解决这些问题的设计模式:</p>
<p><strong>1) 通过显式地指定一个类来创建对象</strong></p>
<p>这种创建对象的方式使得我们的代码受限于特定实现而不是接口。这会使未来的变化更复杂。要避免这种情况，应该间接地创建对象。</p>
<p>设计模式: AbstractFactory，FactoryMethod，Prototype</p>
<p><strong>2) 对特殊操作的依赖</strong> </p>
<p>当你为请求指定一个特殊的操作时，完成该请求的方式就固定下来了。为避免把请求代码写死，你将可以在编译时刻或运行时刻很方便地改变响应请求的方法。</p>
<p>设计模式: ChainofResposibility，Command</p>
<p><strong>3) 对硬件和平台的依赖</strong></p>
<p>依赖于特定平台的软件将很难移植到其他平台上，甚至都很难跟上本地平台的更新。所以设计系统时限制其平台相关性就很重要了。</p>
<p>设计模式: AbstractFactory ，Bridge</p>
<p><strong>4) 对对象表示或实现的依赖</strong> </p>
<p>知道对象怎样表示、保存、定位或实现的客户在对象发生变化时可能也需要变化。对客户隐藏这些信息能阻止连锁变化。</p>
<p>设计模式: AbstractFactory ，Bridge，Memento，Proxy</p>
<p><strong>5) 算法依赖</strong></p>
<p>算法在开发和复用时常常被扩展、优化和替代。依赖于某个特定算法的对象在算法发生变化时不得不变化。因此有可能发生变化的算法应该被孤立起来。</p>
<p>设计模式: Builder 、Interator、Strategy、TemplateMethod、Visitor</p>
<p><strong>6) 紧耦合</strong></p>
<p>紧耦合的类很难独立地被复用，因为它们是互相依赖的。要改变或删掉一个类，你必须理解和改变其他许多类。这样的系统很难学习、移植和维护。</p>
<p>松散耦合提高了一个类本身被复用的可能性，并且系统更易于学习、移植、修改和扩展。设计模式使用抽象耦合和分层技术来提高系统的松散耦合性。</p>
<p>设计模式: AbstractFactory ，Command ， Facade， Mediator，Observer ，Chain of Responsibility</p>
<p><strong>7) 通过生成子类来扩充功能</strong></p>
<p>通常很难通过定义子类来定制对象。每一个新类都有固定的实现开销(初始化、终止处理等)。定义子类还需要对父类有深入的了解。并且子类方法会导致类爆炸，因为即使对于一个简单的扩充，你也不得不引入许多新的子类。</p>
<p>对象组合技术和委托技术是继承之外组合对象行为的另一种灵活方法。新的功能可以通过以新的方式组合已有对象来实现。但是，如果过多地使用对象组合会使设计难于理解。</p>
<p>设计模式: Bridge， Chain of Responsibility ，Composite， Decorator，Observer ， Strategy</p>
<p><strong>8) 不能方便地对类进行修改</strong></p>
<p>有时你需要修改一个类，但是却没有源代码。或者可能对类的任何改变会要求修改许多已存在的其他子类。</p>
<p>设计模式: Adapter， Decorator ， Visitor </p>
<h2 id="五-如何选择设计模式"><a href="#五-如何选择设计模式" class="headerlink" title="五 如何选择设计模式"></a>五 如何选择设计模式</h2><p>我觉得首先就是对设计模式有一些了解，明白它们的分类、意图、使用场景，然后对遇到的问题，场景进行抽象，找出变化的地方，然后选择适当的设计模式将这些变化进行封装。</p>
<p>当然，设计模式不应该被滥用。因为通过引入额外的间接层次获得灵活性和可变性的同时，也使设计变得更复杂并 /或牺牲了一定的性能。一个设计模式只有当它提供的灵活性是真正需要的时候，才有必要使用。</p>
<p>下图列出了设计模式允许独立变化的方面，你可以改变它们而不会导致重新设计：</p>
<p><img src="/img/designpattern/pattern-variety.png">  </p>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;概述&quot;&gt;&lt;a href=&quot;#概述&quot; class=&quot;headerlink&quot; title=&quot;概述&quot;&gt;&lt;/a&gt;概述&lt;/h3&gt;&lt;p&gt;最近在负责一个新项目的基础搭建，过程中涉及到一些模块的划分、设计，之前也确实没有系统的学习过设计模式相关的知识，因此就花了些时间看了下设计模式，记录下来。本篇为设计模式的一些基础概念，但我觉得受益匪浅，当你掌握了基本概念和一些理论，才能更好地去从更高的层次去理解、设计一个模块，一些新知识的学习也是如此，Rx、RN，这些框架的思想都很重要，当然最终还是要回归到实践，才能更深地理解和掌握某一个新技术和新知识点。后面会有设计模式相关的文章，除了一些设计模式的具体介绍也会对一些优秀开源库从设计方面做一些分析，有兴趣的，可以关注下。&lt;/p&gt;
&lt;h2 id=&quot;一-设计模式的分类&quot;&gt;&lt;a href=&quot;#一-设计模式的分类&quot; class=&quot;headerlink&quot; title=&quot;一 设计模式的分类&quot;&gt;&lt;/a&gt;一 设计模式的分类&lt;/h2&gt;&lt;h3 id=&quot;目的准则&quot;&gt;&lt;a href=&quot;#目的准则&quot; class=&quot;headerlink&quot; title=&quot;目的准则&quot;&gt;&lt;/a&gt;目的准则&lt;/h3&gt;&lt;p&gt;模依据其目的可分为创建型 (Creational)、 结构型(Structural) 、 或行为型(Behavioral) 三种。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;创建型模式与对象的创建有关&lt;/li&gt;
&lt;li&gt;结构型模式处理类或对象的组合&lt;/li&gt;
&lt;li&gt;行为型模式对类或对象怎样交互和怎样分配职责进行描述&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;范围准则&quot;&gt;&lt;a href=&quot;#范围准则&quot; class=&quot;headerlink&quot; title=&quot;范围准则&quot;&gt;&lt;/a&gt;范围准则&lt;/h3&gt;&lt;p&gt;指定模式主要是用于类还是用于对象&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;类模式处理类和子类之间的关系，这些关系通过继承建立，是静态的，在编译时刻便确定下来了&lt;/li&gt;
&lt;li&gt;对象模式处理对象间的关系，这些关系在运行时刻是可以变化的，更具动态性&lt;/li&gt;
&lt;li&gt;创建型类模式将对象的部分创建工作延迟到子类，而创建型对象模式则将它延迟到另一 个对象中&lt;/li&gt;
&lt;/ul&gt;
    
    </summary>
    
      <category term="设计模式" scheme="http://www.lightskystreet.com/categories/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"/>
    
    
      <category term="设计模式" scheme="http://www.lightskystreet.com/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"/>
    
  </entry>
  
  <entry>
    <title>multidex与插件化</title>
    <link href="http://www.lightskystreet.com/2016/11/11/android-dex-plugin/"/>
    <id>http://www.lightskystreet.com/2016/11/11/android-dex-plugin/</id>
    <published>2016-11-10T16:00:00.000Z</published>
    <updated>2016-11-11T02:01:42.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>随着应用越来越大，很多大型应用都会遇到方法数的爆棚以及方法信息存储区的问题，该篇文章主要以这两种问题为背景，介绍dex拆分、加载以及插件化方案的一些技术点。</p>
<h3 id="65536-与-INSTALL-FAILED-DEXOPT"><a href="#65536-与-INSTALL-FAILED-DEXOPT" class="headerlink" title="65536 与 INSTALL_FAILED_DEXOPT"></a>65536 与 INSTALL_FAILED_DEXOPT</h3><ol>
<li><p>生成的apk在android 2.3或之前的机器上无法安装，提示<code>INSTALL_FAILED_DEXOPT</code></p>
</li>
<li><p>方法数量过多，编译时出错，提示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Conversion to Dalvik format failed:Unable to execute dex: method ID not in [0, 0xffff]: 65536</div></pre></td></tr></table></figure>
</li>
</ol>
<p><strong>Android 2.3 INSTALL_FAILED_DEXOPT 的问题</strong></p>
<p>该问题由dexopt的LinearAlloc限制引起的， 在Gingerbread或者以下系统LinearAllocHdr分配空间只有5M大小的。</p>
<blockquote>
<p>Dalvik linearAlloc是一个固定大小的缓冲区。在应用的安装过程中，系统会运行一个名为dexopt的程序为该应用在当前机型中运行做准备。dexopt使用LinearAlloc来存储应用的方法信息。当方法数量过多导致超出缓冲区大小时，会造成dexopt崩溃。 目前Android 4.x提高到了8MB或16MB，在很大程度上解决了这个问题。</p>
</blockquote>
<p><strong>超过最大方法数限制的问题</strong></p>
<p>该问题是由DEX文件格式限制。一个DEX文件中method个数采用使用原生类型short来索引文件中的方法，也就是4个字节共计最多表达65536个method，field/class的个数也均有此限制。对于DEX文件，则是将工程所需全部class文件合并且压缩到一个DEX文件期间，也就是Android打包的DEX过程中， 单个DEX文件可被引用的方法总数（自己开发的代码以及所引用的Android框架、类库的代码）被限制为65536；</p>
<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a><strong>解决方案</strong></h3><ul>
<li>Android系统的LinearAlloc空间大小，在高版本上已经提升了，所以在一定程度上，不会出现这个问题，Facebook则采用了一种hack的方式，直接修改虚拟机的LinearAlloc空间大小：<a href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-dalvik-patch-for-facebook-for-android/10151345597798920/" target="_blank" rel="external">Dalvik patch for Facebook for Android</a></li>
<li>拆分Dex，官方有提供方案<a href="https://developer.android.com/tools/building/multidex.html" target="_blank" rel="external">Google Multidex</a>，让一个apk里支持多个.dex文件，这样就可以突破65536的限制，但该方案有一定的弊端，下面会提到</li>
<li>插件化，将整个工程的划分为Host+多个插件的形式，这样就可以将方法分散到各个插件中，按需加载各个模块。从软件工程的角度来看，这种方案会更好，动态部署，并行开发，更高的编译效率，但这种方案对已有的大项目来讲，重构起来影响非常大，实现成本也相对较高</li>
<li>使用ProGuard等其它优化工具清除项目中无用方法，第三方库中的方法进行清除处理，这个可以作为优化的手段，但对于大型应用上，并不能从根本上解决方法数的问题</li>
</ul>
<p>上面也提到，在高版本上，LinearAlloc方法区的空间已经扩大了很多，所以LinearAlloc的问题很少会再出现。采用dex的拆分以及插件化后并按需加载，对避免LinearAlloc的问题也更有益。</p>
<a id="more"></a>
<h3 id="各个公司所采取的方案"><a href="#各个公司所采取的方案" class="headerlink" title="各个公司所采取的方案"></a><strong>各个公司所采取的方案</strong></h3><ul>
<li>美团点评、手Q、微信采用dex拆分方案</li>
</ul>
<ul>
<li>携程采用插件化方案</li>
</ul>
<ul>
<li>手淘近期发布的Atlas，采用了容器化的概念，所有业务的bundle运行在一个容器中，按需加载，也可以看做是一种高级的插件化</li>
</ul>
<p>下面主要介绍一下dex方案和插件化的主要方案流程和遇到的问题</p>
<h2 id="Dex方案"><a href="#Dex方案" class="headerlink" title="Dex方案"></a>Dex方案</h2><h3 id="如何拆分Dex"><a href="#如何拆分Dex" class="headerlink" title="如何拆分Dex"></a><strong>如何拆分Dex</strong></h3><p>官方已经推出<a href="https://developer.android.com/tools/building/multidex.html" target="_blank" rel="external">Google Multidex</a>方，但官方的问题在于：如果DEX文件过大时，处理时间就会越长，很容易引发ANR。因此通常会采取动态加载dex的方式，并尽量保持首次加载的mainDex中的类尽量少。</p>
<p><strong>mainDex</strong>：主要是一些Android的基础组件和类，比如<code>Application</code>、<code>ContentProvider</code>、<code>Service</code>、<code>Receiver</code>以及必要的<code>Activity</code>和其依赖集。如果mainDex还包括应用的首页等界面，那么也要将相关的依赖都放到mainDex中。</p>
<h3 id="如何动态加载Dex"><a href="#如何动态加载Dex" class="headerlink" title="如何动态加载Dex"></a><strong>如何动态加载Dex</strong></h3><p>dex拆分完了，也解决了首次加载mainDex的问题，那么如何动态加载其它dex呢？比如，加入我们在mainDex中放入了首页，这时候，点击某一个入口，而该入口的业务放在了其它的Dex中，这时候如何加载呢？</p>
<p>通常的处理肯定都是先判断是否已经加载过，如果没加载就先展示一个友好的loading界面然后去加载。思路确实是这样，具体的实现因人而异。</p>
<p><strong>微信、QQ空间的方案</strong></p>
<p>在app进入首页之前，在异步线程中加载</p>
<p>加载逻辑这边主要判断是否已经dexopt，若已经dexopt，即放在attachBaseContext加载，反之放于地球中用线程加载。怎么判断？其实很低级，因为在微信中，若判断revision改变，即将dex以及dexopt目录清空。只需简单判断两个目录dex名称、数量是否与配置文件的一致。</p>
<p><strong>美团点评的方案</strong></p>
<p>按需加载</p>
<p>在Activity的启动过程，修改Instrumentation中的逻辑，因为Instrumentation有关Activity启动相关的方法大概有：execStartActivity、newActivity等等，在这些方法中添加代码逻辑进行判断这个Class是否加载了，如果加载则直接启动这个Activity，如果没有加载完成则启动一个等待的Activity显示给用户，然后在这个Activity中等待后台Secondary DEX加载完成，完成后自动跳转到用户实际要跳转的Activity。</p>
<h2 id="插件化方案"><a href="#插件化方案" class="headerlink" title="插件化方案"></a><strong>插件化方案</strong></h2><p>携程采用了这种方案，个人觉得从开发的角度来看，该方案其实是一种比较干净的方案。每个业务团队开发独立的apk，互不干涉，较高的编译效率。因此，解决的不仅仅是方法数和LinearAlloc的问题，插件化的难点在于资源的编译和加载，最终也会涉及到multidex。下面就简单介绍一下这种方案的一些关键技术点。</p>
<p>我们知道一个Android应用主要以APK方式安装，每一个APK主要的部分为代码和资源，如何编译进去，以及如何加载它们是关键的两个问题，所以插件化主要会涉及到两个阶段的问题：</p>
<ul>
<li>编译期：资源和代码的编译</li>
<li>运行时：资源和代码的加载</li>
</ul>
<h3 id="编译期"><a href="#编译期" class="headerlink" title="编译期"></a>编译期</h3><h4 id="资源的编译"><a href="#资源的编译" class="headerlink" title="资源的编译"></a>资源的编译</h4><p>采用AAPT（资源编译依赖一个强大的命令行工具）对资源的编译流程进行改造。</p>
<ul>
<li>可以对一个已存在的apk包作为依赖资源参与编译，解决资源编译问题</li>
</ul>
<ul>
<li>通过aapt可以给每个子apk中的资源分配不同头字节PackageID，解决多个项目的资源冲突问题</li>
</ul>
<h4 id="代码的编译"><a href="#代码的编译" class="headerlink" title="代码的编译"></a>代码的编译</h4><p>对Java代码的编译大家比较熟悉，只需要注意以下几个问题即可：</p>
<ul>
<li><p>classpath</p>
<p>Java源码编译中需要找齐所有依赖项，classpath就是用来指定去哪些目录、文件、jar包中寻找依赖。</p>
</li>
<li><p>混淆</p>
<p>安全需要，Android工程通常都会被混淆，混淆的原理和配置可参考Proguard手册。</p>
</li>
</ul>
<h3 id="运行期"><a href="#运行期" class="headerlink" title="运行期"></a><strong>运行期</strong></h3><h4 id="资源加载"><a href="#资源加载" class="headerlink" title="资源加载"></a>资源加载</h4><p>平时使用到的资源都是通过AssetManager类和Resources类来访问的。获取它们的方法位于Context类中，因此复写这两个方法即可达到访问指定资源的目的：</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">private final Resources mResources;</div><div class="line"></div><div class="line">@Override</div><div class="line">public AssetManager getAssets() &#123;</div><div class="line">   return getResources().getAssets();</div><div class="line">&#125;</div><div class="line"></div><div class="line">@Override</div><div class="line">public Resources getResources() &#123;</div><div class="line">   return mResources;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>另外通过要需要接管所有Activity、Service等组件的创建（以便对Resources类进行替换）。具体可以通过篡改<code>mInstrumentation</code>为自己的<code>InstrumentationHook</code>，<code>mInstrumentation</code>是负责创建<code>Activity</code>等组件的类，每次创建Activity的时候把它的mResources类替换为DelegateResources。更多关于Activity的创建过程可以搜索相关资料，需要对Activity的创建和启动进行定制的时候，都会涉及到该部分的知识。</p>
<h4 id="代码加载"><a href="#代码加载" class="headerlink" title="代码加载"></a><strong>代码加载</strong></h4><p>这部分其实就是上面的dex装载方案，就不多介绍了</p>
<h3 id="插件化的好处"><a href="#插件化的好处" class="headerlink" title="插件化的好处"></a>插件化的好处</h3><ul>
<li>各业务的代码和项目控制上做到了高内聚低耦合，极大降低了沟通成本，提高了工作效率</li>
<li>解决了方法数的问题</li>
<li>大大提高编译速度</li>
<li>按需加载，启动速度优化，告别黑屏和启动ANR</li>
<li>可以作为hotFix方案，不仅支持class，也支持资源fix</li>
</ul>
<p>携程的插件化方案也已经开源：<a href="https://github.com/CtripMobile/DynamicAPK" target="_blank" rel="external">https://github.com/CtripMobile/DynamicAPK</a></p>
<p>其它的插件化方案也有多种，具体的可以参考Trinea的文章<a href="http://www.trinea.cn/android/android-plugin/" target="_blank" rel="external">Android 插件化 动态升级</a></p>
<h3 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h3><p>简单的总结下，这里介绍了一些中大型应用会遇到的空间和LinearAlloc空间的问题，最难的是资源的处理和装载，需要利用android提供的一些编译工具对编译流程进行改造。绕不过的是multidex，也会涉及到Activity等组件的初始化流程，Activity的启动过程这块的知识也是比较重要。本篇文章只是对目前插件化和dex的实现方案做了简要的概述，更细节的部分还是建议看各个公司发布的相关文章。</p>
<h4 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h4><p><a href="http://tech.meituan.com/mt-android-auto-split-dex.html" target="_blank" rel="external">美团Android DEX自动拆包及动态加载简介</a></p>
<p><a href="http://mp.weixin.qq.com/s?__biz=MzAwMTcwNTE0NA==&amp;mid=400217391&amp;idx=1&amp;sn=86181541ce0164156dfab135ed99bb5c&amp;scene=0&amp;key=b410d3164f5f798e61a5d4afb759fa38371c8b119384c6163a30c28163b4d4d5f59399f2400800ec842f1d0e0ffb84af&amp;ascene=0&amp;uin=MjExMjQ&amp;pass_ticket=Nt5Jaa28jjFxcQO9o%2BvQiXX%2B0iXG5DlZlHNW97Fk1Ew%3D" target="_blank" rel="external">携程插件化和动态加载实践</a></p>
<p><a href="http://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ==&amp;mid=207151651&amp;idx=1&amp;sn=9eab282711f4eb2b4daf2fbae5a5ca9a&amp;scene=4#wechat_redirect" target="_blank" rel="external">Android拆分与加载Dex的多种方案对比</a></p>
<p><a href="http://www.trinea.cn/android/android-plugin/" target="_blank" rel="external">Android 插件化 动态升级</a></p>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h3&gt;&lt;p&gt;随着应用越来越大，很多大型应用都会遇到方法数的爆棚以及方法信息存储区的问题，该篇文章主要以这两种问题为背景，介绍dex拆分、加载以及插件化方案的一些技术点。&lt;/p&gt;
&lt;h3 id=&quot;65536-与-INSTALL-FAILED-DEXOPT&quot;&gt;&lt;a href=&quot;#65536-与-INSTALL-FAILED-DEXOPT&quot; class=&quot;headerlink&quot; title=&quot;65536 与 INSTALL_FAILED_DEXOPT&quot;&gt;&lt;/a&gt;65536 与 INSTALL_FAILED_DEXOPT&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;&lt;p&gt;生成的apk在android 2.3或之前的机器上无法安装，提示&lt;code&gt;INSTALL_FAILED_DEXOPT&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;方法数量过多，编译时出错，提示：&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;Conversion to Dalvik format failed:Unable to execute dex: method ID not in [0, 0xffff]: 65536&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;Android 2.3 INSTALL_FAILED_DEXOPT 的问题&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;该问题由dexopt的LinearAlloc限制引起的， 在Gingerbread或者以下系统LinearAllocHdr分配空间只有5M大小的。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Dalvik linearAlloc是一个固定大小的缓冲区。在应用的安装过程中，系统会运行一个名为dexopt的程序为该应用在当前机型中运行做准备。dexopt使用LinearAlloc来存储应用的方法信息。当方法数量过多导致超出缓冲区大小时，会造成dexopt崩溃。 目前Android 4.x提高到了8MB或16MB，在很大程度上解决了这个问题。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;超过最大方法数限制的问题&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;该问题是由DEX文件格式限制。一个DEX文件中method个数采用使用原生类型short来索引文件中的方法，也就是4个字节共计最多表达65536个method，field/class的个数也均有此限制。对于DEX文件，则是将工程所需全部class文件合并且压缩到一个DEX文件期间，也就是Android打包的DEX过程中， 单个DEX文件可被引用的方法总数（自己开发的代码以及所引用的Android框架、类库的代码）被限制为65536；&lt;/p&gt;
&lt;h3 id=&quot;解决方案&quot;&gt;&lt;a href=&quot;#解决方案&quot; class=&quot;headerlink&quot; title=&quot;解决方案&quot;&gt;&lt;/a&gt;&lt;strong&gt;解决方案&lt;/strong&gt;&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;Android系统的LinearAlloc空间大小，在高版本上已经提升了，所以在一定程度上，不会出现这个问题，Facebook则采用了一种hack的方式，直接修改虚拟机的LinearAlloc空间大小：&lt;a href=&quot;https://www.facebook.com/notes/facebook-engineering/under-the-hood-dalvik-patch-for-facebook-for-android/10151345597798920/&quot;&gt;Dalvik patch for Facebook for Android&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;拆分Dex，官方有提供方案&lt;a href=&quot;https://developer.android.com/tools/building/multidex.html&quot;&gt;Google Multidex&lt;/a&gt;，让一个apk里支持多个.dex文件，这样就可以突破65536的限制，但该方案有一定的弊端，下面会提到&lt;/li&gt;
&lt;li&gt;插件化，将整个工程的划分为Host+多个插件的形式，这样就可以将方法分散到各个插件中，按需加载各个模块。从软件工程的角度来看，这种方案会更好，动态部署，并行开发，更高的编译效率，但这种方案对已有的大项目来讲，重构起来影响非常大，实现成本也相对较高&lt;/li&gt;
&lt;li&gt;使用ProGuard等其它优化工具清除项目中无用方法，第三方库中的方法进行清除处理，这个可以作为优化的手段，但对于大型应用上，并不能从根本上解决方法数的问题&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;上面也提到，在高版本上，LinearAlloc方法区的空间已经扩大了很多，所以LinearAlloc的问题很少会再出现。采用dex的拆分以及插件化后并按需加载，对避免LinearAlloc的问题也更有益。&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="编译" scheme="http://www.lightskystreet.com/categories/Android/%E7%BC%96%E8%AF%91/"/>
    
    
      <category term="Android，编译" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E7%BC%96%E8%AF%91/"/>
    
  </entry>
  
  <entry>
    <title>Android性能优化-减小图片下载大小</title>
    <link href="http://www.lightskystreet.com/2016/10/19/android-optimize-image-download-size/"/>
    <id>http://www.lightskystreet.com/2016/10/19/android-optimize-image-download-size/</id>
    <published>2016-10-19T02:00:29.000Z</published>
    <updated>2016-10-19T14:03:21.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文链接 <a href="https://developer.android.com/topic/performance/network-xfer.html" target="_blank" rel="external">https://developer.android.com/topic/performance/network-xfer.html</a></p>
<h3 id="内容概要"><a href="#内容概要" class="headerlink" title="内容概要"></a><strong>内容概要</strong></h3><ol>
<li><p>理解图片的格式 PNG JPG WebP</p>
</li>
<li><p>如何选择一种图片格式</p>
</li>
<li><p>确定准确质量值</p>
</li>
<li><p>服务端的尺寸大小</p>
<p>​</p>
</li>
</ol>
<h1 id="减小图像下载大小"><a href="#减小图像下载大小" class="headerlink" title="减小图像下载大小"></a>减小图像下载大小</h1><p>大多数流量传输都包含图像。 因此，你制作的下载的图片越小，就会为用户提供更好的网络体验。 本篇文章提供了让你的图像文件更小以及更加网络友好的指导。</p>
<h2 id="理解图像的格式"><a href="#理解图像的格式" class="headerlink" title="理解图像的格式"></a>理解图像的格式</h2><p>Android应用通常使用以下某种或多种文件格式的图片：PNG，JPG和WebP。 对于每种格式，你都可以采取措施缩小图片大小。</p>
<h3 id="PNG"><a href="#PNG" class="headerlink" title="PNG"></a>PNG</h3><p>缩小PNG文件的关键是减少构成图像的每行像素中使用的唯一颜色数。通过使用更少的颜色，可以提高在其它管道中的压缩能力。</p>
<p>减少独唯一颜色的数量会取得显着效果的原因是，PNG压缩效果基于一个水平方向相邻像素颜色变化程度的函数。因此，减少PNG图像每行中唯一颜色数量可以减少文件大小。</p>
<p>当决定是否采用这种策略时，你应该记住，减少唯一颜色的数量实际上等于对图像应用了有损编码。然而，编码工具可能不会判断一个细小的偏差导致多糟糕的视觉效果。因此，为了保证有效压缩和可接受的图像质量的平衡，你应该手动执行此工作，</p>
<p>有两个特别有用的方法你可以采取：优化索引格式和应用矢量量化。</p>
<h4 id="优化索引格式"><a href="#优化索引格式" class="headerlink" title="优化索引格式"></a>优化索引格式</h4><p>任何减少颜色的尝试都应该首先尝试优化颜色，以便将图像导出为PNG时可以使用INDEXED格式。 INDEXED颜色模式会选择最佳的256色彩，并用索引将所有像素值替换到调色板中。 结果是从1600万色彩减少到仅256色彩：等同于从每像素3（没有透明度）或4（具有透明度）字节减少到每像素1字节。这种变化向减少文件迈出了重大的一步。</p>
<a id="more"></a>
<p><img src="/img/android-optimize/indexed-image.png">    </p>
<p>图片 1.一个图像在转换为INDEXED的前后对照</p>
<p>Figure 2 展示了图像1中的调色板</p>
<p><img src="/img/android-optimize/platte.png">  </p>
<p>将图像表示为调色图像对于显着改善文件大小有很大帮助，因此，如果你的大多数图片都可以转换，可以好好研究一下。</p>
<p>当然，并不是每个图像都可以用256种色彩准确表示。 例如，某些图像可能需要257,310,512或912种颜色才能正确显示。 在这种情况下，矢量化会可能会有帮助。</p>
<h4 id="矢量化"><a href="#矢量化" class="headerlink" title="矢量化"></a>矢量化</h4><p>矢量化（VQ）也许是对创建索引图像的过程更好地描述。 VQ会对多维数进行舍入处理。 在此过程中，你图片中的所有颜色都将根据相似性进行分组。 对于给定的组，该组中的所有颜色都将被单个<em>中心点</em>值替换，这样可以最大程度地减少该单元格中的颜色错误（如果使用Voronoi术语，则为“site”）。 在图3中，绿色点表示输入颜色，而红色点是替换输入颜色的中心点。 每个单元格由蓝线界定。</p>
<p><img src="/img/android-optimize/vector-quantization.gif">    </p>
<p>图3 为图像中的颜色进行矢量化</p>
<p>将VQ应用于图像会减少了唯一颜色的数量，用视觉质量上“相当接近”的单一颜色替换每组颜色。</p>
<p>此技术也允许你为图像定义唯一颜色的最大数量。 例如，图4显示了1670万种颜色（每像素24位，或bpp）的鹦鹉头像，旁边是一个只使用16（3bpp）唯一颜色的版本。</p>
<p><img src="/img/android-optimize/vq.png">   </p>
<p>你可以明显看到有一些质量的损失; 大多数渐变颜色已经被替换，赋予图像带状效果。 因此该图片需要超过16种唯一的色彩。</p>
<p>在管道中设置VQ的步骤可以帮助你对图像中使用的唯一色彩的真实数量有更好地了解，并且可以帮助你显著地减小它们。 有很多可用的工具来帮助你实现此技术。</p>
<h3 id="JPG"><a href="#JPG" class="headerlink" title="JPG"></a>JPG</h3><p>如果你使用的是JPG图片，这里有几种只做很小的改变就可以显著节省文件大小的方法：</p>
<ul>
<li>通过不同的编码方法生成较小的文件（不影响质量）。</li>
<li>稍微调整质量以得到更好的压缩。</li>
</ul>
<p>执行这些策略通常可以将文件大小减少高达25％。</p>
<p>选择工具时，请记住照片导出工具会将不必要的元数据（如GPS信息）插入到图像中。为了最小化，你可以尝试利用现有工具删除这些信息。  </p>
<h3 id="WebP"><a href="#WebP" class="headerlink" title="WebP"></a>WebP</h3><p>WebP是Android 4.2.1（API 17）支持的较新的图像格式。 这种格式为网络图像提供了卓越的无损和有损压缩。 使用WebP，开发人员可以创建更小，更丰富的图像。 WebP无损图像文件平均比PNG小 <a href="https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#conclusions" target="_blank" rel="external">26% </a>。 这些图像文件还支持透明度（也称为alpha通道），成本只有 <a href="https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results" target="_blank" rel="external">22%</a> 的字节。</p>
<p>WebP有损图像比同等 <a href="https://en.wikipedia.org/wiki/Structural_similarity" target="_blank" rel="external">SSIM</a> 质量指数下的JPG图像小 <a href="https://developers.google.com/speed/webp/docs/webp_study#experiment_1_webp_vs_jpeg_at_equal_ssim_index" target="_blank" rel="external">25-34%</a> 。 对于可接受有损RGB压缩的场景，有损WebP还能支持透明度，产生的文件大小通常比PNG小3倍。</p>
<p>有关WebP的详细信息，请访问 <a href="https://developers.google.com/speed/webp/" target="_blank" rel="external">WebP</a>。</p>
<h2 id="选择一种格式"><a href="#选择一种格式" class="headerlink" title="选择一种格式"></a>选择一种格式</h2><p>不同的图像格式适用于不同类型的图像。 JPG和PNG的压缩过程有很大差别，产生的效果差别也很大。</p>
<p>决定使用PNG还是JPG，通常归结于图像本身的复杂性。图5显示了两个图像，由于开发者应用了不同的压缩方案而导致很大的差别。左侧的图像有许多小细节，因此使用JPG压缩效率更高。右侧的图像，很多区域具有相同颜色，使用PNG压缩更有效。  </p>
<p><img src="/img/android-optimize/jpg-vs-png.png">  </p>
<p>图5  JPG和PNG的适用场景</p>
<p>WebP格式可以支持有损和无损模式，是PNG和JPG的理想替代品。唯一要记住的是，它只对运行Android 4.2.1（API 17）及更高版本的设备提供支持。不过幸运的是，<a href="https://developer.android.com/about/dashboards/index.html#Platform" target="_blank" rel="external">大多数设备</a>都满足这一要求。</p>
<p>图6提供了一个简单的图示来帮助你决定使用哪种压缩方案。</p>
<p><img src="/img/android-optimize/selector.png">  </p>
<p>Figure 6. 如何决定一种压缩方案</p>
<h2 id="确定最佳质量值"><a href="#确定最佳质量值" class="headerlink" title="确定最佳质量值"></a>确定最佳质量值</h2><p>有几种技术可以用来实现压缩和图像质量之间的正确权衡。有一种技术使用标量值，因此仅适用于JPG和WebP。另一种技术利用了Butteraugli库，并可用于所有图像格式。</p>
<h3 id="标量值（仅限JPG和WebP）"><a href="#标量值（仅限JPG和WebP）" class="headerlink" title="标量值（仅限JPG和WebP）"></a>标量值（仅限JPG和WebP）</h3><p>JPG和WebP的强大来自于你可以使用标量值来平衡质量和文件大小。诀窍是找出图像的正确的质量值。太低的质量水平虽然产生文件小，但以牺牲图像质量为代价。太高的质量水平会增加文件大小，对用户不友好。</p>
<p>最直接的解决方案是选择一些非最大值进行尝试。但是，请注意，质量值对每个图像的影响不同。例如，75％的质量在大多数图像上可能看起来很好，但在另一些图片上效果可能不好。你应该使用图像的代表性样本对选择的最大值进行测试。此外，要确保你是对原始图像执行所有测试，而不是压缩版本。</p>
<p>对于每天上传和发送数百万个JPG的大型媒体应用程序来说，手动调整每个资源是不切实际的。你可以根据图像类别指定几个不同的质量级别来解决这个问题。例如，可以将缩略图的质量设置为35％，因为较小的图像隐藏了更多的压缩伪影（伪影不是很好理解）。</p>
<h3 id="Butteraugli"><a href="#Butteraugli" class="headerlink" title="Butteraugli"></a>Butteraugli</h3><p>Butteraugli是一个库，用于测试图像的视觉误差阈值：观察者开始注意到图像质量下降的点。换句话说，这个项目试图将压缩图像的失真量化。</p>
<p>Butteraugli允许你定义视觉质量的目标，然后运行PNG，JPG，WebP有损和WebP无损压缩。然后，你可以选择文件大小和Butteraugli级别之间效果最佳的图像。图7示出了在视觉失真以至于用户可以感知到之前，如何使用Butteraugli来找到最低的JPG质量水平;最终文件大小减少了大约65％。</p>
<p><img src="/img/android-optimize/butteraugli.png">  </p>
<p>图7.应用Butteraugli技术之前和之后的图像。</p>
<p>Butteraugli允许你基于输出或输入进行处理。也就是说，你可以在用户感觉到图像出现明显失真之前找到最低的质量设置，或者你可以依次设置图像失真级别去观察对应的质量水平。</p>
<h2 id="服务端的尺寸"><a href="#服务端的尺寸" class="headerlink" title="服务端的尺寸"></a>服务端的尺寸</h2><p>在服务器上仅存有一种分辨率的图像的方式是很便利的。当设备访问映像时，服务器直接返回给设备该分辨率的图片。</p>
<p>虽然这个解决方案方便了开发者，但对用户来说可能很痛苦，因为这种方案迫使用户下载比实际需要更多的数据。你应该存储多个大小的图像，并根据合适的使用场景提供不同的图像。例如，对于缩略图，服务应该提供缩略图图像而不是全尺寸的版本，这样可以节省很多网络带宽。</p>
<p>这种方法对于下载速度是有利的，并且降低了使用有限或按数据量收费用户的成本。图像在设备和主存储器上也会占用更少的空间。在大图像（例如4K图像）的情况下，这种方式还减少了设备在加载图像之前调整大小的时间。</p>
<p>实现此方法需要有一个后端图像服务，以提供具有适当缓存的各种分辨率的图像。有几种现有的服务可以帮助你，例如，<a href="https://cloud.google.com/appengine/" target="_blank" rel="external">App Engine</a> 自带了调整图片大小的功能。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接 &lt;a href=&quot;https://developer.android.com/topic/performance/network-xfer.html&quot;&gt;https://developer.android.com/topic/performance/network-xfer.html&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;内容概要&quot;&gt;&lt;a href=&quot;#内容概要&quot; class=&quot;headerlink&quot; title=&quot;内容概要&quot;&gt;&lt;/a&gt;&lt;strong&gt;内容概要&lt;/strong&gt;&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;&lt;p&gt;理解图片的格式 PNG JPG WebP&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;如何选择一种图片格式&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;确定准确质量值&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;服务端的尺寸大小&lt;/p&gt;
&lt;p&gt;​&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h1 id=&quot;减小图像下载大小&quot;&gt;&lt;a href=&quot;#减小图像下载大小&quot; class=&quot;headerlink&quot; title=&quot;减小图像下载大小&quot;&gt;&lt;/a&gt;减小图像下载大小&lt;/h1&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;Android应用通常使用以下某种或多种文件格式的图片：PNG，JPG和WebP。 对于每种格式，你都可以采取措施缩小图片大小。&lt;/p&gt;
&lt;h3 id=&quot;PNG&quot;&gt;&lt;a href=&quot;#PNG&quot; class=&quot;headerlink&quot; title=&quot;PNG&quot;&gt;&lt;/a&gt;PNG&lt;/h3&gt;&lt;p&gt;缩小PNG文件的关键是减少构成图像的每行像素中使用的唯一颜色数。通过使用更少的颜色，可以提高在其它管道中的压缩能力。&lt;/p&gt;
&lt;p&gt;减少独唯一颜色的数量会取得显着效果的原因是，PNG压缩效果基于一个水平方向相邻像素颜色变化程度的函数。因此，减少PNG图像每行中唯一颜色数量可以减少文件大小。&lt;/p&gt;
&lt;p&gt;当决定是否采用这种策略时，你应该记住，减少唯一颜色的数量实际上等于对图像应用了有损编码。然而，编码工具可能不会判断一个细小的偏差导致多糟糕的视觉效果。因此，为了保证有效压缩和可接受的图像质量的平衡，你应该手动执行此工作，&lt;/p&gt;
&lt;p&gt;有两个特别有用的方法你可以采取：优化索引格式和应用矢量量化。&lt;/p&gt;
&lt;h4 id=&quot;优化索引格式&quot;&gt;&lt;a href=&quot;#优化索引格式&quot; class=&quot;headerlink&quot; title=&quot;优化索引格式&quot;&gt;&lt;/a&gt;优化索引格式&lt;/h4&gt;&lt;p&gt;任何减少颜色的尝试都应该首先尝试优化颜色，以便将图像导出为PNG时可以使用INDEXED格式。 INDEXED颜色模式会选择最佳的256色彩，并用索引将所有像素值替换到调色板中。 结果是从1600万色彩减少到仅256色彩：等同于从每像素3（没有透明度）或4（具有透明度）字节减少到每像素1字节。这种变化向减少文件迈出了重大的一步。&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/categories/Android/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
    
      <category term="Android，性能优化" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>Android性能优化-线程性能优化</title>
    <link href="http://www.lightskystreet.com/2016/10/18/android-optimize-thread/"/>
    <id>http://www.lightskystreet.com/2016/10/18/android-optimize-thread/</id>
    <published>2016-10-17T16:00:00.000Z</published>
    <updated>2016-10-18T12:40:41.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文链接：<a href="https://developer.android.com/topic/performance/threads.html" target="_blank" rel="external">Better Performance through Threading</a>  </p>
<h1 id="线程的性能"><a href="#线程的性能" class="headerlink" title="线程的性能"></a>线程的性能</h1><p>熟练使用Android上的线程可以帮助你提高应用程序的性能。 本篇文章讨论了使用线程的几个方面：使用UI或主线程; 应用程序生命周期和线程优先级之间的关系; 以及平台提供的帮助管理线程复杂性的方法。 在每一部分，本篇都描述了潜在的陷阱以及如何避免它们的策略。</p>
<h2 id="主线程"><a href="#主线程" class="headerlink" title="主线程"></a>主线程</h2><p>当用户启动你的应用程序时，Android会创建一个新的 <a href="https://developer.android.com/guide/components/fundamentals.html" target="_blank" rel="external">Linux process</a> 以及一个执行线程。 这个main线程，也称为UI线程，负责屏幕上发生的一切。 了解其工作原理可以帮助你使用主线程设计你的应用程序以获得最佳性能。</p>
<h3 id="内部细节"><a href="#内部细节" class="headerlink" title="内部细节"></a>内部细节</h3><p>主线程具有非常简单的设计：它的唯一工作就是从线程安全的工作队列中取出并执行工作块，直到应用程序被终止。 框架从各个地方生成一些这些工作块。 这些地方包括与生命周期信息，用户事件（如输入）或来自其他应用程序和进程的事件相关联的回调。 此外，应用程序还可以在不使用框架的情况下显式地将工作块加入队列。</p>
<p>应用程序执行的<a href="https://www.youtube.com/watch?v=qk5F6Bxqhr4&amp;index=1&amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE" target="_blank" rel="external">任何代码块</a>都会被绑定到一个事件回调上，例如输入，布局填充或绘制。 当某个时间触发一个事件时，事件发生的所在线程会将事件加入到主线程的消息队列。 之后主线程可以处理该事件。</p>
<p>当发生动画或屏幕更新时，系统试图每16ms左右执行一个工作块（负责绘制屏幕），以便以<a href="https://www.youtube.com/watch?v=CaMTIgxCSqU&amp;index=62&amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE" target="_blank" rel="external">每秒60帧</a>的速度平滑地渲染。 为了让系统达到这个目标，一些操作必须发生在主线程上。 但是，当主线程的消息队列包含太多或太耗时的任务，为了让主线程能够在16ms内完成工作，你应将这些任务移到工作线程中去。 如果主线程不能在16ms内完成执行的代码块，则用户可能感觉到卡顿或UI响应较慢。 如果主线程阻塞大约5秒钟，系统将显示“<a href="https://developer.android.com/training/articles/perf-anr.html" target="_blank" rel="external">（ANR）</a>”对话框，允许用户直接关闭应用程序。</p>
<p>从主线程移除多个或耗时的任务，以便它们不会干扰到平滑渲染和对用户输入的快速响应，是你在应用程序中采用线程的最大原因。</p>
<h2 id="线程和UI对象的引用"><a href="#线程和UI对象的引用" class="headerlink" title="线程和UI对象的引用"></a>线程和UI对象的引用</h2><p>按照设计，<a href="https://www.youtube.com/watch?v=tBHPmQQNiS8&amp;index=3&amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE" target="_blank" rel="external">Android UI对象不是线程安全的</a>。 应用程序应该在主线程上创建，使用和销毁UI对象。 如果尝试修改或甚至引用除主线程之外的线程中的UI对象，结果可能是异常，静默失败，崩溃和其他未定义的错误行为。</p>
<p>UI对象引用导致的问题可以划分为两种：显式引用和隐式引用。</p>
<a id="more"></a>
<h3 id="显示引用"><a href="#显示引用" class="headerlink" title="显示引用"></a>显示引用</h3><p>许多非主线程上的任务在最后都会更新UI对象。 但是，如果某一个线程访问视图层级中的对象，可能会导致应用的不稳定性：如果工作线程修改了同时被任何其他线程引用的对象属性（这里都是指UI对象），则结果是不可预测的。</p>
<p>假设一个应用程序在工作线程上直接引用UI对象。 这个UI对象可能包含对一个<code>View</code>的引用; 但在工作完成之前，该View被从视图层次结构中删除了。 如果该引用将View对象保留在内存中并对其设置属性，用户并不会看到此对象，因为一旦对象的引用消失，应用程序就会删除该对象。</p>
<p>再举另一个例子，View对象（被工作线程引用）持有包含它们的Activity的引用。 如果该Activity被销毁了，但仍有一个工作的线程直接或间接引用它 - 垃圾收集器将不会回收Activity，直到该工作线程执行完成。</p>
<p>在某些Activity生命周期事件（如屏幕旋转）发生时，某些线程工作可能正在运行。 系统将无法执行垃圾回收，直到正在进行的工作完成。 因此，在内存中可能会有两个Activity对象，直到垃圾回收发生。</p>
<p>考虑到以上场景，我们建议你的应用程序的工作线程中不应该包含对UI对象的显式引用。 避免此类引用可帮助你避免这些类型的内存泄漏，同时避免线程竞争。</p>
<p>在所有情况下，应用程序应该只在主线程上更新UI对象。 如果有多个任务希望更新实际的UI，你应该制定一个策略，允许多个线程交互，最终将结果返回到主线程。</p>
<h3 id="隐式引用"><a href="#隐式引用" class="headerlink" title="隐式引用"></a>隐式引用</h3><p>在以下代码片段中可以看到带有线程对象代码的常见设计缺陷：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">public class MainActivity extends Activity &#123;</div><div class="line">  // …...</div><div class="line">  public class MyAsyncTask extends AsyncTask   &#123;</div><div class="line">    @Override protected String doInBackground(Void... params) &#123;...&#125;</div><div class="line">    @Override protected void onPostExecute(String result) &#123;...&#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这段代码的缺陷是将线程对象MyAsyncTask声明为一些Activity的内部类。 这种声明创建一个对Activity对象隐式引用。 因此，该对象持有对Activity的引用，直到线程工作完成，这样会导致所引用的Activity延迟销毁。 这种延迟会给内存带来更大的压力。</p>
<p>解决该问题的直接解决方案是在自己的文件中定义重载类实例，从而移除对Activity的隐式引用。</p>
<p>另一个解决方案是将AsyncTask声明为静态内部类。 这样做也可以消除隐式引用问题，因为静态内部类与普通内部类不同：普通内部类实例需要外部类的实例才可以实例化，并且可以直接访问其包含的方法和字段。 相比之下，静态内部类不需要引用外部类实例，因此它不包含对外部类成员的引用。</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">public class MainActivity extends Activity &#123;</div><div class="line">  // …...</div><div class="line">  Static public class MyAsyncTask extends AsyncTask   &#123;</div><div class="line">    @Override protected String doInBackground(Void... params) &#123;...&#125;</div><div class="line">    @Override protected void onPostExecute(String result) &#123;...&#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="线程和应用程序以及Activity的生命周期"><a href="#线程和应用程序以及Activity的生命周期" class="headerlink" title="线程和应用程序以及Activity的生命周期"></a>线程和应用程序以及Activity的生命周期</h2><p>应用程序生命周期会对应用程序中线程的工作产生影响。 在Activity被销毁后，你可能需要决定一个线程是否应该持久化。 还应该注意线程优先级和Activity是否在前台或后台运行之间的关系。</p>
<h3 id="持久化的线程"><a href="#持久化的线程" class="headerlink" title="持久化的线程"></a>持久化的线程</h3><p>线程的生命周期大于生成它们的Activity的生命周期。 不管Activity的创建或销毁，线程继续执行，不会被打断。 在一些情况下，这种持久性是不期望的。</p>
<p>考虑一种情况，某个Activity发起了一组线程工作任务，但在工作线程执行完之前该Activity被销毁了。 应用程序应该如何处理那些还在执行的任务？</p>
<p>如果这些任务将来会去更新不再存在的UI，那么这些任务就不应该继续工作。例如，如果该任务是从数据库加载用户信息并更新视图，那么该线程就是不需要的。</p>
<p>相比之下，如果任务组不是完全和UI相关的，还是很有用的。例如，任务组可能在等待下载图片，并将其缓存到磁盘，然后去更新相关的<code>View</code>对象。尽管View对象不再存在，下载和缓存图像的行为仍然是有帮助的，因为用户有可能还会回到这个被销毁的Activity。</p>
<p>手动管理所有线程对象的生命周期可能非常复杂。如果你不能正确地管理它们，你的应用程序可能会遭受内存竞争和性能问题。 <a href="https://developer.android.com/guide/components/loaders.html" target="_blank" rel="external">Loaders</a> 是解决这个问题的一种方案。 <a href="https://developer.android.com/guide/components/loaders.html" target="_blank" rel="external">Loaders</a> 有助于异步加载数据，当configuration变化时仍旧会持久化信息。</p>
<h3 id="线程的优先级"><a href="#线程的优先级" class="headerlink" title="线程的优先级"></a>线程的优先级</h3><p>如<a href="https://developer.android.com/guide/topics/processes/process-lifecycle.html" target="_blank" rel="external">进程和应用生命周期</a>中所述，应用程序线程接收的优先级部分取决于应用在其生命周期所处的阶段。 在应用程序中创建和管理线程时，设置其优先级很重要，这样可以让线程在正确的时间获得正确的优先级。 如果设置太高，你的线程可能会打断UI线程和渲染线程，导致你的应用程序丢帧。 如果设置太低，可能会导致你的异步任务（如图像加载）比它们实际需要的慢。</p>
<p>每次你创建一个线程，你应该调用 <code>setThreadPriority()</code>方法。 系统的线程调度器程会优先选择优先级较高的线程，并根据需要权衡这些优先级，最终完成所有的工作。 通常，<a href="https://www.youtube.com/watch?v=NwFXVsM15Co&amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE&amp;index=9" target="_blank" rel="external">前台组线程大约占用来设备总执行时间的95％</a>，而后台组大约占5％。</p>
<p>系统也会通过Process类为每个线程分配其自己的优先级值。</p>
<p>默认情况下，系统将线程的优先级设置为与创建它的线程相同的优先级和组成员资格。 但是，你可以通过使用<code>setThreadPriority()</code>明确调整线程优先级。</p>
<p> <code>Process</code>类通过提供一组常量来帮助你降低分配优先级的复杂性，你可以使用这些常量来设置线程优先级。 例如，<a href="https://developer.android.com/reference/android/os/Process.html#THREAD_PRIORITY_DEFAULT" target="_blank" rel="external">THREAD_PRIORITY_DEFAULT</a> 表示线程的默认值。 对于不那么紧急执行的工作线程，你应将其优先级设置为<a href="https://developer.android.com/reference/android/os/Process.html#THREAD_PRIORITY_BACKGROUND" target="_blank" rel="external">THREAD_PRIORITY_BACKGROUND</a> 。</p>
<p>你也可以使用 <a href="https://developer.android.com/reference/android/os/Process.html#THREAD_PRIORITY_LESS_FAVORABLE" target="_blank" rel="external">THREAD_PRIORITY_LESS_FAVORABLE</a> 和 <a href="https://developer.android.com/reference/android/os/Process.html#THREAD_PRIORITY_MORE_FAVORABLE" target="_blank" rel="external">THREAD_PRIORITY_MORE_FAVORABLE</a> 常量作为增量值来设定相对优先顺序。 所有这些枚举状态和修饰符的列表出现在<code>THREAD_PRIORITY_AUDIO</code> 类的参考文档中。 有关管理线程的更多信息，请参阅有 <code>Thread</code> and <code>Process</code> 的参考文档。</p>
<p><a href="https://developer.android.com/reference/android/os/Process.html#THREAD_PRIORITY_AUDIO" target="_blank" rel="external">https://developer.android.com/reference/android/os/Process.html#THREAD_PRIORITY_AUDIO</a></p>
<h2 id="线程的帮助类"><a href="#线程的帮助类" class="headerlink" title="线程的帮助类"></a>线程的帮助类</h2><p>框架为线程提供了和java相同的类和原始类，例如<code>Thread</code> 和<code>Runnable</code> 类。 为了帮助减少与开发Android线程应用程序相关的门槛，框架提供了一组帮助类。 每个助手类在性能上都有一些细微差别，以便去处理特定的线程问题。 对错误的场景使用了错误的类可能会导致性能问题。</p>
<h3 id="AsyncTask-类"><a href="#AsyncTask-类" class="headerlink" title="AsyncTask 类"></a>AsyncTask 类</h3><p><code>AsyncTask</code>类是一个简单，有用的原始类，可以帮你快速将工作从主线程移动到工作线程。 例如，输入事件可能会触发需要加载bitmap的UI更新。<code>AsyncTask</code>对象可以将bitmap加载和解码任务放到备用线程; 一旦处理完成，<code>AsyncTask</code>对象会返回到主线程上去更新UI。</p>
<p>当使用<code>AsyncTask</code>时，有几个重要的性能方面的问题要记住。 首先，默认情况下，应用程序将其创建的所有<code>AsyncTask</code>对象推送到单个线程中。 因此，它们以串行方式执行，和主线程类似，特别耗时的工作组会阻塞队列。 因此，我们建议你只使用<code>AsyncTask</code>处理持续时间短于5ms的任务。</p>
<p><code>AsyncTask</code>对象也会导致常见的隐式引用问题。 而且，<code>AsyncTask</code>对象也存在显式引用的风险，但通常这种问题比较容易解决。 例如，AsyncTask可能需要对UI对象的引用，以便在<code>AsyncTask</code>回调到主线程时更新UI对象。 在这种情况下，可以使用<code>WeakReference</code>存储对所需UI对象的引用，在<code>AsyncTask</code>回调到主线程时先访问一次该UI对象。 但你需要注意，持有某个对象的<code>WeakReference</code>并不会使该对象变为线程安全的; <code>WeakReference</code>只提供了一个处理显式引用和垃圾回收问题的方法。</p>
<h3 id="HandlerThread-类"><a href="#HandlerThread-类" class="headerlink" title="HandlerThread 类"></a>HandlerThread 类</h3><p>虽然<code>AsyncTask</code>很有用，但对于你的线程问题，它可能<a href="https://www.youtube.com/watch?v=adPLIAnx9og&amp;index=5&amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE" target="_blank" rel="external">不会总是正确的解决方案</a>。相反，你可能需要一种更传统的方法来在长时间运行的线程上执行一个工作块，并且有一些能力来手动管理该工作流。</p>
<p>我们考虑从Camera对象获取预览帧的场景。当你注册了相机预览事件，将会在<code>onPreviewFrame()</code>回调中收到它们，该回调会在调用它的事件线程上触发。如果这个回调在UI线程上触发，处理大量像素数组的任务将干扰渲染和事件处理工作。<code>AsyncTask</code>也会有同样的问题，<code>AsyncTask</code>会串行地执行任务，容易受阻塞（这个高版本已经使用线程池了）。</p>
<p>这种情况使用<code>HandlerThread</code>更合适：<code>HandlerThread</code>实际上是一个长时间运行的线程，它从队列中抓取工作，并对其进行操作。在这个例子中，当你的应用程序将<code>Camera.open()</code>命令委托给HandlerThread上的一个工作块时，相关的<code>onPreviewFrame()</code>回调会落在HandlerThread上，而不是UI或AsyncTask线程。所以，如果你要对像素进行长时间的操作，这可能是一个更好的解决方案。</p>
<p>当你的应用程序使用<code>HandlerThread</code>创建一个线程时，不要忘记<a href="https://www.youtube.com/watch?v=NwFXVsM15Co&amp;index=9&amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE" target="_blank" rel="external">根据工作类型设置线程的优先级</a>。 记住，CPU只能并行处理少数线程。当所有其他线程都在争取资源时， 设置优先级有助于系统知道如何正确的调度这项工作。</p>
<h3 id="ThreadPoolExecutor-类"><a href="#ThreadPoolExecutor-类" class="headerlink" title="ThreadPoolExecutor 类"></a>ThreadPoolExecutor 类</h3><p>有些类型的工作是高度并行，分布式的。例如，为8百万像素图像的每个8×8块计算滤波。创建这种量级的工作，AsyncTask和HandlerThread都不合适。 AsyncTask的单线程性质将所有线程池工作转换为线性系统。另一方面，使用HandlerThread类将需要程序员手动管理一组线程之间的负载平衡。</p>
<p>这种情况，使用<code>ThreadPoolExecutor</code>类来处理会更容易。该类可以管理一组线程的创建，优先级设置，并权衡分配到这些线程的任务如何处理。随着工作负载增加或减少，该类会自动启动或销毁线程来适应工作负载。</p>
<p>此类还可以帮助你的应用程序创建最佳线程数。当在构造一个<code>ThreadPoolExecutor</code>对象时，可以设置最小和最大线程数。随着<code>ThreadPoolExecutor</code>的负载增加，该类将考虑初始化的最小和最大线程数，并考虑待处理的工作量。基于这些因素，<code>ThreadPoolExecutor</code>决定在任何给定时间应该有多少线程存活。</p>
<h4 id="你应该创建多少线程？"><a href="#你应该创建多少线程？" class="headerlink" title="你应该创建多少线程？"></a>你应该创建多少线程？</h4><p>虽然从软件层面来看，你的代码有能力创建数百个线程，但这样做可能会造成性能问题。 CPU只有并行处理少量线程的能力;以上提到的都会遇到<a href="https://www.youtube.com/watch?v=NwFXVsM15Co&amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE&amp;index=9" target="_blank" rel="external">优先级和调度问题</a>。因此，只创建与你的工作负载需要的线程是很重要的。</p>
<p>实际上，许多因素都会对优先级和调度有影响，但你可以选择一个值（比如初始值设为4），并通过 <a href="https://developer.android.com/topic/performance/%E2%80%9D/studio/profile/systrace-commandline.html%E2%80%9D" target="_blank" rel="external">Systrace</a> 进行测试。通过试错的方式来确定可以使用而又不会产生问题的最小线程数。</p>
<p>你需要考虑创建多少线程的另一个原因是线程不是免费的：它们占用内存。每个线程最少消耗64k内存。如果设备上安装了许多应用，该值就会快速添加，特别是在调用栈显著增长的情况下。</p>
<p>许多系统进程和第三方库经常调度自己的线程池。如果你的应用程序可以重用现有的线程池，则此重用能够减少内存和处理资源的竞争来帮助提高性能。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接：&lt;a href=&quot;https://developer.android.com/topic/performance/threads.html&quot;&gt;Better Performance through Threading&lt;/a&gt;  &lt;/p&gt;
&lt;h1 id=&quot;线程的性能&quot;&gt;&lt;a href=&quot;#线程的性能&quot; class=&quot;headerlink&quot; title=&quot;线程的性能&quot;&gt;&lt;/a&gt;线程的性能&lt;/h1&gt;&lt;p&gt;熟练使用Android上的线程可以帮助你提高应用程序的性能。 本篇文章讨论了使用线程的几个方面：使用UI或主线程; 应用程序生命周期和线程优先级之间的关系; 以及平台提供的帮助管理线程复杂性的方法。 在每一部分，本篇都描述了潜在的陷阱以及如何避免它们的策略。&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;当用户启动你的应用程序时，Android会创建一个新的 &lt;a href=&quot;https://developer.android.com/guide/components/fundamentals.html&quot;&gt;Linux process&lt;/a&gt; 以及一个执行线程。 这个main线程，也称为UI线程，负责屏幕上发生的一切。 了解其工作原理可以帮助你使用主线程设计你的应用程序以获得最佳性能。&lt;/p&gt;
&lt;h3 id=&quot;内部细节&quot;&gt;&lt;a href=&quot;#内部细节&quot; class=&quot;headerlink&quot; title=&quot;内部细节&quot;&gt;&lt;/a&gt;内部细节&lt;/h3&gt;&lt;p&gt;主线程具有非常简单的设计：它的唯一工作就是从线程安全的工作队列中取出并执行工作块，直到应用程序被终止。 框架从各个地方生成一些这些工作块。 这些地方包括与生命周期信息，用户事件（如输入）或来自其他应用程序和进程的事件相关联的回调。 此外，应用程序还可以在不使用框架的情况下显式地将工作块加入队列。&lt;/p&gt;
&lt;p&gt;应用程序执行的&lt;a href=&quot;https://www.youtube.com/watch?v=qk5F6Bxqhr4&amp;amp;index=1&amp;amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE&quot;&gt;任何代码块&lt;/a&gt;都会被绑定到一个事件回调上，例如输入，布局填充或绘制。 当某个时间触发一个事件时，事件发生的所在线程会将事件加入到主线程的消息队列。 之后主线程可以处理该事件。&lt;/p&gt;
&lt;p&gt;当发生动画或屏幕更新时，系统试图每16ms左右执行一个工作块（负责绘制屏幕），以便以&lt;a href=&quot;https://www.youtube.com/watch?v=CaMTIgxCSqU&amp;amp;index=62&amp;amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE&quot;&gt;每秒60帧&lt;/a&gt;的速度平滑地渲染。 为了让系统达到这个目标，一些操作必须发生在主线程上。 但是，当主线程的消息队列包含太多或太耗时的任务，为了让主线程能够在16ms内完成工作，你应将这些任务移到工作线程中去。 如果主线程不能在16ms内完成执行的代码块，则用户可能感觉到卡顿或UI响应较慢。 如果主线程阻塞大约5秒钟，系统将显示“&lt;a href=&quot;https://developer.android.com/training/articles/perf-anr.html&quot;&gt;（ANR）&lt;/a&gt;”对话框，允许用户直接关闭应用程序。&lt;/p&gt;
&lt;p&gt;从主线程移除多个或耗时的任务，以便它们不会干扰到平滑渲染和对用户输入的快速响应，是你在应用程序中采用线程的最大原因。&lt;/p&gt;
&lt;h2 id=&quot;线程和UI对象的引用&quot;&gt;&lt;a href=&quot;#线程和UI对象的引用&quot; class=&quot;headerlink&quot; title=&quot;线程和UI对象的引用&quot;&gt;&lt;/a&gt;线程和UI对象的引用&lt;/h2&gt;&lt;p&gt;按照设计，&lt;a href=&quot;https://www.youtube.com/watch?v=tBHPmQQNiS8&amp;amp;index=3&amp;amp;list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE&quot;&gt;Android UI对象不是线程安全的&lt;/a&gt;。 应用程序应该在主线程上创建，使用和销毁UI对象。 如果尝试修改或甚至引用除主线程之外的线程中的UI对象，结果可能是异常，静默失败，崩溃和其他未定义的错误行为。&lt;/p&gt;
&lt;p&gt;UI对象引用导致的问题可以划分为两种：显式引用和隐式引用。&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/categories/Android/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
    
      <category term="Android，性能优化" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>Android性能优化-减小APK大小</title>
    <link href="http://www.lightskystreet.com/2016/10/17/android-optimize-apk/"/>
    <id>http://www.lightskystreet.com/2016/10/17/android-optimize-apk/</id>
    <published>2016-10-16T16:00:00.000Z</published>
    <updated>2016-10-16T13:46:25.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文链接：<a href="https://developer.android.com/topic/performance/reduce-apk-size.html" target="_blank" rel="external">Reduce APK Size</a>  </p>
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>用户通常会避免下载比较大的应用，特别是连接到2G和3G网络，或者按流量收费的设备。这篇文章描述了如何减小apk的大小，帮助你让更多的用户下载你的app。</p>
<h2 id="一-理解APK的结构"><a href="#一-理解APK的结构" class="headerlink" title="一 理解APK的结构"></a>一 理解APK的结构</h2><p>在讨论如何减小apk大小之前，理解apk的结构很有必要。一个APK文件包括一个ZIP 文件，该ZIP包含app的所有文件。包括java 字节码文件，资源文件和一个包含了编译后的资源文件。APK包含以下目录：</p>
<ul>
<li><code>META-INF/</code>:包含了<code>CERT.SF</code> 和 <code>CERT.RSA</code> 签名文件, 以及 <code>MANIFEST.MF</code>manifest 文件.</li>
<li><code>assets/</code>: 包含了app的assets，app可以通过 <code>AssetManager</code> 对象获取到这些资源</li>
<li><code>res/</code>: 包含了那些没有被编译到 <code>resources.arsc</code>的资源</li>
<li><code>lib/</code>: 包含了用于软件处理器的编译代码，该目录包含一个子目录，针对不同平台： <code>armeabi</code>, <code>armeabi-v7a</code>, <code>arm64-v8a</code>, <code>x86</code>, <code>x86_64</code>, and <code>mips</code>.</li>
</ul>
<p>一个APK也包含了下面的文件，但只有 <code>AndroidManifest.xml</code>  是强制性的</p>
<ul>
<li><p><code>resources.arsc</code>: </p>
<p>包含了编译后的资源。该文件包含了 <code>res/values/</code>文件夹下的所有XML内容。打包工具抽取了XML内容，将它编译成二进制格式，并且进行了压缩。该内容包括language strings和styles，以及未直接包含在<code>resources.arsc</code> 文件中的内容路径。比如layout文件和图片。</p>
</li>
<li><p><code>classes.dex</code>: </p>
<p>包含可以被Dalvik/ART 识别，以dex文件格式编译后的代码</p>
</li>
<li><p><code>AndroidManifest.xml</code>: </p>
<p>包含了Android核心mainfest文件。该文件罗列了app名字，版本，访问权限，和引用的library文件。该文件采用二进制XML格式。</p>
<p>​</p>
</li>
</ul>
<h2 id="二-减少资源的数量和大小"><a href="#二-减少资源的数量和大小" class="headerlink" title="二 减少资源的数量和大小"></a>二 减少资源的数量和大小</h2><p>APK的大小对app的加载速度以及内存的使用和电量消耗都有影响。一种减小APK大小的最简单方法就是减少APK的资源文件数量和大小。也可以移除那些app不再使用的资源，或者使用可扩展的 <code>Drawable</code> 对象替代图片文件。这部分讨论了这些方法，以及其它几种减小app资源以便最终达到减小APK总体大小的其它方法。</p>
<h3 id="移除无用资源"><a href="#移除无用资源" class="headerlink" title="移除无用资源"></a>移除无用资源</h3><p>使用 <a href="https://developer.android.com/studio/write/lint.html" target="_blank" rel="external"><code>lint</code></a> 工具,AndroidStudio中的一个静态的代码分析工具。可以检测<code>res/</code> 目录下那些没有被引用的资源. 当 <code>lint</code>工具发现了项目中潜在的无用资源，就会打印类似如下的信息：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">res/layout/preferences.xml: Warning: The resource R.layout.preferences appears</div><div class="line">    to be unused [UnusedResources]</div></pre></td></tr></table></figure>
<p><strong>注意:</strong>  <code>lint</code> 工具不能够扫描<code>assets/</code> 目录, assets 资源是通过反射的方式引用的，或者app中引用的其它library 文件。但lint并不会移除资源，它只会提示它们的存在。</p>
<p>你引入的Libraries有可能引入了无用的资源。Gradle可以通过在 <code>build.gradle</code> 文件中开启<a href="https://developer.android.com/studio/build/shrink-code.html" target="_blank" rel="external"><code>shrinkResources</code></a> 来帮你自动的移除这些资源：</p>
<a id="more"></a>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">android &#123;</div><div class="line">    // Other settings</div><div class="line"></div><div class="line">    buildTypes &#123;</div><div class="line">        release &#123;</div><div class="line">            minifyEnabled true</div><div class="line">            shrinkResources true</div><div class="line">            proguardFiles getDefaultProguardFile(&apos;proguard-android.txt&apos;), &apos;proguard-rules.pro&apos;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>为了使用 <code>shrinkResources</code>，你应该开启code shrinking，在build处理期间， <a href="https://developer.android.com/studio/build/shrink-code.html" target="_blank" rel="external">ProGuard</a> 首先会移除无用的代码但是会保留无用的资源。之后Gradle会移除无用的资源。</p>
<p>关于ProGuard和使用Android Studio帮助你减小APK大小的更多信息，可以参考 <a href="https://developer.android.com/studio/build/shrink-code.html" target="_blank" rel="external">Shrink Your Code and Resources</a>.</p>
<p>在Android Gradle Plugin 0.7以及更高的版本中，你可以声明app支持的配置。Gradle通过 <code>resConfig</code> 和 <code>resConfigs</code> flavors 和 <code>defaultConfig</code> 选项把这些信息传递给构建系统。构建系统会阻止来自其它不受支持的资源出现在APK中，从而减少APK的大小。更多信息可以参考 <a href="https://developer.android.com/studio/build/shrink-code.html#unused-alt-resources" target="_blank" rel="external">Remove unused alternative resources</a>。</p>
<h3 id="最小化使用Libraries中的资源"><a href="#最小化使用Libraries中的资源" class="headerlink" title="最小化使用Libraries中的资源"></a>最小化使用Libraries中的资源</h3><p>在开发App的时候，通常会使用外部libraries去提升app的可用性和功能扩展。比如，你可能会引用<a href="https://developer.android.com/topic/libraries/support-library/index.html" target="_blank" rel="external">Android Support Library</a>去提升老设备的用户体验。或者使用 <a href="https://developers.google.com/android/guides/overview" target="_blank" rel="external">Google Play Services</a> 为app提供自动翻译。</p>
<p>如果一个library被设计用于桌面服务，那么就可能包含很多app不需要的对象和方法。为了只保留library中app需要的代码，如果license许可的话，你需要编辑library文件。你也可以使用一个移动端友好的替代库。</p>
<p><strong>注意:</strong> <a href="https://developer.android.com/studio/build/shrink-code.html" target="_blank" rel="external">ProGuard</a> 可以清除一些从library中导入的不需要的代码。但是不会移除一个 library的内部依赖。</p>
<h3 id="只支持特定的分辨率"><a href="#只支持特定的分辨率" class="headerlink" title="只支持特定的分辨率"></a>只支持特定的分辨率</h3><p>Android支持非常大的设备集，包括各种屏幕密度。 在Android 4.4（API级别19）及更高版本中，框架支持各种分辨率：ldpi，mdpi，tvdpi，hdpi，xhdpi，xxhdpi和xxxhdpi。 虽然Android支持所有这些分辨率，但你不需要导出光栅化资源到每种分辨率。</p>
<p>如果你知道只有一小部分用户使用特定分辨率的设备，请考虑是否需要支持这些分辨率。 如果你不包括特定屏幕密度的资源，Android会自动缩放最初为其他屏幕密度设计的现有资源。</p>
<p>如果您的应用只需要缩放的图片，您可以通过在drawable-nodpi /中使用图片的单个版本来节省更多空间。 我们建议每个应用至少包含一个xxhdpi图片版本。</p>
<p>更多屏幕分辨率的信息，可以参考 <a href="https://developer.android.com/about/dashboards/index.html#Screens" target="_blank" rel="external">Screen Sizes and Densities</a>.</p>
<h3 id="减少动画帧数"><a href="#减少动画帧数" class="headerlink" title="减少动画帧数"></a>减少动画帧数</h3><p>逐帧动画可能会大幅增加APK的大小。 图1中展示了一个帧动画被分成多个PNG文件的情况。 每个图像是动画中的一帧。</p>
<p>对于添加到动画中的每一帧，都会增加APK中存储的图片数量。 在图1中，图像在应用程序中以30 FPS动画。 如果图像仅以15FPS动画化，则动画将仅需要所需帧的数目的一半。</p>
<p>  <img src="/img/android-optimize/anim-frame.png">  </p>
<h3 id="Use-Drawable-Objects"><a href="#Use-Drawable-Objects" class="headerlink" title="Use Drawable Objects"></a>Use Drawable Objects</h3><p>一些图像不需要静态图像资源; 框架可以在运行时动态地绘制图像。 相反，Drawable对象（XML中的）可能只会占用APK中的一小部分空间。 此外，XML形式的Drawable对象可以生成符合MaterialDesign指南的单色图像。</p>
<h3 id="减少资源"><a href="#减少资源" class="headerlink" title="减少资源"></a>减少资源</h3><p>你可能为同一种图像的不同形式都提供了独立的资源，例如同一图像的有色，阴影或旋转版本。 但是，我们建议你重复使用相同的资源，在运行时根据需要进行自定义。</p>
<p>Android提供了几个工具来更改资源的颜色，可以在Android 5.0（API级别21）以及更高版本上使用android：tint和tintMode属性。 对于较低版本的平台，请使用ColorFilter类。</p>
<p>您还可以节约那些只是某一种资源做了旋转的资源。 以下代码段提供了一个例子，通过简单地将原始图像旋转180度，将“展开”箭头转换为“折叠”箭头图标：</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">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</div><div class="line">&lt;rotate xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;</div><div class="line">    android:drawable=&quot;@drawable/ic_arrow_expand&quot;</div><div class="line">    android:fromDegrees=&quot;180&quot;</div><div class="line">    android:pivotX=&quot;50%&quot;</div><div class="line">    android:pivotY=&quot;50%&quot;</div><div class="line">    android:toDegrees=&quot;180&quot; /&gt;</div></pre></td></tr></table></figure>
<h3 id="从代码中渲染"><a href="#从代码中渲染" class="headerlink" title="从代码中渲染"></a>从代码中渲染</h3><p>You can also reduce your APK size by procedurally rendering your images. Procedural rendering frees up space because you no longer store an image file in your APK.</p>
<p>你也可以通过程序对图像渲染来减少APK大小。 通过程序渲染可以节约空间是因为不需要在APK中存储图像文件。</p>
<h3 id="压缩PNG文件"><a href="#压缩PNG文件" class="headerlink" title="压缩PNG文件"></a>压缩PNG文件</h3><p>aapt工具可以在构建过程期间优化放置在res / drawable /中的图像资源，以及无损压缩。 例如，aapt工具可以将不需要多于256种颜色的真彩色PNG转换为具有调色板的8位PNG。 这样做会产生质量相同但占用内存较小的映像。</p>
<p>但请记得aapt有以下限制：</p>
<ul>
<li>aapt工具不会收缩asset/文件夹中包含的PNG文件。</li>
<li>图像文件需要使用256个或更少的颜色的aapt工具来优化它们。</li>
<li>aapt工具可能会填充已压缩的PNG文件。 为了防止这种情况，您可以在Gradle中使用cruncherEnabled标志为PNG文件禁用此过程：</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">aaptOptions &#123;</div><div class="line">    cruncherEnabled = false</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="压缩PNG和JPG文件"><a href="#压缩PNG和JPG文件" class="headerlink" title="压缩PNG和JPG文件"></a>压缩PNG和JPG文件</h3><p>你可以使用像 <a href="http://pmt.sourceforge.net/pngcrush/" target="_blank" rel="external">pngcrush</a>, <a href="https://pngquant.org/" target="_blank" rel="external">pngquant</a>, 或<a href="https://github.com/google/zopfli" target="_blank" rel="external">zopflipng</a>等工具来减少PNG文件大小，而不会损失图像质量。 所有这些工具都可以减少PNG文件大小，同时保持图像质量。</p>
<p>pngcrush工具特别有效：此工具在PNG过滤器和zlib（Deflate）参数上迭代，使用每个过滤器和参数的组合来压缩图像。 然后选择产生最小压缩输出的配置。</p>
<p>对于JPEG文件，您可以使用 <a href="http://www.elektronik.htw-aalen.de/packjpg/" target="_blank" rel="external">packJPG</a> 等工具将JPEG文件压缩为更紧凑的形式。</p>
<h3 id="使用WebP-文件格式"><a href="#使用WebP-文件格式" class="headerlink" title="使用WebP 文件格式"></a>使用WebP 文件格式</h3><p>除了使用PNG或JPEG文件，你还可以使用WebP的图像文件。 WebP格式提供有损压缩（如JPEG）和透明度（如PNG），但可以提供比JPEG或PNG更好的压缩。</p>
<p>但是，使用WebP文件格式有一些显着的缺点。 首先，在低于Android 3.2（API级别13）的平台版本中不支持WebP。 第二，系统解码WebP比PNG文件需要更长的时间。</p>
<p><strong>注意</strong>：Google Play只接受使用PNG格式的图标。 如果你打算通过Google Play发布应用，图标就不能使用其他文件格式（如JPEG或WebP）。</p>
<h3 id="使用矢量图形"><a href="#使用矢量图形" class="headerlink" title="使用矢量图形"></a>使用矢量图形</h3><p>你可以使用矢量图形创建分辨率独立的图标和其他可伸缩媒体。 使用这些图形可以大大减少APK体积。 矢量图像在Android中表示为VectorDrawable对象。 使用VectorDrawable对象，100字节的文件可以生成屏幕大小的清晰图像。</p>
<p>然而，系统渲染每个VectorDrawable对象需要大量的时间，较大的图像则需要更长的时间才能出现在屏幕上。 因此，只有在显示小图像时才考虑使用这些矢量图形。</p>
<p>有关使用VectorDrawable对象的更多信息，请参考 <a href="https://developer.android.com/training/material/drawables.html" target="_blank" rel="external">Working with Drawables</a>.</p>
<h2 id="三-减少Native和Java代码"><a href="#三-减少Native和Java代码" class="headerlink" title="三 减少Native和Java代码"></a>三 减少Native和Java代码</h2><h3 id="删除不必要的生成代码"><a href="#删除不必要的生成代码" class="headerlink" title="删除不必要的生成代码"></a>删除不必要的生成代码</h3><p>确保你能够理解那些任何自动生成的代码部分。 例如，许多协议缓冲工具生成过多的方法和类，可以使应用程序的大小增加一倍或两倍。</p>
<h3 id="删除枚举"><a href="#删除枚举" class="headerlink" title="删除枚举"></a>删除枚举</h3><p>单个枚举可能为应用程序的classes.dex文件添加大小为1.0到1.4 KB的大小。 对于复杂的系统或者共享库，这种增加可能比较快迅速。 如果可能，请考虑使用@IntDef注解和<a href="https://developer.android.com/studio/build/shrink-code.html" target="_blank" rel="external">ProGuard</a> 来除去枚举并将它们转换为整数。 这种类型转换保留了枚举的所有类型安全的好处。</p>
<h3 id="减少本地二进制文件的大小"><a href="#减少本地二进制文件的大小" class="headerlink" title="减少本地二进制文件的大小"></a>减少本地二进制文件的大小</h3><p>如果你的应用使用本地代码和Android NDK，你还可以通过优化这些代码来减小应用的大小。 两个有用的方式是删除debug标记，不提取本地库。</p>
<h4 id="删除Debug符号"><a href="#删除Debug符号" class="headerlink" title="删除Debug符号"></a>删除Debug符号</h4><p>如果你的应用程序正在开发中并仍需要调试，那么使用debug标记很有意义。 使用Android NDK中提供的 <code>arm-eabi-strip</code> 工具从本地库中删除不必要的调试标记。 之后，再编译release版本。</p>
<h4 id="避免提取本地库"><a href="#避免提取本地库" class="headerlink" title="避免提取本地库"></a>避免提取本地库</h4><p>将.so文件存储在APK中未压缩的文件中，并在应用清单的``元素中将android：extractNativeLibs标记设置为false。 这将防止PackageManager在安装过程中将.so文件从APK复制到文件系统，并且有一个额外的好处，会让app的差分更新变得更小。</p>
<h2 id="四-维护多个精简版APK"><a href="#四-维护多个精简版APK" class="headerlink" title="四 维护多个精简版APK"></a>四 维护多个精简版APK</h2><p>你的APK可能包含用户下载但从不使用的内容，例如区域或语言信息。 为了让用户提供最小化的下载，你可以将应用细分为多个APK，并根据屏幕尺寸或GPU纹理支持等因素进行区分。</p>
<p>当用户下载您的应用时，其设备会根据设备的功能和设置接收正确的APK。 这样，设备不会接收设备没有的功能的资源。 例如，如果用户拥有的是hdpi设备，那么他们不需要你为更高分辨率设备提供的xxxhdpi资源。</p>
<p>更多信息请参考<a href="https://developer.android.com/studio/build/configure-apk-splits.html" target="_blank" rel="external">Configure APK Splits</a> and <a href="https://developer.android.com/training/multiple-apks/index.html" target="_blank" rel="external">Maintaining Multiple APKs</a>.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接：&lt;a href=&quot;https://developer.android.com/topic/performance/reduce-apk-size.html&quot;&gt;Reduce APK Size&lt;/a&gt;  &lt;/p&gt;
&lt;h3 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h3&gt;&lt;p&gt;用户通常会避免下载比较大的应用，特别是连接到2G和3G网络，或者按流量收费的设备。这篇文章描述了如何减小apk的大小，帮助你让更多的用户下载你的app。&lt;/p&gt;
&lt;h2 id=&quot;一-理解APK的结构&quot;&gt;&lt;a href=&quot;#一-理解APK的结构&quot; class=&quot;headerlink&quot; title=&quot;一 理解APK的结构&quot;&gt;&lt;/a&gt;一 理解APK的结构&lt;/h2&gt;&lt;p&gt;在讨论如何减小apk大小之前，理解apk的结构很有必要。一个APK文件包括一个ZIP 文件，该ZIP包含app的所有文件。包括java 字节码文件，资源文件和一个包含了编译后的资源文件。APK包含以下目录：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;META-INF/&lt;/code&gt;:包含了&lt;code&gt;CERT.SF&lt;/code&gt; 和 &lt;code&gt;CERT.RSA&lt;/code&gt; 签名文件, 以及 &lt;code&gt;MANIFEST.MF&lt;/code&gt;manifest 文件.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;assets/&lt;/code&gt;: 包含了app的assets，app可以通过 &lt;code&gt;AssetManager&lt;/code&gt; 对象获取到这些资源&lt;/li&gt;
&lt;li&gt;&lt;code&gt;res/&lt;/code&gt;: 包含了那些没有被编译到 &lt;code&gt;resources.arsc&lt;/code&gt;的资源&lt;/li&gt;
&lt;li&gt;&lt;code&gt;lib/&lt;/code&gt;: 包含了用于软件处理器的编译代码，该目录包含一个子目录，针对不同平台： &lt;code&gt;armeabi&lt;/code&gt;, &lt;code&gt;armeabi-v7a&lt;/code&gt;, &lt;code&gt;arm64-v8a&lt;/code&gt;, &lt;code&gt;x86&lt;/code&gt;, &lt;code&gt;x86_64&lt;/code&gt;, and &lt;code&gt;mips&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;一个APK也包含了下面的文件，但只有 &lt;code&gt;AndroidManifest.xml&lt;/code&gt;  是强制性的&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;resources.arsc&lt;/code&gt;: &lt;/p&gt;
&lt;p&gt;包含了编译后的资源。该文件包含了 &lt;code&gt;res/values/&lt;/code&gt;文件夹下的所有XML内容。打包工具抽取了XML内容，将它编译成二进制格式，并且进行了压缩。该内容包括language strings和styles，以及未直接包含在&lt;code&gt;resources.arsc&lt;/code&gt; 文件中的内容路径。比如layout文件和图片。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;classes.dex&lt;/code&gt;: &lt;/p&gt;
&lt;p&gt;包含可以被Dalvik/ART 识别，以dex文件格式编译后的代码&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;AndroidManifest.xml&lt;/code&gt;: &lt;/p&gt;
&lt;p&gt;包含了Android核心mainfest文件。该文件罗列了app名字，版本，访问权限，和引用的library文件。该文件采用二进制XML格式。&lt;/p&gt;
&lt;p&gt;​&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&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;APK的大小对app的加载速度以及内存的使用和电量消耗都有影响。一种减小APK大小的最简单方法就是减少APK的资源文件数量和大小。也可以移除那些app不再使用的资源，或者使用可扩展的 &lt;code&gt;Drawable&lt;/code&gt; 对象替代图片文件。这部分讨论了这些方法，以及其它几种减小app资源以便最终达到减小APK总体大小的其它方法。&lt;/p&gt;
&lt;h3 id=&quot;移除无用资源&quot;&gt;&lt;a href=&quot;#移除无用资源&quot; class=&quot;headerlink&quot; title=&quot;移除无用资源&quot;&gt;&lt;/a&gt;移除无用资源&lt;/h3&gt;&lt;p&gt;使用 &lt;a href=&quot;https://developer.android.com/studio/write/lint.html&quot;&gt;&lt;code&gt;lint&lt;/code&gt;&lt;/a&gt; 工具,AndroidStudio中的一个静态的代码分析工具。可以检测&lt;code&gt;res/&lt;/code&gt; 目录下那些没有被引用的资源. 当 &lt;code&gt;lint&lt;/code&gt;工具发现了项目中潜在的无用资源，就会打印类似如下的信息：&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;res/layout/preferences.xml: Warning: The resource R.layout.preferences appears&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;    to be unused [UnusedResources]&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;strong&gt;注意:&lt;/strong&gt;  &lt;code&gt;lint&lt;/code&gt; 工具不能够扫描&lt;code&gt;assets/&lt;/code&gt; 目录, assets 资源是通过反射的方式引用的，或者app中引用的其它library 文件。但lint并不会移除资源，它只会提示它们的存在。&lt;/p&gt;
&lt;p&gt;你引入的Libraries有可能引入了无用的资源。Gradle可以通过在 &lt;code&gt;build.gradle&lt;/code&gt; 文件中开启&lt;a href=&quot;https://developer.android.com/studio/build/shrink-code.html&quot;&gt;&lt;code&gt;shrinkResources&lt;/code&gt;&lt;/a&gt; 来帮你自动的移除这些资源：&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/categories/Android/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
    
      <category term="Android，性能优化" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>Android性能优化-内存优化</title>
    <link href="http://www.lightskystreet.com/2016/10/16/android-optimize-memory/"/>
    <id>http://www.lightskystreet.com/2016/10/16/android-optimize-memory/</id>
    <published>2016-10-15T16:00:00.000Z</published>
    <updated>2016-10-16T02:38:15.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文链接 <a href="https://developer.android.com/topic/performance/memory.html#remove" target="_blank" rel="external">Manage Your App’s Memory</a>  </p>
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a><strong>前言</strong></h3><p>在任何软件开发环境中，RAM都是比较珍贵的资源。在移动操作系统上更是这样，因为它们的物理内存通常受限。尽管在ART和Dalvik虚拟机都会进行垃圾回收的巡航，但这并不意味着你可以忽略何时，何地分配和释放内存。你应该避免内存泄露，通常此后又一些静态成员变量导致，也应该在恰当的时间（定义的一些生命周期回调的方法里）释放所有<code>Reference</code> 对象。</p>
<p>这里见识了你如何减少app内存的使用。因为android是基于java的，所以对于内存的管理，可以参考java相关的书籍，下面章节中也会有所讲解。关于如何分析app运行中的内存使用，可以参考 <a href="https://developer.android.com/topic/performance/memory.html#AnalyzeRam" target="_blank" rel="external">Tools for analyzing RAM usage</a>。关于ART和Dalvik虚拟机管理内存的更多细节，可以参考 <a href="https://developer.android.com/training/articles/memory-overview.html" target="_blank" rel="external">Overview of Android Memory Management</a>.</p>
<h2 id="一-监测可用内存和内存使用"><a href="#一-监测可用内存和内存使用" class="headerlink" title="一 监测可用内存和内存使用"></a><strong>一 监测可用内存和内存使用</strong></h2><p>Android 框架，AndrStudio和Android SDK都提供了分析app内存使用的途径。Android框架暴露了几个API，允许你的app动态的减少内存使用、AndroidStudio和Android SDK提供了几种工具帮你分析app的内存使用情况。</p>
<h3 id="分析RAM使用的工具"><a href="#分析RAM使用的工具" class="headerlink" title="分析RAM使用的工具"></a>分析RAM使用的工具</h3><ol>
<li><p>Device Monitor 拥有一个 Dalvik Debug Monitor Server (DDMS) 工具，可以帮助你检测app进程中内存的分配。你可以通过该信息去分析app的总体内存使用情况。比如，先执行垃圾回收事件然后再去看那些仍然保留在内存中的对象。通过这种方式去定位app中所进行的内存分配或者遗留在内存中的对象。</p>
<p>更多关于DDMS的使用请参考 <a href="https://developer.android.com/studio/profile/ddms.html" target="_blank" rel="external">Using DDMS</a></p>
</li>
<li><p>Android Studio中的Memory Monitor 可以向你展示某一个过程中的内存分配情况。该工具以图形化的方式展示了某一时段可用的和已经分配的java内存，以及发送的垃圾回收事件。也可以触发垃圾回收事件并获取app运行期间java堆内存的快照。Memory Monitor tool 的输出信息也可以帮你定位到app密集发生垃圾回收事件的点，这些点会降低了app速度。</p>
<p>关于如何使用Memory Monitor tool的更多信息可以参考 <a href="https://developer.android.com/tools/debugging/debugging-memory.html#ViewHeap" target="_blank" rel="external">Viewing Heap Updates</a>.</p>
</li>
<li><p>垃圾回收事件也会展示在 Traceview viewer中。 Traceview 允许你以时间线的方式查看trace log文件，并可以分析一个事件段内都发生了什么。你可以使用该工具确定在你的代码在垃圾回收事件发生时都做了什么操作。</p>
<p>更多信息关于如何使用Traceview viewer, 可以参考 <a href="https://developer.android.com/studio/profile/traceview.html" target="_blank" rel="external">Profiling with Traceview and dmtracedump</a>.</p>
<p>​</p>
</li>
<li><p>Android Studio中的Allocation Tracker tool可以帮助你分析app是如何分配内存的。Allocation Tracker 记录了app内存的分配并在快照中列出了所有的分配对象。可以使用该工具追踪哪些地方分配了过多的对象。</p>
<p>更多关于如何使用Allocation Tracker tool，可以参考  <a href="https://developer.android.com/topic/performance/%7BdocRoot%7Dstudio/profile/allocation-tracker-walkthru.html" target="_blank" rel="external">Allocation Tracker Walkthrough</a>.</p>
</li>
</ol>
<h3 id="依据事件释放内存"><a href="#依据事件释放内存" class="headerlink" title="依据事件释放内存"></a>依据事件释放内存</h3><p>根据RAM的物理内存和设备的操作行为，Android设备可以在变化的可用内存中运行。在内存压力的情况下，系统的广播信号会提示，app可以监听这些信号然后对内存的使用做恰当的处理。</p>
<p>可以使用 <a href="https://developer.android.com/reference/android/content/ComponentCallbacks2.html" target="_blank" rel="external">ComponentCallbacks2</a> 来监听内存信号响应app生命周期或者设备的事件。<code>onTrimMemory()</code> 方法可以帮助你监听app在前台或者后台时内存相关的事件。</p>
<p>在Activity中实现<code>onTrimMemory()</code> 回调，如下：</p>
<a id="more"></a>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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></pre></td><td class="code"><pre><div class="line">import android.content.ComponentCallbacks2;</div><div class="line">// Other import statements ...</div><div class="line"></div><div class="line">public class MainActivity extends AppCompatActivity</div><div class="line">    implements ComponentCallbacks2 &#123;</div><div class="line"></div><div class="line">    // Other activity code ...</div><div class="line"></div><div class="line">    /**</div><div class="line">     * Release memory when the UI becomes hidden or when system resources become low.</div><div class="line">     * @param level the memory-related event that was raised.</div><div class="line">     */</div><div class="line">    public void onTrimMemory(int level) &#123;</div><div class="line"></div><div class="line">        // Determine which lifecycle or system event was raised.</div><div class="line">        switch (level) &#123;</div><div class="line"></div><div class="line">            case ComponentCallbacks2.TRIM_MEMORY_UI_HIDDEN:</div><div class="line"></div><div class="line">                /*</div><div class="line">                   Release any UI objects that currently hold memory.</div><div class="line"></div><div class="line">                   The user interface has moved to the background.</div><div class="line">                */</div><div class="line"></div><div class="line">                break;</div><div class="line"></div><div class="line">            case ComponentCallbacks2.TRIM_MEMORY_RUNNING_MODERATE:</div><div class="line">            case ComponentCallbacks2.TRIM_MEMORY_RUNNING_LOW:</div><div class="line">            case ComponentCallbacks2.TRIM_MEMORY_RUNNING_CRITICAL:</div><div class="line"></div><div class="line">                /*</div><div class="line">                   Release any memory that your app doesn&apos;t need to run.</div><div class="line"></div><div class="line">                   The device is running low on memory while the app is running.</div><div class="line">                   The event raised indicates the severity of the memory-related event.</div><div class="line">                   If the event is TRIM_MEMORY_RUNNING_CRITICAL, then the system will</div><div class="line">                   begin killing background processes.</div><div class="line">                */</div><div class="line"></div><div class="line">                break;</div><div class="line"></div><div class="line">            case ComponentCallbacks2.TRIM_MEMORY_BACKGROUND:</div><div class="line">            case ComponentCallbacks2.TRIM_MEMORY_MODERATE:</div><div class="line">            case ComponentCallbacks2.TRIM_MEMORY_COMPLETE:</div><div class="line"></div><div class="line">                /*</div><div class="line">                   Release as much memory as the process can.</div><div class="line"></div><div class="line">                   The app is on the LRU list and the system is running low on memory.</div><div class="line">                   The event raised indicates where the app sits within the LRU list.</div><div class="line">                   If the event is TRIM_MEMORY_COMPLETE, the process will be one of</div><div class="line">                   the first to be terminated.</div><div class="line">                */</div><div class="line"></div><div class="line">                break;</div><div class="line"></div><div class="line">            default:</div><div class="line">                /*</div><div class="line">                  Release any non-critical data structures.</div><div class="line"></div><div class="line">                  The app received an unrecognized memory level value</div><div class="line">                  from the system. Treat this as a generic low-memory message.</div><div class="line">                */</div><div class="line">                break;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><a href="https://developer.android.com/reference/android/content/ComponentCallbacks2.html#onTrimMemory" target="_blank" rel="external"> onTrimMemory()</a>方法是在Android 4.0（API 14）中加入的，你可以使用在其它的低版本中使用 <code>onLowMemory()</code>回调，相当于<a href="https://developer.android.com/reference/android/content/ComponentCallbacks2.html#TRIM_MEMORY_COMPLETE" target="_blank" rel="external"> TRIM_MEMORY_COMPLETE</a>事件。</p>
<h3 id="确定你应该使用多少内存"><a href="#确定你应该使用多少内存" class="headerlink" title="确定你应该使用多少内存"></a>确定你应该使用多少内存</h3><p>为了允许多进程，Android对每个app在堆内存的大小上设置了严格的限制。由于不同的设备的总的可用RAM内存不同，准确的堆内存的大小限制也不同。如果你的app达到了堆的内存限制，并且尝试分配更多内存，系统就会抛出OOM。</p>
<p>为了避免OOM，可以通过调用<code>getMemoryInfo()</code>方法去查询当前设备的可用内存堆内存空间。该方法会返回一个 <code>ActivityManager.MemoryInfo</code> 对象，该对象提供了设备的内存状态信息，包括可用内存，总内存和内存阀值（当内存低于该值得时候，系统将会杀死进程）。<code>ActivityManager.MemoryInfo</code> 类也暴露了一些简单的boolean字段， <code>lowMemory</code> 就直接告诉你你的设备是否运行在低内存环境。下面的代码片段展示了如何使用在你的应用中使用 <code>getMemoryInfo()</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></pre></td><td class="code"><pre><div class="line">public void doSomethingMemoryIntensive() &#123;</div><div class="line"></div><div class="line">    // Before doing something that requires a lot of memory,</div><div class="line">    // check to see whether the device is in a low memory state.</div><div class="line">    ActivityManager.MemoryInfo memoryInfo = getAvailableMemory();</div><div class="line"></div><div class="line">    if (!memoryInfo.lowMemory) &#123;</div><div class="line">        // Do memory intensive work ...</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">// Get a MemoryInfo object for the device&apos;s current memory status.</div><div class="line">private ActivityManager.MemoryInfo getAvailableMemory() &#123;</div><div class="line">    ActivityManager activityManager = (ActivityManager) this.getSystemService(ACTIVITY_SERVICE);</div><div class="line">    ActivityManager.MemoryInfo memoryInfo = new ActivityManager.MemoryInfo();</div><div class="line">    activityManager.getMemoryInfo(memoryInfo);</div><div class="line">    return memoryInfo;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="二-从代码角度优化内存"><a href="#二-从代码角度优化内存" class="headerlink" title="二 从代码角度优化内存"></a>二 从代码角度优化内存</h2><p>一些android的特性，java classes ，以及代码结构有时候会占用更多内存，我们应该通过选择更高效的方案来减少内存的使用。</p>
<h3 id="节省的使用Service"><a href="#节省的使用Service" class="headerlink" title="节省的使用Service"></a>节省的使用Service</h3><p>在后台保留一个不需要的service，是最糟糕的内存管理方式之一。如果你需要通过service在后台去执行任务，除非当它将要去执行一个任务的时候，否则不应该一直在后台驻留。在完成任务后记得将service停掉，否则可能在不经意间导致了内存泄露（这里应该是指service占用了无用的资源）。</p>
<p>当你启动一个service的时候，系统会更好的保留service所运行的进程。这样会导致service 进程非常的消耗资源，因为被一个service占用的RAM部分，其它Servie就不可用了。这样会减少系统在LRU cache中缓存的进程数量，降低了app的切换效率。当内存紧张时，甚至会导致内存抖动，并且系统无法维护足够的进程来托管当前运行的所有服务。。</p>
<p>尽量避免使用持久化的service，因为它持有占有了可用内存。建议使用其它替代方案，比如 <code>JobScheduler</code>。关于<code>JobScheduler</code>如何调度后台进程，可以参考<a href="https://developer.android.com/topic/performance/background-optimization.html" target="_blank" rel="external">Background Optimizations</a>。</p>
<p>如果必须使用service，最好是使用 <code>IntentService</code>来限制service的生命周期，一旦处理完启动它的Intent，该IntentService就会将自己停掉。更多信息可以参考<a href="https://developer.android.com/training/run-background-service/index.html" target="_blank" rel="external">Running in a Background Service</a>.</p>
<h3 id="使用内存更高效的代码结构"><a href="#使用内存更高效的代码结构" class="headerlink" title="使用内存更高效的代码结构"></a>使用内存更高效的代码结构</h3><p>一些编程语言中的类没有针对移动设备进行优化。比如，通用HashMap实现可能是相当的内存低效，因为它需要为每个映射关系创建单独的对象。</p>
<p>Android框架中提供了几种优化过的数据结构，比如<a href="https://developer.android.com/reference/android/util/SparseArray.html" target="_blank" rel="external">SparseArray</a>, <a href="https://developer.android.com/reference/android/util/SparseBooleanArray.html" target="_blank" rel="external">SparseBooleanArray</a> 和 <a href="https://developer.android.com/reference/android/support/v4/util/LongSparseArray.html" target="_blank" rel="external">LongSparseArray</a>,比如<code>SparseArray</code> 避免了对key的自动装箱（导致每个实体会多创建对象），所以更高效。</p>
<h3 id="小心的使用代码抽象"><a href="#小心的使用代码抽象" class="headerlink" title="小心的使用代码抽象"></a><strong>小心的使用代码抽象</strong></h3><p>开发人员经常简单地使用抽象作为一个好的编程实践，因为抽象可以提高代码的灵活性和维护性。但是抽象会带来严重的开销：通常它们需要额外执行相当多的更多代码，需要更多的时间和RAM将代码映射到内存中。因此，如果你的抽象不能带来比较大的好处，那么请避免使用抽象。</p>
<p>比如，枚举相对于静态通常需要两倍甚至更多的内存。你应该严格避免在android中使用枚举。</p>
<h3 id="使用nano-protobufs进行序列化"><a href="#使用nano-protobufs进行序列化" class="headerlink" title="使用nano protobufs进行序列化"></a><strong>使用nano protobufs进行序列化</strong></h3><p><a href="https://developers.google.com/protocol-buffers/docs/overview" target="_blank" rel="external">Protocol buffers</a>是由Google研发，跨语言、跨平台，扩展性非常好的序列化数据结构，类似XML，但是更小更快，更简单。如果你决定使用protobufs进行序列化，你应该在客户端代码中使用nano protobufs。因为一般的protobufs会生成冗余的代码，导致各种问题，比如增加RAM的使用，APK大小，比较低的执行效率。</p>
<p>更多信息可以参考 <a href="https://android.googlesource.com/platform/external/protobuf/+/master/java/README.txt" target="_blank" rel="external">protobuf readme</a> “Nano version”部分</p>
<h3 id="避免内存抖动"><a href="#避免内存抖动" class="headerlink" title="避免内存抖动"></a><strong>避免内存抖动</strong></h3><p>上面提到，通常垃圾回收事件不会影响到你的app性能。但是，在短时间内突然发生很多的垃圾回收事件就会占用了帧的时间。系统花费在垃圾回收上的时间越多，那么用于渲染或者音频的时间就越少。</p>
<p>通常，内存抖动会导致大量的垃圾收集事件发生。在实践中，内存抖动是指在在一个特定时间内分配了很多临时对象。</p>
<p>比如，你可能在for 循环中分配了多个临时对象。或者在onDraw中创建了新的Paint或者Bitmap对象。这两种情况下，app都会快速创建大量的对象。这样会快速消耗掉young generation中的可用内存，强制垃圾回收器触发回收事件。</p>
<p>通过  <a href="https://developer.android.com/topic/performance/memory.html#AnalyzeRam" target="_blank" rel="external">Analyze your RAM usage</a> 可以帮你找到代码中哪些地方导致了内存抖动。</p>
<p>一旦定位到了问题，就应该试着在性能问题严重的地方减少对象的分配。考虑将他们移到内部循环外面，可能的话，也可以通过 <a href="https://en.wikipedia.org/wiki/Factory_method_pattern" target="_blank" rel="external">Factory模式</a>来实现。</p>
<h2 id="三-移除内存敏感的资源和库"><a href="#三-移除内存敏感的资源和库" class="headerlink" title="三 移除内存敏感的资源和库"></a>三 移除内存敏感的资源和库</h2><p>一些资源和库会在你不知道的情况下占用掉很多内存。总览下apk的大小，包含了哪些可能导致内存浪费的第三方的库和内嵌资源。通过移除冗余的。不必要的资源和库来提高内存的使用。</p>
<h3 id="减小总体的APK大小"><a href="#减小总体的APK大小" class="headerlink" title="减小总体的APK大小"></a><strong>减小总体的APK大小</strong></h3><p>您可以通过减少应用程序的整体大小来显着降低应用程序的内存使用量。Bitmap 大小、资源、动画帧数，和第三方库都可能增大了APK的大小。Android Studio 和 Android SDK 提供了一些工具可以帮你减少资源和外部依赖。</p>
<p>如何如何减少APK的大小，可以参考<a href="https://developer.android.com/topic/performance/reduce-apk-size.html" target="_blank" rel="external">Reduce APK Size</a>.</p>
<h3 id="小心的使用注解框架"><a href="#小心的使用注解框架" class="headerlink" title="小心的使用注解框架"></a><strong>小心的使用注解框架</strong></h3><p>比如Guice或者RoboGuice的依赖注解框架虽然简化了你的代码书写，并为测试或者其它的可能变化配置信息提供了适配。但是这些依赖框架并没有针对移动设备做优化。</p>
<p>比如，这些框架通常会通过扫描你的代码或者注解来进行初始化。系统会将这些映射页面分配到内存中，以便Android可以删除它们; 但这些映射页面所占用的内存会在很长一段时间之后才会被删除。</p>
<p>如果你需要使用注解框架，考虑使用<a href="http://google.github.io/dagger/" target="_blank" rel="external">Dagger</a>。比如，Dagger不会使用反射扫描代码。Dagger的严格实现意味着它可以用于Android应用中而不会增加不必要的内存使用。</p>
<h3 id="小心的使用外部库"><a href="#小心的使用外部库" class="headerlink" title="小心的使用外部库"></a><strong>小心的使用外部库</strong></h3><p>外部库的代码通常不会为移动环境而写，执行在移动设备上也更低效。当你决定使用一个外部库的时候，可能需要为移动设备做优化。在你决定使用之前，先考虑代码量的大小和RAM占用空间。</p>
<p>有时一些针对移动设备优化的库由于不同的实现也会产生问题。比如，某个库可能使用了nano版本的protobufs，然而另一个使用了micro protobufs，就会导致两个版本的实现。这样就会导致两份</p>
<p>logging，analytics，Image loading框架、缓存以及其它一些不期望的问题。</p>
<p>尽管 <a href="https://developer.android.com/tools/help/proguard.html" target="_blank" rel="external">ProGuard</a> 会帮助你移除API和资源，但是不会移除一个库的内部依赖。如果你使用了依赖库中的Activity子类（会导致比较宽泛的依赖关系，和你现有的Activity就会有很大冲突），问题将尤为严重。又或者，如果这个库中使用了反射等技术，你还要花大量时间去处理混淆。所以在你决定使用一个库的时候，需要慎重的考虑它是否非常匹配你的需求，否则你应该考虑自己实现一套。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接 &lt;a href=&quot;https://developer.android.com/topic/performance/memory.html#remove&quot;&gt;Manage Your App’s Memory&lt;/a&gt;  &lt;/p&gt;
&lt;h3 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;&lt;strong&gt;前言&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;在任何软件开发环境中，RAM都是比较珍贵的资源。在移动操作系统上更是这样，因为它们的物理内存通常受限。尽管在ART和Dalvik虚拟机都会进行垃圾回收的巡航，但这并不意味着你可以忽略何时，何地分配和释放内存。你应该避免内存泄露，通常此后又一些静态成员变量导致，也应该在恰当的时间（定义的一些生命周期回调的方法里）释放所有&lt;code&gt;Reference&lt;/code&gt; 对象。&lt;/p&gt;
&lt;p&gt;这里见识了你如何减少app内存的使用。因为android是基于java的，所以对于内存的管理，可以参考java相关的书籍，下面章节中也会有所讲解。关于如何分析app运行中的内存使用，可以参考 &lt;a href=&quot;https://developer.android.com/topic/performance/memory.html#AnalyzeRam&quot;&gt;Tools for analyzing RAM usage&lt;/a&gt;。关于ART和Dalvik虚拟机管理内存的更多细节，可以参考 &lt;a href=&quot;https://developer.android.com/training/articles/memory-overview.html&quot;&gt;Overview of Android Memory Management&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;一-监测可用内存和内存使用&quot;&gt;&lt;a href=&quot;#一-监测可用内存和内存使用&quot; class=&quot;headerlink&quot; title=&quot;一 监测可用内存和内存使用&quot;&gt;&lt;/a&gt;&lt;strong&gt;一 监测可用内存和内存使用&lt;/strong&gt;&lt;/h2&gt;&lt;p&gt;Android 框架，AndrStudio和Android SDK都提供了分析app内存使用的途径。Android框架暴露了几个API，允许你的app动态的减少内存使用、AndroidStudio和Android SDK提供了几种工具帮你分析app的内存使用情况。&lt;/p&gt;
&lt;h3 id=&quot;分析RAM使用的工具&quot;&gt;&lt;a href=&quot;#分析RAM使用的工具&quot; class=&quot;headerlink&quot; title=&quot;分析RAM使用的工具&quot;&gt;&lt;/a&gt;分析RAM使用的工具&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Device Monitor 拥有一个 Dalvik Debug Monitor Server (DDMS) 工具，可以帮助你检测app进程中内存的分配。你可以通过该信息去分析app的总体内存使用情况。比如，先执行垃圾回收事件然后再去看那些仍然保留在内存中的对象。通过这种方式去定位app中所进行的内存分配或者遗留在内存中的对象。&lt;/p&gt;
&lt;p&gt;更多关于DDMS的使用请参考 &lt;a href=&quot;https://developer.android.com/studio/profile/ddms.html&quot;&gt;Using DDMS&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Android Studio中的Memory Monitor 可以向你展示某一个过程中的内存分配情况。该工具以图形化的方式展示了某一时段可用的和已经分配的java内存，以及发送的垃圾回收事件。也可以触发垃圾回收事件并获取app运行期间java堆内存的快照。Memory Monitor tool 的输出信息也可以帮你定位到app密集发生垃圾回收事件的点，这些点会降低了app速度。&lt;/p&gt;
&lt;p&gt;关于如何使用Memory Monitor tool的更多信息可以参考 &lt;a href=&quot;https://developer.android.com/tools/debugging/debugging-memory.html#ViewHeap&quot;&gt;Viewing Heap Updates&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;垃圾回收事件也会展示在 Traceview viewer中。 Traceview 允许你以时间线的方式查看trace log文件，并可以分析一个事件段内都发生了什么。你可以使用该工具确定在你的代码在垃圾回收事件发生时都做了什么操作。&lt;/p&gt;
&lt;p&gt;更多信息关于如何使用Traceview viewer, 可以参考 &lt;a href=&quot;https://developer.android.com/studio/profile/traceview.html&quot;&gt;Profiling with Traceview and dmtracedump&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;​&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Android Studio中的Allocation Tracker tool可以帮助你分析app是如何分配内存的。Allocation Tracker 记录了app内存的分配并在快照中列出了所有的分配对象。可以使用该工具追踪哪些地方分配了过多的对象。&lt;/p&gt;
&lt;p&gt;更多关于如何使用Allocation Tracker tool，可以参考  &lt;a href=&quot;https://developer.android.com/topic/performance/%7BdocRoot%7Dstudio/profile/allocation-tracker-walkthru.html&quot;&gt;Allocation Tracker Walkthrough&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;依据事件释放内存&quot;&gt;&lt;a href=&quot;#依据事件释放内存&quot; class=&quot;headerlink&quot; title=&quot;依据事件释放内存&quot;&gt;&lt;/a&gt;依据事件释放内存&lt;/h3&gt;&lt;p&gt;根据RAM的物理内存和设备的操作行为，Android设备可以在变化的可用内存中运行。在内存压力的情况下，系统的广播信号会提示，app可以监听这些信号然后对内存的使用做恰当的处理。&lt;/p&gt;
&lt;p&gt;可以使用 &lt;a href=&quot;https://developer.android.com/reference/android/content/ComponentCallbacks2.html&quot;&gt;ComponentCallbacks2&lt;/a&gt; 来监听内存信号响应app生命周期或者设备的事件。&lt;code&gt;onTrimMemory()&lt;/code&gt; 方法可以帮助你监听app在前台或者后台时内存相关的事件。&lt;/p&gt;
&lt;p&gt;在Activity中实现&lt;code&gt;onTrimMemory()&lt;/code&gt; 回调，如下：&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/categories/Android/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
    
      <category term="Android，性能优化" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>Android性能优化-App后台优化</title>
    <link href="http://www.lightskystreet.com/2016/10/16/android-optimize-background/"/>
    <id>http://www.lightskystreet.com/2016/10/16/android-optimize-background/</id>
    <published>2016-10-15T16:00:00.000Z</published>
    <updated>2016-10-16T09:43:50.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文链接 <a href="https://developer.android.com/topic/performance/background-optimization.html" target="_blank" rel="external">Background Optimizations</a></p>
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>后台进程是内存和电池敏感的。一个隐式的broadcast可能会启动很多监听它的后台进程，即使这些进程可能做得工作不多。这可能丢设备性能和用户体验都有比较大的影响。</p>
<p>为了缓解这种问题，7.0（API 24）做了以下限制：</p>
<ul>
<li>Target为 Android 7.0 (API level 24)的App，将不会再收到在mainfest中注册的 <code>CONNECTIVITY_ACTION</code>广播。运行中的App仍然可以在Main Thread中通过<code>Context.registerReceiver()</code>注册 <code>CONNECTIVITY_CHANGE</code> 广播来监听</li>
</ul>
<ul>
<li>App 将不能够发送或者接收  <code>ACTION_NEW_PICTURE</code> or <code>ACTION_NEW_VIDEO</code>。这种优化会影响到所有的app，不仅是target为Android7.0的设备。`</li>
</ul>
<p>因此如果你使用了这些intennt，应该尽快的移除对它们的依赖，以便你的app可以在Target为Android 7.0的设备上正常运行。Android框架提供了几种解决方案去减小对这些隐式广播的依赖。比如，<code>JobScheduler</code> and <code>GcmNetworkManager</code>提供了强健的机制去调度特定情况下的网络操作。比如，你也可以使用<a href="https://developer.android.com/reference/android/app/job/JobScheduler.html" target="_blank" rel="external">JobScheduler</a>去响应content provider的变化。<code>JobInfo</code>对象封装了<code>JobScheduler</code>用于调度job的参数。当满足指定的条件的时候，系统会通<a href="https://developer.android.com/reference/android/app/job/JobService.html" target="_blank" rel="external">JobService</a>过执行该job。</p>
<p>这篇文章将会告诉你如何使用替代的方法，比如JobScheduler去为你的app做这些限制的适配。</p>
<h2 id="一-CONNECTIVITY-ACTION的限制"><a href="#一-CONNECTIVITY-ACTION的限制" class="headerlink" title="一 CONNECTIVITY_ACTION的限制"></a>一 CONNECTIVITY_ACTION的限制</h2><p>上面提到，Android 7.0 (API level 24) 将不再能够收到mainfest中注册的 <code>CONNECTIVITY_ACTION</code> 广播。Android框架中已经提供了几种替代方案，如何选择依赖于你的具体实现。</p>
<p><strong>注意：</strong>一个通过 <code>Context.registerReceiver()</code>注册的<a href="https://developer.android.com/reference/android/content/BroadcastReceiver.html" target="_blank" rel="external">BroadcastReceiver</a> 在app运行期间是可以继续收到广播的。</p>
<a id="more"></a>
<h3 id="在不可预测的网络的情况下调度Network-Jobs"><a href="#在不可预测的网络的情况下调度Network-Jobs" class="headerlink" title="在不可预测的网络的情况下调度Network Jobs"></a>在不可预测的网络的情况下调度Network Jobs</h3><p>当使用 <code>JobInfo.Builder</code> 类构建 <code>JobInfo</code>对象的时候, 通过 <code>setRequiredNetworkType()</code> 方法并传递<code>JobInfo.NETWORK_TYPE_UNMETERED</code>参数。下面的示例代码演示了当设备连接到一个未知的网络并且是在充电的时候，去调度一个service去执行的情景：</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">public static final int MY_BACKGROUND_JOB = 0;</div><div class="line">...</div><div class="line">public static void scheduleJob(Context context) &#123;</div><div class="line">  JobScheduler js =</div><div class="line">      (JobScheduler) context.getSystemService(Context.JOB_SCHEDULER_SERVICE);</div><div class="line">  JobInfo job = new JobInfo.Builder(</div><div class="line">    MY_BACKGROUND_JOB,</div><div class="line">    new ComponentName(context, MyJobService.class))</div><div class="line">      .setRequiredNetworkType(JobInfo.NETWORK_TYPE_UNMETERED)</div><div class="line">      .setRequiresCharging(true)</div><div class="line">      .build();</div><div class="line">  js.schedule(job);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>当以上条件满足的时候，app就会收到一个回调去执行指定的<code>JobService.class</code>中的<code>onStartJob()</code>方法，更多 <code>JobScheduler</code>实例可参考 <a href="https://developer.android.com/samples/JobScheduler/index.html" target="_blank" rel="external">JobScheduler sample app</a>.</p>
<p>使用GMSCore service的应用，并且target是5.0或者以下的，可以使用 <a href="https://developers.google.com/android/reference/com/google/android/gms/gcm/GcmNetworkManager" target="_blank" rel="external"><code>GcmNetworkManager</code></a> 并指定 <code>Task.NETWORK_STATE_UNMETERED。</code></p>
<h3 id="在APP运行期间监测网络连接"><a href="#在APP运行期间监测网络连接" class="headerlink" title="在APP运行期间监测网络连接"></a>在APP运行期间监测网络连接</h3><p>运行期间的App仍然可以监听<code>CONNECTIVITY_CHANGE</code> ，但是， <code>ConnectivityManager</code> 提供了更多强大的方法在特定网络条件满足的时候去触发一个回调。</p>
<p><a href="https://developer.android.com/reference/android/net/NetworkRequest.html" target="_blank" rel="external"><code>NetworkRequest</code></a>对象定义了<a href="https://developer.android.com/reference/android/net/NetworkRequest.html" target="_blank" rel="external"><code>NetworkCapabilities</code></a>相关网络回调的参数，你可以通过<code>NetworkRequest.Builder</code>类构建<code>NetworkRequest对象，</code>registerNetworkCallback()<code>，然后将NetworkRequest</code>传递对象到系统中去。当网络条件满足的时候，app就会受到一个回调去执行定义在 <code>ConnectivityManager.NetworkCallback</code>中的 <code>onAvailable()</code>方法。</p>
<p>App会一直接收注册的回调，除非app退出或者调用<code>unregisterNetworkCallback()</code>方法。</p>
<h2 id="二-NEW-PICTURE-和-NEW-VIDEO-的限制"><a href="#二-NEW-PICTURE-和-NEW-VIDEO-的限制" class="headerlink" title="二 NEW_PICTURE 和 NEW_VIDEO 的限制"></a>二 NEW_PICTURE 和 NEW_VIDEO 的限制</h2><p>Android 7.0 (API level 24),中，app将不能够发送和接收这两个广播。当几个不同的app必须唤醒设备去处理一个新的Image或者video的时候，这样的限制可以改善性能和用户体验的影响。Android 7.0 (API level 24) 扩展了 <code>JobInfo</code> 和 <code>JobParameters</code>来提供一种替代方案。</p>
<h3 id="新的JobInfo方法"><a href="#新的JobInfo方法" class="headerlink" title="新的JobInfo方法"></a>新的JobInfo方法</h3><p>为了让content URI的变化去触发job，Android 7.0 (API level 24)扩展了<a href="https://developer.android.com/reference/android/app/job/JobInfo.html" target="_blank" rel="external"> <code>JobInfo</code> </a>的以下方法：</p>
<ul>
<li><code>JobInfo.TriggerContentUri()</code></li>
</ul>
<p>​    封装了contentn URL变化需要的参数</p>
<ul>
<li><p><code>JobInfo.Builder.addTriggerContentUri()</code></p>
<p>   传递一个 <code>TriggerContentUri</code> 对象给<code>JobInfo</code>。一个<code>ContentObserver</code> 监测器封装的content URI。如果这里有多个<code>TriggerContentUri</code> 对象关联到某个job上，只要其中某个URI变化，系统都会触发回调事件。</p>
</li>
</ul>
<p><code>TriggerContentUri.FLAG_NOTIFY_FOR_DESCENDANTS</code> 标志在任何给定URI的子集有变化的时候，都会触发job。该标志对应于传递给<code>registerContentObserver()</code>的<code>notifyForDescendants</code>参数。</p>
<p><strong>注意:</strong> <code>TriggerContentUri()</code> cannot be used in combination with <code>setPeriodic()</code> or <code>setPersisted()</code>. To continually monitor for content changes, schedule a new <code>JobInfo</code> before the app’s <code>JobService</code> finishes handling the most recent callback.</p>
<p><strong>注意</strong>：<code>TriggerContentUri()</code> 不能够和 <code>setPeriodic()</code> 或者 <code>setPersisted()</code>一起使用。为了持续地监测content 的变化，可以在<code>JobService</code> 处理完最近的回调之前去调度一个新的JobInfo。</p>
<p>下面的代码演示了当系统上报一个MEDIA_URI contentURI的时候，调度一个job的场景：</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">public static final int MY_BACKGROUND_JOB = 0;</div><div class="line">...</div><div class="line">public static void scheduleJob(Context context) &#123;</div><div class="line">  JobScheduler js =</div><div class="line">          (JobScheduler) context.getSystemService(Context.JOB_SCHEDULER_SERVICE);</div><div class="line">  JobInfo.Builder builder = new JobInfo.Builder(</div><div class="line">          MY_BACKGROUND_JOB,</div><div class="line">          new ComponentName(context, MediaContentJob.class));</div><div class="line">  builder.addTriggerContentUri(</div><div class="line">          new JobInfo.TriggerContentUri(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,</div><div class="line">          JobInfo.TriggerContentUri.FLAG_NOTIFY_FOR_DESCENDANTS));</div><div class="line">  js.schedule(builder.build());</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>当系统上报指定的conent URI(s)，你的app会收到一个回调和一个传递给<code>onStartJob()</code>方法（ 在<code>MediaContentJob.class</code>中）的 <code>JobParameters</code> 对象。</p>
<h3 id="新的JobParameter方法"><a href="#新的JobParameter方法" class="headerlink" title="新的JobParameter方法"></a><strong>新的JobParameter方法</strong></h3><p>Android 7.0 (API level 24)也扩展了<code>JobParameters</code>允许app接收有用的信息，该信息包含了具体是哪些content authorities 和 URIs 触发了job。</p>
<ul>
<li><code>Uri[] getTriggeredContentUris()</code></li>
</ul>
<p>返回一个触发了该Job的URIs数组。如果没有URIs触发job，或者URIs的数量大于50，那么该数组将为null（有可能job是由于其它原因触发，比如一个deadline）。</p>
<ul>
<li><code>String[] getTriggeredContentAuthorities()</code></li>
</ul>
<p>Returns a string array of content authorities that have triggered the job. If the returned array is not <code>null</code>, use <code>getTriggeredContentUris()</code> to retrieve the details of which URIs have changed.</p>
<p>The following sample code overrides the <code>JobService.onStartJob()</code> method and records the content authorities and URIs that have triggered the job:</p>
<p>返回一个触发了该Job的content authorities数组。如果返回的数组不为null，可以使用 <code>getTriggeredContentUris()</code>方法获取URIs变化的具体信息。</p>
<p>下面的代码复写了 <code>JobService.onStartJob()</code> 方法，并且记录了触发job的 content authorities 和URIs ：</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></pre></td><td class="code"><pre><div class="line">@Override</div><div class="line">publicboolean onStartJob(JobParametersparams)&#123;</div><div class="line">  StringBuilder sb =newStringBuilder();</div><div class="line">  sb.append(&quot;Media content has changed:\n&quot;);</div><div class="line">  if(params.getTriggeredContentAuthorities()!=null)&#123;</div><div class="line">      sb.append(&quot;Authorities: &quot;);</div><div class="line">      boolean first =true;</div><div class="line">      for(String auth :</div><div class="line">          params.getTriggeredContentAuthorities())&#123;</div><div class="line">          if(first)&#123;</div><div class="line">              first =false;</div><div class="line">          &#125;else&#123;</div><div class="line">             sb.append(&quot;, &quot;);</div><div class="line">          &#125;</div><div class="line">           sb.append(auth);</div><div class="line">      &#125;</div><div class="line">      if(params.getTriggeredContentUris()!=null)&#123;</div><div class="line">          for(Uri uri :params.getTriggeredContentUris())&#123;</div><div class="line">              sb.append(&quot;\n&quot;);</div><div class="line">              sb.append(uri);</div><div class="line">          &#125;</div><div class="line">      &#125;</div><div class="line">  &#125;else&#123;</div><div class="line">      sb.append(&quot;(No content)&quot;);</div><div class="line">  &#125;</div><div class="line">  Log.i(TAG, sb.toString());</div><div class="line">  returntrue;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="三-Further-Optimizing-Your-App"><a href="#三-Further-Optimizing-Your-App" class="headerlink" title="三 Further Optimizing Your App"></a>三 Further Optimizing Your App</h2><p>为低内存设备或者在低内存条件做优化，可以提升系能和用户体验。移除对后台的service的依赖和静态方式注册的隐式广播，可以帮助你的app在这样的设备上运行的更好。尽管7.0上采取了一些措施减少了这些问题，但还是建议去优化app，即使在完全没有使用后台进程的情况也可以正常运行。</p>
<p>Android 7.0 (API level 24)引入了一些 <a href="https://developer.android.com/tools/help/adb.html" target="_blank" rel="external">Android Debug Bridge (ADB)</a> 命令，可以帮助你测试app在禁止后台进程的情况下app的行为：</p>
<ul>
<li><p>模拟隐式广播和后台service不可用的情况，可以使用下面的命令</p>
<p><code>$ adb shell cmd appops set  RUN_IN_BACKGROUND ignore</code></p>
</li>
<li><p>重新开启隐式广播和后台service</p>
<p><code>$ adb shell cmd appops set  RUN_IN_BACKGROUND allow</code></p>
</li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接 &lt;a href=&quot;https://developer.android.com/topic/performance/background-optimization.html&quot;&gt;Background Optimizations&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h3&gt;&lt;p&gt;后台进程是内存和电池敏感的。一个隐式的broadcast可能会启动很多监听它的后台进程，即使这些进程可能做得工作不多。这可能丢设备性能和用户体验都有比较大的影响。&lt;/p&gt;
&lt;p&gt;为了缓解这种问题，7.0（API 24）做了以下限制：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Target为 Android 7.0 (API level 24)的App，将不会再收到在mainfest中注册的 &lt;code&gt;CONNECTIVITY_ACTION&lt;/code&gt;广播。运行中的App仍然可以在Main Thread中通过&lt;code&gt;Context.registerReceiver()&lt;/code&gt;注册 &lt;code&gt;CONNECTIVITY_CHANGE&lt;/code&gt; 广播来监听&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
&lt;li&gt;App 将不能够发送或者接收  &lt;code&gt;ACTION_NEW_PICTURE&lt;/code&gt; or &lt;code&gt;ACTION_NEW_VIDEO&lt;/code&gt;。这种优化会影响到所有的app，不仅是target为Android7.0的设备。`&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;因此如果你使用了这些intennt，应该尽快的移除对它们的依赖，以便你的app可以在Target为Android 7.0的设备上正常运行。Android框架提供了几种解决方案去减小对这些隐式广播的依赖。比如，&lt;code&gt;JobScheduler&lt;/code&gt; and &lt;code&gt;GcmNetworkManager&lt;/code&gt;提供了强健的机制去调度特定情况下的网络操作。比如，你也可以使用&lt;a href=&quot;https://developer.android.com/reference/android/app/job/JobScheduler.html&quot;&gt;JobScheduler&lt;/a&gt;去响应content provider的变化。&lt;code&gt;JobInfo&lt;/code&gt;对象封装了&lt;code&gt;JobScheduler&lt;/code&gt;用于调度job的参数。当满足指定的条件的时候，系统会通&lt;a href=&quot;https://developer.android.com/reference/android/app/job/JobService.html&quot;&gt;JobService&lt;/a&gt;过执行该job。&lt;/p&gt;
&lt;p&gt;这篇文章将会告诉你如何使用替代的方法，比如JobScheduler去为你的app做这些限制的适配。&lt;/p&gt;
&lt;h2 id=&quot;一-CONNECTIVITY-ACTION的限制&quot;&gt;&lt;a href=&quot;#一-CONNECTIVITY-ACTION的限制&quot; class=&quot;headerlink&quot; title=&quot;一 CONNECTIVITY_ACTION的限制&quot;&gt;&lt;/a&gt;一 CONNECTIVITY_ACTION的限制&lt;/h2&gt;&lt;p&gt;上面提到，Android 7.0 (API level 24) 将不再能够收到mainfest中注册的 &lt;code&gt;CONNECTIVITY_ACTION&lt;/code&gt; 广播。Android框架中已经提供了几种替代方案，如何选择依赖于你的具体实现。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;注意：&lt;/strong&gt;一个通过 &lt;code&gt;Context.registerReceiver()&lt;/code&gt;注册的&lt;a href=&quot;https://developer.android.com/reference/android/content/BroadcastReceiver.html&quot;&gt;BroadcastReceiver&lt;/a&gt; 在app运行期间是可以继续收到广播的。&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/categories/Android/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
    
      <category term="Android，性能优化" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>Android性能优化-App启动优化</title>
    <link href="http://www.lightskystreet.com/2016/10/15/android-optimize-start/"/>
    <id>http://www.lightskystreet.com/2016/10/15/android-optimize-start/</id>
    <published>2016-10-14T16:00:00.000Z</published>
    <updated>2016-10-16T09:42:06.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文地址：<a href="https://developer.android.com/topic/performance/launch-time.html#common" target="_blank" rel="external">https://developer.android.com/topic/performance/launch-time.html#common</a>  </p>
<p>通常用户期望app响应和加载速度越快越好。一个启动速度慢的app很可能会给用户留下不好的印象，除了导致用户在应用市场上的打分低之外，很有可能导致致用户直接卸载。</p>
<p>这篇文章提供了优化app启动时间的方法。先解释了app进程启动的内部流程。然后讨论如何优化启动的性能。最后列出几个常见的启动问题和解决方案。</p>
<h2 id="一-启动内幕"><a href="#一-启动内幕" class="headerlink" title="一 启动内幕"></a><strong>一 启动内幕</strong></h2><p>App启动可能发生在以下三种状态 之一，每一种都会影响到展现给用户的时间：冷启动、热启动和温启动（翻译的有点怪，介于冷和热之间吧）。</p>
<p>冷启动下，app所做的事情不较多，其它两种情况，系统只需要将app从后台切到前台。建议你在冷启动的基础上做优化，这样也会提升热启动和温启动的性能。</p>
<p>为了更好地优化app的启动，了解系统和app层做了什么以及如何相互影响很有必要。</p>
<h3 id="1-1-冷启动"><a href="#1-1-冷启动" class="headerlink" title="1.1 冷启动"></a>1.1 冷启动</h3><p>冷启动指：在app启动之前，系统的进程还没有，直到app启动创建app的进程。冷启动会发生在device重启或者app被杀死的情况下。这种启动在优化启动时间上，有更大的挑战，因为相比其它两种启动方式，系统和app有更多的工作需要处理。</p>
<p>冷启动之前，系统会执行以下三个task：</p>
<p>1、加载并启动app</p>
<p>2、在app启动后，立即展示空白的window</p>
<p>3、创建app进程</p>
<p>一旦系统创建了app进程，那么app进程就会执行以下步骤</p>
<p>1、创建app对象</p>
<p>2、启动main thread</p>
<p>3、创建MainActivity</p>
<p>4、Inflate view</p>
<p>5、布置屏幕</p>
<p>6、进行首次绘制</p>
<a id="more"></a>
<p>一旦app进程完成了第一次绘制，系统进程就会用main activity替换已经展示的background window。之后用户才可以使用app。</p>
<p>下图展示了系统和app进程互相如何工作的，展示了app启动时期的几个重要部分，在创建app和main activity之间，我们可以提升性能问题</p>
<p><img src="/img/android-optimize-app-start/app-launch-flow.png">  </p>
<h4 id="Application的创建"><a href="#Application的创建" class="headerlink" title="Application的创建"></a>Application的创建</h4><p>当应用启动的时候，空白的window在app第一次完成绘制之前都会存在。在那之后，系统进程才会替换启动窗口，允许用户开始和app交互。</p>
<p>如果你复写了  <code>Application.oncreate()</code> 方法，app启动的时候，会调用该方法。之后，app会孵化主线程（UI线程），并通过它来创建main activity。</p>
<p>从这之后，系统和app级别的进程将会按照<a href="https://developer.android.com/topic/performance/%7BdocRoot%7Dguide/topics/processes/process-lifecycle.html" target="_blank" rel="external">app lifecycle stages</a> 执行。</p>
<h4 id="Activity的创建"><a href="#Activity的创建" class="headerlink" title="Activity的创建"></a>Activity的创建</h4><p>在app进程创建了Activity之后，Activity将会执行以下操作</p>
<p>1、初始化值</p>
<p>2、调用构造函数</p>
<p>3、调用毁掉方法，比如Activity.onCreate()。</p>
<p>通常，onCreate方法会对加载时间有比较大的影响。因为它将执行繁重的工作：加载和填充view，并初始化Activity运行期间需要用的对象。</p>
<h3 id="1-2-热启动"><a href="#1-2-热启动" class="headerlink" title="1.2 热启动"></a>1.2 热启动</h3><p>相对于冷启动，热启动会简单的多。如果app的所有Activities还存在内存中，那么系统需要做的就是将activity切换到前台。这样app会避免进行的对象初始化，布局填充和渲染。</p>
<p>但是，如果一些内存在触发内存回调方法的时候被回收了，比如onTrimMemory()，那么这些对象就需要重新创建。</p>
<p>热启动会和冷启动有相同的行为。系统也会展示一个空白的window，知道app完成Activity的渲染。</p>
<h3 id="1-3-温启动"><a href="#1-3-温启动" class="headerlink" title="1.3 温启动"></a>1.3 温启动</h3><p>温启动做的工作介于冷热启动之间。这里列举几种可能被认为是温启动的状态：</p>
<p>1、用户离开了app，然后重新启动它。这时进程还在继续运行，但是Activity被回收了，app需要重新创建activity。</p>
<p>2、系统将你的app回收了，然后用户重新启动app。进程和Activity都需要重新启动，但它们可以从onCreate方法保存的bundle中恢复。</p>
<h2 id="二-优化启动性能"><a href="#二-优化启动性能" class="headerlink" title="二 优化启动性能"></a>二 <strong>优化启动性能</strong></h2><p>为了确定启动时间的性能问题，我们需要先确定app启动花费了多少时间。</p>
<h3 id="2-1-Time-to-initial-display"><a href="#2-1-Time-to-initial-display" class="headerlink" title="2.1 Time to initial display"></a>2.1 Time to initial display</h3><p>从4.4（API 19）开始，logcat会输出带有Displayed的log。该值代表从app启动进程到完成Activity第一次绘制的时间。该时间内完成了一下流程：</p>
<ul>
<li>启动进程</li>
</ul>
<ul>
<li>初始化对象</li>
</ul>
<ul>
<li>创建和初始化Activity</li>
</ul>
<ul>
<li>填充布局</li>
</ul>
<ul>
<li>第一次绘制app</li>
</ul>
<p>打出的log如下：</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">ActivityManager: Displayed com.android.myexample/.StartupTiming: +3s534ms</div></pre></td></tr></table></figure>
<p>如果你从命令行或者终端跟踪log的话，可以比较直接的定位到该log。如果在AndroidStudio中，别忘记关闭filter。</p>
<p><img src="/img/android-optimize-app-start/time-display.png">  </p>
<p>Displayed值并没有捕获所有资源都被加载和展示的总时间。那些不在layout文件中或者创建app初始化所需要对象的时间不包含在内。因为这些资源是在一个内部进程中加载的，并且不会阻塞app的初始化展示。</p>
<h3 id="2-2-Time-to-full-display"><a href="#2-2-Time-to-full-display" class="headerlink" title="2.2 Time to full display"></a>2.2 Time to full display</h3><p>你可以调用<a href="https://developer.android.com/reference/android/app/Activity.html#reportFullyDrawn(" target="_blank" rel="external">reportFullyDrawn()</a>)方法去测量从应用启动到所有资源和view层级都被绘制出来的时间。这对于app执行懒加载的情况很有用。在懒加载中，app不会阻塞window的初始化绘制，但同步进行资源加载和view的更新会阻塞。</p>
<p>由于懒加载，app的初始化展示不会包含所有的资源。你可以考虑完全加载并展示所有资源和view的时候作为一个考量。比如，UI可能完全加载了，包括一些text的绘制，但是由于图片需要从网络获取，这时还没有展示。</p>
<p>为了处理这种情况，你可以手动地调用reportFullyDrawn方法让系统知道你的activity已经通过懒加载完成了。但你是用该方法的时候，logcat展示的时间就包含从应用被创建到reportFullyDrawn方法被调用的时间。</p>
<h4 id="定位瓶颈"><a href="#定位瓶颈" class="headerlink" title="定位瓶颈"></a><strong>定位瓶颈</strong></h4><p>两种方式可以帮助你定位问题：AndroidStudio中的Method Tracer和内嵌tracing代码的方式。更多可以参考<a href="https://developer.android.com/topic/performance/%7BdocRoot%7Dstudio/profile/am-methodtrace.html" target="_blank" rel="external">documentation</a>.</p>
<p>如果无法使用Method Tracer Tool ，或者觉得trace的时机不够准确，那么你可以通过在app和Activity的onCreate方法中嵌入代码进行追踪，比如写下追踪代码。更多信息，可以参考<a href="https://developer.android.com/reference/android/os/Trace.html" target="_blank" rel="external">Trace</a> 、<a href="https://developer.android.com/topic/performance/%7BdocRoot%7Dstudio/profile/systrace-commandline.html" target="_blank" rel="external">Systrace</a></p>
<h2 id="三-常见的问题"><a href="#三-常见的问题" class="headerlink" title="三 常见的问题"></a>三 <strong>常见的问题</strong></h2><h3 id="3-1-繁重的App初始化"><a href="#3-1-繁重的App初始化" class="headerlink" title="3.1 繁重的App初始化"></a>3.1 繁重的App初始化</h3><p>当你继承了Application对象，又在Application对象进行初始化的时候执行繁重的工作或者复杂的逻辑，那么就可能导致启动的性能问题。在启动的时候花一些时间去初始化一些子类可能完全没必要。</p>
<p>在app初始化的时候，其它的挑战包括垃圾回收事件，繁重的操作，比如I/O，都有可能会阻塞进程的初始化。对于Dalvik运行环境来说，垃圾回收是一个需要特别考虑的点，Art运行环境会并发的执行垃圾回收，以便最小化垃圾回收产生的影响。</p>
<h4 id="3-1-1-定位为题"><a href="#3-1-1-定位为题" class="headerlink" title="3.1.1 定位为题"></a>3.1.1 <strong>定位为题</strong></h4><p>使用method tracing或者内嵌代码来定位这个问题</p>
<h5 id="Method-tracing"><a href="#Method-tracing" class="headerlink" title="Method tracing"></a>Method tracing</h5><p>Running the Method Tracer tool reveals that the <code>callApplicationOnCreate()</code> method eventually calls your<code>com.example.customApplication.onCreate</code> method. If the tool shows that these methods are taking a long time to finish executing, you should explore further to see what work is occurring there.</p>
<h5 id="内嵌代码的方式"><a href="#内嵌代码的方式" class="headerlink" title="内嵌代码的方式"></a><strong>内嵌代码的方式</strong></h5><p>可以对以下代码进行追踪</p>
<p>1、App的onCreate方法</p>
<p>2、onCreate中初始化的所有全局单例对象</p>
<p>3、所有I/O，反序列化，或者可能导致性能问题的循环</p>
<h4 id="3-1-2-解决方案"><a href="#3-1-2-解决方案" class="headerlink" title="3.1.2 解决方案"></a><strong>3.1.2 解决方案</strong></h4><p>如果是由于不必要的初始化或者硬盘I/O操作导致的问题，解决方案就是懒初始化对象：只初始化立即需要的。而不是在一开始就创建全局的静态对象，可以将它们的初始化放在一个单例中，当app首次访问它们的时候再初始化对象。</p>
<h2 id="3-2-繁重的Activity初始化"><a href="#3-2-繁重的Activity初始化" class="headerlink" title="3.2 繁重的Activity初始化"></a>3.2 <strong>繁重的Activity初始化</strong></h2><p>Activity的创建有时会承担大量的复杂操作。通常这里存在可以优化的点。常见的问题有：</p>
<p>1、填充大量复杂的布局</p>
<p>2、硬盘操作或者网络操作阻塞了绘制</p>
<p>3、加载或者编码bitmap</p>
<p>4、栅栏化VectorDrawable对象</p>
<p>5、Activity中其它子系统的初始化</p>
<h3 id="3-2-1-定位问题"><a href="#3-2-1-定位问题" class="headerlink" title="3.2.1 定位问题"></a>3.2.1 <strong>定位问题</strong></h3><p>和定位App启动问题类似，也是通过method tracing或者嵌入代码来定位。</p>
<h5 id="Method-tracing-1"><a href="#Method-tracing-1" class="headerlink" title="Method tracing"></a>Method tracing</h5><p>当执行Method Tracer tool的时候，你应该关注继承于Application的子类的构造函数和onCreate方法。</p>
<p>如果该工具表明代码中花了很长时间去执行，那么你就应该进一步查看这里的具体操作。</p>
<p><strong>嵌入代码的方式</strong></p>
<p>追踪的部分可能是以下代码块（和App初始化一样）</p>
<p>1、App的onCreate方法</p>
<p>2、启动时初始化的所有全局单例对象</p>
<p>3、所有I/O，反序列化，或者可能导致性能问题的循环</p>
<h3 id="3-2-2-解决方案"><a href="#3-2-2-解决方案" class="headerlink" title="3.2.2 解决方案"></a><strong>3.2.2 解决方案</strong></h3><p>上面可能有很多潜在的问题，这列举两种通用的问题和解决方案：</p>
<ul>
<li><p>view的层级越庞大，app就会花越多的时间去填充它</p>
<p>   减少多余的或者嵌套的布局</p>
<p>   不填充哪些不需要在启动时就需要展示的view。可通过ViewStub来实现，在需要的时候再填充</p>
</li>
<li><p>在main thread中做资源的初始化也会减慢启动速度。可以通过下面来解决</p>
<p>   延迟所有的资源初始化或者放在其它线程中去做</p>
<p>   允许app先加载和展示view，那些依赖于bitmap或者其它资源之后再去更新</p>
</li>
</ul>
<h2 id="三-主题化的启动屏幕"><a href="#三-主题化的启动屏幕" class="headerlink" title="三 主题化的启动屏幕"></a><strong>三 主题化的启动屏幕</strong></h2><p>我们可以通过主题化app的启动屏幕来改善启动体验。这样整个app的启动和接下来的操作会显得更加连贯。但这样只是将Activity的慢启动问题隐藏了。</p>
<p>一种常用的方式实现主题启动屏幕的方式是使用 <code>windowDisablePreview</code>主题属性关闭系统进程在app启动时绘制的初始化空白屏幕。但是，这种方式会导致更长时间。同样的，这样也会迫使用户等到Activity启动后才会得到反馈，会让用户产生app本身是否有问题的困惑。</p>
<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>建议你不应该禁止预览窗口，你应该遵循 <a href="http://www.google.com/design/spec/patterns/launch-screens.html#" target="_blank" rel="external">Material Design</a> 标准。使用Activity的windowBackground主题属性来为启动的Activity提供一个简单的drawable。</p>
<p><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></pre></td><td class="code"><pre><div class="line">&lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:opacity=&quot;opaque&quot;&gt;</div><div class="line">  &lt;!-- The background color, preferably the same as your normal theme --&gt;</div><div class="line">  &lt;item android:drawable=&quot;@android:color/white&quot;/&gt;</div><div class="line">  &lt;!-- Your product logo - 144dp color version of your app icon --&gt;</div><div class="line">  &lt;item&gt;</div><div class="line">    &lt;bitmap</div><div class="line">      android:src=&quot;@drawable/product_logo_144dp&quot;</div><div class="line">      android:gravity=&quot;center&quot;/&gt;</div><div class="line">  &lt;/item&gt;</div><div class="line">&lt;/layer-list&gt;</div></pre></td></tr></table></figure>
<p><strong>Manifest file:</strong>     </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">&lt;activity ...</div><div class="line">android:theme=&quot;@style/AppTheme.Launcher&quot; /&gt;</div></pre></td></tr></table></figure>
<ul>
<li>​</li>
</ul>
<p>然后在代码中将主题切换回app的主题，最简单的方式是在<code>super.onCreate()</code> 和<code>setContentView()方法之前</code>调用 <code>setTheme(R.style.AppTheme)</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">public class MyMainActivity extends AppCompatActivity &#123;</div><div class="line">  @Override</div><div class="line">  protected void onCreate(Bundle savedInstanceState) &#123;</div><div class="line">    // Make sure this is before calling super.onCreate</div><div class="line">    setTheme(R.style.Theme_MyApp);</div><div class="line">    super.onCreate(savedInstanceState);</div><div class="line">    // ...</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文地址：&lt;a href=&quot;https://developer.android.com/topic/performance/launch-time.html#common&quot;&gt;https://developer.android.com/topic/performance/launch-time.html#common&lt;/a&gt;  &lt;/p&gt;
&lt;p&gt;通常用户期望app响应和加载速度越快越好。一个启动速度慢的app很可能会给用户留下不好的印象，除了导致用户在应用市场上的打分低之外，很有可能导致致用户直接卸载。&lt;/p&gt;
&lt;p&gt;这篇文章提供了优化app启动时间的方法。先解释了app进程启动的内部流程。然后讨论如何优化启动的性能。最后列出几个常见的启动问题和解决方案。&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;strong&gt;一 启动内幕&lt;/strong&gt;&lt;/h2&gt;&lt;p&gt;App启动可能发生在以下三种状态 之一，每一种都会影响到展现给用户的时间：冷启动、热启动和温启动（翻译的有点怪，介于冷和热之间吧）。&lt;/p&gt;
&lt;p&gt;冷启动下，app所做的事情不较多，其它两种情况，系统只需要将app从后台切到前台。建议你在冷启动的基础上做优化，这样也会提升热启动和温启动的性能。&lt;/p&gt;
&lt;p&gt;为了更好地优化app的启动，了解系统和app层做了什么以及如何相互影响很有必要。&lt;/p&gt;
&lt;h3 id=&quot;1-1-冷启动&quot;&gt;&lt;a href=&quot;#1-1-冷启动&quot; class=&quot;headerlink&quot; title=&quot;1.1 冷启动&quot;&gt;&lt;/a&gt;1.1 冷启动&lt;/h3&gt;&lt;p&gt;冷启动指：在app启动之前，系统的进程还没有，直到app启动创建app的进程。冷启动会发生在device重启或者app被杀死的情况下。这种启动在优化启动时间上，有更大的挑战，因为相比其它两种启动方式，系统和app有更多的工作需要处理。&lt;/p&gt;
&lt;p&gt;冷启动之前，系统会执行以下三个task：&lt;/p&gt;
&lt;p&gt;1、加载并启动app&lt;/p&gt;
&lt;p&gt;2、在app启动后，立即展示空白的window&lt;/p&gt;
&lt;p&gt;3、创建app进程&lt;/p&gt;
&lt;p&gt;一旦系统创建了app进程，那么app进程就会执行以下步骤&lt;/p&gt;
&lt;p&gt;1、创建app对象&lt;/p&gt;
&lt;p&gt;2、启动main thread&lt;/p&gt;
&lt;p&gt;3、创建MainActivity&lt;/p&gt;
&lt;p&gt;4、Inflate view&lt;/p&gt;
&lt;p&gt;5、布置屏幕&lt;/p&gt;
&lt;p&gt;6、进行首次绘制&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/categories/Android/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
    
      <category term="Android，性能优化" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>JS学习-字符串和数组</title>
    <link href="http://www.lightskystreet.com/2016/06/16/js-str-arr/"/>
    <id>http://www.lightskystreet.com/2016/06/16/js-str-arr/</id>
    <published>2016-06-15T16:00:00.000Z</published>
    <updated>2016-06-20T23:31:42.000Z</updated>
    
    <content type="html"><![CDATA[<h1 id="一-字符串"><a href="#一-字符串" class="headerlink" title="一 字符串"></a>一 字符串</h1><p>字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">&apos;abc&apos;</div><div class="line">&quot;abc&quot;</div></pre></td></tr></table></figure>
<h2 id="1-1-单引号与双引号"><a href="#1-1-单引号与双引号" class="headerlink" title="1.1 单引号与双引号"></a>1.1 单引号与双引号</h2><p>单引号字符串的内部，可以使用双引号。</p>
<p>双引号字符串的内部，可以使用单引号。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">&apos;key = &quot;value&quot;&apos;</div><div class="line">&quot;It&apos;s a long journey&quot;</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></pre></td><td class="code"><pre><div class="line">&apos;Did she say \&apos;Hello\&apos;?&apos;</div><div class="line">// &quot;Did she say &apos;Hello&apos;?&quot;</div><div class="line"></div><div class="line">&quot;Did she say \&quot;Hello\&quot;?&quot;</div><div class="line">// &quot;Did she say &quot;Hello&quot;?&quot;</div></pre></td></tr></table></figure>
<p>由于HTML语言的属性值使用双引号，所以很多项目约定JavaScript语言的字符串只使用单引号。</p>
<p>当然，只使用双引号也完全可以。重要的是，坚持使用一种风格，不要两种风格混合。</p>
<a id="more"></a>
<h2 id="1-2-字符串的多行书写方式"><a href="#1-2-字符串的多行书写方式" class="headerlink" title="1.2 字符串的多行书写方式"></a>1.2 字符串的多行书写方式</h2><p>字符串默认只能写在一行内，分成多行将会报错。</p>
<p>如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。但输出时还是单行，效果与写在同一行完全一样。</p>
<p><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></pre></td><td class="code"><pre><div class="line">var longString = &quot;Long \</div><div class="line">long \</div><div class="line">long \</div><div class="line">string&quot;;</div><div class="line"></div><div class="line">longString</div><div class="line">// &quot;Long long long string&quot;</div></pre></td></tr></table></figure>
<p>连接运算符（<code>+</code>）可以连接多个单行字符串，将长字符串拆成多行书写</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var longString = &apos;Long &apos;</div><div class="line">  + &apos;long &apos;</div><div class="line">  + &apos;long &apos;</div><div class="line">  + &apos;string&apos;;</div></pre></td></tr></table></figure>
<h2 id="1-3-多行输出"><a href="#1-3-多行输出" class="headerlink" title="1.3 多行输出"></a>1.3 多行输出</h2><p>如果想输出多行字符串，有一种利用多行注释的变通方法。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">(function () &#123; /*</div><div class="line">line 1</div><div class="line">line 2</div><div class="line">line 3</div><div class="line">*/&#125;).toString().split(&apos;\n&apos;).slice(1, -1).join(&apos;\n&apos;)</div><div class="line">// &quot;line 1</div><div class="line">// line 2</div><div class="line">// line 3&quot;</div></pre></td></tr></table></figure>
<h2 id="1-4-字符串与数组"><a href="#1-4-字符串与数组" class="headerlink" title="1.4 字符串与数组"></a>1.4 字符串与数组</h2><h3 id="1-4-1-字符串可以使用数组的运算符"><a href="#1-4-1-字符串可以使用数组的运算符" class="headerlink" title="1.4.1 字符串可以使用数组的运算符"></a>1.4.1 字符串可以使用数组的运算符</h3><p>字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）。</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">var s = &apos;hello&apos;;</div><div class="line">s[0] // &quot;h&quot;</div><div class="line">s[1] // &quot;e&quot;</div><div class="line">s[4] // &quot;o&quot;</div><div class="line"></div><div class="line">// 直接对字符串使用方括号运算符</div><div class="line">&apos;hello&apos;[1] // &quot;e&quot;</div></pre></td></tr></table></figure>
<p>如果方括号中的数字超过字符串的长度，或者方括号中根本不是数字，则返回<code>undefined</code>。</p>
<h3 id="1-4-2-字符串只是类似数组"><a href="#1-4-2-字符串只是类似数组" class="headerlink" title="1.4.2 字符串只是类似数组"></a>1.4.2 字符串只是类似数组</h3><p>字符串与数组的相似性仅此而已。实际上，无法改变字符串之中的单个字符。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var s = &apos;hello&apos;;</div><div class="line"></div><div class="line">delete s[0];</div><div class="line">s // &quot;hello&quot;</div><div class="line"></div><div class="line">s[1] = &apos;a&apos;;</div><div class="line">s // &quot;hello&quot;</div><div class="line"></div><div class="line">s[5] = &apos;!&apos;;</div><div class="line">s // &quot;hello&quot;</div></pre></td></tr></table></figure>
<p>上面代码表示，字符串内部的单个字符无法改变和增删，这些操作会默默地失败。</p>
<p>字符串之所以类似于字符数组，实际是由于对字符串进行方括号运算时，字符串会自动转换为一个字符串对象。</p>
<h1 id="二-数组"><a href="#二-数组" class="headerlink" title="二 数组"></a>二 数组</h1><h2 id="2-1-数组的定义"><a href="#2-1-数组的定义" class="headerlink" title="2.1 数组的定义"></a>2.1 数组的定义</h2><p>本质上，数组属于一种特殊的对象。<code>typeof</code>运算符会返回数组的类型是<code>object</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">typeof [1, 2, 3] // &quot;object&quot;</div></pre></td></tr></table></figure>
<p>上面代码表明，<code>typeof</code>运算符认为数组的类型就是对象。</p>
<p>任何类型的数据，都可以放入数组</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">var arr = [</div><div class="line">  &#123;a: 1&#125;,</div><div class="line">  [1, 2, 3],</div><div class="line">  function() &#123;return true;&#125;</div><div class="line">];</div><div class="line"></div><div class="line">arr[0] // Object &#123;a: 1&#125;</div><div class="line">arr[1] // [1, 2, 3]</div><div class="line">arr[2] // function ()&#123;return true;&#125;</div></pre></td></tr></table></figure>
<p>数组的特殊性体现在，它的键名是按次序排列的一组整数（0，1，2…）。</p>
<p><code>Object.keys</code>方法返回数组的所有键名。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var arr = [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;];</div><div class="line"></div><div class="line">Object.keys(arr)</div><div class="line">// [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;]</div></pre></td></tr></table></figure>
<h3 id="数组的键名"><a href="#数组的键名" class="headerlink" title="数组的键名"></a>数组的键名</h3><p>JavaScript语言规定，对象的键名一律为字符串，所以，数组的键名其实也是字符串。之所以可以用数值读取，是因为非字符串的键名会被转为字符串。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><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 arr = [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;];</div><div class="line"></div><div class="line">arr[&apos;0&apos;] // &apos;a&apos;</div><div class="line">arr[0] // &apos;a&apos;</div></pre></td></tr></table></figure>
<p>需要注意的是，这一条在赋值时也成立。如果一个值可以被转换为整数，则以该值为键名，等于以对应的整数为键名。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">var a = [];</div><div class="line"></div><div class="line">a[&apos;1000&apos;] = &apos;abc&apos;;</div><div class="line">a[1000] // &apos;abc&apos;</div><div class="line"></div><div class="line">a[1.00] = 6;</div><div class="line">a[1] // 6</div></pre></td></tr></table></figure>
<p>上面代码表明，由于字符串“1000”和浮点数1.00都可以转换为整数，所以视同为整数键赋值。</p>
<p>数组成员只能用方括号<code>arr[0]</code>表示（方括号是运算符，可以接受数值）。</p>
<h2 id="2-2-length属性"><a href="#2-2-length属性" class="headerlink" title="2.2 length属性"></a>2.2 length属性</h2><p>数组的<code>length</code>属性与对象的<code>length</code>属性有区别，只要是数组，就一定有<code>length</code>属性，而对象不一定有。</p>
<p>数组的<code>length</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">[&apos;a&apos;, &apos;b&apos;, &apos;c&apos;].length // 3</div></pre></td></tr></table></figure>
<p>JavaScript使用一个32位整数，保存数组的元素个数。这意味着，数组成员最多只有4294967295个（232- 1）个，也就是说<code>length</code>属性的最大值就是4294967295</p>
<h3 id="2-2-1-length属性的值"><a href="#2-2-1-length属性的值" class="headerlink" title="2.2.1 length属性的值"></a>2.2.1 length属性的值</h3><ul>
<li>数组的<code>length</code>属性是一个动态的值，等于键名中的最大整数加上1。</li>
</ul>
<ul>
<li>而且，数组的数字键不需要连续，<code>length</code>属性的值总是比最大的那个整数键大1。</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><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 arr = [&apos;a&apos;, &apos;b&apos;];</div><div class="line">arr.length // 2</div><div class="line"></div><div class="line">arr[2] = &apos;c&apos;;</div><div class="line">arr.length // 3</div><div class="line"></div><div class="line">arr[9] = &apos;d&apos;;</div><div class="line">arr.length // 10</div><div class="line"></div><div class="line">arr[1000] = &apos;e&apos;;</div><div class="line">arr.length // 1001</div></pre></td></tr></table></figure>
<h3 id="2-2-2-修改length属性"><a href="#2-2-2-修改length属性" class="headerlink" title="2.2.2 修改length属性"></a>2.2.2 修改length属性</h3><p><code>length</code>属性是可写的。</p>
<ul>
<li>如果设置一个小于当前成员个数的值，该数组的成员会自动减少到<code>length</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">var arr = [ &apos;a&apos;, &apos;b&apos;, &apos;c&apos; ];</div><div class="line">arr.length // 3</div><div class="line"></div><div class="line">arr.length = 2;</div><div class="line">arr // [&quot;a&quot;, &quot;b&quot;]</div></pre></td></tr></table></figure>
<ul>
<li>将<code>length</code>属性设为0相当于将数组清空</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 arr = [ &apos;a&apos;, &apos;b&apos;, &apos;c&apos; ];</div><div class="line"></div><div class="line">arr.length = 0;</div><div class="line">arr // []</div></pre></td></tr></table></figure>
<ul>
<li>自动补位<ul>
<li>如果设置<code>length</code>大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位</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></pre></td><td class="code"><pre><div class="line">var a = [&apos;a&apos;];</div><div class="line"></div><div class="line">a.length = 3;</div><div class="line">a[1] // undefined</div></pre></td></tr></table></figure>
<ul>
<li>为数组添加属性<ul>
<li>由于数组本质上是对象的一种，所以我们可以为数组添加属性，但是这不影响<code>length</code>属性的值</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></pre></td><td class="code"><pre><div class="line">var a = [];</div><div class="line"></div><div class="line">a[&apos;p&apos;] = &apos;abc&apos;;</div><div class="line">a.length // 0</div><div class="line"></div><div class="line">a[2.1] = &apos;abc&apos;;</div><div class="line">a.length // 0</div></pre></td></tr></table></figure>
<ul>
<li><a href="http://javascript.ruanyifeng.com/grammar/array.html#toc6" target="_blank" rel="external">数组的空位</a></li>
</ul>
<h2 id="2-3-类似数组的对象"><a href="#2-3-类似数组的对象" class="headerlink" title="2.3 类似数组的对象"></a>2.3 类似数组的对象</h2><h3 id="2-3-1-定义"><a href="#2-3-1-定义" class="headerlink" title="2.3.1 定义"></a>2.3.1 定义</h3><p>有些对象看上去很像数组，被称为“类似数组的对象”（array-like object）。</p>
<p>只要有数字键和<code>length</code>属性，就是一个类似数组的对象。</p>
<p>它们可以使用<code>length</code>属性，但由于并不是数组，所以无法使用一些数组的方法。</p>
<p>而且，<code>length</code>属性不是动态值，不会随着成员的变化而变化。</p>
<p>下面就是一个类似数组的对象：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var obj = &#123;</div><div class="line">  0: &apos;a&apos;,</div><div class="line">  1: &apos;b&apos;,</div><div class="line">  2: &apos;c&apos;,</div><div class="line">  length: 3</div><div class="line">&#125;;</div><div class="line"></div><div class="line">obj[0] // &apos;a&apos;</div><div class="line">obj[2] // &apos;c&apos;</div><div class="line">obj.length // 3</div></pre></td></tr></table></figure>
<p>上面代码的变量<code>obj</code>是一个对象，但是看上去跟数组很像。</p>
<p>但变量<code>obj</code>无法使用数组特有的一些方法，比如<code>pop</code>和<code>push</code>方法。</p>
<h3 id="2-3-2-slice方法"><a href="#2-3-2-slice方法" class="headerlink" title="2.3.2 slice方法"></a>2.3.2 slice方法</h3><p>数组的<code>slice</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">var arr = Array.prototype.slice.call(arrayLike);</div></pre></td></tr></table></figure>
<h3 id="2-3-3-遍历类似数组对象"><a href="#2-3-3-遍历类似数组对象" class="headerlink" title="2.3.3 遍历类似数组对象"></a>2.3.3 遍历类似数组对象</h3><p>可以采用<code>for</code>循环，也可以采用数组的<code>forEach</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">// for循环</div><div class="line">function logArgs() &#123;</div><div class="line">  for (var i = 0; i &lt; arguments.length; i++) &#123;</div><div class="line">    console.log(i + &apos;. &apos; + arguments[i]);</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">// forEach方法</div><div class="line">function logArgs() &#123;</div><div class="line">    Array.prototype.forEach.call(arguments, function (elem, i) &#123;</div><div class="line">        console.log(i+&apos;. &apos;+elem);</div><div class="line">    &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>字符串也是类似数组的对象，所以也可以用<code>Array.prototype.forEach.call</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">Array.prototype.forEach.call(&apos;abc&apos;, function(chr) &#123;</div><div class="line">  console.log(chr);</div><div class="line">&#125;);</div><div class="line">// a</div><div class="line">// b</div><div class="line">// c</div></pre></td></tr></table></figure>
<h2 id="2-4-in运算符"><a href="#2-4-in运算符" class="headerlink" title="2.4 in运算符"></a>2.4 in运算符</h2><p>检查某个键名是否存在的运算符<code>in</code>，适用于对象，也适用于数组。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">2 in [ &apos;a&apos;, &apos;b&apos;, &apos;c&apos; ] // true</div><div class="line">&apos;2&apos; in [ &apos;a&apos;, &apos;b&apos;, &apos;c&apos; ] // true</div></pre></td></tr></table></figure>
<p>上面代码表明，数组存在键名为<code>2</code>的键。由于键名都是字符串，所以数值<code>2</code>会自动转成字符串</p>
<h2 id="2-5-for…in循环和数组的遍历"><a href="#2-5-for…in循环和数组的遍历" class="headerlink" title="2.5 for…in循环和数组的遍历"></a>2.5 for…in循环和数组的遍历</h2><p>使用<code>for...in</code>循环，可以遍历数组的所有元素。</p>
<p>需要注意的是，<code>for...in</code>会遍历数组所有的键，即使是非数字键。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var a = [1, 2, 3];</div><div class="line">a.foo = true;</div><div class="line"></div><div class="line">for (var key in a) &#123;</div><div class="line">  console.log(key);</div><div class="line">&#125;</div><div class="line">// 0</div><div class="line">// 1</div><div class="line">// 2</div><div class="line">// foo</div></pre></td></tr></table></figure>
<p>数组的<code>forEach</code>方法，也可以用来遍历数组，详见《标准库》一章的Array对象部分。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var colors = [&apos;red&apos;, &apos;green&apos;, &apos;blue&apos;];</div><div class="line">colors.forEach(function(color) &#123;</div><div class="line">  console.log(color);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>其它类似java，通过for 循环和 length遍历</p>
<h2 id="2-6-数组的空位"><a href="#2-6-数组的空位" class="headerlink" title="2.6 数组的空位"></a>2.6 数组的空位</h2><p>当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位（hole）。</p>
<p>如果最后一个元素后面有逗号，并不会产生空位。</p>
<p>数组的空位是可以读取的，返回<code>undefined</code>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var a = [, , ,];</div><div class="line">a[1] // undefined</div></pre></td></tr></table></figure>
<h2 id="2-7-delete命令导致的空位"><a href="#2-7-delete命令导致的空位" class="headerlink" title="2.7 delete命令导致的空位"></a>2.7 delete命令导致的空位</h2><p>使用<code>delete</code>命令删除一个值，会形成空位。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var a = [1, 2, 3];</div><div class="line"></div><div class="line">delete a[1];</div><div class="line">a[1] // undefined</div></pre></td></tr></table></figure>
<p><code>delete</code>命令不影响<code>length</code>属性。所以，使用<code>length</code>属性进行数组遍历，一定要非常小心。</p>
<ul>
<li>如果是空位，使用数组的<code>forEach</code>方法、<code>for...in</code>结构、以及<code>Object.keys</code>方法进行遍历，空位都会被跳过。</li>
</ul>
<ul>
<li>如果某个位置是<code>undefined</code>，遍历的时候就不会被跳过。</li>
</ul>
<ul>
<li>空位就是数组没有这个元素，所以不会被遍历到，而<code>undefined</code>则表示数组有这个元素，值是<code>undefined</code>，所以遍历不会跳过。</li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;h1 id=&quot;一-字符串&quot;&gt;&lt;a href=&quot;#一-字符串&quot; class=&quot;headerlink&quot; title=&quot;一 字符串&quot;&gt;&lt;/a&gt;一 字符串&lt;/h1&gt;&lt;p&gt;字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;&amp;apos;abc&amp;apos;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;quot;abc&amp;quot;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h2 id=&quot;1-1-单引号与双引号&quot;&gt;&lt;a href=&quot;#1-1-单引号与双引号&quot; class=&quot;headerlink&quot; title=&quot;1.1 单引号与双引号&quot;&gt;&lt;/a&gt;1.1 单引号与双引号&lt;/h2&gt;&lt;p&gt;单引号字符串的内部，可以使用双引号。&lt;/p&gt;
&lt;p&gt;双引号字符串的内部，可以使用单引号。&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;&amp;apos;key = &amp;quot;value&amp;quot;&amp;apos;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;quot;It&amp;apos;s a long journey&amp;quot;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;单引号内部使用单引号，双引号内部使用双引号必须在前面加上反斜杠，用来转义：&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;4&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;5&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;&amp;apos;Did she say \&amp;apos;Hello\&amp;apos;?&amp;apos;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;// &amp;quot;Did she say &amp;apos;Hello&amp;apos;?&amp;quot;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;quot;Did she say \&amp;quot;Hello\&amp;quot;?&amp;quot;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;// &amp;quot;Did she say &amp;quot;Hello&amp;quot;?&amp;quot;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;由于HTML语言的属性值使用双引号，所以很多项目约定JavaScript语言的字符串只使用单引号。&lt;/p&gt;
&lt;p&gt;当然，只使用双引号也完全可以。重要的是，坚持使用一种风格，不要两种风格混合。&lt;/p&gt;
    
    </summary>
    
      <category term="JS" scheme="http://www.lightskystreet.com/categories/JS/"/>
    
    
      <category term="JS学习笔记" scheme="http://www.lightskystreet.com/tags/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
    
  </entry>
  
  <entry>
    <title>JS学习-封装和继承</title>
    <link href="http://www.lightskystreet.com/2016/06/13/js-inherit/"/>
    <id>http://www.lightskystreet.com/2016/06/13/js-inherit/</id>
    <published>2016-06-12T16:00:00.000Z</published>
    <updated>2016-06-21T08:12:54.000Z</updated>
    
    <content type="html"><![CDATA[<h1 id="封装"><a href="#封装" class="headerlink" title="封装"></a>封装</h1><h1 id="一-封装"><a href="#一-封装" class="headerlink" title="一 封装"></a>一 封装</h1><h2 id="1-1-prototype对象"><a href="#1-1-prototype对象" class="headerlink" title="1.1 prototype对象"></a>1.1 prototype对象</h2><h3 id="1-1-1-构造函数的缺点"><a href="#1-1-1-构造函数的缺点" class="headerlink" title="1.1.1 构造函数的缺点"></a>1.1.1 构造函数的缺点</h3><p>JavaScript通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。所有实例对象都会生成相同的属性。</p>
<p>但是，这样做是对系统资源的浪费，因为同一个构造函数的对象实例之间，无法共享属性和方法。所有创建的对象的方法功能是相同的，完全可以只定义一份。</p>
<h3 id="1-1-2-prototype属性的作用"><a href="#1-1-2-prototype属性的作用" class="headerlink" title="1.1.2 prototype属性的作用"></a>1.1.2 prototype属性的作用</h3><p>构造函数也有自己的属性和方法，其中有一个prototype属性指向另一个对象，一般称为prototype对象。该对象非常特别，只要定义在它上面的属性和方法，能被所有实例对象共享。也就是说，构造函数生成实例对象时，自动为实例对象分配了一个prototype属性。</p>
<ul>
<li>定义在prototype上面的属性和方法，能被所有实例对象共享</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">function Animal (name) &#123;</div><div class="line">  this.name = name;</div><div class="line">&#125;</div><div class="line"></div><div class="line">Animal.prototype.color = &quot;white&quot;;</div><div class="line"></div><div class="line">var cat1 = new Animal(&apos;大毛&apos;);</div><div class="line">var cat2 = new Animal(&apos;二毛&apos;);</div><div class="line"></div><div class="line">cat1.color // &apos;white&apos;</div><div class="line">cat2.color // &apos;white&apos;</div></pre></td></tr></table></figure>
<a id="more"></a>
<ul>
<li>修改prototype对象，变动就立刻会体现在实例对象</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">Animal.prototype.color = &quot;yellow&quot;;</div><div class="line"></div><div class="line">cat1.color // &apos;yellow&apos;</div><div class="line">cat2.color // &apos;yellow&apos;</div></pre></td></tr></table></figure>
<ul>
<li>当实例对象本身没有某个属性或方法的时候，它会到构造函数的prototype对象去寻找该属性或方法</li>
</ul>
<ul>
<li>如果实例对象自身就有某个属性或方法，它就不会再去prototype对象寻找这个属性或方法</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">cat1.color = &apos;black&apos;;</div><div class="line"></div><div class="line">cat2.color // &apos;yellow&apos;</div><div class="line">Animal.prototype.color // &quot;yellow&quot;;</div></pre></td></tr></table></figure>
<h3 id="1-1-3-原型链"><a href="#1-1-3-原型链" class="headerlink" title="1.1.3 原型链"></a>1.1.3 原型链</h3><h4 id="所有对象都有prototype原型对象"><a href="#所有对象都有prototype原型对象" class="headerlink" title="所有对象都有prototype原型对象"></a>所有对象都有prototype原型对象</h4><p>由于JavaScript的所有对象都有构造函数，而所有构造函数都有prototype属性（其实是所有函数都有prototype属性），所以所有对象都有自己的prototype原型对象。</p>
<p>JavaScript的所有对象，都有自己的继承链。每个对象都继承另一个对象，该对象称为“原型”（prototype）对象。只有<code>null</code>除外，它没有自己的原型对象。</p>
<p>一个对象的属性和方法，有可能是定义它自身上面，也有可能定义在它的原型对象上面。由于原型本身也是对象，又有自己的原型，所以形成了一条原型链（prototype chain）。</p>
<ul>
<li>“原型链”的作用</li>
</ul>
<p>当读取对象的某个属性时，JavaScript引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。以此类推，如果直到最顶层的Object.prototype还是找不到，则返回undefined。</p>
<h4 id="举例"><a href="#举例" class="headerlink" title="举例"></a>举例</h4><p>如果让某个函数的prototype属性指向一个数组，就意味着该函数可以用作数组的构造函数，因为它生成的实例对象都可以通过prototype属性调用数组方法。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">function MyArray ()&#123;&#125;</div><div class="line"></div><div class="line">MyArray.prototype = new Array();</div><div class="line">MyArray.prototype.constructor = MyArray;</div><div class="line"></div><div class="line">var mine = new MyArray();</div><div class="line">mine.push(1, 2, 3);</div><div class="line"></div><div class="line">mine.length // 3</div><div class="line">mine instanceof Array // true</div></pre></td></tr></table></figure>
<ul>
<li>如果实例对象自身就有某个属性或方法，就不会再去prototype对象寻找</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">cat1.color = &apos;black&apos;;</div><div class="line"></div><div class="line">cat2.color // &apos;yellow&apos;</div><div class="line">Animal.prototype.color // &quot;yellow&quot;;</div></pre></td></tr></table></figure>
<h3 id="1-1-4-constructor属性"><a href="#1-1-4-constructor属性" class="headerlink" title="1.1.4 constructor属性"></a>1.1.4 constructor属性</h3><ul>
<li>prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数</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">function P() &#123;&#125;</div><div class="line"></div><div class="line">P.prototype.constructor === P</div><div class="line">// true</div></pre></td></tr></table></figure>
<ul>
<li>由于constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承</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 P() &#123;&#125;</div><div class="line"></div><div class="line">var p = new P();</div><div class="line"></div><div class="line">p.constructor</div><div class="line">// function P() &#123;&#125;</div><div class="line"></div><div class="line">p.constructor === P.prototype.constructor</div><div class="line">// true</div><div class="line"></div><div class="line">p.hasOwnProperty(&apos;constructor&apos;)</div><div class="line">// false</div></pre></td></tr></table></figure>
<p>上面代码表示p是构造函数P的实例对象，但是p自身没有contructor属性，该属性其实是读取原型链上面的<code>P.prototype.constructor</code>属性。</p>
<ul>
<li>constructor属性的作用是分辨prototype对象到底定义在哪个构造函数上面</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 F()&#123;&#125;;</div><div class="line"></div><div class="line">var f = new F();</div><div class="line"></div><div class="line">f.constructor === F // true</div><div class="line">f.constructor === RegExp // false</div></pre></td></tr></table></figure>
<h2 id="1-2-Object-getPrototypeOf方法"><a href="#1-2-Object-getPrototypeOf方法" class="headerlink" title="1.2 Object.getPrototypeOf方法"></a>1.2 Object.getPrototypeOf方法</h2><p>Object.getPrototypeOf方法返回一个对象的原型：</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></pre></td><td class="code"><pre><div class="line">// 空对象的原型是Object.prototype</div><div class="line">Object.getPrototypeOf(&#123;&#125;) === Object.prototype</div><div class="line">// true</div><div class="line"></div><div class="line">// 函数的原型是Function.prototype</div><div class="line">function f() &#123;&#125;</div><div class="line">Object.getPrototypeOf(f) === Function.prototype</div><div class="line">// true</div><div class="line"></div><div class="line">// 假定F为构造函数，f为F的实例对象</div><div class="line">// 那么，f的原型是F.prototype</div><div class="line">var f = new F();</div><div class="line">Object.getPrototypeOf(f) === F.prototype</div><div class="line">// true</div></pre></td></tr></table></figure>
<h3 id="1-3Object-create"><a href="#1-3Object-create" class="headerlink" title="1.3Object.create"></a>1.3<code>Object.create</code></h3><p><code>Object.create</code>方法用于生成新的对象，可以替代<code>new</code>命令。它接受一个对象作为参数，返回一个新对象，后者完全继承前者的属性，即前者成为后者的原型。</p>
<p>下面三种方式生成的新对象是等价的</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var o1 = Object.create(&#123;&#125;);</div><div class="line">var o2 = Object.create(Object.prototype);</div><div class="line">var o3 = new Object();</div></pre></td></tr></table></figure>
<p>如果想要生成一个不继承任何属性（比如toString和valueOf方法）的对象，可以将Object.create的参数设为null。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var o = Object.create(null);</div><div class="line"></div><div class="line">o.valueOf()</div><div class="line">// TypeError: Object [object Object] has no method &apos;valueOf&apos;</div></pre></td></tr></table></figure>
<p>修改对象原型会影响到新生成的对象</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">var o1 = &#123; p: 1 &#125;;</div><div class="line">var o2 = Object.create(o1);</div><div class="line"></div><div class="line">o1.p = 2;</div><div class="line">o2.p</div><div class="line">// 2</div></pre></td></tr></table></figure>
<h2 id="1-4-isPrototypeOf方法"><a href="#1-4-isPrototypeOf方法" class="headerlink" title="1.4 isPrototypeOf方法"></a>1.4 isPrototypeOf方法</h2><p>isPrototypeOf方法用来判断一个对象是否是另一个对象的原型</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">var o1 = &#123;&#125;;</div><div class="line">var o2 = Object.create(o1);</div><div class="line">var o3 = Object.create(o2);</div><div class="line"></div><div class="line">o2.isPrototypeOf(o3) // true</div><div class="line">o1.isPrototypeOf(o3) // true</div></pre></td></tr></table></figure>
<p>上面代码表明，只要某个对象处在原型链上，isProtypeOf都返回true。</p>
<h1 id="二-继承"><a href="#二-继承" class="headerlink" title="二 继承"></a>二 继承</h1><h2 id="2-1-构造函数的继承"><a href="#2-1-构造函数的继承" class="headerlink" title="2.1 构造函数的继承"></a>2.1 构造函数的继承</h2><h3 id="2-1-1-整体继承"><a href="#2-1-1-整体继承" class="headerlink" title="2.1.1 整体继承"></a>2.1.1 整体继承</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 Shape() &#123;</div><div class="line">  this.x = 0;</div><div class="line">  this.y = 0;</div><div class="line">&#125;</div><div class="line"></div><div class="line">Shape.prototype.move = function (x, y) &#123;</div><div class="line">  this.x += x;</div><div class="line">  this.y += y;</div><div class="line">  console.info(&apos;Shape moved.&apos;);</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p><code>Rectangle</code>构造函数继承<code>Shape</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></pre></td><td class="code"><pre><div class="line">function Rectangle() &#123;</div><div class="line">  Shape.call(this); // 调用父类构造函数</div><div class="line">&#125;</div><div class="line">// 另一种写法</div><div class="line">function Rectangle() &#123;</div><div class="line">  this.base = Shape;</div><div class="line">  this.base();</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 子类继承父类的方法</div><div class="line">Rectangle.prototype = Object.create(Shape.prototype);</div><div class="line">Rectangle.prototype.constructor = Rectangle;</div><div class="line"></div><div class="line">var rect = new Rectangle();</div><div class="line"></div><div class="line">rect instanceof Rectangle  // true</div><div class="line">rect instanceof Shape  // true</div><div class="line"></div><div class="line">rect.move(1, 1) // &apos;Shape moved.&apos;</div></pre></td></tr></table></figure>
<p>上面代码表示，构造函数的继承分成两部分</p>
<ul>
<li>子类调用父类的构造方法，</li>
</ul>
<ul>
<li>子类的原型指向父类的原型。</li>
</ul>
<h3 id="2-1-2-部分继承"><a href="#2-1-2-部分继承" class="headerlink" title="2.1.2 部分继承"></a>2.1.2 部分继承</h3><p>有时，只需要单个方法的继承，这时可以采用下面的写法。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">ClassB.prototype.print = function() &#123;</div><div class="line">  ClassA.prototype.print.call(this);</div><div class="line">  // some code</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>上面代码中，子类<code>B</code>的<code>print</code>方法先调用父类<code>A</code>的<code>print</code>方法，再部署自己的代码。这就等于继承了父类<code>A</code>的<code>print</code>方法。</p>
<h2 id="2-2-proto-属性"><a href="#2-2-proto-属性" class="headerlink" title="2.2 __proto__属性"></a>2.2 <code>__proto__</code>属性</h2><p><code>__proto__</code>属性指向当前对象的原型对象，即构造函数的<code>prototype</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">var obj = new Object();</div><div class="line"></div><div class="line">obj.__proto__ === Object.prototype</div><div class="line">// true</div><div class="line">obj.__proto__ === obj.constructor.prototype</div><div class="line">// true</div></pre></td></tr></table></figure>
<p>因此，获取实例对象<code>obj</code>的原型对象，有三种方法：</p>
<ul>
<li><code>obj.__proto__</code></li>
<li><code>obj.constructor.prototype</code></li>
<li><code>Object.getPrototypeOf(obj)</code></li>
</ul>
<p>上面三种方法之中，前两种都不是很可靠：</p>
<p>最新的ES6标准规定，<code>__proto__</code>属性只有浏览器才需要部署，其他环境可以不部署。而<code>obj.constructor.prototype</code>在手动改变原型对象时，可能会失效。</p>
<p><em>这块的深入部分待补充</em></p>
<p>非标准的<code>__proto__</code>属性（前后各两个下划线），可以改写某个对象的原型对象。</p>
<p>但是，应该尽量少用这个属性，而是用<code>Object.getPrototypeof()</code>和<code>Object.setPrototypeOf()</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">var obj = &#123;&#125;;</div><div class="line">var p = &#123;&#125;;</div><div class="line"></div><div class="line">obj.__proto__ = p;</div><div class="line">Object.getPrototypeOf(obj) === p // true</div></pre></td></tr></table></figure>
<p>上面代码通过<code>__proto__</code>属性，将<code>p</code>对象设为<code>obj</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">var a = &#123;x: 1&#125;;</div><div class="line">var b = &#123;__proto__: a&#125;;</div><div class="line">b.x // 1</div></pre></td></tr></table></figure>
<p>上面代码中，<code>b</code>对象通过<code>__proto__</code>属性，将自己的原型对象设为<code>a</code>对象，因此<code>b</code>对象可以拿到<code>a</code>对象的所有属性和方法。</p>
<h2 id="2-3-属性的继承"><a href="#2-3-属性的继承" class="headerlink" title="2.3 属性的继承"></a>2.3 属性的继承</h2><h3 id="2-3-1-对象的原生属性"><a href="#2-3-1-对象的原生属性" class="headerlink" title="2.3.1 对象的原生属性"></a>2.3.1 对象的原生属性</h3><p>对象本身的所有属性，可以用Object.getOwnPropertyNames方法获得。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">Object.getOwnPropertyNames(Date)</div><div class="line">// [&quot;parse&quot;, &quot;arguments&quot;, &quot;UTC&quot;, &quot;caller&quot;, &quot;name&quot;, &quot;prototype&quot;, &quot;now&quot;, &quot;length&quot;]</div></pre></td></tr></table></figure>
<p>对象本身的属性之中，有的是可以枚举的（enumerable），有的是不可以枚举的。只获取那些可以枚举的属性，使用Object.keys方法。</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">Object.keys(Date) // []</div></pre></td></tr></table></figure>
<h3 id="2-3-2-hasOwnProperty"><a href="#2-3-2-hasOwnProperty" class="headerlink" title="2.3.2 hasOwnProperty()"></a>2.3.2 hasOwnProperty()</h3><p><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></pre></td><td class="code"><pre><div class="line">Date.hasOwnProperty(&apos;length&apos;)</div><div class="line">// true</div><div class="line"></div><div class="line">Date.hasOwnProperty(&apos;toString&apos;)</div><div class="line">// false</div></pre></td></tr></table></figure>
<p><strong><code>hasOwnProperty</code>方法是JavaScript之中唯一一个处理对象属性时，不会遍历原型链的方法。</strong></p>
<h3 id="2-3-3-对象的继承属性"><a href="#2-3-3-对象的继承属性" class="headerlink" title="2.3.3 对象的继承属性"></a>2.3.3 对象的继承属性</h3><p>用Object.create方法创造的对象，会继承所有原型对象的属性。</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">var proto = &#123; p1: 123 &#125;;</div><div class="line">var o = Object.create(proto);</div><div class="line"></div><div class="line">o.p1 // 123</div><div class="line">o.hasOwnProperty(&quot;p1&quot;) // false</div></pre></td></tr></table></figure>
<h3 id="2-3-4-获取所有属性"><a href="#2-3-4-获取所有属性" class="headerlink" title="2.3.4 获取所有属性"></a>2.3.4 获取所有属性</h3><ul>
<li>使用 <code>in</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">&quot;length&quot; in Date // true</div><div class="line">&quot;toString&quot; in Date // true</div></pre></td></tr></table></figure>
<ul>
<li>获得对象的所有可枚举属性（不管是自身的还是继承的），可以使用for-in循环</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 o1 = &#123;p1: 123&#125;;</div><div class="line"></div><div class="line">var o2 = Object.create(o1,&#123;</div><div class="line">  p2: &#123; value: &quot;abc&quot;, enumerable: true &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">for (p in o2) &#123;console.info(p);&#125;</div><div class="line">// p2</div><div class="line">// p1</div></pre></td></tr></table></figure>
<ul>
<li>采用hasOwnProperty方法中针对对象自身的属性进行判断</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">for ( var name in object ) &#123;</div><div class="line">  if ( object.hasOwnProperty(name) ) &#123;</div><div class="line">    /* loop code */</div><div class="line">  &#125;</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></pre></td><td class="code"><pre><div class="line">function inheritedPropertyNames(obj) &#123;</div><div class="line">  var props = &#123;&#125;;</div><div class="line">  while(obj) &#123;</div><div class="line">    Object.getOwnPropertyNames(obj).forEach(function(p) &#123;</div><div class="line">      props[p] = true;</div><div class="line">    &#125;);</div><div class="line">    obj = Object.getPrototypeOf(obj);</div><div class="line">  &#125;</div><div class="line">  return Object.getOwnPropertyNames(props);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>用法如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">inheritedPropertyNames(Date)</div><div class="line">// [&quot;caller&quot;, &quot;constructor&quot;, &quot;toString&quot;, &quot;UTC&quot;, &quot;call&quot;, &quot;parse&quot;, &quot;prototype&quot;, &quot;__defineSetter__&quot;, &quot;__lookupSetter__&quot;, &quot;length&quot;, &quot;arguments&quot;, &quot;bind&quot;, &quot;__lookupGetter__&quot;, &quot;isPrototypeOf&quot;, &quot;toLocaleString&quot;, &quot;propertyIsEnumerable&quot;, &quot;valueOf&quot;, &quot;apply&quot;, &quot;__defineGetter__&quot;, &quot;name&quot;, &quot;now&quot;, &quot;hasOwnProperty&quot;]</div></pre></td></tr></table></figure>
<h2 id="2-4-对象的拷贝"><a href="#2-4-对象的拷贝" class="headerlink" title="2.4 对象的拷贝"></a>2.4 对象的拷贝</h2><p>如果要拷贝一个对象，需要做到下面两件事情。</p>
<ul>
<li>确保拷贝后的对象，与原对象具有同样的prototype原型对象。</li>
<li>确保拷贝后的对象，与原对象具有同样的属性。</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></pre></td><td class="code"><pre><div class="line">function copyObject(orig) &#123;</div><div class="line">  var copy = Object.create(Object.getPrototypeOf(orig));</div><div class="line">  copyOwnPropertiesFrom(copy, orig);</div><div class="line">  return copy;</div><div class="line">&#125;</div><div class="line"></div><div class="line">function copyOwnPropertiesFrom(target, source) &#123;</div><div class="line">  Object</div><div class="line">  .getOwnPropertyNames(source)</div><div class="line">  .forEach(function(propKey) &#123;</div><div class="line">    var desc = Object.getOwnPropertyDescriptor(source, propKey);</div><div class="line">    Object.defineProperty(target, propKey, desc);</div><div class="line">  &#125;);</div><div class="line">  return target;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
]]></content>
    
    <summary type="html">
    
      &lt;h1 id=&quot;封装&quot;&gt;&lt;a href=&quot;#封装&quot; class=&quot;headerlink&quot; title=&quot;封装&quot;&gt;&lt;/a&gt;封装&lt;/h1&gt;&lt;h1 id=&quot;一-封装&quot;&gt;&lt;a href=&quot;#一-封装&quot; class=&quot;headerlink&quot; title=&quot;一 封装&quot;&gt;&lt;/a&gt;一 封装&lt;/h1&gt;&lt;h2 id=&quot;1-1-prototype对象&quot;&gt;&lt;a href=&quot;#1-1-prototype对象&quot; class=&quot;headerlink&quot; title=&quot;1.1 prototype对象&quot;&gt;&lt;/a&gt;1.1 prototype对象&lt;/h2&gt;&lt;h3 id=&quot;1-1-1-构造函数的缺点&quot;&gt;&lt;a href=&quot;#1-1-1-构造函数的缺点&quot; class=&quot;headerlink&quot; title=&quot;1.1.1 构造函数的缺点&quot;&gt;&lt;/a&gt;1.1.1 构造函数的缺点&lt;/h3&gt;&lt;p&gt;JavaScript通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。所有实例对象都会生成相同的属性。&lt;/p&gt;
&lt;p&gt;但是，这样做是对系统资源的浪费，因为同一个构造函数的对象实例之间，无法共享属性和方法。所有创建的对象的方法功能是相同的，完全可以只定义一份。&lt;/p&gt;
&lt;h3 id=&quot;1-1-2-prototype属性的作用&quot;&gt;&lt;a href=&quot;#1-1-2-prototype属性的作用&quot; class=&quot;headerlink&quot; title=&quot;1.1.2 prototype属性的作用&quot;&gt;&lt;/a&gt;1.1.2 prototype属性的作用&lt;/h3&gt;&lt;p&gt;构造函数也有自己的属性和方法，其中有一个prototype属性指向另一个对象，一般称为prototype对象。该对象非常特别，只要定义在它上面的属性和方法，能被所有实例对象共享。也就是说，构造函数生成实例对象时，自动为实例对象分配了一个prototype属性。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;定义在prototype上面的属性和方法，能被所有实例对象共享&lt;/li&gt;
&lt;/ul&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;4&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;5&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;6&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;7&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;8&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;9&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;10&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;11&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;function Animal (name) &amp;#123;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;  this.name = name;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;#125;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;Animal.prototype.color = &amp;quot;white&amp;quot;;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;var cat1 = new Animal(&amp;apos;大毛&amp;apos;);&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;var cat2 = new Animal(&amp;apos;二毛&amp;apos;);&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;cat1.color // &amp;apos;white&amp;apos;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;cat2.color // &amp;apos;white&amp;apos;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
    
    </summary>
    
      <category term="JS" scheme="http://www.lightskystreet.com/categories/JS/"/>
    
    
      <category term="JS学习笔记" scheme="http://www.lightskystreet.com/tags/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
    
  </entry>
  
  <entry>
    <title>JS学习-函数</title>
    <link href="http://www.lightskystreet.com/2016/06/08/js-func/"/>
    <id>http://www.lightskystreet.com/2016/06/08/js-func/</id>
    <published>2016-06-07T16:00:00.000Z</published>
    <updated>2016-06-08T03:47:04.000Z</updated>
    
    <content type="html"><![CDATA[<h2 id="一-概述"><a href="#一-概述" class="headerlink" title="一 概述"></a>一 概述</h2><h3 id="1-1-函数的声明"><a href="#1-1-函数的声明" class="headerlink" title="1.1 函数的声明"></a>1.1 函数的声明</h3><p>函数的声明有三种方式</p>
<ul>
<li><p>function命令</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">function print(s) &#123;</div><div class="line">  console.log(s);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>function</code>命令声明的代码区块，就是一个函数。<code>function</code>命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。</p>
</li>
</ul>
<ul>
<li><p>函数表达式</p>
<p>采用变量赋值的写法，这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称<em>函数表达式（Function Expression）</em>，因为赋值语句的等号右侧只能放表达式。</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">var print = function(s) &#123;</div><div class="line">  console.log(s);</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>函数表达式的函数名只在函数体内部有效，下面的<code>x</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">var print = function x()&#123;</div><div class="line">  console.log(typeof x);</div><div class="line">&#125;;</div><div class="line"></div><div class="line">x</div><div class="line">// ReferenceError: x is not defined</div><div class="line"></div><div class="line">print()</div><div class="line">// function</div></pre></td></tr></table></figure>
<p>这种写法的用处有两个</p>
<ul>
<li><p>可以在函数体内部调用自身</p>
</li>
<li><p>方便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）。因此，下面的形式声明函数也非常常见</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var f = function f() &#123;&#125;;</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<a id="more"></a>
<ul>
<li><p>Function构造函数</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">var add = new Function(</div><div class="line">  &apos;x&apos;,</div><div class="line">  &apos;y&apos;,</div><div class="line">  &apos;return (x + y)&apos;</div><div class="line">);</div><div class="line"></div><div class="line">// 等同于</div><div class="line"></div><div class="line">function add(x, y) &#123;</div><div class="line">  return (x + y);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>在上面代码中，<code>Function</code>构造函数接受三个参数，除了最后一个参数是<code>add</code>函数的“函数体”，其他参数都是<code>add</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">var foo = new Function(</div><div class="line">  &apos;return &quot;hello world&quot;&apos;</div><div class="line">);</div><div class="line"></div><div class="line">// 等同于</div><div class="line"></div><div class="line">function foo() &#123;</div><div class="line">  return &quot;hello world&quot;;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>Function</code>构造函数可以不使用<code>new</code>命令，返回结果完全一样。</p>
</li>
</ul>
<h3 id="1-2-函数的重复声明"><a href="#1-2-函数的重复声明" class="headerlink" title="1.2 函数的重复声明"></a>1.2 函数的重复声明</h3><p>JS中函数允许多次声明，后面的声明就会覆盖前面的声明。</p>
<p>而且由于函数名的提升（参见下文），前一次声明在任何时候都是无效的。</p>
<h3 id="1-3-一等公民"><a href="#1-3-一等公民" class="headerlink" title="1.3 一等公民"></a>1.3 一等公民</h3><p>JS的函数与其他数据类型（数值、字符串、布尔值等等）处于同等地位，可以使用其他数据类型的地方，就能使用函数。</p>
<p>比如，可以把函数赋值给变量和对象的属性，也可以当作参数传入其他函数，或者作为函数的结果返回。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">function add(x, y) &#123;</div><div class="line">  return x + y;</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 将函数赋值给一个变量</div><div class="line">var operator = add;</div><div class="line"></div><div class="line">// 将函数作为参数和返回值</div><div class="line">function a(op)&#123;</div><div class="line">  return op;</div><div class="line">&#125;</div><div class="line">a(add)(1, 1)</div></pre></td></tr></table></figure>
<h3 id="1-4-函数名的提升"><a href="#1-4-函数名的提升" class="headerlink" title="1.4 函数名的提升"></a>1.4 函数名的提升</h3><p>JS引擎将函数名视同变量名，所以采用<em><code>function</code>命令</em>声明函数时，整个函数会像变量声明一样，被提升到代码头部。所以，下面的代码不会报错：</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">f();</div><div class="line"></div><div class="line">function f() &#123;&#125;</div></pre></td></tr></table></figure>
<p>但是，如果采用<em>赋值语句</em>定义函数，JavaScript就会报错：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">f();</div><div class="line">var f = function ()&#123;&#125;;</div><div class="line">// TypeError: undefined is not a function</div></pre></td></tr></table></figure>
<h3 id="1-5-不能在条件语句中声明函数"><a href="#1-5-不能在条件语句中声明函数" class="headerlink" title="1.5 不能在条件语句中声明函数"></a>1.5 不能在条件语句中声明函数</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">if (foo) &#123;</div><div class="line">  function x() &#123;&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">try &#123;</div><div class="line">  function x() &#123;&#125;</div><div class="line">&#125; catch(e) &#123;</div><div class="line">  console.log(e);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>按照语言规范，这是不合法的。但是，实际情况是各家浏览器往往并不报错，能够运行。</p>
<p>但是由于存在函数名的提升，所以在条件语句中声明函数，可能是无效的。</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">if (false) &#123;</div><div class="line">  var f = function () &#123;&#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">f() // undefined</div></pre></td></tr></table></figure>
<h2 id="1-6-函数的属性和方法"><a href="#1-6-函数的属性和方法" class="headerlink" title="1.6 函数的属性和方法"></a>1.6 函数的属性和方法</h2><h3 id="1-6-1-name属性"><a href="#1-6-1-name属性" class="headerlink" title="1.6.1 name属性"></a>1.6.1 name属性</h3><p><code>name</code>属性返回紧跟在<code>function</code>关键字之后的那个函数名。</p>
<h3 id="1-6-2-length属性"><a href="#1-6-2-length属性" class="headerlink" title="1.6.2 length属性"></a>1.6.2 length属性</h3><p><code>length</code>属性返回<em>函数预期传入的</em>参数个数，即函数定义之中的参数个数。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">function f(a, b) &#123;&#125;</div><div class="line">f.length // 2</div></pre></td></tr></table></figure>
<p>上述函数不管调用时输入了多少个参数，<code>length</code>属性始终等于2。</p>
<h3 id="1-6-3-toString"><a href="#1-6-3-toString" class="headerlink" title="1.6.3 toString()"></a>1.6.3 toString()</h3><p>函数的<code>toString</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">function f() &#123;</div><div class="line">  a();</div><div class="line">  b();</div><div class="line">  c();</div><div class="line">&#125;</div><div class="line"></div><div class="line">f.toString()</div><div class="line">// function f() &#123;</div><div class="line">//  a();</div><div class="line">//  b();</div><div class="line">//  c();</div><div class="line">// &#125;</div></pre></td></tr></table></figure>
<p>函数内部的注释也可以返回</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><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 f() &#123;/*</div><div class="line">  这是一个</div><div class="line">  多行注释</div><div class="line">*/&#125;</div><div class="line"></div><div class="line">f.toString()</div><div class="line">// &quot;function f()&#123;/*</div><div class="line">//   这是一个</div><div class="line">//   多行注释</div><div class="line">// */&#125;&quot;</div></pre></td></tr></table></figure>
<h2 id="三-函数作用域"><a href="#三-函数作用域" class="headerlink" title="三 函数作用域"></a>三 函数作用域</h2><h3 id="3-1-定义"><a href="#3-1-定义" class="headerlink" title="3.1 定义"></a>3.1 定义</h3><p>类似于java，在函数外声明就是全局变量（global variable），在函数内声明就是“局部变量”（local variable）。局部定义的变量，会覆盖同名全局变量。</p>
<p><strong>注意：</strong>对于<code>var</code>命令来说，只有在函数内部声明的才是局部变量，由于存在变量提升，所以在其他区块中声明，一律都是全局变量：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">if (true) &#123;</div><div class="line">  var x = 5;</div><div class="line">&#125;</div><div class="line">console.log(x);  // 5</div></pre></td></tr></table></figure>
<p>上面代码中，变量<code>x</code>在条件判断区块之中声明，结果就是一个全局变量，可以在区块之外读取。</p>
<p>ES6中的let命令可以避免这一点</p>
<h3 id="3-2-函数内部的变量提升"><a href="#3-2-函数内部的变量提升" class="headerlink" title="3.2 函数内部的变量提升"></a>3.2 函数内部的变量提升</h3><p>与全局作用域一样，函数作用域内部也会产生“变量提升”现象。<code>var</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">function foo(x) &#123;</div><div class="line">  if (x &gt; 100) &#123;</div><div class="line">    var tmp = x - 100;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>上面的代码等同于</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><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 foo(x) &#123;</div><div class="line">  var tmp;</div><div class="line">  if (x &gt; 100) &#123;</div><div class="line">    tmp = x - 100;</div><div class="line">  &#125;;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="3-3-函数本身的作用域"><a href="#3-3-函数本身的作用域" class="headerlink" title="3.3 函数本身的作用域"></a>3.3 函数本身的作用域</h3><p>函数本身也是一个值，也有自己的作用域，它的作用域绑定其声明时所在的作用域。函数内部访问的变量和该函数具有相同的作用域</p>
<p>下面的函数x的作用域绑定外层，x的内部变量a不会到函数f体内取值，所以输出1，而不是2</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">var a = 1;</div><div class="line">var x = function () &#123;</div><div class="line">  console.log(a);</div><div class="line">&#125;;</div><div class="line"></div><div class="line">function f() &#123;</div><div class="line">  var a = 2;</div><div class="line">  x();</div><div class="line">&#125;</div><div class="line"></div><div class="line">f() // 1</div></pre></td></tr></table></figure>
<p>下面的外部作用域的x函数希望访问到y的内部变量，显然是不可以的：</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">var x = function ()&#123;</div><div class="line">  console.log(a);</div><div class="line">&#125;;</div><div class="line"></div><div class="line">function y(f)&#123;</div><div class="line">  var a = 2;</div><div class="line">  f();</div><div class="line">&#125;</div><div class="line"></div><div class="line">y(x)</div><div class="line">// ReferenceError: a is not defined</div></pre></td></tr></table></figure>
<h2 id="四-参数"><a href="#四-参数" class="headerlink" title="四 参数"></a>四 参数</h2><h3 id="4-1-参数的省略"><a href="#4-1-参数的省略" class="headerlink" title="4.1 参数的省略"></a>4.1 参数的省略</h3><p>JS中函数参数不是必需的，允许省略参数，甚至一个都不传：</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">function f(a, b) &#123;</div><div class="line">  return a;</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(1, 2, 3) // 1</div><div class="line">f(1) // 1</div><div class="line">f() // undefined</div><div class="line"></div><div class="line">f.length // 2</div></pre></td></tr></table></figure>
<p>上面的三种调用都不会报错。被省略的参数的值就变为<code>undefined</code>。</p>
<p>需要注意的是，函数的<code>length</code>属性与实际传入的参数个数无关，只反映函数预期传入的参数个数。</p>
<p>但是无法只省略靠前的参数。如果一定要省略靠前的参数，只有显式传入<code>undefined</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">function f(a, b) &#123;</div><div class="line">  return a;</div><div class="line">&#125;</div><div class="line"></div><div class="line">f( , 1) // SyntaxError: Unexpected token ,(…)</div><div class="line">f(undefined, 1) // undefined</div></pre></td></tr></table></figure>
<h3 id="4-2-默认值的写法"><a href="#4-2-默认值的写法" class="headerlink" title="4.2 默认值的写法"></a>4.2 默认值的写法</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></pre></td><td class="code"><pre><div class="line">function f(a)&#123;</div><div class="line">  a = a || 1;</div><div class="line">  return a;</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(&apos;&apos;) // 1</div><div class="line">f(0) // 1</div></pre></td></tr></table></figure>
<p>上面代码的<code>||</code>表示“或运算”，即如果<code>a</code>有值，则返回<code>a</code>，否则返回事先设定的默认值（上例为1）。</p>
<p>这种写法会对<code>a</code>进行一次布尔运算，只有为<code>true</code>时，才会返回<code>a</code>。</p>
<p>但是，除了<code>undefined</code>以外，<code>0</code>、空字符、<code>null</code>等的布尔值也是<code>false</code>。也就是说，如果外部传入了0或者空字符，也会返回默认值，为了避免这个问题，可以采用下面更精确的写法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">function f(a) &#123;</div><div class="line">  (a !== undefined &amp;&amp; a !== null) ? a = a : a = 1;</div><div class="line">  return a;</div><div class="line">&#125;</div><div class="line"></div><div class="line">f() // 1</div><div class="line">f(&apos;&apos;) // &quot;&quot;</div><div class="line">f(0) // 0</div></pre></td></tr></table></figure>
<h3 id="4-3-传递方式"><a href="#4-3-传递方式" class="headerlink" title="4.3 传递方式"></a>4.3 传递方式</h3><ul>
<li>函数参数为原始类型的值（数值、字符串、布尔值）的，传递方式是值传递</li>
</ul>
<ul>
<li>函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference），因此在函数内部修改参数，将会影响到原始值</li>
</ul>
<h4 id="4-3-1-如果替换整个参数，不会影响到原始值"><a href="#4-3-1-如果替换整个参数，不会影响到原始值" class="headerlink" title="4.3.1 如果替换整个参数，不会影响到原始值"></a>4.3.1 如果替换整个参数，不会影响到原始值</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></pre></td><td class="code"><pre><div class="line">var obj = [1, 2, 3];</div><div class="line"></div><div class="line">function f(o)&#123;</div><div class="line">  o = [2, 3, 4];</div><div class="line">&#125;</div><div class="line">f(obj);</div><div class="line"></div><div class="line">obj // [1, 2, 3]</div></pre></td></tr></table></figure>
<p>上面代码中，在函数<code>f</code>内部，参数对象<code>obj</code>被整个替换成另一个值，而不是参数对象的某个属性，这时不会影响到原始值。这是因为，形式参数（<code>o</code>）与实际参数<code>obj</code>存在一个赋值关系。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">// 函数f内部</div><div class="line">o = obj;</div></pre></td></tr></table></figure>
<p>上面代码中，对<code>o</code>的修改都会反映在<code>obj</code>身上。</p>
<p>但是，如果对<code>o</code>赋予一个新的值，就等于切断了<code>o</code>与<code>obj</code>的联系，导致此后的修改都不会影响到<code>obj</code>了。</p>
<h4 id="4-3-2-通过全局对象的属性实现原始类型的地址传递效果"><a href="#4-3-2-通过全局对象的属性实现原始类型的地址传递效果" class="headerlink" title="4.3.2 通过全局对象的属性实现原始类型的地址传递效果"></a>4.3.2 通过全局对象的属性实现原始类型的地址传递效果</h4><p>某些情况下，如果需要对某个原始类型的变量，获取传址传递的效果，可以将它写成全局对象的属性。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">var a = 1;</div><div class="line"></div><div class="line">function f(p) &#123;</div><div class="line">  window[p] = 2;</div><div class="line">&#125;</div><div class="line">f(&apos;a&apos;);</div><div class="line"></div><div class="line">a // 2</div></pre></td></tr></table></figure>
<p>上面代码中，变量<code>a</code>本来是传值传递，但是写成<code>window</code>对象的属性，就达到了传址传递的效果。</p>
<h3 id="4-4-同名参数"><a href="#4-4-同名参数" class="headerlink" title="4.4 同名参数"></a>4.4 同名参数</h3><p>如果有同名的参数，则取最后出现的那个值，即使后面的<code>a</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">function f(a, a) &#123;</div><div class="line">  console.log(a);</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(1, 2) // 2</div></pre></td></tr></table></figure>
<p>但调用函数<code>f</code>的时候，没有提供第二个参数，<code>a</code>的取值就变成了<code>undefined</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">function f(a, a)&#123;</div><div class="line">  console.log(a);</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(1) // undefined</div></pre></td></tr></table></figure>
<p>如果要获得第一个<code>a</code>的值，可以使用<code>arguments</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">function f(a, a)&#123;</div><div class="line">  console.log(arguments[0]);</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(1) // 1</div></pre></td></tr></table></figure>
<h3 id="4-5-arguments对象"><a href="#4-5-arguments对象" class="headerlink" title="4.5 arguments对象"></a>4.5 arguments对象</h3><h4 id="4-5-1-定义"><a href="#4-5-1-定义" class="headerlink" title="4.5.1 定义"></a>4.5.1 定义</h4><p>由于JS允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是<code>arguments</code>对象的由来。</p>
<p><code>arguments</code>对象包含了函数运行时的所有参数，这个对象只有在函数体内部，才可以使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var f = function(one) &#123;</div><div class="line">  console.log(arguments[0]);</div><div class="line">  console.log(arguments[1]);</div><div class="line">  console.log(arguments[2]);</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(1, 2, 3)</div><div class="line">// 1</div><div class="line">// 2</div><div class="line">// 3</div></pre></td></tr></table></figure>
<p><code>arguments</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></pre></td><td class="code"><pre><div class="line">var f = function(a, b) &#123;</div><div class="line">  arguments[0] = 3;</div><div class="line">  arguments[1] = 2;</div><div class="line">  return a + b;</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(1, 1)</div><div class="line">// 5</div></pre></td></tr></table></figure>
<p>可以通过<code>arguments</code>对象的<code>length</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 f() &#123;</div><div class="line">  return arguments.length;</div><div class="line">&#125;</div><div class="line"></div><div class="line">f(1, 2, 3) // 3</div><div class="line">f(1) // 1</div><div class="line">f() // 0</div></pre></td></tr></table></figure>
<h4 id="4-5-2-与数组的关系"><a href="#4-5-2-与数组的关系" class="headerlink" title="4.5.2 与数组的关系"></a>4.5.2 <strong>与数组的关系</strong></h4><p>虽然<code>arguments</code>很像数组，但它是一个对象。数组专有的方法（比如<code>slice</code>和<code>forEach</code>），不能在<code>arguments</code>对象上直接使用。</p>
<ul>
<li><p>apply方法</p>
<p>可以通过<code>apply</code>方法，把<code>arguments</code>作为参数传进去，这样就可以让<code>arguments</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">// 用于apply方法</div><div class="line">myfunction.apply(obj, arguments).</div><div class="line"></div><div class="line">// 使用与另一个数组合并</div><div class="line">Array.prototype.concat.apply([1,2,3], arguments)</div></pre></td></tr></table></figure>
<p>​</p>
</li>
<li><p>将arguments转为真正的数组</p>
<p>要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组。</p>
<p>下面是两种常用的转换方法：slice方法和逐一填入新数组</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">var args = Array.prototype.slice.call(arguments);</div><div class="line"></div><div class="line">// or</div><div class="line"></div><div class="line">var args = [];</div><div class="line">for (var i = 0; i &lt; arguments.length; i++) &#123;</div><div class="line">  args.push(arguments[i]);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<h4 id="4-5-3-callee属性"><a href="#4-5-3-callee属性" class="headerlink" title="4.5.3 callee属性"></a>4.5.3 <strong>callee属性</strong></h4><p><code>arguments</code>对象带有一个<code>callee</code>属性，返回它所对应的原函数，可以通过<code>arguments.callee</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">var f = function(one) &#123;</div><div class="line">  console.log(arguments.callee === f);</div><div class="line">&#125;</div><div class="line"></div><div class="line">f() // true</div></pre></td></tr></table></figure>
<h2 id="五-函数其它知识点"><a href="#五-函数其它知识点" class="headerlink" title="五 函数其它知识点"></a>五 函数其它知识点</h2><h3 id="5-1-闭包"><a href="#5-1-闭包" class="headerlink" title="5.1 闭包"></a>5.1 闭包</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 f1() &#123;</div><div class="line">  var n = 999;</div><div class="line">  function f2() &#123;</div><div class="line">　　console.log(n); // 999</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>闭包简单理解成“定义在一个函数内部的函数”。</p>
<p>上述代码中，闭包就是函数<code>f2</code>，即能够读取其他函数内部变量的函数。由于在JavaScript语言中，只有函数内部的子函数才能读取内部变量，所以定义了这样的一种概念。</p>
<p>闭包最大的特点，就是它可以“记住”诞生的环境。本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。</p>
<p>把<code>f2</code>作为返回值，达到在<code>f1</code>外部读取它的内部变量的目的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">function f1() &#123;</div><div class="line">  var n = 999;</div><div class="line">  function f2() &#123;</div><div class="line">    console.log(n);</div><div class="line">  &#125;</div><div class="line">  return f2;</div><div class="line">&#125;</div><div class="line"></div><div class="line">var result = f1();</div><div class="line">result(); // 999</div></pre></td></tr></table></figure>
<p><strong>闭包的最大用处有两个：</strong></p>
<ul>
<li><p>可以读取函数内部的变量（可以封装对象的私有属性和方法）</p>
<p>和Java开发中的javabean的概念类似：</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></pre></td><td class="code"><pre><div class="line">function Person(name) &#123;</div><div class="line">  var _age;</div><div class="line">  function setAge(n) &#123;</div><div class="line">    _age = n;</div><div class="line">  &#125;</div><div class="line">  function getAge() &#123;</div><div class="line">    return _age;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  return &#123;</div><div class="line">    name: name,</div><div class="line">    getAge: getAge,</div><div class="line">    setAge: setAge</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">var p1 = person(&apos;张三&apos;);</div><div class="line">p1.setAge(25);</div><div class="line">p1.getAge() // 25</div></pre></td></tr></table></figure>
<p>上面代码中，函数<code>Person</code>的内部变量<code>_age</code>，通过闭包<code>getAge</code>和<code>setAge</code>，变成了返回对象<code>p1</code>的私有变量。</p>
<p>​</p>
</li>
</ul>
<ul>
<li><p>让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在</p>
<p>闭包使得内部变量记住上一次调用时的运算结果：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">function createIncrementor(start) &#123;</div><div class="line">  return function () &#123;</div><div class="line">    return start++;</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">var inc = createIncrementor(5);</div><div class="line"></div><div class="line">inc() // 5</div><div class="line">inc() // 6</div><div class="line">inc() // 7</div></pre></td></tr></table></figure>
<p>上面代码中，<code>start</code>是函数<code>createIncrementor</code>的内部变量。通过闭包，<code>start</code>的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包<code>inc</code>使得函数<code>createIncrementor</code>的内部环境，一直存在。所以，闭包可以看作是函数内部作用域的一个接口。</p>
<p>为什么会这样呢？原因就在于<code>inc</code>始终在内存中，而<code>inc</code>的存在依赖于<code>createIncrementor</code>，因此也始终在内存中，不会在调用结束后，被垃圾回收机制回收。</p>
<p>​</p>
</li>
</ul>
<p><strong>闭包比较耗内存</strong></p>
<p>注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。</p>
<h3 id="5-2-立即调用的函数表达式（IIFE）"><a href="#5-2-立即调用的函数表达式（IIFE）" class="headerlink" title="5.2 立即调用的函数表达式（IIFE）"></a>5.2 立即调用的函数表达式（IIFE）</h3><p>有时在定义函数之后，希望立即调用该函数。但不能在函数的定义之后加上圆括号，这会产生语法错误。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">function()&#123; /* code */ &#125;();</div><div class="line">// SyntaxError: Unexpected token (</div></pre></td></tr></table></figure>
<p>产生这个错误的原因是，<code>function</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">function f() &#123;&#125;</div><div class="line"></div><div class="line">// 表达式</div><div class="line">var f = function f() &#123;&#125;</div></pre></td></tr></table></figure>
<p>因此，JavaScript引擎规定，如果<code>function</code>关键字出现在行首，一律解释成语句。因此，JavaScript引擎看到行首是<code>function</code>关键字会解析成函数的定义，函数不应该以圆括号结尾，所以就报错了。</p>
<p><strong>解决方法</strong></p>
<p>不要让<code>function</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">(function()&#123; /* code */ &#125;());</div><div class="line">// 或者</div><div class="line">(function()&#123; /* code */ &#125;)();</div></pre></td></tr></table></figure>
<p>上面两种写法都是以圆括号开头，引擎就会认为后面跟的是一个表示式，而不是函数定义语句，所以就避免了错误。这就叫做<strong>“立即调用的函数表达式”（Immediately-Invoked Function Expression）</strong>，简称<strong>IIFE</strong>。</p>
<h3 id="5-3-eval命令"><a href="#5-3-eval命令" class="headerlink" title="5.3 eval命令"></a>5.3 eval命令</h3><p><code>eval</code>命令的作用是，将字符串当作语句执行：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">eval(&apos;var a = 1;&apos;);</div><div class="line">a // 1</div></pre></td></tr></table></figure>
<p>上面代码将字符串当作语句运行，生成了变量<code>a</code>。</p>
<ul>
<li><p><code>eval</code>命令可以修改了外部变量a的值，存在安全风险</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></pre></td><td class="code"><pre><div class="line">var a = 1;</div><div class="line">eval(&apos;a = 2&apos;);</div><div class="line"></div><div class="line">a // 2</div></pre></td></tr></table></figure>
</li>
<li><p><code>eval</code>的命令字符串不会得到JavaScript引擎的优化，运行速度较慢，尽量少用</p>
</li>
</ul>
<p>ECMAScript 5将<code>eval</code>的使用分成两种情况：</p>
<ul>
<li>“直接使用”， 这种情况下<code>eval</code>的作用域就是当前作用域（即全局作用域或函数作用域）</li>
</ul>
<ul>
<li><p>“间接调用”，此时eval的作用域总是全局作用域</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 a = 1;</div><div class="line"></div><div class="line">function f()&#123;</div><div class="line">  var a = 2;</div><div class="line">  var e = eval;</div><div class="line">  e(&apos;console.log(a)&apos;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">f() // 1</div></pre></td></tr></table></figure>
</li>
</ul>
<p>##参考资料<br><a href="http://javascript.ruanyifeng.com/​" target="_blank" rel="external">JavaScript 标准参考教程</a></p>
<p>  ​</p>
]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;一-概述&quot;&gt;&lt;a href=&quot;#一-概述&quot; class=&quot;headerlink&quot; title=&quot;一 概述&quot;&gt;&lt;/a&gt;一 概述&lt;/h2&gt;&lt;h3 id=&quot;1-1-函数的声明&quot;&gt;&lt;a href=&quot;#1-1-函数的声明&quot; class=&quot;headerlink&quot; title=&quot;1.1 函数的声明&quot;&gt;&lt;/a&gt;1.1 函数的声明&lt;/h3&gt;&lt;p&gt;函数的声明有三种方式&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;function命令&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;function print(s) &amp;#123;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;  console.log(s);&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;#125;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;&lt;code&gt;function&lt;/code&gt;命令声明的代码区块，就是一个函数。&lt;code&gt;function&lt;/code&gt;命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;函数表达式&lt;/p&gt;
&lt;p&gt;采用变量赋值的写法，这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称&lt;em&gt;函数表达式（Function Expression）&lt;/em&gt;，因为赋值语句的等号右侧只能放表达式。&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;var print = function(s) &amp;#123;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;  console.log(s);&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;#125;;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;函数表达式的函数名只在函数体内部有效，下面的&lt;code&gt;x&lt;/code&gt;只在函数体内部可用，指代函数表达式本身，其他地方都不可用：&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;4&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;5&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;6&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;7&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;8&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;9&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;var print = function x()&amp;#123;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;  console.log(typeof x);&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;#125;;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;x&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;// ReferenceError: x is not defined&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;print()&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;// function&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;这种写法的用处有两个&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;可以在函数体内部调用自身&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;方便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）。因此，下面的形式声明函数也非常常见&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;var f = function f() &amp;#123;&amp;#125;;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
    
    </summary>
    
      <category term="JS" scheme="http://www.lightskystreet.com/categories/JS/"/>
    
    
      <category term="JS学习笔记" scheme="http://www.lightskystreet.com/tags/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
    
  </entry>
  
  <entry>
    <title>JS学习-对象</title>
    <link href="http://www.lightskystreet.com/2016/06/07/js-object/"/>
    <id>http://www.lightskystreet.com/2016/06/07/js-object/</id>
    <published>2016-06-06T16:00:00.000Z</published>
    <updated>2016-06-20T23:27:44.000Z</updated>
    
    <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在学习RN，就想着一起把JS学习了，况且无论客户端，前端，服务器都可以用JS来开发，重要性可想而知，也增强一下自己的技术栈。这里记录自己的学习笔记，学习资料主要参考阮一峰老师的<a href="http://javascript.ruanyifeng.com/" target="_blank" rel="external">JS标准参考教程</a>，标准为ECMAScript 5.1，看了之后的感觉浅显易懂，当然归功于阮一峰老师的深厚功力，而且有很多经验总结结合示例讲解，看起来很畅快，一直在做Java开发，掌握了一门语言之后，再学习另一门语言，感觉入门也比较轻松，很多概念是相通的，只是不同平台有自己的一些标准和规范而已，看了一下目录，感觉从哪里学，并没有大的区别，所以就按照自己的兴趣学起来，毕竟看过一遍记忆没这么深刻，自己整理下来，在此做个笔记，也方便后续翻阅。</p>
<h2 id="一-概述"><a href="#一-概述" class="headerlink" title="一 概述"></a>一 概述</h2><p>对象的概念和java一样，就是一种抽象的概念，万物皆对象</p>
<h3 id="1-1-生成方法"><a href="#1-1-生成方法" class="headerlink" title="1.1 生成方法"></a>1.1 生成方法</h3><p>通常有三种方法</p>
<ul>
<li><p>直接使用大括号生成（<code>{}</code>）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var o = &#123;</div><div class="line">  p1: &apos;Hello&apos;,</div><div class="line">  p2: &apos;World&apos;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
</li>
</ul>
<p>​      大括号就定义了一个对象，包含了两个键值对的对象，该对象被赋值给变量<code>o</code>。</p>
<p>​      <code>p</code>是“键名”（成员的名称），字符串<code>Hello World</code>是“键值”（成员的值）</p>
<ul>
<li><code>new</code>命令生成一个Object对象的实例</li>
</ul>
<ul>
<li><p>使用<code>Object.create</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">var o1 = &#123;&#125;;</div><div class="line">var o2 = new Object();</div><div class="line">var o3 = Object.create(null);</div></pre></td></tr></table></figure>
<p>上面三行语句是等价的</p>
</li>
</ul>
<p>​    第三种写法一般用在需要对象继承的场合</p>
<h3 id="1-2-键名"><a href="#1-2-键名" class="headerlink" title="1.2 键名"></a>1.2 键名</h3><ul>
<li><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">var o = &#123;</div><div class="line">  &apos;p&apos;: &apos;Hello World&apos;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
</li>
</ul>
<a id="more"></a>
<ul>
<li><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></pre></td><td class="code"><pre><div class="line">var o =&#123;</div><div class="line">  1: &apos;a&apos;,</div><div class="line">  3.2: &apos;b&apos;,</div><div class="line">  1e2: true,</div><div class="line">  1e-2: true,</div><div class="line">  .234: true,</div><div class="line">  0xFF: true,</div><div class="line">&#125;;</div><div class="line"></div><div class="line">o</div><div class="line">// Object &#123;</div><div class="line">//   1: &quot;a&quot;,</div><div class="line">//   100: true,</div><div class="line">//   255: true,</div><div class="line">//   3.2: &quot;b&quot;,</div><div class="line">//   0.01: true,</div><div class="line">//   0.234: true</div><div class="line">// &#125;</div></pre></td></tr></table></figure>
</li>
<li><p>不合法的键名必须加上引号</p>
</li>
<li><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">var o = &#123;</div><div class="line">  &apos;1p&apos;: &quot;Hello World&quot;,</div><div class="line">  &apos;h w&apos;: &quot;Hello World&quot;,</div><div class="line">  &apos;p+q&apos;: &quot;Hello World&quot;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<p><strong>注意，JavaScript的保留字可以不加引号当作键名</strong></p>
<h3 id="1-3-属性"><a href="#1-3-属性" class="headerlink" title="1.3 属性"></a>1.3 属性</h3><p>对象的每一个“键名”又称为“属性”（property）</p>
<ul>
<li><p>“键值”可以是任何数据类型</p>
<p>如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">var o = &#123;</div><div class="line">  p: function (x) &#123;</div><div class="line">    return 2 * x;</div><div class="line">  &#125;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">o.p(1)</div><div class="line">// 2</div></pre></td></tr></table></figure>
</li>
<li><p>对象的属性之间用逗号分隔，最后一个属性后面可以加逗号（trailing comma），也可以不加</p>
</li>
</ul>
<ul>
<li><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">var obj = &#123;&#125;;</div><div class="line">obj.foo = 123;</div><div class="line">obj.foo // 123</div></pre></td></tr></table></figure>
</li>
</ul>
<p>​    上面代码中，直接对<code>obj</code>对象的<code>foo</code>属性赋值，结果就是在运行时创建了<code>foo</code>属性。</p>
<ul>
<li><p>name属性</p>
<p>由于对象的方法就是函数，因此也有<code>name</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">var obj = &#123;</div><div class="line">  m1: function m1() &#123;&#125;,</div><div class="line">  m2: function () &#123;&#125;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">obj.m1.name // m1</div><div class="line">obj.m2.name // undefined</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<h3 id="1-4-对象的引用"><a href="#1-4-对象的引用" class="headerlink" title="1.4 对象的引用"></a>1.4 对象的引用</h3><p>和java类似</p>
<ul>
<li><p>指向同一个对象的不同变量指向同一个内存地址，修改其中一个变量，会影响到其他所有变量</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">var o1 = &#123;&#125;;</div><div class="line">var o2 = o1;</div><div class="line"></div><div class="line">o1.a = 1;</div><div class="line">o2.a // 1</div><div class="line"></div><div class="line">o2.b = 2;</div><div class="line">o1.b // 2</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<ul>
<li><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">var o1 = &#123;&#125;;</div><div class="line">var o2 = o1;</div><div class="line"></div><div class="line">o1 = 1;</div><div class="line">o2 // &#123;&#125;</div></pre></td></tr></table></figure>
</li>
</ul>
<p>​    上面代码中，<code>o1</code>和<code>o2</code>指向同一个对象，然后<code>o1</code>的值变为1，这时不会对<code>o2</code>产生影响，<code>o2</code>还是指向原来的那个对象。</p>
<ul>
<li><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">var x = 1;</div><div class="line">var y = x;</div><div class="line"></div><div class="line">x = 2;</div><div class="line">y // 1</div></pre></td></tr></table></figure>
</li>
</ul>
<p>​    上面的代码中，当<code>x</code>的值发生变化后，<code>y</code>的值并不变，这就表示<code>y</code>和<code>x</code>并不是指向同一个内存地址。</p>
<h3 id="1-5-表达式还是语句？"><a href="#1-5-表达式还是语句？" class="headerlink" title="1.5 表达式还是语句？"></a>1.5 表达式还是语句？</h3><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; foo: 1 &#125;</div></pre></td></tr></table></figure>
<p>由于对象采用大括号表示，所以如果行首是一个大括号，会产生歧义</p>
<ul>
<li>这是一个表达式，表示一个包含<code>foo</code>属性的对象；</li>
</ul>
<ul>
<li>这是一个语句，表示一个代码区块，里面有一个标签<code>foo</code>，指向表达式<code>123</code>。</li>
</ul>
<p>为了避免这种情况，JavaScript规定，如果行首是大括号，一律解释为语句（即代码块）。如果要解释为表达式（即对象），必须在大括号前加上圆括号：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">(&#123; foo: 1&#125;)</div></pre></td></tr></table></figure>
<h2 id="二-属性的操作"><a href="#二-属性的操作" class="headerlink" title="二 属性的操作"></a>二 属性的操作</h2><h3 id="2-1-读取属性"><a href="#2-1-读取属性" class="headerlink" title="2.1 读取属性"></a>2.1 读取属性</h3><p>读取对象的属性，有两种方法</p>
<ul>
<li>使用点运算符</li>
</ul>
<ul>
<li>使用方括号运算符</li>
</ul>
<p><strong>注意：</strong></p>
<ul>
<li><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></pre></td><td class="code"><pre><div class="line">var o = &#123;</div><div class="line">  p: &apos;Hello World&apos;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">o.p // &quot;Hello World&quot;</div><div class="line">o[&apos;p&apos;] // &quot;Hello World&quot;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<ul>
<li><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></pre></td><td class="code"><pre><div class="line">var o = &#123;</div><div class="line">  0.7: &apos;Hello World&apos;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">o[&apos;0.7&apos;] // &quot;Hello World&quot;</div><div class="line">o[0.7] // &quot;Hello World&quot;</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<ul>
<li><p>方括号运算符内部可以使用表达式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">o[&apos;hello&apos; + &apos; world&apos;]</div><div class="line">o[3 + 3]</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<ul>
<li><p>数值键名不能使用点运算符（因为会被当成小数点），只能使用方括号运算符。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">obj.0xFF</div><div class="line">// SyntaxError: Unexpected token</div><div class="line">obj[0xFF]</div><div class="line">// true</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="2-2-检查变量是否声明"><a href="#2-2-检查变量是否声明" class="headerlink" title="2.2 检查变量是否声明"></a>2.2 检查变量是否声明</h3><p>如果读取一个不存在的键，会返回<code>undefined</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">// 检查a变量是否被声明</div><div class="line">if (a) &#123;...&#125; // 报错</div><div class="line"></div><div class="line">if (window.a) &#123;...&#125; // 不报错</div><div class="line">if (window[&apos;a&apos;]) &#123;...&#125; // 不报错</div></pre></td></tr></table></figure>
<p>上面的后二种写法之所以不报错，是因为在浏览器环境，所有全局变量都是<code>window</code>对象的属性。<code>window.a</code>的含义就是读取<code>window</code>对象的<code>a</code>属性，如果该属性不存在，就返回<code>undefined</code>，并不会报错。</p>
<p>需要注意的是，后二种写法有漏洞，如果<code>a</code>属性是一个空字符串（或其他对应的布尔值为<code>false</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">// 写法一</div><div class="line">if (window.a === undefined) &#123;</div><div class="line">  // ...</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 写法二</div><div class="line">if (&apos;a&apos; in window) &#123;</div><div class="line">  // ...</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="2-3-属性的赋值"><a href="#2-3-属性的赋值" class="headerlink" title="2.3 属性的赋值"></a>2.3 属性的赋值</h3><p>点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">o.p = &apos;abc&apos;;</div><div class="line">o[&apos;p&apos;] = &apos;abc&apos;;</div></pre></td></tr></table></figure>
<h3 id="2-4-查看所有属性"><a href="#2-4-查看所有属性" class="headerlink" title="2.4 查看所有属性"></a>2.4 查看所有属性</h3><p>查看一个<strong>对象本身</strong>的所有属性，可以使用<code>Object.keys</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">var o = &#123;</div><div class="line">  key1: 1,</div><div class="line">  key2: 2</div><div class="line">&#125;;</div><div class="line"></div><div class="line">Object.keys(o);</div><div class="line">// [&apos;key1&apos;, &apos;key2&apos;]</div></pre></td></tr></table></figure>
<h3 id="2-5-属性的删除"><a href="#2-5-属性的删除" class="headerlink" title="2.5 属性的删除"></a>2.5 属性的删除</h3><p>删除一个属性，需要使用<code>delete</code>命令。</p>
<ul>
<li><p>一旦使用<code>delete</code>命令删除某个属性，再读取该属性就会返回<code>undefined</code>，而且<code>Object.keys</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">var o = &#123;p: 1&#125;;</div><div class="line">Object.keys(o) // [&quot;p&quot;]</div><div class="line"></div><div class="line">delete o.p // true</div><div class="line">o.p // undefined</div><div class="line">Object.keys(o) // []</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<ul>
<li><p>删除不存在的属性，仍未true。因此，delete命令只能用来保证某个属性的值为undefined，而无法保证该属性是否真的存在</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var o = &#123;&#125;;</div><div class="line">delete o.p // true</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<ul>
<li><p>只有一种情况，<code>delete</code>命令会返回<code>false</code>，那就是该属性存在，且不得删除。</p>
<p>可以通过 configurable: false 来配置属性不可修改</p>
</li>
</ul>
<ul>
<li><code>delete</code>命令只能删除对象本身的属性，不能删除继承的属性</li>
</ul>
<h3 id="2-6-in运算符"><a href="#2-6-in运算符" class="headerlink" title="2.6 in运算符"></a>2.6 in运算符</h3><p>in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回<code>true</code>，否则返回<code>false</code>。</p>
<p><code>in</code>运算符不能识别对象继承的属性。如果使用它来判断继承的属性，也会返回true：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var o = new Object();</div><div class="line">o.hasOwnProperty(&apos;toString&apos;) // false</div><div class="line"></div><div class="line">&apos;toString&apos; in o // true</div></pre></td></tr></table></figure>
<p>上面代码中，<code>toString</code>方法不是对象<code>o</code>自身的属性，而是继承的属性，<code>hasOwnProperty</code>方法可以说明这一点。但是，<code>in</code>运算符不能识别，对继承的属性也返回<code>true</code>。</p>
<h3 id="2-7-for…in循环"><a href="#2-7-for…in循环" class="headerlink" title="2.7 for…in循环"></a>2.7 for…in循环</h3><p><code>for...in</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></pre></td><td class="code"><pre><div class="line">var o = &#123;a: 1, b: 2, c: 3&#125;;</div><div class="line"></div><div class="line">for (var i in o) &#123;</div><div class="line">  console.log(o[i]);</div><div class="line">&#125;</div><div class="line">// 1</div><div class="line">// 2</div><div class="line">// 3</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">// name 是 Person 本身的属性</div><div class="line">function Person(name) &#123;</div><div class="line">  this.name = name;</div><div class="line">&#125;</div><div class="line"></div><div class="line">// describe是Person.prototype的属性</div><div class="line">Person.prototype.describe = function () &#123;</div><div class="line">  return &apos;Name: &apos;+this.name;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">var person = new Person(&apos;Jane&apos;);</div><div class="line"></div><div class="line">// for...in循环会遍历实例自身的属性（name），</div><div class="line">// 以及继承的属性（describe）</div><div class="line">for (var key in person) &#123;</div><div class="line">  console.log(key);</div><div class="line">&#125;</div><div class="line">// name</div><div class="line">// describe</div></pre></td></tr></table></figure>
<p>如果只想遍历对象本身的属性，可以使用hasOwnProperty方法，在循环内部做一个判断：</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">for (var key in person) &#123;</div><div class="line">  if (person.hasOwnProperty(key)) &#123;</div><div class="line">    console.log(key);</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line">// name</div></pre></td></tr></table></figure>
<p>或者新建一个继承<code>null</code>的对象。由于<code>null</code>没有任何属性，所以新对象也就不会有继承的属性了。</p>
<h2 id="2-8-with语句"><a href="#2-8-with语句" class="headerlink" title="2.8 with语句"></a>2.8 with语句</h2><p><code>with</code>语句的格式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"></div></pre></td></tr></table></figure>
<p>它的作用是操作同一个对象的多个属性时，提供一些书写的方便。</p>
<ul>
<li><p><code>with</code>区块没有改变作用域，它的内部依然是当前作用域</p>
<p>因此<code>with</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></pre></td><td class="code"><pre><div class="line">var o = &#123;&#125;;</div><div class="line"></div><div class="line">with (o) &#123;</div><div class="line">  x = &quot;abc&quot;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">o.x // undefined</div><div class="line">x // &quot;abc&quot;</div></pre></td></tr></table></figure>
<p>上面代码中，对象<code>o</code>没有属性<code>x</code>，所以<code>with</code>区块内部对<code>x</code>的操作，等于创造了一个全局变量<code>x</code>。正确的写法应该是，先定义对象<code>o</code>的属性<code>x</code>，然后在<code>with</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></pre></td><td class="code"><pre><div class="line">var o = &#123;&#125;;</div><div class="line">o.x = 1;</div><div class="line"></div><div class="line">with (o) &#123;</div><div class="line">  x = 2;</div><div class="line">&#125;</div><div class="line"></div><div class="line">o.x // 2</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<ul>
<li><p><code>with</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">with (o) &#123;</div><div class="line">  console.log(x);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>单纯从上面的代码块，根本无法判断<code>x</code>到底是全局变量，还是<code>o</code>对象的一个属性。这非常不利于代码的除错和模块化，编译器也无法对这段代码进行优化，只能留到运行时判断，这就拖慢了运行速度。因此，建议不要使用<code>with</code>语句，可以考虑用一个临时变量代替<code>with</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></pre></td><td class="code"><pre><div class="line">with(o1.o2.o3) &#123;</div><div class="line">  console.log(p1 + p2);</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 可以写成</div><div class="line"></div><div class="line">var temp = o1.o2.o3;</div><div class="line">console.log(temp.p1 + temp.p2);</div></pre></td></tr></table></figure>
<p>​</p>
</li>
</ul>
<p>##参考资料<br><a href="http://javascript.ruanyifeng.com/​" target="_blank" rel="external">JavaScript 标准参考教程</a></p>
]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;最近在学习RN，就想着一起把JS学习了，况且无论客户端，前端，服务器都可以用JS来开发，重要性可想而知，也增强一下自己的技术栈。这里记录自己的学习笔记，学习资料主要参考阮一峰老师的&lt;a href=&quot;http://javascript.ruanyifeng.com/&quot;&gt;JS标准参考教程&lt;/a&gt;，标准为ECMAScript 5.1，看了之后的感觉浅显易懂，当然归功于阮一峰老师的深厚功力，而且有很多经验总结结合示例讲解，看起来很畅快，一直在做Java开发，掌握了一门语言之后，再学习另一门语言，感觉入门也比较轻松，很多概念是相通的，只是不同平台有自己的一些标准和规范而已，看了一下目录，感觉从哪里学，并没有大的区别，所以就按照自己的兴趣学起来，毕竟看过一遍记忆没这么深刻，自己整理下来，在此做个笔记，也方便后续翻阅。&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;对象的概念和java一样，就是一种抽象的概念，万物皆对象&lt;/p&gt;
&lt;h3 id=&quot;1-1-生成方法&quot;&gt;&lt;a href=&quot;#1-1-生成方法&quot; class=&quot;headerlink&quot; title=&quot;1.1 生成方法&quot;&gt;&lt;/a&gt;1.1 生成方法&lt;/h3&gt;&lt;p&gt;通常有三种方法&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;直接使用大括号生成（&lt;code&gt;{}&lt;/code&gt;）&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;4&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;var o = &amp;#123;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;  p1: &amp;apos;Hello&amp;apos;,&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;  p2: &amp;apos;World&amp;apos;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;#125;;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;​      大括号就定义了一个对象，包含了两个键值对的对象，该对象被赋值给变量&lt;code&gt;o&lt;/code&gt;。&lt;/p&gt;
&lt;p&gt;​      &lt;code&gt;p&lt;/code&gt;是“键名”（成员的名称），字符串&lt;code&gt;Hello World&lt;/code&gt;是“键值”（成员的值）&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;new&lt;/code&gt;命令生成一个Object对象的实例&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;使用&lt;code&gt;Object.create&lt;/code&gt;方法生成。&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;var o1 = &amp;#123;&amp;#125;;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;var o2 = new Object();&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;var o3 = Object.create(null);&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;上面三行语句是等价的&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;​    第三种写法一般用在需要对象继承的场合&lt;/p&gt;
&lt;h3 id=&quot;1-2-键名&quot;&gt;&lt;a href=&quot;#1-2-键名&quot; class=&quot;headerlink&quot; title=&quot;1.2 键名&quot;&gt;&lt;/a&gt;1.2 键名&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;p&gt;对象的所有键名都是字符串，所以加不加引号都可以&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;var o = &amp;#123;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;  &amp;apos;p&amp;apos;: &amp;apos;Hello World&amp;apos;&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;&amp;#125;;&lt;/div&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;/ul&gt;
    
    </summary>
    
      <category term="JS" scheme="http://www.lightskystreet.com/categories/JS/"/>
    
    
      <category term="JS学习笔记" scheme="http://www.lightskystreet.com/tags/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
    
  </entry>
  
  <entry>
    <title>Reactive Native 入门</title>
    <link href="http://www.lightskystreet.com/2016/05/26/reactnative-introduction/"/>
    <id>http://www.lightskystreet.com/2016/05/26/reactnative-introduction/</id>
    <published>2016-05-25T16:00:00.000Z</published>
    <updated>2016-05-27T00:32:43.000Z</updated>
    
    <content type="html"><![CDATA[<h2 id="一-React-Native"><a href="#一-React-Native" class="headerlink" title="一 React Native"></a>一 React Native</h2><h3 id="1-1-RN-的目标"><a href="#1-1-RN-的目标" class="headerlink" title="1.1 RN 的目标"></a>1.1 RN 的目标</h3><p>React Native使你能够在Javascript和<a href="http://facebook.github.io/react/" target="_blank" rel="external">React</a>的基础上获得完全一致的开发体验，构建世界一流的原生APP</p>
<p>React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台 (Learn once, write anywhere</p>
<h3 id="1-2-RN-的优点"><a href="#1-2-RN-的优点" class="headerlink" title="1.2 RN 的优点"></a>1.2 RN 的优点</h3><ul>
<li>编译，开发效率更高</li>
<li>更短的迭代周期，方便新功能测试</li>
<li>热部署</li>
<li>采用web的方式来开发native应用</li>
<li>和native相同的用户体验和用户习惯</li>
<li>“一次学习，随处可写”，降低开发成本</li>
<li>可预测性</li>
</ul>
<a id="more"></a>
<h3 id="1-2-RN-开发原则"><a href="#1-2-RN-开发原则" class="headerlink" title="1.2 RN 开发原则"></a>1.2 RN 开发原则</h3><ul>
<li>复用性<ul>
<li>在编写任何 React Native 的代码之前，你应该考虑如何“尽可能地复用代码”。</li>
</ul>
</li>
</ul>
<ul>
<li>组件化的平台抽象<ul>
<li>在考量 React Native app 中的可视化组件时，关键在于使用平台抽象。我们可以与设计师确定 app 中可复用的组件，比如：按钮，容器，列表的每一行等等。并且，只在有需要的地方将这些组件做分化。</li>
</ul>
</li>
</ul>
<p>以上原则可以帮助我们在Android IOS两个平台上尽可能的复用一套代码，降低开发成本，这也是RN开发中很重要的一点</p>
<h2 id="二-RN-的架构起源"><a href="#二-RN-的架构起源" class="headerlink" title="二 RN 的架构起源"></a>二 RN 的架构起源</h2><h3 id="2-1-React"><a href="#2-1-React" class="headerlink" title="2.1 React"></a>2.1 <a href="http://facebook.github.io/react/" target="_blank" rel="external">React</a></h3><p>Facebook开源的<strong>web UI</strong>框架。它使得工程师们可以把更多的时间和精力用于关注他们的产品本身，而不是应付框架带来的各种问题</p>
<ul>
<li><p>React 废弃了模板</p>
<ul>
<li><p>传统的web方式构建UI是将一堆抽象的HTML 模板堆起来，React将UI划分为一个个组件，这意味着React使用了一种真实、完整特性的语言去渲染View，相比于模板它有以下优点</p>
<ul>
<li>较强的构建能力：JS是一种简便、强大的编程语言，拥有构建抽象的能力，这一点在大型应用中非常重要</li>
<li>易于扩展和维护：通过相应的VIew逻辑将标签组合起来，React可以更方便的扩展和维护这些view，每个组件作为一个独立的视图。这使得更容易进行迭代产品，扩展时只需关注组件本身</li>
<li>代码复用、测试和关注分离（separation of concerns）</li>
<li>更安全：将一些可理解的标签和内容引入到JS中，没有人工字符串拼接，从而减少了XSS漏洞</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>多平台复用<ul>
<li>React包装了复杂而易变的DOM API，提供一个声明式的结构，使得整个程序模型变得抽象而简单，达到多平台复用</li>
</ul>
</li>
</ul>
<ul>
<li>代码可预测<ul>
<li>这种可预测性使得我们在快速迭代产品时更多的信任已有的代码，最终我们的应用程序也变得更为可靠。更易于扩展，我们的团队规模也更容易进行调整</li>
</ul>
</li>
<li><p>自更新</p>
<ul>
<li><p>任何时候底层数据变化时，React 会<em>自动处理所有用户界面的更新</em>。只需描述应用程序在任一个时间点应该长的样子。</p>
</li>
<li><p>在传统的JS应用中，需要观察数据变化，并将变化通知DOM去更新。</p>
<p>在React中，组件第一次初始化的时候，会执行render方法生成轻量级的View表示。通过这种表示，标签对应的string会生成，并且注入到document中。当数据变化的时候，render方法会再次被调用。</p>
</li>
</ul>
</li>
</ul>
<ul>
<li>Diff更新<ul>
<li>数据变化后，<em>仅会更新变化的部分</em></li>
<li>为了尽可能快的执行更新，React会使用新的返回值和之前的返回值对比，生成一个最小变更集合到DOM中</li>
</ul>
</li>
</ul>
<h3 id="2-3-原生开发"><a href="#2-3-原生开发" class="headerlink" title="2.3 原生开发"></a>2.3 原生开发</h3><h4 id="原生开发缺点"><a href="#原生开发缺点" class="headerlink" title="原生开发缺点"></a>原生开发缺点</h4><ul>
<li>开发效率低，web开发可以用React或Relay来简化开发流程</li>
</ul>
<ul>
<li>编译和构建效率低</li>
</ul>
<ul>
<li>迭代周期长，新功能测试比较慢</li>
</ul>
<h4 id="原生开发的优点"><a href="#原生开发的优点" class="headerlink" title="原生开发的优点"></a>原生开发的优点</h4><ul>
<li>原生应用相比web更好的用户体验<ul>
<li>原生平台特有的UI组件，譬如地图、日期选择器、开关，还有导航栈这些基本组件，有更好的体验，Google官方会不断更新</li>
</ul>
</li>
</ul>
<ul>
<li>一些系统服务，web很难实现<ul>
<li>很难在web上构建复杂的手势识别系统</li>
</ul>
</li>
</ul>
<ul>
<li><p>web上没有一个足够完善的线程模型</p>
<ul>
<li>在web上很难利用多线程并行执行工作</li>
<li>虽然web的Worker机制可以在后台执行一部分程序逻辑，但依然无法去做一些高负荷的数值计算，譬如在主线程以外的地方去进行图片解码、文本布局等等。这可能是开发一个高性能和快速响应的web app最大的难点。</li>
</ul>
<p>​</p>
</li>
</ul>
<h3 id="2-5-web-Native-？"><a href="#2-5-web-Native-？" class="headerlink" title="2.5 web + Native ？"></a>2.5 web + Native ？</h3><p>如果我们希望既能具备原生应用的用户体验，又能获得我们用React开发web应用的开发体验，该如何做呢？facebook曾考虑过以下几种方案：</p>
<ul>
<li>webview<ul>
<li>虽然灵活，可以以web开发的方式进行开发，但所有的渲染都由web相关的技术来完成，无法得到一个真正原生的用户体验</li>
</ul>
</li>
</ul>
<ul>
<li><p>将React移植到原生</p>
<ul>
<li>IOS上已经成功移植，开源项目<a href="http://componentkit.org/" target="_blank" rel="external">ComponentKit</a>，<a href="https://segmentfault.com/a/1190000002625560" target="_blank" rel="external">ComponentKit – 一个功能性和声明性的UI工具</a></li>
<li>Android上还没有，需要重新开发，开发成本高，上手成本高，无法使用web顶层的技术栈和工具，最重要的是，仍然无法改善开发中最大的问题——每次修改之后，重新编译和构建工程。</li>
</ul>
</li>
</ul>
<ul>
<li><p>用脚本封装原生</p>
<ul>
<li><p>JS语言本身跨平台，可以采用像web的开发方式</p>
</li>
<li><p>直接利用JS基础平台和技术</p>
</li>
</ul>
</li>
</ul>
<h3 id="2-6-用脚本封装原生的问题"><a href="#2-6-用脚本封装原生的问题" class="headerlink" title="2.6 用脚本封装原生的问题"></a>2.6 用脚本封装原生的问题</h3><ul>
<li>UI线程阻塞<ul>
<li>直接在原生环境和解释环境之间采用同步调用，UI线程很可能会被JavaScript执行阻塞住，要提高界面的响应效率，必须把JavaScript放到主线程之外执行。但这样做最直接的困难是资源访问竞争。如果我们的JavaScript访问正在被其它线程使用的资源（譬如一个渲染的View的尺寸），系统就只能加锁来确保方案安全，而这又会导致UI线程的卡顿</li>
</ul>
</li>
</ul>
<ul>
<li>资源开销<ul>
<li>每次原生和JavaScript虚拟机之间互相访问，在访问过程中都会带来极大的开销。如果经常跨线程访问，就会造成大量的开销</li>
<li>必须改变一些基础层次的编程模型来确保系统在线程之间传递消息永远是异步的，这样就可以在一帧之内尽可能打包更多的消息发送，来尽可能减少一些跨线程交互的开销</li>
</ul>
</li>
</ul>
<h4 id="React模型"><a href="#React模型" class="headerlink" title="React模型"></a>React模型</h4><p><img src="/img/rn/react-model.jpg">  </p>
<ul>
<li><strong>非阻塞</strong><ul>
<li>React是完全异步的，因此React的模型可以很好地解决上面提到的线程问题</li>
</ul>
</li>
</ul>
<ul>
<li><strong>Virtual DOM</strong><ul>
<li>React中的DOM是一种抽象的概念，这种抽象可以使React绑定到任何需要的视图系统上，比如IOS的UIKit，Android UI等等。</li>
</ul>
</li>
</ul>
<h2 id="三-RN-的架构"><a href="#三-RN-的架构" class="headerlink" title="三 RN 的架构"></a>三 RN 的架构</h2><h4 id="逻辑架构"><a href="#逻辑架构" class="headerlink" title="逻辑架构"></a>逻辑架构</h4><p><img src="/img/rn/react-dom.jpg">  </p>
<h4 id="Virtural-DOM"><a href="#Virtural-DOM" class="headerlink" title="Virtural DOM"></a>Virtural DOM</h4><p>Virtual DOM是DOM在内存中的一种轻量级表达方式，可以通过不同的渲染引擎生成不同平台下的UI</p>
<p>Vitual Dom对于RN的更新效率有很大帮助，React 中的Dom并不保证马上影响真实的Dom，React会等到事件循环结束，利用diff算法，通过当前新Dom树与之前的Dom树作比较，计算出更新真实的DOM的最小步骤</p>
<p>Virtual Dom 的抽象为跨平台提供了可能，达到  <em>Learn once, write anywhere</em></p>
<h2 id="四-开发基础"><a href="#四-开发基础" class="headerlink" title="四 开发基础"></a>四 开发基础</h2><h2 id="4-1-语言"><a href="#4-1-语言" class="headerlink" title="4.1 语言"></a>4.1 语言</h2><h3 id="4-1-1-JS"><a href="#4-1-1-JS" class="headerlink" title="4.1.1 JS"></a>4.1.1 JS</h3><ul>
<li>ES5/6/7<ul>
<li><a href="http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8" target="_blank" rel="external">ES语法</a></li>
<li><a href="http://bbs.reactnative.cn/topic/15" target="_blank" rel="external">ES6和ES5的区别</a></li>
<li><a href="http://es6.ruanyifeng.com/" target="_blank" rel="external">ECMAScript 6入门</a></li>
</ul>
</li>
</ul>
<blockquote>
<p>ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。</p>
</blockquote>
<h3 id="4-1-2-JSX"><a href="#4-1-2-JSX" class="headerlink" title="4.1.2 JSX"></a>4.1.2 JSX</h3><ul>
<li><a href="http://facebook.github.io/jsx/" target="_blank" rel="external">JSX</a> 是一个看起来很像 XML 的 JavaScript 语法扩展，在 JavaScript 代码里写着 XML 格式的代码称为 JSX<ul>
<li>在React 中可以接使用纯粹的 JS。但更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。</li>
<li>对于非开发者（比如设计师）同样容易理解。</li>
<li>XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。</li>
<li>React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。</li>
<li><a href="http://reactjs.cn/react/docs/jsx-in-depth.html" target="_blank" rel="external">深入理解JSX</a></li>
</ul>
</li>
</ul>
<h2 id="4-2-开发方式"><a href="#4-2-开发方式" class="headerlink" title="4.2 开发方式"></a>4.2 开发方式</h2><h4 id="4-2-1-组件"><a href="#4-2-1-组件" class="headerlink" title="4.2.1 组件"></a>4.2.1 组件</h4><h4 id="UI-和-样式-分离"><a href="#UI-和-样式-分离" class="headerlink" title="UI 和 样式 分离"></a>UI 和 样式 分离</h4><ul>
<li>组件的构成<ul>
<li>UI元素</li>
<li>属性 <code>Props</code></li>
<li>状态 <code>State</code></li>
</ul>
</li>
</ul>
<ul>
<li>组件的特性<ul>
<li>生命周期</li>
<li>状态机</li>
<li>数据绑定</li>
<li>主线程问题</li>
</ul>
</li>
</ul>
<h4 id="4-2-2-样式"><a href="#4-2-2-样式" class="headerlink" title="4.2.2 样式"></a>4.2.2 样式</h4><ul>
<li>StyleSheet<ul>
<li>类似CSS语法，灵活，多样式复用</li>
</ul>
</li>
</ul>
<ul>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="external">FlexBox</a>：弹性布局<ul>
<li>响应式布局模型</li>
<li>灵活性高，几乎可实现任意布局</li>
</ul>
</li>
</ul>
<p>Google已经放出了android平台的<a href="https://github.com/google/flexbox-layout" target="_blank" rel="external">Flexbox</a></p>
<p>React Native并没有完整实现CSS，而是使用JavaScript来给应用添加样式。这种做法当初是有争议的，你可以参考这个<a href="http://pan.baidu.com/s/1mg5xcKC" target="_blank" rel="external">幻灯片</a>来了解一下这样做的理由。</p>
<h4 id="4-2-3-API"><a href="#4-2-3-API" class="headerlink" title="4.2.3 API"></a>4.2.3 API</h4><ul>
<li>基本组件<ul>
<li><code>View</code>、<code>Text</code>、<code>ScrollVIew</code>、<code>Image</code>、<code>List</code>、<code>Drawer</code></li>
</ul>
</li>
</ul>
<ul>
<li>常用模块<ul>
<li><code>Toast</code>、<code>Storage</code>、<code>Navigator</code></li>
</ul>
</li>
</ul>
<ul>
<li>动画：完整的动画API<ul>
<li>缩放</li>
<li>移动</li>
<li>旋转</li>
<li>插值</li>
</ul>
</li>
</ul>
<ul>
<li><p>手势识别</p>
<ul>
<li><p><code>PanResponder</code>，类似Android事件处理机制</p>
<p>​</p>
</li>
</ul>
</li>
</ul>
<h4 id="4-2-4-RN-开发工具-Nuclide"><a href="#4-2-4-RN-开发工具-Nuclide" class="headerlink" title="4.2.4 RN 开发工具 Nuclide"></a>4.2.4 RN 开发工具 <a href="http://nuclide.io/docs/quick-start/getting-started/" target="_blank" rel="external"><strong>Nuclide</strong></a></h4><p><a href="https://atom.io/" target="_blank" rel="external">Atom编辑器</a>上的一个package</p>
<p>Atom是Github官方开源的一个编辑器</p>
<h3 id="五-RN-缺点"><a href="#五-RN-缺点" class="headerlink" title="五 RN 缺点"></a>五 RN 缺点</h3><ul>
<li>Bug定位困难</li>
<li>版本不稳定</li>
<li>安装包太大</li>
<li>issue很多</li>
</ul>
<h3 id="六-参考文献"><a href="#六-参考文献" class="headerlink" title="六 参考文献"></a>六 参考文献</h3><p><a href="http://facebook.github.io/react-native/docs/getting-started.html" target="_blank" rel="external">RN官方文档</a></p>
<p><a href="http://reactnative.cn/docs/0.25/getting-started.html" target="_blank" rel="external">RN中文文档</a></p>
<p><a href="http://reactjs.cn/" target="_blank" rel="external">React中文文档</a></p>
<p><a href="http://facebook.github.io/react/docs/thinking-in-react.html#step-1-break-the-ui-into-a-component-hierarchy" target="_blank" rel="external">React组件化概念</a></p>
<p><a href="http://reactjs.cn/react/docs/thinking-in-react.html" target="_blank" rel="external">深入理解React</a></p>
<p><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="external">FlexBox Guide</a></p>
<p><a href="http://liubin.org/promises-book/" target="_blank" rel="external">Promises</a></p>
<p><a href="http://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&amp;mid=207782506&amp;idx=1&amp;sn=3ff6b03c0d59fbda406f64739d9272cf&amp;scene=23&amp;srcid=1009Q3qo6mLeT2ydjdzUwLQ7#rd" target="_blank" rel="external">React Native For Android 架构初探</a></p>
<p><a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/" target="_blank" rel="external">react-native-bringing-modern-web-techniques-to-mobile</a></p>
<p><a href="http://f8-app.liaohuqiu.net/" target="_blank" rel="external">F8项目整体介绍</a></p>
<p><a href="http://facebook.github.io/react/blog/2013/06/05/why-react.html" target="_blank" rel="external">为什么构建React</a></p>
<p><a href="http://facebook.github.io/jsx/" target="_blank" rel="external">JSX</a></p>
]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;一-React-Native&quot;&gt;&lt;a href=&quot;#一-React-Native&quot; class=&quot;headerlink&quot; title=&quot;一 React Native&quot;&gt;&lt;/a&gt;一 React Native&lt;/h2&gt;&lt;h3 id=&quot;1-1-RN-的目标&quot;&gt;&lt;a href=&quot;#1-1-RN-的目标&quot; class=&quot;headerlink&quot; title=&quot;1.1 RN 的目标&quot;&gt;&lt;/a&gt;1.1 RN 的目标&lt;/h3&gt;&lt;p&gt;React Native使你能够在Javascript和&lt;a href=&quot;http://facebook.github.io/react/&quot;&gt;React&lt;/a&gt;的基础上获得完全一致的开发体验，构建世界一流的原生APP&lt;/p&gt;
&lt;p&gt;React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台 (Learn once, write anywhere&lt;/p&gt;
&lt;h3 id=&quot;1-2-RN-的优点&quot;&gt;&lt;a href=&quot;#1-2-RN-的优点&quot; class=&quot;headerlink&quot; title=&quot;1.2 RN 的优点&quot;&gt;&lt;/a&gt;1.2 RN 的优点&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;编译，开发效率更高&lt;/li&gt;
&lt;li&gt;更短的迭代周期，方便新功能测试&lt;/li&gt;
&lt;li&gt;热部署&lt;/li&gt;
&lt;li&gt;采用web的方式来开发native应用&lt;/li&gt;
&lt;li&gt;和native相同的用户体验和用户习惯&lt;/li&gt;
&lt;li&gt;“一次学习，随处可写”，降低开发成本&lt;/li&gt;
&lt;li&gt;可预测性&lt;/li&gt;
&lt;/ul&gt;
    
    </summary>
    
      <category term="RN" scheme="http://www.lightskystreet.com/categories/RN/"/>
    
    
      <category term="RN" scheme="http://www.lightskystreet.com/tags/RN/"/>
    
  </entry>
  
  <entry>
    <title>Android架构初探</title>
    <link href="http://www.lightskystreet.com/2016/05/20/android-architecture/"/>
    <id>http://www.lightskystreet.com/2016/05/20/android-architecture/</id>
    <published>2016-05-19T16:00:00.000Z</published>
    <updated>2016-05-26T10:29:28.000Z</updated>
    
    <content type="html"><![CDATA[<p>#一 背景<br>点评美团合并之后，业务需要整合，我们部门的几条业务需要往美团平台迁移，为了降低迁移成本，开发和维护成本，以及将来可能要做的单元测试，需要对架构进行相应的调整。之前的代码都堆在Activity或Fragment里面，UI，业务，数据混合在一起，就使得难以单独的复用和扩展、测试。</p>
<a id="more"></a>
<p>## </p>
<p>#二 目标</p>
<ul>
<li>代码复用</li>
</ul>
<ul>
<li>UI独立</li>
</ul>
<ul>
<li>业务独立</li>
</ul>
<ul>
<li>数据独立</li>
</ul>
<ul>
<li>可测试</li>
</ul>
<p>## </p>
<p>#三 简洁架构<br>这里先引入简洁架构的概念，该架构由Uncle Bob提出，他认为一个架构应该具有以下特性</p>
<ul>
<li><p><strong>框架独立性</strong></p>
<p>架构不应该依赖于现有的library，这样可以让你像工具一样去使用架构，而不是对你的系统添加约束</p>
</li>
<li><p><strong>可测试</strong></p>
<p>业务逻辑可以在不依赖UI，数据库，网络服务等其它外部因素的情况下进行测试</p>
</li>
<li><p><strong>UI独立性</strong></p>
<p>在不变动系统其它部分的情况下，可以很方便的改变UI，比如，在没有变动任何业务逻辑的情况下web ui可以被替换成console ui</p>
</li>
<li><p><strong>数据库独立性</strong></p>
<p>可以很自如的在Oracle，SQL Server之间切换，而不涉及业务逻辑</p>
</li>
<li><p><strong>任何外部代理模块的独立性</strong></p>
<p>业务逻辑应该不需要知道外部世界的任何事情</p>
<p>​</p>
<p> 下图阐述了一个简洁架构的各个层之间的关系</p>
<p><img src="/img/architecture/clean-architecture.png" width="500" height="450">  </p>
</li>
</ul>
<ul>
<li>内层不应该知道外层的任何情况</li>
</ul>
<ul>
<li>各层之间通过接口交互</li>
</ul>
<ul>
<li>上层依赖下层，但依赖于接口</li>
</ul>
<blockquote>
<p>应用中最重部分就是业务逻辑层。它负责解决应用所真正想解决的问题。该层不包含任何框架相关的代码，因此其代码应该可以在没有模拟器的情况下独立运行。这样，测试、开发和维护业务逻辑代码就要容易很多。而这就是干净架构的主要优势。</p>
</blockquote>
<p>下面简单对以上几个概念进行简单的介绍</p>
<p>##Entities<br>数据部分，一个Entity可以是一个带有方法的对象，或者一个数据结构和方法的集合</p>
<p>##Use Cases<br>该层包含了应用特定的业务规则，封装了应用中所有的use cases。这些use cases从entities组装数据流，传递给业务使用。</p>
<p>该层的变更不应该影响到Entities，也不希望该层会被database，UI，或者其它通用框架的外部变化所影响到，该层应该独立于这些部分。</p>
<p>##Interface Adapters<br>该层是一些为了便于use cases和entities的数据转换的适配器。这一层包含GUI的MVC架构，展示层，Views和Controllers都属于该层。models更倾向于在controllers和use cases之间传递的数据结构，然后从use cases传递给Presenter和Views。</p>
<p>上面的这些原则足以构建高内聚，低耦合，可扩展的应用</p>
<p>## </p>
<p>#四 Android架构探索<br>一个应用基本可以划分为3个部分，UI，业务，和数据，而在移动端来说，更注重UI的展示，复杂的业务通常放在服务端。</p>
<p>针对这3部分，如何进行设计呢？</p>
<p>可以参考上面的基本原则 ，把整个项目拆分成3个不同的层级：</p>
<p><strong>数据层</strong>— <strong>业务层</strong> — <strong>展示层</strong></p>
<p>每一层保持功能独立，上层依赖下层，但依赖于接口，而不是具体。每一层拥有自己的数据模型，做到依赖独立。</p>
<p> <img src="/img/architecture/android-architecture.png">  </p>
<p>## </p>
<p>###4.1 表现层（Presentation Layer）<br>常见的模式有MVP，MVC，MVVM</p>
<p>表现层除了UI相关逻辑，不应该含有任何逻辑，这一层应该很轻，数据的获取和业务处理应该交给业务层和数据层，Presenter在该层由Use Cases组装，Use Cases会在新的线程执行一个任务并使用一个带有数据的回调用于渲染view，下图是<strong>MVP</strong>架构模块之间的基本关系</p>
<p>  <img src="/img/architecture/mvp.png" width="700" height="380">  </p>
<p>## </p>
<p>###4.2 业务层 （Business logic（Domain） Layer）<br>业务层可能有些模糊，哪些应该属于该层呢？</p>
<p>按照MVP的方式划分，很容易理解的是，所有的业务逻辑放到P中即可。但实际开发中，你会发现，稍微复杂的业务，P层的代码就会变得非常臃肿。我认为P的角色作为业务逻辑的组装更合适。业务逻辑可以进行相应的封装，比如</p>
<p>另外业务层应该是纯java代码，对android平台没有任何依赖，业务层向外暴露接口。</p>
<p><img src="/img/architecture/domain.png">   </p>
<p>## </p>
<p>###4.3 数据层（Data Layer）<br>数据层提供了数据源，数据层也可以包括一些简单的数据处理，比如JSON的封装，一些model的转换，外部不关心具体如何获取数据的细节，只向数据层拿数据。比如下面展示了 仓库模式（<a href="http://martinfowler.com/eaaCatalog/repository.html" target="_blank" rel="external">Repository Pattern</a>）来实现数据层，它的策略是采用工厂模式，传递不同的条件参数，获取不同的数据。</p>
<p> <img src="/img/architecture/data.png" width="650" height="380">  </p>
<p>## </p>
<p>###4.4 测试 （Testing）<br>基于上面的架构，我们更容易进行测试，不同的分层之间完全独立，每一层也有自己相应的测试方案：</p>
<ul>
<li><strong>Presentation Layer：</strong> 使用Android自带的<code>instrumentation</code> 和<code>espresso</code> 做集成和功能测试。</li>
<li><strong>Domain Layer:</strong> <code>JUnit</code> + <code>mockito</code>做单元测试。</li>
<li><strong>Data Layer:</strong> <code>Robolectric</code> （这一层开始有Android相关的依赖）+<code>junit</code> +<code>mockito</code> 做单元和集成测试</li>
</ul>
<p>## </p>
<p>#五 表现层架构</p>
<blockquote>
<p><strong>MVC</strong><br>Model–View–Controller (MVC) is a software architectural pattern for implementing user interfaces.*</p>
</blockquote>
<p><strong>MVP，MVC，MVVM</strong> 都是表现层的一种模式</p>
<p>这些架构相对于传统的开发方式，门槛高些，要想深入掌握和更高层次的理解各个层的职责，需要一定积累，对于一些简单的场景并不是一种好的方案，复杂的业务场景则会从中得到很多好处。</p>
<p><strong>这些模式的好处</strong></p>
<ul>
<li><p><strong>关注点分离，职责明确</strong></p>
<p>o    UI – 负责UI的渲染</p>
<p>o    Presenter/controller – 负责响应UI事件并和Model交互</p>
<p>o    Model – 负责业务行为和状态管理</p>
</li>
</ul>
<ul>
<li><p><strong>代码重用性</strong></p>
<p>关注点和责任分离之后，各层独立，可以增加代码的可用性</p>
</li>
<li><p><strong>测试驱动</strong></p>
<p>易于测试，只要写一个实现了ViewInterface的类即可测试，而不需依赖android平台</p>
</li>
</ul>
<ul>
<li><p><strong>隐藏数据访问</strong></p>
<p>使用这种模式之后，数据的访问代码就被划分到data层</p>
</li>
</ul>
<ul>
<li><p><strong>扩展性高，可适配</strong></p>
<p>将代码分离到Presenter，Controller和Model中，可以更自由的适配</p>
</li>
</ul>
<p>## </p>
<p>##5.1 MVP</p>
<p>这里简单的介绍下MVP的基本元素</p>
<ul>
<li>M：数据实体，封装数据</li>
</ul>
<ul>
<li>V：视图的渲染，事件的响应</li>
</ul>
<ul>
<li>P：中间层，作为与M和V通讯的桥梁，组装业务逻辑</li>
</ul>
<p><strong>在MVP模式里通常包含4个要素</strong></p>
<p>(1) <strong>View</strong>: 负责绘制UI元素、与用户进行交互(Activity或Fragment);</p>
<p>(2) <strong>View interface</strong>: View需要实现的接口，View通过View interface与Presenter进行交互</p>
<p>(3) <strong>Model</strong>: 业务Bean</p>
<p>(4) <strong>Presenter</strong>: 作为View与Model交互的纽带，承载了大部分的复杂逻辑</p>
<p>## </p>
<p>##5.2 MVP vs MVC</p>
<p>###相同点</p>
<ul>
<li>分离了不同组件之间的责任，降低了View和Model之间的耦合</li>
</ul>
<p>###不同点</p>
<ul>
<li>MVP中，View与model之间的耦合更低，不容许View直接访问Model，通过Presenter来交互，更加容易进行单元测试，因为View是通过接口来交互</li>
</ul>
<ul>
<li>通常View与Presenter的关系是一对一，复杂的View可能有多个Presenter</li>
</ul>
<ul>
<li>MVC可以决定展示哪个View，Controller依赖于行为，而且可以被多个View共用</li>
</ul>
<p>## </p>
<p>##5.3 MVP vs MVVM<br>MVP单项绑定，而MVVM采用双向绑定（data-binding），View的变动，自动反映在 ViewModel，Model的变动也会反映到View中</p>
<p><img src="/img/architecture/mvvm.jpg" width="700" height="500">   </p>
<p><img src="/img/architecture/mvp.png" width="700" height="500">     </p>
<p>其实MVP中Model是很轻的，数据的获取和处理属于架构中的数据层和业务层，所以这一点并不是很让人能够理解。</p>
<p>本篇文章主要是对android架构的探索，目前我们采用的是data+domain+MVP这种架构模式。</p>
<p>后期会分享在架构调整中所遇到的问题和经验。</p>
<p>## </p>
<p>##项目</p>
<p><a href="https://github.com/googlesamples/android-architecture" target="_blank" rel="external">https://github.com/googlesamples/android-architecture</a></p>
<p><a href="https://github.com/pedrovgs/EffectiveAndroidUI" target="_blank" rel="external">https://github.com/pedrovgs/EffectiveAndroidUI</a></p>
<p><a href="https://github.com/dmilicic/Android-Clean-Boilerplate" target="_blank" rel="external">https://github.com/dmilicic/Android-Clean-Boilerplate</a></p>
<p><a href="https://github.com/android10/Android-CleanArchitecture" target="_blank" rel="external">https://github.com/android10/Android-CleanArchitecture</a></p>
<p>##参考文档</p>
<p><a href="https://github.com/AWCNTT/ArticleTranslateProject/blob/master/translated/Issue%23118/2014-09-11-Architecting%20Android%E2%80%A6The%20clean%20way.md" target="_blank" rel="external"><strong>Architecting Android…The clean way?</strong></a></p>
<p><a href="https://blog.8thlight.com/uncle-bob/2012/08/13/the-clean-architecture.html" target="_blank" rel="external">The Clean Architecture</a></p>
<p><a href="http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html" target="_blank" rel="external">MVC，MVP 和 MVVM 的图示</a></p>
<p><a href="https://segmentfault.com/a/1190000003966281?utm_source=APP&amp;utm_medium=iOS&amp;utm_campaign=socialShare" target="_blank" rel="external">https://segmentfault.com/a/1190000003966281?utm_source=APP&amp;utm_medium=iOS&amp;utm_campaign=socialShare</a></p>
<p><a href="http://www.infragistics.com/community/blogs/todd_snyder/archive/2007/10/17/mvc-or-mvp-pattern-whats-the-difference.aspx" target="_blank" rel="external">MVC or MVP Pattern – Whats the difference?</a></p>
<p><a href="https://www.zhihu.com/question/30976423/answer/50181505" target="_blank" rel="external">https://www.zhihu.com/question/30976423/answer/50181505</a></p>
<p><a href="http://wiki.sankuai.com/pages/viewpage.action?pageId=447914510" target="_blank" rel="external"></a></p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;#一 背景&lt;br&gt;点评美团合并之后，业务需要整合，我们部门的几条业务需要往美团平台迁移，为了降低迁移成本，开发和维护成本，以及将来可能要做的单元测试，需要对架构进行相应的调整。之前的代码都堆在Activity或Fragment里面，UI，业务，数据混合在一起，就使得难以单独的复用和扩展、测试。&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
    
      <category term="Android，架构" scheme="http://www.lightskystreet.com/tags/Android%EF%BC%8C%E6%9E%B6%E6%9E%84/"/>
    
  </entry>
  
  <entry>
    <title>Reactive Programming 入门</title>
    <link href="http://www.lightskystreet.com/2015/12/08/reactive-programming/"/>
    <id>http://www.lightskystreet.com/2015/12/08/reactive-programming/</id>
    <published>2015-12-07T16:00:00.000Z</published>
    <updated>2016-05-26T07:30:12.000Z</updated>
    
    <content type="html"><![CDATA[<p>##一 Rx概念介绍<br>Reactive是一种编程思想<br>Reactive编程就是异步数据流的编程，基于事件的编程</p>
<p><strong>一切皆流</strong></p>
<p>一个流是将要发生的有序序列事件的一部分。<br>你可以创建任何事物的数据流。任何事物都可以是流：变量，用户输入，属性 ，缓存，数据结构等等</p>
<p><img src="/img/rx/btn_click_flow.png" width="570" height="400"></p>
<p>它可以发出三种不同的事件：<code>value</code>，<code>error</code>或者<code>completed</code>  </p>
<p>流（Observable）是被观察的对象。对于流的监听被称作订阅。我们定义的函数被称作观察者。  </p>
<p>Rx的思想基于观察者模式，但是它的功能，远远不止这些，Rx组织为不同的语言提供了Rx扩展(Rxjava,RxJs,RxScala)，它们提供了用于创建，变换，连接，过滤任何流的函数库。不仅某个流可以用于另一个流的输入，多个流同样可以作为其它流的输入。你也可以合并两个流。如果你对某些事件感兴趣，也可以通过对一个流的过滤获得另一个目标流。也可以将一个流中的数据映射到一个新的数据流。</p>
<a id="more"></a>
<p>###优点</p>
<ul>
<li>简洁</li>
<li>抽象层次高，你可以聚焦于定义业务逻辑的事件依赖，而不是大量的实现细节</li>
<li>有效避免callback hell，更少的中间状态变量</li>
</ul>
<p>###缺点</p>
<ul>
<li>代码抽象层次高，真正使用Rx思想解决问题需要一个过程</li>
<li>对于android来说，包比较大，方法数也不少</li>
</ul>
<p>###适用场景<br>异步 ？<br>线程切换 ？<br>事件组合？（多个请求和UI操作组合） </p>
<p><strong>EveryWhere</strong><br>Rx是一种思想，这里的一切都是流，你可以定义任何事物的流，可以是事件，可以是数据结构，任意发挥你的想象，通过Rx的方式来解决问题。（Twitter suggestion的实现）  </p>
<p>####Callback Hell<br>比如有一个链式请求调用，你首先需要根据第一个请求的结果去判断下一步的操作。那么就要处理多个请求的回调。不管是正确还是错误，你总需要通过callback处理，无形中多了不少代码量，创建了变量，浪费了内存，同时增加了错误的可能性。</p>
<p>##二 通过RxJava创建一条完整的事件链</p>
<p><strong>被观察者</strong><br>Observable，对应我们上面所说的流，任何事物：数据，事件</p>
<p><strong>订阅者</strong><br>Observer，Subcreiber</p>
<p>###2.1 简单的创建</p>
<p>####2.1.1  创建 Observer<br>Observer 即观察者，它决定事件触发的时候将有怎样的行为。 RxJava 中的 Observer 接口的实现方式：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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="comment">//new one</span></div><div class="line">Observer&lt;String&gt; observer = <span class="keyword">new</span> Observer&lt;String&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onNext</span><span class="params">(String s)</span> </span>&#123;&#125;</div><div class="line"></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCompleted</span><span class="params">()</span> </span>&#123;&#125;</div><div class="line"></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onError</span><span class="params">(Throwable e)</span> </span>&#123;&#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>除了 Observer 接口之外，RxJava 还内置了一个实现了 Observer 的抽象类：Subscriber。<br>Subscriber是对Observer接口的扩展，但它们的基本使用方式是完全一样的：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Subscriber subscriber = <span class="keyword">new</span> Subscriber() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCompleted</span><span class="params">()</span> </span>&#123;&#125;</div><div class="line"></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onError</span><span class="params">(Throwable e)</span> </span>&#123;&#125;</div><div class="line"></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onNext</span><span class="params">(Object o)</span> </span>&#123;&#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>Observer和Subscriber不仅基本使用方式一样，实质上，在 RxJava 的 subscribe 过程中，Observer 也总是会先被转换成一个 Subscriber 再使用。所以如果你只想使用基本功能，选择 Observer 和 Subscriber 是完全一样的。对于使用者来说它们的区别主要有两点：</p>
<ul>
<li><p>onStart()<br>这是 Subscriber 增加的方法。它会在 subscribe 刚开始，而事件还未发送之前被调用，可以用于做一些准备工作，例如数据的清零或重置。这是一个可选方法，默认情况下它的实现为空。需要注意的是，如果对准备工作的线程有要求（例如弹出一个显示进度的对话框，这必须在主线程执行）， onStart() 就不适用了，因为它总是在 subscribe 所发生的线程被调用，而不能指定线程。要在指定的线程来做准备工作，可以使用 doOnSubscribe() 方法，具体可以在后面的文中看到。</p>
</li>
<li><p>unsubscribe()<br>这是 Subscriber 所实现的另一个接口 Subscription 的方法，用于取消订阅。在这个方法被调用后，Subscriber 将不再接收事件。一般在这个方法调用前，可以使用 isUnsubscribed() 先判断一下状态。 unsubscribe() 这个方法很重要，因为在 subscribe() 之后， Observable 会持有 Subscriber 的引用，这个引用如果不能及时被释放，将有内存泄露的风险。所以最好保持一个原则：在不再使用的时候尽快在合适的地方（例如 onPause() onStop() 等方法中）调用unsubscribe() 来解除引用关系，以避免内存泄露的发生。</p>
</li>
</ul>
<p>####2.1.2 创建 Observable<br>Observable 即被观察者，我更倾向于叫它“流”。因为任何事物都可以是流，而不限于数据。你可以对流做任何想做的处理，转换，过滤，合并等等。 RxJava 使用 create() 方法来创建一个 Observable ，并为它定义事件触发规则：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Observable&lt;String&gt; observable = Observable.create(<span class="keyword">new</span> Observable.OnSubscribe&lt;String&gt;() &#123;</div><div class="line"></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">(Subscriber&lt;? <span class="keyword">super</span> String&gt; subscriber)</span></span>&#123;</div><div class="line">subscriber.onNext(<span class="string">"Hello"</span>);</div><div class="line">&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>这里传入了一个 OnSubscribe 对象作为参数。OnSubscribe 会被存储在返回的 Observable 对象中，它的作用相当于一个计划表，定义要执行的事件，当 Observable 被订阅的时候，OnSubscribe 的 call() 方法会自动被调用，事件序列就会依照设定依次触发。</p>
<p><strong>创建Rx队列</strong><br>create() 方法是 RxJava 最基本的创造事件序列的方法。基于这个方法， RxJava 还提供了一些方法用来快捷创建事件队列，例如：</p>
<ul>
<li><p>just(T…): 将传入的参数依次发送出来。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Observable observableSequece = Observable.just(<span class="string">"Hello"</span>, <span class="string">"Hi"</span>, <span class="string">"Aloha"</span>);</div><div class="line"><span class="comment">// 将会依次调用：</span></div><div class="line"><span class="comment">// onNext("Hello");</span></div><div class="line"><span class="comment">// onNext("Hi");</span></div><div class="line"><span class="comment">// onNext("Aloha");</span></div><div class="line"><span class="comment">// onCompleted();</span></div></pre></td></tr></table></figure>
</li>
<li><p>from(T[]) / from(Iterable&lt;? extends T&gt;) : 将传入的数组或 Iterable 拆分成具体对象后，依次发送出来。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">String[] words = &#123;<span class="string">"Hello"</span>, <span class="string">"Hi"</span>, <span class="string">"Aloha"</span>&#125;;</div><div class="line">Observable observableFromSequece = Observable.from(words);</div><div class="line"><span class="comment">// 将会依次调用：</span></div><div class="line"><span class="comment">// onNext("Hello");</span></div><div class="line"><span class="comment">// onNext("Hi");</span></div><div class="line"><span class="comment">// onNext("Aloha");</span></div><div class="line"><span class="comment">// onCompleted();</span></div><div class="line">上面 just(T...) 的例子和 from(T[]) 的例子，都和之前的 create(OnSubscribe) 的例子是等价的。</div></pre></td></tr></table></figure>
</li>
</ul>
<p>####2.1.3 Subscribe (订阅)</p>
<p>通过subscribe() 将 Observable 和 Observer 联结起来，形成了一个完整的事件监听和回调：<br><figure class="highlight java"><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">observable.subscribe(observer);</div><div class="line"><span class="comment">// 或者：</span></div><div class="line">observable.subscribe(subscriber);</div></pre></td></tr></table></figure></p>
<p>当subscribe，onSubscribe就开始执行了。</p>
<p>###2.2 自定义回调 —— Action<br>有时你不需要关心所有的回调onNext，onComplete或onError，那么可以针对感兴趣的事件进行监听：RxJava 会自动根据定义创建出Subscriber 。形式如下：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Action1&lt;String&gt; onNextAction = <span class="keyword">new</span> Action1&lt;String&gt;() &#123;</div><div class="line"><span class="comment">// onNext()</span></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">(String s)</span> </span>&#123;</div><div class="line">Log.d(tag, s);</div><div class="line">&#125;</div><div class="line">&#125;;</div><div class="line">Action1&lt;Throwable&gt; onErrorAction = <span class="keyword">new</span> Action1&lt;Throwable&gt;() &#123;</div><div class="line"><span class="comment">// onError()</span></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">(Throwable throwable)</span> </span>&#123;</div><div class="line"><span class="comment">// Error handling</span></div><div class="line">&#125;</div><div class="line">&#125;;</div><div class="line">Action0 onCompletedAction = <span class="keyword">new</span> Action0() &#123;</div><div class="line"><span class="comment">// onCompleted()</span></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">()</span> </span>&#123;</div><div class="line">Log.d(tag, <span class="string">"completed"</span>);</div><div class="line">&#125;</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="comment">// 自动创建 Subscriber ，并使用 onNextAction 来定义onNext()</span></div><div class="line">observable.subscribe(onNextAction);</div><div class="line"></div><div class="line"><span class="comment">// 自动创建 Subscriber ，并使用 onNextAction 和 onErrorAction 来定义 onNext() 和 onError()</span></div><div class="line">observable.subscribe(onNextAction, onErrorAction);</div><div class="line"></div><div class="line"><span class="comment">// 自动创建 Subscriber ，并使用 onNextAction、 onErrorAction 和 onCompletedAction 来定义 onNext()、 onError() 和 onCompleted()</span></div><div class="line">observable.subscribe(onNextAction, onErrorAction, onCompletedAction);</div></pre></td></tr></table></figure></p>
<p><strong>Action0</strong><br>RxJava 的一个接口，它只有一个方法 <code>call()</code>，这个方法是无参无返回值的；由于 onCompleted() 方法也是无参无返回值的，因此 <code>Action0</code> 可以被当成一个包装对象，将 <code>onCompleted()</code> 的内容打包起来将自己作为一个参数传入 <code>subscribe()</code> 以实现不完整定义的回调。这样其实也可以看做将 <code>onCompleted()</code> 方法作为参数传进了<code>subscribe()</code>，相当于其他某些语言中的『闭包』。 </p>
<p><strong>Action1</strong><br>也是一个接口，它同样只有一个方法 call(T param)，这个方法也无返回值，但有一个参数；与 Action0 同理，由于 onNext(T obj) 和 onError(Throwable error) 也是单参数无返回值的，因此 Action1可以将 onNext(obj) 和 onError(error) 打包起来传入 subscribe() 以实现不完整定义的回调。事实上，虽然 Action0 和 Action1在 API 中使用最广泛，但 RxJava 是提供了多个 ActionX 形式的接口 (例如 Action2, Action3) 的，它们可以被用以包装不同的无返回值的方法。</p>
<p>##三 线程控制 —— Scheduler</p>
<p>在不指定线程的情况下， RxJava 遵循的是线程不变的原则，即：在哪个线程调用 subscribe()，就在哪个线程生产事件；在哪个线程生产事件，就在哪个线程消费事件。如果需要切换线程，就需要用到 Scheduler （调度器）。</p>
<p>###3.1 Scheduler API </p>
<p>###3.1.1 Scheduler<br>在RxJava 中，Scheduler —— 调度器，相当于线程控制器，通过它可以指定每一段代码应该运行在什么样的线程。RxJava 已经内置了几种Scheduler ，它们已经适合大多数的使用场景：</p>
<ul>
<li><p>Schedulers.immediate()<br>相当于不指定线程，直接在当前线程运行，这是默认的 Scheduler。</p>
</li>
<li><p>Schedulers.newThread():<br>总是启用新线程，并在新线程执行操作。</p>
</li>
<li><p>Schedulers.io()<br>I/O 操作（读写文件、读写数据库、网络信息交互等）所使用的 Scheduler。行为模式和 newThread() 差不多，区别在于 io() 的内部实现是用一个无数量上限的线程池，可以重用空闲的线程，因此多数情况下 io() 比 newThread() 更有效率。不要把计算工作放在 io() 中，可以避免创建不必要的线程。</p>
</li>
<li><p>Schedulers.computation()<br>计算所使用的 Scheduler。这个计算指的是 CPU 密集型计算，即不会被 I/O 等操作限制性能的操作，例如图形的计算。这个 Scheduler 使用的固定的线程池，大小为 CPU 核数。不要把 I/O 操作放在 computation() 中，否则 I/O 操作的等待时间会浪费 CPU。</p>
</li>
<li><p>AndroidSchedulers.mainThread()<br>Android 专用的scheduler ，它指定操作在 Android 主线程运行。</p>
</li>
</ul>
<p>###3.1.2 线程切换<br>可以通过 subscribeOn() 和 observeOn() 两个方法来对线程进行控制了。</p>
<ul>
<li><p>subscribeOn()<br>指定 subscribe() 所发生的线程，即 Observable.OnSubscribe 被激活时所处的线程。或者叫做事件产生的线程。</p>
</li>
<li><p>observeOn()<br>指定 Subscriber 所运行在的线程。看名字，observeOn：观察者所在的线程。或者叫做事件消费的线程。</p>
</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Observable.just(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>)</div><div class="line">.subscribeOn(Schedulers.io()) <span class="comment">// 指定 subscribe() 发生在 IO 线程</span></div><div class="line">.observeOn(AndroidSchedulers.mainThread()) <span class="comment">// 指定 Subscriber 的回调发生在主线程</span></div><div class="line">.subscribe(<span class="keyword">new</span> Action1&lt;Integer&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">(Integer number)</span> </span>&#123;</div><div class="line">Log.d(tag, <span class="string">"number:"</span> + number);</div><div class="line">&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>上面这段代码中，由于 subscribeOn(Schedulers.io()) 的指定，被创建的事件的内容 1、2、3、4 将会在 IO 线程发出；而由于observeOn(AndroidScheculers.mainThread()) 的指定，因此 subscriber 数字的打印将发生在主线程 。事实上，这种在subscribe() 之前写上subscribeOn(Scheduler.io()) 和 observeOn(AndroidSchedulers.mainThread()) 的使用方式非常常见，它适用于多数的 『后台线程取数据，主线程显示』的程序策略。</p>
<p>那么，加载图片将会发生在 IO 线程，而设置图片则被设定在了主线程。这就意味着，即使加载图片耗费了几十甚至几百毫秒的时间，也不会造成丝毫界面的卡顿。</p>
<p>##四 操作符</p>
<p>你可以对流进行各种处理：过滤，链接，合并，转换等等。</p>
<p>###4.1 map变换<br>事件对象的直接变换，具体功能上面已经介绍过。它是 RxJava 最常用的变换。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Observable.just(<span class="string">"images/logo.png"</span>) <span class="comment">// 输入类型 String</span></div><div class="line">.map(<span class="keyword">new</span> Func1&lt;String, Bitmap&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> Bitmap <span class="title">call</span><span class="params">(String filePath)</span> </span>&#123; <span class="comment">// 参数类型 String</span></div><div class="line"><span class="keyword">return</span> getBitmapFromPath(filePath); <span class="comment">// 返回类型 Bitmap</span></div><div class="line">&#125;</div><div class="line">&#125;)</div><div class="line">.subscribe(<span class="keyword">new</span> Action1&lt;Bitmap&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">(Bitmap bitmap)</span> </span>&#123; <span class="comment">// 参数类型 Bitmap</span></div><div class="line">showBitmap(bitmap);</div><div class="line">&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>上面出现的Func1 和 Action1 非常相似，也是 RxJava 的一个接口，用于包装含有一个参数的方法。  </p>
<p><strong>FuncX 和ActionX 的区别</strong><br>FuncX 包装的是有返回值的方法。  </p>
<p>可以看到，map() 方法将参数中的 String 对象转换成一个 Bitmap 对象后返回，而在经过 map() 方法后，事件的参数类型也由 String转为了 Bitmap。可以看到在subscribe处理的Action的参数已经就是bitmap了。  </p>
<blockquote>
<p>Rx扩展(Rxjava,RxJs,RxScala)提供了一个用于创建，变换，连接，过滤任何流的函数库。不仅某个流可以用于另一个流的输入，多个流同样可以作为其它流的输入。你也可以合并两个流。如果你对某些事件感兴趣，也可以通过对一个流的过滤获得另一个目标流。也可以将一个流中的数据映射到一个新的数据流。</p>
</blockquote>
<p>###4.2 flatMap()<br>Observable.flatMap()接收一个Observable的输出作为输入，同时输出另外一个Observable。可以用于实现一对多的变换。  </p>
<p>这是一个很有用但非常难理解的变换，首先假设这么一种需求：假设有一个数据结构『学生』，现在需要打印出一组学生的名字。实现方式很简单：</p>
<p><strong>打印所有学生的name</strong><br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Student[] students = ...;</div><div class="line">Subscriber&lt;String&gt; subscriber = <span class="keyword">new</span> Subscriber&lt;String&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onNext</span><span class="params">(String name)</span> </span>&#123;</div><div class="line">Log.d(tag, name);</div><div class="line">&#125;</div><div class="line">...</div><div class="line">&#125;;</div><div class="line">Observable.from(students)</div><div class="line">.map(<span class="keyword">new</span> Func1&lt;Student, String&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> String <span class="title">call</span><span class="params">(Student student)</span> </span>&#123;</div><div class="line"><span class="keyword">return</span> student.getName();</div><div class="line">&#125;</div><div class="line">&#125;)</div><div class="line">.subscribe(subscriber);</div></pre></td></tr></table></figure></p>
<p><strong>打印所有学生的所有courseName</strong><br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Student[] students = ...;</div><div class="line">Subscriber&lt;Student&gt; subscriber = <span class="keyword">new</span> Subscriber&lt;Student&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onNext</span><span class="params">(Student student)</span> </span>&#123;</div><div class="line">List&lt;Course&gt; courses = student.getCourses();</div><div class="line"><span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">0</span>; i &lt; courses.size(); i++) &#123;</div><div class="line">Course course = courses.get(i);</div><div class="line">Log.d(tag, course.getName());</div><div class="line">&#125;</div><div class="line">&#125;</div><div class="line">...</div><div class="line">&#125;;</div><div class="line">Observable.from(students)</div><div class="line">.subscribe(subscriber);</div></pre></td></tr></table></figure></p>
<p>看上去实现了我们需要的功能，但是subscriber不该去做数据处理的工作，真正的工作应该只做响应。而数据处理应该放在Observable中，这时候就要引入flatMap：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Student[] students = ...;</div><div class="line">Subscriber&lt;Course&gt; subscriber = <span class="keyword">new</span> Subscriber&lt;Course&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onNext</span><span class="params">(Course course)</span> </span>&#123;</div><div class="line">Log.d(tag, course.getName());</div><div class="line">&#125;</div><div class="line">...</div><div class="line">&#125;;</div><div class="line">Observable.from(students)</div><div class="line">.flatMap(<span class="keyword">new</span> Func1&lt;Student, Observable&lt;Course&gt;&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> Observable&lt;Course&gt; <span class="title">call</span><span class="params">(Student student)</span> </span>&#123;</div><div class="line"><span class="keyword">return</span> Observable.from(student.getCourses());</div><div class="line">&#125;</div><div class="line">&#125;)</div><div class="line">.subscribe(subscriber);</div></pre></td></tr></table></figure>
<p>flatMap() 和 map() 有一个相同点：它也是把传入的参数转化之后返回另一个对象。但需要注意，和 map() 不同的是， flatMap() 中返回的是个 Observable 对象，并且这个 Observable 对象并不是被直接发送到了 Subscriber 的回调方法中。   </p>
<p><strong>flatMap() 的原理</strong>  </p>
<ol>
<li>使用传入的事件对象创建一个 Observable 对象  </li>
<li>并不发送这个 Observable，而是将它激活，于是它开始发送事件</li>
<li>每一个创建出来的 Observable 发送的事件，都被汇入同一个 Observable ，而这个 Observable 负责将这些事件统一交给 Subscriber 的回调方法。  </li>
</ol>
<p>这三个步骤，把事件拆成了两级，通过一组新创建的 Observable 将初始的对象『铺平』之后通过统一路径分发了下去。而这个『铺平』就是 flatMap() 所谓的 flat。</p>
<p>扩展：由于可以在嵌套的 Observable 中添加异步代码， flatMap() 也常用于嵌套的异步操作，例如嵌套的网络请求。示例代码（Retrofit + RxJava）：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">networkClient.token() <span class="comment">// 返回 Observable&lt;String&gt;，在订阅时请求 token，并在响应后发送 token</span></div><div class="line">.flatMap(<span class="keyword">new</span> Func1&lt;String, Observable&lt;Messages&gt;&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> Observable&lt;Messages&gt; <span class="title">call</span><span class="params">(String token)</span> </span>&#123;</div><div class="line"><span class="comment">// 返回 Observable&lt;Messages&gt;，在订阅时请求消息列表，并在响应后发送请求到的消息列表</span></div><div class="line"><span class="keyword">return</span> networkClient.messages();</div><div class="line">&#125;</div><div class="line">&#125;)</div><div class="line">.subscribe(<span class="keyword">new</span> Action1&lt;Messages&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">(Messages messages)</span> </span>&#123;</div><div class="line"><span class="comment">// 处理显示消息列表</span></div><div class="line">showMessages(messages);</div><div class="line">&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>传统的嵌套请求需要使用嵌套的 Callback 来实现。而通过 flatMap() ，可以把嵌套的请求写在一条链中，从而保持程序逻辑的清晰。</p>
<p>###4.3 其它操作符</p>
<ul>
<li><p>filter<br>过滤</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div 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">query(<span class="string">"Hello, world!"</span>)</div><div class="line">.flatMap(urls -&gt; Observable.from(urls))</div><div class="line">.flatMap(url -&gt; getTitle(url))</div><div class="line">.filter(title -&gt; title != <span class="keyword">null</span>)</div><div class="line">.subscribe(title -&gt; System.out.println(title));</div></pre></td></tr></table></figure>
</li>
<li><p>take()<br>输出最多指定数量的结果</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">query(<span class="string">"Hello, world!"</span>)</div><div class="line">.flatMap(urls -&gt; Observable.from(urls))</div><div class="line">.flatMap(url -&gt; getTitle(url))</div><div class="line">.filter(title -&gt; title != <span class="keyword">null</span>)</div><div class="line">.take(<span class="number">5</span>)</div><div class="line">.subscribe(title -&gt; System.out.println(title));</div></pre></td></tr></table></figure>
</li>
<li><p>doOnNext()<br>允许我们在每次输出一个元素之前做一些额外的事情，比如这里的保存标题。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">query(<span class="string">"Hello, world!"</span>)</div><div class="line">.flatMap(urls -&gt; Observable.from(urls))</div><div class="line">.flatMap(url -&gt; getTitle(url))</div><div class="line">.filter(title -&gt; title != <span class="keyword">null</span>)</div><div class="line">.take(<span class="number">5</span>)</div><div class="line">.doOnNext(title -&gt; saveTitle(title))</div><div class="line">.subscribe(title -&gt; System.out.println(title));</div></pre></td></tr></table></figure>
</li>
<li><p>merge<br>合并两个流  </p>
</li>
<li><p>combineLatest<br>关联两个流</p>
</li>
</ul>
<p>更多API可以参考：<a href="https://mcxiaoke.gitbooks.io/rxdocs/content/Intro.html" target="_blank" rel="external">Rx官方文档中文翻译</a>    </p>
<p>##五 RxAndroid<br>RxAndroid是RxJava的一个针对Android平台的扩展。它包含了一些能够简化Android开发的工具。</p>
<p><strong>AndroidSchedulers</strong><br>提供了针对Android的线程系统的调度器。</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">.subscribeOn(Schedulers.io())</div><div class="line">.observeOn(AndroidSchedulers.mainThread())</div><div class="line">.subscribe(bitmap -&gt; myImageView.setImageBitmap(bitmap));</div></pre></td></tr></table></figure>
<p><strong>AndroidObservable</strong><br>配合Android的生命周期<br>bindActivity()和bindFragment()方法默认使用AndroidSchedulers.mainThread()来执行观察者代码，这两个方法会在Activity或者Fragment结束的时候通知被观察者停止发出新的消息。<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">AndroidObservable.bindActivity(this, retrofitService.getImage(url))</div><div class="line">.subscribeOn(Schedulers.io())</div><div class="line">.subscribe(bitmap -&gt; myImageView.setImageBitmap(bitmap);</div></pre></td></tr></table></figure></p>
<p><strong>AndroidObservable.fromBroadcast()</strong><br>允许你创建一个类似BroadcastReceiver的Observable对象。下面的例子展示了如何在网络变化的时候被通知到：<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">IntentFilter filter = new IntentFilter(ConnectivityManager.CONNECTIVITY_ACTION);</div><div class="line">AndroidObservable.fromBroadcast(context, filter)</div><div class="line">.subscribe(intent -&gt; handleConnectivityChange(intent));</div></pre></td></tr></table></figure></p>
<p><strong>ViewObservable</strong><br>使用它可以给View添加了一些绑定。如果你想在每次点击view的时候都收到一个事件，可以使用ViewObservable.clicks()，或者你想监听TextView的内容变化，可以使用ViewObservable.text()。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">ViewObservable.clicks(mCardNameEditText, false)</div><div class="line">.subscribe(view -&gt; handleClick(view));</div></pre></td></tr></table></figure>
<p>##六 RxBinding</p>
<p>RxBinding 是 Jake Wharton 的一个开源库，它提供了一套在 Android 平台上的基于 RxJava 的 Binding API。所谓 Binding，就是类似设置 OnClickListener 、设置 TextWatcher 这样的注册绑定对象的 API。</p>
<p>举个设置点击监听的例子。使用 RxBinding ，可以把事件监听用这样的方法来设置：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Button button = ...;</div><div class="line">RxView.clickEvents(button) <span class="comment">// 以 Observable 形式来反馈点击事件</span></div><div class="line">.subscribe(<span class="keyword">new</span> Action1&lt;ViewClickEvent&gt;() &#123;</div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">call</span><span class="params">(ViewClickEvent event)</span> </span>&#123;</div><div class="line"><span class="comment">// Click handling</span></div><div class="line">&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>通过 RxBinding 把点击监听转换成 Observable 之后，就有了对它进行扩展的可能。扩展的方式有很多，根据需求而定。一个例子是前面提到过的 throttleFirst() ，用于去抖动，也就是消除手抖导致的快速连环点击：</p>
<figure class="highlight java"><table><tr><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">RxView.clickEvents(button)</div><div class="line">.throttleFirst(<span class="number">500</span>, TimeUnit.MILLISECONDS)</div><div class="line">.subscribe(clickAction);</div><div class="line">如果想对 RxBinding 有更多了解，可以去它的 GitHub 项目 下面看看。</div></pre></td></tr></table></figure>
<p>##七 这些你应该了解<br><strong>扩展Rx</strong><br>前面举的 Retrofit 和 RxBinding 的例子，是两个可以提供现成的 Observable 的库。而如果你有某些异步操作无法用这些库来自动生成 Observable，也完全可以自己写。例如数据库的读写、大图片的载入、文件压缩/解压等各种需要放在后台工作的耗时操作，都可以用 RxJava 来实现，有了之前几章的例子，这里应该不用再举例了。</p>
<p><strong>内存泄漏</strong><br>Observable持有Context导致的内存泄露<br>这个问题是因为创建subscription的时候，以某种方式持有了context的引用，尤其是当你和view交互的时候，这太容易发生！如果Observable没有及时结束，内存占用就会越来越大。 </p>
<p><strong>使用缓存，减少Observable的创建</strong><br>RxJava内置有缓存机制，这样你就可以对同一个Observable对象执行unsubscribe/resubscribe，却不用重复运行得到Observable的代码。cache() (或者 replay())会继续执行网络请求（甚至你调用了unsubscribe也不会停止）。这就是说你可以在Activity重新创建的时候从cache()的返回值中创建一个新的Observable对象。 </p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">Observable&lt;Photo&gt; request = service.getUserPhoto(id).cache();</div><div class="line">Subscription sub = request.subscribe(photo -&gt; handleUserPhoto(photo));</div><div class="line"></div><div class="line"><span class="comment">// ...When the Activity is being recreated...</span></div><div class="line">sub.unsubscribe();</div><div class="line"></div><div class="line"><span class="comment">// ...Once the Activity is recreated...</span></div><div class="line">request.subscribe(photo -&gt; handleUserPhoto(photo));</div></pre></td></tr></table></figure>
<p>注意，两次sub是使用的同一个缓存的请求。在哪里去存储请求的结果还是要你自己来做，和所有其他的生命周期相关的解决方案一样，必须在生命周期外的某个地方存储。（retained fragment或者单例等等）。</p>
<p><strong>及时取消订阅</strong><br>在生命周期的某个时刻及时取消订阅，释放对context的引用。一个常见的情景就是使用CompositeSubscription来持有所有的Subscriptions，然后在onDestroy()或者onDestroyView()里取消所有的订阅。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">private</span> CompositeSubscription mCompositeSubscription</div><div class="line">= <span class="keyword">new</span> CompositeSubscription();</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">doSomething</span><span class="params">()</span> </span>&#123;</div><div class="line">mCompositeSubscription.add(</div><div class="line">AndroidObservable.bindActivity(<span class="keyword">this</span>, Observable.just(<span class="string">"Hello, World!"</span>))</div><div class="line">.subscribe(s -&gt; System.out.println(s)));</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="meta">@Override</span></div><div class="line"><span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDestroy</span><span class="params">()</span> </span>&#123;</div><div class="line"><span class="keyword">super</span>.onDestroy();</div><div class="line"></div><div class="line">mCompositeSubscription.unsubscribe();</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>你可以在Activity/Fragment的基类里创建一个CompositeSubscription对象，在子类中使用它。</p>
<p>注意! 一旦你调用了 CompositeSubscription.unsubscribe()，这个CompositeSubscription对象就不可用了, 如果你还想使用CompositeSubscription，就必须在创建一个新的对象了。  </p>
<p>本文参考了<a href="http://weibo.com/rengwuxian?from=feed&amp;loc=at&amp;nick=%E6%89%94%E7%89%A9%E7%BA%BF" target="_blank" rel="external">@扔物线</a>的<a href="http://gank.io/post/560e15be2dca930e00da1083" target="_blank" rel="external">给 Android 开发者的 RxJava 详解</a>  和<a href="http://weibo.com/brucefromsdu?from=feed&amp;loc=at&amp;nick=hi%E5%A4%A7%E5%A4%B4%E9%AC%BChi" target="_blank" rel="external">@hi大头鬼</a>翻译的<a href="http://blog.csdn.net/lzyzsd/article/details/41833541" target="_blank" rel="external">深入浅出Rxjava</a>系列文章，一些内容直接copy，有些按照自己的方式梳理了一下。更详细的内容建议参看原文。</p>
<p>##资料<br><a href="http://reactivex.io/" target="_blank" rel="external">Rx官方网站</a><br><a href="http://reactivex.io/tutorials.html" target="_blank" rel="external">tutorials</a><br><a href="https://github.com/ReactiveX/RxJava/wiki" target="_blank" rel="external">RxJava Wiki</a><br><a href="https://github.com/ReactiveX/RxJava/wiki/How-To-Use-RxJava" target="_blank" rel="external">How-To-Use-RxJava</a><br><a href="https://github.com/ReactiveX" target="_blank" rel="external">Rx Github组织</a><br><a href="https://github.com/ReactiveX/RxJava" target="_blank" rel="external">RxJava Github</a><br><a href="https://twitter.com/ReactiveX" target="_blank" rel="external">Twitter</a>  </p>
<p><a href="https://github.com/lzyzsd/Awesome-RxJava" target="_blank" rel="external">Awesome－RxJava</a><br><a href="http://gank.io/post/560e15be2dca930e00da1083" target="_blank" rel="external">给 Android 开发者的 RxJava 详解</a><br><a href="https://mcxiaoke.gitbooks.io/rxdocs/content/Intro.html" target="_blank" rel="external">Rx官方文档中文翻译</a>    </p>
<p><a href="http://techblog.netflix.com/2013/02/rxjava-netflix-api.html" target="_blank" rel="external">Reactive Programming in the Netflix API with RxJava</a><br><a href="http://akarnokd.blogspot.hu/" target="_blank" rel="external">Advanced RxJava</a>  </p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;##一 Rx概念介绍&lt;br&gt;Reactive是一种编程思想&lt;br&gt;Reactive编程就是异步数据流的编程，基于事件的编程&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;一切皆流&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;一个流是将要发生的有序序列事件的一部分。&lt;br&gt;你可以创建任何事物的数据流。任何事物都可以是流：变量，用户输入，属性 ，缓存，数据结构等等&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/img/rx/btn_click_flow.png&quot; width=&quot;570&quot; height=&quot;400&quot;/&gt;&lt;/p&gt;
&lt;p&gt;它可以发出三种不同的事件：&lt;code&gt;value&lt;/code&gt;，&lt;code&gt;error&lt;/code&gt;或者&lt;code&gt;completed&lt;/code&gt;  &lt;/p&gt;
&lt;p&gt;流（Observable）是被观察的对象。对于流的监听被称作订阅。我们定义的函数被称作观察者。  &lt;/p&gt;
&lt;p&gt;Rx的思想基于观察者模式，但是它的功能，远远不止这些，Rx组织为不同的语言提供了Rx扩展(Rxjava,RxJs,RxScala)，它们提供了用于创建，变换，连接，过滤任何流的函数库。不仅某个流可以用于另一个流的输入，多个流同样可以作为其它流的输入。你也可以合并两个流。如果你对某些事件感兴趣，也可以通过对一个流的过滤获得另一个目标流。也可以将一个流中的数据映射到一个新的数据流。&lt;/p&gt;
    
    </summary>
    
      <category term="Rx" scheme="http://www.lightskystreet.com/categories/Rx/"/>
    
    
      <category term="Rx" scheme="http://www.lightskystreet.com/tags/Rx/"/>
    
  </entry>
  
  <entry>
    <title>译文Be Reactive</title>
    <link href="http://www.lightskystreet.com/2015/11/29/translate-be-reactive/"/>
    <id>http://www.lightskystreet.com/2015/11/29/translate-be-reactive/</id>
    <published>2015-11-28T16:00:00.000Z</published>
    <updated>2016-05-26T07:30:41.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文链接：<a href="http://colintheshots.com/blog/?p=85" target="_blank" rel="external">Be Reactive</a></p>
<p>我的<a href="http://colintheshots.com/blog/?p=37" target="_blank" rel="external">上一篇文章</a>涵盖了我的曾经通过Robospice，Retrofit，GSON，OkHttp和Picasso构建android的标准REST网络栈经验。这些对我做事的方式有了巨大的帮助，我一直在寻找这方面的问题。</p>
<p>最大的问题就是如何将多个请求和UI操作组合或者链接起来。不过这些大多数的线程问题都可以通过一个新的称为RxJava的library来解决。</p>
<p>Netfilx创建了RxJava来解决他们服务端的线程问题。它加入了曾在Scala，Haskell和其它语言中的一些反应式的原则。这种原则可以有效地避免“回调地狱”以及在不使用大范围变量的情况下解决线程代码中的大多数竞争问题。简直棒呆了！</p>
<p>不像一些函数式语言，理解RxJava不需要很高深的代数知识。这里有个50分钟的视频，是Netfilx的Ben Christenson对RxJava的解释。如果你有时间，赶紧看看吧。</p>
<a id="more"></a>
<h3 id=""><a href="#" class="headerlink" title=" "></a> </h3><p><a href="https://www.youtube.com/watch?v=_t06LRX0DV0" target="_blank" rel="external">Functional Reactive Programming with RxJava • Ben Christensen</a>  </p>
<h3 id="-1"><a href="#-1" class="headerlink" title=" "></a> </h3><p>也许你可能在等待这个视频的blog，或者嫌它太长直接跳过，没事啊，我并不会因此而失落。</p>
<p>大家称呼它为反应式是因为所有一切都是对事件作出反应。比如回调，反应式告诉JVM在未来某个确定事件发生的时候如何反应。</p>
<p>RxJava和反应式编程语言通常会对应用中的事件处理和组合提供一种解释性的方法。你需要理解的主要内容就是Observables。如果你了解Java，那么可以把Observable理解为一个“将来的迭代器”。如果不了解java的话，就把Observable看作一个描述将来可能发生的事件流对象吧。</p>
<p>可以把Observable看作一条河流。程序员经常把它描述为流。这些事件流只会顺流而下。当事件对象顺流而下的时候，你可以监视它们并决定做什么。</p>
<p>对于程序员来说，在流还未开始之前，你应该很明确的知道要让这些对象要做什么。你可以让RxJava忽略特定的对象。也可以给它们定一个超时时间。也可以让它们监测一些特定的对象，在这些对象出现并加入事件流之前一直等待着。你可以将流和你的关键内容绑定起来。</p>
<p>在反应式编程里一切皆流。一个string可以被当作字符流或字符串流，比如，网络请求的响应通常是对象流。即使你只期待一个事件，一个Observable流也会是最好的选择。</p>
<h2 id="-2"><a href="#-2" class="headerlink" title=" "></a> </h2><p>#状态变量会让代码产生坏味道，Observables会为你持有这些需要的状态</p>
<h2 id="-3"><a href="#-3" class="headerlink" title=" "></a> </h2><p>如果你看完这篇文章后认为Observable和标准Java中的Observer模式一样，那么我失败了。<br>和标准的Observer模式不一样，一个Observable能够允许你组合多个事件，过滤它们，从一种类型映射为另一种类型。在事件发生前，通过一种可解释的方式将它们链接起来。它做了这么多但却不会引入那些会导致坏味道的状态变量。</p>
<p>如果你没有使用这些反应式扩展，那么你就不能够完全发挥RxJava的强大性。这些扩展可以将你应用中的“回调地狱”完全消灭。</p>
<p>你可能需要将两个网络请求链接起来。在典型的Java程序里。可能会在一个网络请求的结果回调里去初始化下一个同样会产生回调的请求。按照逻辑的不同，为了将error转换为一种漂亮的方式，每个请求都会有自己的错误回调。在每一个回调中，决定如何到达某个函数的方式是保存一个状态变量，这些变量将会花费内存，同时也会增加了bug的可能性。</p>
<p>反应式编程要求非常少的变量，因为在程序状态发生之前，你会将这种声明放入到将会被触发的操作中。只有程序按照你指定的代码逻辑执行时，它才会执行。这样说吧，你只希望响应那些匹配了特定值或者模式的事件。你可以让Observable过滤那些事件，然后订阅这个已具备过滤能力的observable。记住，一个observable只是一个简单的事件流——将来被迭代的集合。</p>
<p>Observable可以使“hot”或者“cold”的。一个“hot”observable不管有没有订阅者都会分发事件。无论observable遇到什么条件，每一个订阅线程都可以执行你为订阅者定义的事件。一个“cold”observable什么也不会做，也不会有任何影响，直到有订阅者订阅它。</p>
<p>一个observable可以是已完成的。当最后一个订阅者解除订阅或者没有异常处理的错误发生的时候，一个observable通常会结束。一个结束状态的observable会执行定义的结束代码并释放内存。</p>
<p>理解RxJava和反应式扩展的关键点是它不是完全的函数式编程。它的目标就是让线程更智能，并且也做到了（这一点不是很苟同）。最可能的缺点是增大了内存泄漏的可能性。直接将近乎单独的函数合并到代码中是不太合理的，但对于那些希望更快，更简洁，更简单的应用程序员来说，相对于那种传统的“callback hell”状态驱动的模式来说，反应式扩展的解决方案是很棒的。它不是由纯粹主义者设计的。</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文链接：&lt;a href=&quot;http://colintheshots.com/blog/?p=85&quot;&gt;Be Reactive&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;我的&lt;a href=&quot;http://colintheshots.com/blog/?p=37&quot;&gt;上一篇文章&lt;/a&gt;涵盖了我的曾经通过Robospice，Retrofit，GSON，OkHttp和Picasso构建android的标准REST网络栈经验。这些对我做事的方式有了巨大的帮助，我一直在寻找这方面的问题。&lt;/p&gt;
&lt;p&gt;最大的问题就是如何将多个请求和UI操作组合或者链接起来。不过这些大多数的线程问题都可以通过一个新的称为RxJava的library来解决。&lt;/p&gt;
&lt;p&gt;Netfilx创建了RxJava来解决他们服务端的线程问题。它加入了曾在Scala，Haskell和其它语言中的一些反应式的原则。这种原则可以有效地避免“回调地狱”以及在不使用大范围变量的情况下解决线程代码中的大多数竞争问题。简直棒呆了！&lt;/p&gt;
&lt;p&gt;不像一些函数式语言，理解RxJava不需要很高深的代数知识。这里有个50分钟的视频，是Netfilx的Ben Christenson对RxJava的解释。如果你有时间，赶紧看看吧。&lt;/p&gt;
    
    </summary>
    
      <category term="Reactive" scheme="http://www.lightskystreet.com/categories/Reactive/"/>
    
    
      <category term="Rexactive" scheme="http://www.lightskystreet.com/tags/Rexactive/"/>
    
  </entry>
  
  <entry>
    <title>译文 The introduction to Reactive Programming you&#39;ve been missing</title>
    <link href="http://www.lightskystreet.com/2015/11/29/translate-introduction-to-reactive/"/>
    <id>http://www.lightskystreet.com/2015/11/29/translate-introduction-to-reactive/</id>
    <published>2015-11-28T16:00:00.000Z</published>
    <updated>2016-05-26T07:38:08.000Z</updated>
    
    <content type="html"><![CDATA[<p>原文 <a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754" target="_blank" rel="external">The introduction to Reactive Programming you’ve been missing</a> </p>
<p>Reactive编程就是异步数据流的编程。</p>
<p>总的来说，这里没有什么新东西。事件总线或者典型的click事件就是一种异步事件流，你可以观察它们并做出一些响应。Reactive就是基于这种理论。你可以创建任何事物的数据流。流的代价很低而且很普遍，任何事物都可以是流：变量，用户输入，属性 ，缓存，数据结构等等。比如Twitter的消息源可以看作是相应点击事件的数据流。你可以监听它们并作出相应的响应。</p>
<p>除此之外，它们提供了一个用于连接，创建，过滤任何流的函数库。不仅某个流可以用于另一个流的输入，多个流同样可以作为其它流的输入。你也可以合并两个流。如果你对某些事件感兴趣，也可以通过对一个流的过滤获得另一个目标流。也可以将一个流中的数据映射到一个新的数据流。</p>
<p>可以看到流对Reactive来说有多重要，我们仔细来看一下它们，以我们熟悉的按钮点击事件流开始：</p>
<a id="more"></a>
<p><img src="/img/rx/btn_click_flow.png" width="570" height="400"></p>
<p>一个流是将要发生的有序序列事件的一部分。它可以发出三种不同的事件：value，error或者completed。假想下“completed”事件的场景，比如window或者view中的关闭按钮点击的时候。</p>
<p>我们所谈到的事件只会是异步的，通常会定义三个要执行的函数，一个在值输入的时候发生，一个在错误发生时执行，以及一个事件完成时执行。有时候后面两个会被省略，你只需要定义输入值的处理函数，对于流的监听被称作订阅。我们定义的函数被称作观察者。流（或者Observable）是被观察的对象。在观察者模式中写的很明确:<a href="https://en.wikipedia.org/wiki/Observer_pattern" target="_blank" rel="external">Observer Design Pattern</a>.</p>
<p>一种转换的方式是通过ASCII图来表示，在本教程的多处地方我们都会用到：</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">--a---b-c---d---X---|-&gt;</div><div class="line"></div><div class="line">a, b, c, d 代表分发的值</div><div class="line">X 代表错误</div><div class="line">| 代表事件完成信号</div><div class="line">---&gt; 代表时间线</div></pre></td></tr></table></figure>
<p>既然我们对一些概念比较熟悉了，那咱么就尝试点新的东西：我们将创建一个新的点击事件流，该事件流由原始的点击事件流演化而来。</p>
<!--more-->
<p>首先，我们创建一个计数流，用于计算一个button点击了多少次。通常在Reactive库中，每一个流都附带很多函数，比如map，filter，scan等等。当你调用其中任意一个函数，比如clickStream.map(f)，会基于当前的click流返回个一个新的流。但不管怎样，它都不会修改原始的click流。这种特性称作不变性，这种不变性会把Reactive流组织在一起。这样做可以实现链式调用，比如：clickStream.map(f).scan(g)：</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">  clickStream: ---c----c--c----c------c--&gt;</div><div class="line">               vvvvv map(c becomes 1) vvvv</div><div class="line">               ---1----1--1----1------1--&gt;</div><div class="line">               vvvvvvvvv scan(+) vvvvvvvvv</div><div class="line">counterStream: ---1----2--3----4------5--&gt;</div></pre></td></tr></table></figure>
<p>map(f) 函数替换了函数 f 分发的每一个值（到一个新的流中）。在这个例子中，我们将数字1映射到了每一个click事件上。scan(g)函数叠加了流上的所有值，通过 x = g(accumulated, current)得到x，g代表示例中的”+”函数。然后，counterStream会分发点击事件发生的总数。</p>
<p>为了展示Reactive的强大，假设我们需要一个双击事件流。为了看起来更有趣，假设我们的新流能够考虑到类似双击多次的点击事件。考虑下如果通过传统的，不可避免的状态性方式来实现它。我打赌那样的实现方式看起来一定不爽，并且引入了一些用于保持状态和时间间隔的变量。</p>
<p>在Reactive中实现起来是非常简洁的。这个逻辑只需要4行代码就可搞定。现在我们先暂时忽略代码。让我们来用图表来思考，不管你是初级还是专家，使用图标来思考都是最好的理解和构建流的方式。</p>
<p><img src="/img/rx/btn_double_click_flow.png" width="570" height="760"></p>
<p>灰色部分的函数将一个流转换成了另一个流。首先我们将列表中的clicks事件的间隔为250毫秒的事件计算并归类。先不考急着理解细节的实现，到现在我们只是展示了Reactive的使用。我们得到的结果是一个列表的流，从这个列表流中我们可以运用map()将每一个list中的length映射成一个integer。最终我们通过filter( x &gt;= 2 )函数过滤掉integer ＝ 1的值。结果有3个操作满足我们的意图流。然后我们可以通过subcribe订阅它并作出期望的响应。</p>
<p>希望你喜欢这种形象的讲解方式。这个示例只是一个简单的引子，你可以将这种方式应用到任何种类的流中，比如在一个API响应的流中，或者其它可用的函数。</p>
<h2 id=""><a href="#" class="headerlink" title=" "></a> </h2><p>#为什么我应该考虑采用Reactive 编程？<br>反应式编程提高了代码抽象的层次，你可以聚焦于定义了业务逻辑的事件依赖，而不是被大量的实现细节所困扰。Reactive编程会让代码更简洁。</p>
<p>在如今的多UI事件与数据事件高度交互的webapp和移动app中，这种好处会更加的明显。10年前，与web界面的交互是通过向后台提交长表单并在前端进行简单的渲染。随着演变，App的响应更加实时：修改一个单独的表单字段可以自动的触发后台的保存，某些用户收藏的内容可以及时反映给其他相关的用户。</p>
<p>如今的app拥有各种各样用于增强交互体验的实时事件。我们需要处理这种情景的工具，反应式编程就是很好的解决方案。</p>
<h2 id="-1"><a href="#-1" class="headerlink" title=" "></a> </h2><p>#以RP的方式思考</p>
<p>让我们来点干货。通过真实的例子一步步的探索如何以PR的方式思考问题。没有捏造的例子，没有模糊不清的概念。在教程的结尾我们会产出真实的代码，同时了解每一步的操作为什么这么做。</p>
<p>我选用了JS和<a href="https://github.com/Reactive-Extensions/RxJS" target="_blank" rel="external">RxJs</a>作为工具。原因是JS是如今最常见的语言。并且<a href="http://reactivex.io/" target="_blank" rel="external">Rx library大家庭</a>可以广泛的适用于多种语言和平台 (.NET, Java, Scala, Clojure, JavaScript, Ruby, Python, C++, Objective-C/Cocoa, Groovy, etc)，因此不管你使用什么工具，你都可以从下面的教程中受益。</p>
<h2 id="-2"><a href="#-2" class="headerlink" title=" "></a> </h2><p>#实现一个“Who to follow”建议模块</p>
<p>在Twitter中，有一个模块提供了你可能感兴趣的建议用户</p>
<p><img src="/img/rx/twitter_who_to_follow.png" width="500" height="680"></p>
<p>我们将要关注该模块以下核心特性：</p>
<ul>
<li>当启动的时候，从API加载用户数据并展示3条建议</li>
<li>点击“刷新”，更新三条新的用户建议</li>
<li>点击“x”按钮，清理当前展示的那条用户建议</li>
<li>每一行展示的用户头像和相应的twitter链接</li>
</ul>
<p>没有选择其它的特性和按钮是因为它们和我们的目的关系不是很紧密。但Twitter最近向未授权的第三方关闭了API，这里通过Github的following poeple的API来代替。这里是获取Github 用户的 <a href="https://developer.github.com/v3/users/#get-all-users" target="_blank" rel="external">API</a>  </p>
<p>完整的代码已经有了: <a href="http://jsfiddle.net/staltz/8jFJH/48/" target="_blank" rel="external">http://jsfiddle.net/staltz/8jFJH/48/</a></p>
<h2 id="-3"><a href="#-3" class="headerlink" title=" "></a> </h2><p>#请求和响应<br>如何使用Rx解决问题？首先你得明白，“一切皆流”，这是Rx的核心理念。回到一开始提到的特性：“启动的时候从API加载3个用户数据”。这个很简单，简单来说就三步：请求，获取结果，渲染结果。首先我们把请求作为一个流。乍一看感觉有点手足无措，但我们可以先从最基础的开始：</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">--a------|-&gt;</div><div class="line"></div><div class="line">a 代表  string &apos;https://api.github.com/users&apos;</div></pre></td></tr></table></figure>
<p>这个URL流是我们要去请求的。不管请求何时发生，它会告诉我们两件事：when和what。“when”当事件被分发时请求执行的时间。“what”就是请求要分发的值：一个包含URL的string。</p>
<p>在Rx中创建这样只有一个值的流非常简单。在官方的术语中，流就是“Observable”，可以被观察的，但是我觉得这个名字很傻瓜（不够形象），所以我把它称作stream。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var requestStream = Rx.Observable.just(<span class="string">'https://api.github.com/users'</span>);</div></pre></td></tr></table></figure>
<p>现在，这里只是一个string流，还没有任何其它的操作。因此当值分发的时候，我们需要做一些处理，这些处理会被订阅到流中。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">requestStream.subscribe(function(requestUrl) &#123;</div><div class="line">  <span class="comment">// execute the request</span></div><div class="line">  jQuery.getJSON(requestUrl, function(responseData) &#123;</div><div class="line">    <span class="comment">// ...</span></div><div class="line">  &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>注意到我们使用了一个jQuery Ajax回调处理这个异步请求操作。咦，Rx不就是处理异步数据流的么，难道请求的响应不能够看作是一个未来某个时间到达的包含数据的流么？哇，概念有了，接下来试试：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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">requestStream.subscribe(function(requestUrl) &#123;</div><div class="line">  <span class="comment">// execute the request</span></div><div class="line">  var responseStream = Rx.Observable.create(function (observer) &#123;</div><div class="line">    jQuery.getJSON(requestUrl)</div><div class="line">    .done(function(response) &#123; </div><div class="line">        observer.onNext(response); </div><div class="line">    &#125;)</div><div class="line">    .fail(function(jqXHR, status, error) &#123; </div><div class="line">        observer.onError(error); </div><div class="line">    &#125;)</div><div class="line">    .always(function() &#123;</div><div class="line">        observer.onCompleted(); </div><div class="line">    &#125;);</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  responseStream.subscribe(function(response) &#123;</div><div class="line">    <span class="comment">// do something with the response</span></div><div class="line">  &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>Rx.Observable.create() 所做的就是创建一个自定义的流，这个流明确的把自己的数据处理(onNext())和错误处理(onError())告知了每一个观察者（或者叫“订阅者”）。我们做的仅仅就是包装jQuery Ajax预期发生的事件。顺便问下，这样做是否意味着一个Promise（这里对Promise不做翻译，是因为对JS中的概念不熟，暂且理解为“期望”吧）就是一个Observable？</p>
<p>是的！<br>Observable就是Promise++。在Rx中，你可以通过<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 stream = Rx.Observable.fromPromise(promise)</div></pre></td></tr></table></figure></p>
<p>简单的将一个Promis转换为一个Observable。唯一不同的区别就是Observables不是 Promises/A+，但概念并不冲突。一个Promise就是一个简单的带有分发值的Observable。但Rx流允许很多返回值，在这一点上，Rx要超过promises。</p>
<p>真是太棒了。说明Observable至少和Promises一样强大。如果你对Promises很赞赏，那么你可以关注Rx Observables都适用于哪些部分。</p>
<p>让我们回到之前的例子。你可能早就注意到，我们在另一个流中调用了subscribe(),一个被称作回调地狱的处理。当然，responseStream的创建依赖于requestStream。正如你之前看到的那样，Rx拥有简单的机制用于转换和创建流自身之外的流，这也是我们将要做的。</p>
<p>到目前我们所知道的一个基础函数就只有 map(f) ，它获取了stream A的每一个值。通过应用 f( ) ，可以在stream B上产生一个值。如果要把这样的处理应用于我们的请求和响应流，我们可以把请求的URLs转换为响应的Promises（可以假想为流）。</p>
<figure class="highlight java"><table><tr><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 responseMetastream = requestStream</div><div class="line">  .map(function(requestUrl) &#123;</div><div class="line">    <span class="keyword">return</span> Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p>接着我们将会创建一个称作“metstream”的东西：流中的一种，别慌张啊，一个metastream就是一个steam，只是它的每一个分发值是另一个流。你可以把它看作指针：每一个分发值就是一个指向其它stream的指针。在我们的例子中，每一个请求URL被映射到一个指向其它包含了响应的流指针。</p>
<p><img src="/img/rx/meta_stream1.png" width="480" height="660">  </p>
<p>响应的metastream可能会让人有点迷惑，看起来对我们一点帮助也没有。我们只是期望一个简单的响应stream，stream中每一个值是一个JSON对象，而不是一个Json对象的“Promise”。让我们来认识下Flatmap吧，Flatmap是map()的一种，它能够会“铺平“一个metastream，从干流上把流分发到每一个分支上。</p>
<p>Flatmap不是一个修复，metastream当然也不是一个bug。它们只是Rx中处理异步流的工具。</p>
<figure class="highlight java"><table><tr><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 responseStream = requestStream</div><div class="line">  .flatMap(function(requestUrl) &#123;</div><div class="line">    <span class="keyword">return</span> Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p><img src="/img/rx/meta_stream2.png" width="570" height="660">  </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">requestStream:  --a-----b--c------------|-&gt;</div><div class="line"></div><div class="line">responseStream: -----A--------B-----C---|-&gt;</div><div class="line"></div><div class="line">小写字母是请求，大写字母是响应</div></pre></td></tr></table></figure></p>
<p>现在我们拥有了一个响应流，可以渲染数据了：<br><figure class="highlight java"><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">responseStream.subscribe(function(response) &#123;</div><div class="line">  <span class="comment">// render `response` to the DOM however you wish</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>把所有的代码放一块是这样的：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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 requestStream = Rx.Observable.just(<span class="string">'https://api.github.com/users'</span>);</div><div class="line"></div><div class="line">var responseStream = requestStream</div><div class="line">  .flatMap(function(requestUrl) &#123;</div><div class="line">    <span class="keyword">return</span> Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">responseStream.subscribe(function(response) &#123;</div><div class="line">  <span class="comment">// render `response` to the DOM however you wish</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h2 id="-4"><a href="#-4" class="headerlink" title=" "></a> </h2><p>#刷新按钮部分<br>我还没注意到相应的Json列表中将然有100个用户数据。API只允许我们指定page offset，而不是page size，因此我们只使用3条数据对象，剩下的97条都浪费了。我们可以暂时忽略这部分，因为之后我们会缓存这个response。</p>
<p>每次刷新按钮点击的时候，请求流会分发一个新的URL，因此我们会得到一个新的response。我们需要做两件事：一个刷新按钮的click事件流（一切皆流），我们需要将请求流转换为一个依赖于刷新事件流的流。RxJs提供了从事件监听者创建Observable的工具。</p>
<figure class="highlight java"><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 refreshButton = document.querySelector(<span class="string">'.refresh'</span>);</div><div class="line">var refreshClickStream = Rx.Observable.fromEvent(refreshButton, <span class="string">'click'</span>);</div></pre></td></tr></table></figure>
<p>由于刷新事件自己不含有任何API URL，我们需要将每一个click事件映射成一个实际的URL。现在我们把请求流转变成每一次都带有任意offset参数API的刷新点击流。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div 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 requestStream = refreshClickStream</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*<span class="number">500</span>);</div><div class="line">    <span class="keyword">return</span> <span class="string">'https://api.github.com/users?since='</span> + randomOffset;</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p>因为我比较菜而且没有进行自测，我把之前要做的特性搞砸了。现在请求在启动之前不会发生，而只有点击刷新按钮的时候才发生。现在我需要满足这两种行为 ：刷新按钮点击的时候和web界面打开的时候。</p>
<p>我们知道如何从上面两种情况分别构建一个独立的流：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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 requestOnRefreshStream = refreshClickStream</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*<span class="number">500</span>);</div><div class="line">    <span class="keyword">return</span> <span class="string">'https://api.github.com/users?since='</span> + randomOffset;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">var startupRequestStream = Rx.Observable.just(<span class="string">'https://api.github.com/users'</span>);</div></pre></td></tr></table></figure>
<p>但是我们如何将它们“merge”成一个流呢？没错，就是merge方法，下面的图标中解释merge所做的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">stream A: ---a--------e-----o-----&gt;</div><div class="line">stream B: -----B---C-----D--------&gt;</div><div class="line">          vvvvvvvvv merge vvvvvvvvv</div><div class="line">          ---a-B---C--e--D--o-----&gt;</div></pre></td></tr></table></figure>
<p>现在应该很简单了：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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 requestOnRefreshStream = refreshClickStream</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*<span class="number">500</span>);</div><div class="line">    <span class="keyword">return</span> <span class="string">'https://api.github.com/users?since='</span> + randomOffset;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">var startupRequestStream = Rx.Observable.just(<span class="string">'https://api.github.com/users'</span>);</div><div class="line"></div><div class="line">var requestStream = Rx.Observable.merge(</div><div class="line">  requestOnRefreshStream, startupRequestStream</div><div class="line">);</div></pre></td></tr></table></figure></p>
<p>一种更简洁，没有中间流的方式：  </p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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 requestStream = refreshClickStream</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*<span class="number">500</span>);</div><div class="line">    <span class="keyword">return</span> <span class="string">'https://api.github.com/users?since='</span> + randomOffset;</div><div class="line">  &#125;)</div><div class="line">  .merge(Rx.Observable.just(<span class="string">'https://api.github.com/users'</span>));</div></pre></td></tr></table></figure>
<p>更简短，可读性更强的方式：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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 requestStream = refreshClickStream</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*<span class="number">500</span>);</div><div class="line">    <span class="keyword">return</span> <span class="string">'https://api.github.com/users?since='</span> + randomOffset;</div><div class="line">  &#125;)</div><div class="line">  .startWith(<span class="string">'https://api.github.com/users'</span>);</div></pre></td></tr></table></figure></p>
<p>startWith()函数的作用正如你想的那样。不管输入流是怎样的，应用了startWith(x)的输出流结果都会以X开头。但是我还不够 <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" target="_blank" rel="external">DRY</a> （Don’t Repeate Yourself），我这里重复了API string啊。一种改善的方式是通过移除refreshClickStream附近的startWith()方法，在方法开始的时候模拟一个刷新按钮的点击。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div 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 requestStream = refreshClickStream.startWith(<span class="string">'startup click'</span>)</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*<span class="number">500</span>);</div><div class="line">    <span class="keyword">return</span> <span class="string">'https://api.github.com/users?since='</span> + randomOffset;</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p>很棒啊。如果你回过头来看我之前说的没有自测的部分，你可以看到后一种方式的唯一区别就是添加了startWith()方法。</p>
<h2 id="-5"><a href="#-5" class="headerlink" title=" "></a> </h2><p>#通过streams构建3条建议的模型<br>直到现在，在响应流的subscribe()方法的渲染步骤中，我们只接触到了一个suggestion UI元素。现在的刷新按钮，存在一个问题：如果尽可能快的点击“refresh”，当前的3条建议还没来得及被清除掉，新的建议就已经会伴随新的请求结果出现了，但是为了让UI看起来更漂亮，当刷新的点击事件发生的时候，我们需要清理当前的建议。<br><figure class="highlight java"><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">refreshClickStream.subscribe(function() &#123;</div><div class="line">  <span class="comment">// clear the 3 suggestion DOM elements</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>别急，其实这么做是不对的。因为现在有两个订阅者影响了suggesion节点元素（另一个通过responseStream.subscribe()订阅），并且看起来不那么的<a href="https://en.wikipedia.org/wiki/Separation_of_concerns" target="_blank" rel="external">Separation of concerns</a>（根据作者的意图来看，这里的意思是尽量让事件更独立和明确，这里把影响suggestion的两个订阅者分离开） 。还记得Reactive的准则么？  </p>
<p><strong>一切皆流</strong>  </p>
<p><img src="/img/rx/every_thing_stream.png" width="570" height="550">  </p>
<p>我们把一条建议模型化为一个流，在这里每一个分发值是一个包含建议数据的JSON对象。我们将3条建议分开，下面是第一条建议流：</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">var suggestion1Stream = responseStream</div><div class="line">  .map(function(listUsers) &#123;</div><div class="line">    // get one random user from the list</div><div class="line">    return listUsers[Math.floor(Math.random()*listUsers.length)];</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p>建议2，建议3的流可以简单的直接从上面copy。这不能称作DRY，但它能够让我们的教程示例更简单，当然考虑如何避免这样的重复操作会是一个不错的实践。</p>
<p>要在response流的subscribe方法中进行渲染操作可以这样：<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">suggestion1Stream.subscribe(function(suggestion) &#123;</div><div class="line">  // render the 1st suggestion to the DOM</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>回到之前的需求：“点击刷新，删除建议”，我们可以将点击刷新简单的映射成null数据的情况，并加入到suggestion1Stream中：<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 suggestion1Stream = responseStream</div><div class="line">  .map(function(listUsers) &#123;</div><div class="line">    // get one random user from the list</div><div class="line">    return listUsers[Math.floor(Math.random()*listUsers.length)];</div><div class="line">  &#125;)</div><div class="line">  .merge(</div><div class="line">    refreshClickStream.map(function()&#123; return null; &#125;)</div><div class="line">  );</div></pre></td></tr></table></figure></p>
<p>渲染的时候，可以把null作为没有数据处理，因此会隐藏对应的UI元素：<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">suggestion1Stream.subscribe(function(suggestion) &#123;</div><div class="line">  if (suggestion === null) &#123;</div><div class="line">    // hide the first suggestion DOM element</div><div class="line">  &#125;</div><div class="line">  else &#123;</div><div class="line">    // show the first suggestion DOM element</div><div class="line">    // and render the data</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><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">refreshClickStream: ----------o--------o----&gt;</div><div class="line">     requestStream: -r--------r--------r----&gt;</div><div class="line">    responseStream: ----R---------R------R--&gt;</div><div class="line"> suggestion1Stream: ----s-----N---s----N-s--&gt;</div><div class="line"> suggestion2Stream: ----q-----N---q----N-q--&gt;</div><div class="line"></div><div class="line"> suggestion3Stream: ----t-----N---t----N-t--&gt;</div><div class="line"></div><div class="line">N代表null</div></pre></td></tr></table></figure></p>
<p>有了上面的做法，我们同样可以在开始的时候渲染suggestion为empty的情况。通过添加startWith(null)到建议流中来实现：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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 suggestion1Stream = responseStream</div><div class="line">  .map(function(listUsers) &#123;</div><div class="line">    <span class="comment">// get one random user from the list</span></div><div class="line">    <span class="keyword">return</span> listUsers[Math.floor(Math.random()*listUsers.length)];</div><div class="line">  &#125;)</div><div class="line">  .merge(</div><div class="line">    refreshClickStream.map(function()&#123; <span class="keyword">return</span> <span class="keyword">null</span>; &#125;)</div><div class="line">  )</div><div class="line">  .startWith(<span class="keyword">null</span>);</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">refreshClickStream: ----------o---------o----&gt;</div><div class="line">     requestStream: -r--------r---------r----&gt;</div><div class="line">    responseStream: ----R----------R------R--&gt;</div><div class="line"> suggestion1Stream: -N--s-----N----s----N-s--&gt;</div><div class="line"> suggestion2Stream: -N--q-----N----q----N-q--&gt;</div><div class="line"></div><div class="line"> suggestion3Stream: -N--t-----N----t----N-t--&gt;</div></pre></td></tr></table></figure></p>
<h2 id="-6"><a href="#-6" class="headerlink" title=" "></a> </h2><p>#关闭建议并使用请求缓存<br>还有一个需要待完成的特性：每一个建议都会有自己的关闭按钮，并且可以在相同地方加载另一条数据。乍一看，你可能认为当任何关闭按钮点击的时候，去创建一个新的请求的方式就能够满足需求了：<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 close1Button = document.querySelector(&apos;.close1&apos;);</div><div class="line">var close1ClickStream = Rx.Observable.fromEvent(close1Button, &apos;click&apos;);</div><div class="line">// and the same for close2Button and close3Button</div><div class="line"></div><div class="line">var requestStream = refreshClickStream.startWith(&apos;startup click&apos;)</div><div class="line">  .merge(close1ClickStream) // we added this</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*500);</div><div class="line">    return &apos;https://api.github.com/users?since=&apos; + randomOffset;</div><div class="line">  &#125;);</div></pre></td></tr></table></figure></p>
<p>然而这样并不能满足我们的需求，它会关闭并加载所有的建议，而不仅仅加载我们点击的那一条。有几种不同的方案解决这个问题，为了变得有趣些，我们可以通过重用之前的请求结果来解决。API的请求结果的大小是100条用户，而我们只需要三条，因此有大量的新的可用数据，而不需要再次请求。</p>
<p>我们再以流的方式思考下。当第一个按钮点击事件发生时候，我们希望从responseStream最近一次分发的response列表中任意获取一条user数据，比如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">    requestStream: --r---------------&gt;</div><div class="line">   responseStream: ------R-----------&gt;</div><div class="line">close1ClickStream: ------------c-----&gt;</div><div class="line">suggestion1Stream: ------s-----s-----&gt;</div></pre></td></tr></table></figure>
<p>在Rx中有一个叫combineLatest的组合函数，看起来正是我们需要的。它将A和B两个流作为输入，并且不管何时，只要其中一个流分发了一个值，combineLatest就会将两个流中最近分发的值a和值b合并在一起并输出一个值 c = f(x,y) ，函数f是由你定义的，最好通过图表来表示：<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">stream A: --a-----------e--------i--------&gt;</div><div class="line">stream B: -----b----c--------d-------q----&gt;</div><div class="line">          vvvvvvvv combineLatest(f) vvvvvvv</div><div class="line">          ----AB---AC--EC---ED--ID--IQ----&gt;</div><div class="line"></div><div class="line">f 代表大写函数</div></pre></td></tr></table></figure></p>
<p>我们可以将combineLatest()应用于closeClickStream和responseStream，因此只要当第一个关闭按钮被点击了，我们就可以获取到最新的结果，该结果分发并产生个一个新的值提供给suggestion1Stream。另一方面，combineLatest方法是对称的：只要新的结果分发到responseStream，它就会将第一个关闭按钮的最近一次点击事件绑定起来并产生一个新的suggestion。这种对称性很有趣啊，因为它允许我们简化之前的suggestion1Stream代码，就像这样；<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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 suggestion1Stream = close1ClickStream</div><div class="line">  .combineLatest(responseStream,</div><div class="line">    function(click, listUsers) &#123;</div><div class="line">      <span class="keyword">return</span> listUsers[Math.floor(Math.random()*listUsers.length)];</div><div class="line">    &#125;</div><div class="line">  )</div><div class="line">  .merge(</div><div class="line">    refreshClickStream.map(function()&#123; <span class="keyword">return</span> <span class="keyword">null</span>; &#125;)</div><div class="line">  )</div><div class="line"></div><div class="line">  .startWith(<span class="keyword">null</span>);</div></pre></td></tr></table></figure></p>
<p>还有一点一直让人很迷惑。combineLatest()使用了最近的两个数据源，但是如果其中一个数据源还没有分发任何值，那么combineLateset方法就不能够在输出流上产生新的数据事件。如果你看过上面的ASCII图表，你会明白当第一个流分发a值的时候并没有任何输出。只有当第二个流分发b值的时候，才会产生输出值。</p>
<p>有几种不同的方式可以解决这个问题，我们采取最简单的方式，在启动的时候为第一个关闭按钮模拟一个点击事件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var suggestion1Stream = close1ClickStream.startWith(&apos;startup click&apos;) // we added this</div><div class="line">  .combineLatest(responseStream,           </div><div class="line">    function(click, listUsers) &#123;l</div><div class="line">      return listUsers[Math.floor(Math.random()*listUsers.length)];</div><div class="line">    &#125;</div><div class="line">  )</div><div class="line">  .merge(</div><div class="line">    refreshClickStream.map(function()&#123; return null; &#125;)</div><div class="line">  )</div><div class="line">  .startWith(null);</div></pre></td></tr></table></figure>
<h2 id="-7"><a href="#-7" class="headerlink" title=" "></a> </h2><p>#包装</p>
<p>所有的细节都处理完后，完整的代码是这样的：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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></pre></td><td class="code"><pre><div class="line">var refreshButton = document.querySelector(<span class="string">'.refresh'</span>);</div><div class="line">var refreshClickStream = Rx.Observable.fromEvent(refreshButton, <span class="string">'click'</span>);</div><div class="line"></div><div class="line">var closeButton1 = document.querySelector(<span class="string">'.close1'</span>);</div><div class="line">var close1ClickStream = Rx.Observable.fromEvent(closeButton1, <span class="string">'click'</span>);</div><div class="line"><span class="comment">// and the same logic for close2 and close3</span></div><div class="line"></div><div class="line">var requestStream = refreshClickStream.startWith(<span class="string">'startup click'</span>)</div><div class="line">  .map(function() &#123;</div><div class="line">    var randomOffset = Math.floor(Math.random()*<span class="number">500</span>);</div><div class="line">    <span class="keyword">return</span> <span class="string">'https://api.github.com/users?since='</span> + randomOffset;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">var responseStream = requestStream</div><div class="line">  .flatMap(function (requestUrl) &#123;</div><div class="line">    <span class="keyword">return</span> Rx.Observable.fromPromise($.ajax(&#123;url: requestUrl&#125;));</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">var suggestion1Stream = close1ClickStream.startWith(<span class="string">'startup click'</span>)</div><div class="line">  .combineLatest(responseStream,</div><div class="line">    function(click, listUsers) &#123;</div><div class="line">      <span class="keyword">return</span> listUsers[Math.floor(Math.random()*listUsers.length)];</div><div class="line">    &#125;</div><div class="line">  )</div><div class="line">  .merge(</div><div class="line">    refreshClickStream.map(function()&#123; <span class="keyword">return</span> <span class="keyword">null</span>; &#125;)</div><div class="line">  )</div><div class="line">  .startWith(<span class="keyword">null</span>);</div><div class="line"><span class="comment">// and the same logic for suggestion2Stream and suggestion3Stream</span></div><div class="line"></div><div class="line">suggestion1Stream.subscribe(function(suggestion) &#123;</div><div class="line">  <span class="keyword">if</span> (suggestion === <span class="keyword">null</span>) &#123;</div><div class="line">    <span class="comment">// hide the first suggestion DOM element</span></div><div class="line">  &#125;</div><div class="line">  <span class="keyword">else</span> &#123;</div><div class="line">    <span class="comment">// show the first suggestion DOM element</span></div><div class="line">    <span class="comment">// and render the data</span></div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>你可以从这里看到可以运行的示例：<a href="http://jsfiddle.net/staltz/8jFJH/48/" target="_blank" rel="external">code</a></p>
<p>代码很少，但含金量很高啊：它的特点是：通过恰当的关注点分离，对多个事件进行管理，甚至是结果的缓存。这个函数的风格让代码看起来更有解释性而不是冗余性：我们没有制定要执行的序列，只是通过定义流之间的关系来表明我们要做什么。比如，通过Rx我们告诉计算机，suggestion1Stream是一个从最新请求的结果绑定了一个user的”close 1”流，除此之外，在刷新发生或者程序启动的时候会被置为null。</p>
<p>同时使我们印象深刻的是，没有像 if ，for while，这样的元素以及JS应用中典型的依赖回调的控制流。如果有必要的话，你甚至可以通过filter函数替代subscribe函数中的if和else。在Rx中，我们拥有像map,filter,scan,merge,combineLatest,startWith这样的流函数，和很多事件驱动编程的的流控制函数。这个工具集会让你用最少的代码拥有更强大的功能。</p>
<h2 id="-8"><a href="#-8" class="headerlink" title=" "></a> </h2><p>#接下来<br>如果你更喜欢把Rx系列作为反应式编程的library，那么你可以花些时间研究这个函数列表：<a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md" target="_blank" rel="external">transforming，combining，和Observables的创建</a>。如果你希望通过图表的方式理解它们，你可以看这里<a href="https://github.com/ReactiveX/RxJava/wiki/Creating-Observables" target="_blank" rel="external">RxJava’s very useful documentation with marble diagrams</a>。 当你准备沉下心做些事情的时候，将它们绘画成图表，思考它，然后再看一下长长的函数列表，再思考。这种方式在我的经验中证明是非常高效的。</p>
<p>一旦你开始使用Rx进行编程，就需要完全的理解<a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables" target="_blank" rel="external">Cold和Hot Observables</a>的概念。如果你现在忽略它，回头它会让踩不少坑。我可是警告过你喽！通过学习真正的函数式编程，你可以强大自己的技能库，并且了解Rx编程的负面影响。</p>
<p>但是响应式编程不仅仅是Rx。这里提供的<a href="http://baconjs.github.io/" target="_blank" rel="external">Bacon.js</a> 你可以直接使用，省去了Rx中的一些生疏的概念。 <a href="http://elm-lang.org/" target="_blank" rel="external">Elm Language</a>有它自己的分类：反应式函数式编程，结合了JS＋HTML＋CSS，并且拥有一个<a href="http://debug.elm-lang.org/" target="_blank" rel="external">time travelling debugger</a>.相当完美。</p>
<p>对于事件依赖过重的前端和app来说，Rx非常有效。但是并不只针对客户端，在后端以及数据库方面也能处理的很好。事实上，<a href="http://techblog.netflix.com/2013/02/rxjava-netflix-api.html" target="_blank" rel="external">RxJava在Netflix的API中是一个非常重要的处理服务器端并发性的组件</a>。Rx不是一个限制了特定类型应用和语言的框架。对于任何事件驱动的软件编程，它真的是一个可以参考的范例。</p>
<p>希望此教程能够帮到你！</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;原文 &lt;a href=&quot;https://gist.github.com/staltz/868e7e9bc2a7b8c1f754&quot;&gt;The introduction to Reactive Programming you’ve been missing&lt;/a&gt; &lt;/p&gt;
&lt;p&gt;Reactive编程就是异步数据流的编程。&lt;/p&gt;
&lt;p&gt;总的来说，这里没有什么新东西。事件总线或者典型的click事件就是一种异步事件流，你可以观察它们并做出一些响应。Reactive就是基于这种理论。你可以创建任何事物的数据流。流的代价很低而且很普遍，任何事物都可以是流：变量，用户输入，属性 ，缓存，数据结构等等。比如Twitter的消息源可以看作是相应点击事件的数据流。你可以监听它们并作出相应的响应。&lt;/p&gt;
&lt;p&gt;除此之外，它们提供了一个用于连接，创建，过滤任何流的函数库。不仅某个流可以用于另一个流的输入，多个流同样可以作为其它流的输入。你也可以合并两个流。如果你对某些事件感兴趣，也可以通过对一个流的过滤获得另一个目标流。也可以将一个流中的数据映射到一个新的数据流。&lt;/p&gt;
&lt;p&gt;可以看到流对Reactive来说有多重要，我们仔细来看一下它们，以我们熟悉的按钮点击事件流开始：&lt;/p&gt;
    
    </summary>
    
      <category term="Reactive" scheme="http://www.lightskystreet.com/categories/Reactive/"/>
    
    
      <category term="Reactive" scheme="http://www.lightskystreet.com/tags/Reactive/"/>
    
  </entry>
  
  <entry>
    <title>Glide源码分析</title>
    <link href="http://www.lightskystreet.com/2015/10/12/glide_source_analysis/"/>
    <id>http://www.lightskystreet.com/2015/10/12/glide_source_analysis/</id>
    <published>2015-10-11T16:00:00.000Z</published>
    <updated>2016-05-26T07:37:48.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<p>本文为 <a href="https://github.com/android-cn/android-open-project-analysis" target="_blank" rel="external">Android 开源项目源码解析</a> 中 Glide 部分<br>项目地址：<a href="https://github.com/bumptech/glide" target="_blank" rel="external">Glide</a>，分析的版本：<a href="https://github.com/bumptech/glide/commit/cb640b2221044fe272ea6a249772cf71ba0d5fab" target="_blank" rel="external">cb640b2</a>，Demo 地址：<a href="https://github.com/android-cn/android-open-project-demo/tree/master/${项目 Demo 地址}" target="_blank" rel="external">Glide Demo</a><br>分析者：<a href="https://github.com/lightSky" target="_blank" rel="external">lightSky</a>，分析状态：未完成，校对者：<a href="https://github.com/Trinea" target="_blank" rel="external">Trinea</a>，校对状态：未开始   </p>
</blockquote>
<p>###1. 功能介绍<br>图片加载框架，相对于UniversalImageLoader，Picasso，它还支持video，Gif，SVG格式，支持缩略图请求，旨在打造更好的列表图片滑动体验。Glide有生命周期的概念（主要是对请求进行pause，resume，clear），而且其生命周期与Activity/Fragment的生命周期绑定，支持Volley，OkHttp，并提供了相应的integration libraries，内存方面也更加友好。</p>
<p>###2. 总体设计</p>
<a id="more"></a>
<p>####2.1 总体设计图<br><img src="/img/glide_analysis/glide_module.jpg">  </p>
<p>####2.2 Glide中的概念</p>
<p><strong>Glide</strong><br>使用RequestBuilder创建request的静态接口，并持有Engine，BitmapPool，DiskCache，MemoryCache。<br>实现了ComponentCallbacks2，注册了低内存情况的回调。当内存不足的时候，进行相应的内存清理。回调的发生在RequestManagerFragment的onLowMemory和onTrimMemory中。<br>更详细的介绍可参考<strong>4.2.1 Glide</strong> </p>
<p><strong>GlideBuilder</strong><br>为Glide设置一些默认配置，比如：Engine，MemoryCache，DiskCache，RequestOptions，GlideExecutor，MemorySizeCalculator</p>
<p><strong>GlideModule</strong><br>可以通过GlideBuilder进行一些延迟的配置和ModelLoaders的注册。</p>
<p><strong>注意：</strong><br>所有的实现的module必须是public的，并且只拥有一个空的构造函数，以便Glide懒加载的时候可以通过反射调用。<br>GlideModule是不能指定调用顺序的。因此在创建多个GlideModule的时候，要注意不同Module之间的setting不要冲突了。<br>如何创建Module，请参看Demo</p>
<p><strong>Engine</strong><br>负责任务创建，发起，回调，资源的管理<br>详细介绍请参考<strong>4.2.3 Engine</strong></p>
<p><strong>DecodeJob</strong><br>调度任务的核心类，整个请求的繁重工作都在这里完成,处理来自缓存或者原始的资源，应用转换动画以及transcode。<br>详细介绍请参考<strong>4.2.5 DecodeJob</strong>  </p>
<p><strong>ModelLoader</strong><br>各种资源的ModelLoader<model, data=""> </model,></p>
<p>该接口有两个目的： </p>
<ul>
<li>将任意复杂的model转换为可以被decode的数据类型</li>
<li>允许model结合View的尺寸获取特定大小的资源</li>
</ul>
<p>更详细的介绍请参考 <strong>4.2.19 ModelLoader</strong>  </p>
<p><strong>Resource</strong><br>对资源进行包装的接口，提供get，recycle，getSize，以及原始类的getResourceClass方法。<br>resource包下也就是各种资源：bitmap，bytes，drawable，file，gif，以及相关解码器，转换器</p>
<p><strong>Target</strong><br>request的载体，各种资源对应的加载类，含有生命周期的回调方法，方便开发人员进行相应的准备以及资源回收工作。</p>
<p><strong>ThumbnailRequestCoordinator</strong><br>请求协调器，包含两个请求：缩略图请求＋完整图片请求  </p>
<p><strong>数据相关概念</strong>  </p>
<ul>
<li>data ：代表原始的，未修改过的资源，对应dataClass</li>
<li>resource : 修改过的资源，对应resourceClass</li>
<li>transcoder : 资源转换器，比如 BitmapBytesTranscoder（Bitmap转换为Bytes），GifDrawableBytesTranscoder</li>
<li>ResourceEncoder : 持久化数据的接口，注意，该类并不与decoder相对应，而是用于本地缓存的接口</li>
<li>ResourceDecoder : 数据解码器,比如ByteBufferGifDecoder（将ByteBuffer转换为Gif），StreamBitmapDecoder（Stream转换为Bitmap）</li>
<li>ResourceTranscoder : 资源转换器，将给定的资源类型，转换为另一种资源类型，比如将Bitmap转换为Drawable，Bitmap转换为Bytes  </li>
<li>Transformation : 比如对图片进行FitCenter，CircleCrop，CenterCrop的transformation，或者根据给定宽高对Bitmap进行处理的BitmapDrawableTransformation  </li>
</ul>
<p><strong>Registry</strong><br>对Glide所支持的Encoder ，Decoder ，Transcoder组件进行注册<br>因为Glide所支持的数据类型太多，把每一种的数据类型及相应处理方式的组合形象化为一种组件的概念。通过registry的方式管理。<br>如下，注册了将使用BitmapDrawableTranscoder将 Bitmap转换为BitmapDrawable的组件。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Registry.register(Bitmap.class, BitmapDrawable.class,<span class="keyword">new</span> BitmapDrawableTranscoder(resources, bitmapPool))</div></pre></td></tr></table></figure>
<p>关于Decoder，Transcoder和Registry的详细介绍请参考<strong>4.2.18 Registry</strong>  </p>
<p>###3. 流程图</p>
<p><img src="/img/glide_analysis/glide_base_flow.jpg">  </p>
<p>###4. 详细设计</p>
<p>####4.1 类关系图<br><img src="/img/glide_analysis/glide_framework.png">  </p>
<p>####4.2 类详细介绍</p>
<p>#####4.2.1 Glide<br>向外暴露单例静态接口，构建Request，配置资源类型，缓存策略，图片处理等，可以直接通过该类完整简单的图片请求和填充。内存持有一些内存变量<code>BitmapPool</code>，<code>MemoryCache</code>，<code>ByteArrayPool</code>，便于低内存情况时自动清理内存。</p>
<p>#####4.2.2 RequestBuilder<br>创建请求，资源类型配置，缩略图配置，以及通过BaseRequestOptions进行一些默认图，图片处理的配置  </p>
<p><strong>主要函数</strong><br>(1) <strong>thumbnail(@Nullable RequestBuilder<transcodetype> thumbnailRequest)</transcodetype></strong><br>配置缩略图的请求，如果配置的缩略图请求在完整的图片请求完成前回调，那么该缩略图会展示，如果在完整请求之后，那么缩略图就无效。Glide不会保证缩略图请求和完整图片请求的顺序。 </p>
<p>(2) <strong>多个load重载的方法</strong><br>指定加载的数据类型<br>load(@Nullable Object model)<br>load(@Nullable String string)<br>load(@Nullable Uri uri)<br>load(@Nullable File file)<br>load(@Nullable Integer resourceId)<br>load(@Nullable URL url)<br>load(@Nullable byte[] model)</p>
<p>(3) <strong>buildRequest(Target<transcodetype> target)</transcodetype></strong><br>创建请求，如果配置了thumbnail（缩略图）请求，则构建一个ThumbnailRequestCoordinator（包含了FullRequest和ThumbnailRequest）请求，否则简单的构建一个Request。  </p>
<p>(4) <strong>into(Y target)</strong><br>设置资源的Target，并创建，绑定，跟踪，发起请求</p>
<p><strong>整个请求的创建流程图</strong><br><img src="/img/glide_analysis/glide_request_build_flow.jpg">  </p>
<p>###4.2.3 Engine<br>任务创建，发起，回调，管理存活和缓存的资源</p>
<p><strong>主要函数</strong>  </p>
<p><strong>(1) loadFromCache(Key key, boolean isMemoryCacheable)</strong><br>从内存缓存中获取资源，获取成功后会放入到activeResources中</p>
<p><strong>(2) loadFromActiveResources</strong><br>从存活的资源中加载资源，资源加载完成后，再将这个缓存数据放到一个 value 为软引用的 activeResources map 中，并计数引用数，在图片加载完成后进行判断，如果引用计数为空则回收掉。</p>
<p><strong>(3) getReferenceQueue</strong><br>activeResources是一个持有缓存WeakReference的Map集合。ReferenceQueue就是提供资源WeakReference的虚引用队列。<br><code>activeResources.put(key, new ResourceWeakReference(key, cached, getReferenceQueue()));</code><br>这里要提的是负责清除WeakReference被回收的activeResources资源的实现：<br>使用到了MessageQueue.IdleHandler，源码的注释：当一个线程等待更多message的时候会触发该回调,就是messageQuene空闲的时候会触发该回调</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div 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="comment">/**</span></div><div class="line">* Callback interface for discovering when a thread is going to block</div><div class="line">* waiting for more messages.</div><div class="line">*/</div><div class="line"><span class="keyword">public</span> <span class="keyword">static</span> <span class="class"><span class="keyword">interface</span> <span class="title">IdleHandler</span> </span>&#123;</div><div class="line"><span class="comment">/**</span></div><div class="line">* Called when the message queue has run out of messages and will now</div><div class="line">* wait for more.  Return true to keep your idle handler active, false</div><div class="line">* to have it removed.  This may be called if there are still messages</div><div class="line">* pending in the queue, but they are all scheduled to be dispatched</div><div class="line">* after the current time.</div><div class="line">*/</div><div class="line"><span class="function"><span class="keyword">boolean</span> <span class="title">queueIdle</span><span class="params">()</span></span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line">resourceReferenceQueue = <span class="keyword">new</span> ReferenceQueue&lt;&gt;();</div><div class="line">MessageQueue queue = Looper.myQueue();</div><div class="line">queue.addIdleHandler(<span class="keyword">new</span> RefQueueIdleHandler(activeResources, resourceReferenceQueue));</div></pre></td></tr></table></figure>
<p><code>RefQueueIdleHandler</code>实现了<code>MessageQueue.IdleHandler</code>接口，该接口有一个<code>queueIdle</code>方法，负责清除WeakReference被回收的activeResources资源。</p>
<p>(4) <strong>load(<br>GlideContext glideContext,<br>Object model,<br>Key signature,<br>int width,<br>int height,<br>Class&lt;?&gt; resourceClass,<br>Class<r> transcodeClass,<br>Priority priority,<br>DiskCacheStrategy diskCacheStrategy,<br>Map<class<?>, Transformation&lt;?&gt;&gt; transformations,<br>boolean isTransformationRequired,<br>Options options,<br>boolean isMemoryCacheable,<br>ResourceCallback cb)</class<?></r></strong><br>真正的开始加载资源，看下面的流程图</p>
<p><strong>load调用处理流程图：</strong><br>注：DecodeJob是整个任务的核心部分，在下面DecodeJob中有详细介绍，这里主要整个流程<br><img src="/img/glide_analysis/glide_preload_flow.jpg">  </p>
<p>###4.2.4 EngineJob<br>调度DecodeJob，添加，移除资源回调，并notify回调    </p>
<p>####主要方法<br><strong>(1)start(DecodeJob<r> decodeJob)</r></strong><br>调度一个DecodeJob任务  </p>
<p><strong>(2) MainThreadCallback</strong><br>实现了Handler.Callback接口，用于Engine任务完成时回调主线程  </p>
<p>###4.2.5  DecodeJob<br>实现了Runnable接口，调度任务的核心类，整个请求的繁重工作都在这里完成：处理来自缓存或者原始的资源，应用转换动画以及transcode。<br>负责根据缓存类型获取不同的Generator加载数据，数据加载成功后回调DecodeJob的onDataFetcherReady方法对资源进行处理</p>
<p>####主要方法  </p>
<p><strong>(1) runWrapped()</strong><br>根据不同的runReason执行不同的任务，共两种任务类型：</p>
<ul>
<li>runGenerators():load数据  </li>
<li>decodeFromRetrievedData()：处理已经load到的数据</li>
</ul>
<p><strong>RunReason</strong><br>再次执行任务的原因，三种枚举值：  </p>
<ul>
<li>INITIALIZE:第一次调度任务</li>
<li>WITCH_TO_SOURCE_SERVICE:本地缓存策略失败，尝试重新获取数据，两种情况；当stage为Stage.SOURCE，或者获取数据失败并且执行和回调发生在了不同的线程</li>
<li>DECODE_DATA:获取数据成功，但执行和回调不在同一线程，希望回到自己的线程去处理数据</li>
</ul>
<p><strong>(2) getNextStage</strong><br>获取下一步执行的策略，一共5种策略：<br><code>INITIALIZE</code>，<code>RESOURCE_CACHE</code>，<code>DATA_CACHE</code>，<code>SOURCE</code>，<code>FINISHED</code>  </p>
<p>其中加载数据的策略有三种：<br><code>RESOURCE_CACHE</code>，<code>DATA_CACHE</code>，<code>SOURCE</code>，<br>分别对应的Generator:  </p>
<ul>
<li><code>ResourceCacheGenerator</code>  ：尝试从修改过的资源缓存中获取，如果缓存未命中，尝试从DATA_CACHE中获取</li>
<li><code>DataCacheGenerator</code>  尝试从未修改过的本地缓存中获取数据，如果缓存未命中则尝试从SourceGenerator中获取</li>
<li><code>SourceGenerator</code>  从原始的资源中获取，可能是服务器，也可能是本地的一些原始资源</li>
</ul>
<p>策略的配置在DiskCacheStrategy。开发者可通过BaseRequestOptions设置：  </p>
<ul>
<li>ALL</li>
<li>NONE</li>
<li>DATA</li>
<li>RESOURCE</li>
<li>AUTOMATIC（默认方式，依赖于DataFetcher的数据源和ResourceEncoder的EncodeStrategy）</li>
</ul>
<p><strong>(3) getNextGenerator</strong><br>根据Stage获取到相应的Generator后会执行currentGenerator.startNext()，如果中途startNext返回true，则直接回调，否则最终会得到SOURCE的stage，重新调度任务</p>
<p><strong>(4) startNext</strong><br>从当前策略对应的Generator获取数据，数据获取成功则回调DecodeJob的<code>onDataFetcherReady</code>对资源进行处理。否则尝试从下一个策略的Generator获取数据。</p>
<p><strong>(5) reschedule</strong><br>重新调度当前任务  </p>
<p><strong>(6) decodeFromRetrievedData</strong><br>获取数据成功后，进行处理，内部调用的是<code>runLoadPath(Data data, DataSource dataSource,LoadPath&lt;Data, ResourceType, R&gt; path)</code>    </p>
<p><strong>(7) DecodeCallback.onResourceDecoded</strong><br>decode完成后的回调，对decode的资源进行transform<br>path.load(rewinder, options, width, height,<br>new DecodeCallback<resourcetype>(dataSource));</resourcetype></p>
<p><strong>数据加载流程图</strong><br><img src="/img/glide_analysis/glide_load_flow.jpg">  </p>
<p>####4.2.6  LoadPath<br>根据给定的数据类型的DataFetcher尝试获取数据，然后尝试通过一个或多个decodePath进行decode。  </p>
<p>####4.2.7  DecodePath<br>根据指定的数据类型对resource进行decode和transcode</p>
<p>####4.2.8 RequestTracker<br>追踪，取消，重启失败，正在处理或者已经完成的请求  </p>
<p><strong>重要方法</strong>  </p>
<p><strong>(1) resumeRequests</strong><br>重启所有未完成或者失败的请求，Activity/Fragment的生命周期<code>onStart</code>的时候，会触发RequestManager调用该方法 </p>
<p><strong>(2) pauseRequests</strong><br>停止所有的请求，Activity/Fragment的生命周期<code>onStop</code>的时候，会触发RequestManager调用该方法。  </p>
<p><strong>(3) clearRequests</strong><br>取消所有的请求并清理它们的资源,Activity/Fragment的生命周期<code>onDestory</code>的时候，会触发RequestManager调用该方法。  </p>
<p><strong>(4) restartRequests</strong><br>重启失败的请求，取消并重新启动进行中的请求,网络重新连接的时候，会调用该方法重启请求。  </p>
<p><strong>(5) clearRemoveAndRecycle</strong><br>停止追踪指定的请求，清理，回收相关资源。</p>
<p>####4.2.9 TargetTracker<br>持有当前所有存活的Target，并触发Target相应的生命周期方法。方便开发者在整个请求过程的不同状态中进行回调，做相应的处理。  </p>
<p>####4.2.10  RequestManager<br>核心类之一，用于Glide管理请求。<br>可通过Activity/Fragment/Connectivity（网络连接监听器）的生命周期方法进行stop,start和restart请求。</p>
<p><strong>重要方法</strong><br><strong>(1) resumeRequests</strong><br>在onStart方法中调用，其实是通过requestTracker处理,同时也会调用<code>targetTracker.onStart();</code>回调Target相应周期方法。</p>
<p><strong>(2) pauseRequests</strong><br>在onStop方法中调用，其实是通过requestTracker处理，同时也会调用<code>targetTracker.onStop();</code>回调Target相应周期方法  </p>
<p><strong>(3) onDestroy</strong><br>调用<code>targetTracker.onDestroy();</code>，<code>requestTracker.clearRequests();</code>，<code>lifecycle.removeListener(this);</code>等进行资源清理。  </p>
<p><strong>(4) resumeRequestsRecursive</strong><br>递归重启所有RequestManager下的所有request。在Glide中源码中没有用到，暴露给开发者的接口。</p>
<p><strong>(5) pauseRequestsRecursive</strong><br>递归所有childFragments的RequestManager的<code>pauseRequest</code>方法。同样也只是暴露给开发者的接口。<br>childFragments表示那些依赖当前Activity或者Fragment的所有fragments   </p>
<ul>
<li>如果当前Context是Activity，那么依附它的所有fragments的请求都会中止  </li>
<li>如果当前Context是Fragment，那么依附它的所有childFragment的请求都会中止  </li>
<li>如果当前的Context是ApplicationContext，或者当前的Fragment处于detached状态，那么只有当前的RequestManager的请求会被中止</li>
</ul>
<p><strong>注意：</strong><br>在Android 4.2 AP17之前，如果当前的context是Fragment（当fragment的parent如果是activity，fragment.getParentFragment()直接返回null），那么它的childFragment的请求并不会被中止。原因是在4.2之前系统不允许获取parent fragment，因此不能确定其parentFragment。 但v4的support Fragment是可以的，因为v4包的Fragment对应的SupportRequestManagerFragment提供了一个parentFragmentHint，它相当于Fragment的ParentFragment。在RequestManagerRetriever.get(support.V4.Fragment fragment)的时候将参数fragment作为parentFragmentHint。 </p>
<p><strong>(6) registerFragmentWithRoot</strong><br>获取Activity相应的RequestManagerFragment，并添加到Activity的事务当中去，同时将当前的Fragment添加到childRequestManagerFragments的HashSet集合中去，以便在<code>pauseRequestsRecursive</code>和<code>resumeRequestsRecursive</code>方法中调用<code>RequestManagerTreeNode.getDescendants()</code>的时候返回所有的childFragments。在RequestManagerFragment的<code>onAttach</code>方法以及<code>setParentFragmentHint</code>方法中调用。</p>
<p><strong>(6) unregisterFragmentWithRoot</strong><br>对应上面的registerFragmentWithRoot方法，在RequestManagerFragment的onDetach，onDestroy或者重新register前将当前的fragment进行remove</p>
<p>很重要的一个相关类:<code>RequestManagerFragment</code>。<br>当Glide.with(context)获取RequestManager的时候，Glide都会先尝试获取当前上下文相关的RequestManagerFragment。  </p>
<p>RequestManagerFragment初始化时会创建一个ActivityFragmentLifecycle对象，并在创建自己的Request Manager的时候同时传入，这样ActivityFragmentLifecycle便成了它们之间的纽带。RequestManagerFragment生命周期方法触发的时候，就可以通过ActivityFragmentLifecycle同时触发RequestManager相应的方法，执行相应的操作。  </p>
<p>Request Manager通过ActivityFragmentLifecycle的addListener方法注册一些LifecycleListener。当RequestManagerFragment生命周期方法执行的时候，触发ActivityFragmentLifecycle的相应方法，这些方法会遍历所有注册的LifecycleListener并执行相应生命周期方法。</p>
<p>RequestManager注册的LifecycleListener类型</p>
<ul>
<li><p>RequestManager自身<br>RequestManager自己实现了LifecycleListener。主要的请求管理也是在这里处理的。</p>
</li>
<li><p>RequestManagerConnectivityListener，该listener也实现了LifecycleListener，用于网络连接时进行相应的请求恢复。 这里的请求是指那些还未完成的请求，已经完成的请求并不会重新发起。<br>另外Target接口也是直接继承自LifecycleListener，因此RequestManager在触发相应的生命周期方法的时候也会调用所有Target相应的生命周期方法，这样开发者可以监听资源处理的整个过程，在不同阶段进行相应的处理。</p>
</li>
</ul>
<p>生命周期的管理主要由<code>RequestTracker</code>和<code>TargetTracker</code>处理。</p>
<p><strong>生命周期事件的传递</strong><br><img src="/img/glide_analysis/glide_life_control.jpg">  </p>
<p>####4.2.11 RequestManagerFragment<br>与当前上下文绑定的Fragment，统一管理当前上下文下的所有childFragment的请求。<br>每一个Context都会拥有一个RequestManagerFragment，在自身的Fragment生命周期方法中触发listener相应的生命周期方法。<br>复写了onLowMemory和onTrimMemory，低内存情况出现的时候，会调用RequestManager的相应方法进行内存清理。  </p>
<p>释放的内存有：</p>
<ul>
<li>bitmapPool： </li>
<li>memoryCache： </li>
<li>byteArrayPool： </li>
</ul>
<p>####4.2.12 RequestManagerRetriever<br>提供一些静态方法，用语创建或者从Activity/Fragment获取RequestManager。<br>get(Activity activity)<br>get(android.app.Fragment fragment)<br>get(Activity activity)<br>get(FragmentActivity activity)<br>getSupportRequestManagerFragment</p>
<p>####4.2.13 RequestManagerTreeNode<br>上文提到获取所有childRequestManagerFragments的RequestManager就是通过该类获得，就一个方法：getDescendants，作用就是基于给定的Context，获取所有层级相关的RequestManager。上下文层级由Activity或者Fragment获得，ApplicationContext的上下文不会提供RequestManager的层级关系，而且Application生命周期过长，所以Glide中对请求的控制只针对于Activity和Fragment。</p>
<p>####4.2.14 LifecycleListener<br>用于监听Activity或者Fragment的生命周期方法的接口，基本上请求相关的所有类都实现了该接口</p>
<ul>
<li>void onStart();</li>
<li>void onStop();</li>
<li>void onDestroy();  </li>
</ul>
<p>####4.2.15 ActivityFragmentLifecycle<br>用于注册，同步所有监听了Activity或者Fragment的生命周期事件的listener的帮助类。  </p>
<p>####4.2.16 DataFetcher<br>每一次通过ModelLoader加载资源的时候都会创建的实例。<br><code>loadData</code> ：异步方法，如果目标资源没有在缓存中找到时才会被调用,cancel方法也是。<br><code>cleanup</code>：清理或者回收DataFetcher使用的资源，在loadData提供的数据被decode完成后调用。</p>
<p><strong>主要方法</strong><br><strong>(1) DataCallback</strong><br>用于数据加载结果的回调,三种Generator实现了该接口<br><figure class="highlight java"><table><tr><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="comment">//数据load完成并且可用时回调</span></div><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">onDataReady</span><span class="params">(@Nullable T data)</span></span>;  </div><div class="line"><span class="comment">//数据load失败时回调</span></div><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">onLoadFailed</span><span class="params">(Exception e)</span></span>;</div></pre></td></tr></table></figure></p>
<p><strong>(2) getDataClass()</strong><br>返回fetcher尝试获取的数据类型</p>
<p><strong>(3) getDataSource()</strong><br>获取数据的来源</p>
<p><strong>(4) DataSource</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></pre></td><td class="code"><pre><div class="line">public enum DataSource &#123;</div><div class="line">//数据从本地硬盘获取，也有可能通过一个已经从远程获取到数据的Content Provider</div><div class="line">LOCAL,</div><div class="line">//数据从远程获取</div><div class="line">REMOTE,</div><div class="line">//数据来自未修改过的硬盘缓存</div><div class="line">DATA_DISK_CACHE,</div><div class="line">//数据来自已经修改过的硬盘缓存</div><div class="line">RESOURCE_DISK_CACHE,</div><div class="line">//数据来自内存</div><div class="line">MEMORY_CACHE,</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>####4.2.17  DataFetcherGenerator<br>根据注册的ModelLoaders和model生成一系列的DataFetchers。</p>
<p><strong>FetcherReadyCallback</strong><br>DecodeJob实现的接口，包含以下方法：<br><code>reschedule</code>：在Glide自己的线程上再次调用startNext<br>当Generator从DataFetcher完成loadData时回调，含有的方法：<br><code>onDataFetcherReady</code>：load完成<br><code>onDataFetcherFailed</code>：load失败  </p>
<p>####4.2.18  Registry<br>管理组件（数据类型＋数据处理）的注册</p>
<p><strong>主要成员变量</strong>  </p>
<ul>
<li>ModelLoaderRegistry ：注册所有数据加载的loader</li>
<li>ResourceDecoderRegistry：注册所有资源转换的decoder  </li>
<li>TranscoderRegistry：注册所有对decoder之后进行特殊处理的transcoder</li>
<li>ResourceEncoderRegistry：注册所有持久化resource（处理过的资源）数据的encoder</li>
<li>EncoderRegistry ： 注册所有的持久化原始数据的encoder</li>
</ul>
<p><strong>标准的数据处理流程：</strong><br><img src="/img/glide_analysis/glide_data_process_flow.jpg">  </p>
<p>Glide在初始化的时候，通过Registry注册以下所有组件， 每种组件由功能及处理的资源类型组成：</p>
<table>
<thead>
<tr>
<th style="text-align:left">组件</th>
<th style="text-align:left">构成</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">loader</td>
<td style="text-align:left">model＋data＋ModelLoaderFactory  </td>
</tr>
<tr>
<td style="text-align:left">decoder</td>
<td style="text-align:left">dataClass＋resourceClass＋decoder  </td>
</tr>
<tr>
<td style="text-align:left">transcoder</td>
<td style="text-align:left">resourceClass＋transcodeClass  </td>
</tr>
<tr>
<td style="text-align:left">encoder</td>
<td style="text-align:left">dataClass＋encoder  </td>
</tr>
<tr>
<td style="text-align:left">resourceEncoder</td>
<td style="text-align:left">resourceClass + encoder</td>
</tr>
<tr>
<td style="text-align:left">rewind</td>
<td style="text-align:left">缓冲区处理</td>
</tr>
</tbody>
</table>
<h2 id=""><a href="#" class="headerlink" title=" "></a> </h2><table>
<thead>
<tr>
<th style="text-align:left">Decoder</th>
<th style="text-align:left">数据源</th>
<th style="text-align:left">解码后的资源</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">BitmapDrawableDecoder</td>
<td style="text-align:left">Bitmap</td>
<td style="text-align:left">Drawable  </td>
</tr>
<tr>
<td style="text-align:left">StreamBitmapDecoder</td>
<td style="text-align:left">InputStream</td>
<td style="text-align:left">Bitmap    </td>
</tr>
<tr>
<td style="text-align:left">ByteBufferBitmapDecoder</td>
<td style="text-align:left">ByteBuffer</td>
<td style="text-align:left">Bitmap  </td>
</tr>
<tr>
<td style="text-align:left">GifFrameResourceDecoder</td>
<td style="text-align:left">GifDecoder</td>
<td style="text-align:left">Bitmap  </td>
</tr>
<tr>
<td style="text-align:left">StreamGifDecoder</td>
<td style="text-align:left">InputStream</td>
<td style="text-align:left">GifDrawable  </td>
</tr>
<tr>
<td style="text-align:left">ByteBufferGifDecoder</td>
<td style="text-align:left">ByteBuffer</td>
<td style="text-align:left">Gif      </td>
</tr>
<tr>
<td style="text-align:left">SvgDecoder</td>
<td style="text-align:left">InputStream</td>
<td style="text-align:left">SVG  </td>
</tr>
<tr>
<td style="text-align:left">VideoBitmapDecoder</td>
<td style="text-align:left">ParcelFileDescriptor</td>
<td style="text-align:left">Bitmap  </td>
</tr>
<tr>
<td style="text-align:left">FileDecoder</td>
<td style="text-align:left">File</td>
<td style="text-align:left">file    </td>
</tr>
</tbody>
</table>
<h2 id="-1"><a href="#-1" class="headerlink" title=" "></a> </h2><table>
<thead>
<tr>
<th style="text-align:left">Transcoder</th>
<th style="text-align:left">数据源</th>
<th style="text-align:left">转换后的资源</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">BitmapBytesTranscoder</td>
<td style="text-align:left">Bitmap</td>
<td style="text-align:left">Bytes  </td>
</tr>
<tr>
<td style="text-align:left">BitmapDrawableTranscoder</td>
<td style="text-align:left">Bitmap</td>
<td style="text-align:left">Drawable    </td>
</tr>
<tr>
<td style="text-align:left">GifDrawableBytesTranscoder</td>
<td style="text-align:left">GifDrawable</td>
<td style="text-align:left">Bytes  </td>
</tr>
<tr>
<td style="text-align:left">SvgDrawableTranscoder</td>
<td style="text-align:left">Svg</td>
<td style="text-align:left">Drawable  </td>
</tr>
</tbody>
</table>
<p><code>decode＋transcode</code>的处理流程称为decodePath。<br>LoadPath是对decodePath的封装，持有一个decodePath的List。在通过modelloader.fetchData获取到data后，会对data进行decode，具体的decode操作就是通过loadPath来完成。resourceClass就是asBitmap，asDrawable方法的参数。  </p>
<p><strong>ModelLoaderRegistry</strong><br>持有多个ModelLoader，model和数据类型按照优先级进行处理</p>
<p>loader注册示例：<br><figure class="highlight java"><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">registry  </div><div class="line">.append(Integer.class, InputStream.class, <span class="keyword">new</span> ResourceLoader.StreamFactory())</div><div class="line">.append(GifDecoder.class, GifDecoder.class, <span class="keyword">new</span> UnitModelLoader.Factory&lt;GifDecoder&gt;())</div></pre></td></tr></table></figure></p>
<p><strong>主要函数</strong><br><strong>(1) register，append，prepend</strong><br>注册各种功能的组件</p>
<p><strong>(2) getRegisteredResourceClasses(Class<model> modelClass, Class<tresource> resourceClass, Class<transcode> transcodeClass)</transcode></tresource></model></strong><br>获取Glide初始化时注册的所有resourceClass</p>
<p><strong>(3) getModelLoaders(Model model)</strong>  </p>
<p><strong>(4) hasLoadPath(Class&lt;?&gt; dataClass)</strong><br>判断注册的组件是否可以处理给定的dataClass  </p>
<ul>
<li>直接调用<code>getLoadPath(dataClass, resourceClass, transcodeClass)</code>  </li>
<li>该方法先从loadPathCache缓存中尝试获取LoadPath,如果没有，则先根据dataClass, resourceClass, transcodeClass获取所有的decodePaths，如果decodePaths不为空，则创建一个<code>LoadPath&lt;&gt;(dataClass, resourceClass, transcodeClass, decodePaths,exceptionListPool)</code> 并缓存起来。</li>
</ul>
<p><strong>(5) getDecodePaths</strong><br>根据dataClass, resourceClass, transcodeClass从注册的组件中找到所有可以处理的组合decodePath。就是将满足条件的不同处理阶段（modelloader，decoder，transcoder）的组件组合在一起。满足处理条件的有可能是多个组合。因为decodePath的功能是进行decode和transcode，所以getDecodePath的目的就是要找到符合条件的decoder和transcoder然后创建DecodePath。  </p>
<p>####4.2.19   ModelLoader<model, data=""></model,></p>
<p>ModelLoader是一个工厂接口。将任意复杂的model转换为准确具体的可以被DataFetcher获取的数据类型。<br>每一个model内部实现了一个ModelLoaderFactory，内部实现就是将model转换为Data</p>
<p><strong>重要成员</strong><br><code>LoadData&lt;Data&gt;</code><br>Key sourceKey，用于表明load数据的来源。<br>List<key> alternateKeys：指向相应的变更数据<br>DataFetcher<data> fetcher：用于获取不在缓存中的数据</data></key></p>
<p><strong>重要方法</strong>  </p>
<p><strong>(1) buildLoadData</strong><br>返回一个LoadData</p>
<p><strong>(2) handles(Model model)</strong><br>判断给定的model是否可以被当前modelLoader处理</p>
<p>####4.2.20  ModelLoaderFactory<br>根据给定的类型，创建不同的ModelLoader，因为它会被静态持有，所以不应该维持非应用生命周期的context或者对象。</p>
<p>####4.2.21 DataFetcherGenerator<br>通过注册的DataLoader生成一系列的DataFetcher<br><code>DataCacheGenerator</code>：根据未修改的缓存数据生成DataFetcher<br><code>ResourceCacheGenerator</code>：根据已处理的缓存数据生成DataFetcher<br><code>SourceGenerator</code>：根据原始的数据和给定的model通过ModelLoader生成的DataFetcher  </p>
<p>####4.2.22 DecodeHelper<br>getPriority<br>getDiskCache<br>getLoadPath<br>getModelLoaders<br>getWidth<br>getHeight</p>
<h4 id="如何监测当前context的生命周期？"><a href="#如何监测当前context的生命周期？" class="headerlink" title="如何监测当前context的生命周期？"></a>如何监测当前context的生命周期？</h4><p>为当前的上下文Activity或者Fragment绑定一个TAG为”com.bumptech.glide.manager”的RequestManagerFragment，然后把该fragment作为rootRequestManagerFragment，并加入到当前上下文的FragmentTransaction事务中，从而与当前上下文Activity或者Fragment的生命周期保持一致。</p>
<p>关键就是<code>RequestManagerFragment</code>，用于绑定当前上下文以及同步生命周期。比如当前的context为activity，那么activity对应的RequestManagerFragment就与宿主activity的生命周期绑定了。同样Fragment对应的RequestManagerFragment的生命周期也与宿主Fragment保持一致。</p>
<p>####五 请求管理的实现<br><code>pauseRequests</code>，<code>resumeRequests</code><br>在RequestManagerFragment对应Request Manager的生命周期方法中触发，</p>
<p>#####5.1 如何控制当前上下文的所有ChildFragment的请求？<br><strong>情景：</strong><br>假设当前上下文是Activity（Fragment类似）创建了多个Fragment，每个Fragment通过Glide.with(fragment.this)方式加载图片<br><img src="/img/glide_analysis/glide_life_control_theory.jpg">  </p>
<ul>
<li>首先Glide会为Activity以及每一个Fragment创建一个RequestManagerFragment（原因看下面）并提交到当前上下文的事务中。<br>以上保证了每个Fragment以及对应的RequestManagerFragment生命周期是与Activity的生命周期绑定的。  </li>
<li>在RequestManagerFragment的onAttach方法中通过Glide.with(activity.this)先获得Activity（宿主）的<code>RequestManagerFragment</code>(rootRequestManagerFragment)，并将每个Fragment相应的RequestManagerFragment添加到childRequestManagerFragments集合中。  </li>
<li>Activity通过自己的RequestManager的childRequestManagerFragments获取所有childFragment的RequestManager，然后对请求进行pause，resume。</li>
</ul>
<p>同理，如果当前context是Fragment，Fragment对应的RequestManagerFragment可以获取它自己所有的Child Fragment的RequestManagerFragment。</p>
<p>#####5.2 如何管理没有ChildFragment的请求？<br>很简单，只会存在当前context自己的RequestManagerFragment，那么伴随当前上下文的生命周期触发，会调用RequestManagerFragment的RequestManager相应的lefecycle方法实现请求的控制，资源回收。</p>
<p>#####5.3 为何每一个上下文会创建自己的RequestManagerFragment ？<br>因为<code>RequestManagerRetriever.getSupportRequestManagerFragment(fm)</code>是通过FragmentManager来获取的</p>
<ul>
<li>如果传入到Glide.with(…)的context是activity<br><code>fm = activity.getSupportFragmentManager();</code>  </li>
<li>如果传入到Glide.with(…)的context是Fragment<br><code>fm = fragment.getChildFragmentManager();</code></li>
</ul>
<p>因为上下文不同导致得到的fm不同，从而<code>RequestManagerRetriever.getSupportRequestManagerFragment(fm)</code>方法返回的RequestManagerFrament不同。而且如果一个activity下面有多个Fragment，并以Glide.with(fragment.this)的方式加载图片。那么每个Fragment都会为自己创建一个fm相关的RequestManagerFragment。</p>
<p>关键在于每一个上下文拥有一个自己的RequestManagerFragment。而传入的context不同，会返回不同的RequestManagerFragment，顶层上下文会保存所有的childRequestManagerFragments。</p>
<p>###六. 杂谈<br>Glide优点在于其生命周期的管理，资源类型的支持多。但相对于简洁的UniversalImageLoader和Picasso，无论从设计上还是细节实现上，都复杂的多，从代码的实现上可以看出，正式因为Glide的生命周期管理，内存友好，资源类型支持多这些优点相关。一些设计概念很少碰到，比如decodePath，loadpath。整个数据处理流程的拆分三个部分，每个部分所支持的数据以及处理方式全部通过组件注册的方式来支持，很多方法或者构造函数会接收10多个参数，看着着实眼花缭乱。这里的分析把大体的功能模块分析了，比如请求的统一管理，生命周期的同步，具体的实现细节还需要一部分的工作量。对于开源项目的初学者来说，Glide并不是一个好的项目，门槛太高。也因为如此，所以Glide的使用并没有其它几种图片库的使用那么广泛，相关文档很欠缺，本篇分析希望成为一个很好的参考，也希望大家提出自己的建议和意见，继续优化，让更多开发者能更快了解，使用这个强大的库。</p>
<p>###参考文档<br><a href="http://mp.weixin.qq.com/s?__biz=MzAxNjI3MDkzOQ==&amp;mid=400056342&amp;idx=1&amp;sn=894325d70f16a28bfe8d6a4da31ec304&amp;scene=2&amp;srcid=10210byVbMGLHg7vXUJLgHaR&amp;from=timeline&amp;isappinstalled=0#rd" target="_blank" rel="external">开源选型之 Android 三大图片缓存原理、特性对比</a><br><a href="http://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en" target="_blank" rel="external">get-to-know-glide-recommended-by-google</a><br><a href="http://stackoverflow.com/questions/29363321/picasso-v-s-imageloader-v-s-fresco-vs-glide" target="_blank" rel="external">picasso-vs-imageloader-vs-fresco-vs-glide</a><br><a href="https://plus.google.com/+HugoVisser/posts/Rra8mrU1pCx" target="_blank" rel="external">https://plus.google.com/+HugoVisser/posts/Rra8mrU1pCx</a><br><a href="http://blog.csdn.net/fancylovejava/article/details/44747759" target="_blank" rel="external">http://blog.csdn.net/fancylovejava/article/details/44747759</a></p>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;本文为 &lt;a href=&quot;https://github.com/android-cn/android-open-project-analysis&quot;&gt;Android 开源项目源码解析&lt;/a&gt; 中 Glide 部分&lt;br&gt;项目地址：&lt;a href=&quot;https://github.com/bumptech/glide&quot;&gt;Glide&lt;/a&gt;，分析的版本：&lt;a href=&quot;https://github.com/bumptech/glide/commit/cb640b2221044fe272ea6a249772cf71ba0d5fab&quot;&gt;cb640b2&lt;/a&gt;，Demo 地址：&lt;a href=&quot;https://github.com/android-cn/android-open-project-demo/tree/master/${项目 Demo 地址}&quot;&gt;Glide Demo&lt;/a&gt;&lt;br&gt;分析者：&lt;a href=&quot;https://github.com/lightSky&quot;&gt;lightSky&lt;/a&gt;，分析状态：未完成，校对者：&lt;a href=&quot;https://github.com/Trinea&quot;&gt;Trinea&lt;/a&gt;，校对状态：未开始   &lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;###1. 功能介绍&lt;br&gt;图片加载框架，相对于UniversalImageLoader，Picasso，它还支持video，Gif，SVG格式，支持缩略图请求，旨在打造更好的列表图片滑动体验。Glide有生命周期的概念（主要是对请求进行pause，resume，clear），而且其生命周期与Activity/Fragment的生命周期绑定，支持Volley，OkHttp，并提供了相应的integration libraries，内存方面也更加友好。&lt;/p&gt;
&lt;p&gt;###2. 总体设计&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="优秀项目原理解析" scheme="http://www.lightskystreet.com/categories/Android/%E4%BC%98%E7%A7%80%E9%A1%B9%E7%9B%AE%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/"/>
    
    
      <category term="优秀项目原理解析" scheme="http://www.lightskystreet.com/tags/%E4%BC%98%E7%A7%80%E9%A1%B9%E7%9B%AE%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/"/>
    
  </entry>
  
  <entry>
    <title>MAT - Memory Analyzer Tool 使用进阶</title>
    <link href="http://www.lightskystreet.com/2015/09/01/mat_usage/"/>
    <id>http://www.lightskystreet.com/2015/09/01/mat_usage/</id>
    <published>2015-08-31T16:00:00.000Z</published>
    <updated>2015-09-01T01:30:17.000Z</updated>
    
    <content type="html"><![CDATA[<p>#前言#<br>尽管Java虚拟机可以帮我们对内存进行回收，但是其回收的是Java虚拟机不再引用的对象。很多时候我们使用系统的IO流，Cursor，Receiver如果不及时释放，就会导致内存泄漏，这些场景是常见的，一般开发人员也都能够避免。但是，很多时候内存泄漏的现象不是很明显，比如内部类，Handler相关的使用导致的内存泄漏，或者你使用了第三方library的一些引用，比较消耗资源，但又不是像系统资源那样会引起你足够的注意去手动释放它们。当代码越来越多，如果结构不是很清晰，即使是常见的资源也有可能略掉，从而导致内存泄漏。内存泄漏很有可能会导致内存溢出，就是常说的OOM，从而导致应用crash，给用户一种糟糕的体验。该篇文章就是介绍内存分析工具MAT以及实战来帮你更好的分析内存问题。前面是相关概念介绍，最后通过内存泄漏分析，集合使用率，Hash性能分析，OQL快读定位空集合实战演示如何在实际应用中使用MAT。（通过一些静态检测也可以在开发期发现一些内存泄漏的问题，后面会有一些静态检测的文章）</p>
<a id="more"></a>
<h2 id=""><a href="#" class="headerlink" title=" "></a> </h2><p>#一  相关概念<br>Java虚拟机如何判定内存泄漏的呢？下面介绍一些相关概念</p>
<p>##1.1 GC Root ##<br>JAVA虚拟机通过可达性（Reachability)来判断对象是否存活，基本思想：以”GC Roots”的对象作为起始点向下搜索，搜索形成的路径称为引用链，当一个对象到GC Roots没有任何引用链相连（即不可达的），则该对象被判定为可以被回收的对象，反之不能被回收。</p>
<p>GC Roots可以是以下任意对象  </p>
<ul>
<li>一个在current thread(当前线程)的call stack(调用栈)上的对象（例如方法参数和局部变量）  </li>
<li>线程自身或者system class loader(系统类加载器)加载的类  </li>
<li>native code(本地代码)保留的活动对象  </li>
</ul>
<p>##1.2 内存泄漏<br>对象无用了，但仍然可达（未释放），垃圾回收器无法回收。</p>
<p>##1.3 强（strong）、软（soft）、弱（weak）、虚（phantom）引用 ##</p>
<h2 id="Strong-references"><a href="#Strong-references" class="headerlink" title="Strong references"></a>Strong references</h2><p>普通的java引用，我们通常new的对象就是：<br><code>StringBuffer buffer = new StringBuffer();</code><br>如果一个对象通过一串强引用链可达，那么它就不会被垃圾回收。你肯定不希望自己正在使用的引用被垃圾回收器回收吧。但对于集合中的对象，应在不使用的时候移除掉，否则会占用更多的内存，导致内存泄漏。</p>
<p>##Soft reference<br>当对象是Soft reference可达时，gc会向系统申请更多内存，而不是直接回收它，当内存不足的时候才回收它。因此Soft reference适合用于构建一些缓存系统，比如图片缓存。</p>
<h2 id="WeakReference"><a href="#WeakReference" class="headerlink" title="WeakReference"></a>WeakReference</h2><p>WeakReference不会强制对象保存在内存中。它拥有比较短暂的生命周期，允许你使用垃圾回收器的能力去权衡一个对象的可达性。在垃圾回收器扫描它所管辖的内存区域过程中，一旦gc发现对象是weakReference可达，就会把它放到ReferenceQueue中，等下次gc时回收它。<br><code>WeakReference&lt;Widget&gt; weakWidget = new WeakReference&lt;Widget&gt;(widget);</code><br>系统为我们提供了WeakHashMap，和HashMap类似，只是其key使用了weak reference。如果WeakHashMap的某个key被垃圾回收器回收，那么entity也会自动被remove。</p>
<p>由于WeakReference被GC回收的可能性较大，因此，在使用它之前，你需要通过weakObj.get()去判断目的对象引用是否已经被回收.</p>
<h2 id="Reference-queque"><a href="#Reference-queque" class="headerlink" title="Reference queque"></a>Reference queque</h2><p>一旦WeakReference.get()返回null，它指向的对象就会被垃圾回收，那么WeakReference对象就没有用了，意味着你应该进行一些清理。比如在WeakHashMap中要把回收过的key从Map中删除掉，避免无用的的weakReference不断增长。<br>ReferenceQueue可以让你很容易地跟踪dead references。WeakReference类的构造函数有一个ReferenceQueue参数，当指向的对象被垃圾回收时，会把WeakReference对象放到ReferenceQueue中。这样，遍历ReferenceQueue可以得到所有回收过的WeakReference。</p>
<h2 id="Phantom-reference"><a href="#Phantom-reference" class="headerlink" title="Phantom reference"></a>Phantom reference</h2><p>和soft，weak Reference区别较大，它的get()方法总是返回null。这意味着你只能用PhantomReference本身，而得不到它指向的对象。当WeakReference指向的对象变得弱可达(weakly reachable）时会立即被放到ReferenceQueue中，这在finalization、garbage collection之前发生。理论上，你可以在finalize()方法中使对象“复活”（使一个强引用指向它就行了，gc不会回收它）。但没法复活PhantomReference指向的对象。而PhantomReference是在garbage collection之后被放到ReferenceQueue中的，没法复活。    </p>
<p>关于Phantom reference的更多讨论，请参考：<a href="https://weblogs.java.net/blog/2006/05/04/understanding-weak-references" target="_blank" rel="external">understanding-weak-references</a></p>
<h2 id="-1"><a href="#-1" class="headerlink" title=" "></a> </h2><p>#二  MAT相关视图和概念  </p>
<h2 id="2-1-Shallow-Heap"><a href="#2-1-Shallow-Heap" class="headerlink" title="2.1 Shallow Heap"></a>2.1 Shallow Heap</h2><p>Shallow size就是对象本身占用内存的大小，不包含其引用的对象内存，实际分析中作用不大。<br>常规对象（非数组）的ShallowSize由其成员变量的数量和类型决定<br>数组的shallow size有数组元素的类型（对象类型、基本类型）和数组长度决定</p>
<p>Shallow Size of a String object</p>
<pre><code class="java"><span class="class"><span class="keyword">class</span> <span class="title">String</span></span>{
    <span class="keyword">public</span> <span class="keyword">final</span> <span class="class"><span class="keyword">class</span> <span class="title">String</span> </span>{<span class="number">8</span> Bytes header
    <span class="keyword">private</span> <span class="keyword">char</span> value[]; <span class="number">4</span> Bytes
    <span class="keyword">private</span> <span class="keyword">int</span> offset; <span class="number">4</span> Bytes
    <span class="keyword">private</span> <span class="keyword">int</span> count; <span class="number">4</span> Bytes
    <span class="keyword">private</span> <span class="keyword">int</span> hash = <span class="number">0</span>; <span class="number">4</span> Bytes
…}
<span class="string">"Shallow size“ of a String ==24 Bytes</span>
</code></pre>
<p>java的对象成员都是些引用。真正的内存都在堆上，看起来是一堆原生的byte[], char[], int[]，对象本身的内存都很小。所以我们可以看到以Shallow Heap进行排序的Histogram图中，排在第一位第二位的是byte，char </p>
<h2 id="2-2-Retained-Heap"><a href="#2-2-Retained-Heap" class="headerlink" title="2.2 Retained Heap"></a>2.2 Retained Heap</h2><p>retained heap值的计算方式是将retained set中的所有对象大小叠加。或者说，由于X被释放，导致其它所有被释放对象（包括被递归释放的）所占的heap大小。</p>
<p><strong>Retained Set</strong><br>当X被回收时那些将被GC回收的对象集合。  </p>
<p>比如:<br>一个ArrayList持有100,000个对象，每一个占用16 bytes，移除这些ArrayList可以释放16 x 100,000 + X，X代表ArrayList的shallow大小。相对于shallow heap，RetainedHeap可以更精确的反映一个对象实际占用的大小（因为如果该对象释放，retained heap都可以被释放）。</p>
<h2 id="2-3-Histogram"><a href="#2-3-Histogram" class="headerlink" title="2.3 Histogram"></a>2.3 Histogram</h2><p>可列出每一个类的实例数。支持正则表达式查找，也可以计算出该类所有对象的retained size</p>
<p><img src="/img/mat/histogram.png" width="670" height="470"></p>
<h2 id="2-4-Dominator-Tree"><a href="#2-4-Dominator-Tree" class="headerlink" title="2.4 Dominator Tree"></a>2.4 Dominator Tree</h2><p>Dominator Tree：对象之间dominator关系树。如果从GC Root到达Y的的所有path都经过X，那么我们称X dominates Y，或者X是Y的Dominator Dominator Tree由系统中复杂的对象图计算而来。从MAT的dominator tree中可以看到占用内存最大的对象以及每个对象的dominator。<br>我们也可以右键选择<strong>Immediate Dominator”</strong>来查看某个对象的dominator。</p>
<p><img src="/img/mat/dominator_tree.png" width="670" height="470">  </p>
<h2 id="2-5-Path-to-GC-Roots"><a href="#2-5-Path-to-GC-Roots" class="headerlink" title="2.5 Path to GC Roots"></a>2.5 Path to GC Roots</h2><p>查看一个对象到RC  Roots的引用链<br>通常在排查内存泄漏的时候，我们会选择exclude all phantom/weak/soft etc.references,<br>意思是查看排除虚引用/弱引用/软引用等的引用链，因为被虚引用/弱引用/软引用的对象可以直接被GC给回收，我们要看的就是某个对象否还存在Strong 引用链（在导出HeapDump之前要手动出发GC来保证），如果有，则说明存在内存泄漏，然后再去排查具体引用。</p>
<p><img src="/img/mat/path_to_gc_roots.png" width="670" height="470">  </p>
<p>###查看当前Object所有引用,被引用的对象：</p>
<p>####List objects with （以Dominator Tree的方式查看）<br>incoming references   引用到该对象的对象<br>outcoming references  被该对象引用的对象</p>
<p>####Show objects by class  （以class的方式查看）<br>incoming references   引用到该对象的对象<br>outcoming references  被该对象引用的对象</p>
<h2 id="2-6-OQL-Object-Query-Language"><a href="#2-6-OQL-Object-Query-Language" class="headerlink" title="2.6 OQL(Object Query Language)"></a>2.6 OQL(Object Query Language)</h2><p>类似SQL查询语言<br>Classes：Table<br>Objects：Rows<br>Fileds： Cols</p>
<p><code>select * from com.example.mat.Listener</code></p>
<p><strong>查找size＝0并且未使用过的ArrayList</strong><br><code>select * from java.util.ArrayList where size=0 and modCount=0</code>  </p>
<p><strong>查找所有的Activity</strong><br>select * from instanceof android.app.Activity</p>
<h2 id="2-7-内存快照对比"><a href="#2-7-内存快照对比" class="headerlink" title="2.7 内存快照对比"></a>2.7 内存快照对比</h2><p>方式一：Compare To Another Heap Dump  </p>
<p>直接进行比较<br><img src="/img/mat/mat_baseket_compare_1.png" width="670" height="470">  </p>
<p><img src="/img/mat/mat_baseket_compare_2.png" width="670" height="470">  </p>
<p><img src="/img/mat/mat_baseket_compare_3.png" width="670" height="470">  </p>
<p>方式二：Compare Baseket  </p>
<p><img src="/img/mat/mat_baseket_0.png" width="670" height="470">  </p>
<p><img src="/img/mat/mat_baseket_1.png" width="670" height="470">  </p>
<p><img src="/img/mat/mat_baseket_2.png" width="670" height="470">  </p>
<p><img src="/img/mat/mat_baseket_3.png" width="670" height="470">  </p>
<p>方式二比较根全面，可以直接给出百分比，而且还有更多比较选项</p>
<p>引出一个同事开发过程中的一个真实的例子，通过AS的Memory监测，他发现在微信支付完成后内存有突然大内存飙升的情况，后来通过Compare Baseket进行对比，发现内存增大了8M，并通过工具查看了bitmap的原图（如何查看Bitmap原图，可以参考高建武的文章：<a href="http://androidperformance.com/2015/04/11/AndroidMemory-Open-Bitmap-Object-In-MAT/" target="_blank" rel="external">打开MAT中的Bitmap原图</a>）。发现是微信回调页面一张背景图片占用了很大内存。</p>
<h2 id="-2"><a href="#-2" class="headerlink" title=" "></a> </h2><p>#三 MAT内存分析实战</p>
<h2 id="-3"><a href="#-3" class="headerlink" title=" "></a> </h2><p>##实战一 内存泄漏分析<br>关于如何安装和导出HeapDump文件 <a href="http://weibo.com/u/1315612820" target="_blank" rel="external">@高建武</a> 已经写了，这里就不啰嗦了，请移步：<br><a href="http://androidperformance.com/2015/04/11/AndroidMemory-Usage-Of-MAT/" target="_blank" rel="external">Android内存优化MAT使用入门</a><br><a href="http://androidperformance.com/2015/04/11/AndroidMemory-Usage-Of-MAT-Pro/" target="_blank" rel="external">Android内存优化MAT使用进阶</a><br>这里强调一点就是<strong>在导出prof文件前，先手动出发一次GC，这样可以确保只保存那些无法回收的对象内存快照</strong>，另外Android Studio提供自动转换。</p>
<h3 id="查找导致内存泄漏的类"><a href="#查找导致内存泄漏的类" class="headerlink" title="查找导致内存泄漏的类"></a>查找导致内存泄漏的类</h3><p>既然环境已经搭好，heap dump也成功倒入，接下来就去分析问题  </p>
<p>方式一：</p>
<ul>
<li>1.查找目标类<br>如果在开发过程中，你的目标很明确，比如就是查找自己负责的Activity，那么通过包名或者Class筛选，OQL搜索都可以快速定位到<br><strong>OQL：</strong><br>点击OQL图标,在窗口输入<code>select * from instanceof android.app.Activity</code> 并按Ctrl + F5或者!按钮执行</li>
</ul>
<ul>
<li><p>2.Paths to GC Roots：exclude all phantom/weak/soft etc.references<br>查看一个对象到RC  Roots是否存在引用链。要将虚引用/弱引用/软引用等排除，因为被虚引用/弱引用/软引用的对象可以直接被GC给回收.  </p>
</li>
<li><p>3.分析具体的引用为何没有被释放，并进行修复</p>
</li>
</ul>
<p><strong>小技巧：</strong></p>
<ul>
<li><p>当目的不明确时，可以直接定位到RetainedHeap最大的Object，Select incoming references ，查看引用链，定位到可疑的对象然后Path to GC Roots进行引用链分析</p>
</li>
<li><p>如果大对象筛选看不出区别，可以试试按照class分组，再寻找可疑对象进行GC引用链分析  </p>
</li>
<li><p>直接按照包名直接查看GC引用链，可以一次性筛选多个类，但是如下图所示，选项是 <code>Merge Shortest Path to GCRoots</code>，这个选项具体不是很明白，不过也能筛选出存在GC引用链的类，这种方式的准确性还待验证。</p>
</li>
</ul>
<p><img src="/img/mat/mat_gc_roots_package.png" width="670" height="470">  </p>
<p>所以有时候进行MAT分析还是需要一些经验，能够帮你更快更准确的定位。</p>
<h2 id="-4"><a href="#-4" class="headerlink" title=" "></a> </h2><p>##实战二  集合使用率分析<br>集合在开发中会经常使用到，如何选择合适的数据结构的集合，初始容量是多少（太小，可能导致频繁扩容），太大，又会开销跟多内存。当这些问题不是很明确时或者想查看集合的使用情况时，可以通过MAT来进行分析。</p>
<p>###1.筛选目标对象<br><img src="/img/mat/collection_usage_1.png" width="670" height="470">  </p>
<h2 id="-5"><a href="#-5" class="headerlink" title=" "></a> </h2><p>###2.Show Retained Set（查找当X被回收时那些将被GC回收的对象集合）<br><img src="/img/mat/collection_usage_2.png" width="670" height="470">  </p>
<h2 id="-6"><a href="#-6" class="headerlink" title=" "></a> </h2><p>###3.筛选指定的Object（Hash Map，ArrayList）并按照大小进行分组<br><img src="/img/mat/collection_usage_3.png" width="670" height="470">  </p>
<h2 id="-7"><a href="#-7" class="headerlink" title=" "></a> </h2><p>###4.查看指定类的Immediate dominators<br><img src="/img/mat/collection_usage_4.png" width="670" height="470">  </p>
<h3 id="Collections-fill-ratio"><a href="#Collections-fill-ratio" class="headerlink" title="Collections fill ratio"></a>Collections fill ratio</h3><p>这种方式只能查看那些具有预分配内存能力的集合，比如HashMap，ArrayList。计算方式：”size / capacity”</p>
<p><img src="/img/mat/collection_usage_fill_radio_1.png " width="670" height="470">  </p>
<h2 id="-8"><a href="#-8" class="headerlink" title=" "></a> </h2><p><img src="/img/mat/collection_usage_fill_radio_2.png" width="670" height="470">  </p>
<p>我们可以与方式一中最后一张图所得的结果对比，一个是具体数，另一个有比例，是对应的。</p>
<p>##实战三  Hash相关性能分析<br>当Hash集合中过多的对象返回相同Hash值的时候，会严重影响性能（Hash算法原理自行搜索），这里来查找导致Hash集合的碰撞率较高的罪魁祸首。</p>
<h3 id="1-Map-Collision-Ratio"><a href="#1-Map-Collision-Ratio" class="headerlink" title="1. Map Collision Ratio"></a>1. Map Collision Ratio</h3><p>检测每一个HashMap或者HashTable实例并按照碰撞率排序<br>碰撞率 = 碰撞的实体/Hash表中所有实体</p>
<p><img src="/img/mat/map_collision_1.png" width="670" height="470">  </p>
<h2 id="-9"><a href="#-9" class="headerlink" title=" "></a> </h2><h3 id="2-查看Immediate-dominators"><a href="#2-查看Immediate-dominators" class="headerlink" title="2. 查看Immediate dominators"></a>2. 查看Immediate dominators</h3><p><img src="/img/mat/map_collision_2.png" width="670" height="470"><br><img src="/img/mat/map_collision_4.png" width="670" height="470">  </p>
<h2 id="-10"><a href="#-10" class="headerlink" title=" "></a> </h2><h3 id="通过HashEntries查看key-value"><a href="#通过HashEntries查看key-value" class="headerlink" title="通过HashEntries查看key value"></a>通过HashEntries查看key value</h3><p><img src="/img/mat/map_collision_3.png" width="670" height="470">  </p>
<p>##Array等其它集合分析方法类似</p>
<h2 id="-11"><a href="#-11" class="headerlink" title=" "></a> </h2><p>##实战四 通过OQL快速定位未使用的集合 ##</p>
<p>###1. 通过OQL查询empty并且未修改过的集合：<br><code>select * from java.util.ArrayList where size=0 and modCount=0</code><br>类似的<br><code>select * from java.util.HashMap where size=0 and modCount=0</code><br><code>select * from java.util.Hashtable where count=0 and modCount=0</code></p>
<h2 id="-12"><a href="#-12" class="headerlink" title=" "></a> </h2><p><img src="/img/mat/empty_list_1.png" width="670" height="470">  </p>
<h2 id="-13"><a href="#-13" class="headerlink" title=" "></a> </h2><p>###2. Immediate dominators(查看引用者)<br><img src="/img/mat/empty_list_3.png" width="670" height="470">  </p>
<h3 id="计算空集合的Retained-Size值，查看浪费了多少内存"><a href="#计算空集合的Retained-Size值，查看浪费了多少内存" class="headerlink" title="计算空集合的Retained Size值，查看浪费了多少内存"></a>计算空集合的Retained Size值，查看浪费了多少内存</h3><p><img src="/img/mat/empty_list_2.png" width="670" height="470">  </p>
<h2 id="-14"><a href="#-14" class="headerlink" title=" "></a> </h2><p>#四 LeakCanary － 强大的内存泄漏分析工具<br><a href="https://github.com/square/leakcanary" target="_blank" rel="external">LeakCanary</a>是square开源的内存泄漏排查项目，很强大，内部会帮你手动触发GC然后分析强引用的GC引用链。如果存在GC引用链，说明有内存泄漏，会在你的手机上弹出个提示框，并且会自动在你手机上创建一个App。记录了每一次内存泄漏的GC引用链，通过它可以直接定位到内存泄漏的未释放的对象。原理和通过MAT分析内存泄漏是一样的，只是它完全自动化，省去了很大一部分的工作量。强烈建议集成LeakCanary。LeakCanary肯定是无法取代强大的MAT，因为它只是只分析内存泄漏，从上面的实战中，我们可以看到，MAT的强大之处是可以对内存中的任何信息进行分析。所以掌握MAT也是非常有必要的。另外在之前用的LeakCanary中发现在解析Heap Dump内存快照的时候会出现问题，存在小bug。</p>
<p>##参考文档<br><a href="http://wiki.eclipse.org/index.php/MemoryAnalyzer" target="_blank" rel="external">MemoryAnalyzer Wiki</a><br><a href="http://androidperformance.com/2015/04/11/AndroidMemory-Usage-Of-MAT/" target="_blank" rel="external">Android内存优化MAT使用入门</a><br><a href="http://androidperformance.com/2015/04/11/AndroidMemory-Usage-Of-MAT-Pro/" target="_blank" rel="external">Android内存优化MAT使用进阶</a><br><a href="http://eclipsesource.com/blogs/2013/01/21/10-tips-for-using-the-eclipse-memory-analyzer/" target="_blank" rel="external">10-tips-for-using-the-eclipse-memory-analyzer</a><br><a href="http://scn.sap.com/people/krum.tsvetkov/blog/2007/11/05/analyzing-java-collections-usage-with-memory-analyzer" target="_blank" rel="external">analyzing-java-collections-usage-with-memory-analyzer</a><br><a href="https://sites.google.com/site/eclipsebiz/How-to-Find-Memory-Leaks" target="_blank" rel="external">How-to-Find-Memory-Leaks</a><br><a href="http://docwiki.cisco.com/wiki/How_to_analyze_heap_dumps" target="_blank" rel="external">How_to_analyze_heap_dumps</a><br><a href="http://scn.sap.com/people/krum.tsvetkov/blog/2007/08/02/memory-for-nothing" target="_blank" rel="external">memory-for-nothing</a>  </p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;#前言#&lt;br&gt;尽管Java虚拟机可以帮我们对内存进行回收，但是其回收的是Java虚拟机不再引用的对象。很多时候我们使用系统的IO流，Cursor，Receiver如果不及时释放，就会导致内存泄漏，这些场景是常见的，一般开发人员也都能够避免。但是，很多时候内存泄漏的现象不是很明显，比如内部类，Handler相关的使用导致的内存泄漏，或者你使用了第三方library的一些引用，比较消耗资源，但又不是像系统资源那样会引起你足够的注意去手动释放它们。当代码越来越多，如果结构不是很清晰，即使是常见的资源也有可能略掉，从而导致内存泄漏。内存泄漏很有可能会导致内存溢出，就是常说的OOM，从而导致应用crash，给用户一种糟糕的体验。该篇文章就是介绍内存分析工具MAT以及实战来帮你更好的分析内存问题。前面是相关概念介绍，最后通过内存泄漏分析，集合使用率，Hash性能分析，OQL快读定位空集合实战演示如何在实际应用中使用MAT。（通过一些静态检测也可以在开发期发现一些内存泄漏的问题，后面会有一些静态检测的文章）&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/categories/Android/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
    
      <category term="性能优化" scheme="http://www.lightskystreet.com/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>如何高效的学习Android动画</title>
    <link href="http://www.lightskystreet.com/2015/08/31/android_how_to_lean_anim_efficiently/"/>
    <id>http://www.lightskystreet.com/2015/08/31/android_how_to_lean_anim_efficiently/</id>
    <published>2015-08-30T16:00:00.000Z</published>
    <updated>2015-09-01T01:58:58.000Z</updated>
    
    <content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>本篇文章就是在知乎回答的一个问题，这里记录下，以后看到我博客的朋友也可以看到。<br>曾经也同楼主一样，对Android中的动画不是很清楚，什么帧，Tween，属性等等，很多知识，也很琐碎，后来觉得动画这一块是很多开发人员绕不过的吧，虽然每次通过google或者百度就可以基本满足需求，但是总觉得太零散，太模糊。其实当时系统学习Android动画还有一部分原因：将来成为一个android组件开发工程师，如果想做出一些高性能，nice的动画就必须对动画的基础知识有深入的理解，因此就打算系统的学习一下。经过一段时间的专业学习，android动画的整体以及简单的动画实现都不是问题了，后来没有再深入，是因为自己的兴趣方向变了。现在简单分享一些自己的学习成果和心得吧。</p>
<a id="more"></a>
<h2 id="个人整个学习过程中的产出的文章"><a href="#个人整个学习过程中的产出的文章" class="headerlink" title="个人整个学习过程中的产出的文章"></a>个人整个学习过程中的产出的文章</h2><ul>
<li><a href="http://www.lightskystreet.com/2014/12/03/view-and-property-anim-knowldege-and-compare/">动画系列 - 传统View动画与Property动画基础及比较</a>  </li>
<li><a href="http://www.lightskystreet.com/2014/12/04/propertyview-anim-analysis/">动画系列 - PropertyAnim 详解</a>  </li>
<li><a href="http://www.lightskystreet.com/2014/12/10/propertyview-anim-practice/">动画系列 - PropertyAnim 实际应用</a>  </li>
<li><a href="http://www.lightskystreet.com/2014/12/15/viewpager-anim/">动画系列 - ViewPager动画</a>  </li>
<li><a href="http://www.lightskystreet.com/2015/05/23/anim_basic_knowledge/">Android 动画基础</a> （由 <a href="http://www.zhihu.com/people/033aaa7b41577bdf4f5344943a28dbb0" target="_blank" rel="external">@Trinea</a> 发起的<a href="http://codekk.com/open-source-project-analysis" target="_blank" rel="external">codeKK</a> 项目下的开源项目原理分析项目<a href="https://github.com/android-cn/android-open-project-analysis" target="_blank" rel="external">android-cn/android-open-project-analysis</a>  二期中，很多分析项目涉及到了动画，所以该篇主要是对PropertyAnim详解和基础篇中的一些知识进行整理，作为二期的动画公共知识，<a href="http://codekk.com/open-source-project-analysis" target="_blank" rel="external">codeKK</a> 绝对是超级棒的项目，大家可以多关注）</li>
</ul>
<p>从<a href="http://www.lightskystreet.com/2014/12/03/view-and-property-anim-knowldege-and-compare/">传统View动画与Property动画基础及比较</a> 以及<a href="http://www.lightskystreet.com/2015/05/23/anim_basic_knowledge/">Android 动画基础</a> 这两篇文章，你可以对android动画总体有些了解，<a href="http://www.lightskystreet.com/2014/12/04/propertyview-anim-analysis/">PropertyAnim 详解</a>这一篇则是专门介绍了3.0出现的属性动画，其中也涉及到了<a href="https://github.com/JakeWharton" target="_blank" rel="external">JakeWharton</a>大神为3.0之前实现的兼容库<a href="https://github.com/JakeWharton/NineOldAndroids" target="_blank" rel="external">NineOldAndroids</a>。 </p>
<p>通过ViewPager来实现动画效果的方式越来越多，一些视差效果也确实很赞，比如雅虎天气的视差效果，知乎导航界面中元素的视差，关于它们的实现原理，在 <a href="http://www.lightskystreet.com/2014/12/15/viewpager-anim/">ViewPager动画</a> 这篇中有详细的分析，其中也提到了GitHub上一些和ViewPager动画类似的实现，也分析了它们之间的区别，具体可以参考文章。</p>
<p><a href="http://www.lightskystreet.com/2014/12/10/propertyview-anim-practice/">PropertyAnim 实际应用</a>主要介绍了一些简单API的使用，亮点是其中介绍了很多GitHub 上的动画项目，其中实现多数使用了<a href="https://github.com/JakeWharton/NineOldAndroids" target="_blank" rel="external">NineOldAndroids</a>兼容库，可以作为不错的学习资料。</p>
<p>上面几篇文章中都有非常详细的介绍，就不多说了，因为文章中对于一些概念，使用，原理介绍的确实太详细了，现在想起来，当时钻的确实有点深了，比如<a href="http://www.lightskystreet.com/2014/12/04/propertyview-anim-analysis/">PropertyAnim 详解</a>这篇文章，对属性动画中的ValueAnimator，Evaluators，Interpolators的介绍以及TimeInterpolator和TypeEvaluator的比较等等，具体的可以参考文章。</p>
<p>这几篇文章看下来，你应该对android动画有一些更系统更深入的认识了。基本的动画实现应该没啥难度了。每篇文章的信息量很是很大的，因为在学习过程中主要是通过大量的GitHub动画项目，也参考了不少资料，在文章结尾处有提及。 </p>
<h2 id=""><a href="#" class="headerlink" title=" "></a> </h2><p>#进阶#<br>如果你还想进阶，这里再分享一些不错的项目，这些项目都是在android动画基础上建立起来的，所以看他们的源码，完全没有难度.  </p>
<p>首先推荐一个GitHub组织：<a href="https://github.com/Yalantis" target="_blank" rel="external">Yalantis</a>，该组织开源了很多特效的项目。很新颖，很有创意，绝对眼前一亮，可以作为不错的学习资料：</p>
<h3 id="Yalantis"><a href="#Yalantis" class="headerlink" title="Yalantis"></a>Yalantis</h3><ul>
<li><a href="https://github.com/Yalantis/GuillotineMenu-Android" target="_blank" rel="external">Yalantis/GuillotineMenu-Android</a> 锉刀效果，不过我看跟拍电影时的打板有点像</li>
<li><a href="https://github.com/Yalantis/Phoenix" target="_blank" rel="external">Yalantis/Phoenix</a>  很有创意的下拉动画，“升起的太阳”</li>
<li><a href="https://github.com/Yalantis/Taurus" target="_blank" rel="external">Yalantis/Taurus</a> · GitHub 也是下拉动画，“滑翔机”</li>
<li><a href="https://github.com/Yalantis/Context-Menu.Android" target="_blank" rel="external">Yalantis/Context-Menu.Android</a>  菜单动画，不过个人觉得貌似有点太炫技了</li>
<li><a href="https://github.com/Yalantis/Side-Menu.Android" target="_blank" rel="external">Side-Menu</a> 同样是菜单动画，不过加上了Reveal的转场效果</li>
<li><a href="https://github.com/Yalantis/FlipViewPager.Draco" target="_blank" rel="external">Yalantis/FlipViewPager.Draco</a> 折叠动画</li>
<li><a href="https://github.com/Yalantis/Euclid" target="_blank" rel="external">Yalantis/Euclid</a> 转场动画，感觉可以归为MaterialDesign设计风格</li>
</ul>
<h3 id="daimajia-代码家"><a href="#daimajia-代码家" class="headerlink" title="daimajia (代码家)"></a><a href="https://github.com/daimajia" target="_blank" rel="external">daimajia (代码家)</a></h3><ul>
<li><a href="https://github.com/daimajia/AndroidViewAnimations" target="_blank" rel="external">daimajia/AndroidViewAnimations</a> 动画集合，</li>
<li><a href="https://github.com/daimajia/AndroidImageSlider" target="_blank" rel="external">daimajia/AndroidImageSlider</a> ViewPager动画集合</li>
<li><a href="https://github.com/daimajia/AnimationEasingFunctions" target="_blank" rel="external">daimajia/AnimationEasingFunctions</a> 定义了很多Evaluator，你也可以寻找自己的函数来实现更赞的动画</li>
</ul>
<h3 id="很棒的纸飞机"><a href="#很棒的纸飞机" class="headerlink" title="很棒的纸飞机"></a>很棒的纸飞机</h3><p><a href="https://github.com/race604/FlyRefresh" target="_blank" rel="external">race604/FlyRefresh</a> 纸飞机，效果真是sweet，配上Blog，看看作者的思路和实现原理：<a href="http://www.race604.com/flyrefresh/" target="_blank" rel="external">FlyRefresh</a></p>
<p>关于我的几篇动画文章，如有不准确的地方，还望指正，希望对您和以后有兴趣学习动画的朋友有些帮助。</p>
<p>其它更多动画相关学习资料或者不错的开源库后面补充吧，还是那句话，原理都一样，脑洞不够大，去<a href="https://dribbble.com/" target="_blank" rel="external">Dribbble</a>找找灵感吧。</p>
<h2 id="-1"><a href="#-1" class="headerlink" title=" "></a> </h2><h2 id="分享一下最近star的几个不错的动画库"><a href="#分享一下最近star的几个不错的动画库" class="headerlink" title="分享一下最近star的几个不错的动画库"></a>分享一下最近star的几个不错的动画库</h2><ul>
<li><a href="https://github.com/TakeoffAndroid/AppIntroAnimation" target="_blank" rel="external">TakeoffAndroid/AppIntroAnimation</a></li>
<li><a href="https://github.com/recruit-lifestyle/WaveSwipeRefreshLayout" target="_blank" rel="external">recruit-lifestyle/WaveSwipeRefreshLayout</a></li>
<li><a href="https://github.com/recruit-lifestyle/BeerSwipeRefresh" target="_blank" rel="external">recruit-lifestyle/BeerSwipeRefresh</a></li>
<li><a href="https://github.com/dodola/MetaballLoading" target="_blank" rel="external">dodola/MetaballLoading</a></li>
<li><a href="https://github.com/Q42/AndroidScrollingImageView" target="_blank" rel="external">Q42/AndroidScrollingImageView</a></li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;h1 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h1&gt;&lt;p&gt;本篇文章就是在知乎回答的一个问题，这里记录下，以后看到我博客的朋友也可以看到。&lt;br&gt;曾经也同楼主一样，对Android中的动画不是很清楚，什么帧，Tween，属性等等，很多知识，也很琐碎，后来觉得动画这一块是很多开发人员绕不过的吧，虽然每次通过google或者百度就可以基本满足需求，但是总觉得太零散，太模糊。其实当时系统学习Android动画还有一部分原因：将来成为一个android组件开发工程师，如果想做出一些高性能，nice的动画就必须对动画的基础知识有深入的理解，因此就打算系统的学习一下。经过一段时间的专业学习，android动画的整体以及简单的动画实现都不是问题了，后来没有再深入，是因为自己的兴趣方向变了。现在简单分享一些自己的学习成果和心得吧。&lt;/p&gt;
    
    </summary>
    
      <category term="Android" scheme="http://www.lightskystreet.com/categories/Android/"/>
    
      <category term="Android动画" scheme="http://www.lightskystreet.com/categories/Android/Android%E5%8A%A8%E7%94%BB/"/>
    
    
      <category term="Android" scheme="http://www.lightskystreet.com/tags/Android/"/>
    
      <category term="Anim" scheme="http://www.lightskystreet.com/tags/Anim/"/>
    
  </entry>
  
</feed>