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

总结

    原文作者:魏永_Owen_Wei
    原文地址: https://www.jianshu.com/p/ccc708c440d2
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞