## 轉載自 https://ithelp.ithome.com.tw/articles/10338052 ## 前情提要 有時候我們需要使用一些圖片，勢必需要圖片的網址，這時候， 也許你可以本機上傳，然後去把網址抓好， 又或者你可以找到網路上別人的圖片，右鍵開啟新分頁，再複製網址； 又或者直接打開檢查(F12)找到src的網址去複製。 光聽這個流程我就覺得，心累。 這時候前端大師，就會寫一套簡單的小腳本來完成這個白爛的工作。 ## 腳本下載  https://greasyfork.org/zh-TW/scripts/477141-img%E8%A4%87%E8%A3%BD%E5%A4%A7%E5%B8%AB ## JS程式碼 ``` // ==UserScript== // @name IMG複製大師 // @namespace http://tampermonkey.net/ // @version 0.1 // @description 針對網頁上圖片，點擊就複製其網址 // @author You // @match *://*/* // @icon https://www.highcharts.com/demo/highcharts/spline-plot-bands // @grant none // ==/UserScript== let isEventActive = false; // 用於跟蹤事件的狀態 // 創建一個鏈接元素並設置其屬性 const toastrCssLink = document.createElement('link'); toastrCssLink.rel = 'stylesheet'; toastrCssLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'; // 創建一個腳本元素並設置其屬性 const toastrScript = document.createElement('script'); toastrScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'; // 創建另一個腳本元素並設置其屬性 const toastrScript2 = document.createElement('script'); toastrScript2.src = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'; // 將鏈接元素和腳本元素添加到文檔頭部 document.head.appendChild(toastrCssLink); document.head.appendChild(toastrScript); document.head.appendChild(toastrScript2); // 獲取頁面上的所有img元素 const images = document.querySelectorAll('img'); function removeClickHandler(image) { image.removeEventListener('click', clickHandler); } function toggleEvent() { if (isEventActive) { // 如果事件已經激活，則關閉事件 console.log('IMG複製大師關閉ꐦ°᷄д°᷅'); // 解除事件監聽 images.forEach(removeClickHandler); isEventActive = false; } else { // 如果事件尚未激活，則打開事件 console.log('IMG複製大師啟動ฅ^•ﻌ•^ฅ'); // 遍歷所有img元素 images.forEach((image) => { // 檢查圖像是否已加載 if (image.complete) { // 圖像已加載，直接添加點擊事件處理程序 addClickHandler(image); } else { // 圖像尚未加載，等待加載完成後再添加點擊事件處理程序 image.addEventListener('load', () => { addClickHandler(image); }); } }); isEventActive = true; } } document.addEventListener('keydown', (event) => { if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') { toggleEvent(); // 切換事件的狀態 } }); function transformImageUrl(url) { // 使用正則表達式匹配URL中的目標部分 const regex = /https:\/\/cache.ptt.cc\/c\/https\/i.imgur.com\/([^?]+)/; const match = url.match(regex); if (match) { // 如果匹配成功，構建新的URL const imgurId = match[1]; return `https://i.imgur.com/${imgurId}`; } else { // 如果沒有匹配到目標部分，返回原始URL return url; } } // 創建一個函數，用於添加點擊事件處理程序並處理圖像的src function addClickHandler(image) { image.addEventListener('click', clickHandler); } // 創建一個函數，用於處理點擊事件 function clickHandler() { let src = this.src; src = transformImageUrl(src); const textArea = document.createElement('textarea'); textArea.value = src; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); // 使用 toastr 進行通知 toastr.success('網址複製完成: ' + src); } ``` ## 觀念筆記 這個小腳本總共使用了大概三種觀念， 第一種就是toast的套件使用， 第二個是監聽鍵盤做開關， 第三個則是程式本身對於img的監聽，把src複製到剪貼簿。 ### 第一部分:套件 使用套件在於腳本，必須利用appendChild，先使用create的API製作出放置CDN的link元素， 再把它append到網頁上，則可以使用其套件。 ### 第二部分:監聽鍵盤 這腳本啟動與關閉是透過監聽鍵盤的，ctrl+q或F8這部分就是純粹監聽。 ``` document.addEventListener('keydown', (event) => { if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') { toggleEvent(); // 切換事件的狀態 } }); ``` 裡面寫了一個toggleEvent是因為想要設定可以開開關關。 ### 第三部分:程式本身 這邊有一點小技巧是複製到剪貼簿，其實以前文章也有寫過教學，是個常見實用的招數： ``` const textArea = document.createElement('textarea'); textArea.value = src; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); ``` 再來就是針對網頁上全部的img元素，去監聽點擊事件、移除事件這兩個。 ``` const images = document.querySelectorAll('img'); function addClickHandler(image) { image.addEventListener('click', clickHandler); } function removeClickHandler(image) { image.removeEventListener('click', clickHandler); } ``` 之後這兩個事件要寫在toggle裡面，當開啟的條件就執行新增事件；關閉就執行解除綁定 開啟也就是： ``` images.forEach((image) => { // 檢查圖像是否已加載 if (image.complete) { // 圖像已加載，直接添加點擊事件處理程序 addClickHandler(image); } else { // 圖像尚未加載，等待加載完成後再添加點擊事件處理程序 image.addEventListener('load', () => { addClickHandler(image); }); ``` 關閉則是： `images.forEach(removeClickHandler);` ## 心得 這次的小腳本功能非常簡單，寫起來邏輯也是很清晰透明，沒有什麼彎曲。 雖然簡單，但是寫起來功能非常實用！ 這就是針對懶人專用的！ 其實沒有人規定前端這種東西要寫得多大，多了不起/ᐠ｡ꞈ｡ᐟ\ 好像你很屌、很懂前端、框架，那個是一回事，能夠完成自己的需求也很美好。 很久沒更新了，這次的酷酷小腳本應該很爽⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾ 好好的來玩前端吧，未來還有更大的宇宙！
為了提升系統穩定性，最近替某電商客戶的專案寫單元測試 有一部份核心功能會用到第三方 API，這讓測試變很難寫，因為沒有本地的狀態變化可以比較 想到 laravel 有一個關於 mail 的測試功能，有類似情況 簡單來說就是在 phpunit 中這樣啟動之後 ``` Mail::fake(); ``` 就可以這樣來檢查是否有執行某 api ``` Mail::assertSent(OrderShipped::class); ``` 能否用同樣原理，處理我面對的情況呢？ 決定來看一下原始碼！ --- 首先是 fake 會直接換掉 Mailer 的實體 `framework/src/Illuminate/Support/Facades/Mail.php` ``` public static function fake() { $actualMailManager = static::isFake() ? static::getFacadeRoot()->manager : static::getFacadeRoot(); return tap(new MailFake($actualMailManager), function ($fake) { static::swap($fake); }); } ``` 可見是實作同樣 interface 的測試專用類別！ `framework/src/Illuminate/Support/Testing/Fakes/MailFake.php` 然後寄信就改成，把變數存進陣列即可 ``` public function send($view, array $data = [], $callback = null) { if (! $view instanceof Mailable) { return; } $view->mailer($this->currentMailer); if ($view instanceof ShouldQueue) { return $this->queue($view, $data); } $this->currentMailer = null; $this->mailables[] = $view; } ``` 然後 assertSent 那些就檢查陣列內容，比對一下即可 ``` public function assertSent($mailable, $callback = null) { [$mailable, $callback] = $this->prepareMailableAndCallback($mailable, $callback); if (is_numeric($callback)) { return $this->assertSentTimes($mailable, $callback); } $message = "The expected [{$mailable}] mailable was not sent."; if (count($this->queuedMailables) > 0) { $message .= ' Did you mean to use assertQueued() instead?'; } PHPUnit::assertTrue( $this->sent($mailable, $callback)->count() > 0, $message ); } ``` inside of the `sent` function ``` return $this->mailablesOf($mailable)->filter(fn ($mailable) => $callback($mailable)); ``` --- 所以，目前這樣看起來，在需要測試跟「第三方 API」有關的功能時，可以使用同樣原理 使用 laravel 提供的 mock 功能，把會用到的第三方套件 mock 掉，套件的核心 function 就存個變數或陣列之類的 然後多寫個類似 `assertSent` 這樣的方法，應該就可以做到不錯的測試效果～！ 簡單來說，就是設法做出「本地的狀態變化可以比較」就是了 我來往這方向寫寫看，有心得再補充分享～
## 介紹 編寫乾淨的程式碼是每個軟體開發人員的基本技能。乾淨的程式碼不僅使您的程式碼庫更易於維護和理解，而且還能促進團隊成員之間的協作。在這篇綜合文章中，我們將探討什麼是乾淨的程式碼、為什麼它很重要，並為您提供一組最佳實踐和原則來幫助您編寫乾淨且可維護的程式碼。 - 原文出處：https://dev.to/favourmark05/writing-clean-code-best-practices-and-principles-3amh --- ## 什麼是乾淨程式碼？ 乾淨的程式碼是易於閱讀、易於理解且易於修改的程式碼。它是沒有不必要的複雜性、冗餘和混亂的程式碼。乾淨的程式碼遵循一組約定和最佳實踐，使其更加一致，使多個開發人員更容易無縫地處理同一個專案。 ## 為什麼乾淨的程式碼很重要？ 1. **可讀性**：乾淨的程式碼易於閱讀，這意味著任何人 - 包括未來的你 - 都可以快速理解它。這減少了掌握程式碼功能所需的時間，從而加快了開發和除錯速度。 2. **可維護性**：程式碼的讀取次數多於編寫次數。當您編寫乾淨的程式碼時，隨著時間的推移，維護和擴展應用程式將變得更加容易。這在軟體開發生命週期中至關重要，因為專案經常發展和成長。 3. **協作**：簡潔的程式碼鼓勵協作。當您的程式碼乾淨且組織良好時，其他團隊成員就可以有效地處理它。這使得劃分任務和同時處理程式碼庫的不同部分變得更容易。 4. **減少錯誤**：乾淨的程式碼可以減少引入錯誤的可能性。難以理解的程式碼在修改或增強過程中更容易出錯。 5. **效率**：乾淨的程式碼就是高效率的程式碼。它通常執行速度更快並且使用更少的資源，因為它避免了不必要的操作和複雜性。 現在我們了解了為什麼乾淨的程式碼很重要，讓我們深入研究一些最佳實踐和原則來幫助您編寫乾淨的程式碼。 ## 編寫簡潔程式碼的最佳實踐和原則 1. **有意義的變數和函數名稱** 對變數、函數、類別和其他辨識碼使用描述性名稱。精心選擇的名稱可以傳達實體的目的，使程式碼更容易理解。避免使用單字母變數名或神秘的縮寫。 ``` # Bad variable name x = 5 # Good variable name total_score = 5 ``` 2. **保持函數和方法簡短** 函數和方法應該簡潔並專注於單一任務。單一職責原則（SRP）指出，一個函數應該要做一件事，並且把它做好。較短的函數更容易理解、測試和維護。如果函數變得太長或太複雜，請考慮將其分解為更小、更易於管理的函數。 ``` // Long and complex function function processUserData(user) { // Many lines of code... } // Refactored into smaller functions function validateUserInput(userInput) { // Validation logic... } function saveUserToDatabase(user) { // Database operation... } ``` 3. **評論和文件** 謹慎使用評論，當你使用評論時，要讓它們變得有意義。程式碼應該盡可能不言自明。文件（例如內嵌註解和自述文件）可協助其他開發人員了解程式碼的目的和用法。記錄複雜的演算法、重要的決策和公共 API。 ``` # Bad comment x = x + 1 # Increment x # Good comment # Calculate the total score by incrementing x total_score = x + 1 ``` 4. **一致的格式和縮排** 堅持一致的編碼風格和縮排。這使得程式碼庫看起來乾淨且有組織。大多數程式語言都有社群接受的編碼標準（例如，Python 的 PEP 8、JavaScript 的 eslint），您應該遵循。一致性也適用於命名約定、間距和程式碼結構。 ``` // Inconsistent formatting if(condition){ doSomething(); } else { doSomethingElse(); } // Consistent formatting if (condition) { doSomething(); } else { doSomethingElse(); } ``` 5. **DRY（不要重複）原則** 避免重複程式碼。重複的程式碼更難維護並增加不一致的風險。將通用功能提取到函數、方法或類別中以提高程式碼的可重複使用性。當您需要進行更改時，只需在一個地方進行即可。 假設您正在開發一個 JavaScript 應用程式來計算購物車中商品的總價。最初，您有兩個單獨的函數來計算每種商品類型的價格：一個用於計算一本書的價格，另一個用於計算筆記型電腦的價格。這是初始程式碼： ``` function calculateBookPrice(quantity, price) { return quantity * price; } function calculateLaptopPrice(quantity, price) { return quantity * price; } ``` 雖然這些函數有效，但它們違反了 DRY 原則，因為計算總價的邏輯對於不同的商品類型是重複的。如果您有更多的專案類型需要計算，您最終將重複此邏輯。為了遵循DRY原則，提高程式碼的可維護性，可以對程式碼進行如下重構： ``` function calculateItemPrice(quantity, price) { return quantity * price; } const bookQuantity = 3; const bookPrice = 25; const laptopQuantity = 2; const laptopPrice = 800; const bookTotalPrice = calculateItemPrice(bookQuantity, bookPrice); const laptopTotalPrice = calculateItemPrice(laptopQuantity, laptopPrice); ``` 在此重構的程式碼中，我們有一個calculateItemPrice函數，它根據作為參數提供的數量和價格計算任何商品類型的總價。這遵循了 DRY 原則，因為計算邏輯不再重複。 現在，您可以通過使用適當的數量和價格值呼叫calculateItemPrice來輕鬆計算書籍、筆記本電腦或任何其他商品類型的總價。這種方法提高了程式碼的可重用性、可讀性和可維護性，同時降低了重複程式碼引起的錯誤風險。 6. **使用有意義的空白** 使用空格和換行符正確設置程式碼格式。這增強了可讀性。使用空格來分隔程式碼的邏輯部分。格式良好的程式碼更容易瀏覽，減少讀者的認知負擔。 ``` // Poor use of whitespace const sum=function(a,b){return a+b;} // Improved use of whitespace const sum = function (a, b) { return a + b; } ``` 7. **錯誤處理** 優雅地處理錯誤。在程式碼中使用適當的 try-catch 塊或錯誤處理機制。這可以防止意外崩潰並為除錯提供有價值的訊息。不要抑制錯誤或在沒有正確響應的情況下簡單地記錄錯誤。 ``` // Inadequate error handling try { result = divide(x, y); } catch (error) { console.error("An error occurred"); } // Proper error handling try { result = divide(x, y); } catch (error) { if (error instanceof ZeroDivisionError) { console.error("Division by zero error:", error.message); } else if (error instanceof ValueError) { console.error("Invalid input:", error.message); } else { console.error("An unexpected error occurred:", error.message); } } ``` 8. **測試** 編寫單元測試來驗證程式碼的正確性。測試驅動開發 (TDD) 可以迫使您預先考慮邊緣情況和預期行為，從而幫助您編寫更清晰的程式碼。經過良好測試的程式碼更加可靠並且更容易重構。 ``` // Example using JavaScript and the Jest testing framework test('addition works correctly', () => { expect(add(2, 3)).toBe(5); expect(add(-1, 1)).toBe(0); expect(add(0, 0)).toBe(0); }); ``` 9. **重構** 定期重構你的程式碼。隨著需求的變化以及您對問題域的理解的加深，請相應地調整您的程式碼。隨著專案的發展，重構有助於保持乾淨的程式碼。必要時不要害怕重新存取和改進現有程式碼。 假設您有一個函數，可以計算購物車中具有固定折扣百分比的商品的總價： ``` function calculateTotalPrice(cartItems) { let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } return totalPrice - (totalPrice * 0.1); // Apply a 10% discount } ``` 最初，此函數計算總價並應用 10% 的固定折扣。然而，隨著專案的發展，您意識到您需要支持可變折扣。為了重構程式碼使其更加靈活，可以引入折扣參數： ``` function calculateTotalPrice(cartItems, discountPercentage) { if (discountPercentage < 0 || discountPercentage > 100) { throw new Error("Discount percentage must be between 0 and 100."); } let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } const discountAmount = (totalPrice * discountPercentage) / 100; return totalPrice - discountAmount; } ``` 在這段重構的程式碼中： * 我們在calculateTotalPrice函數中新增了discountPercentage參數，讓您在呼叫函數時指定折扣百分比。 * 我們對discountPercentage 參數進行驗證，以確保其落在有效範圍內（0 到100%）。如果不在範圍內，我們會拋出錯誤。 * 折扣計算現在基於提供的discountPercentage，使功能更加靈活，能夠適應不斷變化的需求。 通過這種方式重構程式碼，你提高了它的靈活性和可維護性。您可以輕鬆地調整該函數來處理不同的折扣場景，而無需重寫整個邏輯。這證明了隨著專案的發展和需求的變化定期進行程式碼重構的重要性。 10. **版本控制** 使用 Git 等版本控制系統來跟踪程式碼更改。這使您可以與團隊成員有效協作，在必要時恢復到以前的版本，並維護專案開發的清晰歷史記錄。 Git 提供了程式碼審查、分支和合併工具，促進協作和程式碼整潔。 ##結論 編寫乾淨的程式碼不僅僅是一套規則，更是一種心態和紀律。它是關於建立易於閱讀、維護和擴展的軟體。通過遵循這些最佳實踐和原則，您可以成為一名更熟練的開發人員，生成高質量的程式碼。投入時間仔細檢查其他工程師的程式碼庫，特別是在開源專案中，可能是一種啟發性的體驗。通過這種探索，您將獲得對不同編碼風格和策略的寶貴見解。這種接觸使您能夠提煉出編寫原始、可持續程式碼庫的精髓。請記住，乾淨的程式碼是一個持續的旅程，通過練習，它會成為第二天性，從而實現更高效、更愉快的軟體開發。
您是否想過當您**執行 Rust 程式**時**RAM**會發生什麼情況**？您編寫程式碼的**方式會如何干擾系統中的許多其他事物？ 這篇文章將幫助您了解更多關於 *管理記憶體* 和 **RUST 如何運作** 的資訊。 原文出處：https://dev.to/canhassi/how-rust-memory-management-work-to-beginners-622 ## 1. Stack and Heap 在了解 rust 的作用之前，您必須先了解一些概念。一般來說，我們有兩種類型的內存，稱為：**堆疊和堆**。現在我們來介紹一下他們。 ### 1.1 記憶體：Stack 堆疊，顧名思義，**工作原理就像堆疊**，遵循**“後進先出”（LIFO）的原則。**也許分步驟解釋會更容易： *想像一下**一堆盤子**； *您放入的**第一道菜**是**最後取出的**； * 當**函數被呼叫**時，一塊記憶體被**「堆疊」在棧頂； * 當**函數結束**時，該區塊**“unstacked”**，釋放該記憶體。 通常，**編譯器**（在編譯時）知道將儲存在堆疊上的**值**，因為它知道需要儲存多少記憶體。此過程**自動**發生，所有值都會從記憶體中刪除。 下面是一個例子： ``` fn main() { let number = 12; // at this moment the variable has created println!("{}", number); // 12 } // When the owner (main function) goes out of scope, the value will be dropped ``` 在 Rust 中，我們只需使用「{}」即可建立一些作用域，這會在堆疊中加入具有有限生命週期的層。當您離開該特定*範圍*後，記憶體將被清除，您將遺失相關資訊。一個很好且簡單的例子是： ``` fn main() { { let number = 12; println!("{}", number); // 12 } println!("{}", number); // Cannot find value `number` in this scope } ``` ### 1.2 記憶體：Heap 簡而言之：**堆**記憶體是一個空閒記憶體空間，用於分配可能更改的資料。 想像一下，您需要在啟動程式後**儲存一些變數**，該變數在編譯時沒有已知的固定大小，因為它可能有大小變化或是記憶體中的直接分配。 如果上述可能性之一匹配，我們就知道我們有 **堆** 內存，而不是 **堆疊**。堆擁有更**靈活的記憶體**和更大的空間。看一看： ``` let number = Box::new(12); // alocate a integer in heap let name = String::from("Canhassi"); // alocate a String in heap ``` 在 Rust 中，我們有兩種字串「類型」：「&str」和「String」。 * **&str**：根據所寫的文字有固定的大小； * **字串**：具有可以增加、減少和刪除的大小。 ……這就是為什麼 `String` 儲存在堆上，而 `&str` 儲存在堆疊上。 釋放堆記憶體的一種方法是：當儲存堆上某些內容的**變數離開函數的作用域（到達函數末端）時，它將以相同的方式釋放作為堆疊。 好了，現在我們對這兩種記憶體類型有了一個清晰的認識，但是堆疊和堆在管理記憶體方面有什麼區別呢？讓我們看看這些差異吧！ ## 2. 借用檢查器 借用檢查器是 Rust 編譯器的**部分**，它**檢查並確保**所有權、借用和生命週期**規則得到尊重**。 老實說：一開始我在理解它是如何運作的方面遇到了一些問題，我發現這在新的 Rustaceans 中很常見。但別擔心，我的朋友。我會用最好的方式教你。但首先，讓我們先來看看下面的程式碼： ``` fn main() { let name = String::from("Canhassi"); // Creating a string variable print_name(name); // calling the print_name function passing the variable println!("{}", name); // Error: name borrowed to print_name() } fn print_name(name: String) { println!("{}", name); // print "Canhassi" } ``` 如果您使用該程式碼執行編譯器，您將看到以下錯誤： ``` borrow of moved value: name ``` 當我們呼叫“print_name”函數時，“name”變數將被**移動到另一個作用域**，並且該作用域將成為它的**新所有者**。並且所有者的規則超出範圍將再次應用。借用檢查器確保**一旦所有權轉移**，原始變數**不能再用於**來存取該值。這發生在上面的程式碼中。 使用原始變數的另一種方法是使用類似的引用。 ``` fn main() { let name = String::from("Canhassi"); // Creating a string variable print_name(&name); // calling the print_name function passing the variable println!("{}", name); // print "Canhassi" } fn print_name(name: &String) { println!("{}", name); // print "Canhassi" } ``` PS：這些**借用檢查器的規則僅適用於**堆中指派的物件**。 ## 3. 錯誤預防 借用檢查器對於確保 Rust 記憶體安全而無需[垃圾收集器](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)) 至關重要。 在 C 和 C++ 等其他語言中，我們（作為開發人員）必須使用某些函數手動釋放記憶體。 C++ 以允許記憶體管理錯誤而聞名，包括[記憶體洩漏](https://en.wikipedia.org/wiki/Memory_leak)。 C++本身不會導致記憶體洩漏。相反，**C++ 為程式設計師提供了大量的靈活性**和控制力，如果使用不當，這種**自由可能會導致錯誤**。 一個著名的錯誤是**未定義的行為**，例如，想像一個函數傳回這樣的變數的引用 ``` fn main() { let number = foo(); // calling foo function } fn foo() -> &i32 { let number = 12; // creating a var number &number // try return a reference of var number } ``` 程式碼不起作用，因為 Rust 編譯器對記憶體管理有限制規則。我們不能回傳 var `number` 的引用，因為這個函數的作用域將會消失，而 var `number` 將會消失，所以 Rust 不會讓這種情況發生。在 C++ 中我們可以做到這一點，並且它允許臭名昭著的記憶體洩漏。 我認為知道 Rust 編譯器避免了這種類型的錯誤真是太酷了...如果這個主題對您來說是新的，我可以說內存洩漏可能會花費很多錢並且確實很難修復它，因為絕不只有一次內存洩漏。 其他範例是，**雙重釋放**，當您嘗試釋放相同物件兩次（例如在 C 程式碼中）時，就會發生這種情況。 ``` char* ptr = malloc(sizeof(char)); *ptr = 'a'; free(ptr); free(ptr); ``` 這個主題非常廣泛，當您使用其他語言時，很可能會產生類似的錯誤。但是，我會讓您自己進行研究，並確保在這篇文章的評論中告訴我更多！ ## 4。結論 我寫這篇文章的目的是以更一般的方式展示記憶體管理如何與 Rust 配合使用。但我建議您閱讀《Rust 程式語言》一書的第 4 章（ https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html ）來獲得更完整的知識。在那裡您將獲得更多示例和更多關於此內容的解釋。 希望這篇文章有幫助！ 🦀🦀
測試程式碼是軟體開發最重要的方面之一，因為它可以確保產品的品質、可擴展性和可靠性。 但是，如果沒有任何指導，編寫有效的測試可能會很困難。測試程式碼可能比實際功能的程式碼更複雜、更難維護！ 原文出處：https://dev.to/one-beyond/the-5-principles-of-unit-testing-1p5f ## 1.精簡和準確的測試 測試程式碼必須**簡單且易於使用**。任何查看測試的人都應該立即知道測試的內容及其目的是什麼。開發測試應該以很少的精力和時間投入帶來巨大的價值。 > _您是否需要超過 30 秒的時間來閱讀和理解您的測試？重寫它！_ 測試“覆蓋率”是重點嗎？不！ **僅測試必要的部份就好**。為了敏捷性和簡單性，最好放棄一些測試，**只測試主要業務邏輯和主要邊緣情況就好**。 ## 2.測試行為，而不是元件實作 不要檢查程式碼中的每一行和內部變數。測試時，您應該**專注於結果**。即使方法內的程式碼被重構，結果也應該永遠保持不變！ 這樣，如果程式碼庫發生更改，您**不需要重寫測試**。 ``` // Wrong ❌ - Test behaviour describe('Evaluation Service', () => { describe('Register Students', () => { it('Should add new students to the evaluation service', () => { const studentJosh = { id: 1, name: 'Josh McLovin', average: 6.98, } evaluationService.addStudent(studentJosh) expect(evaluationService._students[0].name).toBe('Josh') expect(evaluationService._students[0].average).toBe(6.98) }) }) }) ``` ``` // Right ✅ - Test behaviour describe('Evaluation Service', () => { describe('Register Students', () => { it('Should add new students to the evaluation service', () => { const studentJosh = { id: 1, name: 'Josh McLovin', average: 6.98, } evaluationService.addStudent(studentJosh) expect(evaluationService.getStudentAverage('Josh')).toBe(6.98) }) }) }) ``` ## 3. 關於命名和結構：AAA 模式 您是否曾經遇到過名為“_它應該[...]正確_”的失敗測試，但花了幾分鐘才找到問題所在？ 良好命名和結構可以讓您快速且準確地找到任何失敗的測試，最終節省您的寶貴時間。因此，讓我們深入探討兩個關鍵原則，以便在下次測試時牢記： ### 3.1 經過深思熟慮的測試命名： 在命名您的測試時，請嘗試合併以下資訊： - **正在測試什麼**？ - **什麼情況**？ - **預期結果**是什麼？ ``` // Right ✅ - Test naming // 1. What is being tested: describe('Evaluation Service', () => { describe('Evaluate Students', () => { // 2 & 3. Context and expected result it('If the student grade is below the minimum grade, student should be suspended', () => { const students = [ { name: 'Mark', grade: 4.25 }, { name: 'Colin', grade: 6.7 }, { name: 'Ben', grade: 5.3 }, ] const result = evaluationService.evaluateStudents({ students, minGrade: 5 }) expect(result['Mark']).toBe('suspended') }) }) }) ``` ### 3.2 測試程式碼結構的AAA模式： 如果您想維護一個可讀且易於理解的測試套件，請按如下方式建立測試： - **安排**：設定模擬所需情況所需的所有程式碼。這可以包括初始化變數、模擬響應、實例化被測單元等。 - **行為**：執行正在測試的內容，通常在一行程式碼中。 - **斷言**：檢查得到的結果是否為預期的結果。與上面的一樣，這應該只需要一行。 ``` // Right - AAA Testing Pattern describe('Evaluation Service', () => { describe('Average Calculation', () => { it('Should calculate the average grade of all the students', () => { // Arrange: create an object with the student names and their grades const students = [ { name: 'Mark', grade: 4 }, { name: 'Colin', grade: 10 }, { name: 'Ben', grade: 7 }, { name: 'Tim', grade: 3 }, ] // Act: execute the getAverage method const avg = evaluationService.getAverage(students) // Assert: check if the result is the expected one -> (4+10+7+3)/4 = 6 expect(avg).toEqual(6) }) }) }) ``` ##4。確定性和隔離測試 如果一個失敗的測試使您的整個套件變紅，那麼您可能沒有以正確的方式處理它！ 測試應該**獨立和隔離**，一次針對並處理一個特定邏輯，從而完成更快、更穩定的測試套件。 **如果您不**獨立編寫測試會發生什麼？ - 您將無法找出錯誤和問題的**確切原因和位置**。 - 重構測試時，您必須**更新和同步多個測試**。 - 您將無法以任何順序執行測試，這可能會導致**破壞或跳過某些斷言或期望**。 ## 5。基於屬性的測試和真實資料 厭倦了在測試中編寫大量可能的輸入？基於屬性的測試可以為您做到這一點！……那是什麼？ 基於屬性的測試建立了數百種可能的組合，強調了測試並**增加了發現以前未被注意到的錯誤的機會**。這種方法甚至可以傳回可能導致意外結果的輸入。 [JSVerify](https://github.com/jsverify/jsverify) 或 [Fast-Check](https://github.com/dubzzz/fast-check) 等函式庫提供了促進基於屬性的測試的基本工具。 但是，如果您不想深入進行如此廣泛的測試，那麼盡可能利用**真實資料**至關重要。像“abc”或“1234”這樣的輸入可能會在實際失敗時錯誤地通過測試。 ``` // Wrong ❌ - False Positive - Test that passes even though it shouldn't class EvaluationService { _students = []; addStudent(student) { // Add the student if the name has no numbers if(!student.name.matches(/^([^0-9]*)$/)){ this._students.push(student); } } } describe('Evaluation Service', () => { describe('Register Students', () => { it('Should add students to the Evaluation service', () => { const mockStudent = { id: 2, name: 'username', average: 7 } // Won't fail because the name is a string without number -> We are not checking what happens if the user // inputs a name with a number. evaluationService.addStudent(mockStudent) expect(evaluationService.getStudentAverage('username')).toBe(7) }) }) }) // In the example above, we are making a test so the test passes, instead of looking for edge cases with realistic data ``` ##額外提示！ 如果您在測試元件中的任何邏輯時遇到困難，這可能反映出您也許應該將元件邏輯分解為更小、更容易且可測試的程式碼片段！ 總而言之，遵循此最佳實踐可能會帶來一種新的、可讀且可維護的方法來測試您喜愛的生產程式碼。 > 經過測試的應用程式才是可靠的應用程式！
## 課程目標 - 認識 async/await 語法與收尾處理 ## 課程內容 接著來學 async/await 的收尾處理吧！ 說起來也神奇，只要加上 `finally` 區塊就可以了！ ``` try { const data1 = await $.get(url, params); // do something with data to get params2 const data2 = await $.get(url2, params2); // do something with data to get params3 const data3 = await $.get(url3, params3); // do the final task with data } catch (err) { alert('Something went wrong.'); } finally { // hide the loading icon } ``` 因為 `try/catch/finally` 本來就是一般同步程式設計語言會用到的錯誤處理語法 所以這整段程式碼，看起來跟一般的同步程式設計，幾乎一模一樣！ 就是這麼奇妙！應該不用我多解釋什麼了！ --- 多補充一句，我個人開發比較複雜的前端應用時，最常用的語法就是這種！ 我認為 `async/await` 加上 `try/catch/finally` 是最簡潔有力的！ 錯誤訊息提示、忙碌狀態提示，通通都有了，很輕易就做出 UX 很棒的應用程式！ ## 課後作業 請拿出第三課的作業，我們來改善這個頁面的 UX（使用者體驗），明確提示「忙碌中」這個狀態 --- - 請用 html 元素，在頁面中加入一段 `讀取中，請稍等...` 的訊息，這個元素預設不顯示 - 在開始呼叫 API 的地方，用 js 操作來讓那個 html 元素顯示 - 在結束呼叫 API 的地方，使用 `finally` 語法，用 js 操作來讓那個 html 元素隱藏 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 認識 promise chain 鏈接與收尾處理 ## 課程內容 接著來學 promise chain 的收尾處理吧！ 繼續拿 jquery 當範例，只要在上次的 promise chain 最後，加上 `.always()` 就可以了！ ``` $.get(url, params).then((data) => { // do something with data to get params2 return $.get(url2, params2); }).then((data) => { // do something with data to get params3 return $.get(url3, params3); }).then((data) => { // do the final task with data }).catch((err) => { alert('Something went wrong.'); }).always(() => { // hide the loading icon }); ``` 很簡潔有力吧！ ### ⚠️特別注意事項⚠️ 因為某些歷史因素，jquery 包裝的 promise 跟現在瀏覽器原生的 promise 有點不太一樣！ 原生的 promise 是 `.finally()`，而不像 jquery 是 `.always()`！ 為了教學方便，本課＆作業都用 jquery 示範，實務上如果看到 `.finally()` 請不要意外！ 都是類似東西，知道這樣就好！ ## 課後作業 請拿出第二課的作業，我們來改善這個頁面的 UX（使用者體驗），明確提示「忙碌中」這個狀態 --- - 請用 html 元素，在頁面中加入一段 `讀取中，請稍等...` 的訊息，這個元素預設不顯示 - 在開始呼叫 API 的地方，用 js 操作來讓那個 html 元素顯示 - 在結束呼叫 API 的地方，使用 `always()`，用 js 操作來讓那個 html 元素隱藏 寫完之後，你應該會發現不但 callback hell 改善了、錯誤處理有了、連 UX 都改善了！ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 認識 async/await 語法與錯誤處理 ## 課程內容 在非同步訓練一的課程，我們初步體驗到 async/await 寫起來的感覺，效果不錯！ 這次來試著加上錯誤處理！ 說起來也神奇，只要使用 `try/catch` 語法包起來就可以了！ ``` try { const data1 = await $.get(url, params); // do something with data to get params2 const data2 = await $.get(url2, params2); // do something with data to get params3 const data3 = await $.get(url3, params3); // do the final task with data } catch (err) { alert('Something went wrong.'); } ``` 因為 `try/catch` 本來就是一般同步程式設計語言會用到的錯誤處理語法 所以這整段程式碼，看起來跟一般的同步程式設計，幾乎一模一樣！ --- 上次我們說過：每次只要看到 await，就要去想「現在是去剝開 promise 的 then 裡面，拿出最後回傳的內容！」 現在可以多補充一句：「如果 await 後面的非同步任務跑失敗，就會直接 throw exception（拋出例外）」 有點看不懂沒關係，就先跟著使用方式，照做即可！ 工作上多用幾次之後，會逐漸抓到感覺！ ## 課後作業 這一次的作業，我們要延續「非同步 JS 訓練一：第3課」的內容，並且加上錯誤處理 https://codelove.tw/@howtomakeaturn/post/bapzbx 請找出你上次寫的作業，把上次的三組 API，換成以下這三組 ``` https://codelove.tw/fake-api/get-current-user-unstable ``` ``` https://codelove.tw/fake-api/get-orders-unstable ``` ``` https://codelove.tw/fake-api/get-order-details-unstable ``` --- 幾點注意事項如下： - 繼續用 `$.get()` 來呼叫 API 即可 - 寫一個 `try/catch` 就好了，不要寫成多個 `try/catch` - 任何一個 API 失敗時，請 `alert('抱歉，系統出了點問題，請稍後再試一次。');` 寫完之後，你會發現，整段程式碼看起來很像「一般程式語言中，同步程式設計」的寫法！ 連 `try/catch` 看起來都跟常見程式語言的錯誤處理，一模一樣！ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 認識 promise chain 鏈接與錯誤處理 ## 課程內容 在非同步訓練一的課程，我們初步體驗到 promise chain 寫起來的感覺，效果不錯！ 這次來試著加上錯誤處理！ 只要在上次的 promise chain 最後，加上 `.catch()` 就可以了！ ``` $.get(url, params).then((data) => { // do something with data to get params2 return $.get(url2, params2); }).then((data) => { // do something with data to get params3 return $.get(url3, params3); }).then((data) => { // do the final task with data }).catch((err) => { alert('Something went wrong.'); }); ``` 上面這段程式碼，總共發了三次 ajax，不論是哪一次失敗，都會被最後的 `.catch()` 捕捉到喔！ 很簡潔有力吧！ --- 看到這邊，你可能會心想，可是上次 callback hell 的寫法，我可以針對三個 api 分別寫不同的 callback，顯示不同的錯誤訊息耶！ 這次只能寫一個 callback，給一個籠統的系統錯誤，好像 UX 不夠好呀？ 其實你說的沒錯！這樣寫的確會有這問題！ 但我個人經驗是，系統跑 ajax 失敗，其實整體 UX 已經很不好了，用戶已經覺得這網站很難用了 明確顯示哪個步驟失敗，其實幫助不大。就一律在訊息中「道歉＆懇請用戶再試一次＆告知可以回報客服」就好了！ （如果真的要顯示不同錯誤訊息，是有其他 promise 比較複雜的寫法，這一課先不談論） ## 課後作業 這一次的作業，我們要延續「非同步 JS 訓練一：第2課」的內容，並且加上錯誤處理 https://codelove.tw/@howtomakeaturn/post/8aAPD3 請找出你上次寫的作業，把上次的三組 API，換成以下這三組 ``` https://codelove.tw/fake-api/get-current-user-unstable ``` ``` https://codelove.tw/fake-api/get-orders-unstable ``` ``` https://codelove.tw/fake-api/get-order-details-unstable ``` --- 幾點注意事項如下： - 繼續用 `$.get()` 來呼叫 API 即可 - 寫一個 `.catch()` 就好了，不用特別寫三種錯誤訊息 - 任何一個 API 失敗時，請 `alert('抱歉，系統出了點問題，請稍後再試一次。');` 寫完之後，你應該會看到多個 `.then()` 串接在一起，不再出現多層深度的巢狀 callback 傳遞了！ 而且錯誤處理的部份，也比之前改善很多，簡單又清楚！ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 認識 callback hell 與錯誤處理 ## 課程內容 在非同步訓練一的課程，我們初步體驗到 callback hell 寫起來的感覺 其實，當年的工程師，面對的真正痛苦，比上次體驗到的更嚴重！ 非同步任務，常常需要處理「任務失敗」的情況 比方說「主機回應超時」、「資料庫連線失敗」、「主機斷線」等等情況 按照 javascript 的慣例，就是多寫一個 callback function 處理這種情況 比方說函式可以設計成這樣 ``` runAsyncTask(success, error) ``` 使用者只要分別傳進「成功後的處理」以及「失敗後的處理」即可 ``` runAsyncTask(() => { alert('執行成功！'); }, () => { alert('執行失敗，請等等重新嘗試！'); }); ``` 如果繼續拿 jquery 做範例，看起來會像這樣： ``` $.ajax({ url: url, data: params, success: (res) => {}, error: (res) => {}, }); ``` 註1：他不是設計成兩個參數，而是物件的兩個屬性，但意思一樣 註2：沒辦法繼續用上次的 `$.get()`，他沒有設計錯誤處理的 callback。所以改用 `$.ajax()` 光看這樣可能還好，畢竟寫 javascript 就是很常到處寫 callback 傳來傳去 可是，你能想像連續呼叫多個 ajax 時，再加上錯誤處理機制，callback hell 會有多嚴重嗎！ 來跟著作業，體驗一下，試著用當年的方式開發看看吧！ ## 課後作業 這一次的作業，我們要延續「非同步 JS 訓練一：第1課」的內容，並且加上錯誤處理 https://codelove.tw/@howtomakeaturn/post/lqOkWq 請找出你上次寫的作業，把上次的三組 API，換成以下這三組 ``` https://codelove.tw/fake-api/get-current-user-unstable ``` ``` https://codelove.tw/fake-api/get-orders-unstable ``` ``` https://codelove.tw/fake-api/get-order-details-unstable ``` 這三組 API 很不穩定，每組 API 都有 1/3 的機率會抓資料失敗！ 實務上不可能有 API 爛成這樣，通常失敗率會在 1% 以下，這次是方便測試，我故意寫的 API --- 幾點注意事項如下： - 不要使用現代的非同步寫法，請使用 callback hell 的寫法 - 使用 `$.ajax()` 來呼叫 API - 使用 `$.ajax()` 的 `success` 參數來處理成功的情況 - 使用 `$.ajax()` 的 `error` 參數來處理失敗的情況 - 第一個 API 失敗時，請 `alert('讀取用戶失敗，請稍後再試一次。');` - 第二個 API 失敗時，請 `alert('讀取訂單列表失敗，請稍後再試一次。');` - 第三個 API 失敗時，請 `alert('讀取訂單細節失敗，請稍後再試一次。');` 寫完之後，你應該會看到有三層深度的巢狀 callback 傳遞！ 而且比上次的情況還離譜！加上錯誤處理之後，整段 code 更加難以閱讀、維護！ 這就是當年前端工程師，每天工作面臨的狀況！很悲慘吧！ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 認識 callback hell ## 課程內容 在一般「同步程式設計語言」中，程式碼執行的順序，就是一行一行跑下來，很容易理解 但 JavaScript 是「非同步程式設計語言」，很多時候，執行順序不是一行一行跑下來 為了讓用戶能持續流暢操作瀏覽器介面，工程師需要在會用到「非同步」的地方使用特殊寫法 最原始、也最單純的做法是使用 callback function，也就是把要在非同步任務結束後才跑的任務，寫在 callback function 傳進去 以 jquery 最原始的 ajax 處理為例 ``` $.get(url, params, (data) => { // do something with data }) ``` 第三個參數，也就是箭頭函式的部份，就是所謂的 callback function --- 當年的前端工程師，在一開始覺得這樣寫沒問題，但是當網頁應用程式越來越複雜之後 發現在需要連續執行多個非同步任務時，會需要不斷傳 callback function 進去更深層 最後導致的結果，就是所謂的「callback hell」！這讓程式碼很難讀、很難維護！ ``` $.get(url, params, (data) => { // do something with data to get params2 $.get(url2, params2, (data) => { // do something with data to get params3 $.get(url3, params3, (data) => { // do the final task with data }); }); }); ``` 這樣描述比較抽象，來跟著作業，試著用當年的方式開發看看吧！ ## 課後作業 讓我們時光倒轉，回到 2000 年代，體驗一下當時的開發方式 請使用 https://jsfiddle.net/ 寫作業 請載入 jquery 套件，並且用 `jQuery.get()` 來處理 ajax ``` <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> ``` --- 假設你身為前端工程師，正在開發電商網站 今天，產品經理跟你說，為了提升 UX（用戶體驗） 希望能在網頁上顯示「最近一次的訂單內容」，就像這樣： ``` 尊貴的客戶您好，您上次的消費內容是： 訂單編號：XXX 訂單內容：XXX 訂單金額：XXX 希望這次也能有機會服務您！ ``` --- 目前後端工程師提供了三組 API 給你使用 使用當年的 jquery 寫法會像是下面這樣： ### 取得當前登入用戶的資料 為了簡化起見，你不用實作「登入、驗證」等等功能 就當作用戶已經登入了，請直接呼叫這個 API 即可 ``` $.get("https://codelove.tw/fake-api/get-current-user", {}, (res) => { console.log('the current user id is:' + res.data.user.id) }); ``` ### 取得指定用戶的全部訂單 ``` $.get("https://codelove.tw/fake-api/get-orders", { user_id: 1 }, (res) => { console.log('get ' + res.data.orders.length + ' orders'); }); ``` ### 取得指定訂單的內容細節 ``` $.get("https://codelove.tw/fake-api/get-order-details", { order_id: 1 }, (res) => { console.log('the order id is #' + res.data.order.id); console.log('the order content is ' + res.data.order.content); console.log('the order amount is $' + res.data.order.amount); }); ``` - 請依序呼叫這三個 API，來完成這次需要的功能 - 把第一個 API 拿到的 user id 放進第二個 API 呼叫 - 把第二個 API 拿到的最後一個 order id 放進第三個 API 呼叫 - 把第三個 API 拿到的資料，顯示在網頁上 請注意，不要使用現代的非同步寫法，請使用 callback hell 的寫法，也就是： - 在第一個 API 的 callback function 裡面呼叫第二個 API - 在第二個 API 的 callback function 裡面呼叫第三個 API - 在第三個 API 的 callback function 裡面完成最終需要的功能 寫完之後，你應該會看到有三層深度的巢狀 callback 傳遞！ 這就有一點悲慘了，有點 callback hell 的感覺！ 做出以上功能，你就完成這次的課程目標了！
https://youtu.be/I7dwJxGuGYQ ## TL;DR - 在使用 useContext 時，一定要將其包裝成 custom hook - [好讀版本](https://hackmd.io/@jason60810/rklVqNUh2) - [React 官方文件新增了 TypeScript 使用專文](https://react.dev/learn/typescript?fbclid=IwAR3Pgkr8xpS48Vwa0ADo3oagaAPKX1q05jHhtbXH8ltV8MKwa8FAvePoXPU) - [英文版本](https://jason60810.hashnode.dev/always-use-a-custom-hook-for-context-api-not-usecontext-react-context-api-typescript) ## 資料夾結構 ( 使用 next app route )  ### theme-context.tsx 一定要加上 `use client`，因為 useState 只能在 client component 運作 ， **特別注意，就算這裡加了`use client`，所有的子層還是 server component (預設)**  ### layout.tsx 加上 provider 之後，下面所有的子層都可以拿到值，不用用 prop 一個一個傳下去  ### page.tsx  ### logo.tsx 1. 因為 useContext 要在 client component 運作，所以要加上 `use client`。 2. 當使用 useContext 時，一定要引入 ThemeContext，用起來很麻煩 3. 因為 ThemeContext 預設是 null，所以當不是在 provider 裡使用 `useContext` 時 ( Logo component )，會發生錯誤，因此需要先確認有 context  舉例:不是在 provider 裡使用 `useContext`  ### 創建 custom hook  ### 使用 custom hook 現在引入 ThemeContext 和處理錯誤的問題，已經抽離到 custom hook 中  ### 加上型別 1. React.ReactNode，可以接受 JavaScript primitives ，如果只想要是 jsx 可以使用 React.ReactElement ( [react 官方文件](https://react.dev/learn/typescript#typing-children) ) 2. `type Theme` 可以讓 `useState` 在 get 和 set 時，可以使用正確的型別，例如:當想要 `setTheme('blue')` 時，會報錯，因為 `type Theme` 只有 'dark' 和 'light' 3. 在給予 createContext 型別時，可以利用 ts 的 union 讓 createContext 知道可能有 null 這個型別 ( [react 官方文件](https://react.dev/learn/typescript#typing-usecontext) ) 
## 課程目標 - 能夠從 Github 抓專案下來 ## 課程內容 我們在上一課發佈專案到 Github 了 這次來學習把專案從 Github 抓下來吧！ 首先來把電腦上的專案刪掉，模擬我們今天拿到一台新電腦的情境 在主視窗點選 `Current Repository` 會秀出專案列表 對著我們的專案 `my-first-repo` 按右鍵，然後選 `Remove` 刪除，確認視窗繼續按 `Remove` 會發現 Github Desktop 變回初始畫面了！ --- 但目前只是 Github Desktop 停止追蹤專案而已，那個資料夾其實還在電腦上喔 請在電腦上，直接前往那個資料夾，會發現檔案都還在 請把 `my-first-repo` 整個資料夾刪掉，這樣才是真的模擬拿到新電腦 --- 現在來試著把專案從 github 抓下來吧！ 點擊 `Clone a Repository from the Internet` 因為已經登入 github 了，應該會顯示專案列表 找到上次發佈的 `my-first-repo` 專案 （如果專案沒出現，畫面上有一個重新整理的按鈕，按一下） 然後 `Clone` 按鈕按下去 成功囉！專案回來囉！ `History` 分頁按下去，看看是不是跟之前都一模一樣？ 軟體工程師在跨裝置工作（使用多台電腦）、或是多位工程師合作時，就是這樣同步專案內容的！ ## 課後作業 接續前一課的作業，專案已經傳到 github 了 現在來模擬你拿到新電腦，第一次從 github 抓專案的情境 請把原本電腦上的那個專案資料夾，整個刪掉 這時去看 Github Desktop，應該會顯示「Can't find」開頭的提示 請將 Github Desktop 視窗截圖，這是本次作業的第一張截圖 截圖完畢之後，點擊畫面上的 `Remove` 將這個專案刪掉 --- 現在電腦上已經沒有專案了，就當作你今天拿到一台新電腦，準備開始工作，要把 github 上的專案抓下來 請點擊 `Add` 然後選 `Clone Repository...` 接著找到你在 github 上的專案 把剛剛那個專案整個抓下來之後，你應該會發現，剛剛整個刪掉的專案資料夾，現在內容又通通出現囉！ 請將 Github Desktop 視窗截圖，這是本次作業的第二張截圖 --- 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請把第一張、第二張截圖，分別貼到留言區
手上有多個網站 都是 Laravel 5.8，放在一台 Ubuntu 18.04 的機器上（租用 Linode 機器） 四、五年了，一直沒去更新，最近終於下定決心來更新 首先把 Laravel 5 -> 6 -> 7 分多次升級，然後部署 都還算順利，官方的 upgrade guide 很清楚，簡單照做就完成 但是無法升到 laravel 8 因為需要 php 8 我那台 ubuntu 18.04 安裝 php 8 一直失敗 直接升級 OS 也失敗，一堆問題會出現 最後決定，在 Linode 租一台新的 Ubuntu 22.04 然後把專案通通搬過去 --- 因為專案中很多「用戶上傳的圖片」放在 local，所以都需要一起搬運 最後是用 scp 硬搬檔案 然後用 mysqldump 搬運資料 才終於順利升級到 laravel 8.83 了 詳細用到的指令大概像這樣 ``` scp -r [email protected]:/{PATH}/{FOLDER} /{PATH} scp -r [email protected]:/etc/apache2/sites-available/{CONF_FILE} /etc/apache2/sites-available/ a2ensite service apache2 reload create mysql user & database with phpmyadmin mysqldump --column-statistics=0 --default-character-set=utf8mb4 -h xxx.xxx.xxx.xxx -u {USER} --single-transaction -p{PASSWORD} {DATABASE} > /home/dump.sql; mysql -u root -p{PASSWORD} {DATABASE} < /home/dump.sql artisan down legacy site composer install -> new site is now online ``` --- 簡單筆記分享一下，希望能幫到一些人～ # Refs - https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-22-04#how-to-find-your-server-s-public-ip-address - https://itslinuxfoss.com/install-laravel-ubuntu-22-04-lts/ - https://www.digitalocean.com/community/tutorials/how-to-configure-apache-http-with-mpm-event-and-php-fpm-on-ubuntu-18-04 - phpmyadmin password left blank, so it's random now - https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-22-04 - skip the whole Step 2 — Adjusting User Authentication and Privileges - `ssh-keygen` because I need a public key
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ##### [【前端動手玩創意】太屌了吧！？用Class(類)製作Jquery的效果！(11)](https://ithelp.ithome.com.tw/articles/10312114) ##### [ 【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯(12)](https://ithelp.ithome.com.tw/articles/10312922) ## 前情提要 一陣子沒寫前端動手玩創意了 今天要來點好料的 我們談談關於藝術 對 就算是寫程式我們也是可以有藝術氣息的 別這麼驚訝XD 假設我有一組資料 一般人來說 最直覺的就是把html裡面的元素寫出來寫死 直覺菜鳥就是寫出來啊 ``` <div id="items_list"> <li class="buy_item">1.紅茶 <div class="price">10</div> <div class="del_btn">X</div> </li> <li class="buy_item">2.奶茶 <div class="price">15</div> <div class="del_btn">X </div> </li> <li class="buy_item">3.綠茶 <div class="price">30</div> <div class="del_btn">X</div> </li> </div> ``` 要更新則是就去更改DOM就好了 反正我都學會JS了 有什麼大不了(? 但是現在已經進入大前端時代了就算你寫原生 也會有data model的概念 這部分可以參考站長阿川寫過的好文 裡面的文筆跟邏輯 不誇張 是我見過「華文圈寫得最好的前端教學」 尤其就是這篇 關於data model的介紹 切入點非常的有趣也很有道理 有興趣的自己去花心思讀看看 [認識 data model 與 render function](https://codelove.tw/@howtomakeaturn/post/9xLo5q) 稍微有點料的前端學習者 本身就會寫一寫 想說：既然有一隻API是createElement 那是不是我可以整個html都用js寫出來(? 這是個超級有趣的觀點 ## 關於data render的概念: 「是不是我可以整個html都用js寫出來」 相傳牛頓提出三大定律以後 認為地球和八大行星一開始的慣性力叫「上帝的第一推動力」 實際上這個： 「整個html都用js寫出來」 也是推動前端往框架邁進的思考第一步 可以說是前端慣性的上帝推力了 當然如果你有打籃球 也可以比喻成上籃的第零步XD ## 觀念筆記 ### html程式碼 ``` <div id="buylist"> <h1>myBuylist 購物清單</h1> <div class="buyitem"> <label>產品名</label> <input/> <label>價錢</label> <input/><span class="addbtn">+新增</span> </div> <div id="items_list">這邊準備用JS插入東西所以這段只是說明文字</div> </div> ``` 把整個頁面的元素寫出來 但是資料的區塊保留著 因為等等我們要用JS的API去動態生成 未來直接data render 方便更新與管理 ### JS程式碼 ``` var shoplist = {}; shoplist.name = "購物清單"; shoplist.list = [ { name: "吹風機", price: "300" }, { name: "麥克筆", price: "20" }, { name: "筆記型電腦", price: "29300" }, { name: "Iphone 9", price: "5200" }, { name: "神奇海螺", price: "1000" }, ]; var item_html = "<li id={{id}} class='buy_item'>{{name}}<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_html = "<li class='buy_item total'>總價<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_price = 0; for (var i=0; i < shoplist.list.length; i++) { var item = shoplist.list[i]; total_price += item.price; var current_item_html = item_html.replace("{{num}}", i + 1) .replace("{{name}}", item.name) .replace("{{id}}", "buyitem_" + i) .replace("{{price}}", item.price); $("#items_list").append(current_item_html); } ``` 這邊值得關注的一點是資料的處理 也就是數據結構上使用物件與陣列去儲存資料 為什麼要學 陣列 為什麼要學物件 這兩個都是抽象的名詞 他們都是為了來處理資料所規劃的兩種不同內容 ## 關於物件與陣列 物件就像是RPG角色 會有很多的屬性 魔法 敏捷 力量 血量 這些屬性都是被附加在person上面 所以person.blood是一個資料 person.power是一個資料 person.magic是一個資料 最後都存在person裡面 這個person就是一個含有很多屬性的物件 感覺就是有血有肉很3D 而陣列就比較平面化 就是很多數字排成一列而已 其實沒什麼特別需要關注的 這兩個也不會不好區分 只要稍微做個比喻 都很好理解 以我們的code來講解 shoplist就是一個物件 含有一些屬性 包含名字與清單 因為清單很多 所以清單用一個陣列儲存 陣列裡面放很多個物件 這些物件就是每一個清單包含的那些購買項目 其實不用太在意誰是誰因為用看的就很清楚 最後我們用迴圈去把shoplist裡面的每一筆資料都丟進去 中途replace是文字處理 把我們設置的{{name}}這種花括號的東西換成真實資料 這部分有點樣板語言的感覺XD 其實非常有趣 很值得玩味 ## 心得 這次比較多實在的JS程式碼 就不只是玩玩切版了 算是有點靠近框架的部分(◉３◉) 動手玩創意這個系列其實靈魂之處就在於「有趣」兩個字 坊間把前端描繪成為了找工作的銅臭味 以及把切版講成無聊的工匠苦力活 我認為都是錯誤的解讀 我認為 只要是有趣的地方就是前端最有價值的地方 而不是誰學了那個框架 誰又認為哪個東西比較厲害 哪個語言比較屌 那都是很無聊的文字遊戲罷了 如果你喜歡這樣子的前端 請跟著這個系列繼續走(￫ܫ￩) 我們才只是在桃花源外的小溪旁玩水而已呢！ 未來會往天空飛翔哦XD
## 課程目標 - 使用 node 與 express 回應 http post request ## 課程內容 前面幾課我們學習了 http get 的寫法，這次來學 http post 的寫法 在「會更新主機資料狀態」的操作時，通常都會用 http post 例如，新增資料、更新資料、刪除資料，等等常見操作！ 通常主機資料狀態會放在「資料庫軟體」例如 mysql 裡面，我們簡單起見，放在一個 json 檔案就好！ --- 替這課建立 lesson6 資料夾，內容跟 lesson5 一樣即可 新增一個 new.ejs 檔案，放入以下內容 ``` <h1>新同學報到！</h1> <form method="post" action="/create"> name: <input type="text" name="name"> </form> ``` 然後在 index.js 加入這段程式碼 ``` const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.get('/new', function(req, res){ res.render('new'); }); app.post('/create', (req, res) => { const fs = require('fs'); const name = req.body.name; const data = fs.readFileSync('./lesson6/users.json'); const users = JSON.parse(data); users.push({ name: name }); fs.writeFileSync('./lesson6/users.json', JSON.stringify(users)); res.send('<h1>新增成功！</h1>'); }) ``` 然後去終端機輸入 ``` node lesson6/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/new ``` 你會看到新增同學的頁面與表單！ 輸入姓名之後，送出表單就可以新增同學的資料了！ --- 開頭跟 bodyParser 有關的兩行，要引入並設定好，才能使用 req.body 的參數 為什麼要加這兩行？這跟 express 的 middleware 機制設計有關，這邊不深入說明 反正就是在需要使用某些功能的時候，express 不會預設通通提供給你，要請你去設定啟用之後，才會支援 --- 之前處理 http get 的 url 參數時，我們使用 req.query 來取得參數 這次處理 http post 的表單參數時，我們使用 req.body 來取得參數 express 會這樣設計，是因為在 http 協定中，這兩種參數本來就放在不同地方喔！ 看不太懂沒關係，先照做就對了！ --- 檔案處理、新增資料放進 json 檔案的段落，跟之前的課程一樣，忘記的話就回頭翻閱一下吧！ ## 課後作業 這次要開發「新增文章」的功能 並且練習用 node 回應 http post request 請把 hw5 的內容複製到 hw6，然後增加 new.ejs 檔案 ``` /repo /hw6 /index.js /homepage.ejs /view.ejs /new.ejs /posts.json /public /style.css ``` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/new` 這個網址 這網址會把 new.ejs 的內容 render 出來，內容就放一個 form 表單 表單內可輸入 `標題` 以及 `文章內容`，點擊送出按鈕會以 http post 的形式發送到 `/create` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/create` 這個網址 將接收到的資料，存進 `posts.json` 裡面 完成以上任務，你就完成這次的課程目標了！ --- 在上傳到 github 時，你會注意到因為 `posts.json` 有改變，所以會帶著新資料一起上傳，好像有點怪？ 其實，實務上會把資料存在 mysql 這類專門資料庫軟體，不會這樣存在 json 檔案中 本課程為了簡化，所以直接存在 json 檔案，這不是實務正常做法～ 為了方便起見，每次新增文章 `posts.json` 都會改變，就都一起上傳，沒關係～
## 課程目標 - 使用 node 與 express 處理 url 參數 ## 課程內容 在瀏覽網站的時候，點擊不同頁面時，有時需要透過 url（網址）附帶一些參數 這課來學習如何用 node 處理 url 參數 替這課建立 lesson5 資料夾，內容跟 lesson4 一樣即可 在 index.js 加入這段程式碼 ``` app.get('/view', (req, res) => { const data = fs.readFileSync('./lesson5/users.json'); const users = JSON.parse(data); const index = req.query.index; const user = users[index]; res.send('<h1>' + user.name + '同學，你好！</h1>'); }); ``` 然後把 hello.ejs 的內容修改成 ``` <div> <% for(var i = 0; i < users.length; i++) { %> <p> <%= users[i].name %>同學，你好！ <a href="/view?index=<%= i %>">單獨打招呼頁面</a> </p> <% } %> </div> ``` 然後去終端機輸入 ``` node lesson5/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到每段訊息旁邊，多了一個單獨連結，點下去，就會到單獨打招呼頁面！ 操作看看吧！試試看「透過網址傳參數」的感覺！ --- 在 http 協定中，網址中出現問號 `?` 代表後面的部份是參數，參數的值應該可以單獨被抓出來 前面說過 `(req, res)` ，很多人會寫 `(request, response)`，兩者意思一樣，就是在 express 中代表請求＆回應的物件 這邊是我們第一次使用「請求」物件！我們在請求物件中，使用 `req.query.index` 找出名為 `index` 的參數 然後在首頁，透過迴圈，加上每個單獨頁面的連結，通通使用 `index` 作為參數傳遞 --- 實務上，開發後端應用時，只要是 http get request，有時會透過網址本身代表參數，例如 ``` /view/1 /view/2 /view/3 ``` 有時會透過 url parameter 傳遞參數，例如 ``` /view?id=1 /view?id=2 /view?id=3 ``` 這是一個主觀偏好問題，其實都可以！效果也差不多 這兩種寫法，在各種程式語言中，處理起來有點不一樣 本課就以 url parameter 作為示範，先照做即可，別擔心！ ## 課後作業 這次要開發「閱讀單篇文章」的功能 並且練習 url 參數的傳遞＆取得 請把 hw4 的內容複製到 hw5，然後增加 view.ejs 檔案 ``` /repo /hw5 /index.js /homepage.ejs /view.ejs /posts.json /public /style.css ``` 修改部落格首頁，替每篇文章加上 <a> 超連結，點擊之後會前往單篇文章的網址 舉例來說，第一篇文章的網址會是 ``` <a href="/view?index=0"> ``` 第二篇的網址會是 ``` <a href="/view?index=1"> ``` 第三篇的網址會是 ``` <a href="/view?index=2"> ``` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/view` 這種網址 然後根據從網址取得的索引參數，找出 posts.json 中對應的文章資料 接著把資料放進 view.ejs 模板中，回應顯示為網頁 請自行設計 view.ejs 的內容，簡單顯示一篇文章內容即可 請稍微加上一點樣式，弄得漂亮一點！ 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 使用 node 與 express 提供靜態檔案 ## 課程內容 目前為止的網頁，都是純 html，太陽春了！ 這一課來學習，如何用 node 來提供 css 或圖片之類的「靜態檔案」！ 替這課建立 lesson4 資料夾，內容跟 lesson3 同樣之外，再建立一個 public 資料夾，裡面新增 style.css 檔案 ``` /repo /lesson4 /index.js /hello.ejs /users.json /public /style.css ``` 在 index.js 裡面多加一行程式碼 ``` app.use(express.static('./lesson4/public')); ``` 在 style.css 裡面加入一些樣式 ``` p { color: green; } ``` 接著在 hello.ejs 加入樣式連結 ``` <link rel="stylesheet" href="/style.css"> ``` 然後去終端機輸入 ``` node lesson4/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到原本的打招呼訊息，文字變成了綠色！ --- 後端程式設計，不論何種程式語言，在提供圖片、css 這種靜態檔案的時候，通常會開一個獨立的 public 資料夾來放檔案 所以本課使用的 `app.use(express.static('./lesson4/public'));` 程式碼 就只是設定一下，請 express 從某個資料夾提供靜態檔案，就這樣而已！ ## 課後作業 這次要練習用 node 回應靜態檔案 請把 hw3 的內容複製到 hw4，然後增加 public 資料夾與 style.css 檔案 ``` /repo /hw4 /index.js /homepage.ejs /posts.json /public /style.css ``` 請在 style.css 中，稍微替你的日記首頁加一些樣式，弄得漂亮一點！ 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 使用 ejs 模板並讀取變數 ## 課程內容 這一課來學習如何讀取變數之後，放進 ejs 模板呈現！ 先來安裝之前用過的 readline-sync 套件 ``` npm install readline-sync ``` 替這課建立一個資料夾，然後建立 `index.js` `hello.ejs` `users.json` 這幾個檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules ├── lesson1 │ └── index.js ├── lesson2 │ ├── hello.ejs │ └── index.js └── lesson3 ├── users.json ├── hello.ejs └── index.js ``` 在 users.json 放入以下內容 ``` [ { "name": "小明", }, { "name": "小華", }, { "name": "小王", } ] ``` 在 hello.ejs 放入以下內容 ``` <div> <% for(var i = 0; i < users.length; i++) { %> <p> <%= users[i].name %>同學，你好！ </p> <% } %> </div> ``` 在 index.js 放入以下內容 ``` const express = require('express'); const app = express(); const engine = require('ejs-locals'); const fs = require('fs'); app.engine('ejs', engine); app.set('views', './lesson3'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ const data = fs.readFileSync('./lesson3/users.json'); const users = JSON.parse(data); res.render('hello', { users: users }); }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson3/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到很多則訊息，分別跟多位同學打招呼！ --- 這段程式不用我多加說明了吧！檔案讀取也是之前教過的內容！ 這邊唯一多學的東西，就是 ejs 關於 for 迴圈的語法，反正就是 `<%` 跟 `%>` 之類的東西包起來而已 ejs 還有支援很多豐富的語法＆功能，有興趣的話，自行研究一下吧！ ## 課後作業 這次要練習匯入資料到 ejs 模板 請新建立 hw3 資料夾，採用以下結構 ``` /repo /hw3 /index.js /homepage.ejs /posts.json ``` 請修改 homepage.ejs 內容，將文章內容移出來，放在 posts.json 裡面 ``` [ { "title": "第一篇日記", "content": "今天天氣很好，夏天太陽很大，讓我心情很好" }, { "title": "第二篇日記", "content": "早起出門運動，回家沖個澡，整天心情很好" }, { "title": "第三篇日記", "content": "下大雨一整天，整天在家追劇，滿舒服的" } ] ``` 這樣 homepage.ejs 內就不會只是 html 了，你會練習到 ejs 獨有的模板語法！ 完成以上任務，你就完成這次的課程目標了！ --- 請更新你的 github 專案內容，此時應該變成這樣 ``` /repo /hw1 /index.js /hw2 /index.js /homepage.ejs /hw3 /index.js /homepage.ejs /posts.json ``` 依此類推，之後就這樣交作業！
## 課程目標 - 使用 ejs 模板渲染出 html ## 課程內容 上一課我們成功讓後端回應 html 給瀏覽器了，很棒 可是每次都讓 res.send 回應一大串 html，就太奇怪了 至少要讓 html 內容放在單獨一個檔案，才有寫網頁的感覺吧！ 這課來學習如何做到這點吧！ --- 來安裝一款新套件，請在終端機輸入 ``` npm install ejs-locals ``` 替這課建立一個資料夾，然後建立一個 index.js 檔案與一個 hello.ejs 檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules ├── lesson1 │ └── index.js └── lesson2 ├── hello.ejs └── index.js ``` 在 hello.ejs 放入以下內容 ``` <h1>恭喜您，成功囉！</h1> <h2>您真的做得很棒！</h2> <p>繼續學習，不斷進步吧！</p> ``` 然後在 index.js 放入以下內容 ``` const express = require('express'); const app = express(); const engine = require('ejs-locals'); app.engine('ejs', engine); app.set('views', './lesson2'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ res.render('hello') }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson2/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到一段打招呼訊息！ --- ejs 是 javascript 社群常用的一款「模板引擎」套件 我們不是直接安裝 ejs 套件，而是安裝 ejs-locals 套件，這是一款把 ejs 整合進 express 的方便套件！ 在載入 ejs-locals 之後，接著用 app.engine 告訴 express 我們要設定模板引擎 然後用 app.set 告訴 express 要去哪邊找到 `模板檔案` 最後，處理 http 請求的地方，把原本的 res.send 改成 res.render 並放進模板檔案名稱，就可以囉！ 多看幾眼這段程式，這就是後端開發，用 node、express 來讀取一段 html，並且回應給瀏覽器的方式，不難吧！ ## 課後作業 這次要練習使用 ejs 模板 請新建立 hw2 資料夾，採用以下結構 ``` /repo /hw2 /index.js /homepage.ejs ``` 並開發一個 app，打開首頁 `http://localhost:3000/` 會顯示 homepage.ejs 的內容作為部落格首頁，homepage.ejs 的內容先放這些 html 就好： ``` <h1>我的個人日記 APP</h1> <div> <h2>第一篇日記</h2> <div>今天天氣很好，夏天太陽很大，讓我心情很好</div> </div> <div> <h2>第二篇日記</h2> <div>早起出門運動，回家沖個澡，整天心情很好</div> </div> <div> <h2>第三篇日記</h2> <div>下大雨一整天，整天在家追劇，滿舒服的</div> </div> ``` 完成以上任務，你就完成這次的課程目標了！ --- 請更新你的 github 專案內容，此時應該變成這樣 ``` /repo /hw1 /index.js /hw2 /index.js /homepage.ejs ``` 依此類推，之後就這樣交作業！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
