【工程化】前端工程構建工具gulp篇
gulp ,基於 NodeJS 的項目，自動化構建的工具增強你的工作流程！ 一、工作原理 前端構建工具，gulp是基於Nodejs，自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。 借鑑了Unix操作系統的管道（pipe）思想，前一級
昵稱 Jerry
@前端
貢獻者508
粉絲0
貢獻者
@前端
動態 列表
高德前端這五年：動態化技術的研發歷程和全面落地實踐
前言 2015年-2020年，歷經5年發展，高德地圖應用開發前端團隊在業務快速發展中不斷成長。一路走來，從小團隊主要負責短期運營活動開發的散兵遊勇，到現在團隊規模100人+，覆蓋高德5大業務線，上百個模塊的堅甲利兵。本文將分享隨着業務快速增長高德前端的技術發展歷程，總結動態化技術的落地實踐，以及高德前端未來的發展方向。 高德（應用開發）前端技術的發展按照時間線來看，大致可以分為 4 個階段：
昵稱 高德技術
從 Bundleless 看前端構建
前言 Bundle or Bundleless？自 2015 年 ESM 標準發佈後，路線之爭就開始逐步升温。轉眼間，時間已來到 2021 年。如果白酒的車你錯過了，那麼不妨看看 Bundleless，或許它就是前端圈的下一位「茅台」。 前端構建當下的問題 不得不説，曾經把自己定位為「打包器」的 Webpack，如今已形成強大的構建生態，儼然一統江湖。但前端構建的道路還遠沒有走到最後。隨着業務的發
昵稱 ES2049
Webpack 簡介
構建其實是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力，解放了我們的生產力。 Webpack 憑藉強大的功能與良好的使用體驗，已經成為目前最流行，社區最活躍的構建工具，是現代 Web 開發必須掌握的技能之一。 背景 在當下的前端環境裏，各種框架和工具層出不窮，比如 React、Vue、Angular 等，極大
昵稱 編程三昧
從2021看2022前端發展趨勢
本文參與了 SegmentFault 思否徵文「2021 總結」，歡迎正在閲讀的你也加入。 前言 又到了年底，回顧一下整個2021年的前端歷程，總體來説前端趨向到了一個比較穩定的發展階段，雖然仍然有許多層出不窮的庫及輪子，但整體來看其實今年最突出的前端發展其實可以概括為以下幾個關鍵詞，即：工程基建、低代碼、多語言、雲+邊+端。從不同大廠對整個前端的劃分視角來看，整體可以分為兩大類，一類是聚焦化，比
昵稱 維李設論
得物前端喚端業務場景和技術精講
前言 當你在刷朋友圈時突然看到一個潮鞋廣告，正是你非常喜歡、一直想買的那款而且價格美麗，於是你興奮地點擊廣告直接打開了購物App，並且直接進入剛剛看到的潮鞋詳情頁，你只需要直接點擊購買就能得到這雙你期待已久潮鞋，這流程如絲般順滑！ 你正在瘋狂追的愛豆在微博發了一款聯名潮玩內容，還是獨家發售，貼文中就有網頁鏈接，你點擊後直接打開購物平台進入了與愛豆聯名同款的潮玩詳情頁，迫不及待的下單擁有一款時尚的潮
昵稱 得物技術
前端開發之函數式編程實踐 | 京東雲技術團隊
作者：京東科技牛志偉 函數式編程簡介 常見應用場景 1、ES6中的map、filter、reduce等函數 [1,2,3,4,5].map(x = x * 2).filter(x = x 5).reduce((p,n) = p + n); 2、React類組件 - 函數式組件+hooks、Vue3中的組合式API 3、RxJS、Lodash和Ramda等JS庫 4、中間件/插件，如Redux中的
昵稱 京東雲開發者
前端領域有哪些好用的可視化開發工具？三類工具全面解析
在當今數字化時代，數據可視化已成為前端開發不可或缺的重要組成部分。優秀的可視化工具不僅能幫助開發者高效呈現複雜數據，更能提升用户體驗，增強數據洞察力。本文將為您全面盤點前端領域最優秀的可視化開發工具，詳細介紹這些工具如何幫助企業輕鬆實現數據可視化與業務自動化。 一、前端可視化工具的核心價值 數據可視化是將抽象數據轉化為直觀圖形呈現的過程，它通過視覺元素如圖表、圖形和地圖，幫助人們更容易理解
昵稱 Zoho低代碼開發
vue+node後台管理（帶預覽地址）
最近在逛開源網站時發現了一個比較實用又簡潔的開源後台管理。 先貼一下預覽地址：點擊直達 為啥説比較實用呢！來看看它的功能就知道了： 用户管理 菜單管理 角色管理 菜單權限 角色權限 字典管理 富文本+圖片管理+文件管理 等等還有一些比較實用的.... 用過後台都知道這幾個功能的含金量，還自帶了node後端直接啓動就可使用。 最後再貼幾張演示圖：
昵稱 web網站裝修工
《 JOKER 前端框架：一個自帶雲端可視化IDE的前端黑馬》
JOKER 前端框架介紹 一、框架概述 在當今前端開發的多元化領域中，JOKER 前端框架猶如一顆璀璨的明星，以其獨特而強大的功能，為開發者開闢了一條高效、便捷的創新之路。 JOKER 不僅僅是一個普通的框架，它更是一個綜合性的框架平台，旨在為所有可能的開發場景提供全方位、無死角的支持。其中，Joker.front 作為這個平台下專注於前端開發的核心框架，憑藉其標準化的前端開發標準，以及採用面向對
昵稱 小丑軍團Zohar
Joker 前端框架組件的生命週期：深度解析與實踐應用
在 Joker 前端框架的開發體系中，組件的生命週期猶如一顆精準的導航星，指引着開發者構建高效、穩定且富有交互性的應用程序。它完整地涵蓋了從組件實例誕生的那一刻起，直至其完成使命被銷燬的全過程，每一個階段都藴含着獨特的意義與功能。 一、生命週期：全景掃描 當一個組件類被實例化，猶如一顆新星在應用的宇宙中誕生，其生命週期的宏大敍事便徐徐拉開帷幕。此時，組件開始着手渲染自身的視圖以及其下屬的子視圖，這
昵稱 小丑軍團Zohar
微信公眾號 Markdown 編輯器
微信公眾號文章 Markdown 在線編輯器，使用 markdown 語法創建一篇簡介美觀大方的微信公眾號圖文。由於發版本麻煩，和一些功能無法擴展停滯開發了，未來不再開發 Chrome 的插件(暫存在 chrome 分支)，通過 web 版本定製更豐富的功能。 Github: https://github.com/jaywcjlove... 官網：https://jaywcjlove.gi
昵稱 小弟調調
微信PC端掃碼登錄流程記錄
前言 接入微信掃碼登錄整個流程的記錄 具體步驟 1. 註冊開發者賬號 2.創建應用，得到appid和AppSecret，並配置回調域名 2.1 創建應用 2.2 填寫應用資料，提交審核，審核通過會得到開發需要用的appid和AppSecret，這兩個值， 這個值會給到後台，然後然後再通過接口給到我們 2.3 應用創建成功，配置回調域名 4. 開發者資質認證 5. 配置一個內網穿透，方便
昵稱 qinyuanqiblog
純CSS實現炫酷文本陰影效果
如圖所示，這是一個文本陰影效果，陰影有多個顏色，鼠標懸停時文本陰影效果消失，文本回到正常的效果。讓我們逐步分解代碼，看看如何使用純CSS實現這個效果的。 基於以上動圖可以分析出以下是本次實現的主要幾個功能點： 文本有多個顏色的陰影的效果 文本有空心鏤空的效果 鼠標懸停時文本回到正常效果 鼠標懸停時英文字體的粗細有變化 實現過程 多層顏色陰影 文字的陰影用text-shadow實現，但
昵稱 南城FE
純CSS動態漸變文本特效
如圖所示，這是一個炫酷的文本漸變效果，如同冰島的極光一般。本次的文章讓我們逐步分解代碼，瞭解其實現原理。 基於以上動圖效果可以分析以下是本次動效實現的主要幾點： 文本中有多個顏色的動畫 每個顏色顯示的半徑不同，有大有小 整體動畫是有規律的重複進行着 實現過程 接下來開始正式的代碼實現過程，通過以上可以分析出會有多個元素來實現顏色的動畫，每個元素的動畫軌跡和運行速度不一致，但當多個不同顏
昵稱 南城FE
CSS技巧：從高度0過渡到自動高度
本文翻譯自 CSS trick: transition from height 0 to auto!，作者：Francesco Vetere， 略有刪改。 如果你在CSS上花了足夠長的時間，很可能你曾嘗試過從height:0到auto的平滑過渡。。。卻發現它不起作用！😢 ️幸運的是現在有一個解決這個問題的方法：使用CSS Grid佈局可以解決這個問題，而且代碼簡單，運行的很完美。 讓我們從一個實
昵稱 南城FE
炫酷鼠標懸停隨機漸變文本動畫效果
如圖所示，這是一個很炫酷的鼠標懸停動畫效果，卡片的文字隨着鼠標的移動不斷變化着，且文字的顏色伴隨着漸變色跟隨鼠標移動，中心部分是突出的LOGO效果，整個交互效果十分引人注目。原效果來源於 evervault.com/customers 這個網站，有興趣的可以體驗看看～ 本次文章將解析如何用代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 卡片在鼠標懸停時出現漸變隨機文字
昵稱 南城FE
圖撲這樣設計高質量可視化大屏
5 大指南塑造高階可視化 5 Guidelines to Shape Advanced Visualization · 可視化是個友好的媒介 · ·理解數據是成為優秀媒介的關鍵 · · 業務驅動下的設計策略· · 圖撲設計的無限可能 · · 創新思維讓可視化更具價值 · 可視化是個友好的媒介 我們正處於一個數據氾濫的時代，隨處可見數據的身影，更知其不可忽視的重要性。企業運營產生的海量數據，若僅停留
昵稱 hightopo
螺旋文字滾動特效源碼解析
如圖所示，今天看到一個很炫酷的雙文字螺旋滾動特效，兩行文字呈螺旋狀變化，在網站中這樣的效果對用户很有吸引力。本文將基於原網站解析如何實現這個炫酷的效果，基於這個動圖可以分析出需要實現的要點： 文字呈螺旋狀滾動 滾動過程中文字大小變化 動畫過程無縫鏈接 兩行文字滾動 實現過程 文字展示 為了方便更改文案將文案定義變量，通過JS代碼動態創建DOM，定義文案、螺旋的角度以及動畫的持續時間：
昵稱 南城FE
CSS螢火蟲按鈕特效
如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點： 有一個跟隨鼠標移動的圓點 按鈕懸停時有高亮發光的效果 懸停時按鈕周邊的螢火中效果 實現過程 跟隨鼠標移動的圓點 這個部分需要基於JS實現，但不是最主要的實現代碼 如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事
昵稱 南城FE
CSS炫酷光暈按鈕特效
如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 按鈕背景為漸變顏色 懸停時按鈕有放大效果 懸停時文案有發光漸變動畫 懸停時按鈕有旋轉發光效果 實現過程 漸變按鈕 漸變色背景我們設置background-image的line
昵稱 南城FE
純CSS實現有趣emoji切換開關
這是一個純CSS創建的動畫切換開關，它不僅能夠在視覺上吸引用户，還能通過交互提供即時反饋。本文將解析源碼的核心實現邏輯，這個項目的核心是使用CSS變量、3D變換和過渡效果來實現一個動態的、響應式的用户界面元素。 關鍵技術點 CSS變量：用於動態調整樣式。 3D變換：用於創建翻轉動畫效果。 過渡效果：用於平滑地改變元素的樣式。 emoji：並不是真正的emoji而是通過CSS繪製。 實
昵稱 南城FE
前端代碼風格實踐 prettier + ESLint + Git Hook + lint-staged
整潔的代碼如同優美的散文。—— Grady Booch 前言： 在繁雜的業務迭代時，接手其他項目，如果沒有一個統一的代碼風格，閲讀起來是相當困難的，畢竟團隊裏的每個人習慣不一樣。團隊協作，意味着需要犧牲一些個性，減少一些沒必要的爭吵。 1.Prettier是什麼？ 顧名思義 prettier（更漂亮的），讓你的代碼更漂亮。官網説的很清楚了 An opinionated code format
昵稱 solvep
[譯] 如何使用 useRef 修復 React 性能問題
原文地址：How to useRef to Fix React Performance Issues 原文作者：Sidney Alcantara 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2020/how-to-useref-to-fix-react-performanc
昵稱 彈鐵蛋同學