<!-- 1.内容区域 -->
<div id="content"></div>
<!-- 2.脚本 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).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">
$(document).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）
暂无评论。