jquery實現靜態頁面include

darkbug 發布于2019-08-01 18:34 / 2194人閱讀

摘要：最近在寫一套前端頁面，發現每個頁面都復制一遍公共頭尾，十分不方便。可以加載任意的靜態文件，也就是說我們希望可以將要加載的文件名稱傳給這個函數接下來，我們來說下每條需求對應的解決思路如何像函數一樣來使用呢寫個公共函數，每個頁面都加上。

最近在寫一套前端頁面，發現每個頁面都復制一遍公共頭、尾，十分不方便。于是就想能否也像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 靜態頁面動靜態頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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