脚本语言 订阅所有【脚本语言】的日志

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

编辑:dnawo 日期:2013-05-03

字体大小: 小 中 大
假如有一段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>


上一篇: 微信公众平台消息接口消息推送类型及结构
下一篇: C# XML序列化/反序列化类XmlSerializer使用示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 11679
发表评论
请登录后再发表评论！