Jade模版引擎前端实战:组件,组件,组件!
发布于 3 年前 作者 hezedu 3054 次浏览 来自 分享

用惯了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

2 回复

刚接手一个坑爹项目,前后端加起来用了三个模板。想整合成一个 不知道webpack支不支持jade编译

回到顶部