JavaScript模板
来源:互联网 发布:java初中高级工程师 编辑:程序博客网 时间:2024/05/20 13:37
JavaScript模板引擎
一、为什么使用JavaScript模板引擎
项目中,部分模块(filter、toolbar)业务复杂,过多依赖jQuery去铺数据,导致整体性能不高,且使用jquery操作导致代码量和冗余度增大,后期维护不变。
使用javascript模板引擎可以有效的实现界面与数据分离(解耦),大大提升开发效率,且重用性较高。
二、什么是JavaScript模板引擎
首先要说明,模板引擎不属于特定技术领域,它是跨领域跨平台的概念。在JavaScript下有模板引擎,在PHP下也有模板引擎,甚至Asp开发都会用到模板引擎技术。
模板引擎可以生成特定格式的文档。JavaScript模板引擎,会生成一个标准的HTML文档。
三、什么场景下使用JavaScript模板引擎
1、如果有大量的动态ajax请求数据并需要封装成视图展现给用户,现有的实现方式不满性能要求;
2、如果有大量的HTML段,是通过动态拼串生成;
3、如果在页面布局中,存在共性模块和布局,可以提取出公共模板,减少维护的数量。(当然模块化同样可以解决)
四、如何选择JavaScript模板引擎
- n条数据 * m次渲染,在不同浏览器所需时间;
- GitHub星数量,和最新更新情况;(更新时间离现在越近越好,证明有人维护)
- 兼容性,可扩展性,容错及调试便捷性等;(容错,因其原理是动态执行JavaScript字符串,如没进行容错,出现数据异常将会导致整个应用崩溃;调试,动态执行调试器无法定位到错误)
- 自己编码习惯,和掌握程度。(大部分JavaScript模板引擎都简单易懂,不需太多学习成本)
(参考自:http://www.cnblogs.com/guohu/p/3870677.html)
根据上述规则,我们选择腾讯公司的artTemplate
五、JavaScript模板引擎原理及artTemplate优点
原理:动态执行JavaScript字符串!
优点:
1. 预编译:渲染需要动态编译JavaScript字符串完成变量赋值。而artTemplate的编译赋值过程却是在渲染之前完成的
2. 更快的字符串相加方式: IE6-8的浏览器下,数组push方法拼接字符串会比“+=”快,而在v8引擎中,使用“+=”方式比数组拼接快4.7倍;所以 artTemplate 根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
3. 支持运行时调试,可精确定位异常模板所在语句:(动态解析,所以调试器无法定位到错误)渲染的时候遇到错误会进入调试模式重新编译模板,而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号,当执行过程遇到错误,立马抛出异常模板对应的行号,模板调试器再根据行号反查模板对应的语句并打印到控制台。源码L282
4. 对Node端支持良好,便于以后统一扩展!
六、JavaScript模板引擎示例
artTemplate提供了两个版本的模板语法可以选择:简洁语法({{}})、原生语法(<% %>)。
选用原生语法,因为项目中使用了AngularJS,“{{}}”被angularjs的双向数据绑定占用,且原生语法支持原生JavaScript方法!
- 1
- 2
- 1
- 2
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
七、JavaScript模板引擎使用注意事项
- 不要滥用JavaScript模板引擎,不支持DOM元素获取。
- 注意语法不能和其他框架冲突(如angularjs的“{{}}”)
- JavaScript模板
- javascript 模板 javascript-jstl
- Javascript模板技术
- Javascript模板引擎
- javaScript 模板一
- 关于javascript模板
- javascript模板引擎
- javascript 模板 引擎
- 新一代 javascript 模板引擎
- 新一代 javascript 模板引擎
- javascript模板引擎 ICanHaz
- JavaScript模板引擎原理
- Javascript模板模式
- javascript编写模板
- javascript模板引擎 artTemplate
- javascript编写模板记录
- javascript模板引擎 Arttemplate
- javascript模板引擎原理
- JqueryUI表格编辑-与后端交互问题
- logistic 回归
- 微信小程序--ajax服务器交互及页面渲染
- Io流——将对象序列化和反序列化
- Apache Security-4 SSL(Security Socket Layer)
- JavaScript模板
- ArcGIS中ObjectID,FID和OID字段有什么区别?
- 编译、链接与库
- 你不努力,有什么资格抱怨(转)(文/蒋文伟)
- C语言数据结构——如何排序
- LuoguP1306 斐波那契公约数
- JAVA-初步认识-第二章-变量
- RabbitMQ消息队列之二:消费者和生产者 Demo
- 工欲善其事必先利其器(Android Studio 插件编写)