jquery實現(xiàn)靜態(tài)頁面include

darkbug 發(fā)布于2019-08-01 18:34 / 2203人閱讀

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

最近在寫一套前端頁面，發(fā)現(xiàn)每個頁面都復制一遍公共頭、尾，十分不方便。于是就想能否也像PHP模板引擎一樣，使用include引入公共文件，這便是接下來這段代碼的意義。
我們先來總結一下需求：

1.可以像使用函數(shù)一樣來使用include.
2.可以在頁面中任何地方使用，在哪調用就文件插入到頁面中哪個位置。
3.可以加載任意的靜態(tài)文件，也就是說我們希望可以將要加載的文件名稱傳給這個函數(shù)

接下來，我們來說下每條需求對應的解決思路：

1.如何像函數(shù)一樣來使用呢？
    1> 寫個公共函數(shù)，每個頁面都加上。
    2> 對于jquery來說，我們可以寫成個插件。
    在這里呢，我們選擇了第2種，原因你懂的……
2.對于插入位置，這個應該是最不好辦的了，你可能用說有啥不好辦的，弄個div，放里邊唄！
  但是，為了用這個函數(shù)我們需要寫個script標簽，如果再用個div占位會非常亂。
  于是我們想，如果能用script定位就好了。能嗎？答案當然是肯定的。
3.至于加載任意文件，傳個參數(shù)就好了。

最后，我們把寫好的插件代碼放上，使用前一定要先引入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實現(xiàn)靜態(tài)頁面話靜態(tài)include 靜態(tài)頁面動靜態(tài)頁面

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51832.html

jquery實現(xiàn)靜態(tài)頁面include

摘要：最近在寫一套前端頁面，發(fā)現(xiàn)每個頁面都復制一遍公共頭尾，十分不方便。可以加載任意的靜態(tài)文件，也就是說我們希望可以將要加載的文件名稱傳給這個函數(shù)接下來，我們來說下每條需求對應的解決思路如何像函數(shù)一樣來使用呢寫個公共函數(shù)，每個頁面都加上。最近在寫一套前端頁面，發(fā)現(xiàn)每個頁面都復制一遍公共頭、尾，十分不方便。于是就想能否也像PHP模板引擎一樣，使用include引入公共文件，這便是接下來這段代...

pepperwang 2019-08-26 11:42 評論0 收藏0
Django搭建個人博客：使用 Bootstrap 4 改寫模板文件

上一章我們的網(wǎng)站頁面實在太粗糙，你肯定不會拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個大氣的博客。配置Bootstrap 4 Bootstrap是用于網(wǎng)站開發(fā)的開源前端框架（前端指的是展現(xiàn)給最終用戶的界面），它提供字體排印、窗體、按鈕、導航及其他各種組件，旨在使動態(tài)網(wǎng)頁和Web應用的開發(fā)更加容易。 Bootstrap有幾個版本都比較流行，我們選擇最新版本的Boots...

lolomaco 2019-07-30 17:53 評論0 收藏0
Webpack

摘要：簡介是一款加載器兼容打包工具。所有的靜態(tài)資源都可以是模塊引用，而不僅僅是文件了。便捷開發(fā)，能夠替代部分的的工作。擴展性強，插件機制完善。核心概念一個可執(zhí)行模塊或庫的入口文件。插件，用于擴展的功能，在構建生命周期的節(jié)點上加入擴展為加入功能。簡介 WebPack是一款加載器兼容打包工具。可以處理各種資源：JS(JSX),coffee，less/sass，圖片等。靜態(tài)資源打包工具出色的前端...

diabloneo 2019-08-20 10:21 評論0 收藏0
[ 前端實習日記 ] 構建靜態(tài)頁面基礎架構

以前我們敲靜態(tài)頁面都是寫好html，css, js，然后再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個頁面下來按chrl+r的次數(shù)可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。后來，grunt,gulp等工具應運而生，當然它們不止這個功能，但卻很好地減輕了我們的負擔。這篇文章介紹一些如何使用這些工具使構建頁面變得簡單高效。這只是個人的目前在用的不成熟的方案，更專業(yè)的還請參考...

lidashuang 2019-08-21 10:35 評論0 收藏0