您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JavaScript输入邮箱自动提示实例代码
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了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; &n- 上一个程序编程： 节点的插入之append()和appendTo()的用法介绍
- 下一个程序编程： 删除节点的jquery代码
