doT.js-doT模板方便快捷的组织页面DOM
重来没有想过,作为一个坐吃等死的前端也会有学习引擎模板的一天
都是被现实所逼呀.学习优秀代码时,一句一句翻译。忽然看到{{ }}这个包裹的代码。糟心了!看不懂,咋办?学呀!!!!!!
这是我开始学习的第一个引擎模板!!!鼓掌
doT.js
插件描述:doT模板方便快捷的组织页面DOM
doT.js特点是快,小,无依赖其他插件
当然了,网上有很多同僚都有介绍这个模板的,基本全部一样。所以我也不会有所改动(照搬)
1.基本使用套路百度翻译:(真心的,这个百度翻译后的中文我自己都不明白)
{{ }}for evaluation(百度翻译:为了评价)
{{= }}for interpolation(百度翻译:插值法) //理解为:赋值
{{~ }}for array iteration(百度翻译:数组代)
{{? }}for conditionals(百度翻译:条件句)
{{! }}for interpolation with encoding(百度翻译:用编码进行插值)
{{# }}for compile-time evaluation/includes and partials(百度翻译:编译时的评估/包含和部分)
{{## #}}for compile-time defines(百度翻译:编译时间定义)
2.举例
首先是要引用插件的
<script type="text/javascript" src="jquery-1.11.3.js" ></script>
<script type="text/javascript" src="doT.js" ></script>
1).for interpolation 赋值
格式:
{{= }}
<div id="interpolation"></div>
<script id="interpolationtmpl1" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>
<script>
var dataInter1 = {
"name": "Jake",
"age": 31
};
var interText1 = doT.template($("#interpolationtmpl1").text());
$("#interpolation").html(interText1(dataInter1));
</script>
doT.js-doT模板方便快捷的组织页面DOM的更多相关文章
- 方便快捷组织页面 DOM 的 js 引模板擎 —— doT.js 的使用
—————————————————————————————————————————— ——————————————————————————————————————————
- doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···
doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...
- doT js模板入门
doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...
- doT.js模板引擎及基础原理
时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...
- doT.js——前端javascript模板引擎问题备忘录
我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想 ...
- doT.js模板和pagination分页应用
doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...
- doT js模板入门 2
doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...
随机推荐
- logback写日志
https://blog.csdn.net/u010128608/article/details/76618263 https://blog.csdn.net/zhuyucheng123/articl ...
- v2ex站长专访 - 100offer专访Livid:不仅仅是V站站长
转载自: https://www.douban.com/group/topic/121611313/ 前几天上网时偶然发现v2ex站长的blog(https://livid.v2ex.com/),了解 ...
- token验证机制
最近在vue-cli项目实现登录的过程中用到了token验证,在此总结如下 1. 登录时,客户端通过用户名与密码请求登录 2. 服务端收到请求去验证用户名与密码 3. 验证通过,服务端会签发一个Tok ...
- Kubernetes(k8s)底层网络原理刨析
目录 1 典型的数据传输流程图 2 3种ip说明 3 Docker0网桥和flannel网络方案 4 Service和DNS 4.1 service 4.2 DNS 5 外部访问集群 5.1 外部访问 ...
- centos新增或删除用户
新增用户snzigod:adduser snzigod 修改snzigod密码:passwd snzigod 删除用户snzigod:userdel snzigod 删除用户以及用户目录: userd ...
- webservice soap wsdl简介
先给出一个概念 SOA ,即Service Oriented Architecture ,中文一般理解为面向服务的架构, 既然说是一种架构的话,所以一般认为 SOA 是包含了运行环境,编程模型, 架构 ...
- android:exported属性
这个属性用于指示该服务是否能够被其他应用程序组件调用或跟它交互.如果设置为true,则能够被调用或交互,否则不能.设置为false时,只有同一个应用程序的组件或带有相同用户ID的应用程序才能启动或绑定 ...
- Mysql - 安装及初始化设置
1. 下载mysql-5.7.13-tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.13-linux-glibc2.5-x8 ...
- Django Rest Framework 教程及API向导
Django Rest Framework 教程及API向导. 一.请求(Request)REST_FRAMEWORK 中的 Request 扩展了标准的HttpRequest,为 REST_FRAM ...
- js多少时间之前
<?php $time = time()*1000; $end_time = strtotime("2018-01-01")*1000; $time_ago = $time ...