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模板,然后使用模板引擎脚本解析。
总结