Javascript模板及其中的数据逻辑分离思想（MVC）

#Javascript模板及其中的数据逻辑分离思想



##需求描述

项目数据库的题目表描述了70-120道题目，并且是会变化的，要根据数据库中的数据描述，比如，选择还是填空题，是不是重点题，题目总分是多少等等有条件地渲染出题目的内容，并且能做完后保存回数据库，打印出来。





##以前的实现

由后台（structs2+spring+ibaties）查询，扔出JSON ，前台就是无穷无尽的if,switch。一但有要修改，就要吐血了，也不知道要改多少个地方





##思考与改进

结合自己的[正则表达式](http://www.cnblogs.com/p2227/tag/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/)及[HTML](http://www.cnblogs.com/p2227/tag/html/)知识，我们可以定义一种规则，使得JSON与HTML进行关联，怎么样的JSON就有怎么样变化的HTML，当需求变动-->数据库变动-->生成JSON变动-->生成HTML变动，整个项目就好维护多了。于是这就形成了一套`Javascript模板`。





##JSON数据解释

```javascript

var subject = {

        "subjectAttr": "JD-SUB-3",//JD-SUB-1填空题，JD-SUB-3选择题

        "remark": "",//备注

        "score": "",//填空题的分数

        "subjectContent": "《帱槗嘮煵僝蹣媮》逦瘞僌鰦鵾舷鶴",//题目内容

        "selectTypeValue": "***",//题目重要程度，*越多越重要

        "pkAnswer": "1",//JD-SUB-3类别题目的答案（单选），1选0未选

        "subjectType": "SUB-AVAIL-2",//必填，SUB-AVAIL-1非必填

        "pkCase": "",//JD-SUB-8类别题目的答案，结果为UUID

        "td4BizAnsweritemList": [{//选择题的选项

            "content": "否",//选项的正文

            "id": "6BA95898E82B41DF947D14603C4743CF"//选项的CODE

        },{ //另外一个选项         

        }]

```

##示例及代码

根据以上的JSON，我们生成对应的HTML。核心代码思想就是用正则分割数据，利用replace函数去匹配，生成HTML。

![效果](http://images.cnitblog.com/blog/84053/201402/122204406961192.jpg)


我只需要配置JSON内容中的subjectAttr属性，其表现方式就随着我的数据自然而变动，其他的逻辑就不需要再重复了



[DEMO](http://p2227.github.io/demo/jsTemplate/)



[CODE](https://github.com/p2227/demo/tree/gh-pages/jsTemplate)



##自我点评

这个模板是针对项目需求及easyui组件去处理的，可能局限性比较大，效率也有问题，但是这套简单的模板提高了代码的重用性，而且使得程序的**数据**与 **控制逻辑**耦合度降低，维护性提高了很多。而这个理论再提升，就是MVC了，前端也有不少优秀的MV*(MVC,MVP,MVVM)框架，先有实践，再结合源代码去学习优秀的框架，是提升自我的常用途径。



简单地描述一下本人的JS模板的数据模型



![数据模型](http://images.cnitblog.com/blog/84053/201402/122113369197955.jpg)



原理是非常简单的，JSON与HTML两种不同的格式，一个抽象的控制器使得他们之间转化（主要还是JSON2HTML，HTML2JSON有现成的serialize函数）。当我突然之间想进行一些视图上的改动，例如`JD-SUB-3`选择题，不再以单选框显示，而是“是 否”两个单radio，那我只需要改动`jsParser`中的`template`即可，见`JD-SUB-31`与`JD-SUB-3`的区别。如果再有一重if/else或者switch,那么在条件中也会有很多重复的功能，用js模板能把这些功能抽象出来，从而达到**思考与改进**中的目标。