首页 > 其他分享 >使用js模板引擎心得

使用js模板引擎心得

时间:2023-09-26 10:03:12浏览次数:50  
标签:title html 支持 js 引擎 心得 模板


最近几年随着web开发前后端分工越来越细,同时mvc、mvp模式大行其道,js模板引擎也越来越流行了

js模板引擎很多,我经常用的是artTemplate、jsviews这两个模板引擎,12306用的就是jsviews

artTemplate 特性:

性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)


支持运行时调试,可精确定位异常模板所在语句(演示)


对 NodeJS Express 友好支持


安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板


支持include包含模板


可在浏览器端实现按路径加载模板(详情)


支持预编译,可将模板转换成为非常精简的 js 文件


模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选


支持所有流行的浏览器




简单示例:



编写模板


使用一个type="text/html"的script标签存放模板:


<script id="test" type="text/html"> 

 <h1>{{title}}</h1> 

 <ul> 

     {{each list as value i}} 

         <li>索引 {{i + 1}} :{{value}}</li> 

     {{/each}} 

 </ul> 

 </script>

渲染模板

var data = { 

     title: '标签', 

     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] 

 }; 

 var html = template('test', data); 

 document.getElementById('content').innerHTML = html;


关于各种模板引擎性能对比可参考



标签:title,html,支持,js,引擎,心得,模板
From: https://blog.51cto.com/u_2148212/7604753

相关文章

  • Chrome插件manifest.json文件详解
    {//扩展名称"name":"MyExtension",//版本。由1到4个整数构成。多个整数间用"."隔开"version":"1.0",//manifest文件版本号。Chrome18开始必须为2"manifest_version":2,//描述。132个字符以内"......
  • 迷失岛2心得1
       简单说明一下他这个 Utilities里面放的是一个枚举脚本 管理的是我们全局的参数设置就比如我们的钥匙信封的nameTransition里面写了两个脚本一个Teleport这个是写的我们挂载到物体上 前往目标场景的脚本     他这个是用携程来触发 首先写好了......
  • Json输出List集合对象和map对象 JSON格式
    Json输出List集合对象和map对象JSON格式//Json输出List集合对象[{"属性1":["值1"],"属性2":"值2"},{"属性3":["值3"],"属性4":"值4"}]importcom.alibaba.fastjson.JSONObject;importjava.util.ArrayList;impor......
  • 函数模板_构造函数栈溢出
    前言最近写一个任务队列,可以支持存入返回值为void的任意函数对象。需要定义一个Task模板,来存储函数对象以及参数。大致的实现如下:classTask{public:template<typenameFunc,typename...Args>Task(Func&&f,Args&&...args):func_(std::bind(std::for......
  • idea java代码注释模板制作 idea类注释模板设置【转载】
    一、类模板设置1、进入设置页面:File-->settings-->Editor-->FileandCodeTemplates-->Files2、设置类、接口、枚举模板信息3、点击Apply应用设置二、方法模板设置1、同样打开设置:File-->settings-->Editor-->LiveTemplates2、新建模板组:命名为userDefine3、选中新建的模板组,新......
  • P3812 【模板】线性基
    题意给定\(n\)个整数,求这\(n\)个整数的异或最大值。Sol线性基模板题。考虑维护一个线性基。插入一个数时,从高位往低位枚举。遇到第一个基中不存在的位,就将该数加入基,否则异或下去。询问最大值,考虑贪心,若当前\(ans^p[i]>ans\)则直接\(ans^=p[i]\)。#include<i......
  • 博客园[JS美化]简单教程
    PS:这篇的美化不是此博客的效果,只是较为简单的效果,不过很好看在使用此教程以前,需要先申请JS权限,进入管理->设置中自行寻找(看我多懒QAQ)申请JS权限时填写内容参考模板:尊敬的博客园管理员:请问是否可以帮我开通js权限,我想对文章的样式和布局需要js代码进行调整外观。谢谢您的......
  • requests 响应头部转json时报错TypeError: Object of type CaseInsensitiveDict is n
    前言requests响应头部在转json时,想格式化输出,结果报错TypeError:ObjectoftypeCaseInsensitiveDictisnotJSONserializable报错详情示例代码importrequestsimportjson#上海悠悠wx:283340479#blog:https://www.cnblogs.com/yoyoketang/r=requests.get('htt......
  • Selenium模拟登录(数字验证码)+Requests获取json数据
    前言我只是想算算每个月洗澡花了多少钱……Selenium模拟登录登录需要提交账号、密码、验证码#实例化browser=webdriver.Edge()browser.implicitly_wait(10)url1='http://card.cqu.edu.cn/'browser.get(url1)#学工号和密码user_id='学号/工号'user_psd='密码'#输入学......
  • 使用json+echarts实现数据库数据的可视化
    因为我上次是使用的另外一种方法实现的可视化,对json了解的不够,所以来补充一下这一块的知识点1、新建一个SpringBoot项目2、添加依赖<dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId></dependency><d......