当<script>中的type等于text/html时，我们可以做很多事件！

<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>

例二：

我们可以在<script>片断中定义一个被JS调用的代码，但代码又不在页面上显示，这时，我们可以使用下面的方法：

 1   <script id="commentTemplate" type="text/html">
 2      <li>
 3         <div class="photo">
 4             <a href="#">
 5                 <img src="[UserImg]" /></a></div>
 6         <p>
 7             <a href="#">[UserName]：</a><span class="time">[CreateDate]</span></p>
 8         <div class="clear">
 9         </div>
10     </li>
11     </script>

 1 <div id="comment_ul_2">
 2     </div>
 3     <input type="button" id="addFun" value="click me" />
 4     <script type="text/javascript">
 5         var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
 6         $("#addFun").click(function () {
 7             var html = document.getElementById("commentTemplate").innerHTML;
 8             var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
 9             $("#comment_ul_2").append(source);
10         });
11 
12         var zzl = "name:[name]";
13         zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
14         alert(zzl);
15 
16     </script>

OK，这个意思是说，当你单击按钮时，可以把commentTemplate的内容追到comment_ul_2里，这很有意思吧，呵呵！

而其中有一个replace，也很有意思，向在替换时，可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！

真的很有意思！