原创 經典十大算法的JS實現
以下JS代碼均以實現從小到大的升序排列爲例，如若改爲降序，請自行修改。本文算法描述部分來源於十大經典排序算法，該篇文本還有動圖演示。 1冒泡排序： 冒泡排序是一種簡單的排序算法。它重複地走訪過要排序的數列，一
2020-07-05 19:16:58
1
原创 可左右滑動的柱狀圖（數據區域可平移，縮放，基於echarts）
柱狀圖是數據可視化需求中的一種常見圖表形式，當數據量大的時候，我們還會期望柱狀圖可以左右滑動。這裏可以通過配置echarts的柱狀圖和數據區域縮放組件dataZoom來完成我們的需求。下面是完成後的效果動態圖(鼠標移入柱條即出現提
2020-07-05 19:16:48
1
原创 event loop 精講（js 事件循環）
先讓我們來大體上認識一下event loop 的過程（下方圖片轉引自Philip Roberts的演講《Help, I'm stuck in an event-loop》） 其中堆（heap）和棧(stack)
2020-07-05 19:16:48
原创 峯谷圖配置（面積圖， 基於echarts）
峯谷圖或面積圖也是數據可視化圖表的一種常見類型。這個配置比較簡單，下面就以一個銷量峯谷圖爲例直接放效果圖和代碼了。下面是最終實現的效果動態圖，提示框會跟隨鼠標移動而確定位置： 爲了有更好的適用性，這裏把繪製峯谷圖的操
2020-07-05 19:16:48
原创 真正走進計算屬性computed的世界
在vue中，談到計算屬性的時候免不了和函數進行比較，他們的區別在於計算屬性通過響應式依賴進行緩存，當頁面觸發重新渲染的時候，計算屬性會直接返回緩存的值而不會重新計算，而函數的話會重新執行。我們看一下下方的動圖和例子就一目瞭
2020-07-05 19:16:48
原创 真正走進v-if和v-show的世界（與img的前世今生）
這是再談系列的第二篇文章，講的是v-if和v-show作用於加載網絡圖片的img標籤之間的區別。衆所周知，v-if 作用的標籤是真正的條件渲染，具有惰性，只有當條件爲真值的時候會渲染標籤，在條件切換的過程中，標籤會重新渲染
2020-07-05 19:16:48
原创 vue cli4 配置alias 和 providePlugin
對於一些高頻次的複雜路徑模塊導入我們往往會對這個路徑設置一個別名，就像vue中的@代表着src一樣。同理，對於一些公共的變量或者方法，爲了簡化調用我們往往會通過providePlugin將他們設置成全局變量或者方法。 首先
2020-07-05 19:16:48
原创 vue cli4 bundle分割（單獨打包第三方庫文件,配置splitChunks）
項目中的第三方庫默認會被打包到一個文件名含vendors的bundle中，如果你的項目裏面引用的第三方庫過多，那麼你的vendors就會很臃腫，文件也會變大，網站加載該文件的時候就越耗時，從而影響網站性能。這個時候我們可以考慮把一
2020-07-05 19:16:48
原创 proxy攔截對象方法（讓apply,call傳入的this失效）
有時候我們期望一個對象的方法中的this永遠指向他自身而不會被call和apply所傳入的this所影響，這個時候我們就可以使用proxy在對象中架設一層攔截，這裏我們需要攔截get操作。因爲proxy中只提供了普通方法的攔截（
2020-07-05 19:16:48
原创 不重疊且分佈均勻的氣泡圖解決方案（基於echarts）
氣泡圖是數據可視化需求中的一種常見圖表形式。然而截至目前，像echarts，d3，higncharts都還沒有直接提供一個配置來完成不重疊且分佈均勻的氣泡圖這項工作。幸運的是，我們可以通過配置echart的關係圖來完成我們的氣
2020-07-05 19:16:48
原创 從零開始用jenkins自動化部署Vue項目（包括域名配置，服務器部署等等）
幾個月前筆者從個人項目搭建，購買服務器，備案，nginx配置到pm2進程管理，最後用jenkins完成了項目的自動化構建發佈。今天阿里雲發來消息要在網站首頁底部中間添加備案號，纔再一次用到了之前的成果。特以此文，記錄幾個月
2020-07-05 19:16:48
原创 nginx啓用gzip（提升網站性能）
nginx服務器啓用gzip可以對客戶端請求的資源進行壓縮，從而減少帶寬和文件下載時間，提升網站加載速度。nginx關於gzip的配置內容如下： # 開啓gzip gzip on; # 允許壓縮文件的最小
2020-07-05 19:16:48
原创 vue 配置多入口項目（cli 版本4.1.2）
每個入口一般會有自己的html, main入口文件和內容模板。按照這個思路，我們先建立一個pages文件夾用來存放每個入口相關的文件。文件目錄結構如下所示： 這裏我們有alpha和beta兩個入口，其中他們的html放
2020-07-05 19:16:48
原创 SplitChunksPlugin拆分規則（cli4 實測）
熟悉拆分規則才能避免誤用SplitChunksPlugin並將chunks的拆分效益最大化。講這個之前，我們先看一下SplitChunksPlugin的默認配置： module.exports = { //...
2020-07-05 19:16:48
原创 仿vue實現數據雙向綁定
前段時間筆者學習了一下Vue的源碼，也看了一些前輩對Vue源碼研究的博客，然後用es實現了一個基礎的數據雙向綁定框架Hue，作爲學習成果之一，在此分享給大家。Hue實現了@click，v-model， watch監聽屬性變
2020-07-05 19:16:48
1