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）

（小弟初入园子 略有心得 给大家分享 欢迎各位前辈批评指正 ^_^）