HTML--模板代码实现

1.业务场景

有时候我们希望一段代码动态变化的，根据不同的条件显示不同的内容或者样式。这时候我们需要模板代码来帮我们实现这一功能。

2.实现方式

据我所了解的方式有两种，一是利用script标签，设置type为text/html来保存模板代码。而是在HTML5中使用标签<template>。这两种方式只是存储方式的不同，最终处理的时候还是要使用JavaScript。

方式1：

<script type="text/html" id="templateCode" charset="UTF-8"><div id="test"></div></script>

type属性是定义脚本的MIME类型，text是媒体类型（media type），html 是子类型（subtype）。charset指定script内容的编码格式。如果不指定编码格式，浏览器会默认使用页面meta定义的编码格式，所以指定编码格式是一个好习惯。

当type被指定为text/html的时候，浏览器会解析script但不会执行，script内部的代码也不会被渲染展示在页面上。这样我们就把模板代码保存在了页面上，需要使用的时候通过JavaScript来获取。

方式2：

<template id="templateCode"><div id="test"></div></template>

使用template标签需要HTML5且浏览器支持。

3.JavaScript操作

简单的操作很简单，获取到模板代码后进行解析内容替换，更改等操作。不想自己设计解析替换规则的话可以直接使用Smarty模板，然后使用模板引擎脚本解析。

总结