【原创】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 ...
随机推荐
- 评审other's意见
评审意见 1.组 a.界面不友好 b.没连数据库 2.组 a.没连数据库 b.无智能匹配当前时间 3.组 a.基本功能实现 b.界面未优化 4.组 ourselves 5.组 a.各反面较为完善 6. ...
- LeetCode 638 Shopping Offers
题目链接: LeetCode 638 Shopping Offers 题解 dynamic programing 需要用到进制转换来表示状态,或者可以直接用一个vector来保存状态. 代码 1.未优 ...
- 第二个Sprint ------第七天、第八天、第九天、第十天,第十一天
这几天我们主要讨论界面的设计,也终于有了个初步的界面: 主界面截图
- JavaMail实现邮箱之间发送邮件功能
package com.minstone.message.util; import java.util.Date; import java.util.Properties; import javax. ...
- "Gun N' Rose" Team学习心得
如果我比别人看得更远,只因为我站在巨人的肩膀上. ——牛顿 高级软件工程课程终于开课了!第 ...
- 这家伙好像还不错 ZH奶酪-张贺
http://www.cnblogs.com/CheeseZH/archive/2012/11/23/2783846.html
- springmvc下载文件
Controller内代码: @RequestMapping(value = "/upload") public ResponseEntity<byte[]> uplo ...
- Delphi7如何实现让Tedit显示文字垂直居中(上下居中)
通过下面的组件,可以在输入文字的时候自动垂直居中 直接把下面代码保存到Unit1.pas即可------------------------------------------ unit Unit1; ...
- 题解 P1030 【求先序排列】
题解 P1030 [求先序排列] 旧题新解~ 今天做这个题,发现还是没有AC,于是滚回来用了一大堆数据结构A了这个题目,好像复杂度还挺高...... #include <iostream> ...
- 洛谷P4382 [八省联考2018]劈配(网络流,二分答案)
洛谷题目传送门 说不定比官方sol里的某理论最优算法还优秀一点? 所以\(n,m\)说不定可以出到\(1000\)? 无所谓啦,反正是个得分题.Orz良心出题人,暴力有70分2333 思路分析 正解的 ...