日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

Dustjs是我個(gè)人比較喜歡的一個(gè)JS模版引擎，原因有兩個(gè)，一是，同時(shí)支持客戶端和服務(wù)端渲染，模版編譯成JS后使用，性能好；二是，有大公司的支持，Linkedin有專門(mén)的Dustjs版本（本文所說(shuō)的都是該版本），而且經(jīng)過(guò)線上考驗(yàn)。

創(chuàng)新互聯(lián)專注于萬(wàn)州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供萬(wàn)州營(yíng)銷型網(wǎng)站建設(shè)，萬(wàn)州網(wǎng)站制作、萬(wàn)州網(wǎng)頁(yè)設(shè)計(jì)、萬(wàn)州網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造萬(wàn)州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供萬(wàn)州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

關(guān)于Dustjs本文不再贅述（可參看文檔），直接進(jìn)入正題。

1. 為什么要寫(xiě)一個(gè)中間件

Dustjs 官方支持作為Express的View Engine使用，但個(gè)人傾向用于客戶端渲染，能減少服務(wù)端的性能損耗，充分利用客戶端的機(jī)器性能。目前Dustjs沒(méi)有類似于less- middleware的插件，能夠在按需的對(duì)模版進(jìn)行編譯，供客戶端引用，因此才有了這個(gè)Dustjs中間件。

2. Show Me The Code

2.1. 中間件

中間件代碼很簡(jiǎn)單，只有幾十行，無(wú)非是攔截HTTP請(qǐng)求，如發(fā)現(xiàn)是獲取模版，則按需的進(jìn)行編譯。

 
 
  
  
// 依賴模塊的引入  
  
  
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模塊來(lái)提供默認(rèn)值  
  
  
  options = extend(true, {  
  
  
    format: false, // 是否格式化代碼，便于閱讀  
  
  
    encoding: 'utf-8' // 代碼的編碼格式，支持中文  
  
  
  }, options || {});  
  
  
 
  
  
  // source參數(shù)用于指定模版代碼的存放路徑，編譯后的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請(qǐng)求  
  
  
      return next();  
  
  
    }  
  
  
      
  
  
    var pathname = url.parse(req.url).pathname;  
  
  
    if (!/^\/dust\/[\S]+\.js$/.test(pathname)) {  
  
  
      // 不是對(duì)JS文件的請(qǐng)求這里不處理  
  
  
      return next();  
  
  
    }  
  
  
      
  
  
    var jsPath = source + pathname;  
  
  
    var dustPath = jsPath.replace(/\.js$/, '.dust');  
  
  
      
  
  
    var error = function(err) {  
  
  
      return next('ENOENT' == err.code ? null : err);  
  
  
    };  
  
  
      
  
  
    // 編譯模版的函數(shù)  
  
  
    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) {  
  
  
          // 有需要?jiǎng)t進(jìn)行代碼格式化，基于js-beautify  
  
  
          template = beautify(template, { indent_size: 2 });  
  
  
        }  
  
  
          
  
  
        // 以指定的編碼寫(xiě)入編譯后的JS代碼  
  
  
        buf = iconv.encode(template, options.encoding);  
  
  
        fs.writeFile(jsPath, buf, next);  
  
  
      });  
  
  
    };  
  
  
      
  
  
    fs.stat(dustPath, function(dustErr, dustStats) {  
  
  
      // 判斷模版代碼是否存在，不存在則不處理請(qǐng)求  
  
  
      if (dustErr) {  
  
  
        if ('ENOENT' == dustErr.code) {  
  
  
          return next();  
  
  
        } else {  
  
  
          return next(dustErr);  
  
  
        }  
  
  
      }  
  
  
        
  
  
      if (dustStats.isDirectory()) {  
  
  
        // 模版代碼是個(gè)文件，也不處理  
  
  
        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) {  
  
  
          // 模版有變動(dòng)，重新編譯  
  
  
          return compile();  
  
  
        }  
  
  
      });  
  
  
    });  
  
  
  };  
  
  
};  
 

需要注意的是中間件以文件名作為模版的名字，使用模版時(shí)，需要指定該模版名，示例如下。