自己动手：实现Dustjs中间件

Dustjs是我个人比较喜欢的一个JS模版引擎，原因有两个，一是，同时支持客户端和服务端渲染，模版编译成JS后使用，性能好；二是，有大公司的支持，Linkedin有专门的Dustjs版本（本文所说的都是该版本），而且经过线上考验。

创新互联专注于万州网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供万州营销型网站建设，万州网站制作、万州网页设计、万州网站官网定制、小程序制作服务，打造万州网络公司原创品牌,更为您提供万州网站排名全网营销落地服务。

关于Dustjs本文不再赘述（可参看文档），直接进入正题。

1. 为什么要写一个中间件

Dustjs 官方支持作为Express的View Engine使用，但个人倾向用于客户端渲染，能减少服务端的性能损耗，充分利用客户端的机器性能。目前Dustjs没有类似于less- middleware的插件，能够在按需的对模版进行编译，供客户端引用，因此才有了这个Dustjs中间件。

2. Show Me The Code

2.1. 中间件

中间件代码很简单，只有几十行，无非是拦截HTTP请求，如发现是获取模版，则按需的进行编译。

 
 
  
  
// 依赖模块的引入  
  
  
var url = require('url'),  
  
  
  fs = require('fs'),  
  
  
  extend = require('node.extend'),  
  
  
  dust = require('dustjs-linkedin'),  
  
  
  beautify = require('js-beautify').js_beautify,  
  
  
  iconv = require('iconv-lite'),  
  
  
  path = require('path');  
  
  
 
  
  
// 遵循模块定义，把模块暴露给使用方  
  
  
module.exports = function(source, options) {  
  
  
 
  
  
  // 使用node.extend模块来提供默认值  
  
  
  options = extend(true, {  
  
  
    format: false, // 是否格式化代码，便于阅读  
  
  
    encoding: 'utf-8' // 代码的编码格式，支持中文  
  
  
  }, options || {});  
  
  
 
  
  
  // source参数用于指定模版代码的存放路径，编译后的JS代码和模版源码放在一起  
  
  
  if (!source) {  
  
  
    throw new Error('dustjs-middleware requires `source` directory');  
  
  
  }  
  
  
    
  
  
  return function(req, res, next) {  
  
  
    if ('GET' != req.method.toUpperCase() && 'HEAD' != req.method.toUpperCase()) {  
  
  
      // 只处理Get和Head请求  
  
  
      return next();  
  
  
    }  
  
  
      
  
  
    var pathname = url.parse(req.url).pathname;  
  
  
    if (!/^\/dust\/[\S]+\.js$/.test(pathname)) {  
  
  
      // 不是对JS文件的请求这里不处理  
  
  
      return next();  
  
  
    }  
  
  
      
  
  
    var jsPath = source + pathname;  
  
  
    var dustPath = jsPath.replace(/\.js$/, '.dust');  
  
  
      
  
  
    var error = function(err) {  
  
  
      return next('ENOENT' == err.code ? null : err);  
  
  
    };  
  
  
      
  
  
    // 编译模版的函数  
  
  
    var compile = function() {  
  
  
      fs.readFile(dustPath, function(err, buf){  
  
  
        if (err) {  
  
  
          return error(err);  
  
  
        }  
  
  
          
  
  
        // 用指定的编码解析出模版源码  
  
  
        var data = iconv.decode(buf, options.encoding);  
  
  
 
  
  
        // 编译模版，以文件名作为模版名  
  
  
        var name = path.basename(dustPath, '.dust');  
  
  
        var template = dust.compile(data, name);  
  
  
 
  
  
        if (options.format) {  
  
  
          // 有需要则进行代码格式化，基于js-beautify  
  
  
          template = beautify(template, { indent_size: 2 });  
  
  
        }  
  
  
          
  
  
        // 以指定的编码写入编译后的JS代码  
  
  
        buf = iconv.encode(template, options.encoding);  
  
  
        fs.writeFile(jsPath, buf, next);  
  
  
      });  
  
  
    };  
  
  
      
  
  
    fs.stat(dustPath, function(dustErr, dustStats) {  
  
  
      // 判断模版代码是否存在，不存在则不处理请求  
  
  
      if (dustErr) {  
  
  
        if ('ENOENT' == dustErr.code) {  
  
  
          return next();  
  
  
        } else {  
  
  
          return next(dustErr);  
  
  
        }  
  
  
      }  
  
  
        
  
  
      if (dustStats.isDirectory()) {  
  
  
        // 模版代码是个文件，也不处理  
  
  
        return next();  
  
  
      }  
  
  
        
  
  
      fs.stat(jsPath, function(jsErr, jsStats) {  
  
  
        if (jsErr) {  
  
  
          if ('ENOENT' == jsErr.code) {  
  
  
            // JS文件不存在，直接编译  
  
  
            return compile();  
  
  
          } else {  
  
  
            return next(jsErr);  
  
  
          }  
  
  
        } else if (dustStats.mtime > jsStats.ctime) {  
  
  
          // 模版有变动，重新编译  
  
  
          return compile();  
  
  
        }  
  
  
      });  
  
  
    });  
  
  
  };  
  
  
};  
 

需要注意的是中间件以文件名作为模版的名字，使用模版时，需要指定该模版名，示例如下。