原创 vue菜單點擊下劃線跟隨動畫

需求 實現頂部菜單欄，切換時下劃線跟隨滑動 效果 思路 看效果，思路有2： 方案A：下劃線 設置下劃線 border-bottom 點擊標題後控制下劃線的展示隱藏 注：下劃線長度及圓角無法設置 方案B：模擬下劃線 新啓元素模，

2021-06-08 16:36:47

原创 vue中使用webSocket更新實時天氣

前言 在 vue 中使用 webSocket 做一個簡單的天氣實時更新模塊。 關於 webSocket 的操作及示例： webSocket 連接 接收數據 重連機制 webSocket 1. 關於 webSocket w

2021-05-05 04:09:51 4

原创 js處理微信分享配置

整理一下通過h5做微信分享相關配置。 流程介紹 公衆號配置（AppID、IP白名單、JS接口安全域名） 網頁授權 JSSDK配置使用 1. 公衆號配置 登錄微信公衆號，獲取AppID，配置白名單，然後配置JS接口安全域名。 1.1 獲取

2021-03-26 01:54:08

原创 關鍵詞高亮效果

序 分享一個常用的的小功能：輸入關鍵詞，在列表中高亮顯示輸入的關鍵詞。如： 實現步驟 1. 思路 讓選中的關鍵字高亮顯示，說明要給關鍵字添加標籤，然後給相應標籤添加樣式。因此關鍵之處就在於： 匹配關鍵字 替換關鍵字爲帶有標識（標籤）的關

2021-03-26 01:54:08

原创 JS來一個極簡的每日毒雞湯

前言 最近發現了基於node的一個發送郵件的小插件，逛論壇看別人用它做了一些有意思的東西，也模仿着搞一個分享下~ 重在分享，重在分享！ 期望 1. 目標 使用基於nodeJs的nodemailer定時發送隨機文案給指定人。 2. 場景

2020-12-26 13:09:02

原创 vue首頁白屏清除緩存解決方案

發現問題 近期vue項目在構建完成上線之後，每次往線上更新版本，總會收到一部分反饋——web頁面白屏，需要清除緩存數據重新加載才能正常訪問。 問題分析 首先排除掉了publicPath設置問題，因爲大部分用戶能正常訪問到頁面，無報錯。其次排

2020-12-05 14:23:41

原创 webpack實戰——JS打包工具

前言 前面篇章敘述了關於webpack的許多內容，從入門，打包第一個模塊，到進階，最後到本地、生產及打包的優化。本篇則提及一下在JavaScript社區中另外的一些類似的打包工具，它們有的更加輕量、簡潔，有的則更專注於某類特定場景等。通過了

2020-10-31 14:24:10

原创 webpack實戰——打包優化【下】

前言 這是webpack打包優化【下】篇。前幾篇針對性能要求高的項目從加快打包速度、減小資源體積方面入手，提出了一些優化政策，然後測試都可起到一定優化效果。本篇描述死代碼的檢測與去除。 tree shaking 1 死代碼檢測去除 首先拋出

2020-10-28 14:23:23

原创 webpack實戰——打包優化【中】

前言 上篇從多線程打包和縮小打包作用域兩個方面入手，對webpack打包層面做出優化。本篇描述從動態鏈接庫思想方面繼續深入探究打包層面的深度優化。 動態鏈接庫與DLLPlugin 動態鏈接庫（Dynamic Link Library 或者

2020-10-20 14:24:25

原创 webpack實戰——打包優化【上】

前言 本篇介紹一些webpack優化的配置方法，目的有二： 打包速度更快 輸出資源更小 注意：在軟件工程領域有一條十分重要的功能經驗，不要過早優化。在項目初期不要看到一個可以優化的點就去做優化，這樣極有可能會增加尤其開發及維護的複雜度

2020-10-12 14:37:00

原创 webpack——生產環境配置【下】

前言 這是webpack實戰系列第12篇。 上兩篇中，描述了一些關於生產環境的配置：環境變量的使用、配置文件描述、source-map配置、資源壓縮等，從這幾個方面入手來對生產環境進行一定的配置。 本篇將從緩存和資源bundle體積開始，來

2020-09-29 14:36:55

原创 webpack實戰——生產環境配置【中】

前言 上一篇中，描述了一些關於生產環境的配置：環境變量的使用、配置文件描述、開啓生產模式、環境變量自定義配置等，從這幾個方面入手都可以對生產環境產生一些有利影響。 那麼本篇，從source map和資源壓縮方面入手，繼續深入探究。 1. s

2020-09-18 14:38:28

原创 webpack實戰——生產環境配置【上】

前言 這是webpack實戰系列筆記的第10篇記錄——生產環境配置【上篇】。 在前面的幾篇中，介紹了webpack的大部分使用方法，使用其實就是爲了上線，牽扯到生產環境，就會出現新的問題，比如： 如何讓用戶更快的加載資源 如何壓縮資源 如

2020-09-02 15:50:27

原创 webpack實戰——代碼分片

前言 這是webpack實戰系列筆記的第9篇記錄——代碼分片，前幾篇記錄如下： 打包第一個應用 模塊化與模塊打包 資源輸入與輸出 一切皆模塊 預處理器【上篇】 預處理器——常用loader【下篇】 樣式文件分離 樣式預處理 代碼分片

2020-08-28 15:51:14

原创 webpack實戰——樣式與處理

前言 這是webpack實戰系列筆記的第8篇記錄——樣式與處理，前幾篇記錄如下： 打包第一個應用 模塊化與模塊打包 資源輸入與輸出 一切皆模塊 預處理器【上篇】 預處理器——常用loader【下篇】 樣式文件分離 在目前的前端項目中，經

2020-08-24 15:50:37