20200514 前端開發日報

基于 webpack 優化老項目 ;前端監控總結;GitHub 迎來重大變更:可以直接用 VSCode 編碼了;《前端那些事》如何更好管理 Api 接口;前端換膚的 N 種方案,請收下;這份 Java Web 必讀書單,值得所有 Java 工程師一看;用nodejs實現向文件的固定位置插入內容;Vue的過濾器filters在Element表格el-table中的應用 (Vue「過濾器」的使用,自定義過濾器 filters )

  1. 基于 webpack 優化老項目

    項目技術棧是 dva + antd-mobile ,由于是早期項目,項目里 webpack 版本用的是 3.5.6 ,所以有些配置我會加上 webpack 4.x 版本的寫法。有些 plugin 或者相關配置列出的較少或者講解比較淺顯,可以到 webpack 官網或者對應的 plugin Github 上查看詳細的參數配置喲。有不足之處還請指正 :pray:。 Roadhog 官方介紹...

  2. 前端監控總結

    一般一個完整的前端項目需要包含異常監控,我們需要在項目出現異常的時候第一時間通知到我們開發,然后及時修復bug。 現有方案 Fundebug 傳送門 bugsnag 傳送門 betterjs 傳送門 sentry 傳送門 異常類型 從前端的角度來說,前端需要關注的異常一般包含一下兩種: 原生js錯誤 ...

  3. GitHub 迎來重大變更:可以直接用 VSCode 編碼了

    GitHub在本周的Satellite 2020活動中宣布了一些新功能和更新,涵蓋了云、協作、安全性等。 與其他技術公司一樣,由于COVID-19危機,微軟擁有的代碼托管平臺已選擇將其年度開發者活動移至在線,Satellite 2020也是GitHub本年度的首次虛擬會議。 GitHub Codespaces 這次活動最大的亮點是一個...

  4. 《前端那些事》如何更好管理 Api 接口

    前沿:自從前端和后端分家之后,前后端接口對接就成為了家常,“誰”也離不開誰,而對接接口的過程就離不開接口文檔,比較主流就是Swagger(強大的API文檔工具),當然今天它不是主角,頂多也就是個輔助。這篇文章旨在梳理如何在前端項目中更好的去管理跟后端“對接”的接口 聊接口管理,離不開請求庫,vue技術棧中請求庫談及...

  5. 前端換膚的 N 種方案,請收下

    作者:令夕 原文鏈接:https://juejin.im/post/5e92ad7a518825736c5b91cd 最近在做網站換膚的需求,也就是主題切換。那么如何切換主題的顏色呢?以下是網站換膚的實現以及基于換膚拓展的一些方案分享給大家,希望大家在做類似需求的時候能夠有些參考。 覆蓋樣式實現 //&n...

  6. 這份 Java Web 必讀書單,值得所有 Java 工程師一看

    點擊藍色“程序員書單”關注我喲 加個“星標”,每天帶你讀好書! 經過了10多年的發展,Java Web從開發框架到社區都已經非常成熟,而目前市面上最流行的Java Web框架已然是Spring全家桶,從過去的Spring,SpringMVC,再到SpringBoot。而曾經流行的JSP和servlet,隨著前后端分離的趨勢,以及Spring這類框架的沖擊,也逐...

  7. 用nodejs實現向文件的固定位置插入內容

    往文件的固定的行寫入數據: 需要用到時nodejs的fs模塊和path模塊 用到fs模塊的方法 readFileSync &  writeFileSync ;  readFileSync 是讀取文件內容,  writeFileSync 是向文件寫入內容; 實現思路: 1:讀取文件內容并把讀取到的內容以換行符切割成數組 2:向數組的插入內容(用splice...

  8. Vue的過濾器filters在Element表格el-table中的應用 (Vue「過濾器」的使用,自定義過濾器 filters )

    filters 不會修改數據,只是改變用戶看到的輸出(效果) (計算屬性 computed ,方法 methods 都是通過修改數據來處理數據格式的輸出顯示)。 2.使用場景: 需要格式化數據的情況,比如我們需要處理 時間、價格等數據格式的輸出 / 顯示。 比如后端給你返回一個 年月日的日期字符串 ,前端需要展示...

  9. ViLikeJS – 一款輕量級的訪問量&點贊統計插件

    :eyes::+1: 一款基于Bmob后端云輕量級的訪問量&點贊插件 官方文檔 官方文檔: ViLikeJS : ViLikeJS Demo 特性 簡單功能簡單實現,封裝十幾行代碼實現超輕量的JS插件。 無需在個人服務器上搭建后端系統,數據訪問更加安全。 借助Bmob創建后端平臺,創建、管理更加方便快捷。 什么情況...

  10. 如何在端外投放的場景下實現前端實時 CEP 框架?

    背景 復雜事件處理(Complex Event Processing,以下簡稱CEP)在閑魚內得到了廣泛應用,基于用戶使用閑魚的實時行為,為用戶提供更加豐富的優質信息與服務。閑魚技術公眾號有介紹過CEP在服務端和客戶端上的設計與實現。然而之前的設計方案都只適用于閑魚App端內場景,針對端外投放拉新場景(例如用戶訪問了多...

  11. 懶人整理的js函數式編程講解

    根據學術上函數的定義,函數即是一種描述集合和集合之間的 轉換關系 ,輸入通過函數都會返回 有且只有一個 輸出值。 函數 實際上是一個 關系 ,或者說是一種映射,而這種映射關系是可以組合的。 在我們的編程世界中,我們需要處理的其實也只有“數據”和“關系”,而關系就是函數。我們所謂的 編程工作 也不過就是在...

  12. pc-pcm-wave:一個簡單錄音波紋 Preact 組件

    README.md pc-pcm-wave 一個簡單的pcm波紋效果, 適用于preact項目,hooks編寫, 有如下特性 可自定義狀態數量 可自定義線的數量、粗細、顏色、波速、振幅、延遲等參數 Live Demo L...

  13. 5個JavaScript的字符串處理庫

    使用字符串可能是一項繁瑣的任務,因為有許多不同的用例。例如,將字符串轉換為駝峰大小寫這樣的簡單任務可能需要幾行代碼才能達到最終目標。 function camelize(str) {    return str.replace(/(?:^w| |bw|s+)/g, function(match, index) {    ...

  14. 最后一天,立省52元你的青春必須有奇舞團的前端課

    你沒有這樣的經歷: 看過很多書,但是都忘了; 上過很多課,知識全都還給老師了; 明明工作很努力,回過頭卻發現不如小好幾歲的同事; 看著同事討論熱烈地討論某個技術點,卻無話可說; 看了某個知識點,有疑惑但無人可問; ...... 也許你會想,就是上邊某些原因一直讓你停滯不...

  15. Vue3 究竟好在哪里?(和 React Hook 的詳細對比)

    這幾天 Vue 3.0 Beta 版本發布了,本以為是皆大歡喜的一件事情,但是論壇里還是看到了很多反對的聲音。主流的反對論點大概有如下幾點:

  16. JavaScript內置對象之Array的使用小結

    數組的創建方式: 1.字面量: 放置一個數值時,就是一個數據。 var arr = ; 2.構造函數: 放置一個數據時,表示長度或數據的個數,空表示undefined。 var arr = new Array(6); 建議:Array作為構造函數,行為很不一致。因此,不建議使用它生成新數組,直接使用數組字面量是更好的做法。 數組...

  17. 關于前端的 13 個安全提示

    你可能會驚訝地知道大型框架如何使你的網站對跨站點腳本(XSS)攻擊打開大門。有很多危險的操作,例如 React 中的 dangerouslySetInnerHTML 或 Angular 中的 bypassSecurityTrust API。

  18. 【前端工程化】環境變量.env文件

    在現代前端項目中 .env 文件隨處可見,里面都是一些項目中的配置項,可以在項目中拿來就用,雖然這是一個不太起眼的東西,但是這些 .env 文件在前端工程化中是有一定的用處和意義的。 就讓我們通過這篇短文一起來看看。 process.env 現在的前端項目都是用 Node 來作為輔助開發工具,而 process 是 Node.js 中的 ...

  19. 之 JS數組去重

    理一遍去重,希望可以像離騷前兩句話一樣這輩子可以脫口而出。 --- 長太息以掩涕兮,哀民生之多艱 復制代碼 1、ES6 new Set去重 var list = [4, 4, "lalala", "lalala", true, true, undefined, 'true', 'true', undefined, undefined, null, null, 0, 0...

更多內容請關注公眾號【前端開發博客】每日更新