为什么不用js去渲染页面？

为什么不用js去渲染页面？


用js去渲染页面，服务器只提供数据。 那么页面都可以是静态的html文件。 通过ajax获取数据。然后js去渲染。 这样不是很和谐么？
  而且好处也很多。首先页面只包含模板，静态化有助于各级缓存。
  其次js 渲染简单方便。分担服务器渲染的计算量。
  服务器程序实现简单只提供数据。

画个流程吧: 
client ---------------------- > server 
        <-------   html模板 + js 
        ajax -------------> 
         <------------json 数据 
然后: 
 js  把json数据 填充 html 模板 -----> 浏览器解析渲染画到屏幕上 
我指的就是js 填充 html模板这一过程. 

 

  我觉得 唯一不好的是搜索引擎不知道支持不支持这种页面了。
  可是奇怪的是虽然有很多js渲染库 。有的横方便而且超简单 。但是各个网站并没有使用这些技术。请问只是为啥。仅仅是对搜索引擎不友好么？
  自己照着tempo.js写了一个用于 js模板渲染的函数。

 

function render(id, data, insert){ 
        if(!data) return; 
    if(!render.__t)render.__t = {}; 
        var t = render.__t[id]; 
    dom = document.getElementById(id); 
    if(!dom) return; 
        if(!t){ 
                var html = dom.innerHTML.replace(/[\n\r]/gm,' ') 
        .replace(/([\'|\\|\"])/gm,"\\$1") 
        .replace(/#([\w\d]{3,40})#/gmi, "'+data[\"$1\"]+'"); 
            html = ["return '", html ,"';"].join(''); 
            t = new Function('data',html); 
            render.__t[id] = t; 
        dom.innerHTML = ''; 
                } 
        if(!t) return; 
    var ret = ''; 
        if(data.length){ 
                for(var i=0,len=arr.length; i<len; i++){ 
                arr[i] = t(arr[i]); 
            } 
            ret = arr.join(''); 
        }else{ 
        ret = t(data); 
        } 
    if(insert == 0){ 
        ret = ret + dom.innerHTML; 
    }else if(insert == -1){ 
        ret = dom.innerHTML + ret; 
    } 
    dom.innerHTML = ret; 
} 

 

 
js这么写

var obj = {urladdr:'http://google.com', name:'草根'};
render('xxx',obj); 

 

搞定 。 如果穿进去一个list [] 。就会渲染出一串。


做了一个例子  渲染sohu微博页面的.
http://fengshihao.tk/jst.html

打开页面直接看源码.   渲染速度没问题 .
实现有两种方式,
1 把生成的json数据放到页面里 直接带过来.(不知道这样对 seo支持的怎么样?)
2 用ajax去获得.

评论

2 楼 lucane 2010-07-09  

我也觉得这样分开，js重绘页面比较好，而且如果做控件的话，看起来更简洁，如果我一个控件的类型是Calendar，只需要在写html的时候写<input objtype="Calendar" objid="cal_my" />，然后页面用匿名函数去重绘这些东西，页面上就会少很多代码，至少看起来是的。跟dojo很类似，但应该可以做的比dojo更简单。不好的是会破坏语意，可能有内存泄漏，搜索引擎读不懂，不过据说google的caffeine能懂js。

1 楼 toeo 2010-05-28  

可以这样做呢..

google的 gmail reader 就是这样做的..

GWT开发的东西就是这个意思..这样速度最快..你可以去研究下呢..