抽象的目的绝对不是复用，而是为了清晰的设本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。计。从某种意义上讲，抽象分为两种，一种是【原创不易，请尊重版权】【版权所有，侵权必究】绝对抽象，只有神态，没有实体，另一种是轮【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。廓抽象，或者半抽象，有了基本的架子，留下【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】空间去具体化。前一种我们常称之为接口in【作者：唐霜】【原创内容，转载请注明出处】terface，后一种我们常称之为抽象类【作者：唐霜】【作者：唐霜】abstract class。对于前端代原创内容，盗版必究。未经授权，禁止复制转载。码而言，在传统前端开发模式中，不存在这两未经授权，禁止复制转载。【未经授权禁止转载】种中的任何一种，对于abstract c【作者：唐霜】【关注微信公众号：wwwtangshuangnet】lass则可能存在一些雏形，例如：

class Some {
  stay() {
    throw new Error('stay should be overrided')
  }
}

此类处理虽然可行，但是在最终代码中会多出本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】来许多没有用的代码，增加代码量。只有在我【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】们引入ts之后，才有了真正的抽象代码。例著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】如：

abstract class Some {
  abstract stay(): void
}

这段代码定义了一个抽象类，它不能被new本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。实例化，只能被extends扩展。扩展时本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】，带有abstract前缀的成员必须被实【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】现，否则编译阶段会报错，而在最终生成的代【作者：唐霜】【未经授权禁止转载】码中，不存在这些abstract成员，这【未经授权禁止转载】转载请注明出处：www.tangshuang.net样就可以使代码量最小化。

在具体业务中，哪些内容可以抽象，哪些不可转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。以呢？

其实对于前端而言，基于interface原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】的抽象（业务层面）几乎没有，我们很少会去【转载请注明来源】【原创不易，请尊重版权】写一个用于描述业务的interface，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】而且这完全没有必要。我们大部分情况下使用【原创不易，请尊重版权】【转载请注明来源】abstract class进行抽象，甚【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net至在大部分情况下，不需要abstract本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。，直接使用class进行抽象。这里抽象脱转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net离了技术层面的抽象，而是对业务进行抽象，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net同时由于大部分前端场景中，同一业务是固定【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net不变的，因此，这类抽象可以被具体实现。例【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net如对于同一对象实体，我们直接对其进行建模【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。。再例如，我们直接对数据请求进行建模。对本文作者：唐霜，转载请注明出处。原创内容，盗版必究。于数据的操作，我们进行建模。总之，你会发【转载请注明来源】【关注微信公众号：wwwtangshuangnet】现，抛开界面和交互的一切，都是可以进行建【转载请注明来源】【本文受版权保护】模处理的，这个部分全部可以抽象出来，在代【本文受版权保护】著作权归作者所有，禁止商业用途转载。码中形成一块封闭的可扩展的代码块，需要时【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。被取出来使用，不需要时不import，对【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】当前毫无影响。

最麻烦的是界面和交互的抽象。【转载请注明来源】

先看下交互的抽象，由于交互动作往往会引起转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。界面的变化，所以我们在对交互进行建模时，本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net就必须预留下可产生界面变化的abstra【原创内容，转载请注明出处】未经授权，禁止复制转载。ct成员，从而可以使界面产生变化。例如：

abstract class SomeView extends View {
  @inject(SomeController)
  controller: SomeController

  abstract confirm(message: string, onOk: Function): void

  deleteItem(id) {
    this.confirm('确定删除吗？', () => {
      // 执行删除
    })
  }
}

上面代码中，我们预留了一个confirm本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net方法，对于具体的某个view而言，必须扩著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。展这个confirm方法来，为什么要留呢转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。？因为confirm往往需要弹出一个对话原创内容，盗版必究。【未经授权禁止转载】框，同时，这个对话框一定是一个中间态，用本文版权归作者所有，未经授权不得转载。【本文受版权保护】户点击它的按钮之后，一定还会有后续界面变【本文受版权保护】转载请注明出处：www.tangshuang.net化。这种界面的流动过程，无法通过简单的处【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】理来实现。当然，如果你想具体化，还可以借【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】助react的state，例如：

class SomeView extends View {
  state = {
    showConfirm: false,
    deleteItemId: null,
  }

  deleteItem(id) {
    this.setState({ showConfirm: true, deleteItemId: id })
  }

  handleDeleteItem() {
    // 执行删除动作
  }
}

通过以上方式确实可以做到提供完整的动作，原创内容，盗版必究。【转载请注明来源】但是这就意味着必须按照react的状态管【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。理模式进行编程，而且对于使用方来说，一个【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】动作的方法太多了，在实现时，不仅要调用d【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。eleteItem还要再调用handle原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】DeleteItem。不过，从另外一个角【转载请注明来源】【版权所有，侵权必究】度看，这似乎又是正确的一种做法。

最后看下界面的抽象。这个时最难的，因为不本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。同端端界面呈现是不一样的。比如PC和AP转载请注明出处：www.tangshuang.net【本文受版权保护】P上。但是我们也不是不能做，其前提是开发【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。者，或者项目的架构师，在前期规划了非常细【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。腻的业务组件，我们所有的业务开发，基于已本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】有的业务组件进行，我们写代码，更想写配置【未经授权禁止转载】未经授权，禁止复制转载。或DSL，比如下面：

<Page>
  <ProjectBasicInfo />
  <ProjectMembers />
  <ProjectDeals />
  <Tabs>
    <CompanyInfo />
    <FinancingInfo />
  </Tabs>
</Page>

这样一段代码，更像是一个页面的结构描述，【本文受版权保护】著作权归作者所有，禁止商业用途转载。至于每一个部分都具体展示什么内容，怎么展【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】示，界面交互怎样，PC和APP上的差异，【原创不易，请尊重版权】【本文受版权保护】全靠业务组件内自己去实现，通过这种方式来转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。进行界面的抽象，可以最大程度的抹平不同端转载请注明出处：www.tangshuang.net原创内容，盗版必究。的差异，但是对团队和架构师的要求会比较高【转载请注明来源】【关注微信公众号：wwwtangshuangnet】，当然收益也是显而易见的，就是效率很高。