`
markone
  • 浏览: 6419 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

在前端开发中应用javascript模板引擎 - 事半功倍!

阅读更多
我们在使用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: ‘male’, age: 32, flag: false},

{name: ‘Tracy’, sex: ‘female’, age: 23, flag: true},

{name: ‘Wane’, sex: ‘male’, age: 18, flag: true}],    

html = [‘<ul>’], 
    item; 
 
for (var i = 0, l = data.length; i < l; i++) { 
 item = data[i]; 
 if (item.flag) {

html.push(‘<li>’);

switch (item.sex) {

case ‘male’:

html.push(‘<span style=”color: blue”>’);

break;

case ‘female’:

default:

html.push(‘<span style=”color: red”>’);

break;

}

html.push(‘name: ‘ + item.name + ‘,  age: ‘ + item.age);

html.push(‘</span></li>’);

}

} 
html = html.push(‘</ul>’).join(‘’); 


最终生成的html如下:
<ul> 
 <li><span color=”red”>name: Claire,  age: 18</span></li> 
 <li><span color=”blue”>name: Mark,  age: 25</span></li> 
 <li><span color=”red”>name: Tracy,  age: 23</span></li> 
 <li><span color=”blue”>name: Wane,  age: 18</span></li> 
</ul> 

这样做,随着数据结构越来越复杂很快你就会发现代码越来越臃肿,而且html完全嵌入代码,几乎不可维护。实际上,将展现逻辑同数据分开在服务器端脚本中是很容易的事情,因为服务器端脚本一般都支持模板技术。相信大家对<% %>之类的标记已经熟悉到烦了。模板语言的好处是能用一种灵活、易扩展的方式来将展现标记(如 html)、数据(如json)和控制代码(如javascript)解耦。
现在也有不少浏览器端用javascript实现的模板引擎,如extjs的xtemplate,,jTemplate,TrimPath等。实现的思路都一样:将一段定义好的模板代码(像 <% do something %>之类的)compile为js代码;然后将json data作为这段js代码的输入,最终产生一段需要的文本(如html)。

我在项目里使用过不少js模板引擎,下面列一下他们的优缺点,其中会用到两个性能指标,compile speed(从一段模板代码生成js代码的速度) 和 apply speed(应用json data产生最终输出文本的速度)



Extjs:

Xtemplate是extjs的基础组件,extjs中不少控件都是靠xtemplate来生成html。当然,就为了用个模板引擎就把1m多的extjs include进来显然不是什么明智之举。所以我用的时候将其剥离了出来,大概也就10k吧。这个引擎的使用感觉是速度快,小,语法简单,没什么学习曲线。但是在模板语句中很难调用外部代码,难以扩展,而且,每compile一次都得n次eval,一不小心就会造成内存泄露。

Compile speed: 中等    apply speed:快



jTemplate:

这是一个开源的小程序,目前版本1.1(好像1.1很久了),32k。定义了一套完整的模板语法,然而这也正是问题所在,要想用这个程序还必须学一套没什么大用的语法。分析了它的代码后我发现它并没有什么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('<ul><[foreach($data as people) { if (people.flag) {]>'
+ '<li>'
+ '<span style=”color: <[=people.sex == "female" ? "red" : "blue"]>”>'
+ 'name: <[=name]>, age: <[=age]>'
+ '</li>'
+ '<[}}]></ul>')).applyData(data);


不废话了 ,更多信息请查看:

http://code.google.com/p/sweet-template/

或者:

http://plugins.jquery.com/project/sweet-template
分享到:
评论

相关推荐

    基于jQuery开发的javascript模板引擎-jTemplates

    **基于jQuery开发的JavaScript模板引擎 - jTemplates** jTemplates是一个基于jQuery的JavaScript模板引擎,它允许开发者使用HTML模板来动态渲染数据,极大地提高了Web应用的界面更新效率和用户体验。通过将数据与...

    JavaScript前端开发案例教程-源代码.rar

    这个名为"JavaScript前端开发案例教程-源代码.rar"的压缩包文件提供了一系列实践案例,帮助开发者深入理解和掌握JavaScript在网页开发中的应用。 首先,JavaScript是一种解释型、弱类型、基于原型的脚本语言,它的...

    前端开发简历模板-前端开发工程师-1年.doc

    本资源是前端开发工程师的简历模板,具有1年的工作经验,擅长前端开发技术,熟悉HTML5、CSS3、JavaScript、Vue框架、Bootstrap框架、jQuery函数库、MySQL数据库等技术。同时,拥有微信小程序开发经验,熟悉原生小...

    前端开发简历模板-web前端-三年-北京.docx

    * 了解 NodeJS、MongoDB 后端应用开发 7. 前端布局和响应式设计 * 熟悉移动端 App 百分百布局、rem 布局和响应式布局 * 能解决不同设备之间的兼容问题和适配问题 8. 项目经验 * 房天下房产项目:使用 React+...

    javascript-高性能javascript模版引擎-templateEngine.zip

    在“javascript-高性能javascript模版引擎-templateEngine.zip”这个压缩包中,我们很显然会发现一个关于创建高效JavaScript模板引擎的资源集合。下面我们将详细探讨JavaScript模板引擎的工作原理、优点、常见实现...

    前端前端静态模板-757整理版-学生作业毕设实训素材.zip

    在前端开发领域,静态模板是构建网页应用的基础。"前端前端静态模板-757整理版-学生作业毕设实训素材.zip"这个压缩包文件,正如其标题所示,是一个整理过的前端开发资源集合,适用于学生进行作业、毕业设计以及实训...

    前端前端静态模板-blog网站-学生作业毕设实训素材.zip

    在前端开发中,静态模板通常指的是不依赖服务器端动态生成内容的网页结构。这种模板由HTML、CSS和JavaScript组成,可以预渲染并在客户端浏览器中解析显示。在“blog网站”这个案例中,我们可以预期以下几个关键知识...

    前端前端静态模板-房地产-学生作业毕设实训素材.zip

    在本资源中,“前端前端静态模板-房地产-学生作业毕设实训素材.zip”是一个包含前端应用源码的压缩包,适用于学生进行毕业设计和论文撰写的学习。这个压缩包的焦点在于前端开发,特别是针对房地产领域的静态页面模板...

    前端前端静态模板-动画网站-学生作业毕设实训素材.zip

    在"毕业设计"中,选择前端模板作为项目可以锻炼学生的实际开发能力,同时也能提高项目的完成度和专业性。通过分析和修改现有的源码,学生可以学习到前端开发的最佳实践,了解项目结构和文件组织方式。 "论文"部分,...

    前端前端静态模板-宠物医院-学生作业毕设实训素材.zip

    该压缩包文件“前端前端静态模板-宠物医院-学生作业毕设实训素材.zip”是一个针对前端开发的学习资源,特别适合正在准备毕业设计或论文的学生。它包含了一个完整的前端应用源码,可以作为实践项目来提升对前端技术的...

    简单的前端模板引擎能实现最基本的数据渲染

    在实际应用中,前端模板引擎通常会更复杂,包括支持条件语句、循环、函数调用等功能。例如,Mustache和Handlebars是两个流行的JavaScript模板引擎,它们提供了丰富的语法结构,如`{{#if}}...{{/if}}`(条件判断)和`...

    前端前端静态模板-黑白宽频-学生作业毕设实训素材.zip

    在前端开发领域,静态模板是构建网页应用的基础,它们提供了预定义的布局、样式和功能,使得开发者可以快速地搭建网站。"前端前端静态模板-黑白宽频-学生作业毕设实训素材.zip"是一个专门为学生作业和毕业设计提供的...

    前端前端静态模板-儿童游泳-学生作业毕设实训素材.zip

    本篇将围绕“前端前端静态模板-儿童游泳-学生作业毕设实训素材.zip”这一主题,深入探讨其包含的前端知识点和在毕业设计、实训中的应用。 首先,让我们关注这个项目的标题——“儿童游泳”。这暗示了项目可能是一个...

    laytpl-JavaScript模板引擎 v1.1-源码.zip

    总的来说,laytpl-JavaScript模板引擎v1.1的源码分析能够让我们深入理解前端模板引擎的内部运作,提升JavaScript开发技能,同时也为我们提供了自定义和优化模板引擎的可能性。通过阅读和学习源码,开发者可以更好地...

    前端前端静态模板-宠物网站-学生作业毕设实训素材.zip

    宠物网站前端静态模板是针对学生进行前端开发学习和毕业设计实践的理想素材,它提供了一个完整的前端应用源码,可以帮助学生理解和掌握前端开发的基本流程和技术。这个模板可能包含了HTML、CSS、JavaScript等核心...

    前端前端静态模板-大学-学生作业毕设实训素材.zip

    在前端开发领域,静态模板是构建网页和应用程序的基础。这个名为“前端前端静态模板-大学-学生作业毕设实训素材.zip”的压缩包提供了一个完整的前端应用源码开发Demo,非常适合大学生进行毕业设计学习。它涵盖了从...

    基于JavaScript和html的开发模板引擎

    总结,基于JavaScript和HTML的开发模板引擎是现代前端开发中不可或缺的工具,它简化了动态HTML的生成,提高了开发效率和代码质量。理解并熟练运用各种模板引擎,将有助于提升前端开发的专业水平。

    前端前端静态模板-城市鸟瞰-学生作业毕设实训素材.zip

    城市鸟瞰模板中,这些基础代码的组织和编写方式,为学生提供了一个真实的学习案例,通过这个案例,学生可以理解前端开发的底层逻辑,学会如何将这些基础技术融合在一起,共同构建出一个功能丰富的前端应用。...

    JavaScript前端开发案例教程-PPT(2).rar

    《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程,涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。

    前端静态模板-模板背景-学生作业毕设实训素材.zip

    在前端开发领域,静态模板是一种常见的工具,用于快速构建网页应用的基础结构。"前端静态模板-模板背景-学生作业毕设实训素材.zip"这个压缩包文件显然为学生提供了丰富的资源,帮助他们进行毕业设计和论文编写。以下...

Global site tag (gtag.js) - Google Analytics