模板引擎:将动静部分糅合的一种实现机制或者技术
var items = [
{title:'..',photo:'http://',id:1,desc:'a'},
{title:'..',photo:'http://',id:2,desc:'a'},
{title:'..',photo:'http://',id:3,desc:'a'}
]
我们平常看到的网页,里面有图片啊,文字啊,都是html代码,这些可以看作网页中的数据,这些数据有些是写死到页面上的,也可能是存在数据库里面的,如果是写死的,那么服务器,或者后台程序,直接返回这个html代码,交给浏览器就可以了,那如果是动态的数据,服务器还需要把这些动态的数据检索出来,再替换到html页面里面中,那替换的这个过程就需要一种机制或者一种技术来做,这里就可以把动态的部分看作是纯数据,静态的部分看作是模板,模板里面会有一些约定的占位符,通过某种替换机制,将动态的部分填到这些占位符里面去,有一个比较容易到场景

假如我们有一个异步到ajax请求,拿到的是一个图片列表数据,那通过js,我们也可以通过一个很简单的for循环,然后一条一条进行拼接,把拼接后的html动态的插入页面中,那如果数据结构很简单,这个拼接过程也会很方便,那如果数据的结构比较复杂,那么拼接起来就比较费劲,所以会有一些模板库来做这些事情,通过约定这些占位符,或者这种语法,来把某一段静态模板通过模板引擎,把数据给替换进去,这样做,就可以把数据和展现切分开,数据就是数据,展现就是展现,在各种语言中,都会有基于这么一种机制而开发的一些模板框架,
PHP: Smarty SimpleTemplate Xtemplate Savant
Java: Velocity FreeMarker Jbyte
C#: Dotliquid SharpDom Razor
Javascript: Mustache Handlebars Juicer Xtemplate EJS Jade
对于javascript这门语言,模板引擎更是五花八门,实现的机制也是不尽相同,国外的国内的都会有很多优秀的框架,也各有各的特点,这些模板引擎也不是都用在前端的,有的是前后端都可以通用,尤其是在nodejs这种环境下,前后端共用一套模板引擎,有时候可以很大的降低开发的成本,如果是需要seo这种需要优化的场景,通过后端渲染后,返回整个页面,那如果是单页的应用,所有的数据都可以异步化,在前端进行局部都请求,渲染和刷新,
jade的使用场景,具备以下这些经验学起来更容易一点
针对用户群:
  使用过一些模板库,比如mustache/jquery.tmpl
  有一定的命令行基础
  了解或者使用过nodejs
jade安装:
  [sudo] npm install -g jade
jade特点:
  1、超强的可读性
  2、灵活易用的缩进
  3、快扩展
  4、代码默认经过编码处理,以增强安全性
  5、编译及运行的上下文错误报告
  6、命令行编译支持
  7、html模式(使用 !!! 5文档类型)
  8、可选的内存缓存
  9、联合动态的静态标记类
  10、利用过滤器解析树的处理
总结一句话,简洁易懂,
举例一下jade解决的问题,也就能了解,为什么会有这样的模板引擎出现,在我们开发页面的时候往往会碰到比较复杂的区块,会牵扯比较深层次的dom嵌套,这就是著名的巢状dom结果

在后期维护修改的时候,一不小心少了各尖括号或者可闭合没有对应上,这就会导致dom结构的混乱甚至错误,这其实是一个很头痛的问题,尤其是接手别人的项目,要改东西,这个时候jade就诞生了,来解决嵌套和标签的问题
doctype html
html(lang='en')
head
title = pageTitle
script(type='text/javascript').
if(foo){
bar(1+5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it !
p.
Jade ia a terse and siple templating laguage
jade在命令行中使用
npm install jade --global
jade [options] [dir|file...]

jade简介的更多相关文章

  1. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

  2. JADE平台入门

    相关介绍: JADE(Java Agent Development Framework,Java智能体开发框架) 用途: Java智能体开发框架 开发者: TILAB 主要功能: AMS.DF.ACC ...

  3. Express 简介

    Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  4. NodeJS入门简介

    NodeJS入门简介 二.模块 在Node.js中,以模块为单位划分所有功能,并且提供了一个完整的模块加载机制,这时的我们可以将应用程序划分为各个不同的部分. const http = require ...

  5. riot.js教程【一】简介

    Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前 ...

  6. jade 详解

    简介 jade 是HTMl模板引擎,用javascript编写,可以在Node.js中使用.本文主要介绍原生node操作jade文件的方法.   安装 npm install jade 方法(API) ...

  7. 使用pug(jade),以及在vue+webpack中使用pug(jade)

    一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...

  8. Jade模板引擎让你飞

    写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p ...

  9. ASP.NET Core 1.1 简介

    ASP.NET Core 1.1 于2016年11月16日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强.这个版本包含了多个新的中间件组件.针对Windows的WebListener服 ...

随机推荐

  1. 1.Ioc&DI和Spring

    1.面向对象回顾和案例 面向对象程序设计:1 2 3 4 案例分析: 需求分析: 报表功能:     报表服务类,检索数据,并生成图标     报表生成器类,生成不同格式的报表文件,例如PDF格式.H ...

  2. Unable to verify your data submission.加入了_csrf也报400错误的解决

    <input type="hidden" name="_csrf" value="<?=Yii::$app->request-> ...

  3. JAVA中 List和ArrayList的区别

    List是一个接口,而ListArray是一个类.  ListArray继承并实现了List.  所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造.  ...

  4. PCB的版本控制

    http://club.szlcsc.com/article/details_1783_1.html 转载自:http://www.amobbs.com/thread-5606014-1-1.html ...

  5. PlayMaker Rotate旋转

    每秒 绕 Y轴 旋转 180度 ,每帧都执行. 不勾选Every Frame的话就只会旋转一帧.

  6. js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div

    预期效果: 1.点击Save按钮,创建及显示loading div框 2.Save操作完成后,再删除loading 及弹出提示结果 <html> <head> </hea ...

  7. (转)Rsync 排错案例解析

    Rsync 排错案例解析 原文:http://blog.51cto.com/irow10/1827306 错误一. 执行计划任务的备份脚本后没有看到备份的文件 1.首先查看crontab日志是否执行文 ...

  8. LeetCode 122.买卖股票的最佳时机(C++)

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...

  9. CBoard数据分析实战

    介绍 CBoard由上海楚果信息技术有限公司主导开源, 它不仅仅是一款自助BI数据分析产品, 还是开放的BI产品开发平台: 用户只需简单妥妥拽拽就能自助完成数据多维分析与报表设计 开发者能够简单扩展连 ...

  10. 开发安全的 API 所需要核对的清单

    开发安全的 API 所需要核对的清单 以下是当你在设计, 测试以及发布你的 API 的时候所需要核对的重要安全措施. 身份认证 不要使用 Basic Auth 使用标准的认证协议 (如 JWT, OA ...