首页 > 编程语言 >laytpl( Layui 的一款轻量 JavaScript 模板引擎)

laytpl( Layui 的一款轻量 JavaScript 模板引擎)

时间:2023-05-26 09:13:31浏览次数:48  
标签:render Layui JavaScript var 轻量 laytpl 模板

laytpl 是 Layui 的一款轻量 JavaScript 模板引擎,在字符解析上有着比较出色的表现。

laytpl是一款颠覆性的JavaScript模板引擎

文档说明

一、模版语法

输出一个普通字段,不转义html: {{ d.field }}

输出一个普通字段,并转义html: {{= d.field }}

JavaScript脚本: {{# JavaScript statement }}

二、内置方法

1):laytpl(template); //核心函数,返回一个对象

var tpl = laytpl(template);

tpl.render(data, callback); //渲染方法,返回渲染结果,支持异步和同步两种模式

a):异步

tpl.render(data, function(result){
console.log(result);

});

b):同步

var result = tpl.render(data);

console.log(result);

2):laytpl.config(options); //初始化配置

options是一个对象

{open: '开始标签', close: '闭合标签'}

3):laytpl.v //获取版本号

注意事项

1.直接引入laytpl.js即可,另外还可直接使用Seajs等模块化加载。

2.无论商业或个人平台都可以任意使用laytpl

3.任何场合下都务必保留来源,请勿剔除laytpl.js头部注释。

使用方式

//第一步:编写模版。你可以使用一个script标签存放模板,如:
<script id="demo" type="text/html">
<h3>{{ d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{ item.modname }}</span>
<span>{{ item.alias }}:</span>
<span>{{ item.site || '' }}</span>
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</ul>
</script>

//第二步:建立视图。用于呈现渲染结果。
<div id="view"></div>

//第三步:渲染模版
var data = { //数据
"title":"Layui常用模块"
,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
}
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});

模板语法

{{ d.field }} 不转义
{{= d.field }} 转义
{{# JavaScript表达式 }}
{{#
var fn = function(){
return '2017-08-18';
};
}}
{{# if(true){ }}
开始日期:{{ fn() }}
{{# } else { }}
已截止
{{# } }}

{{! template !}}
对一段指定的模板区域进行过滤,即不解析该区域的模板。注:layui 2.1.6 新增
<div> {{! 这里面的模板不会被解析 !}}</div>

重新定义模板分隔符

laytpl.config({
open: '<%',
close: '%>'
});

//分割符将必须采用上述定义的
laytpl([
'<%# var type = "公"; %>' //JS 表达式
,'<% d.name %>是一位<% type %>猿。'
].join('')).render({
name: '贤心'
}, function(string){
console.log(string); //贤心是一位公猿
});

参考文献:

模板引擎 laytpl - Layui 文档

https://blog.csdn.net/weixin_30539317/article/details/111967646

https://www.jianshu.com/p/93ab66e6bb73

标签:render,Layui,JavaScript,var,轻量,laytpl,模板
From: https://www.cnblogs.com/ZhuMeng-Chao/p/17433541.html

相关文章

  • 【K8s二进制部署】再见Docker,基于容器轻量化工具containerd完成一套Kubernetes高可用
    Kubernetes高可用集群二进制部署(RuntimeContainerd)Kubernetes(简称为:k8s)是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器化的应用简单并且高效,Kubernetes提供了资源调度、部署管理、服务发现......
  • JavaScript中的生成器函数(Generator Functions)
    简介:生成器函数(GeneratorFunctions)是JavaScript中的一种特殊类型函数,它允许开发者在函数内部产生多个值并逐步返回,与传统函数一次返回单个值的方式不同。本文将介绍生成器函数的特性、优缺点以及如何使用它们,并提供一些代码案例来说明其用法。特性:使用function\*关键字声明:生成......
  • [Javascript] Generator with example - 1
    Differencebetween yieldand returnreturnset donetotrue/***Example1*/function*loggerator(){console.log("running");yield"paused";console.log("runningagain");return"stopped";}letlogger=......
  • javascript prototype and class
    js中的prototype绝对是js的一个重要知识点,有点像delegate的模式,和oop对象形式还是有些差别的,尽管可以做同样的事情。简要学习可以参见:https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes关于js的class和java的语法很像,参见:https://develope......
  • ICML 2023 | 轻量级视觉Transformer (ViT) 的预训练实践手册
    前言 本文介绍一下最近被ICML2023接收的文章:ACloserLookatSelf-SupervisedLightweightVisionTransformers.文章聚焦在轻量级ViT的预训练上,相当于为相关方向的研究提供了一个benchmark,相关的代码与模型也都会开源,方便后续大家在这一方向上继续探索。文章的研究也打破......
  • 碎片化学习前端之JavaScript(for...in 和 Object.keys() 的区别)
    前言JavaScript中遍历对象的方式主要有:for...in和Object.keys()两种方式。for...inletobj={name:'ming',age:18,}obj[Symbol('hello')]='world'obj.__proto__={gender:'man',job:'font-end'}f......
  • 一篇文章解密 - 如何在MyEclipse中使用JavaScript编写代码?
    MyEclipsev2022.1.0正式版下载MyEclipse技术交流群:742336981欢迎一起进群讨论JavaScript项目在MyEclipse2021及更高版本中,JavaScript支持对大多数JavaScript源代码都是开箱即用的——不需要特殊的JavaScriptEclipse项目或JavaScriptfacet。但是,我们建议使用jscon......
  • layui table.exportFile 导出数据常见应用场景
    layuitable.exportFile导出数据常见应用场景置顶jhadjahjhb于2020-12-2216:46:36发布5896收藏8分类专栏:layui文章标签:layui版权layui专栏收录该内容1篇文章0订阅订阅专栏layuitable.exportFile导出数据数据准备工作场景1,导出全部数据场景2,导出......
  • 【JavaScript用法】JavaScript(JS)的基本语法(JS数据类型,JS变量,JS运算符,JS流程控制语句
    JavaScript(JS)的基本语法目录JavaScript(JS)的基本语法一.与html结合方式二.注释三.数据类型:四.变量五.运算符(和Java有点类似)六.流程控制语句(和JAVA 类似):七.JS特殊语法:一.与html结合方式       1.内部JS:定义<script>,标签体内容就是js代码(可以理解为和html......
  • 流程表单JavaScript代码
    ----订单流程-----------//表单加载初始化时functionpreinit(){}//表单加载完成,isrun代表流程是否流转中1-是,0-否functionLoaded(isrun){$("#om_order_status").attr("disabled","disabled");......