最佳的UI更新套路

   <p>之前有段时间写Windows桌面程序悟出的道理。</p>    <p>是这样的，有时候，我们需要创建一个符合业务的View，或者称为UI对象，比如，即时通讯软件的好友列表里面的每个item，那么这个item要有头像，名字，简短描述三个数据项。那么，我们这个View对象，就得有三个对应的方法来设置这三个属性，然后View显示的时候，就显示出我们最新的数据就好了。</p>    <p>最最最开始的时候，我都是耿直的写成这样。</p>    <pre>  <code class="language-java">// 以下是伪代码的形式，并不严谨  class UserItemView extends View {      ImageView mAvatar;      TextView mName;      TextView mDesc;            public void setAvatar(Bitmap avatarImage) {          mAvatar.setImage(avatarImage);      }            public void setName(String name) {          mName.setText(name);      }            public void setDesc(String desc) {          mDesc.setText(desc);      }  }</code></pre>    <p>在最开始的时候，这样是OK的，看起来非常完美，没有任何问题。如果某个用户的数据变了，就更新某个数据就好了。</p>    <p>好，现在问题了，这样写的问题在于，当状态/数据之间相互依赖对UI的显示产生影响时，那么就会出问题，代码会混乱。</p>    <p>我们现在提个这样的需求， 如果描述（desc）是空的，就显示出头像，如果不是空的，就不显示头像 。</p>    <p>需求确实很奇怪，但是实际的工作中一定会遇到类似的情况。</p>    <p>那么，首先我们 <strong>想当然</strong> 的改动一下代码吧。</p>    <pre>  <code class="language-java">class UserItemView extends View {      ImageView mAvatar;      TextView mName;      TextView mDesc;            String mDescData;            public void setAvatar(Bitmap avatarImage) {          mAvatar.setImage(avatarImage);      }            public void setName(String name) {          mName.setText(name);      }            public void setDesc(String desc) {          mDescData = desc;          if (mDescData == null || mDescData .equals("")) {              mAvatar.setVisible(true);          } else {              mAvatar.setVisible(false);          }          mDesc.setText(mDescData );      }  }</code></pre>    <p>你看，现在设置描述的方法里要去管头像的显示情况，这就很恶心了。如果有更多的数据项和状态，更多的UI控件，他们之间有非常多的依赖关系，如果按这样的写法，你的每个方法里面的逻辑都会变得非常恶心，复杂。甚至，设置某个UI的状态还需要依赖其他的数据项，你没办法，只能把无关的数据当参数传入，就会变成这样。</p>    <pre>  <code class="language-java">// ！！！爆炸！！！为什么头像要关注其他的数据！！！  public void setAvatar(Bitmap avatarImage, String desc) {      mAvatar.setImage(avatarImage);      if (desc== null || desc.equals("")) {          mAvatar.setVisible(true);      } else {          mAvatar.setVisible(false);      }  }</code></pre>    <p>当时，我那个UI已经变得非常恶心了，在这样的情况下，我终于意识到，对UI对象的更新，不能 <strong>就地</strong> 去做，UI对象的更新，应该用一个统一的方法来做，而会改变UI显示情况的那些 setXXXX 方法，只做两件事，一是把数据设到这个对象的成员属性上，另一件事就是调用统一的方法来更新UI。</p>    <p>其实一个标准的设计一直在眼前，直到那一刻，我才意识到和真正的理解。那就是Android中的 View 。Android中的每个 View 的子类，都有超级多的 set 方法，比如 TextView ，就有 setText ， setTextColor 等等。它就是每个set方法，实际上是给这个对象做一个数据上的变化，然后就不管了。等到系统来调用 OnDraw 方法的时候，在 OnDraw 方法中统一的来更新UI。</p>    <p>接下来就简单了。我们的代码改成这样：</p>    <pre>  <code class="language-java">class UserItemView extends View {      ImageView mAvatar;      TextView mName;      TextView mDesc;            String mNameData;      String mDescData;      Bitmap mAvatarData;            public void updateView() {          mAvatar.setImage(mAvatarData);          if (mDescData== null || mDescData.equals("")) {              mAvatar.setVisible(true);          } else {              mAvatar.setVisible(false);          }                    mDesc.setText(mDescData);                    mName.setText(mNameData);      }            public void setAvatar(Bitmap avatarImage) {          mAvatarData = avatarImage;          updateView();      }            public void setName(String name) {          mNameData = name;          updateView();      }            public void setDesc(String desc) {          mDescData = desc;          updateView();      }  }</code></pre>    <p>注意到，添加了一个 updateView 方法，这个方法专门用来将数据更新到UI上，这样写，其他 set 方法一律只做把数据存进来的事情， updateView 方法专门根据当前的数据状态更新UI，这样set方法就干净整洁。而逻辑再复杂的显示逻辑，都不用怕，在 updateView 里面搞就行了。</p>    <p>我曾经并且一直在维护的一个Activity，它大概有15+个View，20-30个数据和状态，这些数据和状态会谜一般的印象着这些view的显示。当时年轻不懂事，就耿直的在数据变化的后面（下一行），立马就更新UI的状态。有如下这些位置吧：</p>    <ul>     <li> <p>点击事件</p> </li>     <li> <p>系统回调</p> </li>     <li> <p>网络请求回调</p> </li>     <li> <p>定时器，handler</p> </li>    </ul>    <p>这么多地方都在更新数据，并且改变UI，维护起来简直要屎。</p>    <p>后来，在我领悟到上面这个技巧后，我重构了一波，里面有个超级大的updateView方法，然后对每个View进行更新。</p>    <p>这里有另一个小技巧，就是你有1w个View，和1w个状态，你按状态分类写，还是按View分类写。这个意思就是：按正常人思维吧，比如你的页面有两种模式，一般人就会写</p>    <pre>  <code class="language-java">if (mode == A) {      viewA.xxxxxx      viewB.xxxxxx      ...  } else if (mode == B) {      viewA.xxxxxx      viewB.xxxxxx      ...  }</code></pre>    <p>这样写又出问题了，少年，你以为你的状态只有两种吗？你以为每个UI对象，就只依赖一个状态吗？会这么优雅的刚好分布在if和else里面吗？你错了，需求这个东西啊，是非常恶心的，完全不符合逻辑的。</p>    <p>这样写呢，当你状态很多很多的时候，你很难去安排这个view的更新放哪里，如果有新加的状态又影响到它。为了不影响到之前的逻辑，你往往就是再后面再加上一行，这样多了也是难以维护的。</p>    <p>那样怎么做呢？最简单，按View来分类写。你有1w个View吧，那就挨个挨个来，先把第一个View处理好了，第一个View受那些影响呢？全部写出来，if-else也好，什么都好，反正最开始这几行代码，先把View1搞定。</p>    <p>然后再一次写View2，View3的逻辑，这样唯一的缺点就是，你的判断得重复写。看上去很累赘，view1和view2，很可能他们的显示逻辑是相同的，你非常想把他们写在一个if-else里，但是我建议你不要这么做，为了最高的变通性，请将他们分开写。</p>    <p>当你日后维护的时候，哪个View出问题了，你只要找到那一坨就好了，别的都不需要管。</p>    <p>祝各位工作愉快！</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2e5034f54d677d82f4ec7699a407df40.jpg"></p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000007290068</p>    <p> </p>