现在位置首页 / 编程也疯狂 /正文

[ f2e-server系列教程] 模板引用和包含

作者: 释梵 | 2015年8月10日| 热度:℃ | 评论: |参与:

前端开发页面中经常会遇到公用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>
    <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>

PS:

相关完整代码已经发布到了npm仓库中, 可以使用 $npm install [email protected] 进行安装或者更新。进入目录后使用 $nodehttp-f2e-server.js` 启动服务,并查看Demo。


点击阅读本文所属分类的更多文章: 编程也疯狂 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询