js模版使用

一、簡單示例

<script type="text/html" id="javascript_template">
  <div onclick="_dom()">
    <ul id="wrap">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
  </div>
</script>

1.在頁面渲染的時候，瀏覽器不會讀取script標簽中的html代碼，又不在頁面上顯示

2.外面不能獲取到里面的div節點

       在使用時，要在script標簽上加個ID可以供我們找到它，即然做模版用，且里面的html代碼不會被渲染讀取，則需在外面再新建一個div來當容器，裝下這些html代碼，

       即我們可以通過 
                             var _html=document.getElementById('javascript_template').innerHTML;

                             document.getElementsByTagName('div')[0].innerHTML=_html;

      然后我們模版里的htmll代碼就可以運行在頁面中了;

如果遇到html代碼加入外部div后，獲取不到節點的情況，可以在外部寫個函數，然后在html內部用行內調用 onclick="_dom()"

function _dom() {  document.getElementById('wrap') ;}

二、json應用

模板代碼

<script id="commentTemplate" type="text/html">
     <li>
        <div class="photo">
            <a href="#">
                <img src="[UserImg]" /></a></div>
        <p>
            <a href="#">[UserName]：</a><span class="time">[CreateDate]</span></p>
        <div class="clear">
        </div>
    </li>
    </script>

腳本代碼

<div id="comment_ul_2">
    </div>
    <input type="button" id="addFun" value="click me" />
    <script type="text/javascript">
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分別用於指定區分大小寫的匹配、全局匹配和多行匹配。
        $("#addFun").click(function () {
            var html = document.getElementById("commentTemplate").innerHTML;
            var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
            $("#comment_ul_2").append(source);
        });

        var zzl = "name:[name]";
        zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
        alert(zzl);

    </script>

當你單擊按鈕時，可以把commentTemplate的內容追到comment_ul_2里，

而其中有一個replace，在替換時可以接受一個json字符串，然后根據json的key來對比js模塊里的key，進行賦值！

 

來自：

http://www.cnblogs.com/MrZouJian/p/5614581.html

http://www.cnblogs.com/lori/archive/2012/08/31/2665802.html