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

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

此类处理虽然可行，但是在最终代码中会多出转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】来许多没有用的代码，增加代码量。只有在我【版权所有，侵权必究】【原创内容，转载请注明出处】们引入ts之后，才有了真正的抽象代码。例【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。如：

abstract class Some {
  abstract stay(): void
}

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

在具体业务中，哪些内容可以抽象，哪些不可【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。以呢？

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

最麻烦的是界面和交互的抽象。

先看下交互的抽象，由于交互动作往往会引起【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。界面的变化，所以我们在对交互进行建模时，【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net就必须预留下可产生界面变化的abstra未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】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而言，必须扩转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net展这个confirm方法来，为什么要留呢本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net？因为confirm往往需要弹出一个对话【版权所有】唐霜 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的状态管【未经授权禁止转载】【转载请注明来源】理模式进行编程，而且对于使用方来说，一个【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。动作的方法太多了，在实现时，不仅要调用d本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。eleteItem还要再调用handle【作者：唐霜】【原创不易，请尊重版权】DeleteItem。不过，从另外一个角【本文受版权保护】【本文受版权保护】度看，这似乎又是正确的一种做法。

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

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

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