From 83491ce28cca11f14c229d341f02a2d88952d07b Mon Sep 17 00:00:00 2001
From: AliasJeff <2022248374@qq.com>
Date: Tue, 9 Apr 2024 21:21:19 +0800
Subject: [PATCH] refactor: Add comments & optimize code

---
 app/static/js/fillword.js       |  3 +-
 app/static/js/highlight.js      |  2 +-
 app/templates/mainpage_get.html | 22 ++++++------
 app/templates/userpage_get.html | 61 ++++++++++++++++++++-------------
 4 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/app/static/js/fillword.js b/app/static/js/fillword.js
index 82f00ea..18461f0 100644
--- a/app/static/js/fillword.js
+++ b/app/static/js/fillword.js
@@ -1,4 +1,5 @@
-let isRead = localStorage.getItem('readChecked') !== 'false';
+// initialize from localStorage
+let isRead = localStorage.getItem('readChecked') !== 'false';  // default to true
 let isChoose = localStorage.getItem('chooseChecked') !== 'false';
 
 function getWord() {
diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js
index 42d3aaf..e8a3cf8 100644
--- a/app/static/js/highlight.js
+++ b/app/static/js/highlight.js
@@ -1,4 +1,4 @@
-let isHighlight = localStorage.getItem('highlightChecked') !== 'false';
+let isHighlight = localStorage.getItem('highlightChecked') !== 'false'; // default to true
 
 function cancelBtnHandler() {
     cancelHighlighting();
diff --git a/app/templates/mainpage_get.html b/app/templates/mainpage_get.html
index 5c57c91..3ba0ece 100644
--- a/app/templates/mainpage_get.html
+++ b/app/templates/mainpage_get.html
@@ -54,18 +54,20 @@
         {% endfor %}
     {% endif %}
 <script type="text/javascript">
-    window.onload = function() {
-        document.getElementById('article').value = localStorage.getItem('article') || '';
-    }
-    document.getElementById('article').addEventListener('input', saveArticle);
+    // IIFE, avoid polluting the global scope
+    (function() {
+        const articleInput = document.querySelector('#article');
+        articleInput.value = localStorage.getItem('article') || '';
 
-    function saveArticle() {
-        localStorage.setItem('article', document.getElementById('article').value);
-    }
+        articleInput.addEventListener('input', function() {
+            localStorage.setItem('article', articleInput.value);
+        });
 
-    function clearArticle() {
-        localStorage.removeItem('article');
-    }
+        window.clearArticle = function() {
+            localStorage.removeItem('article');
+            articleInput.value = '';
+        };
+    })();
 
 </script>
 </body>
diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html
index adadd58..edb8bf2 100644
--- a/app/templates/userpage_get.html
+++ b/app/templates/userpage_get.html
@@ -117,7 +117,7 @@
             <div class="sliderValue">
                 <span id="rangeValue">1×</span>
             </div>
-            <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" onchange="saveRangeValue()" />
+            <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" />
         </div>
     </div>
     <p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
@@ -174,40 +174,53 @@
 {% endif %}
 <script type="text/javascript">
     window.onload = function () { // 页面加载时执行
-        const highlightChecked = localStorage.getItem('highlightChecked') !== 'false';
-        const readChecked = localStorage.getItem('readChecked') !== 'false';
-        const chooseChecked = localStorage.getItem('chooseChecked') !== 'false';
-        const rangeValue = localStorage.getItem('rangeValue') || '1';
-        const selectedWords = localStorage.getItem('selectedWords') || '';
+        const settings = {
+            // initialize settings from localStorage
+            highlightChecked: localStorage.getItem('highlightChecked') !== 'false', // localStorage stores strings, default to true. same below
+            readChecked: localStorage.getItem('readChecked') !== 'false',
+            chooseChecked: localStorage.getItem('chooseChecked') !== 'false',
+            rangeValue: localStorage.getItem('rangeValue') || '1',
+            selectedWords: localStorage.getItem('selectedWords') || ''
+        };
 
-        document.getElementById('highlightCheckbox').checked = highlightChecked;
-        document.getElementById('readCheckbox').checked = readChecked;
-        document.getElementById('chooseCheckbox').checked = chooseChecked;
-        document.getElementById('rangeComponent').value = rangeValue;
-        document.getElementById('rangeValue').innerHTML = rangeValue + 'x';
-        document.getElementById('selected-words').value = selectedWords;
+        const elements = {
+            highlightCheckbox: document.querySelector('#highlightCheckbox'),
+            readCheckbox: document.querySelector('#readCheckbox'),
+            chooseCheckbox: document.querySelector('#chooseCheckbox'),
+            rangeComponent: document.querySelector('#rangeComponent'),
+            rangeValueDisplay: document.querySelector('#rangeValue'),
+            selectedWordsInput: document.querySelector('#selected-words')
+        };
+        // 应用设置到页面元素
+        elements.highlightCheckbox.checked = settings.highlightChecked;
+        elements.readCheckbox.checked = settings.readChecked;
+        elements.chooseCheckbox.checked = settings.chooseChecked;
+        elements.rangeComponent.value = settings.rangeValue;
+        elements.rangeValueDisplay.textContent = `${settings.rangeValue}x`;
+        elements.selectedWordsInput.value = settings.selectedWords;
 
         // 刷新页面或进入页面时判断，若不是首篇文章，则上一篇按钮可见
-        if(sessionStorage.getItem('pre_page_button')!="display" && sessionStorage.getItem('pre_page_button')){
+        if (sessionStorage.getItem('pre_page_button') !== 'display' && sessionStorage.getItem('pre_page_button')) {
             $('#load_pre_article').show();
         }
-     };
-    document.getElementById('selected-words').addEventListener('input', saveSelectedWords);
 
-    function saveSelectedWords() {
-        let selectedWordsTextarea = document.getElementById('selected-words');
-        localStorage.setItem('selectedWords', selectedWordsTextarea.value);
-    }
+        // 事件监听器
+        elements.selectedWordsInput.addEventListener('input', () => {
+            localStorage.setItem('selectedWords', elements.selectedWordsInput.value);
+        });
+
+        elements.rangeComponent.addEventListener('input', () => {
+            const rangeValue = elements.rangeComponent.value;
+            elements.rangeValueDisplay.textContent = `${rangeValue}x`;
+            localStorage.setItem('rangeValue', rangeValue);
+        });
+    };
 
     function clearSelectedWords() {
         localStorage.removeItem('selectedWords');
+        document.querySelector('#selected-words').value = '';
     }
 
-    function saveRangeValue() {
-        const rangeValue = document.getElementById('rangeComponent').value;
-        document.getElementById('rangeValue').textContent = rangeValue;
-        localStorage.setItem('rangeValue', rangeValue);
-    }
 
     function load_next_article(){
         $.ajax({