JavaScript輸入郵件信箱自動提示實例程式碼_javascript技巧

本來想把之前對artTemplate原始碼解析的註解放上來分享下，不過隔了一年，找不到了，只好把當時分析模板引擎原理後，自己嘗試

寫下的模板引擎與大家分享下，留個紀念，記得當時還對比了好幾個模板引擎來著。

這裡所說的js的模板引擎，用的是原生的javascript語法，所以很類似php的原生模板引擎。

 

前端模板引擎的作用？

1. 可以讓前端開發更簡單，不需要為了產生一個dom結構而使用運算子去拼接字串，而只需要一個元素的（裡面的html模板），或者一個變數（儲存著模板），或一個範本檔

2. 易於維護，減少耦合，假使你的dom結構變化了，不需要更改邏輯代碼，而只需要更改對應的模板（文件）

3. 可以緩存，如果你的模板是一個類似.tpl的文件，那麼完全可以用瀏覽器去加載，並且還存下來。說到.tpl文件，可以做的不只是快取了，你還可以做到透過模組載入器

    將.tpl作為一個模組，那就可以按需載入文件，不是更省寬頻，加快頁面速度嗎？

4. 等等等

 

前端模板引擎的原理？

原理很簡單就是 物件（資料）＋ 模板（含變數） －> 字串（html）

 

前端模板引擎的如何實現？

透過解析模板，根據詞法，將模板轉換成函數，然後透過呼叫函數，並傳遞物件（資料），輸出字串（html）

（當然，具體的還要看程式碼的）

就像這樣：

複製程式碼 程式碼如下:

var tpl = 'i am , years old'; // % 詞法，標記為變數

var obj = {
    name : 'lovesueee' ,
     name : 'lovesueee' ,
    age : 24
};
var fn = Engine.compile(tpl); // 編譯成函數

var str = fn(obj);   // 渲染字串     >

範例：

複製程式碼 程式碼如下:

   

   
   
   
                    tr = this.trs[i];
            if (tr.sex === "女") {
        %>
       
       
       
       
   
   
   
   

   
   
   
                     🎜>        %>
       
       
       
       
   
． %= this.href %>">


<script>    var trs = [<P>        {name:"隱形殺手",age:29,sex 拉",age:22,sex:"男"},<BR>        {name:"fesyo",age:23,sex:"女"},<BR>        {name:"戀妖,sex:"男"},<BR>        {name:"竜崎",age:25,sex:"男"},<BR>        {name:"你不懂的",age:30,sex: "女"}<BR>    ]<BR> <BR>    // var html = Ice("tpl",{<BR>    //     trs: trs,<BR>    //     href： / },{    //     title: function(){<P>    //         return "<p> });<BR>    var elem = document.getElementById('tpl');<BR>    var tpl = elem.innerHTML;<BR> <BR>    var html =ice(tpl,{<BR>        trs: trs,<BR>        href   標題: 函數(){<BR>            return "<p>這是使用Viewhelper 輸出的程式碼片段"<BR>       #content").html(html);<BR></script>

簡單的實作：




複製程式碼

程式碼如下：

(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                 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;
                    }

                    身體 = 'line =1;';
                   }
                html
                 _foot = 腳。replace(/ ^[ nr] s*/g, '');
                   if (!_foot) {
  >                   }
                             html .push(foot);
                }
           
        body = "var Render=function(data){ice.mix(this, data);try{"
                    "}catch(e){ice.log ('渲染錯誤: ', line, 'line');ice.log('無效語句: ', js[line-1]);throw e;}};"
            "var proto=Render.prototype= iExtend(iHelper);"
            "ice.mix(proto, options);"
       

        var render = new Function('html', 'js', 'iExtend', 'iHelper', 'options', body);

        return render(html, js, iExtend, iHelper, options);
    };

   ice.log = function () {
        if (typeof console === 'undefined') {
     

        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) {
      for (var key               target[ key] = source[key];

            }

        }

    };    // 註冊函數   ice.on = function (name, fn) {

        iHelper[name] = fn 

    // 清除快取

   ice.clearCache = function () {
        iCache = {};
        iCache = {};
    };    // 變更設定
   ice.set = function (name, value) {
        iConfig[name] = value;    // 引入介面

    if (typeof module !== 'undefined' && module.exports) {

        win.ice = Ice;
    }

})(窗口);