《在前端开发中应用JS模板引擎》由会员分享，可在线阅读，更多相关《在前端开发中应用JS模板引擎（3页珍藏版）》请在金锄头文库上搜索。
1、在前端开发中应用 JS 模板引擎我们在使用 JavaScript 进行前端开发的时候，做的最多的事情，除了 dealing with dom 以外，就是围绕 json 数据的操作了。而数据操作最麻烦的就是用 json 生成 dom 对象了，通常我们会写一堆 for, switch, if 之类的代码来支持 data 向 view 的转化, 这样的代码一般会像：var data = name: Claire, sex: female, age: 18, flag: true,name: Mark, sex: male, age: 25, flag: true,name: Dennis, sex:
2、 male, age: 32, flag: false,name: Tracy, sex: female, age: 23, flag: true,name: Wane, sex: male, age: 18, flag: true,html = , item;for (var i = 0, l = data.length; i );switch (item.sex) case male:html.push();break;case female:default:html.push();break;html.push(name: + item.name + , age: + item.age)
3、;html.push();html = html.push().join();最终生成的 html 如下：name: Claire, age: 18name: Mark, age: 25name: Tracy, age: 23name: Wane, age: 18这样做，随着数据结构越来越复杂很快你就会发现代码越来越臃肿，而且 html 完全嵌入代码，几乎不可维护。实际上，将展现逻辑同数据分开在服务器端脚本中是很容易的事情，因为服务器端脚本一般都支持模板技术。相信大家对之类的标记已经熟悉到烦了。模板语言的好处是能用一种灵活、易扩展的方式来将展现标记（如 html）、数据（如json）和控制代码
4、（如 javascript）解耦。现在也有不少浏览器端用 javascript 实现的模板引擎，如 extjs 的xtemplate,，jTemplate，TrimPath 等。实现的思路都一样：将一段定义好的模板代码（像 之类的）compile 为 js 代码；然后将 json data 作为这段 js 代码的输入，最终产生一段需要的文本（如 html）。我在项目里使用过不少 js 模板引擎，下面列一下他们的优缺点，其中会用到两个性能指标，compile speed（从一段模板代码生成 js 代码的速度） 和 apply speed（应用 json data产生最终输出文本的速度）Extjs
5、：Xtemplate 是 extjs 的基础组件，extjs 中不少控件都是靠 xtemplate 来生成 html。当然，就为了用个模板引擎就把 1m 多的 extjs include 进来显然不是什么明智之举。所以我用的时候将其剥离了出来，大概也就 10k 吧。这个引擎的使用感觉是速度快，小，语法简单，没什么学习曲线。但是在模板语句中很难调用外部代码，难以扩展，而且，每 compile 一次都得 n 次 eval，一不小心就会造成内存泄露。Compile speed: 中等 apply speed：快jTemplate：这是一个开源的小程序，目前版本 1.1（好像 1.1 很久了），32k
6、。定义了一套完整的模板语法，然而这也正是问题所在，要想用这个程序还必须学一套没什么大用的语法。分析了它的代码后我发现它并没有什么 compile 过程，大部分工作都放到 apply data 阶段了，导致它转换数据的速度很慢。Compile speed: 快 apply speed: 慢TrimPath template：Trimpath 本来是一个 js 框架，也和 extjs 一样基于一个模板引擎，只不过作者直接将模板引擎拿出来作为了一个可以单独调用的组件，20k 左右。有一套简单的语法，功能一般，性能也不突出。Compile speed: 慢 apply speed: 中等把这几个引擎都用了一遍以后，感觉都不太顺手，不过也总结出了一个优秀的模板引擎应该具有的特点：1. 使用 javascript 的流程控制语句，并做适当增强2. 在模板代码中可自由引用任何 global 对象，模板代码中的 scope（即 this 对象）可任意扩展3. 性能优良（compile speed 和 apply speed）于是，按照这三条标准，我自己写了一个很轻量的模板引擎，使用这个引擎，上面那段替换代码就可以换成：var html = (new Sweet(+ + ”+ name: , age: + + ).applyData(data);开源地址：http:/
