近日，阿里巴巴github仓库开源了一个新项目：schema-plugin-flow（简称Sifo[s?f?]）[☆欢迎加星☆]，这是一个前端开发框架，主要特点是高扩展性和二次开发。这里的高度扩展包括但不限于页面结构的修改、渲染组件的更换、组件属性的改变、组件事件的监听和拦截等。二次开发（简称二次开发)主要体现在：对于使用Sifo开发的页面，二次开发者可以在不接触业务源代码的情况下实现页面的高扩展。Sifo是一个开发框架，它本身与UI框架是解耦的。React框架下可以使用sifo-react，Vue框架下可以使用sifo-vue。Sifo的另一个特点是插件化开发，这使得在Vue下，开发者编写的逻辑代码几乎是一样的，二次开发者也一样。1.初步探索schema-plugin-flow仓库在react/vue下有一个体验例子。大家可以按照README中的说明自行尝试。1.Demo图在这个demo中，有7个扩展插件分别写在7个独立的js文件中。复选框确定应注册哪些插件。每个插件控制不同的逻辑，所有的插件共同组成一个展示页面。此图是Sifo多层扩展能力的展示。从图中可以看出，不同的插件可以任意组合，逻辑独立，可以协同工作。有的插件控制页面结构，有的响应事件，第7个插件注册新的组件，替换原有页面的组件。2.helloworld本例演示如何监听一个按钮组件的点击事件，并在点击事件中修改其他组件的属性。更改文本颜色。源码在：sifo-react,sifo-vue，可以看到在React和Vue下，除了组件的使用，其他部分都是一样的，下一章会深入了解。3、替换渲染组件在sifo-vue的体验示例中，有一个二次开发如何替换渲染组件的例子：当按钮被点击3次时，将原来的日期组件替换为自定义组件。第二章的完整写法也会在下一章讲到，这里只列出主要部分代码：a．注册自定义组件：test-ext-buttonconstcomponents={'test-ext-button':{data:function(){return{count:0}},template:`你点击了我{{count}}次。`}};b.替换为自定义组件渲染letcount=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-model1,helloworldcode下面我们来看一下Vue的helloworld示例代码。首先编写根组件模板，然后，定义组件（这是Vue本地组件，全局组件不用写），这里定义了三个组件：Container、Slogan和Button。React下面是这样：constcomponents={Container,Slogan,Button};constplugins=[{componentPlugin:componentPlugin1},{componentPlugin:componentPlugin2}];classAppextendsReact.Component{render(){return();}}讨论：可能有人看完helloworld会疑惑为什么代码那么多，直接写几行代码就可以了，不过我们来看看这个helloworld我们能做什么：修改页面结构，更换渲染组件，改变组件的属性，给组件添加事件监听等，在有扩展需求的场景下还是可以接受的。同时作为配置，schema一般写在单独的地方维护，插件也可以根据功能放在不同的文件中。2.helloworld例子二次开发扩展，点击按钮时改变Slogan颜色的扩展插件写在别处（实际业务中可能是从别处加载的js资源），使用sifo-singleton，Plugins也是这样写的。从“@schema-plugin-flow/sifo-singleton”导入SifoSingleton；constsingleton=newSifoSingleton('快速启动');//命名空间：快速启动constcomponentPlugin={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}});二次开启可以注册自定义组件、自定义Plugins（组件插件和页面插件）和开启consolesifolog等。3.渲染优化模型插件可以实现底层能力。比如可以使用中间件扩展mApi（比如sifolog），比如封装antdesignform，可以实现一个表单验证模型插件来实现表单场景。再来说说_渲染优化模型插件_，sifo-react/sifo-vue都是自上而下（top-down）的渲染模式，在复杂的页面上，可以使用这个模型插件来优化渲染。sifo-react可以引入sifo-mplg-react-optimize，sifo-vue内置了渲染优化模型插件，可以通过optimize:true属性开启。3.分歧在我们业务发展的过程中，尤其是在做企业SaaS应用业务的时候，经常会遇到一个问题：客户想在我们提供的应用中加入一个个性化的功能，但是这个功能并不通用。性，我们该怎么办？显然，我们不会把这种功能放到我们的标准业务中，但是我们如何满足客户的需求，让客户从我们的应用中受益呢？Sifo的高扩展性和二次开发能力为上述问题提供了解决方案。那么，Sifo有哪些可能的使用场景呢？元数据驱动/页面配置可以通过配置、服务器端模型生成等方式生成schema，并用合适的render渲染页面。视图和逻辑上解耦的组件组合形成一个视图，插件处理业务逻辑，组件可以直接替换，在一些组件库改变场景的时候可能会更容易一些。逻辑复用/功能组合插件与UI松耦合，一些常用的逻辑可以分离出来，在需要的地方使用。通过不同的插件组合，提供不同的能力，实现不同的业务需求。除了在业务上可以组合不同的页面插件和组件插件，一个比较值得注意的例子是模型插件的组合能力。功能扩展插件机制形成了扩展能力，同时这种扩展能力是可控的，即插件是可插拔的。使用sifo-singleton等全局扩展容器，可以在不触及原有页面代码的情况下扩展页面。逻辑规范化将一些可以集中处理、批处理或单独处理的逻辑放入单独的插件中。例如，如果界面中有多个下拉字段，则从界面返回下拉项。您可以在schema（或其他合适的方法）上描述接口信息，并使用一个模型插件来完成所有的赋值动作；另一个例子是在接口上配置。联动规则，可以使用模型插件来处理规则的解析和执行，而不是侵入到每个页面的代码中；后端数据驱动使用统一的API，可以实现一个模型插件与服务端通信，接口变化通知服务端，执行服务端返回的命令，改变接口状态，实现后端数据驱动器。其他人可以发挥想象力，实现不同的模型插件4.最后欢迎☆加星☆，测试反馈贡献代码~~阿里巴巴CBU技术部工业产品采购销售团队招聘前端，万亿级工业e-商业，万亿规模工业互联网等你加入，欢迎投递简历至：fanchong.xs@alibaba-inc.com
