欢迎光临

木子屋

标题: &lt;script type=&#34;text/html&#34;&gt;&lt;/script&gt;使用一例

作者: dnawo

日期: 2013-05-03 05:40 PM

分类: 脚本语言

内容: 假如有一段html需在页面加载完成后再显示，我们可能会这么做：
复制内容到剪贴板 程序代码<!-- 1.内容区域 -->
<div id="content"></div>
<!-- 2.脚本 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
.ready(function () {
var model = { name: "dnawo" };
$("#content").html("<div class=\"welcome\">" + model["name"] + "，欢迎您。</div>");
});
</script>
这样在js中夹杂了html，不易阅读，我们一直力求代码分离，js和html也应要分离，所以<script type="text/html"></script>就出场了：
复制内容到剪贴板 程序代码<!-- 1.内容区域 -->
<div id="content"></div>
<!-- 2.模板 -->
<script type="text/html" id="template">
<div class="welcome">{name}，欢迎您。</div>
</script>
<!-- 3.脚本 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
.ready(function () {
//1.1 变量
var model = { name: "dnawo" };
var reg = new RegExp("{(\\w+)}", "ig");
var html = $("#template").html();
//1.2 替换
html = html.replace(reg, function (text, key) { return model[key]; });
$("#content").html(html);
});
</script>
它既解决了html模板存放和显示问题，又解决了js和html代码分离问题，可谓一举多得。当然了，你不一定非得用script，下边代码可实现同样效果：
复制内容到剪贴板 程序代码<!-- 2.模板 -->
<div id="template" style="display:none;">
<div class="welcome">{name}，欢迎您。</div>
</div>

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.820 ms

返回

标题: &lt;script type=&#34;text/html&#34;&gt;&lt;/script&gt;使用一例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.820 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.852 ms

返回