js模版引擎（基於html模版和json數據的javascript交互）（第一講）

前言

本文適合剛接觸js模版的同學，只要有入門的js基礎都可以看懂， 因為小馬的js也是剛入門的水准啊。小馬是搞asp.net的 有同學會說.net有repeater,datalist,grideview數據綁定控件，為何還要費勁研究什么js 模版引擎呢 我們都知道要想獲取新的數據 例如淘寶的產品分頁 我們想獲取下一頁的產品

我們會點擊下一頁 然后頁面提交 服務器返回數據 在這個過程中 服務器返回了很多我們不需要的數據 因為在原本頁面基礎上我們只需要獲取 下一頁的產品列表

然而服務器返回了整個頁面包括 js,css,整個網頁的html如果頁面較小的情況下這些都可以不予考慮如果像淘寶這樣的訪問量極大的網站 那么對服務器就會造成很大的負擔 用戶也需要花費更多的時間等待服務器的響應 這就極不利於用戶體驗

那么如果我們告訴服務器我們想得到第二頁的產品

然后服務器只返回第二頁的產品的數據 當然這個數據是json格式

然后我們用這些json數據重新填充到產品列表里 那該怎么實現呢

這個時候就是html模版引擎的用武之地了

下面用一段代碼來演示

//定義一段html模版

<li> 
   $id$&nbsp;&nbsp;   $name$<br />
      於$adddate$<br /><br />
      $discuss_info$
    </li> 

//定義json格式數據

var jsondata=[{id:1,name:"小馬",adddate:"2012-12-24",discuss_info:"你好"},{id:1,name:"小馬",adddate:"2012-12-24",discuss_info:"你好"}]

//定義模版解析方法
 

String.prototype.temp = function(obj) {
            return this.replace(/\$\w+\$/gi, function(matchs) {
            var returns = obj[matchs.replace(/\$/g, "")];
                return (returns + "") == "undefined" ? "" : returns;
            });

        }

//將解析后的內容填充到指定位置

var htmlList = "", htmlTemp = document.getElementById("tt").value;
                for (var i = 0; i < JSON.length; i++) {
                    htmlList += htmlTemp.temp(JSON[i]);

                }
                
                $("#result").html(htmlList);

今天所講是 js模版應用的雛形  通過這個雛形 你可以看到這里應用到了一個思想 就是DOP (面向數據編程) 整個過程我們使用到了

 html定義的模版，解析html模版的方法，json數據 是不是很簡潔

看到這里您是不是對模版引擎有所了解了

當然本文介紹的js模版解析方法還不能算作引擎

因為 這個解析方法不能解析一些邏輯 例如 if else  each等條件語句循環語句 使用限制很大

別急

下文小馬將給大家展示一個完整的js模板引擎 敬請期待....

這里是第一講的demo點擊下載（采用 .net 2.0+sqlite）

（小弟初入園子 略有心得 給大家分享 歡迎各位前輩批評指正 ^_^）