欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼

 更新時(shí)間：2014年01月13日 14:45:51   作者：  
這篇文章主要介紹了JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼，有需要的朋友可以參考一下

本來(lái)想把之前對(duì)artTemplate源碼解析的注釋放上來(lái)分享下，不過(guò)隔了一年，找不到了，只好把當(dāng)時(shí)分析模板引擎原理后，自己嘗試

寫(xiě)下的模板引擎與大家分享下，留個(gè)紀(jì)念，記得當(dāng)時(shí)還對(duì)比了好幾個(gè)模板引擎來(lái)著。

這里所說(shuō)的js的模板引擎，用的是原生的javascript語(yǔ)法，所以很類(lèi)似php的原生模板引擎。

 

前端模板引擎的作用？

1. 可以讓前端開(kāi)發(fā)更簡(jiǎn)單，不需要為了生成一個(gè)dom結(jié)構(gòu)而使用+運(yùn)算符去拼接字符串，而只需要一個(gè)元素的（里面的html模板），或者一個(gè)變量（存儲(chǔ)著模板），或者　　一個(gè)模板文件

2. 易于維護(hù)，減少耦合，假使你的dom結(jié)構(gòu)變化了，不需要更改邏輯代碼，而只需要更改對(duì)應(yīng)的模板（文件）

3. 可以緩存，如果你的模板是一個(gè)類(lèi)似.tpl的文件，那么完全可以用瀏覽器去加載，并且還存下來(lái)。說(shuō)到.tpl文件，可以做的不僅僅是緩存了，你還可以做到通過(guò)模塊加載器

    將.tpl作為一個(gè)模塊，那就可以按需加載文件，不是更省寬帶，加快頁(yè)面速度嗎？

4. 等等等

 

前端模板引擎的原理？

原理很簡(jiǎn)單就是 對(duì)象（數(shù)據(jù)）＋ 模板（含有變量） －> 字符串（html）

 

前端模板引擎的如何實(shí)現(xiàn)？

通過(guò)解析模板，根據(jù)詞法，將模板轉(zhuǎn)換成一個(gè)函數(shù)，然后通過(guò)調(diào)用該函數(shù)，并傳遞對(duì)象（數(shù)據(jù)），輸出字符串（html）

（當(dāng)然，具體的還要看代碼的）

就像這樣：

復(fù)制代碼 代碼如下:

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);   // 渲染出字符串       

例子：

復(fù)制代碼 代碼如下:

<!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>


簡(jiǎn)單的實(shí)現(xiàn)：

復(fù)制代碼 代碼如下:

(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*/, '')


                    // 輸出語(yǔ)句
                    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);

    };

    // 合并對(duì)象
    ice.mix = function (target, source) {
        for (var key in source) {
            if (source.hasOwnProperty(key)) {
                target[key] = source[key];
            }
        }
    };

    // 注冊(cè)函數(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)文章

最新評(píng)論