JavaScript輸入郵箱自動提示實(shí)例代碼
本來想把之前對artTemplate源碼解析的注釋放上來分享下，不過隔了一年，找不到了，只好把當(dāng)時分析模板引擎原理后，自己嘗試
寫下的模板引擎與大家分享下，留個紀(jì)念，記得當(dāng)時還對比了好幾個模板引擎來著。
這里所說的js的模板引擎，用的是原生的javascript語法，所以很類似php的原生模板引擎。
前端模板引擎的作用？
1. 可以讓前端開發(fā)更簡單，不需要為了生成一個dom結(jié)構(gòu)而使用+運(yùn)算符去拼接字符串，而只需要一個元素的（里面的html模板），或者一個變量（存儲著模板），或者 一個模板文件
2. 易于維護(hù)，減少耦合，假使你的dom結(jié)構(gòu)變化了，不需要更改邏輯代碼，而只需要更改對應(yīng)的模板（文件）
3. 可以緩存，如果你的模板是一個類似.tpl的文件，那么完全可以用瀏覽器去加載，并且還存下來。說到.tpl文件，可以做的不僅僅是緩存了，你還可以做到通過模塊加載器
將.tpl作為一個模塊，那就可以按需加載文件，不是更省寬帶，加快頁面速度嗎？
4. 等等等
前端模板引擎的原理？
原理很簡單就是 對象（數(shù)據(jù)）＋ 模板（含有變量） －> 字符串（html）
前端模板引擎的如何實(shí)現(xiàn)？
通過解析模板，根據(jù)詞法，將模板轉(zhuǎn)換成一個函數(shù)，然后通過調(diào)用該函數(shù)，并傳遞對象（數(shù)據(jù)），輸出字符串（html）
（當(dāng)然，具體的還要看代碼的）
就像這樣：
var tpl = 'i am <%= name%>, <%= age=> years old'; // <%=xxx>% 詞法，標(biāo)記為變量
var obj = {
name : 'lovesueee' ,
age : 24
};
var fn = Engine.compile(tpl); // 編譯成函數(shù)
var str = fn(obj); // 渲染出字符串
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ice demo</title>
<script src="/javascripts/jquery/jquery-1.7.2.js"></script>
<script src="/javascripts/ice/ice.js"></script>
<body>
<div id="content"></div>
</body>
<script type="text/html" id="tpl">
<div>here is the render result:</div>
<% = this.title() ;%>
<table border=1>
<% for(var i=0,tl = this.trs.length,tr;i<tl;i++){ %>
<%
tr = this.trs[i];
if (tr.sex === "女") {
%>
<tr>
<td><%= tr.name;; %></td> <td><%= tr.age; %></td> <td><%= tr.sex || "男" %></td>
</tr>
<% } %>
<% } %>
</table>
<img src="<%= this.href %>">
<%= this.include('tpl2',this); %>
</script>
<script type="text/html" id="tpl2">
<div>here is the render result:</div>
<% = this.print('Welcome to Ice Template') ;%>
<table border=1>
<% for(var i=0,tl = this.trs.length,tr;i<tl;i++){ %>
<%
tr = this.trs[i];
if (tr.sex === "男") {
%>
<tr>
<td><%= tr.name;; %></td> <td><%= tr.age; %></td> <td><%= tr.sex || "男" %></td>
</tr>
<% } %>
<% } %>
</table>
<img src="<%= this.href %>">
</script>
<script>
var trs = [
{name:"隱形殺手",age:29,sex:"男"},
{name:"索拉",age:22,sex:"男"},
{name:"fesyo",age:23,sex:"女"},
{name:"戀妖壺",age:18,sex:"男"},
{name:"竜崎",age:25,sex:"男"},
{name:"你不懂的",age:30,sex:"女"}
]
// var html = ice("tpl",{
// trs: trs,
// href: "http://images.jb51.net/type4.jpg"
// },{
// title: function(){
// return "<p>這是使用視圖helper輸出的代碼片斷</p>"
// }
// });
var elem = document.getElementById('tpl');
var tpl = elem.innerHTML;
var html = ice(tpl,{
trs: trs,
href: "http://images.jb51.net/type4.jpg"
},{
title: function(){
return "<p>這是使用視圖helper輸出的代碼片斷</p>"
}
});
console.log(html);
$("#content").html(html);
</script>
</html>
簡單的實(shí)現(xiàn)：
(function (win) {
// 模板引擎路由函數(shù)
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 = {};
// 輔助函數(shù)
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'];
// 根據(jù)瀏覽器采取不同的拼接字符串策略
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('');"];
// 函數(shù)體
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];
}
}
};
// 注冊函數(shù)
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);
相關(guān)文章
javascript讀取文本節(jié)點(diǎn)方法小結(jié)
本篇文章主要介紹了javascript讀取文本節(jié)點(diǎn)的方法，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要給大家介紹了關(guān)于webpack2.0搭建前端項目的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用webpack2.0具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-04-04
JS使用window.requestAnimationFrame()實(shí)現(xiàn)逐幀動畫
這篇文章介紹了JS使用window.requestAnimationFrame()實(shí)現(xiàn)逐幀動畫的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
本文主要介紹了canvas 實(shí)現(xiàn)中國象棋的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
javascript判斷并獲取注冊表中可信任站點(diǎn)的方法
這篇文章主要介紹了javascript判斷并獲取注冊表中可信任站點(diǎn)的方法,可實(shí)現(xiàn)針對域名和IP的可信任站點(diǎn)判斷功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了bootstrap可視化布局入門教程的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
layui checkbox默認(rèn)選中,獲取選中值,清空所有選中項的例子
今天小編就為大家分享一篇layui checkbox默認(rèn)選中,獲取選中值,清空所有選中項的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS 實(shí)現(xiàn)BASE64_ENCODE和BASE64_DECODE(實(shí)例代碼)
JS 實(shí)現(xiàn)BASE64_ENCODE和BASE64_DECODE(實(shí)例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
js調(diào)用后臺、后臺調(diào)用前臺等方法總結(jié)
這篇文章主要對js調(diào)用后臺，后臺調(diào)用前臺等方法做個總結(jié),需要的朋友可以參考下2014-04-04