低成本可复用前端框架——Linke

业务背景

目前团队内的开发模式多是面向组件的，UI层和逻辑层均强耦合在一起，由于业务的差异性，往往很难完全复用。

• 闲鱼前端业务处在高速发展不断尝试的阶段，如何能更快更稳定地完成需求，更好的支撑业务发展绝对是一个值得探索的问题。

• 在接手一个复杂的老业务代码时，经过较多人的修改，往往可维护性较差，有时只想修改某个小地方却需要较大的理解成本，所以用一套统一的组件开发规范在长期维护中显得格外重要。

• 闲鱼技术体系经历了从weex、rax0.x到现在rax1.x的变更，中间有过一些前端资产的积累，但是由于迁移的成本后期都不再维护，如何用更小的成本让业务层平稳过渡到新的技术体系?

对于以上的问题我们希望能用框架一并解决，对于该框架的目标主要包括：

• 提高代码可复用性

• 规范代码，降低长期维护成本

• 降低业务层与技术体系的关联

思路

关于提效，其中比较重要的是相同的代码不要重复写，做更细的区分和提取，提高可复用的颗粒度。另一方面是解决现有开发下比较影响开发效率的问题。

组件的分层

所以我们将面向组件的开发模式分为UI层View和逻辑层Store，以Interface进行隔离和耦合。

图一：组件构成 

在UI层无需关心状态的流转，只负责展示和交互方法的调用，DOM相关的动画交互等行为逻辑也会放到该层中。 

图二：组件分工

在确认了分层的逻辑后自然就引入了Interface，主要分为两部分：一部分是IProps，申明该组件所需的Props，在使用者调用该组件时进行对应的提示和约束；另一部分则负责连接Store和View，其中包括状态state和交互方法；见下面的Interface示例：

export interface IMultiScrollerProps {
  tabs: string[];
  onTabChange?(i: number): void;
}

export interface IMultiScroller extends IBase {
  readonly tabIndex: number;
  readonly tabSource: ITabItem[];
  readonly children: any[];

  onSwiperChange(i: number): voi