nodejs中art-template模板语法冲突解决方案

原创 2017年11月05日 17:36:23
  • art-template的github地址:https://github.com/aui/art-template

  • 前端开发中,有非常多的模板引擎第三方框架,其中art-template属于写的比较好的一个,一般的模板引擎第三方都会支持一到两种模板语法,最常见的就是大胡子语法{{ }}和尖括号语法<%= %>

  • 本篇文章主要介绍一下在nodejs中,art-template如何解决模板引擎语法冲突

  • 1.1-模板引擎语法冲突的场景

  • 1.如果一个html文件中,既存在客户端渲染,也存在服务端渲染的话,那么这两种渲染的模板引擎语法不能一致,否则在加载时服务端渲染就已经将客户端的模板也一并渲染了

  • 2.一般遇到这种情况,例如一个html文件中既有服务端渲染又有客户端渲染的情况下,服务端的模板引擎我们使用{{ }}语法,客户端渲染我们使用<%= %>

  • 3.在nodejs中,我们使用npm来安装art-template之后:npm install art-template,默认情况下art-template是同时支持浏览器端与服务端的,并且他们之间的导入文件是不同的

  • 1.2-配置art-template服务端模板语法

  • 1.如果是服务端,我们使用require('art-template')来导入,此时加载的是index.js,这里的index.js值得是根目录下的index.js,这是nodejs模块加载机制的入口,它的内部非常简单,就是做了一个文件导入操作。

    • 服务端的art-template的模板语法源代码在art-templatelib文件夹下的compile文件夹对应的adapter中,两种模板语法分别对应的文件是rule.art.js简洁语法rule.native.js原生语法,如下图

这里写图片描述

  • 2.如果是客户端,我们则不能使用服务端的模板语法文件,这是因为nodejs遵循的是commonjs的规范,所有的文件API都是以模块的形式导出,在art-template文件夹,lib->compile文件夹中有一个专用于客户端的模板语法文件template-web.js,这是一个压缩的js包

这里写图片描述

  • 3.浏览器的模板语法默认支持两种语法,简洁和原生,这个无法修改。但是我们可以通过修改服务端的源代码,使服务端只支持一种模板语法{{ }},这样的话我们在客户端使用<%= %>语法,服务器就无法渲染了
    • 经过本人对art-template源码的分析,发现art-template的服务端两种模板语法是在compile文件下有一个default.js文件中导入的,所以我们只需要稍微修改一下源码即可
      • 默认是一个数组来配置模板语法,[nativeRule, artRule]同时支持两种模板语法,我们去掉nativeRule即可,此时服务端只支持{{}}语法,该代码修改不会对客户端造成影响

这里写图片描述

  • 大功告成,此时服务端与客户端的模板语法就不会冲突了
版权声明:本文为博主原创文章,未经博主允许不得转载。

nodejs中art-template模板语法冲突解决方案

前端开发中,有非常多的模板引擎第三方框架,其中art-template属于写的比较好的一个,一般的模板引擎第三方都会支持一到两种模板语法,最常见的就是大胡子语法{{ }}和尖括号语法 本篇文...
  • mmp591
  • mmp591
  • 2017年11月06日 16:01
  • 42

在Express项目中使用Handlebars模板引擎

原网址:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成...
  • molong421
  • molong421
  • 2016年06月12日 16:52
  • 6421

Django和Angular.js模板标签冲突的解决方式

参考文章:http://yanhua365.lofter.com/post/b417f_1f0361                   http://stackoverflow.com/questi...
  • dipolar
  • dipolar
  • 2013年07月09日 11:21
  • 3488

JS模板引擎-腾讯artTemplate 简洁语法例子

Index {{if isAdmin}} {{title}} {{each list as value index}...
  • jiazimo
  • jiazimo
  • 2014年09月12日 17:10
  • 126879

nodejs+artTemplate用法,简单的实例

关于nodejs和artTemplate的这里不做介绍了,网上已经有很全面的介绍了,这里写个实例,上代码 安装nodejs npm install -g tmodjs //-g是全局安装 新建文件...
  • vivian201514
  • vivian201514
  • 2017年03月03日 17:04
  • 1183

artTemplate-3.0复杂对象的遍历与使用方法

artTemplate-3.0复杂对象的遍历与使用方法
  • sunbingzibo
  • sunbingzibo
  • 2016年10月14日 15:15
  • 5102

用require和artTemplate做的简单提示框

//require用来加载js文件,artTemplate则用来解析html模板 代码打包了,需要用ngix或其它搭建前端服务器才能正确运行....
  • huruqing001
  • huruqing001
  • 2014年03月25日 17:57
  • 2151

Discuz!自制模板带jquery时与discuz本身冲突解决办法

由于JQuery的效果很好,在制作模板时难免会用到各种jquery效果。可是做过模板的人就会发现加上自己的juery代码后,discuz自带的一些下拉功能就不可以使用了,其实原因就是discuz和JQ...
  • lih062624
  • lih062624
  • 2017年04月10日 15:54
  • 2522

nodeJs的基础语法

nodejs基础语法 Node.js的数据类型 Node.js的逻辑判断 Node.js的各种循环 Node.js中使用函数 看看和js有没有什么区别  使用 node 的 REPL 模式...
  • frost08ds
  • frost08ds
  • 2014年11月13日 18:56
  • 1815

nodejs express模版引擎ejs的使用

node ejs是一个express模版解析引擎,用于解析html模版生成对应的html的解析器。语法和php有些类似,语法比较直观。而express默认的模版引擎jade则语法比较怪异,给人感觉不太...
  • lisownjay
  • lisownjay
  • 2013年11月25日 22:22
  • 7490
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:nodejs中art-template模板语法冲突解决方案
举报原因:
原因补充:

(最多只允许输入30个字)