JSON与JS模板引擎实践-CSDN博客

主要用在写同类型的样式：
自己的理解: 先用 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

例：

<body>
<div id="content"></div>
<script id="test" type="text/html">
<% if (isAdmin) { %>

<h1><%=title%></h1>
<ul>
    <% for (var i = 0; i < list.length; i ++) { %>  // 遍历有多少个同样式的元素
        <li>索引 <%= i + 1 %> ：<%= list[i] %></li>
    <% } %>
</ul>

<% } %>

data: <%=$data%>
</script>
上面代码中一些基本的格式有: <%      %> 或 <%=     %>

下面是例子中需用的数据：这部分可不看，即和下文提到的写一个initJsonData() 是一个意思。
<script>
var data = {
	title: '基本例子',
	isAdmin: true,
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>

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

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

2.在JS文件中写：

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