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

• 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-template的lib文件夹下的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即可，此时服务端只支持{ {}}语法，该代码修改不会对客户端造成影响

• 大功告成，此时服务端与客户端的模板语法就不会冲突了