java 前端模板_前端模板引擎入门

article/2025/11/10 7:54:47

模板引擎

模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示。

后端模板引擎

freemarker

如下介绍,  java后台的模板引擎, freemark介绍,其图能很好标明这种关系。

Apache FreeMarker is a template engine: a Java library to generate text output (HTML web pages, e-mails, configuration files, source code, etc.) based on templates and changing data. Templates are written in the FreeMarker Template Language (FTL), which is a simple, specialized language (not a full-blown programming language like PHP). You meant to prepare the data to display in a real programming language, like issue database queries and do business calculations, and then the template displays that already prepared data. In the template you are focusing on how to present the data, and outside the template you are focusing on what data to present.

overview.png

velocity

另外一个 java模板引擎, velocity:

velocity是一个基于java的模板引擎, 它允许任何人使用简单但是强大的 模板语言, 引用 java代码中的对象。

Velocity is a Java-based template engine. It permits anyone to use a simple yet powerful template language to reference objects defined in Java code.

按照MVC的思想分离任务, web页面开发者关注如何将页面做的好看, 业务开发者关注写首要的逻辑代码。

其对 JSP代码是一种取代。

When Velocity is used for web development, Web designers can work in parallel with Java programmers to develop web sites according to the Model-View-Controller (MVC) model, meaning that web page designers can focus solely on creating a site that looks good, and programmers can focus solely on writing top-notch code. Velocity separates Java code from the web pages, making the web site more maintainable over its lifespan and providing a viable alternative to Java Server Pages (JSPs) or PHP.

不仅仅可以做HTML模板, 也可以做XML和sql其它重复性代码生成工具。

Velocity's capabilities reach well beyond the realm of the web; for example, it can be used to generate SQL, PostScript and XML from templates.

前端模板引擎

随着前端技术发展, 和前端处理能力增强, 越来越多的 渲染逻辑在浏览器端实现, 由此出现前端模板引擎, 仿照后台模板引擎方法, 定义前端模板语言, 实现前端模板引擎。

arttemplate

新一代 javascript 模板引擎

编写模板

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

{{title}}

{{each list as value i}}

索引 {{i + 1}} :{{value}}

{{/each}}

渲染模板

var data = {

title: '标签',

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

};

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

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

arttemplate 性能介绍

artTemplate 介绍

artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

954b3372a0d80e40e32a9ad430b2df90.png

art-template结合tomjs编译工具效果更佳

如果在页面中维护很多

此工具允许各个模板独自文件管理, 然后精怪此工具合并压缩, 成为一个可引用的模板文件:

使用默认的格式

TmodJS 默认将整个目录的模板压缩打包到一个名为 template.js 的脚本中,可直接在页面中使用它:

var html = template('news/list', _list);

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

template.js 还支持 RequireJS、SeaJS、NodeJS 加载。示例

指定格式(amd / cmd / commonjs)

此时每个模板就是一个单独的模块,无需引用 template.js:

var render = require('./tpl/build/news/list');

var html = render(_list);

jquery template模板引擎

http://www.cnblogs.com/FoundationSoft/archive/2010/05/19/1739257.html

http://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html

https://github.com/BorisMoore/jquery-tmpl

varmovies=[

{ Name:"The Red Violin", ReleaseYear:"1998"},

{ Name:"Eyes Wide Shut", ReleaseYear:"1999"},

{ Name:"The Inheritance", ReleaseYear:"1976"}

];varmarkup= "

${Name} (${ReleaseYear})";/*Compile the markup as a named template*/$.template("movieTemplate", markup );/*Render the template with the movies data and insert

the rendered HTML under the "movieList" element*/$.tmpl("movieTemplate", movies )

.appendTo("#movieList");


http://chatgpt.dhexx.cn/article/CA5x2OGd.shtml

相关文章

art-template前端模板引擎

目录 内容介绍一、使用方法二、主要API1、原文输出2、逻辑判断3、循环语句 三、代码四、页面显示五、其他1、pre标签2、code标签 内容介绍 今天我们要了解的是一款高性能的 art-template 前端模板引擎 —— template-web.js。 一、使用方法 定义容器元素通过type"text/…

前端模板引擎——handlebars

目录 一、代码二、页面显示 一、代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>handlebars 前…

ESLINT错误提示 no-unused-vars

ESLINT错误提示 no-unused-vars 使用ESLINT时遇到如下错误的提示 查阅资料得知&#xff0c;是需要使用插件 https://github.com/typescript-eslint/typescript-eslint/issues/941 全局按照 eslint-plugin-react npm install eslint-plugin-react -g 修改eslint的配置项 "e…

Jmeter书中不会教你的(2)——vars.get和${}引用区别

在上一篇中&#xff0c;我们了解了在beanshell中可以利用vars获取和设置新的变量&#xff0c;也知道了如何用log去查看日志&#xff0c;以及两种获取变量值的方法。没看过的可以点这里Jmeter书本中不会教你的&#xff08;1&#xff09;——beanshell用来获取变量和设置变量的va…

【Python报错-01】解决matplotlib在Pycharm中运行报错:vars()参数必须有__dict__属性

1 运行错误 &#xff08;1&#xff09;程序的原代码如下图所示&#xff1a; import matplotlib.pyplot as plt # 是可视化绘图工具 …… #省略了计算SSE的代码 plt.plot(range(1, 11), SSE) plt.xlabel("聚类数k", fontsize12) plt.ylabel("误差平方和SSE&…

Jmeter书中不会教你的(1)——beanshell用来获取变量和设置变量的vars

这几年Jmeter用的相对比较多&#xff0c;自己每次在做项目时也常会去翻看以前遇到的问题&#xff0c;记录的一些技巧&#xff0c;解决方案&#xff0c;也一直考虑把它整理出来&#xff0c;一来方便自己查找&#xff0c;二来也希望同行可以互相切磋。我写的这些文章不是针对Jmet…

eslint 配置no-unused-vars规则,TypeScript接口抛出“ no-unused-vars”报错

1.项目使用了typescript&#xff0c;并在.eslintrc.js中使用该配置&#xff0c;type类型接口形参检测报错 no-unused-vars: 检测未使用的变量&#xff0c;函数和函数的参数 type类型接口如下&#xff1a; 报错如下&#xff1a; 2.解决 将 “no-unused-vars” 替换成 “typesc…

mmdetection报错 TypeError: vars() argument must have __dict__ attribute

下载官方代码&#xff0c;安装好环境后第一个demo就报错 报错1、error: the following arguments are required: img, config, checkpoint 添加-- 报错2、manager_pyplot_show vars(manager_class).get("pyplot_show")TypeError: vars() argument must have __dict_…

Pycharm使用matplotlib报错:TypeError: vars() argument must have __dict__ attribute 解决方法

Pycharm使用matplotlib绘图时报错 问题描述 TypeError: vars() argument must have __dict__ attribute源程序&#xff1a; # -*- encoding: utf-8 -*-File : MaLearnTest01_1.py Time : 2023/03/03 09:39:05 Author : seveN1foR Version : 1.0 Contact : s…

JMeter常用内置对象:vars、ctx、prev

在前文 Beanshell Sampler 与 Beanshell 断言 中&#xff0c;初步阐述了JMeter beanshell的使用&#xff0c;接下来归集整理了JMeter beanshell 中常用的内置对象及其使用。 注&#xff1a;示例使用JMeter版本为5.1 1 vars 如 API 文档 所言&#xff0c;这是定义变量的类&am…

jmeter内置变量 vars 和props使用详解

vars和props都是jmeter的内置变量&#xff0c;且本质都是Map类型 用python语言来理解的话&#xff0c;就是字典格式 最主要两点的区别&#xff1a; vars 只能在当前线程组内使用&#xff0c;props 可以跨线程组使用 vars 只能保持String 或者Objec&#xff0c; props 是 Hash…

Ansible中vars(变量)定义

1、变量使用的原因 playbook的编写是使用yml的语法&#xff0c;虽然该语法规则较为简单&#xff0c;但是&#xff0c;同其他语法相同该语法也有变量、循环等机制的使用。变量的使用就是为了提高我们所写剧本的复用性&#xff08;当某个参数更改时&#xff0c;直接更改变量的赋…

vue3解决no-unused-vars报错

vue3解决no-unused-vars 前言添加配置 前言 在上一节&#xff0c;针对 vue3配置了ESLint&#xff0c;此时&#xff0c;App.vue 和 HelloWorld.vue 报了一个 no-unused-vars 的错误。 添加配置 vue3 是尤大写的&#xff0c;参考下尤大的配置&#xff1a;.eslintrc.js {no-u…

Jmeter内置变量vars和props

在使用jmeter作接口测试时&#xff0c;有些参数并不是明文直接传递的&#xff0c;须编码或加密后传输。此时可以使用BeanShell取样器、BeanShell前置和后置处理器等对参数进行加工处理。 vars和props都是jmeter的内置变量&#xff0c;不必先定义&#xff0c;可以直接使用 二者…

Jmeter 的 vars 和 props 用法

Jmeter 的 JSR223 控件是 代替 BeanShell 的新一代脚本控件&#xff0c;支持多种脚本语言&#xff0c;尤其是其中的 Groovy&#xff0c;更是重点推荐使用的脚本语言&#xff0c;本文研究其中的 vars 和 props 两种对象的用法。 props 和 vars 主要有两点区别&#xff1a; vars…

optistruct中的DRESP2响应设置

1.先编写自己的函数公式 函数名后面的括号中要有式中包含的变量 2.定义响应&#xff0c;类型选择为function&#xff0c;dequation选择刚才设置的函数 点击edit&#xff0c;输入函数表达式中变量对应的响应个数&#xff0c;并分别选择对应哪个响应 返回&#xff0c;点击cr…

结构优化设计with OPtiStruct

上手OptiStruct做结构优化设计&#xff0c;借助该软件强大的优化运算功能&#xff0c;已经成为行业的主流结构优化工具。因此&#xff0c;决定整理一下简要的操作步骤&#xff0c;以备后继之需。 我目前使用的是Hyper13.0版本。 首先是通过hypermesh进行网格划分&#xff0c;其…

大学生方程式赛车借助Altair OptiStruct 实现轻量化和燃料效率提升

项目介绍 每年一届的大学生方程式汽车大赛由英国机械工程师学会 (IMechE) 在英国一级方程式银石赛道举办。来自世界 38 个国家/地区的 178 支报名队伍将在 2014年展开激烈的角逐。想要获得胜利&#xff0c;各队需要展现出他们在技术、工程、设计和制造方面的高超技艺。他们还要…

Hypermesh案例学习笔记

根据我要自学网Hypermesh2017教程&#xff0c;1-10~1-13课程学习笔记 面板介绍 直接放教程里的图了 模型静力分析 模型导入与简化 尽量使用板壳单元&#xff0c;因此抽取模型中面&#xff1a; 点一下模型&#xff0c;点extract就可以得到中面的部件集 为了使网格均匀&am…

HyperMesh有限元分析报错集锦

1. 用hypermesh中的OptiStruct来进行有限元静力学分析&#xff0c;出现一个错误&#xff0c;错误代号61 Error 61: No elements found in input data 解决办法&#xff1a;如果你已经设置好材料、属性&#xff0c;并且为单元赋予了属性&#xff0c;定义了载荷步&#xff0c;在…