动态渲染插件开发
下面列出view插件源代码,然后对其进行讲解。
lib/view.js源代码
var fs = require("fs"),
path = require("path");
// 过滤 \r\n
function filterRN(s){
s = s.replace("\'","\"");
s = s.replace(/\n/g,"\\n");
s = s.replace(/\r/g,"\\r");
return "result += \'"+s+"\';\n\r";
}
module.exports = function(viewPath){
var viewCache = {}
fs.readdir(viewPath, function(err,files){
files.forEach(function(fn){
var filePath = path.join(viewPath,fn);
fs.readFile(filePath,function(err,data){
var str = data.toString();
var buf = [];
buf.push('var result = "";')
var htmlPart= "";
for(var i=0,len = str.length;i<len;){
if(str.slice(i,i+2) === "<%"){
var end = str.indexOf("%>",i);
var jsPart = str.slice(i+2,end);
i = end+2;
buf.push(filterRN(htmlPart));
htmlPart = "";
if(jsPart.slice(0,1) === "="){
buf.push("\r\nresult += "+jsPart.slice(1)+";\r\n")
}else{
buf.push("\r\n"+jsPart+"\r\n");
}
}else{
htmlPart += str.slice(i,i+1);
i += 1;
}
}
buf.push(filterRN(htmlPart));
buf.push("return result;")
viewCache[fn] = new Function("locals",buf.join(""));
});
})
})
return function(req,res,next){
res.view = function(fileName,locals){
res.write(viewCache[fileName](locals));
res.end();
}
next();
}
}这个插件的原理,上节分析过了,下面对细节进行讲解。插件用到了核心库的两个模块 fs和path,fs都很熟悉了,path.join方法是把字符串连接为一个完整目录的方法,可以参考附录。viewCache用来储存模板页面Function形式的。插件在调用app.use(view(viewPath))时,会读取这个目录下的全部文件,然后转换为javascript Function对象,保存到viewCache之中。
转换一个模板文件的方法是从头读取,当遇到<%时会通过indexOf找到配对的%>,然后抽离出中间的javascript代码,保存到buf中。而启动它部分都转换为字符串对象result += ...... ,接着添加return result;字符串。而这些字符串储存在 var buf = [];中,在最后通过 buf.join("')把这些字符串数组合并为一个字符串,就构成了view函数体,最后通过viewCache[fn] = new Function("locals",buf.join("")); 转换为javascript Function对象保存到viewCache中。
filterRN函数是用来过滤 \n\r 并且把它们转换为 \\n \\r 形式,目的是保证函数体能正确执行。因为如果不过滤,就会出现以下的函数体:
result += " abc "
这是错误的,javascript不支持这种写法,所以通过转换后就会得到如下形式:
result += "\r\n abc \r\n";
代码不是太复杂,仔细分析后就能理解。重要的是自己要动手去开发,想一想如果模板文件不是<%%>这种形式,换成其他的写法应该如何做这个插件,比如模板文件是缩进写法等等。当然转换后的形式应该都是javascript Function对象形式。
最后,我们在index.js文件中加入以下代码,view插件就算告一段落了。
exports.view = require("./lib/view");下一节,将用一个实例进行说明。