下列 ChatGPT-4 咒語，對開發者很有幫助。附上原文與中文指令，供您參考。 原文出處：https://dev.to/hackertab_org/50-chat-gpt-prompts-every-software-developer-should-know-tested-9al ### **程式碼生成** - Generate a boilerplate `[language]` code for a `[class/module/component]` named [name] with the following functionality: `[functionality description].` - 為名為 [name] 的 `[class/module/component]` 生成樣板 `[language]` 程式碼，具有以下功能：`[functionality description]。 - Create a [language] function to perform `[operation]` on `[data structure]` with the following inputs: [input variables] and expected output: `[output description]`. - 建立一個 [語言] 函數以使用以下輸入對 `[資料結構]` 執行 `[操作]`：[輸入變數] 和預期輸出：`[輸出描述]`。 - Generate a `[language]` class for a `[domain]` application that includes methods for `[methods list]` and properties `[properties list]`. - 為包含“[方法列表]”的方法和屬性“[屬性列表]”的“[域]”應用程式生成一個“[語言]”類。 - Based on the [design pattern], create a code snippet in [language] that demonstrates its implementation for a [use case]. - 基於[設計模式]，用[語言]建立一個程式碼片段，演示其對[用例]的實現。 **例子：** ``` Generate a boilerplate Python code for a shopping cart module named "ShoppingCart" with the following functionality: - A constructor that initializes an empty list to store cart items. - A method called "add_item" that takes in an item object and adds it to the cart. - A method called "remove_item" that takes in an item object and removes it from the cart if it exists. - A method called "get_items" that returns the list of items in the cart. - A method called "get_total" that calculates and returns the total price of all items in the cart. ``` ### **程式碼完成** - In `[language]`, complete the following code snippet that initializes a [data structure] with `[values]`: `[code snippet]`. - 在“[語言]”中，完成以下使用“[值]”初始化[資料結構]的程式碼片段：“[程式碼片段]”。 - Finish the `[language]` function that calculates [desired output] given the following input parameters: `[function signature]`. - 在給定以下輸入參數的情況下完成計算[期望輸出]的[語言]函數：[函數簽名]。 - Complete the `[language]` code to make an API call to `[API endpoint]` with [parameters] and process the response: `[code snippet]`. - 完成“[語言]”程式碼以使用[參數]對“[API 端點]”進行 API 呼叫並處理響應：“[程式碼片段]”。 **Example** : Finish the Python function that calculates the average of a list of numbers given the following input parameters: **示例**：完成計算給定以下輸入參數的數字列表的平均值的 Python 函數： ``` def calculate_average(num_list) ``` ### **錯誤檢測** - Identify any potential bugs in the following [language] code snippet: `[code snippet]`. - 確定以下 [語言] 程式碼片段中的任何潛在錯誤：`[程式碼片段]`。 - Analyze the given [language] code and suggest improvements to prevent [error type]: `[code snippet]`. - 分析給定的[語言]程式碼並提出改進建議以防止[錯誤類型]：`[程式碼片段]`。 - Find any memory leaks in the following [language] code and suggest fixes: `[code snippet]`. - 在以下 [語言] 程式碼中查找任何內存洩漏並提出修復建議：`[程式碼片段]`。 **Example** : Identify any potential bugs in the following Python code snippet: **示例**：辨識以下 Python 程式碼片段中的任何潛在錯誤： ``` def calculate_sum(num_list): sum = 0 for i in range(len(num_list)): sum += num_list[i] return sum ``` ### **程式碼審查** - Review the following `[language]` code for best practices and suggest improvements: `[code snippet]`. - 查看以下“[語言]”程式碼以獲得最佳實踐並提出改進建議：“[程式碼片段]”。 - Analyze the given `[language]` code for adherence to `[coding style guidelines]`: `[code snippet]`. - 分析給定的“[語言]”程式碼是否符合“[編碼風格指南]”：“[程式碼片段]”。 - Check the following [language] code for proper error handling and suggest enhancements: `[code snippet]`. - 檢查以下 [語言] 程式碼以正確處理錯誤並提出改進建議：`[程式碼片段]`。 - Evaluate the modularity and maintainability of the given `[language]` code: `[code snippet]`. - 評估給定“[語言]”程式碼的模塊化和可維護性：“[程式碼片段]”。 **Example** : Review the following Python code for best practices and suggest improvements: **示例**：查看以下 Python 程式碼以獲得最佳實踐並提出改進建議： ``` def multiply_list(lst): result = 1 for num in lst: result *= num return result ``` ### **API 文件生成** - Generate API documentation for the following `[language]` code: `[code snippet]`. - 為以下“[語言]”程式碼生成 API 文件：“[程式碼片段]”。 - Create a concise API reference for the given `[language]` class: `[code snippet]`. - 為給定的“[語言]”類建立簡明的 API 參考：“[程式碼片段]”。 - Generate usage examples for the following `[language]` API: `[code snippet]`. - 為以下“[語言]”API 生成用法示例：“[程式碼片段]”。 **Example** : Generate API documentation for the following JavaScript code: **示例**：為以下 JavaScript 程式碼生成 API 文件： ``` /** * Returns the sum of two numbers. * @param {number} a - The first number to add. * @param {number} b - The second number to add. * @returns {number} The sum of a and b. */ function sum(a, b) { return a + b; } ``` ### **查詢優化** - Optimize the following SQL query for better performance: `[SQL query]`. - 優化以下 SQL 查詢以獲得更好的性能：`[SQL 查詢]`。 - Analyze the given SQL query for any potential bottlenecks: `[SQL query]`. - 分析給定的 SQL 查詢是否存在任何潛在瓶頸：`[SQL 查詢]`。 - Suggest indexing strategies for the following SQL query: `[SQL query]`. - 為以下 SQL 查詢建議索引策略：`[SQL 查詢]`。 - Optimize the following NoSQL query for better performance and resource usage: `[NoSQL query]`. - 優化以下 NoSQL 查詢以獲得更好的性能和資源使用：`[NoSQL 查詢]`。 **Example** : Optimize the following SQL query for better performance: **示例**：優化以下 SQL 查詢以獲得更好的性能： ``` SELECT * FROM orders WHERE order_date BETWEEN '2022-01-01' AND '2022-12-31' ORDER BY order_date DESC LIMIT 100; ``` ### **用戶界面設計** - Generate a UI mockup for a `[web/mobile]` application that focuses on [`user goal or task]`. - 為專注於 [`用戶目標或任務]` 的`[web/mobile]` 應用程式生成 UI 模型。 - Suggest improvements to the existing user interface of `[app or website]` to enhance `[usability, accessibility, or aesthetics]`. - 建議改進“[應用程式或網站]”的現有用戶界面，以增強“[可用性、可存取性或美學]”。 - Design a responsive user interface for a `[web/mobile]` app that adapts to different screen sizes and orientations. - 為適應不同螢幕尺寸和方向的“[web/mobile]”應用程式設計響應式用戶界面。 **Example** : Generate a UI mockup for a mobile application that focuses on managing personal finances. **示例**：為專注於管理個人財務的移動應用程式生成 UI 模型。 ### **自動化測試** - Generate test cases for the following [language] function based on the input parameters and expected output: `[function signature]`. - 根據輸入參數和預期輸出為以下 [語言] 函數生成測試用例：`[函數簽名]`。 - Create a test script for the given [language] code that covers [unit/integration/system] testing: `[code snippet]`. - 為涵蓋[單元/集成/系統]測試的給定[語言]程式碼建立測試腳本：`[程式碼片段]`。 - Generate test data for the following [language] function that tests various edge cases: `[function signature]`. - 為以下測試各種邊緣情況的[語言]函數生成測試資料：`[函數簽名]`。 - Design a testing strategy for a [web/mobile] app that includes [unit, integration, system, and/or performance] testing. - 為 [網絡/移動] 應用程式設計測試策略，包括 [單元、集成、系統和/或性能] 測試。 **Example:** Generate test cases for the following Python function based on the input parameters and expected output: **示例：** 根據輸入參數和預期輸出為以下 Python 函數生成測試用例： ``` def divide(a: float, b: float) -> float: if b == 0: raise ZeroDivisionError('division by zero') return a / b ``` ### **程式碼重構** - Suggest refactoring improvements for the following [language] code to enhance readability and maintainability: `[code snippet]`. - 建議對以下 [語言] 程式碼進行重構改進，以增強可讀性和可維護性：`[程式碼片段]`。 - Identify opportunities to apply [design pattern] in the given [language] code: `[code snippet]`. - 確定在給定的[語言]程式碼中應用[設計模式]的機會：`[程式碼片段]`。 - Optimize the following [language] code for better performance: `[code snippet]`. - 優化以下 [語言] 程式碼以獲得更好的性能：`[程式碼片段]`。 **Example** : Optimize the following Python code for better performance: **示例**：優化以下 Python 程式碼以獲得更好的性能： ``` def find_max(numbers): max_num = numbers[0] for num in numbers: if num > max_num: max_num = num return max_num ``` ### **設計模式建議** - Based on the given [language] code, recommend a suitable design pattern to improve its structure: `[code snippet]`. - 根據給定的[語言]程式碼，推薦合適的設計模式來改進其結構：`[程式碼片段]`。 - Identify opportunities to apply the [design pattern] in the following [language] codebase: `[repository URL or codebase description]`. - 確定在以下 [語言] 程式碼庫中應用 [設計模式] 的機會：`[存儲庫 URL 或程式碼庫描述]`。 - Suggest an alternative design pattern for the given [language] code that may provide additional benefits: `[code snippet]`. - 為可能提供額外好處的給定 [語言] 程式碼建議替代設計模式：`[程式碼片段]`。 **Example:** Based on the given Python code, recommend a suitable design pattern to improve its structure: **例子：** 根據給定的Python程式碼，推薦合適的設計模式來改進其結構： ``` class TotalPriceCalculator: def calculate_total(self, items): pass class NormalTotalPriceCalculator(TotalPriceCalculator): def calculate_total(self, items): total = 0 for item in items: total += item.price * item.quantity return total class DiscountedTotalPriceCalculator(TotalPriceCalculator): def calculate_total(self, items): total = 0 for item in items: total += item.price * item.quantity * 0.9 # apply 10% discount return total class Order: def __init__ (self, items, total_price_calculator): self.items = items self.total_price_calculator = total_price_calculator def calculate_total(self): return self.total_price_calculator.calculate_total(self.items) class Item: def __init__ (self, name, price, quantity): self.name = name self.price = price self.quantity = quantity ``` ### **算法開發** - Suggest an optimal algorithm to solve the following problem: `[problem description]`. - 建議解決以下問題的最佳算法：`[問題描述]`。 - Improve the efficiency of the given algorithm for `[specific use case]`: `[algorithm or pseudocode]`. - 為“[特定用例]”提高給定算法的效率：“[算法或偽程式碼]”。 - Design an algorithm that can handle `[large-scale data or high-throughput]` for `[specific task or operation]`. - 為“[特定任務或操作]”設計一種可以處理“[大規模資料或高吞吐量]”的算法。 - Propose a parallel or distributed version of the following algorithm to improve performance: `[algorithm or pseudocode]`. - 提出以下算法的並行或分佈式版本以提高性能：`[算法或偽程式碼]`。 ### **程式碼翻譯** - Translate the following `[source language]` code to `[target language]`: `[code snippet]`. - 將以下“[源語言]”程式碼翻譯成“[目標語言]”：“[程式碼片段]”。 - Convert the given `[source language]` class or module to `[target language]` while preserving its functionality and structure: `[code snippet]`. - 將給定的“[源語言]”類或模塊轉換為“[目標語言]”，同時保留其功能和結構：“[程式碼片段]”。 - Migrate the following `[source language]` code that uses `[library or framework]` to [target language] with a similar library or framework: `[code snippet]`. - 將以下使用“[庫或框架]”的“[源語言]”程式碼遷移到具有類似庫或框架的“目標語言”：“[程式碼片段]”。 **Example:** Translate the following Python code to JavaScript: **示例：**將以下 Python 程式碼轉換為 JavaScript： ``` def factorial(n): if n == 0: return 1 else: return n * factorial(n-1) ``` ### **個性化學習** - Curate a list of resources to learn `[programming language or technology]` based on my current skill level: `[beginner/intermediate/advanced]`. - 根據我目前的技能水平，策劃學習`[編程語言或技術]`的資源列表：`[初學者/中級/高級]`。 - Recommend a learning path to become proficient in `[specific programming domain or technology]` considering my background in `[existing skills or experience]`. - 考慮到我在“[現有技能或經驗]”方面的背景，推薦精通“[特定編程領域或技術]”的學習路徑。 - Suggest project ideas or coding exercises to practice and improve my skills in `[programming language or technology]`. - 建議專案想法或編碼練習，以練習和提高我在“[編程語言或技術]”方面的技能。 ### **程式碼可視化** - Generate a UML diagram for the following `[language]` code: `[code snippet]`. - 為以下“[語言]”程式碼生成一個 UML 圖：“[程式碼片段]”。 - Create a flowchart or visual representation of the given `[language]` algorithm: `[algorithm or pseudocode]`. - 建立給定“[語言]”算法的流程圖或可視化表示：“[算法或偽程式碼]”。 - Visualize the call graph or dependencies of the following `[language]` code: `[code snippet]`. - 可視化以下“[語言]”程式碼的呼叫圖或依賴關係：“[程式碼片段]”。 **Example** : Generate a UML diagram for the following Java code: **示例**：為以下 Java 程式碼生成 UML 圖： ``` public abstract class Vehicle { private String model; public Vehicle(String model) { this.model = model; } public String getModel() { return model; } public abstract void start(); public abstract void stop(); } public class Car extends Vehicle { public Car(String model) { super(model); } @Override public void start() { System.out.println("Starting car engine"); } @Override public void stop() { System.out.println("Stopping car engine"); } } public class Motorcycle extends Vehicle { public Motorcycle(String model) { super(model); } @Override public void start() { System.out.println("Starting motorcycle engine"); } @Override public void stop() { System.out.println("Stopping motorcycle engine"); } } ``` ### **資料可視化** - Generate a bar chart that represents the following data: `[data or dataset description]`. - 生成代表以下資料的條形圖：`[資料或資料集描述]`。 - Create a line chart that visualizes the trend in the following time series data: `[data or dataset description]`. - 建立一個折線圖，將以下時間序列資料的趨勢可視化：`[資料或資料集描述]`。 - Design a heatmap that represents the correlation between the following variables: `[variable list]`. - 設計一個表示以下變數之間相關性的熱圖：`[變數列表]`。 --- 以上，簡單分享，希望對您有幫助！
看youtube看到的 新的<dialog></dialog>標籤內建開關api 範例： ``` const dialog = document.querySelector("dialog") dialog.show() // 打開dialog(原先位置) dialog.showModal() // 打開dialog(置中且屏蔽背景) dialog.close() // 關閉dialog ``` 幾個重點： 1.不用再用CSS display開關 2.用showModal()自動置中且屏蔽背景 3.modal設定css背景方式： ``` dialog::backdrop { background-color: hsl(250, 100%, 50%, 0.25); } ``` 4.可結合form使用，form提供新的method="dialog"，或是form裡面的button設定formmethod="dialog"來關閉 ``` <dialog> <form method="dialog"> <input type="text" /> <button type="submit">Submit</button><!-- 不會submit--> <button formmethod="dialog" type="submit">Cancel</button><!-- 不會submit--> </form> </dialog> ``` 5.如果想要點擊dialog以外的地方自動關閉可用下列程式碼： ``` dialog.addEventListener("click", e => { const dialogDimensions = dialog.getBoundingClientRect() if ( e.clientX < dialogDimensions.left || e.clientX > dialogDimensions.right || e.clientY < dialogDimensions.top || e.clientY > dialogDimensions.bottom ) { dialog.close() } }) ``` 6.dialog.close()方法可以傳值到Dialog.returnValue ``` Dialog.close(valueToPass) const getValue=Dialog.returnValue ``` 參考資料： [Modals Will Never Be The Same - HTML dialog Element](https://blog.webdevsimplified.com/2023-04/html-dialog/) [影片 The New dialog HTML Element Changes Modals Forever ](https://www.youtube.com/watch?v=ywtkJkxJsdg&t=620s)
[【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？](https://ithelp.ithome.com.tw/articles/10312056) ## 前情提要 如果說蟑螂怕拖鞋，老鼠愛大米，任何事物都有相生相剋的道理，那麼前端最害怕什麼呢？ 恐怕就是todo-list。 這應該是前端的四大惡夢之一，並不是因為太難了，而是因為太簡單而且太無聊了， 不只無聊，還是每次教學都必須寫的一個磨難，簡直是瞬間殺死靈魂中隊前端的愛。 今天要來用不同風格寫出todo-list，把代辦事項寫出新滋味。 body裡面一行都沒有也能搞？ 就是可以搞，讓我們馬上來欣賞這段有特別滋味的玩法！ε(*´･∀･｀)зﾞ ## 程式碼 ``` <!DOCTYPE html> <html> <head> <title>Todo List</title> </head> <body></body> <script> //渲染DOM AddHtml(); //資料內容 function AddHtml() { const Data = { h1: "Todo List", button: "Add", }; //主體的DOM const html = `<h1>${Data.h1}</h1> <input type="text" id="input" /> <button onclick="CheckNull()">${Data.button}</button> <ul id="list"></ul>`; //渲染至畫面上 document.body.innerHTML += html; } //邏輯確認:是否有輸入值 function CheckNull() { if (!input.value.trim("")) { return; } else { AddItem(); } } //新增代辦事項 function AddItem() { const li = `<li>${document.getElementById("input").value}</li>`; document.getElementById("list").innerHTML += li; input.value = ""; } </script> </html> ``` [可以貼到try it的地方執行看看效果](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit) ## 觀念筆記 所謂MVC架構就是模型、視圖、控制，背後其實有一個元素貫串任何程式，那就是：「邏輯」 每當你要下手寫一個程式卻不知道怎麼開始動手， 那就是邏輯沒有通順。 網頁不外乎就是畫面，以及資料，還有使用者的操作。 對於todo-list來說就是一個簡單的input畫面，使用者輸入的資料，點下按鈕送出的操作。 這段程式特地不寫任何一行body裡面的東西， 玩弄了一般人對於程式區分的概念。 用模板符的特性讓所有一切交給變數與函式處理，最後三個function： AddHtml、CheckNull、AddItem完美演繹了代辦清單這個網頁所需要構成的底層邏輯。 必須先加入畫面，然後確認使用者操作的條件，最後新增資料。 這樣子的流程對於新手或許不習慣，但是以邏輯面來看比一般人的寫法清晰許多。 這也是未來框架導入後，對資料流更敏感的培養練習。 ## 心得 無聊的todo-list竟然可以搞成這樣！？ 真的是太有趣了(๑╹◡╹๑)！ 原來前端的惡夢也可以變成寫不同風格的天堂，沒錯，寫程式就是這麼千變萬化！ 重點是背後的邏輯抓到了，那麼想要怎麼寫，真的就是藝術的發揮。 請繼續關注， 跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)
## 前情提要 還在寫行內樣式醜醜的嗎？教你不用寫css檔案，使用javascript來動態修改樣式的招數！ 這樣子處理的層次又更不一樣， 前端之路有你有我，馬上來看看這是怎麼完成的。 ## 要修改CSS怎麼做呢？物件儲存 首先樣式寫成物件 ```css= const die={ display:"none" } ``` 為什麼要寫成物件呢？修改一種，可能看不出來，修改很多樣式就能感受到， 物件這個儲存方式是有它特別的美感與好處的。 下面我來舉例： ```css= const wrapperStyle = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: '350px', backgroundColor: '#261d4a', borderRadius: '5px', transition: 'box-shadow .5s ease', overflow: 'hidden' }; ``` ## 語法介紹 Object.assign 使用範例 `Object.assign(element.style,Style)` element是你要修改的元素，Style是樣式寫的object 這是修改一個的情況，當像是上面很多屬性要改的話，我們物件與JS的好處就產生了！ 直接使用迴圈來全部套入： ```javascript= const wrapper = document.getElementsByClassName('wrapper'); for (let i = 0; i < wrapper.length; i++) { Object.assign(wrapper[i].style, wrapperStyle); } ``` [MDN官網說明](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) [JS 原力覺醒 Day27 - JS 常用 API - Object.assign && Object.defineProperty](https://ithelp.ithome.com.tw/notifications) ## 還有沒有別的寫法？ 有。 ``` document.getElementById("myElement").style.cssText = ` display: block; position: absolute; `; ``` 這樣寫也跟原生css寫起來差不多，比較舒服。 用這種比較分離畫面與程式的寫法， 體感上爽度更高。 就不會是找到元素後還要.style.display="none" 一直.屬性.進去點點點這樣。 ## 說好的三種呢？ ``` function setStyle( objId, propertyObject ) { var elem = document.getElementById(objId); for (var property in propertyObject) elem.style[property] = propertyObject[property]; } setStyle('myElement', {'fontsize':'12px', 'left':'200px'}); ``` 這種寫成function的風格我也很愛，感覺很舒服，跟第一個的有點類似卻不太一樣。 這個是把迴圈弄再函式了，所以呼叫一次就會全部修改。 第一個則是把物件內的東西丟給迴圈，一次一次去做改動變化， 邏輯上一模一樣，手段跟風格差異而已唷。 [stackoverflow](https://stackoverflow.com/questions/3968593/how-can-i-set-multiple-css-styles-in-javascript) ## 心得 使用這個小技巧很有趣，之後我們會應用到「JS油猴系列-遮蔽廣告腳本，自定義新增名單」文章裡面。 當要寫腳本，很需要JS動態修改CSS的時候，這種小技巧就佔了很大的角色呢٩(๑•̀ω•́๑)۶！ 是不是沒有想到居然可以用JS修改呀！ 加上我認為比較差的寫法，就不只三種了呢。 趕快選一種喜歡的， 練習成自己的寶藏知識吧！
`React.StrictMode` 是一個好用的元件，用於突出顯示應用程式中的潛在問題。就像 `<Fragment>` 一樣，`<StrictMode>` 不會渲染任何額外的 DOM 元素。在這篇文章中，我們將深入探討什麼是嚴格模式、它是如何運作的，以及為什麼你應該考慮使用看看。 原文出處：https://dev.to/codeofrelevancy/what-is-strict-mode-in-react-3p5b --- ## 什麼是 React 中的嚴格模式？ 嚴格模式是一組開發工具，可幫助您在程式碼中找到潛在問題。當您在 React 應用程式中啟用嚴格模式時，您實際上是在告訴 React 打開一堆額外的檢查👀 和警告，以便幫助您寫出更好的程式碼。這些檢查和警告可以捕獲以下內容： 1. 有副作用的元件 2. 已棄用或不安全的生命週期方法 3. 某些內置函數的不安全用法 4. 列表中的重複鍵  --- ## 啟用嚴格模式 在 React 應用程式中啟用嚴格模式非常簡單。您可以通過在主 `index.js` 文件中加入一行程式碼來實現： ``` import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ``` ## 為應用程式的一部分啟用嚴格模式 您還可以為應用程式的任何部分啟用嚴格模式： ``` import { StrictMode } from 'react'; function App() { return ( <> <Header /> <StrictMode> <main> <Sidebar /> <Content /> </main> </StrictMode> <Footer /> </> ); } ``` 在這種情況下，嚴格模式檢查不會針對“頁首”和“頁腳”元件執行。但是，它們將在 `Sidebar` 和 `Content` 以及它們內部的所有元件上執行，無論它有多深層。 --- ## 嚴格模式只影響開發環境 請務必注意，嚴格模式對 React 應用程式的正式環境建置沒有影響。嚴格模式啟用的任何檢查或警告都不會出現在用戶看到的應用程式最終版本中。除此之外，嚴格模式會打開額外的檢查和警告，它可能會減慢您的開發環境速度。  --- ## 嚴格模式可以幫助你捕捉細微的錯誤 有時 React 應用程式中的錯誤可能很難追踪，特別是諸如 race conditions 或對元件狀態的不正確假設等細微問題。啟用嚴格模式的額外檢查和警告，您可以在這些錯誤導致嚴重問題之前發現它們。 --- ## 嚴格模式可以幫助您了解最新的最佳實踐 React 是一個快速發展的框架，最佳實踐會隨著時間而改變。啟用嚴格模式並留意它提供的警告和建議，您可以確保您的 React 程式碼遵循當前的最佳實踐。例如在渲染列表時使用 key 屬性，或者在 render() 中避免副作用。 --- ## 儘早發現潛在問題 嚴格模式可以在您的程式碼中發現可能在未來引起的問題，以免它們成為嚴重問題。比方說，它可以檢測並警告已棄用的生命週期方法以及對不再推薦的 [findDOMNode()](https://react.dev/reference/react-dom/findDOMNode) 的存取。   --- ## 防止常見錯誤 啟用嚴格模式，您可以避免一些隱晦的常見錯誤，例如：直接修改狀態而不是使用 setState()、使用未宣告變數。 --- ## 辨識不安全的生命週期 React Strict Mode 可以幫助辨識元件中不安全生命週期方法的使用。例如，它可以警告您使用 `componentWillUpdate` 和 `componentWillReceiveProps` 方法，這兩種方法都被認為是不安全的，將在 React 的未來版本中被刪除。  假設您有一個元件，它使用 `componentWillReceiveProps()` 來根據傳入的 props 更新其狀態： ``` class BlackMamba extends React.Component { constructor(props) { super(props); this.state = { venom: props.venom }; } componentWillReceiveProps(nextProps) { this.setState({ venom: nextProps.venom }); } render() { return <div>{this.state.venom}</div>; } } ``` 在常規模式下，該元件會按預期工作，但在“React.StrictMode”下，您會在控制台中看到一條警告： > 警告：BlackMamba 使用 `componentWillReceiveProps`，這被認為是一種不安全的生命週期方法。請使用靜態的 getDerivedStateFromProps 。 --- ## 過時的字串引用 API 用法 嚴格模式還可以警告您過時的字串 `ref` API 的使用。該 API 已被官方棄用。您應該使用更安全、更易於使用的 `createRef` API。  比方說，您有一個元件使用這樣的字串引用： ``` import { Component } from "react"; import { createRoot } from "react-dom/client"; class BlackMamba extends Component { componentDidMount() { this.refs.venom.focus(); } render() { return ( <> <h1>Black Mamba</h1> <input ref="venom" /> </> ); } } const root = createRoot(document.getElementById("root")); root.render(<BlackMamba />); ``` 您不會在控制台中看到任何錯誤。  當您像這樣在您的應用中啟用“React.StrictMode”時： ``` import { StrictMode, Component } from "react"; import { createRoot } from "react-dom/client"; class BlackMamba extends Component { componentDidMount() { this.refs.venom.focus(); } render() { return ( <> <h1>Black Mamba</h1> <input ref="venom" /> </> ); } } const root = createRoot(document.getElementById("root")); root.render( <StrictMode> <BlackMamba /> </StrictMode> ); ``` 您會在控制台中看到如下所示的警告： > Warning: A string ref, "venom", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref  讓我們用 `createRef` API 修復它： ``` import { StrictMode, Component, createRef } from "react"; import { createRoot } from "react-dom/client"; class BlackMamba extends Component { constructor(props) { super(props); this.venom = createRef(); } componentDidMount() { this.venom.current.focus(); } render() { return ( <> <h1>Black Mamba</h1> <input ref={this.venom} /> </> ); } } const root = createRoot(document.getElementById("root")); root.render( <StrictMode> <BlackMamba /> </StrictMode> ); ``` 修理完成！  --- ## 過時的 Context API [舊版 Context API](https://legacy.reactjs.org/docs/legacy-context.html) 在 React 中已棄用，已被新的 Context API 取代。 React Strict Mode 可以幫助您檢測過時的 Context API 的任何使用情況，並鼓勵您切換到 [新 API](https://react.dev/reference/react/useContext)  --- 如果您還沒有使用嚴格模式，那絕對值得使用看看！ 以上簡單分享，希望對您有幫助！
做作業時，想利用JS去修改form裡的required，但一直沒有成功。有去爬文，以下網址是我覺得說的挺詳細的，但文內的方法都還是失敗，問題是出在哪裡，能給我一點提示或想法嗎，謝謝! 我試了: 1.element.setAttribute("required", ""); 2.edName.required = true; 網址: https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript 作業: https://clothes-form.glitch.me
這裡有多種簡短而強大的 JavaScript 技巧，可以最大限度地提高生產力 ⚡️ 並最大限度地減少痛苦 🩸。 讓我們深入研究看看🤘 原文出處：https://dev.to/ironcladdev/15-killer-js-techniques-youve-probably-never-heard-of-1lgp ### 唯一陣列 過濾掉陣列中的重複值。 ``` const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a', 'b', 'c', 'd', 'e'] ``` ### 唯一的物件陣列 `Set` 物件不允許您過濾掉重複的物件，因為每個物件都是不同的。 `JSON.stringify` 在這裡幫我們解決了這個問題。 ``` const arr = [{ key: 'value' }, { key2: 'value2' }, { key: 'value' }, { key3: 'value3' }]; const uniqueObjects = Array.from( new Set( arr.map(JSON.stringify) ) ).map(JSON.parse) console.log(uniqueObjects); ``` 在 [此評論](https://dev.to/jonrandy/comment/24ojn) 中查看更有效但稍長的方法。 ### 陣列迭代器索引 通過 `.map` 和 `.forEach` javascript 迭代函數，您可以獲得每個項目的索引。 ``` const arr = ['a', 'b', 'c']; const letterPositions = arr.map( (char, index) => `${char} is at index ${index}` ) ``` ### 按字元數拆分字串 我們可以使用 `.match` 正則表達式函數將字串拆分為 `n` 個字符。 ``` const str = "asdfghjklmnopq"; const splitPairs = str.match(/.{1,2}/g); console.log(splitPairs); // ['as', 'df', 'gh', 'jk', 'lm', 'no', 'pq'] ``` ### 用不同的字元拆分字串 另一個使用 .match 的正則表達式 hack 允許您將像“aabbc”這樣的字串拆分為陣列“[”aa”，“bb”，“c”]`。 ``` const str = "abbcccdeefghhiijklll"; const splitChars = str.match(/(.)\1*/g); console.log(splitChars); // ['a', 'bb', 'ccc', 'd', 'ee', 'f', 'g', 'hh', 'ii', 'j', 'k', 'lll'] ``` ### 遍歷物件 `Object.entries` 允許我們將 JSON 物件轉換為鍵值對陣列，從而使我們能夠使用循環或陣列迭代器對其進行迭代。 ``` const obj = { "key1": "value1", "key2": "value2", "key3": "value3" }; const iteratedObject = Object.entries(obj) .map(([key, value]) => `${key} = ${value}`); console.log(iteratedObject); // ['key1 = value1', 'key2 = value2', 'key3 = value3'] ``` ### 鍵值陣列到物件 您可以使用“Object.fromEntries”將“Object.entryified”鍵值對陣列轉換回物件 ``` const entryified = [ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"] ]; const originalObject = Object.fromEntries(entryified); console.log(originalObject); // { key1: 'value1', ... } ``` ### 發生次數計數 您可能想計算一個專案在陣列中出現的次數。我們可以使用帶有迭代器的 .filter 函數來完成此操作。 ``` const occurrences = ["a", "b", "c", "c", "d", "a", "a", "e", "f", "e", "f", "g", "f", "f", "f"]; // creating a unique array to avoid counting the same char more than once const unique = Array.from(new Set(occurrences)); const occurrenceCount = Object.fromEntries( unique.map(char => { const occurrenceCount = occurrences.filter(c => c === char).length; return [char, occurrenceCount] }) ) console.log(occurrenceCount); // { a: 3, b: 1, c: 2, ... } ``` 在 [此評論](https://dev.to/jonrandy/comment/24ojn) 中查看可靠的單行程式碼以執行此操作！ ### 替換回調 `.replace` 函數並不限制您只能用固定字串替換。您可以將回調傳遞給它並使用匹配的子字串。 ``` const string = "a dog went to dig and dug a doggone large hole"; const replacedString = string.replace(/d.g/g, str => str + "gy") console.log(replacedString); // a doggy went to diggy and duggy a doggygone large hole ``` ### 條件串接 你們中的許多人都熟悉在 JS 中遇到未定義的錯誤，條件連結可以防止很多這種情況的發生。 > **可選連結** (`?.`) 運算符存取物件的屬性或呼叫函數。如果使用此運算符存取的對像或呼叫的函數未定義或為空，則表達式短路併計算為未定義，而不是拋出錯誤。 ``` const obj = { "a": "aaaaaaa", "b": null }; console.log(obj.b.d); // throws an error console.log(obj.b?.d); // returns undefined ``` ### 限定一個數字 通常，您可能需要將數字限制在特定範圍內。每次需要時都用三元運算符來做是一件很痛苦的事情。函數要乾淨得多。 ``` const constrain = (num, min, max) => { if(num < min) return min; else if(num > max) return max; else return num; } constrain(5, 1, 3) // 3 constrain(2, 1, 5) // 2 constrain(0, -100, 100) // 0 ``` 一個更好的方法是像這樣使用 `Math.min` 和 `Math.max`： ``` const constrain = (num, min, max) => Math.min(Math.max(num, min), max) ``` ### 索引陣列的前後 `.at` 函數允許您使用正數和負數從頭到尾對陣列進行索引。 ``` const arr = [1, 2, 3, 4, 5]; arr.at(0) // 1 arr.at(1) // 2 arr.at(-1) // 5 arr.at(-2) // 4 ``` ### 按字母順序排序 按字母順序對字串陣列進行排序 ``` const words = ["javascript", "typescript", "python", "ruby", "swift", "go", "clojure"]; const sorted = words.sort((a, b) => a.localeCompare(b)); console.log(sorted); // ['clojure', 'go', 'javascript', 'python', 'ruby', 'swift', 'typescript'] ``` 💡 **提示**：您可以通過將 `a.localeCompare(b)` 切換為 `b.localeCompare(a)` 來切換升序和降序 ### 按 Truthy/Falsy 值排序 您可以按真值/假值對陣列進行排序，將具有真值的值放在最前面，然後是假值。 ``` const users = [ { "name": "john", "subscribed": false }, { "name": "jane", "subscribed": true }, { "name": "jean", "subscribed": false }, { "name": "george", "subscribed": true }, { "name": "jelly", "subscribed": true }, { "name": "john", "subscribed": false } ]; const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed)) ``` `Number(false)` 等於 0，`Number(true)` 等於 1。這就是我們如何通過排序函數傳遞它。 ### 四捨五入到 `n` 位 您可以使用 .toFixed 將小數四捨五入為 n 位。請注意，`.toFixed` 將數字轉換為字串，因此我們必須將其重新解析為數字。 ``` console.log(Math.PI); // 3.141592653589793 console.log(Number(Math.PI.toFixed(2))) ``` --- 感謝閱讀✨！
隨著技術的日新月異，開發人員正在獲得令人難以置信的新**工具**和**API**。 讓我們來看看一些有用的 **Web API**，它們可以幫助您將網站變得更強大！ 原文出處：https://dev.to/ruppysuppy/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-38bc ## 1. Screen Capture API **螢幕截圖 API**，顧名思義，允許您截圖螢幕的內容，讓開發 **螢幕錄像機** 的過程變得輕而易舉。 您需要一個 **video** 元素來顯示要抓的畫面。 **開始**按鈕將開始**抓取畫面**。 ``` <video id="preview" autoplay> Your browser doesn't support HTML5. </video> <button id="start" class="btn">Start</button> ``` ``` const previewElem = document.getElementById("preview"); const startBtn = document.getElementById("start"); async function startRecording() { previewElem.srcObject = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true, }); } startBtn.addEventListener("click", startRecording); ``` ## 2. Web Share API **Web Share API** 允許您將**文字**、**連結**和**甚至檔案**從**網頁共享到設備上安裝的其他應用程式**。 ``` async function shareHandler() { navigator.share({ title: "Tapajyoti Bose | Portfolio", text: "Check out my website", url: "https://tapajyoti-bose.vercel.app/", }); } ``` **注意：** 要使用 **Web Share API**，您需要用戶進行過互動。例如，**按鈕點擊**或**觸摸事件**。 ## 3. Intersection Observer API **Intersection Observer API** 允許您**檢測元素何時進入或離開畫面**。這對於實現**無限滾動**非常有用。 https://codepen.io/ruppysuppy/pen/abBeZwj **注意：** 由於我個人的喜好，該範例使用 **React**，但您可以使用 **任何框架** 或 **vanilla JavaScript**。 ## 4. Clipboard API **剪貼板 API** 允許您**讀取資料**並將資料寫入**剪貼板**。這對於開發 **複製到剪貼板** 功能很有用。 ``` async function copyHandler() { const text = "https://tapajyoti-bose.vercel.app/"; navigator.clipboard.writeText(text); } ``` ## 5. Screen Wake Lock API 有沒有想過 **YouTube** 如何防止螢幕在播放影片時被關閉？其實，那是因為 **Screen Wake Lock API**。 ``` let wakeLock = null; async function lockHandler() { wakeLock = await navigator.wakeLock.request("screen"); } async function releaseHandler() { await wakeLock.release(); wakeLock = null; } ``` **注意：**如果頁面已經在螢幕上可見，您只能使用**螢幕喚醒鎖定 API**。否則，它會拋出錯誤。 ## 6. Screen Orientation API **螢幕方向 API** 允許您檢查螢幕的**當前方向**，甚至**將其鎖定**到特定方向。 ``` async function lockHandler() { await screen.orientation.lock("portrait"); } function releaseHandler() { screen.orientation.unlock(); } function getOrientation() { return screen.orientation.type; } ```  ## 7. Fullscreen API **全屏 API** 允許您以**全屏**顯示元素或整個頁面。 ``` async function enterFullscreen() { await document.documentElement.requestFullscreen(); } async function exitFullscreen() { await document.exitFullscreen(); } ``` **注意：**要同時使用**全屏 API**，您需要用戶進行過互動。 --- 以上簡單分享，希望對您有幫助！
## 題目說明  寫出這樣子的網頁切版 ### 示範效果  CODEPEN:https://codepen.io/flwrtykd-the-scripter/pen/VwGyOwa ## 代碼寫法 ### HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>貓咪網站</title> </head> <body> <div class="wrap"> <div class="hero"> <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" alt="" /> <div class="text"> <span class="red">有貓咪也有狗，</span> <br /> <span class="red">甚至是螳螂！</span> <br /> <span class="green">隨便讓你領養</span> </div> </div> <div class="content"> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> </div> <div class="footer"> <p>@copy right 這邊就是一些文字</p> </div> </div> </body> </html> ``` ### CSS ``` body { background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80"); overflow: hidden; } .wrap { width: 1000px; background-color: #e9edc9; margin: 0 auto; height: 100vh; margin-top: -10px; } .hero img { width: 100%; height: 250px; object-fit: cover; object-position: 0px 1px; } .hero span { font-size: 45px; } .hero .green { font-size: 35px; } .text { position: absolute; top: 35px; left: 250px; font-weight: 900; text-shadow: 2px 2px 5px white; border-left: 5px solid yellow; } .text > * { margin-left: 20px; } .content { display: flex; justify-content: space-around; margin-top: 40px; } .block { width: 250px; border: 1px solid black; } .block img { width: 100%; } .block p { padding: 5px 20px; } .block:nth-child(1) { margin-left: 25px; } .footer { background-color: black; color: white; text-align: center; height: 30px; } .footer p { transform: translateY(25%); } ``` ## 布局解釋 ### 背景以及格局 先設定一個背景 background img之後 使用wrap來製造一個效果是左右縮窄 只要設定width 以及margin auto 0就可以了 之後我使用三個分區 分別是上到下的四個div: hero 裡面有大圖片 text是標題文字 然後是content裡面放置三個block裝著小圖片跟內容文字 最底下是footer放著版權說明 ### hero & text hero就放圖片 width設定100%即可 text的話我裡面用三個span寫文字 設定class分別調整樣式 換行是使用br標籤 其中左邊的書籤效果(黃色長長那條) 是對text這個div使用border left完成的 ### content 這邊的話 先對content的div設定display flex達到水平排列的效果 其中可以用justify content讓它space around 平均分散開 再使用:nth-child(1) 去針對第一個block調整margin left 讓排版更精準 裡面的話 寫一個block 完成後再複製成三個 block放置img跟p即可 而它本身也要用一個border製造出邊線的效果 ### footer 我使用 transform: translateY(25%); 讓文字有點垂直置中的感覺 這都可以自己微調 ## 特別注意 在hero的img調整上我使用了 object-fit object-position 這兩個屬性去微調 這個是很好用的小技巧，可以特別留意 ## 心得 這種切板很常見 使用的伎倆其實差不多就那些 學習上 可以藉由先完成效果 再尋求優化的原則 以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片 我未來可以寫一系列的切版文來跟大家交流～～～
您好，請問幾個問題。 1.為什麼我使用position:relative，網頁會出現很大的空白，我該如何解決。 2.使用絕對位置，我該如何讓我的網頁隨著比例縮放。 問題1 :  問題2:   這是網頁全開的時候  HTML: ``` <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>佳加安全帽</title> <link rel = "stylesheet" href = "style.css"> </head> <body class = "page"> <div class = "navbar"> <div class="container"> <div class = "logo"> <a href = "#"><img src = "jiajia.jpg"/></a> </div> <div class="menu"> <ul class="choose"> <li><a href = "">所有商品</a></li> <li><a href = "">特價商品</a></li> <li><a href = "">安全帽</a></li> <li><a href = "">藍芽耳機</a></li> <li><a href = "">裝備衣物</a></li> <li><a href = "">配件</a></li> <li><a href = "">包包</a></li> </ul> </div> <div class="user"> <ul> <li><a href = "">Log in 登入</a></li> <li>|</li> <li><a href = "">Sign up 註冊</a></li> </ul> </div> </div> </div> <div class="background"> <div class="content"> <h1>在危險的世界中，給你多一份安全</h1> </br> </br> <p>留下您的email，獲得新商品及最新優惠資訊</p> </br> <input type= "email" name = "email" value = "Your email"> </br> <input class="submit" type = "submit" name= "submit" value = "訂閱"> </div> </div> </body> </html> ``` CSS: ``` *{ margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; } .navbar{ background-color: #272727; height: 50px; width: 100%; } .logo img{ height: 50px; } .menu{ position: relative; top: -50px; line-height: 45px; left: 500px; } .menu li{ float: left; } .menu a{ color: #D9B300; display: block; padding: 0 10px; } .menu a:hover{ background-color: #D9B300; color: #272727; } .user{ position: relative; top: -50px; left: 800px; line-height: 45px; } .user li{ float: left; color: #D9B300; } .user a{ color: #D9B300; display: block; padding: 0 10px; } .user a:hover{ background-color: #D9B300; color: #272727; } h1{ color: white; } p{ color: white; } .background{ background-image: url("motor.jpg"); background-size: cover; background-repeat: no-repeat; height: 660px; text-align: center; } .content input{ width: 400px; height: 40px; } .content h1{ font-size: 40px; } .content p{ font-size: 20px; } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .submit{ font-weight: bold; font-size: 20px; background-color: #D9B300; color: #272727; border-radius: 10px; border: 0px; } .submit:hover{ background-color: #272727; color: #D9B300; }
使用 useWorker 在單獨的執行緒中，處理昂貴且阻塞 UI 的任務。 眾所周知，Javascript 是一種單線程語言。所以，做任何昂貴的任務，它都會阻塞 UI 互動。用戶需要等到它完成，才能執行剩餘的其他操作，這會帶來糟糕的用戶體驗。 為了克服和執行這些任務，Javascript 有一個名為 [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) 的解決方案，它允許在 web 中執行消耗效能的任務時，瀏覽器不會阻塞用戶界面，使用戶體驗非常流暢。 本篇文章簡單介紹這個 hook。 原文出處：https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8 --- ## Web Workers Web Worker 是一個在後台執行而不影響用戶界面的腳本，因為它在一個單獨的線程而不是主線程中執行。所以它不會對用戶交互造成任何阻塞。 Web Worker 主要用於在 Web 瀏覽器中執行昂貴的任務，例如對大量資料進行排序、CSV 導出、圖像處理等。  參考上圖，我們可以看到一個昂貴的任務是由一個工作線程並行執行的，而不會阻塞主線程。當我們在主線程中執行相同的操作時，會導致 UI 阻塞。 ## React 中的 Concurrent mode 呢？ React [並發模式](https://beta.reactjs.org/reference/react/startTransition) 不會並行執行任務。它將非緊急任務轉移，接著立即執行緊急任務。它使用相同的主線程來處理。 正如我們在下圖中看到的，緊急任務是使用上下文切換來處理的。例如，如果一個表正在呈現一個大型資料集，並且用戶試圖搜尋某些內容，React 會將任務切換為用戶搜尋，並首先處理它，如下所示。  當為同一任務使用 worker 時，表格渲染在一個單獨的線程中並行執行。檢查下圖。  ## useWorker [useWorker](https://github.com/alewin/useWorker) 是一個通過 React Hooks 在簡單配置中使用 Web Worker API 的函式庫。它支持在不阻塞 UI 的情況下執行昂貴任務，支援 promise 而不是事件監聽器，還有一些值得注意的功能： 1. 結束超時 worker 的選項 2. 遠程依賴 3. Transferable 4. Worker status > useWorker 是一個 3KB 的庫 ## 為什麼不用 JavaScript 內置 web worker？ 在使用 javascript web worker 時，我們需要加入一些複雜的配置，來設置多行程式碼的 worker。使用 useWorker，我們可以簡化 worker 的設置。讓我們在下面的程式碼中，看看兩者之間的區別。 ## 在 React App 中使用 JS Web Worker 時 ``` // webworker.js self.addEventListener("message", function(event) { var numbers = [...event.data] postMessage(numbers.sort()) }); ``` ``` //index.js var webworker = new Worker("./webworker.js"); webworker.postMessage([3,2,1]); webworker.addEventListener("message", function(event) { console.log("Message from worker:", event.data); // [1,2,3] }); ``` ## 在 React App 中使用 useWorker 時 ``` // index.js const sortNumbers = numbers => ([...numbers].sort()) const [sortWorker] = useWorker(sortNumbers); const result = await sortWorker([1,2,3]) ``` 正如我之前所說，與普通的 javascript worker 相比，`useWorker()` 簡化了配置。 讓我們與 React App 整合並執行高 CPU 密集型任務，來看看 useWorker() 的實際執行情況。 ## Quick Start 要將 useWorker() 加入到 React 專案，請使用以下命令 `yarn add @koale/useworker` 安裝套件後，導入 useWorker()。 `import { useWorker, WORKER_STATUS } from "@koale/useworker";` 我們從函式庫中導入 useWorker 和 WORKER_STATUS。 **useWorker()** 鉤子返回 workerFn 和 controller。 1. `workerFn` 是允許使用 web worker 執行函數的函數。 2.controller 由 status 和 kill 參數組成。 status 參數返回 worker 的狀態和用於終止當前執行的 worker 的 kill 函數。 讓我們用一個例子來看看 **useWorker()**。 使用 **useWorker()** 和主線程對大型陣列進行排序 首先建立一個SortingArray元件，加入如下程式碼 ``` //Sorting.js import React from "react"; import { useWorker, WORKER_STATUS } from "@koale/useworker"; import { useToasts } from "react-toast-notifications"; import bubleSort from "./algorithms/bublesort"; const numbers = [...Array(50000)].map(() => Math.floor(Math.random() * 1000000) ); function SortingArray() { const { addToast } = useToasts(); const [sortStatus, setSortStatus] = React.useState(false); const [sortWorker, { status: sortWorkerStatus }] = useWorker(bubleSort); console.log("WORKER:", sortWorkerStatus); const onSortClick = () => { setSortStatus(true); const result = bubleSort(numbers); setSortStatus(false); addToast("Finished: Sort", { appearance: "success" }); console.log("Buble Sort", result); }; const onWorkerSortClick = () => { sortWorker(numbers).then((result) => { console.log("Buble Sort useWorker()", result); addToast("Finished: Sort using useWorker.", { appearance: "success" }); }); }; return ( <div> <section className="App-section"> <button type="button" disabled={sortStatus} className="App-button" onClick={() => onSortClick()} > {sortStatus ? `Loading...` : `Buble Sort`} </button> <button type="button" disabled={sortWorkerStatus === WORKER_STATUS.RUNNING} className="App-button" onClick={() => onWorkerSortClick()} > {sortWorkerStatus === WORKER_STATUS.RUNNING ? `Loading...` : `Buble Sort useWorker()`} </button> </section> <section className="App-section"> <span style={{ color: "white" }}> Open DevTools console to see the results. </span> </section> </div> ); } export default SortingArray; ``` 這裡我們配置了 useWorker 並傳遞了 bubleSort 函數來使用 worker 執行昂貴的排序。 接下來，將以下程式碼加入到 App.js 元件，並導入 SortingArray 元件。 ``` //App.js import React from "react"; import { ToastProvider } from "react-toast-notifications"; import SortingArray from "./pages/SortingArray"; import logo from "./react.png"; import "./style.css"; let turn = 0; function infiniteLoop() { const lgoo = document.querySelector(".App-logo"); turn += 8; lgoo.style.transform = `rotate(${turn % 360}deg)`; } export default function App() { React.useEffect(() => { const loopInterval = setInterval(infiniteLoop, 100); return () => clearInterval(loopInterval); }, []); return ( <ToastProvider> <div className="App"> <h1 className="App-Title">useWorker</h1> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <ul> <li>Sorting Demo</li> </ul> </header> <hr /> </div> <div> <SortingArray /> </div> </ToastProvider> ); } ``` 我們已將 React 徽標加入到 **App.js** 元件，該組件每 **100ms** 旋轉一次，以直觀地表示執行昂貴任務時的阻塞和非阻塞 UI。 執行上面的程式碼時，我們可以看到兩個按鈕 Normal Sort 和 Sort using **useWorker()**。 接下來，單擊 Normal Sort 按鈕在主線程中對陣列進行排序。我們可以看到 React 徽標停止旋轉幾秒鐘。由於排序任務阻塞了UI渲染，所以排序完成後logo又開始旋轉了。這是因為兩個任務都在主線程中處理。檢查以下gif  讓我們使用 [chrome 性能記錄](https://developer.chrome.com/docs/devtools/performance/) 檢查其性能分析。  我們可以看到 Event: click 任務用了 **3.86 秒** 來完成這個過程，它阻塞了主線程 3.86 秒。 接下來，讓我們嘗試使用 **useWorker()** 選項進行排序。點擊它的時候我們可以看到 react logo 還在不間斷的旋轉。由於 useWorker 在不阻塞 UI 的情況下在後台執行排序。這使得用戶體驗非常流暢。檢查以下gif  您還可以使用 `sortWorkerStatus` 在控制台中看到 worker 狀態為 **RUNNING**、**SUCCESS**。 讓我們看看這種方法的性能分析結果   正如我們所看到的，第一張圖片表示主線程中沒有長時間執行的進程。在第二張圖片中，我們可以看到排序任務由一個單獨的工作線程處理。所以主線程沒有阻塞任務。 您可以在以下沙箱中試用整個範例。 https://codesandbox.io/embed/useworker-sorting-example-041qhc?fontsize=14&hidenavigation=1&theme=dark ## 何時使用worker 1.圖像處理 2. 排序或處理大資料集。 3. 大資料CSV或Excel導出。 4. 畫布繪圖 5. 任何 CPU 密集型任務。 ## useWorker 的限制 1. web worker 無權存取 window 物件和 document。 2. 當 worker 正在執行時，我們不能再次呼叫它，直到它完成或被中止。為了解決這個問題，我們可以建立兩個或多個 useWorker() 鉤子實例。 3. Web Worker 無法返回函數，因為響應是序列化的。 4. Web Workers 受限於最終用戶機器的可用 CPU 內核和內存。 ## 結論 Web Worker 允許在 React 應用程式中使用多線程來執行昂貴的任務而不會阻塞 UI。而 useWorker 允許在 React 應用程式中以簡化的掛鉤方法使用 Web Worker API。 Worker 不應該被過度使用，我們應該只在必要時使用它，否則會增加管理 Worker 的複雜性。
# 主題 一直覺得看別人的code可以學到很多 不只是方法還有寫程式的觀念 想許願新的教學文章是 帶著看code 解讀網頁上實際運用到的東西 我第一個想丟出來討論的是破解右鍵 # 程式碼 ```javascript= javascript: (function() { function R(a) { ona = "on" + a; if (window.addEventListener) window.addEventListener(a, function(e) { for (var n = e.originalTarget; n; n = n.parentNode) n[ona] = null; }, true); window[ona] = null; document[ona] = null; if (document.body) document.body[ona] = null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart"); } )() ``` # 我的觀察與分析 ## 程式風格分析 我只看的出來這邊 他非常非常聰明 的利用一個function 去做一堆addEventListener 感覺這是pureJs很漂亮的寫法 而不是每個都在那邊addEventListener五坨 似乎這樣寫會比較乾淨 或者說有概念 總之就是比較酷也比較厲害的感覺 ### 我的看法 不知道有沒有什麼名詞可以形容這個概念 如果是Jquery 我覺得類似手法應該是變成一個Jquery物件群組（不太確定這個名詞） 然後再直接live或on或是trigger好像就可以了！？ ## 程式內容討論 originalTarget跟parentNode可以查MDN看到，不過還是不太了解具體內涵。 大概只知道原理應該就是解除所有，監聽那些「禁止操作」的listener 但搞不太清楚怎麼寫成這樣子 ### 我的看法 感覺如果用Jquery 似乎可以直接unbind就解決了！？ # 總結 以上我覺得這題材是很不錯的討論 目前網路上應該都沒有人願意進行這種探討 但這恐怕卻是最多人接觸JS的其中一環 有點矛盾XD 看是不是有機會可以以此為題材 針對code去重構 分析討論都滿好的～～～ 如果各位同學也好奇的一起＋１ 或是有懂的 也來分享！！ 一起交流這塊 # 後記 這樣慢慢學習的日子感覺我自己真的進步很多 從前連markdown是什麼都不懂 現在都能使用 而且發現根本就很簡單 github 的push也是 都慢慢跳脫舒適圈 才發現以前卡關就是不太去嘗試 希望大家都能越來越厲害！！
使用這些單行程式碼將您的 JavaScript 技能提升到全新水平，這也將節省您很多開發時間 🚀 原文出處：https://dev.to/nfrankel/20-killer-javascript-one-liners-thatll-save-you-hours-of-coding-o14 --- ###1) 查找陣列中的最大值： ``` Math.max(...array) ``` ###2) 從陣列中刪除重複項： ``` [...new Set(array)] ``` ###3) 生成一個介於 1 和 100 之間的隨機數： ``` Math.floor(Math.random() * 100) + 1 ``` ###4) 檢查字串是否為有效數字： ``` !isNaN(parseFloat(string)) ``` ###5) 獲取當前日期和時間： ``` new Date().toString() ``` ###6) 檢查變數是否為陣列： ``` Array.isArray(variable) ``` ###7) 檢查一個變數是否是物件： ``` typeof variable === "object" ``` ###8) 將陣列轉換為字串： ``` array.join(",") ``` ###9) 檢查一個變數是否是函數： ``` typeof variable === "function" ``` ###10) 將物件轉換為陣列： ``` Object.values(object) ``` ###11) 計算陣列中元素的出現次數： ``` array.filter(x => x === element).length ``` ###12) 使用動態鍵和值建立一個新物件： ``` { [key]: value } ``` ###13) 檢查字串是否為回文： ``` string === string.split("").reverse().join("") ``` ###14) 獲取陣列中所有數字的總和 ``` array.reduce((a, b) => a + b, 0)); ``` ###15) 獲取當前時間戳： ``` Date.now() ``` ###16) 檢查變數是否為 null： ``` variable === null ``` ###17) 檢查變數是否未定義： ``` typeof variable === "undefined" ``` ###18) 查找陣列中的最小值 ``` Math.min(...array) ``` ###19) 檢查陣列是否為空： ``` array.length === 0 ``` ###20) 建立一個具有指定範圍數字的新陣列： ``` Array.from({ length: n }, (_, i) => i) ``` --- 以上簡單分享，希望對您有幫助！
我用XMLHttpRequest實作一個， 找到米特某文章所有圖片的程式碼 其中也會找到上一頁的網址 儲存為url ``` let space url="https://meteor.today/article/a6GSu4" async function test(){let req=new XMLHttpRequest; req.open("get",url); req.onload=function(){ space=this.response; //parser與DOM操作 let parser = new DOMParser(); let parsed = parser.parseFromString(space, "text/html"); let text=parsed.getElementById("article_content") let texted=text.innerText.split("\n") //把圖片網址call出來 for (j=0;j<texted.length;j++){ if(texted[j].search(".jpg")>-1){console.log('https'+texted[j].split("https")[1])}; } //上一頁的網址 url=parsed.querySelector("body > div.pusher > div.ts.container > div.ts.relaxed.grid > div.nine.wide.computer.sixteen.wide.mobile.column > div:nth-child(2) > div.ts.stackable.two.column.grid > div:nth-child(1) > a").href; //這個新的url我想要把它拿出來，讓我未來迴圈可以用！ } req.send(); } test() ``` 我的主要問題是， 我想要拿出來的這個url拿不出來， 並沒有讓我可以呼叫url=上一頁 似乎是因為這個變數在XMLHttpRequest的過程中存取的，因此執行完就拿不到（？ （去年五月就開始研究的．．．一直找不到相關解法QQ）
## 課程目標 能夠從陣列刪除元素 認識 for in 迴圈寫法 認識匿名函式（anonymous function） ## 課程內容 在 JavaScript 中，刪除陣列元素的方法，有超多種 這邊介紹一種根據索引刪除的方法 ``` var fruits = ["apple", "banana", "orange"]; var index = 1; var num = 1; fruits.splice(index, num) console.log(fruits) ``` `.splice()` 函式第一個傳索引，第二個傳要刪的數量，通常就傳 1 就好了（一次刪一個即可） 實務上，你就根據情況，隨便找一個能用的方式，來操作陣列就對了 --- 之前我們介紹過 for of 的寫法，很簡單好用 ``` var fruits = ["apple", "banana", "orange"]; for (const fruit of fruits) { console.log(fruit) } ``` 這邊多介紹一個 for in 的寫法，需要索引時可以用 ``` var fruits = ["apple", "banana", "orange"]; for (const index in fruits) { const fruit = fruits[index]; console.log(index); console.log(fruit); } ``` --- 最後來介紹匿名函式（anonymous function） 聽起來很玄，但其實就只是沒有名字的函式而已 以下是有名字的函式 ``` function hello1() { alert("hello1"); } var hello2 = () => { alert("hello2"); } ``` 以下是沒有名字的函式 ``` <button> hello </button> ``` ``` var button = document.querySelector('button'); button.onclick = () => { alert(123) }; ``` 動態宣告一個函式，然後直接指派、使用，就是匿名函式 在 JavaScript 中，很多時候，有些小任務，需要宣告新函式來用，但又懶得去設計命名那些的 這時候就可以用匿名函式來節省時間 雖然看起來有點不習慣、有點奇怪 但在實務上，非常多地方，其實都會用到匿名函式，算是 JavaScript 非常好用的一個功能、特性 ## 課後作業 接續上一課作業，這次來實作「刪除事項」 請更新 `render` 函式，讓 UI 看起來像這樣 ``` <ul> <li> <span>倒垃圾</span> <button>刪除</button> </li> <li> <span>繳電話費</span> <button>刪除</button> </li> <li> <span>採買本週食材</span> <button>刪除</button> </li> </ul> ``` 然後在過程中，動態產生 button 的時候，將 `.onclick` 屬性設定為一個 arrow function 這個 arrow function 不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` deleteBtn.onclick = () => { // 請寫出此 arrow function 內容（更新 todos 陣列） render(); }; ``` --- 提示：由於 javascript 中 hoisting 的特性，for loop 拿到的索引，在裡面的 arrow function 中使用，很容易抓錯 關於索引一直拿不到的問題，請參閱這邊我跟 birdie 同學的討論 https://codelove.tw/@birdie2019/post/2anbka --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠新增元素到陣列 ## 課程內容 因為我們不再使用「在各處胡亂更新各處 DOM」的寫法 現在要認真開始學習，如何在 JavaScript 中，用各種變數、資料型別，建立出 data model 這一課來學學新增元素到陣列的方法 ``` <button onclick="more()"> more </button> ``` ``` var fruits = ["apple", "banana"]; function more() { fruits.push("orange"); console.log(fruits); } ``` 非常簡單，使用陣列的 `.push()` 函式就可以 在 JavaScript 中，陣列相關操作的函式、寫法，有非常多種 我的建議是，各種寫法都可以，如果你有查到，隨便挑你喜歡的用就可以了 ## 課後作業 接續上一課作業，這次來實作「新增事項」 請在 html 的部份加入「輸入資料的 UI」，大概類似這樣 ``` <input type="text"> <button onclick="add()">新增</button> <div id="root"> </div> ``` 接著請將 `add` 函式完成，過程中不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` function add() { // 請寫出此函式內容（更新 todos 陣列） render(); } ``` 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能使用 Local Storage 相關功能 ## 課程內容 Local Storage 提供了前端開發者簡易的儲存功能，能夠把資料儲存在瀏覽器上 跟 cookie 不同的是，local storage 的資料不會挾帶在 http request 中發送，也就是伺服器端無法直接存取 並且 local storage 能儲存的資料大小，比 cookie 大很多 ``` Name: <input type="text"> Age: <input type="text"> <button onclick="save()">Save</button> ``` ``` if (localStorage.getItem("me")) { var me = JSON.parse(localStorage.getItem("me")); alert('hello, ' + me.name + ' (' + me.age + ')'); } function save() { var name = document.querySelectorAll('input')[0].value; var age = document.querySelectorAll('input')[1].value; var me = { name: name, age: age }; localStorage.setItem("me", JSON.stringify(me)); alert('saved'); } ``` 在這邊的範例中，使用 `localStorage.setItem()` 來儲存資料，使用 `localStorage.getItem()` 來取得資料 因為只能在 local storage 中儲存字串，所以使用 `JSON.stringify` 將物件轉換成字串，使用 `JSON.parse` 將字串轉換成物件 在 JavaScript 中，表達物件的字串格式又稱為 JSON 字串，反正就是一種格式而已，資料類型是字串 上述的程式碼，寫起來比 cookie 簡單很多，API 乾淨很多 實務上，如果儲存的資料，不需要在主機端使用，就都用 local storage 即可 --- 關於 local storage 的 debug 除錯，也要知道一下 跟 cookie 差不多 打開瀏覽器開發者工具 -> Application -> Storage -> Local Storage 可以看到網站上有哪些資料，也可以直接在這邊修改、刪除資料 ## 課後作業 請回頭找出你在系列課程二寫的作業 https://codelove.tw/@howtomakeaturn/course/vx8gqZ 當初的待辦事項小工具，少了一個重要功能：儲存按鈕 也就是重新整理之後，待辦事項就通通不見了 請在「匯出」按鈕旁邊，增加一個「儲存」按鈕，讓待辦事項在頁面重新整理之後，還可以繼續使用 - 按下按鈕之後，使用 local storage 儲存待辦事項資料，並跳出 alert 提示「儲存成功！」 - 頁面載入的時候，檢查 local storage，有資料的話，就復原到畫面上 做出以上功能，你就完成這次的課程目標了！
框架背後有什麼必學觀念的？這篇文章簡單整理如下 原文出處：https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g --- 很多初學者會問“我應該學哪個框架？”和“學一個框架之前需要學多少JS或TS？” - 無數自以為是的文章都在宣傳作者首選框架或庫的優勢，而不是向讀者展示其背後的概念、教他們如何做出明智的決定。讓我們先解決第二個問題： ## “在學習框架之前要學多少 JS/TS？” 盡可能多地理解它們的基本概念。您將需要了解基本資料類型、函數、基本運算符和文檔對像模型 (DOM)，這是 HTML 和 CSS 在 JS 中的基礎。雖然先學一點當然沒關係，但沒必要先精通框架或庫。 如果您是一個完全的初學者，[JS for cats](http://jsforcats.com/) 可能是您第一步的好資源。繼續前進，直到您感到自信為止，然後繼續前進，直到您開始感到自信不足。那就是你了解足夠的 JS/TS 並可以開始學框架的時間。其餘的你可以邊走邊學。 ## “你指的是什麼概念？” - 狀態 - 效果 - 記憶化 - 模板和渲染 所有現代框架都從這些概念中衍伸出它們的功能。 ### 狀態 狀態只是讓您的應用程式跑起來的資料。它可能在全局級別上，適用於應用程式的較大部分，或適用於單個元件。讓我們以一個簡單的計數器為例。它保留的計數是狀態。我們可以讀取狀態並寫入狀態以增加計數。 最簡單的表示通常是一個變數，其中包含我們的狀態所包含的資料： ``` let count = 0; const increment = () => { count++; }; const button = document.createElement('button'); button.textContent = count; button.addEventListener('click', increment); document.body.appendChild(button); ``` 但是這段程式碼有一個問題：對 count 的更改，就像對 increment 所做的更改一樣，不會更新按鈕的文本內容。我們可以手動更新所有內容，但這對於更複雜的用例來說並不能很好地擴展。 `count` 更新其用戶的能力稱為*反應性*。這是通過訂閱並重新執行應用程式的訂閱部分來更新的。 幾乎每個現代前端框架和庫都有一種響應式管理狀態的方法。解決方案分為三部分，至少採用其中之一或混合使用： - Observables / Signals - Reconciliation of immutable updates - Transpilation #### Observables / Signals Observables 基本上是允許藉由訂閱閱讀器的函數來進行讀取的結構。然後訂閱者在更新時重新執行： ``` const state = (initialValue) => ({ _value: initialValue, get: function() { /* subscribe */; return this._value; }, set: function(value) { this._value = value; /* re-run subscribers */; } }); ``` 這個概念的第一個用途之一是在 [knockout](https://knockoutjs.com/) 中，它使用相同的函數，帶和不帶參數進行寫/讀存取。 這種模式目前正在以「信號」的形式復興，例如在 [Solid.js](https://www.solidjs.com/docs/latest/api#createsignal) 和 [preact signals](https://preactjs.com /guide/v10/signals/)，但在 [Vue](https://vuejs.org/) 和 [Svelte](https://svelte.dev/) 的底層使用了相同的模式。 [RxJS](https://rxjs.dev/) 為 [Angular](https://angular.io/) 的反應層提供動力，是這一原則的延伸，超越了簡單狀態，但有人可能會爭辯說它模擬複雜性的能力可能反而綁手綁腳。 [Solid.js](https://www.solidjs.com/) 還以儲存（可以通過 setter 操作的物件）和可變（可以像平常一樣使用的物件）的形式進一步抽象這些信號 JS 物件或 [Vue](https://vuejs.org/) 中的狀態來處理巢狀狀態物件。 #### Reconciliation of immutable states 不變性意味著如果一個物件的屬性發生變化，整個物件引用必須改變，所以簡單的引用比較可以很容易地檢測到是否有變化，這就是協調器所做的。 ``` const state1 = { todos: [{ text: 'understand immutability', complete: false }], currentText: '' }; // updating the current text: const state2 = { todos: state1.todos, currentText: 'understand reconciliation' }; // adding a to-do: const state3 = { todos: [ state.todos[0], { text: 'understand reconciliation', complete: true } ], currentText: '' }; // this breaks immutability: state3.currentText = 'I am not immutable!'; ``` 如您所見，未更改專案的引用被重新使用。如果協調器檢測到不同的物件引用，它會再次使用狀態（props, memos, effects, context）來重跑所有元件。由於讀取存取是被動的，這需要手動指定對反應值的依賴性。 顯然，您不是以這種方式定義狀態。您可以從現有屬性建置它，也可以使用所謂的 reducer。reducer 是一個函數，它接受一個狀態並返回另一個狀態。 [react](https://reactjs.org/) 和 [preact](https://preactjs.com/) 使用此模式。它適合與 vDOM 一起使用，我們將在稍後描述模板時探討它。 並非每個框架都使用其 vDOM 來使狀態完全響應。 例如 [Mithril.JS](https://mithril.js.org/components.html#state)，元件會在設置的事件後變化後更新狀態；否則你必須手動觸發 `m.redraw()`。 #### Transpilation Transpilation 是一個建置步驟，它重寫我們的程式碼以使其在舊瀏覽器上執行或賦予它額外的能力；在這種情況下，該技術用於將簡單變數更改為反應系統的一部分。 [Svelte](https://svelte.dev/) 基於一個轉譯器，該轉譯器還通過看似簡單的變數宣告和存取為其反應式系統提供動力。 順便說一句，[Solid.js](https://solidjs.com) 使用轉譯，但不是針對它的狀態，只是針對模板。 ### 效果 在大多數情況下，我們需要對反應狀態做更多的事情，而不是從中衍伸並渲染到 DOM 中。我們必須管理副作用，這些都是由於視圖更新之外的狀態更改而發生的所有事情（儘管 [Solid.js](https://solidjs.com) 等一些框架也將視圖更改視為效果）。 還記得第一個例子中，訂閱處理被故意遺漏的狀態嗎？讓我們完成這個處理效果，來作為對更新的反應： ``` const context = []; const state = (initialValue) => ({ _subscribers: new Set(), _value: initialValue, get: function() { const current = context.at(-1); if (current) { this._subscribers.add(current); } return this._value; }, set: function(value) { if (this._value === value) { return; } this._value = value; this._subscribers.forEach(sub => sub()); } }); const effect = (fn) => { const execute = () => { context.push(execute); try { fn(); } finally { context.pop(); } }; execute(); }; ``` 這基本上是 [preact signals](https://preactjs.com/guide/v10/signals/) 或 [Solid.js](https://solidjs.com) 中反應狀態的簡化，沒有錯誤處理和狀態突變模式（使用接收前一個值並返回下一個值的函數），但這很容易加入。 它允許我們使前面的範例具有反應性： ``` const count = state(0); const increment = () => count.set(count.get() + 1); const button = document.createElement('button'); effect(() => { button.textContent = count.get(); }); button.addEventListener('click', increment); document.body.appendChild(button); ``` > ☝ 使用您的開發人員工具在 [空白頁面](about:blank) 中嘗試上述兩個程式碼塊。 在大多數情況下，框架允許不同的時間安排，讓效果在渲染 DOM 之前、期間或之後執行。 ### 記憶化 Memoization 意味著緩存從狀態計算的值，它會從狀態衍伸的變化更新時更新。它基本上是一種回傳衍伸狀態的效果。 在重新執行元件功能的框架中，例如 [react](https://reactjs.org/) 和 [preact](https://preactjs.com/)，這讓某些複雜計算不需要每次都重複計算。 對於其他框架，情況恰恰相反：它允許您選擇部分組件進行響應式更新，同時緩存之前的計算。 對於我們簡單的反應式系統，memo 看起來像這樣： ``` const memo = (fn) => { let memoized; effect(() => { if (memoized) { memoized.set(fn()); } else { memoized = state(fn()); } }); return memoized.get; }; ``` ### 模板化和渲染 現在我們有了純的、衍伸的和緩存形式的狀態，我們想把它展示給用戶。在我們的範例中，我們直接使用 DOM 來加入按鈕並更新其文本內容。 為了對開發人員更加友好，幾乎所有現代框架都支持一些特定領域的語言來編寫類似於程式碼中所需輸出的內容。儘管有不同的風格，比如 `.jsx`、`.vue` 或 `.svelte` 文件，但它們都歸結為用類似於 HTML 的程式碼表示 DOM，因此基本上 ``` <div>Hello, World</div> // in your JS // becomes in your HTML: <div>Hello, World</div> ``` 你可能會問“我要把狀態放在哪裡？”。很好的問題。在大多數情況下，`{}` 用於表示屬性和節點周圍的動態內容。 最常用的 JS 模板語言擴展無疑是 JSX。對於 [react](https://reactjs.org)，它被編譯為純 JavaScript，其方式允許它建立 DOM 的虛擬表示，一種稱為虛擬文檔對像模型或簡稱 vDOM 的內部視圖狀態。 這樣設計的原因是：建立物件比存取 DOM 快得多，所以如果你能用當前的替換後者，你可以節省時間。但是，如果您在任何情況下都有大量 DOM 更改或建立無數物件而沒有更改，則此解決方案的優點就變成必須通過「記憶化」來規避的缺點。 ``` // original code <div>Hello, {name}</div> // transpiled to js createElement("div", null, "Hello, ", name); // executed js { "$$typeof": Symbol(react.element), "type": "div", "key": null, "ref": null, "props": { "children": "Hello, World" }, "_owner": null } // rendered vdom /* HTMLDivElement */<div>Hello, World</div> ``` 不過，JSX 不僅限於 react。例如，Solid 使用其轉譯器更徹底地更改程式碼： ``` // 1. original code <div>Hello, {name()}</div> // 2. transpiled to js const _tmpl$ = /*#__PURE__*/_$template(`<div>Hello, </div>`, 2); (() => { const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild; _$insert(_el$, name, null); return _el$; })(); // 3. executed js code /* HTMLDivElement */<div>Hello, World</div> ``` 雖然轉譯後的程式碼乍看可能令人望而生畏，但解釋這裡發生的事情卻相當簡單。首先，建立包含所有靜態部分的模板，然後複製它以建立其內容的新實體，並加入動態部分並連接以根據狀態更改進行更新。 Svelte 走得更遠，不僅可以轉換模板，還可以轉換狀態。 ``` // 1. original code <script> let name = 'World'; setTimeout(() => { name = 'you'; }, 1000); </script> <div>Hello, {name}</div> // 2. transpiled to js /* generated by Svelte v3.55.0 */ import { SvelteComponent, append, detach, element, init, insert, noop, safe_not_equal, set_data, text } from "svelte/internal"; function create_fragment(ctx) { let div; let t0; let t1; return { c() { div = element("div"); t0 = text("Hello, "); t1 = text(/*name*/ ctx[0]); }, m(target, anchor) { insert(target, div, anchor); append(div, t0); append(div, t1); }, p(ctx, [dirty]) { if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]); }, i: noop, o: noop, d(detaching) { if (detaching) detach(div); } }; } function instance($$self, $$props, $$invalidate) { let name = 'World'; setTimeout( () => { $$invalidate(0, name = 'you'); }, 1000 ); return [name]; } class Component extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, {}); } } export default Component; // 3. executed JS code /* HTMLDivElement */<div>Hello, World</div> ``` 也有例外。例如，在 [Mithril.js](https://mithril.js.org/) 中，雖然可以使用 JSX，但我們鼓勵您編寫 JS： ``` // 1. original JS code const Hello = { name: 'World', oninit: () => setTimeout(() => { Hello.name = 'you'; m.redraw(); }, 1000), view: () => m('div', 'Hello, ' + Hello.name + '!') }; // 2. executed JS code /* HTMLDivElement */<div>Hello, World</div> ``` 雖然大多數人會發現開發人員缺乏經驗，但其他人更喜歡完全控制他們的程式碼。根據他們主要想解決的問題，缺少轉譯步驟甚至可能是有益的。 儘管很少有人這樣推薦，許多其他框架都允許在不進行轉譯的情況下使用。 ## “我現在應該學習什麼框架或庫？” 我有一些好訊息和一些壞訊息要告訴你。 壞訊息是：沒有萬靈丹。沒有哪個框架在每個方面都比其他框架好得多。他們每個人都有自己的優勢和妥協。 [React](https://reactjs.org/) 有它的鉤子規則，[Angular](https://angular.io/) 缺乏簡單的信號，[Vue](https://vuejs.org/)缺乏向後兼容性，[Svelte](https://svelte.dev/) 不能很好地擴展，[Solid.js](https://www.solidjs.com/) 禁止解構，[Mithril.js]( https://mithril.js.org/) 並不是真正的反應式，僅舉幾例。 好訊息是：沒有錯誤的選擇——至少，除非專案的要求真的很有限，無論是在 bundle 大小還是性能方面。每個框架都會完成它的工作。有些人可能需要配合團隊的設計決策，這可能會使您的速度變慢，但無論如何您都應該能夠獲得可行的結果。 話雖這麼說，沒有框架也可能是一個可行的選擇。許多專案都被過度使用 JavaScript 破壞了。其實帶有一些互動性的靜態頁面就可以完成這項工作。 現在您已經了解了這些框架和庫應用的概念，請選擇最適合您當前任務的概念。不要害怕在下一個專案中切換框架。沒有必要學習所有這些。 如果你嘗試一個新的框架，我發現最有幫助的事情之一就是跟它的社群有所連結，無論是在社群媒體、discord、github 還是其他地方。他們可以告訴您哪些方法適合他們的框架，這將幫助您更快地獲得更好的解決方案。 ## “拜託，你*總是*有個人喜好吧！” 如果你的主要目標是就業，我建議學習 [react](https://reactjs.org/)。如果您想要輕鬆的性能和控制體驗，請嘗試 [Solid.js](https://solidjs.com)；你可能會在 Solid 的 [Discord](https://discord.com/invite/solidjs) 上見到我。 但請記住，所有其他選擇都同樣有效。你不應該因為我這麼說就選擇一個框架，而應該使用最適合你的框架。
## 課程目標 能動態在 DOM 樹修改元素的 style 屬性 ## 課程內容 實務上有個功能很常見，就是元素開關（toggle）的效果 點一下讓某元素出現，再點一下讓某元素消失 例如：跳出一張照片顯示、再關閉這張照片；或者顯示提示訊息文字，點擊後關閉文字（不是 alert 那種喔，是更漂亮、用 html/css 實做的那種漂亮小框框訊息） 讓元素開開關關出現的情境有很多，該怎麼做到呢？其實，修改元素的 css 屬性 `display` 就可以了 ``` <button onclick="myFunction()">點我開開關關</button> <div id="myDIV"> 我會一下出現一下消失 </div> ``` ``` function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } ``` 如果你不知道 css 的 display 是什麼，以及有哪些值可用，請去查詢一下 最簡單、常用的基本上是 ``` display: none; display: inline; display: block; display: inline-block; ``` 修改這個值，就能做到開關顯示元素的效果了 --- 目前為止，你應該發現，能用 JavaScript 動態修改 class，也能動態修改 style 感覺好像網頁上任何東西、html、css，都可以用 JavaScript 動態修改？ 你猜得沒錯！在前端工程領域，就是幾乎什麼東西都能用 JavaScript 來操作，所以現代的各種網頁，才會那麼強大、那麼多功能！ 如果有個東西你不知道怎麼改，但感覺應該能用 JavaScript 做到，那就上網搜尋一下，一定會找到屬性或者函式可以用的！ ## 課後作業 接續前一課的作業，現在要進一步加強清單功能 你發現有些事項，完成之後，你不想要刪除掉，你想要留著，比較有成就感 但又需要知道哪些已完成，所以要有能備註完成與否的方法 --- 請在每個事項後面，加上 `（已完成）` 的文字，但是 display 為 none 所以先不顯示 然後在這文字後面，再加上「標示為已完成」的按鈕，點下去才顯示 `（已完成）` 文字 舉例來說，建立了三則待辦事項之後，看起來像這樣 ``` - 倒垃圾 [標示為已完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 如果倒完垃圾了，就可以點擊按鈕，來備註已完成，這時才顯示 `（已完成）` 文字 ``` - 倒垃圾（已完成）[標示為未完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 這時後面的按鈕就變成「標示為未完成」了 所以這個完成與否按鈕，就是一個開關（toggle），可以開開關關的 做出這個功能，你就完成這次的課程目標了！
## 課程目標 學會基本的陣列取值 能從 html 元素中，得到用戶選取的內容 ## 課程內容 這課先來學一點陣列觀念 ``` var colors = ['red', 'orange', 'yellow', 'green']; ``` 中括號 `[]` 包起來就是宣告一個陣列，並記錄到 `colors` 變數中。此陣列內容是四個字串。 陣列索引從 0~3，因為在程式設計中，索引通常是從 0 開始而不是從 1 開始。 在陣列後方，使用中括號加上索引，就可取得陣列內容的值 ``` alert(colors[0]); alert(colors[1]); ``` 這兩個 alert 會顯示出陣列中第一個元素、第二個元素，馬上到 jsfiddle 試試看就會清楚了！ --- 在前幾課，我們學會了取得 `<input type="text" />` 這種元素內容的方法 文字輸入框是最常用到的網頁功能，除此之外，下拉式選單也很常用 ``` <select id="my-colors"> <option value="red">鮮豔的紅色</option> <option value="orange">美麗的橘色</option> <option value="yellow">亮眼的黃色</option> </select> <button onclick="showColor()">Click me</button> ``` 像這樣的選單，如何取得用戶選取的值呢？ ``` function showColor() { var menu = document.getElementById("my-colors"); var index = menu.selectedIndex; alert(index); var value = menu.options[index].value; var text = menu.options[index].text; alert(value); alert(text); } ``` 首先一樣用 `document.getElementById` 找到我們的選單元素 選單元素這種物件，會有 `.selectedIndex` 屬性來代表目前選中的索引 我們用 alert 先把索引跳出來看一下 同時，選單元素這種物件，會有 `.options` 屬性來代表其中的 `<option>` 元素，並且會是一個陣列 這個陣列裡面，通通都是物件，一個物件代表一個 `<option>` 元素 每個 `option` 物件，又有 `.value` 屬性可供存取，以及 `.text` 屬性可供存取 工程師可以根據需要選擇 `.value` 或 `.text` 來使用 我們在寫 html select 元素時，通常會在 value 放英文單字，然後 text 放清楚的中文說明 請在 jsfiddle 試試看上面的範例，實驗一下、玩玩看，就會清楚了！ ## 課後作業 接續前一課的作業，你的「線上下單」頁面，目前會顯示訂單資訊，方便顧客確認 除了顧客名稱之外，這課的作業要加強下單功能、顯示更多訂單資訊 --- 除了輸入客戶名字的欄位之外，請用 `select` 元素加上一個選單，讓用戶可以選擇服裝的分類：男裝、女裝 接著再用 `select` 元素多做一個選單，讓用戶可以選擇服裝的類型：外套、上衣、下身 這樣顧客就知道這間「成衣批發工廠」，有提供哪些商品批發了！ 接著要將顧客選擇的內容，顯示在訂單資訊裡面 類似這樣： ``` －－－－－－－－－－ ｜您的訂單 ｜ ｜顧客姓名：ＸＸＸ｜ ｜服裝分類：ＸＸＸ｜ ｜服裝類型：ＸＸＸ｜ －－－－－－－－－－ ``` ＸＸＸ的地方預設是空白，在點擊訂購按鈕之後，跳出招呼訊息之後，就把ＸＸＸ改為顧客輸入、選擇的內容 請替這個訂單資訊區塊加一些 css 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
