【工作細節記錄】維護項目中前端JS組件丟失後,應如何維護開發之啟發
阿新 • • 發佈:2018-07-25
文章 留言 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組件丟失後,應如何維護開發之啟發