以下应用场景可以使用模板引擎:
1、如果你有动态ajax请求数据并需要封装成视图展现给用户,想要提高自己的工作效率。
2、如果你是拼串族或者数组push族,迫切的希望改变现有的书写方式。
3、如果你在页面布局中,存在共性模块和布局,你可以提取出公共模板,减少维护的数量。
不同模板间实现原理大同小异,各有优缺,请按需选择,以下示例以artTemplate模板引擎来分析。
模板一般都是放置到textarea/input等表单控件,或者script[type="text/html"]等标签中,如下:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
//textarea或input则取value,其它情况取innerHTML
一般都是templateFun(“id”, data);其中id为存放模板字符串的元素id,data为需要装载的数据。
一般都是通过ID来获取,document.getElementById(“ID”):
1 2 |
|
这步的主要操作其实多余的空格,解析出html元素和逻辑语句及关键字。例如:artTemplate.js中的代码实现:
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 |
|
例如上例中:”{{if isAdmin}}”最终被解析成”if(isAdmin){”,”{{/if}}“被解析成“}”。
这步的主要操作就是字符串的拼接成生成函数,看看artTemplate的部分源码:
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 |
|
上例中模板中的模板字符串代码会被拼接成如下字符串:
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 |
|
然后会被生成如下函数:
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 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
BaiduTemplate —— 最简单好用的JS模板引擎(百度)
artTemplate —— 高性能JavaScript模板引擎(腾讯CDC)
Velocity.js —— 来自淘宝的JS 模板引擎
JavaScript Templates —— 轻量、快速、强大、无依赖模板引擎
Juicer —— 高效、轻量的Javascript模板引擎
mustache.js —— Logic-less {{mustache}} templates with JavaScript
各大Javascript模板引擎测试对比
以上がJavaScript テンプレート エンジンのアプリケーション シナリオと実装原則の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。