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

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

此类处理虽然可行，但是在最终代码中会多出【未经授权禁止转载】【原创不易，请尊重版权】来许多没有用的代码，增加代码量。只有在我【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】们引入ts之后，才有了真正的抽象代码。例【本文首发于唐霜的博客】【原创内容，转载请注明出处】如：

abstract class Some {
  abstract stay(): void
}

这段代码定义了一个抽象类，它不能被new本文版权归作者所有，未经授权不得转载。【转载请注明来源】实例化，只能被extends扩展。扩展时原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，带有abstract前缀的成员必须被实本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】现，否则编译阶段会报错，而在最终生成的代本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】码中，不存在这些abstract成员，这本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。样就可以使代码量最小化。

在具体业务中，哪些内容可以抽象，哪些不可【本文受版权保护】转载请注明出处：www.tangshuang.net以呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

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