這篇文章主要介紹了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); // 渲染出字符串 例子： 代碼如下: <!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> 簡單的實現： 代碼如下: (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(/[nr]+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(/^[nr]+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);