成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

pepperwang / 1720人閱讀

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

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

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

接下來，我們來說下每條需求對應(yīng)的解決思路：

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107388.html

相關(guān)文章

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

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

    darkbug 評論0 收藏0

  • Django搭建個人博客：使用 Bootstrap 4 改寫模板文件

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

    lolomaco 評論0 收藏0

  • Webpack

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

    diabloneo 評論0 收藏0

  • [ 前端實習(xí)日記 ] 構(gòu)建靜態(tài)頁面基礎(chǔ)架構(gòu)

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

    lidashuang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<