Motor de plantillas
Los datos JOSN devueltos en segundo plano encontrarán un problema al renderizar la página a través de datos JOSN, es decir, cuando los datos JSON rendericen la página, encontrará el mismo problema de datos de formato (como formularios, listas ...)
Si encuentra contenido con tipos de datos similares, puede usar plantillas para analizar páginas por lotes. El motor de plantillas se utiliza en este momento
Motor de plantillas: si tenemos una estructura similar para mostrar y los datos ya están allí, el siguiente paso es necesitar un "modelo", por lo que el modelo es un motor de plantillas en nuestros términos profesionales.
El motor de plantilla que utilicé aquí es un complemento de terceros underscore.js
Aquí hay un ejemplo simple.
<script src="js/underscore.js"></script>
<body>
<script>
// 模板字符串
var templateStr = "大家好，我是<%=name%>,今年<%=age%>岁了，我来自美丽的<%=adress%>,我很喜欢<%=hobby%>";
// 模板编译函数
var compiled = _.template(templateStr);
//console.log(compiled)
// JOSN数据
var jsonObj1 = {
"name": "小黑",
"age": "25",
"adress": "三亚",
"hobby": "冲浪"
}
var jsonObj2 = {
"name": "小白",
"age": "22",
"adress": "冰城哈尔滨",
"hobby": "冰雪运动"
}
// 编译后的结果
var result1 = compiled(jsonObj1);
var result2 = compiled(jsonObj2);
console.log(result1);
console.log(result2);
</script>
</body>
Representación de tabla de underscore.js
Hay dos formas de hacer una plantilla.
La primera es convertir directamente el código HTML de la plantilla en una cadena y luego hacer una función de plantilla
var template = "<tr><td><%=id%></td><td><%=name%></td><td><%=age%></td><td><%=sex%></td></tr>"El segundo es lograr a través de nuestra etiqueta de script.
Si el valor del tipo de script es "text / javascript;", el código interno será reconocido y ejecutado, pero si no lo es, será silencioso y no se ejecutará sin errores, por lo que se puede usar para almacenar algún contenido.
Por ejemplo, puede establecer el valor de tipo de la siguiente plantilla en "texto / plantilla" para indicar que la cadena de la plantilla está almacenada dentro, o puede establecer otras, intente establecer nombres significativos
<body>
<table>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
<script type="text/template" id="templateText">
<tr>
<td><%=id%></td>
<td><%=name%></td>
<td><%=age%></td>
<td><%=sex%></td>
</tr>
</script>
<script src="js/underscore.js"></script>
<script>
var table = document.getElementsByTagName("table")[0];
// 获取模板结构
var templateText = document.getElementById("templateText");
// 获取template内部的数据
var templateData = templateText.innerHTML;
// 发送请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var data = xhr.responseText;
var obj = JSON.parse(data)
renderDom(obj)
}
}
}
xhr.open("get", "test.json", true);
xhr.send(null);
// 渲染模板
function renderDom(obj) {
// 编译模板函数
var compiled = _.template(templateData);
// 遍历返回的数据内容
_.each(obj.info, function (item) {
var dom = compiled(item);
// 追加节点上树
table.innerHTML += dom;
})
}
</script>
</body>.json
{
"info": [
{
"id":10001,
"name": "小明",
"age": 18,
"sex": "男"
},
{
"id":10002,
"name": "小兰",
"age": 15,
"sex": "男"
},
{
"id":10003,
"name": "小红",
"age": 14,
"sex": "男"
}
]
}