模板的引用和包含

作者: 云香水识 | 来源:发表于2014-12-25 22:18 被阅读139次

模板的引用和包含
thymeleaf中的模板布局
Android kotlin 杂项
资源
Laravel 模板基础语法流程控制模板中的URL
模板的布局、包含和继承
2018-05-17
03Angular模板在组件类中的引用
Groovy模板引擎
24.Templates的模板继承

前端开发页面中经常会遇到公用HTML片段的情况，例如：整站页面都是用统一的头尾，这个要求一个我们的服务器至少应该提供一个基本的代码片段引用模式。

文本结果获取：
因为需要模板操作的是字符串文本，首先获取文本，使用读取流操作时候，需要进行data和end事件监听。

var rs = fs.createReadStream(pathname), str = "";
rs.on("error", function(err){  
    resp.writeHead(500, {"Content-Type": 'text/html'});
    resp.end( JSON.stringify(err) );  //出错时 服务端给出500的HTTP-code
}).on("data", function(d){  //data事件中拼接结果
    str += d;
}).on("end", function(){
    //TODO 这里获取str就是结果字符串
});

文本识别：
其次，要让服务器识别出来只有文本类型的请求才能进行这种操作，因为本质上我们是使用字符串替换实现该功能的。f2e-server中在mime对象上面进行了方法扩展isTXT(path)

mime.isTXT = function(path){
    return /\b(text|xml|javascript|json)\b/.test( this.lookup(path) );
};

可以看出来，我们判断MIME类型字符串是否含有text|xml|javascript|json。我们只需要在end事件注册之前判断一下，只有是文本类型的时候才处理，否则仍然使用原来的管道转接。

if( mime.isTXT(pathname) ){
    rs.on("end",function(){ 
        str = require("./lib/handle.js").execute(str, root);  //将处理过程用一个新的模块实现
        resp.end( str );
    });
}else{
    rs.pipe(resp);
}

处理结果字符串
这里核心处理模板引用的功能。handle.js

"use strict";
var fs = require("fs");
module.exports = {
    execute: function(str,root){
        var belong = "$[placeholder]";
        var h = /\$belong\[["\s]*([^"\s]+)["\s]*\]/.exec(str); 
        try{
            if(h){  //如果有belong关键字, 先处理: 所有路径关键字均使用从root起的绝对路径。
                belong = fs.readFileSync( root + "/" + h[1],'utf-8');   //读取belong文本
                str = str.replace(h[0], "" );           //替换关键字
                str = belong.replace("$[placeholder]",str);
            }
            return str.replace(/\$include\[["\s]*([^"\s]+)["\s]*\]/g, function(match, key){
                return fs.readFileSync( root + "/" + key,'utf-8');   //读取include文本
            });
            
        }catch(e){
            console.error(e);
            return str;
        }
    }
};

Demo
QQ截图20141225220709.png
直接从浏览器访问: http://localhost:8888/example/123.html 响应结果应该是酱紫的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2 style="text-align:center">我是header</h2>
    
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
</ul>
</body>
</html>