动态渲染插件分析

动态渲染就是把数据添加到动态页模板,然后把这个页面返回给客户端的技术。下面是个动态页面模板,当然模板形式不只这一种,这是比较经典的写法。

view.html 文件内容

<!doctype html>
<html>
    <body>
        <%for(var i=0 ; i< 10 ; i++){%>
            <p><%=i%></p>
        <%}%>
    </body>
</html>

我们要做的就是要把模板文件转换为javascript对象,把<%%>包裹的字符串转换为javascript的代码形式,把其他的字符串保存为字符串对象即可,最后连接就完成了。以下是转后的javascript Function对象。

function view(locals){    
    var result = "";
    result += '<!doctype html>\r\n<html>\r\n    <body>\r\n        ';
    for(var i=0 ; i< 10 ; i++){
        result += '\r\n            <p>';
        result += i;
        result += '</p>\r\n        ';
    }
    result += '\r\n    </body>\r\n</html>';
    return result;
}

转换为这个形式后,只需要调用var result = view(locals) 就可以得到转换为静态HTML字符串了。如何转换为之上的Function对象呢?我们需要用到 new Function

var view = new Function("local","var result = ...... return result;")

每一个view函数都对应一个动态页,调用view函数时,可以为它赋值view(locals),locals可以是任意javascript对象。所以在开发动态插件时,内部应该有个viewCache对象,viewCache对象的形式如下:

var viewCache = {
     "page1.html":view1,
     "page2.html":view2
     ......
}

指定一个动态页目录,然后读取当前目录下的所有文件,把这些文件转换为javascript Function对象,赋值给viewCache。所以插件的使用代码应该如下:

app.use(view(__dirname+"/views"))

当然路径可以随意自定义。通过以上代码后,在使用时,res就应该具备view方法,以下是使用代码。

app.use(view(指定动态模板页目录))
app.get("/mypage",function(req,res){
      ......
      res.view("page1.html",locals) ; // locals可以是任意javascript对象。
})

当调用res.view方法时,内部就会调用 res.write(viewCache["page1.html"](locals)) ,从而把模板结合locals数据转换为html,发送给客户端。分析就到这里,下一节将开发这个插件。