前端-【学习心得】-模板渲染的简单方法

平时我们使用ajax请求完数据后通常都会有 一个渲染数据的过程,最开始的时候我的做法是在html界面做好数据模板,使用一些类似于angular的标记,然后用使用replace函数替换这些标记为真实的数据,后来再学习过程中找到了一个更加简洁的方法。该方法使用了正则表达式中的捕获数组的方法,完美实现了数据的渲染。

var regexp = /(?:\{\{)([a-zA-z][^\s\}]+)(?:\}\})/gfunction render(template, data) {     return template.replace(regexp, function(fullMatch, capture) {           if (data[capture]) {                return data[capture];           } else {                return fullMatch;           }      }); }window.renderTemplate = render;

核心代码如上,我们这里定义的正则是匹配{{}}里面的数据,这个render方法传递了两个参数,一个是模板,一个是要渲染的数据,比如我们定义模板 的dom 结构为   <table><tr><td>{{aa}}</td></tr></table>,返回数据为json,同样包含{aa:"真实的值"},那么我们调用完render(template,data)后得到的就是带上真实数据的模板了,大家可以尝试一下。假如项目小可以试着自己写渲染模板。

时间: 2024-10-12 10:58:18

前端-【学习心得】-模板渲染的简单方法的相关文章

小小六的前端学习心得

打算写这篇文章已经好久了,但是文采不行,不知道如何下笔,今天终于鼓起勇气用我拙劣的作文水平来讲述一下这段时间我学习前端开发的心得. 先从我的专业说起.我本人是学计算机的.全名是叫计算机科学与技术(软件方向),学校虽然是一个211学校,学习成绩也还行,但是对于编程这一块,真的是很弱很弱.所以我对计算机编程真正的学习是从实习这段时间开始的.说到这里,我必须得感谢带我进入前端的学长.因为他我才能在今天坐在这里写这篇学习心得. 所以,首先最好是有一个愿意耐心的指导你学习的人,也就是一个好的师傅.他能根据

出位的template.js 基于jquery的模板渲染插件,简单、好用

找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一款,和我在公司之前用的差不多(apicloud云端开发app,致敬[百小僧]大神封装的HUI,简化了在公司很多工作), 这款模板渲染和HUI的很相似,也比较简单  基于jquery的模板渲染插件. 附上github https://github.com/yanhaijing/template.js

前端学习笔记汇总(之merge方法)

学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果)的并集 接下来,做出测试: 1 $(function () { 2 var arr1 = ['apple', 'orange',1, 'cherry', 'orange']; 3 var arr2 = ['chen', 343, true, 'cherry',1]; 4 var result = $

我的MYSQL学习心得(一) 简单语法

语法的差异 我这里主要说语法的不同 1.默认约束 区别:mysql里面DEFAULT关键字后面是不用加括号的 --sqlserver CREATE TABLE emp ( id INT DEFAULT(12) ) --mysql CREATE TABLE emp ( id INT DEFAULT 12 ) insert into emp(id) values(default);Query OK, 1 row affected (0.05 sec) mysql> select * from emp

web前端学习心得

所谓行万里路,必先始于足下.刚开始学习WEB前端基础的时候,老师说,其实你们学的这个后面真正去工作的时候可能也不是很会用到,所以就有很多人会问,既然我们都用不到,那干嘛还学呀?其实,对于一个程序员来说,你不仅要有很好的后端专业能力,你还应当具备一定的前端素养,知道一些起码的前端知识. 来到传智的第一个月,我们是以基础为主吧,因为大家到这里的基础都不一样,有一些本身就具备很高水准的人,也有很多像自己一样从小白开始的人,所以,对我们而言,传智开设的这种双元模式对我们是有很大用处的.我们从最基础的开始

Qt学习心得之网络编程简单的局域网聊天服务端建立

学而不思则罔,思而不学则殆.学习和思考是相辅相成的,通过这几天对网络编程的学习,收获颇丰.接下来我将利用Qt做的一个以TcpIp协议为传输方式的简单的局域网聊天服务端与大家分享下: 首先谈谈我个人对Tcp协议的理解:Tcp就是网上购物,买家和买家之间的物品传递,快递公司的扮演.快递公司将卖家所要寄出的物品进行包装,给予独特的号码,并从卖家获取目的地地址,得知这些明确信息后准确将物品送到买家,买家签收后,卖家通过快递单号查询到买家签收的消息. 其次是这个简单局域网聊天服务器的创建思路.如下图是思路

前端学习github篇01——基本使用方法

前言 git的安装 ssh的设置 正文 1.创建本地版本库 命令:git init 2.添加文件 命令:git add 文件名 3.上传到版本库 命令:git commit -m "说明内容" 4.链接远程版本 命令:git remote add origin github地址/版本库名字 5.删除当前本地版本库与远程版本链接 命令:git remote rm origin 6.推送更新远程版本库 命令:git push -u origin master 补充 要链接远程版本库,必须先

【前端学习笔记】2015-09-01 附 split()方法、readyState

1.split():作用对象是一个字符串或者字符串对象,会要求设置两个参数(分割点(separator),分割出来的数量(number)),ps:1."2:3:4:5".split(":")//将返回["2", "3", "4", "5"] 2."|a|b|c".split("|")//将返回["", "a"

我的MYSQL学习心得(十) 自定义存储过程和函数

我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(十一) 视图 我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(十三) 权限管理 我的MYSQL学习