快捷導(dǎo)航

在多個(gè)頁(yè)面使用同一個(gè)HTML片段的代碼

更新時(shí)間：2011年03月04日 00:36:55 作者：

有一個(gè)比較復(fù)雜的HTML片段(A)，如果把這個(gè)HTML片段嵌入到其他頁(yè)面中（B,C,D....）。問(wèn)題的關(guān)鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說(shuō)分頁(yè)，點(diǎn)擊事件響應(yīng)等。

問(wèn)題描述
有一個(gè)比較復(fù)雜的HTML片段(A)，如果把這個(gè)HTML片段嵌入到其他頁(yè)面中（B,C,D....）。
問(wèn)題的關(guān)鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說(shuō)分頁(yè)，點(diǎn)擊事件響應(yīng)等。

對(duì)于這個(gè)問(wèn)題，我們用一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明：
“頁(yè)面上有一個(gè)按鈕，點(diǎn)擊此按鈕引入一個(gè)HTML片段，此HTML片段中有分頁(yè)按鈕?！?

1. 使用IFrame
主頁(yè)面，點(diǎn)擊一個(gè)按鈕向頁(yè)面引入一個(gè)IFrame：

復(fù)制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html('<iframe src="iframe.htm"></iframe>');
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    IFrame頁(yè)面，模擬分頁(yè)的情況： 
    <script type="text/javascript">
        $(function() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        });
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">
            Page Content</div>
    </div>

2. AJAX返回頁(yè)面片段，并注冊(cè)事件
注：我們通過(guò)textarea來(lái)模擬返回的HTML片段。

復(fù)制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
                var parent = $("#complex_page_segment");
                $(".previous", parent).click(function() {
                    $(".content", parent).html("Previous Page Content");
                });
                $(".next", parent).click(function() {
                    $(".content", parent).html("Next Page Content");
                });
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

由于我們需要在多個(gè)頁(yè)面引用同一個(gè)HTML片段，這種方法導(dǎo)致大量事情處理被重復(fù)性的拷貝粘貼，明顯我們需要將公共的方法提取出來(lái)。

3. AJAX返回頁(yè)面片段，并調(diào)用頁(yè)面片段中的函數(shù)注冊(cè)事件

復(fù)制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
                init_complex_page_segment();
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <script type="text/javascript">
        function init_complex_page_segment() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        }
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

其實(shí)我們可以更進(jìn)一步，完全沒(méi)必要手工調(diào)用這個(gè)函數(shù)，而是可以在返回的HTML片段中讓其自動(dòng)執(zhí)行。

4. AJAX返回頁(yè)面片段，其事件自動(dòng)注冊(cè)

復(fù)制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <script type="text/javascript">
        $(function() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        });
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>