最近，阿里巴巴 GitHub 仓库里开源了一个新的项目：schema-plugin-flow（简称 Sifo [sɪfɔ]），这是一个前端开发框架，主要特点是高扩展性与可二次开发。

这里的高扩展包含但不限于页面结构的修改、渲染组件的替换、组件属性的变更、组件事件的监听与阻断等。

可二次开发（简称可二开）主要体现在：对一个用 Sifo 开发的页面，二次开发者可以在不接触源业务代码的情况下，实现对页面的高扩展。

Sifo 是开发框架，本身是与UI框架解耦的，React 框架下可以使用 sifo-react ，Vue 框架下可以使用 sifo-vue .

Sifo 的另一个特点是插件式开发，这使得不论是在 React 下还是 Vue 下，开发者写的逻辑代码几乎是一样的 ，二次开发者同样如此。

一、初探

schema-plugin-flow 仓库里带了 react/vue 下的体验示例，大家可以按照 README 的说明自己尝试。

1、演示图

在这个演示中，有7个扩展插件，写在7个独立的js文件中，复选框决定应该注册哪些插件，每个插件控制不同的逻辑，所有的插件共同组成展示页面。

这个图是演示的Sifo的多层扩展能力，从图中可以看到，不同的插件是可以任意组合的，逻辑独立而又能共同协作。有的插件控制页面结构，有的进行事件响应，第 7 个插件注册了新组件并替换了原页面的组件。

2、hello world

这个例子演示了如何监听一个按钮组件的点击事件，并在点击事件中修改其它组件的属性，也演示了多个插件的情形，同时也有一个二开的插件控制了在按钮点击时改变文本颜色。

源码在：sifo-react 、sifo-vue，可以看到在 React 下和 Vue 下，除了组件的用法不同，其它部分是一样的，下一章节会深入地看看。

3、替换渲染组件

sifo-vue 的体验示例里有一个二次开发怎样替换渲染组件的例子：在按钮点击3次时，将原日期组件替换为自定义的组件。

二开完整写法也在下一章节讲，这里只列代码主要部分：

a. 注册自定义组件： test-ext-button

b. 替换为用自定义组件渲染

React 下也是一样的，有兴趣的同学可以自己试试。

二、深入

Sifo 的核心是 sifo-model，主要有这几部分：

namespace 是二次扩展的唯一标识；

plugins 是插件列表，插件有三类：模型插件、页面插件与组件插件；

schema 是页面结构定义。

mApi 是整个 Sifo 的核心接口。更多详细内容可见：sifo-model

1、hello world 代码

这里用 Vue 的 hello world 例子代码来看。

首先，写根组件模板，

然后，定义组件（这是 Vue 局部组件，全局组件不用写），这里定义了三个组件：Container、Slogan 和 Button。

再而，是定义页面结构，用一个叫 schema 的结构描述了页面上组件的组合方式。

接下来，是写插件，监听按钮 click 事件（按惯例，react 下是监听 onClick）。这是一个“组件插件”，是以 schema 的节点 id 为维度的。

同时，可以加第二个插件。我们可以给一个节点上加多个插件，来实现不同的逻辑，二次开发也是这样。

最后，是参数使用：

React 下是这样：

讨论：

看完 hello world ，可能会有人想怎么这么多代码，直接写大概几行代码的事儿。不过看看我们对这个 hello world 还能做的事情：修改页面结构、替换渲染组件、变更组件属性、给组件添加事件的监听等，在有扩展需求的场景下还是可以接受的。同时，schema 作为一份配置一般会写在单独的地方来维护，plugins 也可以按功能区分放到不同的文件里。

2、二次开发扩展

对 hello world 例子，那个在按钮点击时改变 Slogan 颜色的扩展插件，是写在其它地方的（真实业务时可能是从其它地方加载的js资源），使用了 sifo-singleton，插件写法相同。

二开可以注册自定义组件、自定义插件（组件插件和页面插件）和打开控制台sifo log等。

3、渲染优化

模型插件可以实现更底层的能力，比如可以利用中间件对 mApi 进行扩展（如 sifo log），比如包装 ant design form，又比如可以实现一个表单校验模型插件用来实现表单场景。

这里讲一下_渲染优化模型插件_，sifo-react/sifo-vue 都是 top-down （自顶自下）的渲染模式，在复杂的页面上，可以使用这个模型插件来优化渲染。

sifo-react 可以引入sifo-mplg-react-optimize，sifo-vue 内置了渲染优化模型插件，使用 optimize: true 属性来开启。

三、发散

在我们进行业务开发过程中，特别是做企业 SaaS 应用业务时，经常会遇到的一个问题是：某客户想在我们提供的应用中增加个性化功能，而这个功能是不具备通用性的，我们该怎么办？显然，我们不会将这类功能放到我们的标准业务中，但如何满足客户的需求以使客户能从我们的应用中受益呢？

Sifo 的高扩展性、可二次开发能力就提供了一种解决上述问题的方案。那么，Sifo 还有哪些可能的使用场景呢？

元数据驱动/页面配置化

可以通过配置、服务端模型生成等方式，产出一份 schema，配合合适的 render，将页面渲染出来。

视图与逻辑解耦

组件的组合形成了视图，插件处理业务逻辑，组件是可以直接替换的，这在一些组件库变更场景时也许会更容易。

逻辑复用/功能组合

插件与 UI 是松耦合的，一些常用的逻辑可以独立出来，在各个需要的地方使用。

通过不同的插件组合，来提供不同的能力，实现不同的业务需求。除了在业务中组合不同的页面插件和组件插件外，更显著的例子是组合模型插件的能力。

功能扩展

插件机制形成了扩展能力，同时，这种扩展能力是可被控制的，也就是插件的可插拔。利用  sifo-singleton 这类全局扩展容器，可以做到不接触原始页面代码的情况下，对页面进行扩展。

逻辑归一

将一些可集中处理、成批处理、单独处理的逻辑放到单独的插件中。

比如界面有很多下拉字段的下拉项是从接口返回的，可以在 schema 上（或其它合适的方式）描述接口信息，使用一个模型插件将所有取数赋值动作做完；又比如在界面上配置了联动规则，可以使用一个模型插件来处理规则的解析与执行，而不是侵入到每个页面代码内部；

后端数据驱动

利用统一的api，可以实现一个模型插件，用来与服务端通信，将界面变化通知服务端，并执行服务端返回的指令，改变界面状态，实现后端数据驱动。

其它

可以发挥想象力来实现不同的模型插件

四、结尾

欢迎☆加星☆、使用、测试、反馈与贡献代码~~