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: "alan@test.com", member_since: "Mar 25, 2011" }, { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" }, { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" }, { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" }, { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" } ] }; $('#list').html(template(data)); }); </script>