原创 TypeScript基礎知識總結

目錄一、什麼是TypeScript?二、TypeScript基礎1. TypeScript的安裝2. 數據類型3. 類型斷言(Type Assertion)4. 函數5. 接口(interface)6. 類(class)7. 對象

原创 Vue組件交互之bus模式

目錄一、bus模式簡介1. bus簡例2. 爲什麼需要bus?二、bus的應用1. bus原理2. bus的使用總結 一、bus模式簡介 1. bus簡例 bus是一種通過事件實現組件交互的通信模式,它藉助一個額外的Vue實例作爲

原创 js基礎之事件捕獲與冒泡原理

想要了解什麼是事件捕獲與冒泡,需要先了解什麼是事件。 什麼是事件? 我們知道,在前端開發中,JavaScript負責定義網頁的“行爲”。這裏所說的“定義”,其實指的是開發者可以通過JavaScript語言向瀏覽器描述一些規則,瀏覽

原创 前端技術分享之3/8女神節抽獎活動

一、活動背景 作爲一家團隊文化氛圍濃厚的公司,每年的3/8女神節活動那是必不可少的。 一般來說,這樣的活動想要收到足夠的效果,那高密度的人員聚集是必不可少的(比如去年就組織了大型送玫瑰花活動加現場抽獎)。奈何今年正是疫情期間,這種

原创 前端異步方案之Promise(附實現代碼)

一、基本原理 一個Promise對象可以理解爲這樣一個狀態機,它(通常)接收一個異步任務作爲輸入,然後去執行這個異步任務,根據異步任務的執行結果來改變自身的狀態,並保留這個執行結果 。 這個狀態機總共有三種狀態:pending(異

原创 ES6之Symbol詳解

目錄一、什麼是Symbol?二、Symbol的作用三、Symbol的語法規範1. 基本語法2. Symbol屬性的遍歷3. Symbol.for(),Symbol.keyFor()四、內置的Symbol值1. Symbol.has

原创 JavaScript的函數式特性

前言 作爲一門面向對象的語言,JavaScript本身卻具有明顯的函數式語言特徵。而這也是很多JavaScript的支持者鍾愛它的原因之一 – 函數式特性爲這門語言帶來了極大的靈活性。高階函數、偏函數、函數柯里化、閉包這些概念都不

原创 讓讀寫文檔變得更簡單 - Markdown

目錄一、Markdown簡介二、Markdown常見語法1. 標題2. 段落和文本3. 列表4. 區塊5. 代碼塊6. 超鏈接7. 圖片8. 表格9. 其他總結 一、Markdown簡介 如果你使用了很久的github,卻不知道什

原创 引入第三方圖標庫,並在前臺羅列圖標

目前在項目中引入一個第三方矢量圖標庫已經成爲了非常常見的需求。這是因爲矢量圖不僅體積小,而且在放大時不會失真,顏色也可以輕鬆修改。相比於傳統的方式去加載大量的圖片(假設你沒有用“雪碧圖”組合圖片),它還可以節省很多次http請求,

原创 js基礎之探祕Array的原型方法

如果現在需要用js生成[0, 2, 4, 6, 8, …, 100]這樣一個數組,你第一時間想到的會是下面的寫法嗎? var arr = new Array(51); //使用臨時變量保存數組長度,可以有效避免每次循環都計算數組長

原创 el-upload上傳文件時返回的字符串異常

問題描述 在使用element-ui的文件上傳插件進行資源上傳時,後端所返回的數據是一個形如“3297799991516386308”的字符串,也就是資源id。 但是在on-success回調函數中得到的response卻是329

原创 web存儲詳解(cookie、sessionStorage、localStorage、indexedDB)

目錄一、web存儲概念簡介1. 什麼是web存儲?2. 爲什麼需要web存儲?二、web存儲詳解1. cookie2. sessionStorage和localStorage(1). 相同點(2). 不同點3. indexedDB

原创 js基礎之模塊化規範:CommonJS、AMD、CMD、ES6

目錄一、什麼是模塊化?二、前端模塊化規範詳解1. CommonJS(1)基本用法(2)運行機制2. AMD3. CMD4. ES6的模塊規範(1)基本用法(2)export命令(3)import命令三、其他規範1. UMD規範2.

原创 正則表達式(應用篇)

目錄一、正則表達式的困境二、書寫正確的表達式三、如何讓表達式更優雅四、正則表達式的“回溯陷阱”總結 一、正則表達式的困境 如果你對正則表達式的基本用法還不瞭解,請先移步正則表達式(基礎篇)。 現在我假設你已經掌握了正則表達式的基本

原创 vue-router基本概念總結

目錄一、vue-router是什麼?二、基本用法1. 起步2. 動態路由3. 嵌套路由4. 命名路由5. 命名視圖6. 重定向和別名7. 路由傳參8. History模式總結 一、vue-router是什麼? 要搞明白這個問題,你