模板引擎原理及underscore.js使用】的更多相关文章

为什么要使用模板引擎 DOM结构简单,完全可以使用DOM方法创建DOM树.$("<td></td").appendTo(); 当页面比较复杂的时候,下面的程序中红色部分来自JSON中的数据: <div class="feeds-item hasImg" id="item-702635"> <p class="feeds-item-pic"> <a href="http:…
JavaScript模板引擎原理,几行代码的事儿 2013-12-03 16:35 by BarretLee, 650 阅读, 6 评论, 收藏, 编辑 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret…
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是对模板引擎的原理,还是有深刻的理解的.如果有什么还需要改进的地方,记得提出来. 一.什么是Smarty模板引擎: Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP…
//php 控制器文件 <?php//引入模板引擎文件include("20130304.php");$smarty =newTinySmarty();$qq_numbers=array('a1'=>'12333','a2'=>'2222222','a3'=>'333333','a4'=>'3333333');$smarty->assign($qq_numbers);$smarty->assign('title','这是我的QQ号码');$sm…
View代码 <h1>People</h1> <ul data-bind="template: { name: 'peopleList' }"></ul> <script type="text/html" id="peopleList"> <% _.each(people(), function(person) { %> <li> <b data-bind=…
一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret Lee", "age": "20" }; var result = tplEngine(tpl, dat…
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎…
当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一个共同的特性:只专注渲染字符串(html) 早在几年前Backbone等mv*框架流行的时候,js模板引擎遇到了它们的春天,因为Backbone可以支持选配用户自己喜好的模板,并提供了接入方案.但是在新一代前端mv*框架盛行的今天,人们更多的关注点在于React的JSX支持的逻辑何等地强大.Vue的…
smarty(模板引擎,模板技术) 使用smarty主要是为了实现逻辑和外在内容的分离: 特点: 1.速度快(因为第二次执行的时候使用第一次执行时生成的编译文件) 2.缓存技术(正是因为缓存技术,使得smarty模板技术不太适合那些对于实时性更新要求比较高的,比如股票信息) 3.插件技术 4.缓存技术 5.语句自由静态页面技术实际上是以空间换时间的技术: http://localhost/news.php?id=8比如这个是某门户网站的新闻页面, 很多人访问,每次都要去数据库里查询,可以再第一次…
<div> <ul id="list"> <li>11111111111</li> <li>22222222222</li> <li>33333333333</li> </ul> </div> 我为ul中的每个li绑定了事件,鼠标移入变换背景色(为了演示代码,这里没有使用事件代理,如果使用事件代理,对于本例无效) var data = ["aaa"…
为了将数据库中的一组记录转换成HTML输出到界面上,大家都采用哪些做法呢? 在WebForm时代我们经常使用datagrid.repeater,当MVC问世后我们开始直接在视图上编写C#循环语句,而现在我更喜欢使用JavaScript模板引擎来生成HTML.因为这种做法的最大好处是实现了前后端代码的解耦,前端开发人员也无需了解太多的C#知识. 用法与示例: 第一步,在页面中引入JavaScript模板引擎: function template(str, data) { var strFunc =…
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123 很简单,,它接受三个参数,而且都是必填的…
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,从而出现在各大型网站 Twitter.淘宝网.新浪浪微博.腾讯QQ空间.腾讯微博等.那么他们各自性能怎么样?请看下面.   通常模板引擎 baiduTemplate(百度)\artTemplate(腾讯)\juicer…
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用.   从这几个指标来比较js…
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用.   从这几个指标来比较js…
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用.   从这几个指标来比较js…
. 关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为hardcode,而且拼接的过程很头疼,什么单引号双引号,符号嵌入多了就头晕眼花容易出错,如果会调试的话可以看到渲染模板的效率也很低下.本文将介绍一种新的利用模板引擎来渲染数据的方法. (1)artTemplate基础使用方法一:简洁语法版<!DOCTYPE html><html><…
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemplate.      项目之初用的是BaiduTemplate引擎,项目完成后发布到互联网,发现数据量大时,加载速度慢了点,就考虑换其它模板引擎是否能提高渲染效率,在网上查找.对比后发现ArtTemplate更好一点,就深入了解与学习了下,两个引擎语法有点差别,但结果是一至的,下面具体介绍一下两个引…
1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> <a href="{{href}}"> {{title}} </a> </h2> <img src="{{imgSrc}}" alt="{{title}}"> </script> 其中被{{ xx…
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach()方法用来循环遍历数组,方法中的function回调函数接收3个参数 参数1是遍历的数组内容(item):参数2是对应的数组索引(index),参数3是是数组本身(array). [].forEach(function(item,index,array){ ... }) var arr = ["白板&…
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引擎原理(zhaungbi),所以我折腾了一个简化版的模板引擎.可以实现数据绑定,三元表达式, for 循环和 if 判断. 如何实现三元表达式, for 循环和 if 判断,将在下一篇介绍. HTML 模板 下面是我定义好的html 模板字符串. var template = ` <div> &l…
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javascript引擎.而javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML. 如果有不了解的朋友,可以前往这两篇文章: 淘宝购物车页面 PC端和移动端实战 淘宝购物车页面 智能搜索框Ajax异步加载数据 源码地址: GitHub:Uncle-Keith 回…
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原理(zhaungbi),所以我折腾了一个简化版的模板引擎.可以实现数据绑定,三元表达式, for 循环和 if 判断.如何实现三元表达式, for 循环和 if 判断,将在下一篇介绍. HTML 模板 下面是我定义好的html 模板字符串. var template = ` <div> <s…
概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以就了结研究underscore源码这一心愿吧. underscore.js源码研究(1) underscore.js源码研究(2) underscore.js源码研究(3) underscore.js源码研究(4) underscore.js源码研究(5) underscore.js源码研究(6)…
本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着. 这里所说的js的模板引擎,用的是原生的javascript语法,所以很类似php的原生模板引擎. 前端模板引擎的作用? 1. 可以让前端开发更简单,不需要为了生成一个dom结构而使用+运算符去拼接字符串,而只需要一个元素的(里面的html模板),或者一个变量(存储着模板),或者 一个模板文件 2…
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 2. EasyTemplate 在使用过Freemarker模 板后,感觉它的 语法比较朴实,平易近人,容易上手,于是决定按它的语法风格实现一个前端的 模板引擎,这就有了…
开篇 关于knockout的文章,园里已经有很多大神写过了,而且都写得很好.其实knockout学习起来还是很容易的,看看官网的demo和园里的文章,练习练习就可以上手了(仅限使用,不包含研究源码).之所以想写这个系列,主要是想记录自己的学习和应用过程,也希望能给初学者一点帮助. 既然是学习过程就一步一步来,从最开始的解决方案,到优化过程,到最后的实现方案.有了思考和对比,才会更加明白这个东西有什么好处,为什么使用它.什么情况要使用它.ok, 官网学习链接为☺:knockoutJS 准备例子 过…
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到jQuery作者John Resig,研究了一下,算是明白了最简单的javaScript模版引擎的原理,并没有想象的那么高大上,写篇博客推导一下John Resig写法的过程,写出一个最简单的JavaScript模版引擎. 什么是JavaScript引擎 其实在网站开发中模板还是很常见的一种技术,比…
模板引擎可以让程序实现界面与数据分离,业务代码与逻辑代码的分离,这就提升了开发效率,良好的设计也使得代码复用变得更加容易.一般的模板引擎都包含一个模板解析器和一套标记语言,好的模板引擎有简洁的语法规则.强大的功能.高效的渲染效率.详尽的帮助说明与不断的更新与维护.常见的前端模板引擎有: 常用的java后台模板引擎:jsp.FreeMarker.Velocity等. 请不要迷恋速度,为了推广的测试可能是片面的,好的模板引擎经得起时间考验,建议大家选择成熟的.常用的模板引擎.另外不管前后端的模板引擎…
源代码下载地址:深入浅出之Smarty模板引擎工作机制 接下来根据以下的Smarty模板引擎原理流程图开发一个自己的模板引擎用于学习,以便加深理解. Smarty模板引擎的原理,其实是这么一个过程: 把模板文件编译成php文件,然后每次都去读取下模板的修改时间,没有修改就不编译.然后include这个“编译”后的PHP文件. 所谓编译也就是模板用正则替换成含PHP代码的过程. 实际上并不会每次请求都编译,所以性能尚可.  模板文件和php程序文件经过模板引擎的编译后合成为一个文件,即编译后的文件…