目前百度内部QA负责的各统计数据工具平台，大多都使用多页面server端控制访问，对后续维护人员要求高：一是需要了解整套业务，二是需要技术全栈型人才，三是前后端代码结构不清析。作为QA人员，很难全栈兼顾。介于以上原因，个人梳理了一套相对较为清析易用的spa（single-page-application）模板式框架，意在统一所有平台代码风格及模块化划分风格，使QA同学也可以快速开发及维护一套有专业水平的工具平台，提高工作效率的同时也使自己朝着全栈型人才发展。

以下是框架模板设计思路及使用方法，有兴趣和有需要的同学可以研究。初次公开发表技术性文章，有不严谨的地方，还请各位同学指教。

首先，搭建一套项目架构，需要考虑很多因素，尤其对于不太了解前端技术的QA同学：

a.易用性。框架默认引入一些统计平台经常使用的，且有完善的api的前端工具库，供初入前端的同学copy代码和使用。比如：jquery, underscore，echart等等；

b.学习成本。不用说，框架模板的目的就是让QA同学可以开发出自己的工具平台，所以平台在模块添加及后续页面开发中，页面添加及控件使用必须简单易学易懂，一个页面开发完成，多处可以使用。

c.代码模块化分及结构设定。代码模块化分结构要清析，一是为了代码风格及质量，实现模块高内聚，低耦合。二是使开发者根据页面中信息很快定位到对应的代码文件，便于修改及维护。

d.可扩展性。

e.页面性能。页面渲染及加载速度。

模板代码git地址：https://github.com/wangyajiao/BackboneRequirejs.git

‍‍‍‍‍‍‍‍

从以上目录介绍中，我们重点关注index.html入口文件和viewjs下的所有逻辑控制js文件。其余样式暂不介绍，这些文件是平台风格样式文件，可以下载一些自己喜欢风格的样式替换。

‍‍

上面说过，我们的页面是单页面，所以当点击菜单时，并不是去后端重新拿一个新页面，而是在浏览器端，修改页面中的一部分内容，达到页面切换的效果。

从下图中可以看出，index.html页面中：

       A.顶部导航栏、左侧菜单栏和底部footer部分在整个平台中是固定的部分。

       B.当点击顶部或左侧菜单时，通过js修改中间右侧main_content中的内容,    以达到整个页面切换的效果。

     以用户点击顶部菜单栏为例，说明界面如何内容如何切换。

     A.点击顶部badcase挖掘，地址栏中url后面添加『#badcase』,此时框架中的路由模块会监听到url变化，去找viewjs/badcase目录下的MainView.js文件。

     B.调用MainView文件里的render方法。

     C.render方法中，首先将下图灰色区域中现有的内容清空，然后将 template/content.html中的html标签元素填充进去。

    从上一步中可以看出，当url中添加#xxx时，会去找viewjs/xxx文件夹下的MainView.js,更新右侧内容。因此要添加一个模块：

     A.在view.js下添加一个文件夹或copy已有一个模块文件夹修改名称，比如：new-module文件夹。

     B.在new-module下保证有一个MainView.js文件，且该文件中有一个render方法，格式必须遵守AMD标准（AMD详解可去百度搜索了解）。

上述简单说明了模板框架单页面的设计思路及简单的框架结构，代码使用的开源工具库是requirejs+backbone，requirejs是一个很好的异步模块加载工具库，用来加载各个js模块文件。backbone是一个比较成熟的轻量级的前端MVC框架。二者结合，代码结构清析，页面展现、数据请求、业务逻辑控制分工明确。

当然目前angularjs也是一个比较火的前端框架，但相比backbone, angularjs更重量级一些，后续会考虑会引入。

如果你看的意犹未尽，如果你想随时随充实自己，请扫描以下二维码，关注我们的公众账号，可以获取更多技术类干货，还有精彩活动与你分享~