小试javascript模版mustache
夜以深,人未眠,本该入睡,然逢周末,无聊甚哉,故于此作文打发时间-----------
前几日,无聊,小试了下javascript版本的mustache模版,说是小试,其实主要目的是阅读学习其源码。如果仅仅是去学会如何使用它,相信除了实际开发中对你有些帮助外,写几个小demo应该是没啥大意思的(虽然我现在正在做这样的事情。ps:好吧,我错了)。言归正传,这里之前之所以说是javascript版本的,原因是它必然有其它版本,如果你想了解其它语言版本,这里点击此链接http://mustache.github.com/它会把你传送过去。
今天呢,其它的版本就不研究了,就试试javascript版本的吧。看到着,你或许疑惑,这模版啥玩意?别急,请慢慢往下阅读。
一、在前端为什么需要模版
随着互联网前端页面越来越复杂,交互性越来越强,如今,对于前端的要求也是越来越高,当然本文这里指的主要是前端的javascript。在XX年前,记得我还在读书上学的时候。当时javascript就像个玩具,笔者也不止一次的被人告诫,javascript只是给网页增加点特效,而且很多浏览器对它支持不够诸如此类,大概就这些,具体也记得不清楚了,反正就是劝人不要太花时间在它上面。在当时来看,确实如此啊。又怎知世界变化如此之快,又有谁知如今javascript已然发展到如此?一不小心又扯远了,嘿嘿,回来。其实,相信如果你在开发中,遇到页面需要通过ajax加载一些东西,例如后台传来的一个用户信息列表,假设结构如下:
{"users":[{"name":"sam","age":14},{"name":"jack","age":24},{"name":"lucy","age":19}]}
在过去,我们都是通过解析后台传来的json对象,以前面说的用户列表为例,需要迭代每一项,然后通过js字符串拼接并加入需要的标签和样式,最后动态添加到页面中去。这样做当然没什么问题,但是写起来是有些麻烦的,因为你得一次一次的拼字符串,但其实这也不是重点,最重要的是这样做维护起来也不方便,如果你需要换个展现形式,你得换上标签,再一个个仔细的拼接,每次看到一堆js中夹杂着html的代码时,就会头晕。于是,为了解决这个问题,一大堆的模版就出现了。比较典型的就是jquery的template plugin,kissyTemplate,artTemplate,还有今天讲到的mustache等等。至于它们之间的优劣性能等等这里就不讨论了,有兴趣可以自己找资料测试。既然模版可以让处理以上的问题变得简单,那么mustache又是如何处理,如何使用的呢?
二、如何使用mustache
首先,当然是下载mustache喽,执行npm install mustache(电脑上需要装有Node.js与npm,如果不想这样下载安装mustache,直接进https://github.com/janl/mustache.js下载)
下载完成后,打开看下mustache.js文件,大概只有600行左右的代码,相当简洁啊。截取开始部分如下:
看了下,头部,显然支持CommonJS与AMD规范了,也就是说Node.js也亦可以使用它作为模版引擎,非常棒,虽然还没试过。
看了下官方,上面说mustache主要特点是logic less Templates ,意思说,模版中无逻辑或者说很少逻辑。毕竟模版只是作为一个view而已,不需要太多的逻辑代码。它主要是通过{{ }}符号来传递变量的(这么说也许并不科学,只是大致可以这么理解)。还是先看个简单例子:
上面有一个people的对象,里面有三个属性,其中一个属性是一个函数。mustache的使用非常简单,调用只需要Mustache.render(temp,obj)函数就可以了,其中第一个参数是你写的模版,第二个参数是你需要渲染到模版的对象。最终返回渲染完成的字符串,这里,我们最后把他写入html文档的div标签内。
看到这,你应该可以明白模版渲染对象,提取属性的值渲染到模版的特定位置,可以理解为:{{key}} = 》 value 。
这里只是简单渲染了一个对象,那么对于文章开头提出的列表对象,又该如何做呢?看示例:
模版中通过{{#listkey}}
{{/listkey}}
中间包裹列表中每一项的key
{{#listkey}}{{#itemkey}}{{/listkey}}
这样模版引擎会自动迭代每一项,并渲染到模版中去,是不是很简单。当然以上这些只是最基本的用法,更复杂的用法和它内部的机制今天就不写了,太晚了,写着写着天都快亮了,还是先睡觉了zZZ
小试javascript模版mustache的更多相关文章
- 简单JavaScript模版引擎优化
在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...
- Javascript模版引擎mustache.js简介
背景 最近使用ELK的sentinl进行告警配置,sentinl的邮件通知支持mustache,借此机会学习了mustache相关知识,记录在此. mustache的思想 mustache的核心是标签 ...
- Javascript模版引擎简介
回顾 Micro-Templating 出自John Resig 2008年的一片文章,以及其经典实现: // Simple JavaScript Templating // John Resig - ...
- javascript——浅谈javascript模版(自定义)
/** * Created by Administrator on 15-1-19. */ function functionUtil() { } functionUtil = { //某个DOM节点 ...
- javascript模板引擎Mustache
Mustache(英文本意:触须,胡须)是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手. 下载:https:/ ...
- 探究Javascript模板引擎mustache.js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
- JavaScript资源大全中文版(Awesome最新版--转载自张果老师博客)
JavaScript资源大全中文版(Awesome最新版) 目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...
- JavaScript资源大全
目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器 UI 输入 日历 选择 文件上 ...
- Awesome Javascript(中文翻译版)
[导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...
随机推荐
- Jenkins部署资料
http://www.cnblogs.com/gaohongchen01/p/5058928.html https://www.javacodegeeks.com/2015/04/jenkins-ho ...
- Permission Policies
The Permission Policy determines Security System behavior when there are no explicitly specified per ...
- IVF link error错误不显示的问题
遇到一个奇怪的问题,IVF编译链接时显示error LINK: 后面没有具体的错误信息(见后图,我的窗口后面是空的)环境:windows 10 64位系统,VS2017 commutity 版本, ...
- Linux学习之常用系统工作命令(一)
由于centos和RHEL互通,两个版本可以相互学习,所以截图有两个界面 Linux系统与win系列是两个几乎完全不同的操作系统,但是就应用范围来说,是win系统更胜一筹,然而,这反而也成为win系 ...
- MySQL(MariaDB)基础之一:编译安装
一.cmake介绍 cmake的重要特性之一是其独立于源码的编译功能,即编译工作可以在另一个指定的目录中而非源码目录中进行,这可以保证源码目录不受任何一次编译影响,因此在同一个源码树上可以进行多次不同 ...
- birt 访问频繁报错Cannot create JDBC driver of class '' for connect URL 'null' java.sql.SQLException: No suitable driver
一般birt项目都是部署tomcat启动.这个问题大概率是因为没有配置JNDI数据源的原因. 参考链接: https://www.cnblogs.com/xdp-gacl/p/3951952.html
- Mysql Mariadb 密码问题
mysql密码遗忘和登陆报错问题 mysql登录密码忘记,其实解决办法很简单,只需要在mysql的主配置文件my.cnf里添加一行“跳过授权表”的参数选择即可! 在my.cnf中添加下面一行:[r ...
- Linux 磁盘与文件系统(EXT2)简介
Linux 中,一切(或几乎一切)都是文件. 一.Linux 磁盘分区与文件系统 1.1 磁盘分区 磁盘的分区主要分为主分区和扩展分区 1)主分区:总共最多只能有四个主分区: 2)扩展分区:只能有一个 ...
- ms cms
很多开源CMS,都是半开源或假开源. 看看微软的CMS怎么样吧.这么著名的CMS,下载网址不好找. https://orchard.codeplex.com/SourceControl/latest
- Linux系统下安装jdk1.8
JDK安装分为两种方式 一种是解压tar.gz配置安装, 一种是rpm安装,我这里是tar.gz安装方式 一.首先在oracle官方网下载jdk,网址如下:http://www.oracle.com ...