萬盛學電腦網 >> 腳本專題 >> javascript >> JavaScript輸入郵箱自動提示實例代碼
JavaScript輸入郵箱自動提示實例代碼
這篇文章主要介紹了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; &njavascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved