jquery完成静态页面include

2024年2月7日 115次阅读 来源: MuBai

最近在写一套前端页面，发明每一个页面都复制一遍大众头、尾，异常不方便。因而就想可否也像PHP模板引擎一样，运用include引入大众文件，这便是接下来这段代码的意义。
我们先来总结一下需求：

1.能够像运用函数一样来运用include.
2.能够在页面中任何地方运用，在哪挪用就文件插进去到页面中哪一个位置。
3.能够加载恣意的静态文件，也就是说我们愿望能够将要加载的文件名称传给这个函数

接下来，我们来讲下每条需求对应的处理思绪：

1.怎样像函数一样来运用呢？
    1> 写个大众函数，每一个页面都加上。
    2> 关于jquery来讲，我们能够写成个插件。
    在这里呢，我们挑选了第2种，缘由你懂的……
2.关于插进去位置，这个应该是最不好办的了，你可能用说有啥不好办的，弄个div，放里边呗！
  然则，为了用这个函数我们须要写个script标签，假如再用个div占位会异常乱。
  因而我们想，假如能用script定位就好了。能吗？答案当然是一定的。
3.至于加载恣意文件，传个参数就好了。

末了，我们把写好的插件代码放上，运用前一定要先引入jquery.

JS — jquery.include.js

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

        return 0;
    }
});

HTML — index.html

<!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>
    原文作者：MuBai
    原文地址: https://segmentfault.com/a/1190000013254088
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞