WebRose与其他框架前端布局最大的特点是：

1.使用JS动态创建布局，不是声明式渲染，只有一个JS，没有静态html或vue文件

2.扁平化语法，使用id命名规则实现嵌套隶属关系，一行代码解决一个问题(创建一个数据组件或布局组件)。

3.使用JS代码逻辑判断实现根据不同条件绘制不同界面。

WRS.createTabb("d1",["人员","机构","角色"]);  //先多页签
WRS.createSplit("d1_1", "上下", 300);  //第一个页签是上下分割

WRS.createBillList("wrsservice","d1_1_A","zzz_user2_1019");  //创建表格
WRS.createBillCard("wrsservice","d1_1_B","zzz_user2_1019");  //创建卡片

下面是一个典型的先是分割后有多页签的界面，右边是运行后效果:

WRS.createSplit("d1", "左右", 200);  //左右分割
WRS.createSplit("d1_B", "上下", 250);  //右边再上下分割

WRS.createTabb("d1_B_B",["人员","机构","角色"]);  //先多页签

WRS.createHtml("d1_A","<span style='color:blue'>左边内容<span>");
WRS.createHtml("d1_B_A","<span style='color:red'>右边的上边内容<span>");
WRS.createBillList("wrsservice","d1_B_B_1","zzz_user2_1019");  //创建表格

下面是一个典型的，左右分割，左边是个菜单目录，点击左边菜单，在右边动态创建不同的界面,【这个其实就是相当于动态路由的意思】

function AfterInit() {
  WRS.createSplit("d1","左右",180);
  WRS.createLeftMenu("d1_A",[
    "客户信息.基本信息",
    "客户信息.学习经历",
    "客户信息.工作经历",
    "客户信息.其他信息.收入情况",  //会以小数点分割,自动生成菜单目录
    "客户信息.其他信息.健康情况",
    "客户信息.其他信息.保险记录",
    "客户信息.备注.获奖记录",
    "客户信息.备注.其他",
  ], myClickMenu);
}

//点击菜单逻辑
function myClickMenu(_menuNo, _menuText, _dom) {
  if(_menuText=="基本信息"){
    WRS.createBillCard("wrsservice","d1_B","zzz_user2_1019");
  }else if(_menuText=="学习经历"){
    WRS.createBillList("wrsservice","d1_B","zzz_user2_1019");
  }
}

我们目前容器类布局组件主要是：分割器(createSplit),多页签(createTabb),纵向平铺(createVFLow),菜单向导条(createLeftMenu)，共4个，以后还会扩展：向导型。。等其他顶多一两种。
数据组件主要有:表格、卡片、树、查询框，共4种，以后还会扩展：图表、报表。。等顶多三五种。
即前端代码开发，主要只要掌握10个左右的组件即可(包括他们的功能函数)，就能搞定80%的应用场景。其他的都是模板配置。
这种写法，一个复杂界面的前端代码量也就十几行，顶多几十行左右。

动态创建布局

在管理系统中，经常会根据复杂的权限计算，然后动态生成布局。
比如一个多页签，可能是根据登录人员的角色与机构来动态生成，比如：如果是总行的管理员，则是某几个页签，如果是分行的普通员工，则又是另几个页签,会多一个页签。

即界面是动态计算的。

如果是纯静态Html遇到这种场景就不太好弄，而像Angular/Vue等MVVM描述性标签，是通过is-show属性绑定一个变量来实现的，如果这个变量逻辑是多重逻辑计算出来，则要折算成一个变量名，不少人还是认为这个比较别扭。

如果是一种更新复杂的情况是，根据登录人员会出页完全不同的布局组件，比如管理员登录是多页签，而普通员工登录则是左右分割，另外一种角色则干脆就是一个单表格。这种混合复杂情况,Vue那种描述性方法就搞得非常累人。

这种情况使用JS来动态画页面，反而显得更方便。比如下面这段代码，就是一个根据双重逻辑判断，动态创建完全不同的布局情况:

   var loginUserRole = ...;  //登录人员角色
   var loginUserOrgType = ...;  //登录人员机构类型
   if(loginUserRole=="管理员"){
     if(loginUserOrgType=="总行"){
        WRS.createTabb("d1_B_B", ["信贷记录","贷后跟踪","全行历史记录"]);  //三个页签
     }else if(loginUserOrgType=="行"){
        WRS.createTabb("d1_B_B", ["信贷记录","本行历史记录"]);  //两个页签
     }
   }else if(loginUserRole=="信贷部经理"){
      if(loginUserOrgType=="总行"){
         WRS.createTabb("d1_B_B", ["信贷记录","总行信贷跟踪"]);  //多页签
      } else if(loginUserOrgType=="分行"){
        WRS.createSplit("d1", "左右", 250);  //左右分割
      } else if(loginUserOrgType=="支行"){
        WRS.createBillList("wrsservice","d1","zzz_user2_1021");  //直接是个表格
      }
   }else if(loginUserRole=="信贷员"){
      var tabbName = remoteCall("...");  //远程查询创建库，获得多页签数量与名称,返回数组
      WRS.createTabb("d1_B_B", tabbName);  //多页签
   }

很显然，这种复杂逻辑动态创建完全不同的布局的方法，代码可读性，控件性都是非常好的。

由此，也可以得出这样一个结论，如果是静态页面为主的系统，则使用自定义Html标签思想显得更好些，但如果有复杂动态构造界面的场景，则直接拿JS画页面(放弃Html)，显得更方便。

因为我们遇到的各类银行管理系统，经常遇到复杂权限影响界面的场景，所以我们选择干脆直接用JS画界面，即干脆不要Html了

个性化Html如果处理

目前通过几种布局容器组件与数据组件,可以实现70%-80%的应用(随着功能扩展比例可能更高)，但总有的需求场景会出现完全个性化的界面。
就是自己要写一段个性化的静态Html，如果与其他容器组件与数据组件融合呢？
解决办法是,系统提供了一个函数WRS.createHtml(_divid, _html);来实现,就是自己拼一段html字符串,然后使用这个函数来创建!
简单来说，就是反义拼html为一个JS字符串，然后调用函数创建，系统只有JS，没有静态Html,也不提供导入一个html文件的方法
下面是创建个性化html的例码与效果图:

WRS.createSplit("d1", "左右", 250);  //左右分割
WRS.createHtml("d1_A", "<span style='color:red'>左边的内容,待补充</span>");  //左边内容

//拼html字符串
var strHtml = "";
strHtml = strHtml + "<div>";
strHtml = strHtml + "<table style='width:80%' border='1'>";
strHtml = strHtml + "<tr style='background:yellow'><td>工号</td><td>姓名</td></tr>";
strHtml = strHtml + "<tr><td>001</td><td>张三</td></tr>";
strHtml = strHtml + "<tr><td>002</td><td>李四</td></tr>";
strHtml = strHtml + "</table>";
strHtml = strHtml + "</div>";

WRS.createHtml("d1_B", strHtml);  //与原来的布局整合，在分割器右边创建原生html

不得不承认，这种反义写html的确没有直接写一个html静态文件的可读性更强，只有程序员能写，美工做的html文件成果不能直接使用，需要转换。
之所这样设计，是基下以下几点权衡：
1.管理系统中，需要直接写大量个性化html场景并不多，即使有，也不会很复杂，所以这样设计也能接受,反义字符串本质上也是非常简单的。
2.快速开发平台刻意简化成只有js，没有html文件，通过强大的数据组件几行js代码构造前端应用，所以不想为了一些概率不高的场景而又把静态html引入,导致学习成本增加,实际意义不大
3.系统会提供一个小工具，把静态html文件，一下子转换成反义写法,从而简化写静态html过程。
4.有许多个性化html本身也是动态循环拼出来的，这时更是要用js来写客户端逻辑了,html文件存在的意义与场景并不多,js可以完全取代html的功能，即html文件可以省略。

终上所述，快速开发平台是使用JS代码来快速构造布局与组件，个性化html也是通过js函数来创建。

在WebRose设计理念中，使用：分割条(createSplit)、多页签(createTabb)、纵向平铺(createVFlow)三种布局组件，再加上“导航菜单条(createLeftMenu)”与CreateHtml()函数，总共就这五个对象与方法，然后任意组合与嵌套，就可以解决所有常见布局问题，然后在布局后的区域内部再创建表单、表格、树、查询框、图表等各种数据组件。
因为前几种就可以满足85%以上管理软件界面需求，而一些特殊的界面使用CreateHtml()函数直接创建div，再相互组装在一起，关键是所有这些创建都是使用JS函数动态创建，其中的参数可以从数据库等配置数据取得，从而实现更高级的可配置化界面功能效果，在许多场合比Vue那种自定义标签描述化界面更适合做动态界面。

自由布局视频:

方法	说明
WRS.createSplit("d1", "左右", 300);	左右分割,左边固定宽300像素,右边有多大撑多大会同时创建d1_A与d1_B两个子div
WRS.createSplit("d1", "左右", "25%");	左右分割,左边宽25%，右边宽75%，自适应父亲窗口大小
WRS.createSplit("d1", "右左", 300);	左右分割,但是右边固定宽300像素,左边有多大撑多大,与第一种相反
WRS.createSplit("d1", "上下", 300);	上下分割,上边高300像素,下边撑大! 与左右分割一样，也是支持百分比与“下上”反过来的
WRS.createTabb("d1", ["人员","机构","角色"]);	多页签,会同时创建d1_1、d1_2、d1_3三个子div
WRS.createVFlow("d1", ["用户/300", "机构/325", "460", "400"]);	纵向平铺布局,会同时创建d1_1、d1_2、d1_3三个子div
WRS.createLeftMenu("d1_A",[ "客户信息.基本信息", "客户信息.学习经历", "客户信息.工作经历", "客户信息.其他信息.健康情况", "客户信息.其他信息.保险记录", ], myClickMenu);	创建菜单树，会根据小数点分割，生成树型结构.

自由布局说明

布局例子

动态创建布局

个性化Html如果处理