1. 程式人生 > >【工作細節記錄】維護項目中前端JS組件丟失後,應如何維護開發之啟發

【工作細節記錄】維護項目中前端JS組件丟失後,應如何維護開發之啟發

文章 留言 src 功能 git 開發者 中一 document json

事因:

  我所維護的項目為舊項目,接手項目後並沒有什麽開發文檔留下,導致很多時候一出現問題就需要自己去研究整個過程。

項目中一直使用一個"$.download()"的方法進行文件下載。後續出現很奇怪的情況,我將原本項目的js都引用到新的項目中去,

可是在我的環境中無法成功執行,在另一位同事的環境下卻可以正常執行。(若看到此文章的大神能提供一些比較好的解決

方式給我亦可以留言,十分感謝!)

小白之一些維護開發想法:

  倘若原本的方法,作為一個開發者的你,並不了解究竟有多少處使用。很多開發者都會自己重寫這個方法支持原本調用。

考慮到現在的項目僅幾處使用。均改使用form提交,實現下載功能。

以下轉載 :https://www.cnblogs.com/hamsterPP/p/6763458.html

實現過程:

已知一個下載文件的後端接口,前端如何請求該接口,實現點擊按鈕、下載文件到本地。

【體驗非常不好】方法一:window.open("下載文件的後端接口");

*html結構*

<button type="button" id="btn1">下載一個zip(方法1)</button>
<button type="button" id="btn2">下載一個zip(方法2)</button>

/*js部分*/

技術分享圖片
var $eleBtn1 = $("#btn1");
        var $eleBtn2 = $("#btn2");

        //已知一個下載文件的後端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master
        //方法一:window.open()
        $eleBtn1.click(function(){
            window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
        });
技術分享圖片

然而有個問題:瀏覽器會打開一個新窗口,然後迅速自動關閉,體驗非常不好。

方法二:通過form提交

由於ajax函數的返回類型只有xml、text、json、html等類型,沒有“流”類型,所以通過ajax去請求該接口是無法下載文件的,所以我們創建一個新的form元素來請求接口。

/*js部分*/

技術分享圖片
//方法二:通過form
        $eleBtn2.click(function(){
            var $eleForm = $("<form method=‘get‘></form>");

            $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");

            $(document.body).append($eleForm);

            //提交表單,實現下載
            $eleForm.submit();
        });
技術分享圖片

【工作細節記錄】維護項目中前端JS組件丟失後,應如何維護開發之啟發