本来想把之前对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); // 渲染出字符串

例子:

demo

简单的实现:

(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模板引擎的简单实现的更多相关文章

  1. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  2. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  3. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  4. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  5. JavaScript 模板引擎实现原理解析

    1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...

  6. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  7. 如何选择Javascript模板引擎(javascript template engine)?

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  8. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  9. 高性能JavaScript模板引擎原理解析

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...

随机推荐

  1. torchvision 批量可视化图片

    1.1 简介 计算机视觉中,我们需要观察我们的神经网络输出是否合理.因此就需要进行可视化的操作. orchvision是独立于pytorch的关于图像操作的一些方便工具库. torchvision的详 ...

  2. (转载)利用SIFT和RANSAC算法(openCV框架)实现物体的检测与定位,并求出变换矩阵(findFundamentalMat和findHomography的比较) 置顶

    原文链接:https://blog.csdn.net/qq_25352981/article/details/46914837#commentsedit 本文目标是通过使用SIFT和RANSAC算法, ...

  3. Vulkan入门流程

    原文摘自Vulkan入门流程 Vulkan是Khronos Group(OpenGL标准的维护组织)开发的一个新API,它提供了对现代显卡的一个更好的抽象,与OpenGL和Direct3D等现有api ...

  4. 红黑树插入与删除完整代码(dart语言实现)

    之前分析了红黑树的删除,这里附上红黑树的完整版代码,包括查找.插入.删除等.删除后修复实现了两种算法,均比之前的更为简洁.一种是我自己的实现,代码非常简洁,行数更少:一种是Linux.Java等源码版 ...

  5. 每日scrum(6)

    今天是小组正式冲刺的第六天,软件的各种结尾工作,还有一些模块就已经全部实现了: 遇到的问题主要是对于自己能力的担忧,以前总是想,如果自己努力,就会怎样成功,其实并不是那样,小小的距离就是很远的能力差距 ...

  6. c++中队列queue和栈stack的基本操作

    1.queue 模板类的定义在<queue>头文件中. 定义queue 对象的示例代码如下:queue<int> q1;queue<double> q2; queu ...

  7. ELK 性能(2) — 如何在大业务量下保持 Elasticsearch 集群的稳定

    ELK 性能(2) - 如何在大业务量下保持 Elasticsearch 集群的稳定 介绍 如何在大业务量下保持 Elasticsearch 集群的稳定? 内容 当我们使用 Elasticsearch ...

  8. PAT 1044 火星数字

    https://pintia.cn/problem-sets/994805260223102976/problems/994805279328157696 火星人是以13进制计数的: 地球人的0被火星 ...

  9. vmwear导出OVF模板解析(解决ovf导入服务器失败问题,虚拟机版本等)

    我们将vmwear虚拟机导出ovf模板后,有三个文件: 1,.mf 保存着.ovf和.vmdk两个文件的SHA1值,用于校验文件的完整性 2,.ovf 以XML格式保存着虚拟机的配置信息 3,.vmd ...

  10. python学习大全:python基础进阶+人工智能+机器学习+神经网络

    首先用数据说话,看看资料大小,达到675G承诺:真实资料.不加密.(鉴于太多朋友加我QQ,我无法及时回复,) 方便的朋友给我点赞.评论下,谢谢!(内容较大,多次保存) [hide]链接:[url]ht ...