add: refactoring.md

Author: minerva-wow

_posts/2022-10-16-Font&Performance.md

@@ -1,7 +1,7 @@
 ---
 title: Fonts and Performance
 date: 2022-10-16 22:24:45 +0800
-categories: [front-end]
+categories: [front-end, performance]
 tags: [fonts, optimization]    
 ---
 When building modern websites, fonts play a crucial role in how your content is perceived. However, including custom fonts, especially external fonts, can negatively impact performance. This guide will help you decide whether to include external fonts and how to do so with the least impact on your site's performance.

_posts/2022-10-17-MobilePerformance.md

@@ -1,8 +1,8 @@
 ---
 title: Mobile Performance
 date: 2022-10-17 16:33:50 +0800
-categories: [front-end]
-tags: [mobile, optimization, performance]
+categories: [front-end, performance]
+tags: [mobile, optimization]
 ---
 
 With web access on mobile devices becoming increasingly prevalent, ensuring optimal performance is more critical than ever. Mobile platforms now offer full-featured web browsers, but they often come with constraints like limited bandwidth, reduced CPU power, and limited battery life. This guide explores key strategies and best practices for improving mobile-specific performance, ensuring that your web content is fast, efficient, and user-friendly.

_posts/2022-10-25-WebpackNote.md

@@ -1,7 +1,7 @@
 ---
 title: Webpack and Optimization Introduction
 date: 2022-10-25 01:33:19 +0800
-categories: [front-end]
+categories: [front-end, tools]
 tags: [webpack]     # TAG names should always be lowercase
 ---
 

_posts/2022-09-23-readinglist.md renamed to _posts/2023-09-23-readinglist.md

@@ -1,6 +1,6 @@
 ---
 title: September Reading List Recommended
-date: 2022-09-23 08:52:39 +0800
+date: 2023-09-23 08:52:39 +0800
 categories: [ReadingList]
 tags: [videos, articles]
 ---

_posts/2024-11-26.md

@@ -0,0 +1,55 @@
+---
+title: From Clunky to Clean: Refactoring a JavaScript Image Toggle
+date: 2023-11-26 01:30:11 +0800
+categories: [front-end,js] 
+tag: [refactoring,js]
+---
+
+A simple image toggle can teach us key JS optimization principles. Let's break down the refactoring process.
+
+## Starting Point
+Here's a basic implementation most developers might write:
+
+```javascript
+function picLink(event) {
+    event.preventDefault();
+    let allImages = document.querySelectorAll("img");
+    let selectedImg = document.querySelector(`img[id="${this.dataset.img}"]`);
+
+    if (selectedImg.style.display === "block") {
+        selectedImg.style.display = "none";
+    } else {
+        allImages.forEach(img => {
+            img.style.display = img.id === selectedImg.id ? "block" : "none";
+        });
+    }
+}
+```
+
+## The Problems
+- Repeated DOM queries hammer performance 
+- `this` binding is fragile
+- Complex selector logic
+- Nested conditionals hurt readability
+
+## Clean Solution
+```javascript
+const images = document.querySelectorAll("img");
+
+const toggleImage = ({currentTarget}) => {
+    const targetImage = document.getElementById(currentTarget.dataset.img);
+    images.forEach(img => 
+        img.style.display = img === targetImage ? 
+            (img.style.display === "block" ? "none" : "block") : 
+            "none"
+    );
+};
+```
+
+Key changes:
+- Cache DOM selections
+- Destructure event object
+- Direct ID lookup
+- Single expression toggle
+
+This cleaner version runs faster and reads better. More importantly, it reveals core JS patterns that improve any codebase.