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(/[\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);

赞 (0)

相关推荐

  • JavaScript输入邮箱自动提示实例代码

    本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着. 这里所说的js的模板引擎,用的是原生的javascript语法,所以很类似php的原生模板引擎. 前端模板引擎的作用? 1. 可以让前端开发更简单,不需要为了生成一个dom结构而使用+运算符去拼接字符串,而只需要一个元素的(里面的html模板),或者一个变量(存储着模板),或者 一个模板文件 2

  • js输入框邮箱自动提示功能代码实现

    同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls">    <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父

  • javascript输入CD-KEY自动分割的代码

    输入CD-KEY自动分割 function cdkeyInput(thisobj) { objResult = ""; nextObjResult = ""; if(thisobj.value.indexOf('-') > 0) { objResult = thisobj.value.substring(0,thisobj.value.indexOf('-')); nextObjResult = thisobj.value.substring(thisobj.

  • jQuery判断邮箱格式对错实例代码讲解

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>检测Email地址格式是否正确</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"><

  • javascript suggest效果 自动完成实现代码分享

    javascript suggest效果 自动完成实现代码分享

    首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西.只要弄懂原理,一下子就能搞出来.想必,以后你们工作也遇到做搜索框的活儿. 由于本人没有后端,因此取用一个对象作为本地数据库.而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的东西.当前成品已放到github上. 好了,我们动手吧.首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML.不过怎么也好,其成就是一个DIV放到

  • JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）

    在上篇文章给大家介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化(一),既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.JavaScript 插件一些基本特征: 配置一定要简单 插件中定义的变量不污染全局变量: 同一段代码可以在不同的地方复用: 用户可以自定义自己功能参数: 具有销毁变量和参数的功能: 如果按照以上的几个特征来写插件的话,我们可

  • JavaScript贪吃蛇小组件实例代码

    JavaScript贪吃蛇小组件实例代码

    1 写在前面 看来<JavsScript高级编程>,想做一个小demo练练自己的手,选择了贪吃蛇游戏.由于以前都是用c#写的,将贪吃蛇写到一个类里面,然后一个一个小方法的拆分,只向外提供需要提供的方法.这样就可以将贪吃蛇作为一个模块,任何地方都可以复用的.然而,用js进行编写的时候,由于不能很好的利用js语言的特性进行模块化编程,所以第一版的实现完全采用面向过程的方式,将函数中所需要的变量全部声明为全局变量.虽然这样也能够实现功能,但是做不到复用,而且定义非常多的最顶层变量,污染了全局变量.写

  • Python+tkinter模拟“记住我”自动登录实例代码

    Python+tkinter模拟“记住我”自动登录实例代码

    本文分享的代码主要是通过Python+tkinter模拟"记住我"自动登录的功能,具体介绍如下. 基本思路:如果某次登录成功,则创建临时文件记录有关信息,每次启动程序时尝试自动获取上次登录成功的信息并自动编写.本文主要演示思路,可根据实际系统中的需要进行改写,例如读取数据库并验证用户名和密码是否正确.对用户名和密码进行本地加密存储等等. import tkinter import tkinter.messagebox import os import os.path # 获取Windo

  • JS 正则表达式验证密码、邮箱格式的实例代码

    遗憾的是博客内容不允许包含js代码,不能在线测试,就只上代码了 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Regular Expression test</title> </head> <body> 用户名:(4-16位,字母.下划线.数字,减号) <br/> <input type="

  • JavaScript异步上传图片文件的实例代码

    html: <form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /> </form> jquery: $("#addfile&

随机推荐