https://gitee.com/shxch1205/webrose(开源地址)

www.webrose.net.cn(官网,有在线Demo与API文档)

在前端页面布局方面，WebRose有着与其他框架完全不同、独一无二的创新简洁新方法，最终实现一行代码就解决一个问题，更完美诠释了“低代码”理念。下面详细逐步说明设计初衷。

与Vue代码比较

下面就是一段典型的Vue语法实现多页签与分割条布局嵌套组合的代码：

<el-tabs v-model="tabName"> <el-tab-pane label="机构" name="tab_1"> <el-row :gutter="24"> <el-col :span="5"> 左边的内容,宽度占比5/24 </el-col> <el-col :span="19"> 右边的内容,宽度占比19/24 </el-col> </el-row> </el-tab-pane> <el-tab-pane label="人员" name="tab_2"> 第二个页签内容 </el-tab-pane> <el-tab-pane label="角色" name="tab_3"> <el-tabs v-model="tabName"> <el-tab-pane label="常用角色" name="tab_1"> 常用角色内容 </el-tab-pane> <el-tab-pane label="特殊角色" name="tab_2"> 特殊角色内容 </el-tab-pane> </el-tabs> </el-tab-pane></el-tabs>

这个界面就是第一层是三个页签，然后第一个页签中又是左右分割，第3个页签创建两个子页签。上面这段代码要25行左右。

WebRose实现上面同样效果只需要下面3行代码：

WRS.createTabb("d1", ["机构","人员","角色"]); //创建多页签WRS.createSplit("d1_1", "左右", "5/24"); //第1个页签左右分割,WRS.createTabb("d1_3", ["常用角色","特殊角色",]); //第3个页签再创建两个子页签

从上面这段例子代码可以看出，WebRose框架的设计思想与特点是：

1. 一个JS文件，一行JS代码就创建一个布局，不需要Html或其他文件与第二行代码，一行代码就够了。

2.没有嵌套结构，是扁平化的从上往下的顺序结构，代码结构非常简洁，没有“回调地狱”式那种缩进层次非常深的结构。

3.通过id的命名规则巧妙实现了父子关系绑定。比如创建多页签时，就会以父亲组件的id为前辍，以_1,_2,_3为后辍创建子组件，比如父组件id是d1,则子组件id为d1_1、d1_2、d1_3。分割器则是以_A与_B为后辍，比如父组件id为d1，则子组件(左右与上下分割都一样)的id 为d1_A(左边或上边)，d1_B(右边或下边)。

根据这个设计思想与嵌套思路，理论上就可以实现无限任意嵌套层次的布局，我们称之为自由布局，而且无论多少层次，代码都是扁平化结构，非常简洁。

换句话说就是，通过几个简单的API就可以自由实现任意嵌套层次的复杂布局，我们称之为“自由布局”设计。

然后继续在上面3行代码后面添加如下代码，创建表格、表单、树…等数据组件，比如：

WRS.createBillList("","d1_1_A","CRM_USER"); //在第1个页签的分割器左边创建人员表格

WRS.createBillCard("","d1_1_A","CRM_USER"); //在第1个页签的分割器右边创建人员表单

WRS.createBillList("","d1_3_1","CRM_ROLE"); //在第3个页签的第1个子页签中创建角色表格

WRS.createBillTree("","d1_3_2","CRM_CORP"); //在第3个页签的第2个子页签中创建机构树

即六七行代码就完成了一个功能界面逻辑。系统在线典型Demo以及系统自带的管理中心控制台所有功能都是这样的代码，这证明是实际可行的，完全行得通的。

常用API(总共就5种)

常见的创建自由布局的API函数如下：

其中的WRS.createHtml(_divid, _Html)有点特殊，即可以直接创建一段完全个性化的标准html，然后与分割器、多页签任意嵌套组合！

即可以先创建分割器，然后在里面创建个性化html，也可先创建个性化Html，然后在里面创建多页签。

因为一般来说大部分需求场景使用其他几个函数就可以搞定，使用WRS.createHtml()函数个性化界面的情况并不多，或者说即使有也并不会太复杂，完全可以接受，又能绝对保证可以搞定任何个性化需求，因为直接写Html在理论上无所不能，有点像个终极武器。

另外，值得提示的是WRS.createSplit()创建分割条这个函数可以通过反复嵌套，实现左中右、上中下、东西南北中、纵向多列、横向多行、表格矩阵、任意矩阵的各种效果。

比如下面这几行代码就可以实现从左到右有6列，每列宽度100像素、高度是撑满父容器。

WRS.createSplit("d1","左右",100);WRS.createSplit("d1_B","左右",100);WRS.createSplit("d1_B_B","左右",100);WRS.createSplit("d1_B_B_B","左右",100);WRS.createSplit("d1_B_B_B_B","左右",100);

仿照此例，也可以搞“上下”分割，把页面行分成6行，然后每行再分多列，既可以按绝对像素分，也可以按比例分，依次类推可以很容易把整个页面分割出任意自由行与列的矩阵出来 。

即WebRose核心设计理念就是：使用分割条(createSplit)、多页签(createTabb)、纵向平铺(createVFlow)三种布局组件，再加上“导航菜单条(createLeftMenu)”与CreateHtml()函数，总共就这五个对象与方法，然后任意组合与嵌套，就可以解决所有常见布局问题。

然后在布局后的区域内部再创建表单(CreateBillCard)、表格(CreateBillList)、树(CreateBillTree)、查询框(CreateBillQuery)、报表(CreateReport)、图表(CreateChart)、工作流(CreateWorkFlow)等各种数据组件，这种函数也就七八个左右。即总共只要学习不到15个函数就可以上手开发绝大部分功能页面。

其中建表单(CreateBillCard)比较特殊，并不是封装成一个个的控件(比如文本框、下拉框、日期等)，而是就一行代码只要送入一个模板编码参数，然后在线配置模板即可，这也是为了在需求变更要增加表单字段时，可以在线配置立即生效，实现PaaS在线开发效果，而不是要改代码重新发布。这个功能另有专门文章详细讲解。

即一行代码搞定一件事，一个功能点最多也就几行代码，即非常有"低代码"的味道。

下面是一个实际相当复杂界面的代码例子截图(多层嵌套叠加)：

复杂功能前端界面代码

曾使用ElementUI验证实现上面这个同样功能需要上百行代码。

需要特别指出的是，这种低代码语法与开发模式并不是100%万能的，他更适用于管理软件界面，比如ERP等管理软件中各种表格/表单/树/多页签叠加，即都是各种“数据组件”拼装，根据经验管理软件中约70%~90%的功能属于这种类型，而对于类似互联网首页(比如淘宝/网易)，或一些领导驾驶舱报表展现界面，并不适合使用这种开发模式，而应该使用静态Html或使用Vue模式。

这种情况只要在配置菜单时把菜单类型更改一下，即不采用WRS低代码模式，而直接使用Vue模式写界面即可(在线Demo中有类似例子)，即WebRose平台可以兼容WRS低代码模式与其他模式，根据实际情况合理选择不同模式，而低代码模式如果能把70%~90%左右的功能点的开发难度大幅度降低已经很有价值了，所以要辩证的看待这个事情，千万不能抬杠。

设计理念剖析

这种通过JS函数来创建布局，一行代码创建一个容器布局，从上往下，逐层创建，还有以下几点好处：

1.非常符合设计界面时,从顶层设计往细节设计的自然习惯，就好比造房子，先画出总体布局与架构，再逐步设计各个局部与细节。比如一个界面先分成左右布局，然后右边是多页签，第一个页签中又是上下布局，上面是表格，下面是个卡片。。设计界面时就是这样的自然顺序，是一步步来的。每一步就是一行代码。

这个顺序其实也是浏览器解析整个Html的计算逻辑顺序，即浏览器也是从上往下、从外往里，从整体到局部来解析渲染绘制Html页面的，所以这种设计理念是完全科学的。

2.把创建布局容器与创建数据组件进行拆分解耦，即先创建布局（我们称为“布局容器组件”），最后创建表单、卡片、表格，这也非常像造房子，先造好房间，最后是摆放家具，家具就好比表格/表单/树这些我们称之为“数据组件”，这种设计理念也是科学与自然的。

3.一行JS代码同时干了好几件事，使开发大大简洁了，这几件事包括：

A.通过入命名,使本组件与父组件形成父子嵌套关系绑定。

B.同时创建了自己的子组件，比如创建分割条时，会生成以_A，_B为后辍的新的子组件。多页签是_1、_2、_3为后辍…

C.变相变现了“路由跳转”功能，Web中局部刷新也叫“路由跳转”，即指定某个区域是另一个url，那个url中有逻辑创建新的界面，在快速平台中，这一行js就是刷新了那块区域(假如原来有界面会自动覆盖)，并同时立即创建了新的组件，刷新url与url中构造新界面合成一步，等价于路由，而且会严格控制内存释放的问题。

D.同时创建了JS对象，这也是最关键的，即这一行代码WRS.createBillList("","d1_1_A","CRM_USER");同时在浏览器当前window中也创建了一个名为d1_1_A_BillList的JS对象，这是一个高内聚封装的对象，里面有属性、方法，数据，也是双向数据绑定，也是MVVM思想，这与Vue的组件对象的思想是完全相同的。

这也是我们一直强调是汲取了Vue先进的MVVM思想然后使用原生JS封装的思路。后续代码直接操作这个对象名来执行其方法，比如d1_1_A_BillList.queryDataByCondition("sex='男'")；就直接查询出性别为男的所有人员。

说白了这相当于自创了一种与Angular/React/Vue思想一致的第四种MVVM前端框架，只不过在低代码方面追求更极致，就想一行JS代码解决问题，而无论是Vue还是Angular等，底层本质上也是用JS来解决问题，因为浏览器只认识JS语言，即使像TypeScript这种表面上是另一种语言其实也是对JS的封装而已，即所有一切最终其实都是JS代码，原理都是一回事，并不存在另类奇葩得不可接受的问题。

换句话说，也正是因为一行代码同时搞定几件事，简化与省略了大量代码，最后变成了一行代码就OK了，这其实也是该设计的关键奥妙所在。

动态创建布局

有人应该已经看出，平台创建前端页面与组件都是使用JS函数来创建，甚至创建一段静态html也是使用函数WRS.createHtml来创建，即没有.html文件，也没有.Vue文件，只有一个JS文件。

这种JS程序动态创建界面与Vue等“申明式标签”的思路区别是，一种是静态申明式标签，一种是动态程序创建。

两者更大的区别在于根据某个条件绘制出完全不同的界面时，解决思路不同。Vue解决思路是肯定要先把所有页面都写好，然后根据一个条件，用v-if=“条件关系”，与v-else属性来处理，举个例子，比如根据登录人员的编号，如果是admin(管理员)，则使用左右布局（左边机构右边人员），如果不是admin用户，则使用多页签布局，也可比较一下两种语法：

<div v-if="LoginUser.code=='admin'"> <el-row> <el-col :span="10"> <el-billList>部门表</el-billList> </el-col> <el-col :span="14"> <el-billList>人员表</el-billList> </el-col> </el-row></div><div v-else> <!--如果不是admin则输出这个div--><el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="部门" name="first"><el-billList>部门表</el-billList></el-tab-pane> <el-tab-pane label="人员" name="second"><el-billList>人员表</el-billList></el-tab-pane></el-tabs></div>

WebRose平台JS代码机制如下:

if(LoginUser.code=='admin'){ WRS.createSplit("d1", "左右", "40%"); myDeptTable = WRS.createBillList("","d1_A", "部门模板编码"); myUserTable = WRS.createBillList("","d1_B", "人员模板编码");} else { WRS.createTabb("d1", ["部门", "人员"]); myDeptTable = WRS.createBillList("","d1_1", "部门模板编码"); myUserTable = WRS.createBillList("","d1_2", "人员模板编码");}

JS代码动态创建的逻辑可读性比静态页面配置条件属性更好些，更符合人的正向思维习惯（v-if/v-else有人觉得生涩,好象是要反来过思考），尤其是逻辑有多层if/else嵌套时，静态条件属性思路还需要把复杂条件先折算成一个变量进行配置，因为无法像JS代码那样自由灵活的搞出多层if/else，而一切都使用JS代码动态创建页面则没有这些问题，非常灵活、自由、自然。所以这两种思路也是各有利弊，也是换个思路尝试，要辩证看待。

在互联网业务场景中，一般都是静态页面更多，所以Vue这种标签申明式更适合，而在管理软件中，经常会根据复杂的权限计算，然后动态生成布局。比如一个多页签，可能是根据登录人员的角色与机构来动态生成，比如：如果是总行的管理员，则是某几个页签，如果是分行的普通员工，则又是另几个页签,会多一个页签。

即动态页面更适合直接使用JS函数来创建。

总结

WebRose低代码平台“自由布局”设计，是一种全新的创新设计新思路，一行代码解决一件事，一件事一行代码就够了，一个功能点只要几行或十几行代码就够了，非常适用于管理软件，能解决大部分功能的需求场景，可大幅度降低代码量，平台又同时兼容其他框架与模式。