【原创】javascript模板引擎的简单实现
本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试
写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着。
这里所说的js的模板引擎,用的是原生的javascript语法,所以很类似php的原生模板引擎。
前端模板引擎的作用?
1. 可以让前端开发更简单,不需要为了生成一个dom结构而使用+运算符去拼接字符串,而只需要一个元素的(里面的html模板),或者一个变量(存储着模板),或者 一个模板文件
2. 易于维护,减少耦合,假使你的dom结构变化了,不需要更改逻辑代码,而只需要更改对应的模板(文件)
3. 可以缓存,如果你的模板是一个类似.tpl的文件,那么完全可以用浏览器去加载,并且还存下来。说到.tpl文件,可以做的不仅仅是缓存了,你还可以做到通过模块加载器
将.tpl作为一个模块,那就可以按需加载文件,不是更省宽带,加快页面速度吗?
4. 等等等
前端模板引擎的原理?
原理很简单就是 对象(数据)+ 模板(含有变量) -> 字符串(html)
前端模板引擎的如何实现?
通过解析模板,根据词法,将模板转换成一个函数,然后通过调用该函数,并传递对象(数据),输出字符串(html)
(当然,具体的还要看代码的)
就像这样:
var tpl = 'i am <%= name%>, <%= age=> years old'; // <%=xxx>% 词法,标记为变量 var obj = {
name : 'lovesueee' ,
age : 24
};
var fn = Engine.compile(tpl); // 编译成函数 var str = fn(obj); // 渲染出字符串
例子:
简单的实现:
(function (win) { // 模板引擎路由函数
var ice = function (id, content) {
return ice[
typeof content === 'object' ? 'render' : 'compile'
].apply(ice, arguments);
}; ice.version = '1.0.0'; // 模板配置
var iConfig = {
openTag : '<%',
closeTag : '%>'
}; var isNewEngine = !!String.prototype.trim; // 模板缓存
var iCache = ice.cache = {}; // 辅助函数
var iHelper = {
include : function (id, data) {
return iRender(id, data);
},
print : function (str) {
return str;
}
}; // 原型继承
var iExtend = Object.create || function (object) {
function Fn () {};
Fn.prototype = object;
return new Fn;
}; // 模板编译
var iCompile = ice.compile = function (id, tpl, options) { var cache = null; id && (cache = iCache[id]); if (cache) {
return cache;
} // [id | tpl]
if (typeof tpl !== 'string') { var elem = document.getElementById(id); options = tpl; if (elem) {
// [id, options]
options = tpl;
tpl = elem.value || elem.innerHTML; } else {
//[tpl, options]
tpl = id;
id = null;
}
} options = options || {};
var render = iParse(tpl, options); id && (iCache[id] = render); return render;
}; // 模板渲染
var iRender = ice.render = function (id, data, options) { return iCompile(id, options)(data);
}; var iForEach = Array.prototype.forEach ?
function(arr, fn) {
arr.forEach(fn)
} :
function(arr, fn) {
for (var i = 0; i < arr.length; i++) {
fn(arr[i], i, arr)
}
}; // 模板解析
var iParse = function (tpl, options) { var html = []; var js = []; var openTag = options.openTag || iConfig['openTag']; var closeTag = options.closeTag || iConfig['closeTag']; // 根据浏览器采取不同的拼接字符串策略
var replaces = isNewEngine
?["var out='',line=1;", "out+=", ";", "out+=html[", "];", "this.result=out;"]
: ["var out=[],line=1;", "out.push(", ");", "out.push(html[", "]);", "this.result=out.join('');"]; // 函数体
var body = replaces[0]; iForEach(tpl.split(openTag), function(val, i) { if (!val) {
return;
} var parts = val.split(closeTag); var head = parts[0]; var foot = parts[1]; var len = parts.length;
// html
if (len === 1) {
body += replaces[3] + html.length + replaces[4];
html.push(head); } else { if (head ) {
// code
// 去除空格
head = head
.replace(/^\s+|\s+$/g, '')
.replace(/[\n\r]+\s*/, '') // 输出语句
if (head.indexOf('=') === 0) {
head = head.substring(1).replace(/^[\s]+|[\s;]+$/g, ''); body += replaces[1] + head + replaces[2];
} else {
body += head;
} body += 'line+=1;';
js.push(head);
}
// html
if (foot) {
_foot = foot.replace(/^[\n\r]+\s*/g, '');
if (!_foot) {
return;
}
body += replaces[3] + html.length + replaces[4];
html.push(foot);
}
}
}); body = "var Render=function(data){ice.mix(this, data);try{"
+ body
+ replaces[5]
+ "}catch(e){ice.log('rend error : ', line, 'line');ice.log('invalid statement : ', js[line-1]);throw e;}};"
+ "var proto=Render.prototype=iExtend(iHelper);"
+ "ice.mix(proto, options);"
+ "return function(data){return new Render(data).result;};"; var render = new Function('html', 'js', 'iExtend', 'iHelper', 'options', body); return render(html, js, iExtend, iHelper, options);
}; ice.log = function () {
if (typeof console === 'undefined') {
return;
} var args = Array.prototype.slice.call(arguments); console.log.apply && console.log.apply(console, args); }; // 合并对象
ice.mix = function (target, source) {
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}; // 注册函数
ice.on = function (name, fn) {
iHelper[name] = fn;
}; // 清除缓存
ice.clearCache = function () {
iCache = {};
}; // 更改配置
ice.set = function (name, value) {
iConfig[name] = value;
}; // 暴露接口
if (typeof module !== 'undefined' && module.exports) {
module.exports = template;
} else {
win.ice = ice;
} })(window);
【原创】javascript模板引擎的简单实现的更多相关文章
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
- 最简单的JavaScript模板引擎
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
- 推荐13款javascript模板引擎
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
- JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
- JavaScript 模板引擎实现原理解析
1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- 如何选择Javascript模板引擎(javascript template engine)?
译者 jjfat 日期:2012-9-17 来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...
- 【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
- 高性能JavaScript模板引擎原理解析
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...
随机推荐
- torchvision 批量可视化图片
1.1 简介 计算机视觉中,我们需要观察我们的神经网络输出是否合理.因此就需要进行可视化的操作. orchvision是独立于pytorch的关于图像操作的一些方便工具库. torchvision的详 ...
- (转载)利用SIFT和RANSAC算法(openCV框架)实现物体的检测与定位,并求出变换矩阵(findFundamentalMat和findHomography的比较) 置顶
原文链接:https://blog.csdn.net/qq_25352981/article/details/46914837#commentsedit 本文目标是通过使用SIFT和RANSAC算法, ...
- Vulkan入门流程
原文摘自Vulkan入门流程 Vulkan是Khronos Group(OpenGL标准的维护组织)开发的一个新API,它提供了对现代显卡的一个更好的抽象,与OpenGL和Direct3D等现有api ...
- 红黑树插入与删除完整代码(dart语言实现)
之前分析了红黑树的删除,这里附上红黑树的完整版代码,包括查找.插入.删除等.删除后修复实现了两种算法,均比之前的更为简洁.一种是我自己的实现,代码非常简洁,行数更少:一种是Linux.Java等源码版 ...
- 每日scrum(6)
今天是小组正式冲刺的第六天,软件的各种结尾工作,还有一些模块就已经全部实现了: 遇到的问题主要是对于自己能力的担忧,以前总是想,如果自己努力,就会怎样成功,其实并不是那样,小小的距离就是很远的能力差距 ...
- c++中队列queue和栈stack的基本操作
1.queue 模板类的定义在<queue>头文件中. 定义queue 对象的示例代码如下:queue<int> q1;queue<double> q2; queu ...
- ELK 性能(2) — 如何在大业务量下保持 Elasticsearch 集群的稳定
ELK 性能(2) - 如何在大业务量下保持 Elasticsearch 集群的稳定 介绍 如何在大业务量下保持 Elasticsearch 集群的稳定? 内容 当我们使用 Elasticsearch ...
- PAT 1044 火星数字
https://pintia.cn/problem-sets/994805260223102976/problems/994805279328157696 火星人是以13进制计数的: 地球人的0被火星 ...
- vmwear导出OVF模板解析(解决ovf导入服务器失败问题,虚拟机版本等)
我们将vmwear虚拟机导出ovf模板后,有三个文件: 1,.mf 保存着.ovf和.vmdk两个文件的SHA1值,用于校验文件的完整性 2,.ovf 以XML格式保存着虚拟机的配置信息 3,.vmd ...
- python学习大全:python基础进阶+人工智能+机器学习+神经网络
首先用数据说话,看看资料大小,达到675G承诺:真实资料.不加密.(鉴于太多朋友加我QQ,我无法及时回复,) 方便的朋友给我点赞.评论下,谢谢!(内容较大,多次保存) [hide]链接:[url]ht ...