在前端开发中应用js模板引擎

《在前端开发中应用js模板引擎》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、在前端开发中应用JS模板引擎我们在使用JavaScript进行前端开发的时候，做的最多的事情，除了dealingwithdom以外，就是围绕json数据的操作了。而数据操作最麻烦的就是用json生成dom对象了，通常我们会写一堆for,switch,if之类的代码来支持data向view的转化,这样的代码一般会像：vardata=[{name:‘Claire’,sex:‘female’,age:18,flag:true},{name:‘Mark’,sex:‘male’,age:25,flag:tr

2、ue},{name:‘Dennis’,sex:‘male’,age:32,flag:false},{name:‘Tracy’,sex:‘female’,age:23,flag:true},{name:‘Wane’,sex:‘male’,age:18,flag:true}],html=[‘

’],item;for(vari=0,l=data.length;i’);switch(item.sex)

3、{case‘male’:html.push(‘’);break;case‘female’:default:html.push(‘’);break;}html.push(‘name:‘+item.name+‘, age:‘+item.age);html.push(‘’);}}html=html.push(‘

• 4、pancolor=”red”>name:Claire, age:18

• name:Mark, age:25
• name:Tracy, age:23
• name:Wane, age:18

5、维护。实际上，将展现逻辑同数据分开在服务器端脚本中是很容易的事情，因为服务器端脚本一般都支持模板技术。相信大家对<%%>之类的标记已经熟悉到烦了。模板语言的好处是能用一种灵活、易扩展的方式来将展现标记（如html）、数据（如json）和控制代码（如javascript）解耦。 现在也有不少浏览器端用javascript实现的模板引擎，如extjs的xtemplate,，jTemplate，TrimPath等。实现的思路都一样：将一段定义好的模板代码（像<%dosomething%>之类的）comp

6、ile为js代码；然后将jsondata作为这段js代码的输入，最终产生一段需要的文本（如html）。我在项目里使用过不少js模板引擎，下面列一下他们的优缺点，其中会用到两个性能指标，compilespeed（从一段模板代码生成js代码的速度）和applyspeed（应用jsondata产生最终输出文本的速度）Extjs：Xtemplate是extjs的基础组件，extjs中不少控件都是靠xtemplate来生成html。当然，就为了用个模板引擎就把1m多的extjsinclude进来显然不是什么

7、明智之举。所以我用的时候将其剥离了出来，大概也就10k吧。这个引擎的使用感觉是速度快，小，语法简单，没什么学习曲线。但是在模板语句中很难调用外部代码，难以扩展，而且，每compile一次都得n次eval，一不小心就会造成内存泄露。Compilespeed:中等  applyspeed：快jTemplate：这是一个开源的小程序，目前版本1.1（好像1.1很久了），32k。定义了一套完整的模板语法，然而这也正是问题所在，要想用这个程序还必须学一套没什么大用的语法。分析了它的代码后我发现它并没有什么c

8、ompile过程，大部分工作都放到applydata阶段了，导致它转换数据的速度很慢。Compilespeed:快   applyspeed:慢TrimPathtemplate：Trimpath本来是一个js框架，也和extjs一样基于一个模板引擎，只不过作者直接将模板引擎拿出来作为了一个可以单独调用的组件，20k左右。有一套简单的语法，功能一般，性能也不突出。Compilespeed:慢  applyspeed:中等把这几个引擎都用了一遍以后，感觉都不太顺手，不过也总结出了一个优