抽象的目的绝对不是复用，而是为了清晰的设【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】计。从某种意义上讲，抽象分为两种，一种是【访问 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之后，才有了真正的抽象代码。例【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】如：

abstract class Some {
  abstract stay(): void
}

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

在具体业务中，哪些内容可以抽象，哪些不可【原创不易，请尊重版权】【原创内容，转载请注明出处】以呢？

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

最麻烦的是界面和交互的抽象。【关注微信公众号：wwwtangshuangnet】

先看下交互的抽象，由于交互动作往往会引起【本文受版权保护】原创内容，盗版必究。界面的变化，所以我们在对交互进行建模时，【作者：唐霜】【未经授权禁止转载】就必须预留下可产生界面变化的abstra原创内容，盗版必究。【转载请注明来源】ct成员，从而可以使界面产生变化。例如：

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

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

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

上面代码中，我们预留了一个confirm【转载请注明来源】【原创内容，转载请注明出处】方法，对于具体的某个view而言，必须扩【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。展这个confirm方法来，为什么要留呢【本文受版权保护】【作者：唐霜】？因为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.netP上。但是我们也不是不能做，其前提是开发【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】者，或者项目的架构师，在前期规划了非常细【原创不易，请尊重版权】【转载请注明来源】腻的业务组件，我们所有的业务开发，基于已【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。有的业务组件进行，我们写代码，更想写配置【原创内容，转载请注明出处】【版权所有，侵权必究】或DSL，比如下面：

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

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