Json和JS模板的使用 Json和JS模板的使用

主要用在写同类型的样式：
自己的理解: 先用 JSON存储数据，并转换成JS对象；再在HTML中的 script 标签中写好JS模板（一般是先用HTML标签写好结构并在CSS中写好对应结构的样式，然后就是替换对应区域的内容），并根据对应格式将数据写入模板中。这样写一次模板就可生成同类型但不同内容的样式了。
一、JSON 1.什么是JSON?
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式；
它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
2.JSON的格式
JSON其实就是字符串版本的JS对象；
'{"firstName": "Json"}' JSON
{firstName: "Json"} js对象
我们可以将一个js对象转换成JSON, 也可以将一个JSON转换成js对象；
3.JSON注意点:
在JSON中 key 只能是字符串, value 可以是任意 js 数据类型。
例：

// 定义一个JS对象 let obj = { name: "lnj", age: 34, gender: "man" }; //将JS对象转换成JSON let json = JSON.stringify(obj); // {"name":"lnj","age":34,"gender":"man"} // console.log(json); // console.log(typeof json); // string//将json转换成js对象 let obj2 = JSON.parse(json); console.log(obj2); console.log(typeof obj2);

二、JS模板 JS模板：一般用腾讯的JS模板引擎;
它有一个自己的JS文件（template-web.js），需将其引入HTML中；
用法介绍：
先下载相关文档： https://github.com/aui/art-template
再找到文档下的模板例子：art-template-master\art-template-master\example\web-native-syntax\basic
例：

上面代码中一些基本的格式有:或下面是例子中需用的数据：这部分可不看，即和下文提到的写一个initJsonData() 是一个意思。

具体使用：
1.在JS中，可先定义一个对应的函数；

function initJsonData() { let str = ` {放入相关数据 } `// 数据是数组的形式存入的 return JSON.parse(str); // 转换成js对象 }

【Json和JS模板的使用】2.在JS文件中写：

let obj = initJsonData(); // 根据数据创建内容 let oMainIn = document.querySelector(".main-in"); //对应的HTML结构 let html = template('test', obj); // 将数据obj导入模板 oMainIn.innerHTML = oMainIn.innerHTML + html;