最近,阿里巴巴 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
const components = {
'test-ext-button': {
data: function () {
return {
count: 0
}
},
template: `
<button v-bind:style="{ margin: '0 8px' }" v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}
};
b. 替换为用自定义组件渲染
let count = 0;
mApi.addEventListener(event.key, 'click', () => {
count++;
if (count >= 3) {
mApi.replaceComponent('date', 'test-ext-button');
}
React 下也是一样的,有兴趣的同学可以自己试试。
二、深入
Sifo 的核心是 sifo-model,主要有这几部分:
- namespace 是二次扩展的唯一标识;
- plugins 是插件列表,插件有三类:模型插件、页面插件与组件插件;
- schema 是页面结构定义。
mApi 是整个 Sifo 的核心接口。更多详细内容可见:sifo-model
1、hello world 代码
这里用 Vue 的 hello world 例子代码来看。
首先,写根组件模板,
<template>
<sifo-app
:namespace="namespace"
class="quick-start-demo"
:plugins="plugins"
:components="components"
:schema="schema"
:openLogger="openLogger"
/>
</template>
然后,定义组件(这是 Vue 局部组件,全局组件不用写),这里定义了三个组件:Container、Slogan 和 Button。
<script>
import SifoApp from "@schema-plugin-flow/sifo-vue";
// register local components
const components = {
Container: {
template: "<div><slot></slot></div>",
},
Slogan: {
template: "<h2>{{content}}</h2>",
props: ["content"],
},
Button: {
template: `<button @click="$emit('click')">click to change</button>`,
},
};
再而,是定义页面结构,用一个叫 schema 的结构描述了页面上组件的组合方式。
// schema 定义了初始的页面结构
const schema = {
component: "Container",
id: "mainId",
attributes: {},
children: [
{
component: "Slogan",
id: "slogan_id",
attributes: {
content: "hello world",
},
},
{
component: "Button",
id: "test_btn_id",
attributes: {},
},
],
};
接下来,是写插件,监听按钮 click 事件(按惯例,react 下是监听 onClick)。这是一个“组件插件”,是以 schema 的节点 id 为维度的。
const componentPlugin1 = {
test_btn_id: {
onComponentInitial: (params) => {
const { event, mApi } = params;
mApi.addEventListener(event.key, "click", () => {
mApi.setAttributes("slogan_id", {
content: "hello sifo",
});
});
},
},
};
同时,可以加第二个插件。我们可以给一个节点上加多个插件,来实现不同的逻辑,二次开发也是这样。
const componentPlugin2 = {
test_btn_id: {
onComponentInitial: (params) => {
const { event, mApi } = params;
mApi.addEventListener(event.key, "click", () => {
console.log("test_btn_id clicked!");
});
},
},
};
最后,是参数使用
const plugins = [
{ componentPlugin: componentPlugin1 },
{ componentPlugin: componentPlugin2 },
];
export default {
name: "quick-start",
components: { SifoApp },
beforeCreate: function () {
const sifoAppProps = {
namespace: "quick-start",
plugins: plugins,
components,
schema,
openLogger: true,
};
Object.keys(sifoAppProps).forEach((key) => {
this[key] = sifoAppProps[key];
});
},
};
</script>
React 下是这样:
const components = { Container, Slogan, Button };
const plugins = [
{ componentPlugin: componentPlugin1 },
{ componentPlugin: componentPlugin2 }
];
class App extends React.Component {
render() {
return (
<SifoApp
className='quick-start'
namespace='quick-start'
components={components}
schema={schema}
plugins={plugins}
openLogger={false}
/>
);
}
}
讨论:
看完 hello world ,可能会有人想怎么这么多代码,直接写大概几行代码的事儿。不过看看我们对这个 hello world 还能做的事情:修改页面结构、替换渲染组件、变更组件属性、给组件添加事件的监听等,在有扩展需求的场景下还是可以接受的。同时,schema 作为一份配置一般会写在单独的地方来维护,plugins 也可以按功能区分放到不同的文件里。
2、二次开发扩展
对 hello world 例子,那个在按钮点击时改变 Slogan 颜色的扩展插件,是写在其它地方的(真实业务时可能是从其它地方加载的js资源),使用了 sifo-singleton,插件写法相同。
import SifoSingleton from '@schema-plugin-flow/sifo-singleton';
const singleton = new SifoSingleton('quick-start'); // namespace: quick-start
const componentPlugin = {
test_btn_id: {
onComponentInitial: params => {
const { event, mApi } = params;
mApi.addEventListener(event.key, 'onClick', () => {
mApi.setAttributes('slogan_id', {
style: { color: 'red' }
});
})
}
}
};
singleton.registerItem('ext-quick-start', () => {
return {
plugins:[
{ componentPlugin }
],
components: {},
openLogger: true
}
});
二开可以注册自定义组件、自定义插件(组件插件和页面插件)和打开控制台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,可以实现一个模型插件,用来与服务端通信,将界面变化通知服务端,并执行服务端返回的指令,改变界面状态,实现后端数据驱动。
其它
可以发挥想象力来实现不同的模型插件
四、结尾
欢迎 ☆加星☆,测试反馈与贡献代码~~
阿里巴巴CBU技术部工业品采销团队招前端,万亿规模工业电商,十万亿规模产业互联网等你加入, 欢迎投递简历至:fanchong.xs@alibaba-inc.com