模板引擎 ajax 比较,第115天：Ajax 中artTemplate模板引擎（一）

最新推荐文章于 2023-05-27 17:01:04 发布
最新推荐文章于 2023-05-27 17:01:04 发布
阅读量356 收藏 1
点赞数
文章标签： 模板引擎 ajax 比较

一、不分离与分离的比较

1、前后端不分离，以freemarker模板引擎为例，看一下不分离的前后端请求的流程是什么样的？

ba8c1ad221ce35a1d5e9aeb01add0620.png

从上图可以看出，前后端开发人员的工作耦合主要在(3)Template的使用。

后端程序员和前端程序员会出现同时修改template的情况，这样就造成了前后端的耦合，不利于快速开发和静态展示。

2、前后端分离，以artTemplate为例

ed99995fc0f66a7986e91430e1c8e232.png

一旦前后端分离了(如上图)，前端只需要关注rest接口以及返回的json数据即可。所以前端程序员可以通过自定义json实现简单的预览与展示，这样就解决了前后端的耦合，前后端只通过接口进行交互。

二、artTemplate的介绍与安装

artTemplate是比较轻量级的前端引擎技术，相比较于vue等框架，这个技术就是轻量级的；但是却具备了开发web前端的所有渲染技术，性能也很出色，最重要的是很容易掌握。官方文档 https://aui.github.io/art-template/docs/

Windows平台安装与使用artTemplate实现前后端分离

1、安装NodeJs并安装

可以从官网下载，也可以从这里下载，双击安装即可！

2、安装artTemplate(Tmod)

通过CMD进入NodeJs的安装目录，执行如下命令

npm install -g tmodjs

执行完成后，即可使用 tmod 进行HTML编译了；编译后的文件是template.js，通过在HTML中引用template.js，即可实现前端引擎解析json数据，从而实现前后端分离；我们来看个例子：

3、下载源码以及代码说明

可以直接下载源码进行阅读；代码中有注释和详解(当然也可以参考 “4、demo代码详解”)。双击index.html即可运行。

下载链接：http://pan.baidu.com/s/1pLr4dbt 密码：2nst

c6a5f3bce2e6f11b5160e3c4ea23a25a.png

template下的所有 .html 文件都会编译到 template.js文件中(每次编辑.html文件，都会自动编译)：

65dd6b3f71d2b575f7d3fe2aa0f5164f.png

如果已经明白了源码，“4、demo代码详细” 可以忽略

4、demo代码详细

一个简单的网站首页：index0.html，正常的网页代码应该是这样的：

  • 我的菜单1
  • 我的菜单2
  • 我的菜单3

如何用artTemplate解决前后端耦合的问题：

1)在template文件夹中(模板文件一般都放在其中)，新建header.html文件，内容如下：

  • {{menu1}}
  • {{menu2}}
  • {{menu3}}

2)通过CMD进入template文件夹，执行tmod . 即可编译成template.js：

tmod .

673b4be81539f31f44126945021d3774.png

3)在index.html中引入 template.js 即可使用模板引擎解析json数据了，代码如下：

//Jquery在页面加载完成后执行；

jQuery(document).ready(function($){

/**

*1)一般data 是通过 ajax 请求后台rest接口的数据；

*2)也可以通过ajax请求 json文件 实现；

*3)我们这里暂时写死；(前2种后面文章做介绍)

**/

var data = {menu1:'我的菜单1',menu2:'我的菜单2',menu2:'我的菜单3'};

//渲染数据，template返回值是HTML

var headerHTML =template('header',data);

$('#headerDIV').html(headerHTML);//内容插入到 headerDIV标签中

});

ajax配合art-template模板引擎的使用

最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...

Express 中配置使用 art-template模板引擎

art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...

artTemplate模板引擎学习实战

在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

koa art-template模板引擎的使用

art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

Node学习之(第三章：art-template模板引擎的使用)

前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...

artTemplate模板引擎

artTemplate模板引擎         

索引 {{i + 1}} :{{value}}     {{/each}} ...

Express ( MiddleWare/中间件 路由 在 Express 中使用模板引擎 常用API

A fast, un-opinionated, minimalist web framework for Node.js applications. In general, prefer simply ...

artTemplate模板引擎的源码拜读

最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到 ...

Art-Template模板引擎(原生写法与简洁写法)

模板引擎:把js数据转换成html需要的页面,这就是模板引擎需要做的事     • native原生语法     1. 准备数据     2. 把数据转化成html格式的字符串 使用模板引擎 artT ...

随机推荐

python httplib get和post获取数据

httplib 下的 status http请求的状态  200 404 500... reason 返回答复 OK或者 FAULRE read()  读取内容 get方法: #!/usr/bin/e ...

php阳历转农历的类 谷歌到的

UIApplication详解

每个app有且只有一个UIApplication对象,当程序启动的时候通过调用UIApplicationMain方法得到的.可以通过sharedApplication方法得到. UIApplicati ...

【C#】VS2015开发环境的安装和配置(二)2016-08-03更新

分类:C#.VS2015.WPF.ASP.NET MVC.Android.iOS.Unity3D: 更新日期:2016-08-03 按下面介绍的步骤安装即可. 一.安装JDK和Android SDK ...

VMware学习笔记(一)

vmware核心产品是vSphere,而vSphere主要包括ESXi和vCenterServer. ESXi不依赖其它操作系统OS,安装在每一台物理机上,ESXi是免费的.在ESXi主机上再安装vS ...

iphone 使用 soap 服务 介绍

iphone 使用 soap 服务 介绍 目前比较常用的有几个办法: 1. WSDL to Objective C自动根据wsdl文件生成ios可以直接调用的Objective-C (Cocoa) 代 ...

【leetcode❤python】 Maximum Depth of Binary Tree

#-*- coding: UTF-8 -*- # Definition for a binary tree node.# class TreeNode(object):#     def __init ...

Windows系统的线程调度与软件中断分发

在Windows操作系统内核把软件中断分为三个中断级别:DISPATCH_LEVEL,APC_LEVEL,PASSVIE_LEVEL.同时他们与线程的调试相关,WINDOWS内核中没有一个专门的程序来 ...

C++实现堆排序

堆排序是合并排序和插入排序排序方法共同的长处.它的时间复杂度O(nlgn),这也是一个地方排序算法:在任何时候,外阵中拥有唯一不变的输入数组存储的元素.引进第一家引进什么样的堆堆. 1.建堆:堆数据结 ...

Vxlan与网卡offload性能

背景 由于数据链路层MTU的限制,发送端TCP/UDP数据在交付到IP层时需要与MTU相匹配,TCP数据不能超过mss,较长的UDP需要分片(Fragmentation)以满足MTU要求:接收端协议栈 ...

Matt小特
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5面试题
YaToue
04-10 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式是一种向后兼容的解析方法。 触发...
前端插件art-template模板引擎art-template-test示例代码
09-24
本文主要围绕`art-template`这一前端模板引擎，通过`art-template-test`示例代码来深入探讨其核心概念、使用方法以及在实际项目中的应用。 `art-template`是一个轻量级、高性能的JavaScript模板引擎，它旨在解决...
第115天：Ajax 中artTemplate模板引擎（一）
lelara的博客
12-15 162
第115天：Ajax 中artTemplate模板引擎（一） 一、不分离与分离的比较 1、前后端不分离，以freemarker模板引擎为例，看一下不分离的前后端请求的流程是什么样的？ 从上图可以看出，前后端开发人员的工作耦合主要在（3）Template的使用。后端程序员和前端程序员会出现同时修改template的情况，这样就造成了前后端的耦合，不...
ajax
dingdunzeng9939的博客
08-03 460
如何使自己的电脑也成为一台服务器安装PHPstudy 2016版本保证php和阿帕奇Apache是绿灯 https://blog.csdn.net/al_assad/article/details/70510889修改了Apache的默认端口号如果你修改了默认端口号（假如将Listen 80改为Listen 8080），那么你将无法通过http://localhost或者是http...
Ajax学习日志
Pluto_ssy的博客
05-27 186
jQuery中ajax学习日志，有各种案例和ajax相关内容的用法介绍，结合原生JavaScript和jQuery，内容全面
前端技术及开发模式的演进，带你了解前端技术的前世今生
寒冰屋的专栏
02-28 484
先声明，本篇不会讲带有年代性的前端发展史，不讲故事，想了解的读者可以去查阅一些其他的资料和文章，本篇仅仅从技术发展角度结合案例分析，说明前端技术的发展和开发模式的演进变化。本篇内容重点说明PC端技术，移动端、桌面端本篇不涉及，防止读者看到后面有疑惑，这里强调一下。 这里先讲一个需求，有一个系统需要实现一个模块，用户管理，模块的功能很简单，就是查询、删除。基于这个需求，南风哥会使用几代不同的前端技...
14万字面试题汇总整理，祝你顺利斩获大厂前端offer
热门推荐
孙叫兽的博客
07-17 1万+
Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是—种要求严格的DTD(Document Type Definition)，不允许使用任何表现层的语法， 混杂模式是—种向后兼容的解析方法。 触发标准模式或者说严格模...
运维开发工程师(BKDS)理论基础
静静是我女朋友
02-27 2256
运维开发工程师(BKDS)理论基础 蓝鲸SaaS开发框架包含哪些Web防护策略? A. 防 CSRF 攻击 B. 防 XSS 攻击 C. 防 SQL注入 D. 没有Web安全防护 正确答案:A,B,C 社区版如何将第三方系统放在工作台中使用? A. 社区版不支持第三方系统链接接入 B. 通过修改配置文件添加第三方系统链接 C. 通过PaaS平台DB管理端:domain/admin，添加“常用链接” D. 直接登录数据库，修改DB数据，添加“常用链接” 正确答案:C,D 以下哪些是生成器自身的方法? A.
2016阿里巴巴73款开源产品全向图
小李专栏
10-26 1698
受益开源，就当回馈。面对阿里头顶上“贡献开源软件数目第一”的光环，我们清醒地认知阿里开源的目的：阿里开源不是到业内“秀肌肉”，更不是自卖自夸；阿里之所以选择开源是因为开源是孵化新技术领域的容器，更是技术演进的最大推动力。
开发中积累的单词800
weixin_34242658的博客
08-07 1052
1, abort [ə'bɔːt]vi. 流产；堕胎；夭折；发育不全;vt. 使流产；使中止;n. 中止计划2, absolute ['æbsəluːt]adj. 绝对的；完全的；专制的;n. 绝对；绝对事物3, accept [ək'sept]vt. 接受；承认；承担；承兑；容纳;vi. 承认；同意；承兑4, acquire [ə'kwaɪə]vt. 获得；取得；学到；捕获5, activ...
art_template.rar 模板引擎
11-21
在本例中，我们关注的是`art-template`，一个用于JavaScript的高效模板引擎。 **art-template特性** 1. **高效性能**：`art-template`以其高效著称，其编译后的模板执行速度接近原生JavaScript，避免了DOM操作带来...
Ajax天气预报案例（使用模板引擎渲染）.zip
03-23
在本案例中，我们主要探讨的是如何利用Ajax技术在网页中实现动态天气预报查询，并结合模板引擎进行数据渲染。这个项目以"Ajax天气预报案例（使用模板引擎渲染）.zip"为标题，提供了从基础到实践的教程，适用于初学者...
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
10-20
本篇文章主要介绍了JavaScript的延迟对象、跨域、模板引擎、弹出层、AJAX，对其进行示例解析，具有很好的参考价值，需要的朋友一起来看下吧
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
pillow-10.4.0-cp312-cp312-musllinux_1_2_aarch64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
JavaScript深度解析：延迟对象、跨域、模板引擎、弹出层与AJAX实例
本文详细介绍了JavaScript中的几个关键概念和技术：延迟对象、跨域处理、模板引擎、弹出层以及AJAX。以下是对这些主题的深入解析： 1. **AJAX示例** AJAX是一种用于创建动态网页交互的技术，它允许在不刷新整个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值