Jade模版引擎前端实战：组件，组件，组件！
发布于 10 小时前 作者 hezedu 150 次浏览 最后一次编辑是 9 小时前 来自 分享

用惯了jade，再让写原生的html标签真是件痛苦的事情。这种事件在我转前端的时候遇到了。jade一般用在服务器端，于是想方设法把jade弄到前端去。 首先第一种方法就是引用jade的客户端了，在jade项目目录下有个 jade.js，这个就是jade的全部东东。把它src到浏览器中就能用了，但 jade.js 真是太大了，压缩后还有168KB。而且前端编译我觉得也不靠谱。所以放弃这种方法。 然后我又试安了gulp的什么jade插件。安装了一大堆依赖，又安装了一大堆依赖。操作一通果断放弃：因为不光是我用，太复杂了，同事会不愿意的。 于是我就翻jade的文档，自己尝试着写了个express中间件：express-jade-compiled 首先它是后端编译的，后端只需编译一次，然后缓存起来就可以供千万客户端使用。不像客户端得编译千万次。使用起来只需引用jade的runtime.js(压缩后只有3KB) 。用起来真是很简单的。

var jade_compiled = require('express-jade-compiled');
app.use('/jade_compiled',jade_compiled(path.join(__dirname, 'jade_compiled')));

然后往 jade_compiled 目录下写个jade文件，打开浏览器看看结果吧。

在实用过程中发现：前端jade几乎用不着extends block 这些layout。它需要的往往是一些很小的组件。由于一个文件只能编译成一个function，但我一个nav只有几行代码，单独一个文件实在太浪费了。而后端编译又不能把模版写在html里。于是我加了个特性：组件。具体就是使用 //-COMPONENT 注释来分割编译： 例： jade未加//-COMPONENT

h1 hello
h1 world

编译后(format后)：

define(function() {
  return function tpl(locals) {
    var buf = [];
    var jade_mixins = {};
    var jade_interp;
    buf.push("<h1>hello</h1><h1>world</h1>");;
    return buf.join("");
  }
})

而jade加上//-COMPONENT

//-COMPONENT hello
h1 hello
//-COMPONENT world
h1 world

编译后(format后)：

define(function() {
  return {
    "hello": function tpl1(locals) {
      var buf = [];
      var jade_mixins = {};
      var jade_interp;
      buf.push("<h1>hello</h1>");;
      return buf.join("");
    },
    "world": function tpl2(locals) {
      var buf = [];
      var jade_mixins = {};
      var jade_interp;
      buf.push("<h1>world</h1>");;
      return buf.join("");
    }
  }
})

这样可以把很多组件写进一个文件里。 目前项目实用起来还是很爽的。值得一提的是jade的错误提示很到位，再也不是什么VM了。

了解更多请前往项目地址： https://github.com/hezedu/express-jade-compiled 欢迎提issues

回到顶部