jquery實現靜態頁面include

時間 2019-11-16

原文原文鏈接

最近在寫一套前端頁面，發現每一個頁面都複製一遍公共頭、尾，十分不方便。因而就想可否也像PHP模板引擎同樣，使用include引入公共文件，這即是接下來這段代碼的意義。
咱們先來總結一下需求：javascript

1.能夠像使用函數同樣來使用include.
2.能夠在頁面中任何地方使用，在哪調用就文件插入到頁面中哪一個位置。
3.能夠加載任意的靜態文件，也就是說咱們但願能夠將要加載的文件名稱傳給這個函數

接下來，咱們來講下每條需求對應的解決思路：html

1.如何像函數同樣來使用呢？
    1> 寫個公共函數，每一個頁面都加上。
    2> 對於jquery來講，咱們能夠寫成個插件。
    在這裏呢，咱們選擇了第2種，緣由你懂的……
2.對於插入位置，這個應該是最很差辦的了，你可能用說有啥很差辦的，弄個div，放裏邊唄！
  可是，爲了用這個函數咱們須要寫個script標籤，若是再用個div佔位會很是亂。
  因而咱們想，若是能用script定位就行了。能嗎？答案固然是確定的。
3.至於加載任意文件，傳個參數就行了。

最後，咱們把寫好的插件代碼放上，使用前必定要先引入jquery.前端

JS -- jquery.include.jsjava

jQuery.fn.extend({
    include: function (path) {
        var _this = $(this);
        
        $.get(path, function (html) {
            _this.replaceWith(html);
        });

        return 0;
    }
});

HTML -- index.htmljquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.incloud.js"></script>
</head>
<body>

<script type="text/javascript" id="Header">
    $("#Header").include("inc_header.html");
</script>


</body>
</html>