在日常的前端開發(fā)中嚎莉，我們常常借助各種基于 Node.js 的腳手架工具來加速項目搭建和維護围来，比如 create-react-app 可以一鍵初始化一個 React 項目前翎，es...
發(fā)簡信
IP屬地：上海
-
Node.js 構(gòu)建命令行工具：實現(xiàn) ls 命令的 -a 和 -l 選項 -
重構(gòu)案例：將純HTML/JS項目遷移到Webpack我們已經(jīng)了解了許多關于 Webpack 的知識，但要完全熟練掌握它并非易事汁讼。一個很好的學習方法是通過實際項目練習。當我們對 Webpack 的配置有了足夠的理解后，就可以嘗試...
-
前端模塊化進化史：從全局 function 到 ES Modules目前号显，前端開發(fā)已經(jīng)離不開由 CommonJS、ES Modules 和 Webpack 構(gòu)建的模塊化開發(fā)環(huán)境躺酒。無論是 JavaScript押蚤、CSS、圖片還是其他資源阴颖，都可以作...
-
全面掌握 Jest：從零開始的測試指南（下篇）在上一篇測試指南中活喊，我們介紹了Jest 的背景、如何初始化項目、常用的匹配器語法以及鉤子函數(shù)的使用钾菊。這一篇篇將繼續(xù)深入探討 Jest 的高級特性帅矗，包括 Mock 函數(shù)、異步請...
-
全面掌握 Jest：從零開始的測試指南（上篇）隨著JavaScript在前后端開發(fā)中的廣泛應用煞烫，測試已成為保證代碼質(zhì)量的關鍵環(huán)節(jié)浑此。 為什么需要單元測試 在我們的開發(fā)過程中，經(jīng)常需要定義一些算法函數(shù)滞详，例如將接口返回的數(shù)據(jù)轉(zhuǎn)...
-
從0到1：React項目中的Webpack配置實戰(zhàn)
公司項目一般都是使用集團封裝好的腳手架凛俱，腳手架內(nèi)部實現(xiàn)咱看不到也摸不著，好不容易組內(nèi)推行新的UI框架料饥，需要自行定義 webpack 配置蒲犬，這可是個絕佳的好機會，我對配置過程進...
-
React+TypeScript 組件庫開發(fā)全攻略：集成Storybook可視化與Jest測試岸啡，一鍵發(fā)布至npm平時我除了業(yè)務需求原叮，偶爾會投入到UI組件的開發(fā)中，大多數(shù)時候只會負責自己業(yè)務場景相關或者一小部分公共組件巡蘸，極少有從創(chuàng)建項目奋隶、集成可視化、測試到發(fā)布的整個過程的操作悦荒，這篇文章就...
-
輕松實現(xiàn)H5頁面下拉刷新：滑動觸發(fā)唯欣、高度提示與數(shù)據(jù)刷新全攻略前段時間在做小程序到H5的遷移疤坝，其中小程序中下拉刷新的功能引起了產(chǎn)品的注意呕诉。他說到缝龄，哎隧膘，我們遷移后的H5頁面怎么沒有下拉刷新超陆，于是乎能庆，我就急忙將這部分的內(nèi)容給填上砖瞧。 本來是計...
-
抽絲剝繭：詳述一次DevServer Proxy配置無效問題的細致排查過程事情的起因是這樣的屯蹦，在一個已上線的項目中嘀趟，其中一個包含登錄和獲取菜單的接口因響應時間較長脐区，后端讓我嘗試未經(jīng)服務轉(zhuǎn)發(fā)的另一域名下的新接口，舊接口允許跨域請求她按，但新接口不允許本地...
-
構(gòu)建動態(tài)交互式H5導航欄：滑動高亮牛隅、吸頂和錨點導航技巧詳解功能描述 產(chǎn)品要求在h5頁面實現(xiàn)集錨點、吸頂及滑動高亮為一體的功能酌泰，如下圖展示的一樣媒佣。當頁面滑動時，內(nèi)容區(qū)域?qū)倪x項卡高亮陵刹。當點擊選項卡時默伍，內(nèi)容區(qū)域自動滑動到選項卡正下方。...
-
pnpm 管理依賴包是如何節(jié)省磁盤空間的？npm 存在的問題 我們經(jīng)常使用 npm 來管理 node 項目中的包也糊，從 package.json 中讀取配置將依賴下載到本地炼蹦，以保障項目的正常運行。 當項目數(shù)量多時狸剃，這樣...
-
antd/fusion表格增加圈選復制功能背景介紹 我們存在著大量在PC頁面通過表格看數(shù)據(jù)業(yè)務場景掐隐，表格又分為兩種，一種是 antd / fusion 這種基于 dom 元素的表格钞馁，另一種是通過 canvas 繪制的...
-
PC首頁資源加載速度由8s降到2s的優(yōu)化實踐隨著需求的不斷開發(fā)虑省，前端項目不斷膨脹，業(yè)務提出：你們的首頁加載也太慢啦僧凰，我都需要7探颈、8秒才能看到內(nèi)容，于是乎主管就讓我聯(lián)合后端開啟優(yōu)化專項允悦，目標是3s內(nèi)展示完全首頁的內(nèi)容膝擂。 ...
-
為react項目添加開發(fā)/提交規(guī)范（前端工程化虑啤、eslint隙弛、prettier、husky狞山、commitlint全闷、stylelint）因歷史遺留原因，接手的項目沒有代碼提醒/格式化萍启，包括 eslint总珠、pretttier，也沒有 commit 提交校驗勘纯，如 husky局服、commitlint、stylelin...
-
GIT保存記錄原理之commit對象GIT 中提交對象非常的重要驳遵，我們通過它記錄代碼提交過程淫奔、進行文件保存、回退等操作堤结，那么它是怎樣幫助我們記錄這些信息的呢唆迁？其實就是都保存在項目根目錄的 .git 文件夾中。 ...
-
關于預處理器 sass 的超全用法隨著用戶需求的增加竞穷，應用于頁面的 css 代碼越來越復雜越發(fā)臃腫難以維護唐责，但是又沒有 css 的替代品，css 預處理器作為 css 的擴展瘾带，出現(xiàn)在前端技術(shù)中鼠哥。 sass 是...
-
預處理器 Less 的十個語法Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量朴恳、混合（mixin）科盛、函數(shù)等功能，讓 CSS 更易維護菜皂、方便制作主題贞绵、擴充。 不過瀏覽器只能識別 ...
-
去中心化組件共享方案 —— Webpack Module Federation（模塊聯(lián)邦）
在大型應用中恍飘， 我們可能會對其進行拆分榨崩，分成容器、主應用和多個子應用章母，使拆分后的應用獨立開發(fā)與部署母蛛，更加容易維護。但無論是微應用乳怎、公共模塊應用彩郊，都需要放到容器中才能使用。 如...
-
JavaScript中單例模式這樣用如果希望自己的代碼更優(yōu)雅蚪缀、可維護性更高以及更簡潔秫逝，往往離不開設計模式這一解決方案。 在JS設計模式中询枚，最核心的思想：封裝變化（將變與不變分離违帆，確保變化的部分靈活，不變的部分穩(wěn)...
-
從 HTTP/1.1 到 HTTP/3從 HTTP/1.1 到 HTTP/3金蜀，解決了一些舊協(xié)議的問題刷后，引入了好用的新功能。 HTTP/1.1 HTTP/1.1 通過在傳輸層和應用層之間增加 SSL/TSL 解決數(shù)...