原创 vue項目中畫出優雅的線條(虛線、直線、折線、帶箭頭、流動效果等)

需求:運行監控圖模塊,模塊之間用虛線或者實線連接,且帶有箭頭 實現方法: 1、canvas繪製 2、echarts專業的表格軟件(畫帶箭頭的虛線有難度) 3、svg方法 4、leader-line插件 5、背景圖    剛開始項目比較緊

原创 幾個javascript代碼相關的簡潔優化方法

1、條件判斷Array.includes() 這是業務中最常見的情景之一 看代碼: function isOk(color) { if(color=== 'red' || color === 'yellow') {

原创 文件預覽或下載中,axios設置responseType:blob時對於後臺報錯信息的捕獲兼容

項目中難免會遇到預覽文件或者下載文件的場景,如果後臺返回的是base64或者圖片格式還好說,文件信息直接放在返回body裏,作爲對象屬性給到前端,很直觀,也方便取用。 但後臺給到的是文件流就要麻煩一些了,一般來說文件流會直接凡在res.d

原创 vue-extend和vue-component註冊一個全局組件

extend()是一個全局構造器,生成的是一個還沒掛載到頁面元素上的組件實例。 在全局掛載插件的形式全局註冊,就需要用到vue.use()方法,官方文檔: 所以插件必須是一個對象,並且提供install方法,註冊的時候自動調用該方法。

原创 vue根據權限動態渲染按鈕、組件等的函數式組件實現方式

前端工作中對於權限的需求是難免的,最近項目中就有這樣的需求了。 後臺管理員可以新增前臺成員,不通的成員具有不同的權限,有權限的人員可以看到一些操作按鈕或者數據列表,反之則看不到。 那麼也就是說,前端需要根據登錄用戶的權限來渲染指定的dom

原创 vue中二次封裝axios請求,支持url參數拼接、blob數據流和formdata上傳等

現在vue項目基本上都是使用axios進行請求操作,但是axios有時候並不能完全滿足業務的需求,因爲官方axios只支持一些比較規則的請求參數和方式,比如body類型的post,params類型的get。 而實際業務中後臺給的接口可不會

原创 移動端H5下載文件

前段時間遇到一個需求,需要在H5頁面中增加下載文件按鈕,下載一個壓縮文件,第一個想到的當然是最普遍和常用的方法:動態生成a標籤,把鏈接地址給到href屬性,觸發一個click事件,完美下載。於是擼起袖子就開幹。 由於文件數據是通過接口請求

原创 瀏覽器原理學習--如何保證頁面文件能被完整地送達瀏覽器

在前後端交互過程中,前端頁面所需要的一些頁面信息是通過瀏覽器和後臺服務器之間建立的TCP連接傳輸的。TCP連接就好比實實在在的運輸通道,好比基礎的交通設施,好比道路和橋樑,網絡數據就在這些道路上運輸,到達指定的目的地。 數據的運輸之前,雙

原创 H5項目中有滾動元素,ios系統拖動默認行爲和滾動事件衝突解決

問題:h5頁面,在ios系統中,拖動頂部固定元素(紅色區域)時,會默認拖動整個瀏覽器,導致出現白色背景,影響到自定義的滾動事件(橙色區域),因爲自定義滾動是用了ui框架的,會導致其短暫的無法滾動,必須要等整個頁面停穩了才能滾動橙色區域,影

原创 瀏覽器原理學習--Chrome架構略談

“js是一門單線程的語言”。這是初級前端都知道的一個最基本的知識點,雖然看起來平淡無奇的一個知識點,但以此爲入口就會學到更多的知識點 首先解釋一下爲什麼js會被設計成單線程:這主要還是由於js是運行的環境和功能所決定的。js是運行在瀏覽器

原创 vue項目中動態創建模塊以滿足客戶定製化需求的解決方案

前端項目中很多時候會遇到這樣的業務需求: 所有的客戶都有共同的一些業務需求,即基礎需求 基礎需求需要根據業務發展進行升級 在共同需求的基礎上,每個客戶又有不同的需求(客製化) 如果只是一兩個客戶還好,在基礎版本上分兩份前端文件,分別維護。

原创 element-ui中select下拉框加載大數據渲染優化

現在的前端項目中對於element-ui的使用幾乎已經是一個常規動作了,但是組件庫中的ui組件不一定都能滿足實際場景的需求,比如今天要講的select下拉框選擇組件。 我們公司是做證券行業基礎設施的,股票和證券的數量動不動就是上千,當使用

原创 vue項目中畫出優雅的線條

需求:運行監控圖模塊,模塊之間用虛線或者實線連接,且帶有箭頭 實現方法: 1、canvas繪製 2、echarts專業的表格軟件(畫帶箭頭的虛線有難度) 3、svg方法 4、leader-line插件 5、背景圖    剛開始項目比較緊

原创 js線程和事件循環原理

先看一個案例: console.log(1) setTimeout(() => { console.log(2) new Promise((resolve) => { console.log(3)

原创 for...in和for...of的區別和使用場景

這還要從一道面試題說起,請問下面兩種情況分別打印什麼: let arr = [1,2,3,4,5] for(let i in arr) { console.log(i) // 0,1,2,3,4 } for(let i of