原创 如何在vue中封裝一個高適用性、高擴展性的echarts

武漢解封,又是一年春好色! 不管有事沒事,我總喜歡把公司的項目拿出來da東看看,西點點,或許我是做測試的命吧。今天發現了一個問題,談不上bug,但是體驗不好。下面先上圖,看看問題所在,(敏感數據已做處理) 全屏下是這個樣子的,中規中矩,看

原创 vuex常用設計套路

由於時間太晚了,我早已是睡眼朦朧,不多說了,直接上代碼。 大家都知道vuex的state、getters、mutations、actions吧,不知道的也沒關係,官網走一波。 先看整體目錄結構: 下面我們來看看每個文件中是怎麼操作的:

原创 MySQL輕快入門

今天是3月7日,女生節,在此先祝各位廣大女性同志節日快樂。 今天清理桌面,找到了一份MySQL的入門筆記,趁着今天清閒,我就把它倒騰過來,順便複習複習,畢竟很久沒碰過數據庫了。 下面直接進入正題: 1、入門須知: 客戶端的概念:我們存取數

原创 Js之動畫的最佳實現requestAnimationFrame

在講解這個API之前,我們先來了解一些基礎知識: 屏幕刷新頻率:屏幕每秒出現圖像的次數。普通筆記本爲60Hz。1000 / 60 ≈16.67 ,所以計算機每16.7ms刷新一次,由於人眼的視覺停留,所以看起來是流暢的移動。 setTim

原创 Vue Router如何設計一個高擴展性的路由

我們在使用Vue做項目開發的時候,路由這一塊肯定是少不了的。我們是否真正去考慮過、設計過如何才能整一個漂亮的、高擴展性的路由。 可能很多開發者不以爲然,認爲路由嘛,不久是那麼回事嘛,直接開擼就完事了,如果後期有什麼需求,加什麼頁面,再隨便

原创 JS判斷圖片是否加載完成

我們經常需要獲取圖片的寬高,這需要在圖片加載完成後纔可以。 下面我就介紹幾種判斷圖片是否加載完成的方法: 首先我們先寫一個img標籤 <img src="./img.png" alt=""> 1.complete屬性: var img

原创 事件代理(事件委託)

事件代理,又稱之爲事件委託,是JS中綁定事件的常用技巧,顧名思義,事件代理就是把原本需要綁定在子元素上的事件委託給父元素,事件代理的原理是冒泡機制。 下面我來舉個例子: 先寫出頁面上的HTML結構 <button id="btn">添加

原创 JS延遲加載的方式有哪些

JS延遲加載,也就是等頁面加載完成之後再加載 JavaScript 文件,有助於提高頁面的加載速度。 1.defer 屬性: 等於告訴瀏覽器立即下載,但延遲執行(腳本會被延遲到整個頁面都解析完畢之後再執行。),即使<script>元素放在

原创 如何讓低版本瀏覽器支持HTML5

HTML5能爲我們做的事兒很多,最爲可口的就是語義化標籤的應用,但遺憾的是低版本IE不支持HTML5,下面我們就一起來解決這個問題。 通過JavaScript語句document.createElement("xxx")的方式來解決這個問

原创 清除浮動的幾種方式

原本七天的假期,就想着不用帶電腦,在老家帶一點吃的過來,誰曾想到由於疫情的影響,在老家呆了足足二十多天。我承認手癢了想寫代碼了,由於最近打算換個工作,就找了一些面試題來刷一刷,希望下一份工作能夠滿意。 好了,話不多說,開始今天的內容。我們

原创 webpack之解析ES6

1.首先安裝 cnpm i @babel/core @babel/preset-env babel-loader -D 2.然後在項目根目錄下創建一個.babelrc文件 3.在.babelrc下增加babel preset配置 {

原创 迴流和重繪

瀏覽器渲染過程: 在頁面加載時,瀏覽器把獲取到的HTML代碼解析成1個DOM樹,DOM樹裏包含了所有HTML標籤,包括display:none隱藏,還有用JS動態添加的元素等。 瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結

原创 prop、event、slot簡介

組件的構成 一個再複雜的組件,都是由三部分組成的:prop、event、slot,它們構成了 Vue.js 組件的 API。如果你開發的是一個通用組件,那一定要事先設計好這三部分,因爲組件一旦發佈,後面再修改 API 就很困難了,使用者都

原创 js中繼承(拷貝)的幾種常用方法

尋尋覓覓,尋尋覓覓,你終於找到了這兒。話不多說,直接開擼,我們先從最簡單的淺拷貝開始 淺拷貝: 這裏關於淺拷貝,我總結了三種方法,我們先來定義兩個對象 var person={ name:"cj", age:'22',

原创 TypeScript中的接口

介紹: TypeScript的核心原則之一是對值所具有的結構進行類型檢查。它有時被稱做“鴨式辨型法”或“結構性子類型化”。在TypeScript裏,接口的作用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。 對象類型的接口: 通過關鍵