jquery实现静态页面include

darkbug 发布于2019-08-01 18:34 / 2173人阅读

摘要：最近在写一套前端页面，发现每个页面都复制一遍公共头尾，十分不方便。可以加载任意的静态文件，也就是说我们希望可以将要加载的文件名称传给这个函数接下来，我们来说下每条需求对应的解决思路如何像函数一样来使用呢写个公共函数，每个页面都加上。

最近在写一套前端页面，发现每个页面都复制一遍公共头、尾，十分不方便。于是就想能否也像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




    
    Title

云服务器 GPU云服务器 php实现静态页面话静态include 静态页面动静态页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51832.html

jquery实现静态页面include

摘要：最近在写一套前端页面，发现每个页面都复制一遍公共头尾，十分不方便。可以加载任意的静态文件，也就是说我们希望可以将要加载的文件名称传给这个函数接下来，我们来说下每条需求对应的解决思路如何像函数一样来使用呢写个公共函数，每个页面都加上。最近在写一套前端页面，发现每个页面都复制一遍公共头、尾，十分不方便。于是就想能否也像PHP模板引擎一样，使用include引入公共文件，这便是接下来这段代...

pepperwang 2019-08-26 11:42 评论0 收藏0
Django搭建个人博客：使用 Bootstrap 4 改写模板文件

上一章我们的网站页面实在太粗糙，你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量，改写一个大气的博客。配置Bootstrap 4 Bootstrap是用于网站开发的开源前端框架（前端指的是展现给最终用户的界面），它提供字体排印、窗体、按钮、导航及其他各种组件，旨在使动态网页和Web应用的开发更加容易。 Bootstrap有几个版本都比较流行，我们选择最新版本的Boots...

lolomaco 2019-07-30 17:53 评论0 收藏0
Webpack

摘要：简介是一款加载器兼容打包工具。所有的静态资源都可以是模块引用，而不仅仅是文件了。便捷开发，能够替代部分的的工作。扩展性强，插件机制完善。核心概念一个可执行模块或库的入口文件。插件，用于扩展的功能，在构建生命周期的节点上加入扩展为加入功能。简介 WebPack是一款加载器兼容打包工具。可以处理各种资源：JS(JSX),coffee，less/sass，图片等。静态资源打包工具出色的前端...

diabloneo 2019-08-20 10:21 评论0 收藏0
[ 前端实习日记 ] 构建静态页面基础架构

以前我们敲静态页面都是写好html，css, js，然后再去刷新浏览器，艾尼马又不行，有重新写过再刷新，一个页面下来按chrl+r的次数可让你的键盘多活好几天，要不会刷新快捷按钮那不得手残了都。后来，grunt,gulp等工具应运而生，当然它们不止这个功能，但却很好地减轻了我们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是个人的目前在用的不成熟的方案，更专业的还请参考...

lidashuang 2019-08-21 10:35 评论0 收藏0