![](https://img-blog.csdnimg.cn/20210206033529771.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 91
前端相關知識
林cc
这个作者很懒,什么都没留下…
展开
-
Monorepo 項目管理方案:lerna + yarn workspace / pnpm
Monorepo 項目管理方案:lerna + yarn workspace / pnpm前言正文什麼是 Monorepo?Lerna安裝初始化項目創建 npm 包增加模塊依賴發布依賴包管理monorepo 實踐技術方案lerna + yarn workspace搭建環境清理環境依賴管理項目構建發布pnpmpnpm VS lerna + yarn workspace建立 monorepo workspace依賴管理配置啟動命令結語前言會寫這篇是因為這幾天開始了畢業設計的相關工作,然後跟著一個同學加入了一原创 2021-10-15 23:26:11 · 3887 阅读 · 2 评论 -
前端編譯 : Babel 基礎入門
前端編譯 : Babel 基礎入門前言正文什麼是 Babel ?Babel 模塊介紹babel-cli從項目中運行 Babel CLIbabel-registerbabel-nodebabel-core配置 Babel.babelrcbabel-preset-es2015babel-preset-react執行 Babel 生成的代碼babel-polyfillbabel-runtimepresets vs pluginsplugins 選項結語參考資料前言在寫這篇前一樣先來說說為什麼要寫這篇,也算是做原创 2021-10-08 23:53:27 · 371 阅读 · 0 评论 -
前端開發 - 淺談時間戳
前端開發 - 淺談時間戳前言正文先從 timestamp 開始談起儲存時間的標準格式JavaScript 中的時間處理getYeargetMonthgetHours日期時間需注意的地方ISO 8601 vs RFC3339時區的顯示把時間傳到後端去結語參考前言時間戳這個東西,其實一直以來我都知道有這個東西大概能幹嘛,反正就是跟時間有關的東西啦,但一直都沒有去深入的系統學習,因為實際在開發時,有關時間的一切在項目中都沒有想太多,也沒有做過多的思考和處理。直到最近在實習時,因應需求加上 mentor 的提點原创 2021-09-04 01:00:50 · 902 阅读 · 0 评论 -
Next.js 個人博客項目總結
Next.js 個人博客項目總結項目總結Next.js + Ant-design 配置項目總結關於 Next.js 博客練手項目開發部分大致上完成,所涉及到的技術棧如下:前端Next.jsReact.jsAnt designMarkdown 相關組件庫Axioscookie後端Node.jsExpressJWT數據庫Mysql關於本項目過程以及學習知識點的總結,分為本文檔以及另外三份文檔,鏈接如下:Next.js 基礎入門總結Next.js原创 2021-08-02 19:42:30 · 109 阅读 · 0 评论 -
Axios 如何取消重複請求
Axios 如何取消重複請求前言參考正文如何取消請求如何判斷重複請求如何取消重複請求定義輔助函數設置請求攔截器設置響應攔截器測試代碼 + 效果結語前言在 Web 項目的開發過程中,我們常常會遇到重複請求的場景,而如果系統不對重複的請求進行處理,是有可能導致系統出現各種問題的。比如說,如果出現重複的 POST 請求就有可能導致服務端產生兩筆相同的紀錄,也就是一種冗余。那到底重複請求是怎麼產生的呢?這邊舉個例子感覺一下:假設頁面中有一個 button,用戶點擊之後會發出一個 Ajax 請求。如果沒有對該原创 2021-04-30 11:05:48 · 419 阅读 · 4 评论 -
純前端 - 原生自定義加載動畫
純前端 - 原生自定義加載動畫參考核心原理html 代碼css 代碼Step1Step2Step3Step4Step5Step6效果展示參考參考鏈接「HTML+CSS」–自定义加载动画【007】https://cloud.tencent.com/developer/article/1811548CSS3 animation(动画) 属性https://www.runoob.com/cssref/css3-pr-animation.html核心原理其實這個功能相對很簡原创 2021-04-25 11:03:59 · 115 阅读 · 1 评论 -
理解虛擬 DOM 原理以及簡單實現
理解虛擬 DOM 原理以及簡單實現前言參考正文什麼是 VDOM為什麼操作 DOM 開銷這麼大?DOM 解析過程js 操作 DOM 的真實代價VDOM 的好處VDOM 原理與流程用 JavaScript 模擬 DOM 樹並渲染到頁面上diff 算法比較新老 DOM 得到差異對象把差異對象反映到渲染的 DOM 樹結語前言會寫這篇的原因還是因為遭受毒打hhh,當時投了騰訊前端的實習生崗位,在一面時被問到了瞭不瞭解 vdom,結果只能說不太清楚,雖然後來一面是通過了,但還是覺得自己太菜了。後來問了一個前端大老同原创 2021-04-24 14:17:14 · 415 阅读 · 8 评论 -
騰訊 CSIG 春招前端開發實習生 面經
騰訊 CSIG 春招前端開發實習生 面經前言正文一面 - 3/25 - 63min(面唄視頻)二面 3/29 - 50min(騰訊會議)三面 - 4/2 - 50min(面唄視頻)四面 - 4/8 - 45min(騰訊會議)HR面 - 4/12 - 25min(騰訊會議)結語前言本人是在大三下投的春招暑期實習,投的是前端開發的崗位,其實最想去的就是騰訊,對騰訊也比較有好感(在 BAT 中)。這篇就來記錄一下從 3/11~4/16 一多月漫長的面試過程以及感想。正文下面就來羅列下這次面試過程中被問到的原创 2021-04-18 18:27:39 · 311 阅读 · 4 评论 -
前端優化 - 防抖與節流
前端優化 - 防抖與節流從滾動條監聽的例子說起防抖(debounce)節流(throttle)通用 防抖/節流 API場景使用舉例從滾動條監聽的例子說起要理解防抖與節流,我認為就要先去了解實際的業務場景有什麼問題,從而引出這樣的需求。我們從一個常見的場景來說起,大家一定都知道很多頁面都會有滾動條,其實所謂的拖動滾動條就是一個 scroll 事件。那麼我們現在來監聽一個指標,我們來監聽瀏覽器滾動事件,並且返回當前滾動條與頂部的距離。這個需求也不難,代碼如下:function showTop() {原创 2021-04-15 21:44:42 · 127 阅读 · 0 评论 -
Ajax 原理及手動封裝
Ajax 原理及手動封裝Ajax 是什麼?實現 Ajax 思路創建 XMLHttpReqeust 對象與服務端建立連接向服務端發送數據綁定 onreadystatechange 事件屬性封裝 AjaxAjax 是什麼?首先,先來簡單的介紹下 Ajax 到底是什麼東西?Ajax 全稱是 Asynchronous JavaScript and XML,也就是異步的 JavaScript 和 XML,是一種建交互式網頁的開發技術,可以在不需要重新整個網頁的情況下與服務端交換數據,並且更新部分網頁。Ajax原创 2021-04-06 01:46:44 · 172 阅读 · 0 评论 -
前端 JavaScript 焦點事件處理
前端 JavaScript 焦點事件處理何謂聚焦?focus/blur 事件focus/blur 方法允許在任何元素上聚焦 : tabindex何謂聚焦?所謂聚焦(focus)通常是在說聚焦到一個元素上,而聚焦到一個元素上通常意味著 “準備要此處接受輸入”,所以,這正是我們可以用代碼來初始化一些我們所需的功能的時刻。失去焦點(blur)可能還更重要一些,這個事件可能發生在當用戶點擊頁面其他地方,或是跑去做別的事情等等。所以失去焦點通常意味著 “數據輸入都已經完成了”,所以我們就可以用代碼來檢查這些輸入原创 2021-03-26 03:20:12 · 1333 阅读 · 0 评论 -
關於 Vue 的生命週期與鉤子函數
理解 Vue 的生命週期前言正文Vue 生命週期概述Vue 生命週期經歷的階段 + 鉤子函數beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivated/deactivatedbeforeDestroydestroyed測試 Vue 生命週期 代碼回顧 Vue 生命週期結語前言一直以來,其實都有多多少少使用過 Vue,這個現在很火的 Web 框架,但是不知道為甚麼,總是覺得自己都在亂用,不知道自己在幹嘛。究其原因,其實還是因為學習的不原创 2021-03-23 01:50:00 · 697 阅读 · 2 评论 -
CSS3 媒體適應(media-queries)
CSS3 媒體適應前言正文CSS Media Queries 是什麼?使用語法Media 的類型頁面大小顯示品質顏色互動Media-Queries 的例子和效果ORor 應用1or 應用2ANDand 應用1and + or 應用2ONLYNOTnot 應用1結語前言大家都知道,製作網頁時常常會需要做到適配屏幕大小的需求,不能說在這部電腦上展示沒問題,換成另一部,或者說換成手機端就全部樣式都"飛掉"。其實這就是所謂的 RWD(Responsive Web Design) 響應式網頁。而在製作RWD響應式原创 2020-06-06 15:34:03 · 349 阅读 · 0 评论 -
CSS3-grid-格线布局
CSS3-grid-格線佈局前言正文grid 的基本屬性與語法grid的布局方式外部容器displaygrid-template-columns, grid-template-rowsgrid-column-gap, grid-row-gapgrid-template-areas單位內部容器grid-column, grid-row結語前言最近開始了寫博客的計畫,一方面受同學影響,一方面也是覺得該為自己的學習留下一點足跡。廢話不多說,第一篇就來談談css3的grid屬性,還請大佬們多多指教。正文gr原创 2020-06-05 16:54:02 · 759 阅读 · 0 评论 -
關於 HTML5 的 canvas 標籤
關於 HTML5 的 canvas 標籤前言正文canvas 是甚麼canvas 基本使用canvas 元素渲染上下文 (Rending Context)檢測支持性canvas 繪圖概念座標空間繪製矩形繪製路徑 (path)繪製圓弧 (arc)arc 例子 1arc 例子 2arc 例子 3添加 canvas 樣式fillStylestrokeStyle繪製文本添加文本樣式canvas 狀態機制canvas 變形translaterotatescalecomposite結語前言學習 canvas 的原因原创 2020-06-24 13:41:13 · 189 阅读 · 0 评论 -
Express+mysql+前端 完整實現 登陸+註冊
Express+mysql+前端 完整實現 登陸+註冊前言正文Express 服務器準備工作mysql 部分加密 vs 解密結語前言這篇博客主要是因為一門課 WEB 前端開發的一次作業需求,要求實現登陸註冊的基本功能。這篇會使用 Express 作為服務器服務,而前端使用原生的 html, css, js,並會完整的結合數據庫存儲用戶信息,我使用的是 mysql。此外,還會對用戶的密碼加密等等。整體算是比較完整的。所以在開始之前,假設大家都對 html, css, js, mysql 都有基本的了解,原创 2021-01-02 02:53:55 · 732 阅读 · 2 评论 -
CSS3 Flex 彈性盒子布局
CSS3-Flex 彈性盒子布局前言正文flex 屬性一總攬外部容器內元素外部容器displayaxis (主軸)flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content內元素orderalign-selfflex-growflex-shrinkflex-basisflex結語前言前幾天寫了一篇關於 CSS3 Grid 格線布局,覺的應該也要也來搞明白 CSS3 Flex 彈性盒子布局。前情提要,其實對於 flex 和原创 2020-06-09 21:58:26 · 208 阅读 · 0 评论 -
純前端 - 各種實現進度條
純前端 - 各種實現進度條基礎版 - div進階版 - input高級版 - progress終極版 - meter進度條是一個非常常見的功能,實現起來也不難,一般我們會用 div 來實現。作為一個這麼常見的需求,這篇就要來康康有哪些,以純前端有哪些有意思的方式來實現進度條。基礎版 - divps. (這邊以下 gif 周圍稍有些瑕疵,我也不知道甚麼問題,使用的是 python 的 moviepy 庫由 MP4 生成 gif。若有解決辦法還請多多指教啦!):馬上就來看看實際效果:這種方法的作法就原创 2020-12-18 22:16:04 · 1954 阅读 · 3 评论 -
Echarts-for-React 雷達圖
Echarts-for-React 雷達圖前言正文示例安裝使用echarts API設置區域顏色漸進legend 標籤配置雷達圖分類配置點擊事件綁定完整代碼結語前言最近正著手一個課上的大作業,由於其他兩位組員還在和其他項目功能掙扎,於是就由我來負責製作最後項目的網頁展示。關於這個項目的展示,我最後是採用了 React + flask 作為前後端的開發。在另一篇會繼續談談這次學習 flask 下來的一些心得和理解,但在本篇,我想先說說關於 Echarts 這個有趣的組件庫。之所以學習了 Echarts原创 2020-07-14 17:51:27 · 2942 阅读 · 0 评论