js script type 部分属性值分析

Posted 2020-09-07 Z&K

1. text/javascript：

    （1）<script type="text/javascript" src="Js/jquery-1.10.2.min.js"></script> ---引用外部js

    （2）编码js代码

2.text/template&&text/html

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

3.type="text/x-handlebars-template"

 

        <div id="list">

        </div>
        <script type="text/javascript" src="Js/handlebars.js"></script>
        <script id="people-template" type="text/x-handlebars-template">
            {{#people}}
        <div class="person">
            <h2>{{first_name}} {{last_name}}</h2>
            <div class="phone">{{phone}}</div>
            <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
            <div class="since">User since {{member_since}}</div>
        </div>
            {{/people}}
        </script>
        <script type="text/javascript">
            $(document).ready(function () {

                // compile our template
                var template = Handlebars.compile($("#people-template").html());

                var data = {
                    people: [
                      { first_name: "rui", last_name: "fengyun", phone: "1234567890", email: "[email protected]", member_since: "Mar 25, 2011" },
                      { first_name: "Allison", last_name: "House", phone: "0987654321", email: "[email protected]", member_since: "Jan 13, 2011" },
                      { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "[email protected]", member_since: "Apr 9, 2009" },
                      { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "[email protected]", member_since: "May 21, 2010" },
                      { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "[email protected]", member_since: "Nov 1, 2008" }
                    ]
                };

                $(‘#list‘).html(template(data));
            });
        </script>