木子屋
 

标题: <script type="text/html"></script>使用一例

作者: 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">
    $(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)

 

登录

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.611 ms

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.611 ms

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.611 ms