Javascript模板及其中的数据逻辑分离思想
2014-02-13 00:58
253 查看
需求描述
项目数据库的题目表描述了70-120道题目,并且是会变化的,要根据数据库中的数据描述,比如,选择还是填空题,是不是重点题,题目总分是多少等等有条件地渲染出题目的内容,并且能做完后保存回数据库,打印出来。以前的实现
由后台(structs2+spring+ibaties)查询,扔出JSON ,前台就是无穷无尽的if,switch。一但有要修改,就要吐血了,也不知道要改多少个地方思考与改进
结合自己的正则表达式及HTML知识,我们可以定义一种规则,使得JSON与HTML进行关联,怎么样的JSON就有怎么样变化的HTML,当需求变动-->数据库变动-->生成JSON变动-->生成HTML变动,整个项目就好维护多了。于是这就形成了一套Javascript模板。
JSON数据解释
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。我只需要配置JSON内容中的subjectAttr属性,其表现方式就随着我的数据自然而变动,其他的逻辑就不需要再重复了
DEMO
CODE
自我点评
这个模板是针对项目需求及easyui组件去处理的,可能局限性比较大,效率也有问题,但是这套简单的模板提高了代码的重用性,而且使得程序的数据与 控制逻辑耦合度降低,维护性提高了很多。而这个理论再提升,就是MVC了,前端也有不少优秀的MV*(MVC,MVP,MVVM)框架,先有实践,再结合源代码去学习优秀的框架,是提升自我的常用途径。简单地描述一下本人的JS模板的数据模型
原理是非常简单的,JSON与HTML两种不同的格式,一个抽象的控制器使得他们之间转化(主要还是JSON2HTML,HTML2JSON有现成的serialize函数)。当我突然之间想进行一些视图上的改动,例如
JD-SUB-3选择题,不再以单选框显示,而是“是 否”两个单radio,那我只需要改动
jsParser中的
template即可,见
JD-SUB-31与
JD-SUB-3的区别。如果再有一重if/else或者switch,那么在条件中也会有很多重复的功能,用js模板能把这些功能抽象出来,从而达到思考与改进中的目标。
相关文章推荐
- Javascript模板及其中的数据逻辑分离思想(MVC)
- XML的优势---1.2.3: 数据逻辑和显示逻辑分离
- 基于HTML模板和JSON数据的JavaScript交互
- 在Django中使用JavaScript代替模板接收并处理数据
- Javascript中数据类型及其判别方法(typeof instanceof Object.prototype.toSting.call(obj)的区别)
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
- JavaScript数据类型分析及其转换
- C++类模板定义与实现的分离—学习C++数据抽象和问题求解
- Ajax中数据传递的另一种模式 javascript Object Notation思想(JSON)
- js笔记2之JavaScript标识符、数据类型及其转换
- linq to ef 通过泛型 操作数据库,分离数据操作与业务逻辑
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
- 模板与页面分离--javascript
- 基于HTML模板和JSON数据的JavaScript交互(移动端)
- 基于HTML模板和JSON数据的JavaScript交互
- 基于HTML模板和JSON数据的JavaScript交互
- Javascript基础_01数据类型及其转换
- 移动端基于HTML模板和JSON数据的JavaScript交互
- javascript数据类型及其常用方法
- JavaScript与JSON数据交互实现的基于HTML的模板