这篇文章总结了它的使用方法和一些经验，内容不是很深刻，纯粹是介绍性的内容，随便看看。但是，如果你没有使用过这种javascript引擎库，那么这篇文章还是值得一读的。相信在你了解了它强大的功能和简单的用法后，你会渴望在工作中使用它。

1.从简单真实的需求出发，公司做了统一的开发平台，将MVC的接口和数据的添加、删除、修改的接口封装在后台。在前端，我通过用bootstrap编写各种组件创建了一个开发框架。集成CAS，基于CAS，我们首先做了一个统一的权限管理系统，这是我们开发平台的第一个子系统，用来管理所有子系统的菜单和授权，管理整个公司的组织结构和用户。后来我们相继开发了业务系统A和业务系统B。由于这三个子系统对应于三个java项目，当它们最终被部署时，三个应用程序被部署在tomcat中。现在有一个要求：

1)登录各系统后，点击系统名称，弹出下拉菜单，显示所有授权子系统；2)然后用户可以通过点击其他子系统切换到选定的系统。到达其他系统后，他们可以从这个系统切换回来，因为他们已经制作了这个下拉菜单；3)如果用户只有一个系统权限，则不会显示下拉菜单。实际上，需求相当简单，原型看起来是这样的：

功能是在各子系统登录后调用获取系统列表的接口，用js呈现一个下拉菜单。该接口返回的格式是：

: [{ '排序顺序' : 1，'是当前' : true，'系统httpur ' : ' http://xxxx 33608080/permission '，'系统名称' : '统一权限管理系统' }，{ '排序顺序' : 2，' iscurrent' : false，'系统httpur ' 3: ' http://xxxx 33608080/systema '，'系统名称'

函数data2 html(data){ data=data | |[]；var html=[' ul class=' nav nav bar-nav bar-left nav-system ' '，' li class='dropdown ' '，a href=' javascript:class=' drop down-toggle ' data-toggle=' drop down ' title=' switch system ' ']，l=data.lengthif(l ^ 2){ l==1 html . push(数据[0]。systemName | | ' ')；html . push('/a/Li/ul ')；返回html . join(“”)；} var curSysAry=data.filter(函数){ return s.isCurrent});html.push(curSysAry[0])。systemName ' I class=' fa-caret-down '/I/aul class='下拉菜单' ')；data.sort(函数(a，b){ return a . sort ORder-b . sort ORder；});for(var I=0；I l；i ) { i html.push('li角色=' separator ' class=' divider '/Li ')；html.push('lia href=')数据[i]。systemHttpUrl ' ' target=' _ self ' '数据[i]。system name '/a/Li ')；} html . push('/ul/Li/ul ')；返回html . join(“”)；}这种拼接字符串的方式有很多缺点：

1)麻烦，尤其是拼接逻辑复杂，拼接字符串很长的时候；2)不易维护，稍有不慎就会误认为标签的对应关系；3)结构不清晰。