A highly extensible JavaScript library, abbreviated as Sifo. 一个高扩展性、可二开的插件式前端开发框架
English | 简体中文
schema-plugin-flow, abbreviated as Sifo ([sɪfɔ]),is a highly extensible JavaScript library. This library allows developers to extend business logic and page layout without touching source code, when the source code is written in Sifo.
sifoAppDecorator
, with which a normal React Commponent will has extension ability. You can learn about that via package's README or online demos.sifoAppDecorator
, with which a normal Vue Commponent will has extension ability. You can learn about that via package's README or online demos.form-extend-demo
simple demo
In this demo, there are seven extend-plugins in seven independent js. The checkbox set which plugin should be registered. Each plugin control different logic and all registered plugins make up a integrated page.
sifo-model
+ react
= sifo-react
sifo-model
+ vue
= sifo-vue
sifo-react
+ sifo-mplg-form-core
+ ant-design
= sifo-mplg-form-antd
sifo-react
+ sifo-mplg-form-core
+ fusion
= sifo-mplg-form-fusion
sifo-vue
+ sifo-mplg-form-core
+ ant-design-vue
= sifo-mplg-form-antdv
$ npm i @schema-plugin-flow/sifo-model --save
$ npm i @schema-plugin-flow/sifo-react --save
$ npm i @schema-plugin-flow/sifo-vue --save
project
extend.js
import SifoSingleton from '@schema-plugin-flow/sifo-singleton';
const singleton = new SifoSingleton('quick-start'); // target namespace
singleton.registerItem('testExtendId', () => {
return {
plugins,
components
}
});
app.js
import React from 'react';
import ReactDOM from "react-dom";
import SifoApp from '@schema-plugin-flow/sifo-react';
const plugins = [{ modelPlugin, componentPlugin, pagePlugin }];
class App extends React.Component {
render() {
return (
<SifoApp
namespace='quick-start'
components={components}
schema={schema}
plugins={plugins}
/>
);
}
}
ReactDOM.render(
<App />
rootElement
);
runtime
load extend js
load app js
you should load the extend js before sifoApp rendered.
<script src="extend.js"></script>
<script src="app.js"></script>
React
$ git clone https://github.com/alibaba/schema-plugin-flow.git
$ cd schema-plugin-flow
$ npm run i
$ npm run start
http://localhost:8000
.Vue
$ git clone https://github.com/alibaba/schema-plugin-flow.git
$ cd schema-plugin-flow
$ npm run i
$ npm run i-vue
$ npm run start-vue
http://localhost:8080
.