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>