NodeJs 服务端渲染 art-template 与 CommonJS 的模块规范

灰太狼 2022-12-13 12:49 74阅读 0赞

在nodeJs服务端上进行数据渲染，我们需要使用到第三方模块 `art-template` ，使用npm进行安装这个模块，`npm install art-template`  
安装完成后：（中文文档可能无法访问）[中文文档： https://aui.github.io/art-template/][https_aui.github.io_art-template]  
可以在其他文档当中进行查看：[https://www.kancloud.cn/lanju/art-template/1500273][https_www.kancloud.cn_lanju_art-template_1500273]

#### 介绍 ####

art-template 是一个简约、超快的模板引擎。  
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

#### 简单使用 ####

在这里我们定义一个js文件，导入模块，修改一下 目录，读取一个html文件，并且给一个变量绑定一个值，使用一个变量进行接收，最后把这个变量进行打印输出

var template = require('art-template');
    
    template.defaults.root = './';
    
    var  str = template('./art.html',{ value:'zhangsan'});
    
    console.log(str)

而art.html文件使用\{ \{\}\}读取这个变量值：如下代码所示

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		{ { value}}
    	</body>
    </html>

之后我们用node运行这个js文件：可以看到返回的值以及把value进行替换了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]

#### CommonJS的模块规范 ####

CommonJS对模块的定义十分简单，主要分为:

1.  模块引用:  
    使用require() 方法引入一个模块API ;
2.  模块定义:  
    在模块中使用exports对象导出当前模块数据或方法；  
    在模块中还存在一-个module对象 ,它代表模块自身. module对象有一个exports 属性,用于数据导出；  
    其实exports对象就是module.exports的引用：`exports === module. exports`
3.  模块标识:  
    其实就是模块的文件名.必须符合小驼峰法命名规则.使用require()引入时使用。或…开头的相对路径或绝对路径,引入时可以不写文件后缀名; 重点注意： 模块中的方法和变量的作用于尽在模块内部,每个模块具有独立的空间，互不干扰；

#### 自定义模块的引用 ####

先定义一个`a.js`文件，并且进行导出，导出这个data的数值。

var a = 1;
    var b = 2;
    var c = a + b;
    exports.data = c;

之后定义一个test.js文件，导入a这个模块，打印出这个data的值

var a = require('./a')
    
    console.log(a.data);

使用node运行查看结果：

![在这里插入图片描述][202010121047394.png_pic_center]

[https_aui.github.io_art-template]: https://aui.github.io/art-template/
[https_www.kancloud.cn_lanju_art-template_1500273]: https://www.kancloud.cn/lanju/art-template/1500273
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/40f72889858a4ca19d7275eaef639953.png
[202010121047394.png_pic_center]: /images/20221123/8e6154a5508b4aabae935302c8e1d653.png