JavaScript模板入门介绍

比如要在一个列表中利用ajax插入一个li的时候，我会直接把数据跟html标签拼接成一句完整的html，然后插入到ul中。无论数据是从服务器端拿回的，或者是从用户的input输入中拿到的——无论哪种方法都是一样。
这个拼接过程放在JavaScript文件中，显得非常不优雅。如果还把style也放在JavaScript中，那数据、结构还有样式整个就是一锅粥了，要维护这样的代码会让人想自杀。最过分的就是把页面上最终要生成的HTML都直接放在服务器端，ajax吐出数据就包含了<li>标签，这样的页面几乎不存在扩展性了，修改一个前台样式都要涉及后台代码的修改。

后来我们知道了不要在JavaScript中对DOM进行style定制，而是只需要在CSS文件中定义好对应的class，然后在JavaScript中使用这个class就好。

接下来我们要做的就是用JavaScript模板把HTML结构（在这个案例中，是<li>标签）也从JavaScript中分离。

市面上的JavaScript模板很多了，以handlebars这个优秀的模板为例吧：

我们在页面的html中定义模板：


代码如下:

<script id="list-template" type="text/x-handlebars-template">
<li>{{title}}</li>
</script>

然后在我们的逻辑JavaScript代码中可以把数据拼接到这一模版中：


代码如下:

var source = $("#list-template").html(); //模板源，一般放在html的script中，这里我们使用jQuery，也可以使用其它方法直接获得内容字符串
var template = Handlerbars.compile(source); //编译生成一个模板template
var context = {title:"This is a todo item"} //获得数据，数据一般从ajax或者input中取得
var html = template(context); //数据+模板=新的html

这就是基本的 用法了，更多逻辑可以参考官方文档：http://handlebarsjs.com/

赞 (0)

相关推荐

  • JavaScript 动态添加表格行 使用模板、标记

    JavaScript 动态添加表格行 使用模板、标记

    对于复杂的操作情况,比如:添加一行之后,在这一行上还要进行相关的操作会显得有些吃力:本人比较喜欢表现层使用模板.标记填充数据的做法,于是自己做手做了个小组件,与大家一起分享. 组件运行截图: 设计思路: 在Table的thead中加入一行隐藏的行,当要添加一行时,复制一次隐藏的行,再将实例数据填充到这一行中相应的位置,填充完毕之后,再将这一行加到表格中去,整个操作完成. 模板:隐藏的行即相当于模板,当需要时复制一次模板. 标记:将模板行复制出来后,该如何填充数据? 网上比较多的组件的做法是,传递

  • JavaScript模板引擎用法实例

    本文实例讲述了JavaScript模板引擎用法.分享给大家供大家参考.具体如下: 这里介绍的这个模板引擎写得短小精悍,非常值得一看 tmpl.js文件如下: // Simple JavaScript Templating // John Resig - http://ejohn.org/ - MIT Licensed (function() { var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we'r

  • javascript轻量级模板引擎juicer使用指南

    使用方法 编译模板并根据数据立即渲染出结果 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data); 注册/注销自定义函数(对象) juicer.register('function_name', function); ju

  • Javascript模板技术

    /***Template.class.js***/ function Template() { this.classname="Template"; this.debug=false; this.file=new HashMap(); this.root=""; this.varkeys=new  HashMap(); this.varvals=new  HashMap(); this.unknowns="remove"; this.halt_o

  • javascript文本模板用法实例

    本文实例讲述了javascript文本模板用法.分享给大家供大家参考.具体如下: 这是我参考Prism.js算法写的一个小功能,没什么可说的,作为程序猿看例子应该秒懂. 字符串模板引擎类: /*class*/StringTemplate = function ( /* Optional {patt: RegExp, clPatt: RegExp}*/pattern) { if (!!pattern) { this.patt = pattern.patt; this.clPatt = patter

  • laytpl 精致巧妙的JavaScript模板引擎

    laytpl 精致巧妙的JavaScript模板引擎

    laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人.如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 •性能卓绝,执行速度比号称性能王的artTemplate.doT还

  • 常用的JavaScript模板引擎介绍

    最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎. 3. jSmart jSmart 是著名的 PHP 模板引擎 S

  • 高性能JavaScript模板引擎实现原理详解

    高性能JavaScript模板引擎实现原理详解

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

  • Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

    Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

    复制代码 代码如下: $("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTem

  • JavaScript模板入门介绍

    比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中.无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的--无论哪种方法都是一样. 这个拼接过程放在JavaScript文件中,显得非常不优雅.如果还把style也放在JavaScript中,那数据.结构还有样式整个就是一锅粥了,要维护这样的代码会让人想自杀.最过分的就是把页面上最终要生成的HTML都直接放在服务器端,ajax吐出数据就包含了<li>标签,这样的页面

  • python中的flask框架Jinja 模板入门教程

    python中的flask框架Jinja 模板入门教程

    目录 1.快速体验 2.Flask 最小 DEMO 3.模板继承 4.Super Blocks 5.Macros 6.自定义过滤器 7.结论 Flask 和 Django 附带了强大的 Jinja 模板语言. 对于之前没有接触过模板语言的人来说,这类语言基本上就是包含一些变量,当准备渲染呈现 HTML 时,它们会被实际的值替换. 这些变量放在标记或分隔符之前.例如:Jinja 模板使用 {% ... %} 表示循环,{{ ... }} 表示一个表达式运算结果返回. Jinja 模板其实是 htm

  • JavaScript模板引擎实现原理实例详解

    本文实例讲述了JavaScript模板引擎实现原理.分享给大家供大家参考,具体如下: 1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> <a href="{{href}}" rel="external nofollow" > {{title}} </a> </h2> <img src

  • JavaScript模板引擎应用场景及实现原理详解

    本文实例讲述了JavaScript模板引擎应用场景及实现原理.分享给大家供大家参考,具体如下: 一.应用场景 以下应用场景可以使用模板引擎: 1.如果你有动态ajax请求数据并需要封装成视图展现给用户,想要提高自己的工作效率. 2.如果你是拼串族或者数组push族,迫切的希望改变现有的书写方式. 3.如果你在页面布局中,存在共性模块和布局,你可以提取出公共模板,减少维护的数量. 二.实现原理 不同模板间实现原理大同小异,各有优缺,请按需选择,以下示例以artTemplate模板引擎来分析. 2.

  • JavaScript模板引擎原理与用法详解

    本文实例讲述了JavaScript模板引擎原理与用法.分享给大家供大家参考,具体如下: 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret Lee", "age": "

  • 只有 20 行的 JavaScript 模板引擎实例详解

    本文实例讲述了 JavaScript 模板引擎.分享给大家供大家参考,具体如下: 原文链接:JavaScript template engine in just 20 lines (译者吐槽:只收藏不点赞都是耍流氓) 前言 我仍旧在为我的JS预处理器AbsurdJS进行开发工作.它原本是一个CSS预处理器,但之后它扩展成为了CSS/HTML预处理器,很快它将支持JS到CSS/HTML的转换.它就像一个模板引擎一样能够生成HTML代码,也就是说它能够用数据填充模板当中的标识片段. 因此,我希望去写

  • Javascript新手入门之字符串拼接与变量的应用

    Javascript新手入门之字符串拼接与变量的应用

    1. 课程大纲 字符串拼接(+)的学习和应用 坐标变换在飞机大战游戏中的应用 2.1 字符串的拼接 在JS中使用"+"号,连接字符串.变量.数值等. 2.2 在警告框上显示朋友的数量 在警告框上显示朋友的数量,显示效果如下 声明变量 friends表示朋友的数量,在警告框上显示"我的朋友数量为:7",使用字符串拼接符"+" ,代码如下' var friends = 7; alert("我的朋友数量为:" +friends);

随机推荐