在项目中使用预编译jade模板

如果对js模板不是很清楚的同学可以参考：推荐五款流行的JavaScript模板引擎

下边切入正文： jade官网

最初jade是为nodejs设计的html模板，但是html模板不能服役于纯前端的项目将是一件非常遗憾的事情，这里我们就来谈一谈如何让jade服役于纯前端项目。

我们这里假设你已经使用grunt完成了你的web项目的开发流程自动化。

关于为什么需要做javascript模板的预编译? 可以参考1 可以参考2

下边来说一下具体的操作步骤：

在script目录下新建目录template，内置两个目录jade/jade-generated
jade目录下存放编写的jade模板文件，比如：noresult-tips.jade
jade-generated 目录内存放自动编译jade生成的 client js template 文件。

配置grunt jade任务

安装grunt-contrib-jade这一任务插件，github访问地址

修改grunt配置文件

  jade: {
      options: {
          client: true,
          processName: function(str) {
              return str.match(/^app\/scripts\/public\/template\/jade\/(.*)\.jade$/)[1];
          }
      },
      dist: {
          files: [
              {
                  src: '<%= yeoman.app %>/scripts/public/template/jade/noresult-tips.jade',
                  dest: '<%= yeoman.app %>/scripts/public/template/jade-generated/noresult-tips.js'
              }
          ]
      }
  }

说一下几个参数各自的含义：

client：将jade模板编译成client-side使用的js模板函数，而不是html文件；
processName: 生成的预编译模板对象的索引key

在js文件中如何使用：

首先需要引入jade的运行时文件，下载地址

      <script src="scripts/public/template/jade/jade-runtime.js"></script>

引入通过grunt-contrib-jade生成的js文件

      <script src="scripts/public/template/jade/jade-runtime.js"></script>
      <script src="scripts/public/template/jade-generated/noresult-tips.js"></script>

在逻辑js中的调用方法是：

      <script src="scripts/public/template/jade/jade-runtime.js"></script>
      <script src="scripts/public/template/jade-generated/noresult-tips.js"></script>
      <script src="scripts/logic.js"></script>

在logic.js 里边的调用：

      renderHtml = window.JST["noresult-tips"]({
          // 这里传入用于渲染模板的data数据模型
      });
      document.getElementById("result-sec").innerHTML = renderHtml

说一件在手Q查找中遇到的非常奇葩的事情，在android2.3低端机上，使用jade生成的js模板文件根本就不执行，一直到我换用handlebars模板引擎，我也没有找到问题所在，最后放弃，如果有知道原因的朋友，欢迎不吝赐教啊。

web duper

在项目中使用预编译jade模板

Possibly Related Posts