HTML应用开发基础篇 - JS 模板引擎

最新推荐文章于 2023-07-27 11:08:33 发布
VIP文章 最新推荐文章于 2023-07-27 11:08:33 发布
阅读量230 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43305922/article/details/103822924
版权

JS模板引擎是借助于工具把 js 数据转换成 html 需要的页面。art-template 是一个简约、超快的模板引擎，它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。但在使用前需要导入一个 js 文件：提取码：ad9h 。其使用方法为：

//声明
<script type=“text/html id=‘tpl’”></script>


//使用
var  html=template(“tpl”,data);

具体详情见代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建和插入子元素-模板引擎法</title>
		<script type="text/javascript" src="js/template-web.js" ></script>
		<style type="text/css">
			.content{
				width:600px;
				height: 400px;
				border: 1px solid gray;
				background: lightblue;
			}
			li{
				list-style:
最低0.47元/天 解锁文章
来者不是客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
企业级网站源码-商业应用服务网页模板-响应式适配移动端.zip
03-24
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
html模板引擎实现,js中使用template模板引擎实现的一个例子（代码）
weixin_36064196的博客
06-03 249
本篇文章给大家带来的内容是关于js中使用template模板引擎实现的一个例子(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。basic-demo{{if isAdmin}}{{title}}{{each list as value i}}索引 {{i + 1}} ：{{value}}{{/each}}{{/if}}var data = {title: '基本例子',isA...
模板引擎---template的简单使用
m0_59246072的博客
04-01 1069
（1）art-template的实现步骤 （1）导入template （2）定义数据 （3）定义模板 （4）调用template （5）渲染HTML结构 （2）模板引擎的语法 template（'模板的Id',需要渲染的数据对象） （3）其简单的使用 <div class="box"></div> -------------------------------------------------------------- <script t
html jquery 模板引擎,jquery template.js前端模板引擎
weixin_27719109的博客
06-03 533
作为现代应用，ajax的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板在刚有web的时候，前端与后端的交互，非常直白，浏览器端发出URL，后端返回一张拼好了的HTML串。浏览器对其进行渲染。html中可能会混有一些php(或者php中混有一些html)。在服务端将数据与模板进行拼装，生成要返回浏览器端的html串。这与我们现在做一个普通网页没什么区别。只不过现在，我们更常使用模板技术...
前端 template.js 模板用法
weixin_30894389的博客
04-23 229
1.首先引用template.js然后在html中定义一个空的容器 class名为“quotation” <div class="quotation"></div> 2.在script中 定义ID名"template-quotation" 注意type type="text/template" script 中可以把所有html标签包裹在内 把从后台调取的值 用&l...
原生js实现类似于html模板引擎,教你使用javascript简单写一个页面模板引擎
weixin_39613839的博客
05-31 574
于是我又想着能不能写一些简单的代码来完善这个模板引擎，又能与其它现有的逻辑协同工作。AbsurdJS本身主要是以NodeJS的模块的形式发布的，不过它也会发布客户端版本。考虑到这些，我就不能直接使用现有的引擎了，因为它们大部分都是在NodeJS上运行的，而不能跑在浏览器上。我需要的是一个小巧的，纯粹以Javascript编写的东西，能够直接运行在浏览器上。当我某天偶然发现John Resig的这篇...
公司级网站源码-移动商务应用响应式网页模板-支持适配移动端.zip
最新发布
03-24
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
网站模板-APP应用内服务介绍响应式网页模板-适配移动端界面-HTML源码.zip
03-23
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
JavaWeb后台开发框架-其他
06-12
利用Thymeleaf模板引擎 对前台页面进行封装和拆分，使臃肿的html代码变得简洁，更加易维护。JS封装 对常用js插件进行二次封装，使js代码变得简洁，更加易维护。参数配置 灵活控制常用功能的开关，无需重启项目即可...
JEECG快速开发平台-其他
06-12
UI快速开发库，针对WEBUI进行标准封装，页面统一采用UI标签实现功能：数据datagrid，表单校验，Popup，Tab等，实现JSP页面零JS，开发维护非常高效技术点八：在线流程定义，采用开源Activiti流程引擎，实现在线画流程...
前端HTML模板解析引擎domTemplate.js.zip
07-19
一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板引擎。彻底实现前后端分离，让后端专注业务的处理。 传统MVC开发模式，V层使用服务器端渲染。美工设计好静态HTML文件，交给后端工程师，需要转换成Jsp、Freemarker、Velocity等动态模板文件。这种模式有几个缺点 1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果 2、动态效果和静态效果分别存在不同文件，美工和后端工程师需要分别维护各自页面文件，其中一方需要修改页面，都需要通知另一方进行修改 3、页面数据不能分块加载、获取跨域数据比较麻烦 domTemplate.js 模板引擎是通过在标签中添加自定义属性，实现动态模板功能，当没有引入domTemplate脚本， 则自定义标签属性不会被浏览器解析，不会破坏原有静态效果，当引入domTemplate脚本，模板引擎回去解析这些标签属性， 并加载数据进行动态渲染。 下图：对比服务器页面渲染和使用domTemplate前端引擎开发流程 服务器端模板解析 domTemplate前端解析 用法 导入jquery.js或者zepto.js和domTemplate.js $(function () {  $.domTemplate.init(options); //可以通过selector指定根节点，默认根节点是body,表示从body开始，渲染整个页面  }); 或者解析某一个html片段。 $('selector').domTemplate(options); //渲染数据是通过h-model 自动去获取数据，也可以通过data指定全局数据 if条件标签 <div> <p h-if="{user.id==50}" h-text="用户ID等于50">xxx</p> <p>其他内容</p> <div> switch条件标签 <p h-switch="{user.id}"> <input type="text" h-case="20" h-val="{user.email}"/> <input type="text" h-case="60" h-val="拉拉"/> <input type="text" h-case="*" h-val="丽丽"/>  </p> each遍历标签 <p>遍历List例子</p> <ul> <li h-each= "user,userStat : {users}" h-text="{userStat.index 1}-{user.email}"> 李小璐</li> </ul> 自定义标签 $.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称，用时要加上前缀，如定义'test'标签，用时h-test="" 标签：domTemplate 分享 window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": [], "bdPic": "", "bdStyle": "1", "bdSize": "24" }, "share": {} }; with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' ~(-new Date() / 36e5)];\r\n \r\n \r\n \r\n \r\n \u8f6f\u4ef6\u9996\u9875\r\n \u8f6f\u4ef6\u4e0b\u8f7d\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\nwindow.changyan.api.config({\r\nappid: 'cysXjLKDf', conf: 'prod_33c27aefa42004c9b2c12a759c851039' });
html模板引擎c++实现
04-30
github地址：https://github.com/HuangHongkai/cJinja 使用C++实现一个轻量级html模板引擎，功能与django jinja基本一致。 觉得ok的朋友帮我点个star吧谢谢。
html 模板引擎选择,使用模板引擎渲染HTML界面_html/css_WEB-ITnose
weixin_31749299的博客
06-03 257
使用模板引擎渲染HTML界面by 伍雪颖模板引擎:GRMustachepod 'GRMustache' , '~> 7.3.0'html模板:template.html{{ name }}{{ content }}调用:- ( void )viewDidLoad {[ super viewDidLoad ];NSString *path = [[ NSBundle mainBundle ] ...
html5模板引擎渲染,使用art-template模板引擎渲染数据
weixin_30417063的博客
06-03 632
1.什么是 art-template?art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。模板最开始是诞生于服务器领域 ，后来发展到浏览器。2.用途模板引擎可以让(网站)程序实现界面与数据分离，业务代码与逻辑代码的分离，这就大大提升了开发效率，良好的设计也使得代码...
JavaScript模板引擎Template.js使用详解
社会底层搬砖打工人
10-03 3503
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。https://github.com/aui/artTemplate ...
template模板引擎的使用
weixin_44908855的博客
07-28 941
1. 模板引擎概述 作用：使用模板引擎提供的模板语法，可以将数据和HTML拼接起来 官方地址：https://aui.github.io/art-template/zh-cn/index.html 2. 使用步骤 下载art-template模板引擎库文件并在HTML页面中引入库文件 <script src="./js/template-web.js"></script> 准备 art-template 模板 // 1. 模板内容是一段 HTML 代码，要写在单独的 s
html渲染1模板,jq模板渲染数据.html
weixin_33047553的博客
06-15 262
.container {width: 1000px;height: 600px;margin: 0 auto;}.template {display: none;}table {background-color: #fff;}table tr th {padding: 8px;border-bottom: 1px solid #eee;}table tr td {padding: 10px;bor...
第十一篇：什么是html模板引擎(比如说thymeleaf)
weixin_47414034的博客
10-04 859
step1.在template文件夹下面新建一个文件：叫做view.html，这个文件就是我们创建的html模板。，调用这个方法，将模板html中的name，age换成我们希望换成的name和age（张三和30）返回Model相关的数据和视图相关的数据，将这些数据提交给模板引擎进行渲染，生成一个html页面。这里${name}和${age}就是两个占位符,也就是说这是一个页面模板，，就能实现利用模板制作html页面了。step2：url中输入。1.响应一个html页面。
教你使用PHP实现一个轻量级HTML模板引擎
黑夜开发者的博客
07-27 5102
在Web开发中，我们经常需要动态生成HTML页面。为了提高开发效率和代码可维护性，使用模板引擎是一个非常普遍的方案。像我们经常用到的smarty就是一个非常出名的项目，实际上它的核心原理并不复杂。今天我们就来实现一个自己的模板引擎，揭开这种技术的神秘面纱。本文将介绍如何使用PHP实现一个简单的HTML模板引擎，满足变量绑定输出和if判断的需求。本文介绍了如何使用PHP实现一个简单的HTML模板引擎，包括解析模板文件、绑定变量、处理条件判断和输出结果等步骤。
若依框架引入模板引擎
08-06
因此，Thymeleaf不仅可以作为Web应用的模板引擎，还可以作为模板引擎框架使用。它的最大特点是以自然模板的概念为基础，将逻辑注入模板文件，提供一种可维护的模板创建方式，缩小了设计和开发团队之间的差距，设计...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值