國外一名資深開發者分享工作心得與技巧，與大家分享原文！ 原文出處：https://dev.to/wraith/my-8-tips-for-a-better-life-as-a-developer-1hfg --- 我擔任軟體開發人員已經有 8 年多了，從我自己的經驗以及從一些非常有才華的人那裡學到了很多東西。在這篇文章中，我想分享一些真正讓我的體驗變得更好、更愉快的事情。 ## 1. 找一個您喜歡工作的地方  您的環境對您的生活貢獻很大。它可以增加或減輕壓力，幫助您集中注意力或分散注意力，讓您感到安全或不安全等等。因為它在我們每個人的生活中都扮演著不可或缺的角色，所以我認為從這裡開始是合適的。 無論您是在辦公室還是遠端工作，您很可能可以採取一些措施來找到一個讓您感覺「合適」的地方。我說「對」是因為這裡每個人都會有所不同。有些人想要感到舒適和「賓至如歸」。其他人想要一個不太舒適的區域，而是真正讓他們「進入狀態」並集中註意力的區域。 多年來，我嘗試了很多不同的地點，只是為了看看什麼對我有用。我坐在陽台上，享受早晨涼爽的空氣，喝著一杯熱咖啡。我確實坐在桌子底下，身上蓋著毯子。我坐在壁櫥、角落、咖啡店、餐廳、酒吧、汽車、公園、餐桌和樓梯井裡。透過所有這些實驗，我已經能夠找到在我需要時為我提供所需的地方。如果我需要集中註意力，我就需要獨處。某處有一扇可以關閉的門，但沒有窗戶讓我注意到有人走過。當我太舒適時，就像依偎在柔軟的沙發上的毯子裡時，我的工作效果就不太好。如果我需要改變節奏，或者只是需要和人們在一起，我發現我真的很喜歡坐在不太擁擠的小酒吧或餐廳裡。我可以在某個地方點一杯飲料和一份開胃菜然後工作，但周圍仍然有幾個人。 所以我鼓勵你嘗試幾個地方。找出什麼對你有用，同樣重要的是，找出什麼對你沒用。如果你找不到地方，你總是可以花一點力氣去打造你想要的地方！ 「正確」對你來說意味著什麼？ ## 2. 投資硬體  作為軟體開發人員，我們使用的硬體數量非常多。可以說，我們使用鍵盤和辦公椅之類的東西比生活中任何其他物品都多。當然，我們可以使用任何舊鍵盤來完成工作，我們可以坐在任何椅子上。但我發現，對「更好」的硬體進行一點投資會對我的工作體驗產生很大的影響。 ### 椅子 如果您在工作時坐著，並且您只想投資一件東西，那麼它絕對應該是您的椅子。一張既提供舒適又提供支撐的椅子確實可以大有幫助。從您可以坐多久並集中註意力而不會感到不舒服，到日常生活中背部、頸部和肩膀的感覺，您的椅子對您的整體健康和福祉有很大影響。因此，一定要找到一款好的產品，而不要只滿足於會導致不良姿勢的產品。 我個人使用 [Secretlab Titan Evo（蝙蝠俠主題）](https://secretlabchairs.ca/products/titan-evo-2022-series?sku=R22PU-Batman)，幾年來我對它非常滿意。與許多高端桌椅相比，價格還不錯。 ### 鍵盤 僅次於椅子（但相差不多）的是鍵盤。輕鬆地成為我們每天工作中互動最多的工具。那裡也有很多選擇，因此無論您的個人喜好如何，很可能有一些東西可以滿足您的需求。 每個人選擇合適的鍵盤都有很大不同。有些人喜歡低調的鑰匙而不是機械鑰匙。有些人需要整合 USB 連接埠。成本、人體工學、有線或無線、可自訂的按鍵和開關、背光、可配置的 LED、支援配置按鍵佈局、高度和大小、按鍵數量，這樣的例子不勝枚舉。尋找適合您的鍵盤無疑是一段旅程，但我強烈建議您繼續下去。當然，我們可以使用任何鍵盤來完成我們的工作......但我保證，如果您嘗試一下，找到「正確的」鍵盤將使您作為開發人員的一天和體驗更加愉快。 我使用 [Moonlander Mark 1](https://www.zsa.io/moonlander/)，絕對💙它！分離式設計確實幫助我不再那麼無精打采，也幫助消除了我長期以來的肩膀和手腕疼痛。再加上那些櫻桃棕色的開關聽起來很漂亮😍！ ### 滑鼠 談論鍵盤就不能不談論它們的助手——滑鼠。就像鍵盤一樣，市面上有許多不同類型的鍵盤，每個人都會有自己的偏好。幸運的是，即使是半像樣的滑鼠也有相當低的價格，因此嘗試一些滑鼠來找到適合您的滑鼠相對容易。但與此處的所有其他專案一樣，投入一點時間和金錢即可對您的體驗產生積極影響。 我的老鼠是 [ZLOT 垂直遊戲滑鼠](https://www.amazon.com/gp/product/B07T3PFWCB?th=1)。它是一款較輕（重量）的滑鼠，但具有良好的人體工學感覺和響應能力，我已經喜歡了很長一段時間了。 ### 螢幕 這絕對是一個可選專案，但我發現它讓我的工作更加愉快。並非每個人都需要外接顯示器。有些人實際上更喜歡直接使用筆記型電腦工作。但如果您確實喜歡使用外部顯示器，這是一項可以產生巨大影響的投資。 遺憾的是，由於多台 4k 顯示器在 Mac 上工作出現問題，我放棄了多顯示器設置，現在使用 [Sceptre 35" 曲面顯示器](https://www.sceptre.com/Monitors/2K-4K-Series/C355W-3440UN-35-Curved-Monitor-product1176category12category98.html)。它有很多空間，所以我仍然可以在一個螢幕上打開大量視窗。 ### 耳機 耳機也是可選的（有些人可能會反對這一點😝），但它們的好處怎麼強調都不為過。從減少干擾到幫助您集中註意力，一副好的耳機可以大有幫助。就像我列出的大多數專案一樣，每個人的偏好都會有所不同。但是，投入一點時間和金錢來尋找一雙適合您的好鞋，確實可以將您的遊戲提升到一個新的水平。我認識的許多人都尋求良好的降噪效果，而且它們必須輕盈舒適，這樣才能一次佩戴幾個小時。 我個人喜歡使用 Beats。我曾經使用[Studio3](https://www.bestbuy.ca/en-ca/product/beats-by-dr-dre-studio3-over-ear-noise-cancelling-bluetooth-headphones-black/11534527 )但是當我必須開始戴眼鏡時，我不喜歡這些耳機給我的鏡框帶來的壓力，所以我改用了[Beats Fit Pro](https://www.beatsbydre.com/earbuds/beats-fit-pro?sku=MK2F3) 並且對它們非常滿意。我已經連續戴了 8 個小時，效果非常好。它們輕巧、舒適、音質好，並且在我慢跑和運動時表現良好且穩定。 您使用什麼硬體？您夢想的硬體是什麼？ ## 3. 找到您*喜歡*使用的工具  除了硬體之外，作為開發人員，我們還使用許多軟體工具來完成我們的工作。有些我們別無選擇，但也有很多我們可以選擇，找到您真正喜歡使用的工具確實可以讓您的日常體驗變得更好。即使只是擁有一個可以配置為您喜歡的外觀的工具也可以產生積極的影響。 我在這裡想強調的不是找到每個人都使用的工具，因為他們可以做各種各樣的事情。更多的是尋找您真正「喜歡」和「期待」使用的工具來完成工作。即使它們不能完成其他工具可以完成的所有奇特的事情，如果您確實希望使用其他工具，那就使用它！擁有我們積極喜歡的工具確實會為我們的生活增添很多積極性。 多年來，類似的工具有很多，但這裡有一些工具為我的日常生活帶來了很多樂趣： - Giphy Desktop app - 用 gif 回覆取代無聊的文字，讓 Slack 訊息變得生動起來。 - Raycast - 這已經取代了我 Mac 上的 Spotlight。透過專業版，我可以存取 ChatGPT 4...因此，只需一個快速鍵盤快捷鍵，我就能輕鬆掌握 AI。對我來說遊戲規則改變者！ - Obsidian - 雖然這已經是一個流行的筆記應用程式，但我花了一些時間編寫了一些腳本來為我自動化工作，它完全改變了我記下所有筆記並跟踪我需要做的所有事情的方式。 - Arc browser - Arc 花了整整 1 天的時間才成為我的主要瀏覽器。現在，當我測試瀏覽器對我正在建立的某些功能的支援時，我只使用其他瀏覽器（在我的桌面上）。 - Habitical - 獲得徽章、成就和一般遊戲化讓我非常有動力，所以這個待辦事項應用程式讓我管理和執行任務變得更加有趣！ 有哪些工具可以為您的日常開發生活帶來樂趣？ ## 4. 設定目標  我知道這聽起來很明顯，而且我相信我們都從無數其他來源聽到這一點。但您可能會驚訝地發現有多少人沒有為自己設定目標。不相信我？向你的任意 2 到 3 個鄰居詢問他們目前正在努力實現什麼目標。當我問這個問題時，經常得到的只是聳聳肩，然後回答「沒什麼」。 僅僅設定目標也是不夠的。你也必須定期考慮它們。有些方法建議將它們寫下來並放在鏡子上或您經常看到它們的地方。這個方法對我個人來說沒有效果，但也許對你有用？對我來說有效的方法是每天早上開始工作前坐下來15 分鐘，並重點思考我的目標、我所有的待辦事項以及日曆上的所有事情（是的，我實際上在日曆上留出15分鐘的時間）這個，並強迫自己堅持這個時間）。在這段時間裡，我思考我的目標，並找出我今天可以做的一件小事，讓我離實現每個目標更近一步。 例如，如果我的目標是在家人來過感恩節之前清理車庫，我會想，「我今天可以做哪一件小事來實現這個目標？」。有時答案特別小…「掃到工作台下面」。其他時候我可能會更有動力，或者我有更多的可用時間，這可能是更大的事情。無論如何，請花一些時間考慮您今天可以採取的一項行動來實現該目標。 當我這樣做時，我的大腦中會發生一些事情。我發現自己感覺更有成就感和更樂觀。當然，完成目標可能是一條漫長的道路（如果它是一個大目標），但是知道我離我想要完成的事情更近了，這對我的日常生活產生了積極的影響，並讓我能夠完成的事情比我想像的還要多。 無論大小，給自己設定目標。然後定期思考它們，並採取許多微小的行動，以朝著前進邁出一步。我保證這會為您的生活帶來美好的事物！ 現在您正在努力實現哪些目標？ ## 5. 保持好奇心並了解*為什麼*  很多人對編碼專案中的完成方式感到沮喪或評判。我肯定去過那裡！ - “為什麼有人選擇這項技術？！對於這個用例來說，其他技術要好得多...” - “為什麼有人會寫這樣的程式碼？！” - “如果我們不做 X 而只是做…，事情會好得多” 這些聽起來很熟悉嗎？ 儘管事情有時會令人沮喪，但在軟體開發中，做出的每個決定背後幾乎總是有一個「原因」。這是最好的選擇嗎？也許不是……但做出這樣的選擇還是有原因的。 我曾經對事情的現狀感到沮喪，然後在嘗試解決問題時感到沮喪，然後在遇到障礙時感到沮喪。但最終，事情突然發生了，我沒有感到沮喪，而是開始尋找這些事情發生的原因。背後的*原因*是什麼。當我養成「尋找原因」而不是「想知道為什麼不」的習慣時，我的好奇心變得更強。我發現我正在尋找更多的訊息，更徹底地學習和理解事物，更多地同情與我一起工作的人，最終，沮喪的感覺減少了很多。 現在，我的經歷更加積極了。無論我是重構一段複雜的程式碼，試圖找到解決惱人問題的方法，還是為新工作學習全新的程式碼庫，我實際上更喜歡這個過程，因為我只是好奇並想知道「為什麼」。 最近一次讓您真正感到沮喪的編碼*事情*是什麼？您知道*為什麼*會是這樣嗎？ ## 6. 為重點工作劃出日曆  這說起來容易做起來難，具體取決於您的工作地點，但它會對您的開發人員生活產生驚人的影響！ 您是否曾經在該區域中，只是編寫程式碼來建立該新功能，然後「*叮！*」有人向您發送了一條緊急的 Slack 訊息？或是有人拍拍你的肩膀問你問題？您解決了乾擾問題，然後返回螢幕，然後您就失去了所有註意力？如果沒有……我願意賭很多錢，你會在職業生涯的某個時刻這麼做。 「在區域中」或進入「心流」的概念是一個已經被研究和寫了很多的主題。我強烈建議您查看一些有關該主題的文章和書籍，因為這是一個非常有趣的主題（至少對我來說是😃）！其中許多研究都表明，處於心流狀態是多麼有益，而且在中斷後可能需要 20 分鐘以上才能恢復到那種精神狀態！因此，找到讓自己進入這種心態並保持這種狀態的方法非常重要！ 我發現讓自己進入這種狀態的最佳方法之一就是在日曆上劃出大量時間專門用於「專注工作」。一開始這可能是一個挑戰，讓人們在嘗試聯繫之前檢查您的日曆或 Slack 狀態，並幫助每個人了解您將在焦點時間結束後立即回覆他們。但最終人們會明白過來，並且回報是巨大的！別忘了在這段時間關閉通知！ 不過這裡有一些提示...... - 接受有時會出現緊急事務並需要更高優先順序的事實。這就是生活，我們只能隨波逐流……但這不該成為「常態」。 - 拍攝 2-3 小時的片段。少於這個數量會讓人覺得不夠，但超過這個數量，人們就會被迫更頻繁地打斷你。請記住，其他人也有重要、緊急的事務，在當今的工作環境下，讓他們等待半天以上才能獲得地址確實不公平或不合理。 - 在你最有生產力的時間安排這些時間段。對我來說，早上 6 點到 10:30 左右我的工作效率最高。所以我通常會嘗試將我的專注時間安排在這些時間裡。 您發現一天中的什麼時段您的工作效率最高？ ## 7. 讓 PR 小一點  我喜歡這個，並且在過去一年左右的時間裡它已經成為我的首要任務。 事實證明，保持 Pull 請求（或 GitLab 人員的合併請求）較小有很多積極的好處。發布的錯誤更少，我們審查程式碼的時間更少，功能的推出速度更快，僅舉幾例。所有這些不僅使我們的產品變得更好，而且我發現它也極大地改善了我作為開發人員的體驗！ 透過專注於較小的變化，我發現我可以更徹底地思考問題，考慮到在較大變化的混亂中可能被忽視的用例。我能夠更快地將變更納入審查，我的團隊成員能夠更快地審查我的程式碼，因為我只佔用了他們5 分鐘而不是2 小時的時間，並且在審查期間，我收到的程式碼要少得多變更請求。因此，更好的程式碼將會出現，我可以繼續花更多的時間來建立新的東西，而不是必須解決一堆被遺漏的錯誤。 另一方面，審查小型 PR|MR 比大型 PR|MR 更令人愉悅。您是否曾經需要審查某人的 PR|MR，其中包含數千個更改、跨越 20 多個檔案以及應用程式的多個區域？當你這樣做時，你的第一個反應是什麼？您是否對參與並開始審核感到過於興奮？或者，也許您感到“呃”，於是推遲了會議，因為距離下一次會議只有 30 分鐘，而您可以在這段時間內完成其他事情？ 當審查大型 PR|MR 時，通常會失去很多細節（或至少受到較少的關注），最終，大多數人會達到「審查盲目性」或「審查疲勞」的地步，事情開始被忽視，或者審稿人必須離開一段時間，稍後再回來。這一切都會導致審核過程花費更長的時間、效率更低，並導致提交更多的變更請求。更不用說所有團隊成員都有的不滿情緒了。 自從我開始將此作為自己的優先事項，並與團隊成員一起努力讓他們也這樣做時，我注意到我在 PR|MR 方面的經驗明顯改善了。我更願意在會議之間跳出一些評論，我不得不要求更少的改變，而且我不會在需要離開並重新振作起來之後感到精疲力盡。就連我的計劃也變得更準確了！ 總而言之，我強烈向大家推薦這個。如果您想了解更多關於這樣做的好處，我建議您查看 [LinearB 部落格](https://linearb.io/blog) 以及 [Dev Interrupted 播客](https://linearb.io/dev-interrupted/podcast).他們談到了一些很棒的觀點，我發現這些觀點確實對工程領導者和團隊有幫助！ 你曾經審查過的最糟糕的公關是什麼？ ## 8. 寫下一切！  我的最後一個建議是我在去年開始做的事情，在閱讀了[如何做智慧筆記](https://www.amazon.ca/How-Take-Smart-Notes-Technique/dp/3982438802)和[把事情做好](https://www.amazon.ca/Getting-Things-Done-Stress-Free-Productivity/dp/0142000280)它對我的生活產生了驚人的影響。 當我學到新東西時，我會把它寫下來。即使只是一小段描述我學到的東西。當出現新任務時，無論大小，我都會把它寫下來。在會議期間，如果分享想法、給予回饋、提出問題，所有這些都會被記錄下來。如果我對某事有一個隨意的想法，或者一個頭腦發熱的想法……你猜對了……它會被寫下來。然後，每當我有幾分鐘空閒時間時，我都會先看筆記，而不是瀏覽社群媒體。我盡可能回顧它們，這強化了我腦海中的訊息，但也幫助我將不同的想法聯繫在一起，這往往會產生一個全新的想法。 透過這樣做，我發現我對事情的記憶更加徹底。如果我不能，我有記錄並且可以將其調出！它使我能夠完成更多的工作文件，而且我甚至在任何給定時間都有 4 或 5 篇部落格文章正在編寫中！遺漏的事情少了很多，而且我能夠完成更多的事情。 我最近開始了一份新工作，透過使用這種方法，人們已經來找我詢問我是如何做到這麼多的！秘密醬汁？全部寫下來並將其加入到系統中。 這對我來說改變了遊戲規則，我只需要鼓勵其他人也這樣做，因為我真的相信這可以使他們的生活受益匪淺！ 你用什麼方法來記住和分享你學到的東西？ ## 結論 在過去 8 年多的軟體開發人員和工程師工作中，我學到了很多。我經歷過好時光和壞時光，並一路走來學到了一些非常有用的人生課程。透過找到我喜歡工作的地方，在我的硬體上投入更多的時間和金錢，找到我「喜歡」使用的工具，設定目標，保持好奇心並專注於“為什麼”，定義專注工作的時間，專注於保持PR 較小，並寫下我能寫下的一切，我可以誠實地說，我的開發者體驗得到了極大的改善。 我非常希望這些技巧中至少一兩個能改善您的體驗。
## 前情提要 常常寫文章的時候都會運用到圖文並茂， 如果可以設定文章的圖片封面就是一個很棒的設計。 今天的JS腳本教學已經夢幻連動！ 原本IT幫的文章與codeLove像是平行宇宙，只有偶爾轉載，現在， 教學內容直接來針對codelove來寫一個小小有趣小功能XD ## 目標設計 今天以codelove這個論壇為例， 讓我們來手動創造一個小腳本：分析文章內容，以正則去匹配圖片網址， 然後透過create的API寫出div，並且監聽事件， 當點擊圖片的時候，把圖片網址放到封面圖片的input欄位。 ## 效果 會根據textArea change的時候來匹配出網址。 並且創建div與img元素去放入網頁。  點圖片後會把圖片網址丟入。  ## 程式碼內容 ``` // 獲取textarea元素 var textarea = document.querySelector("body > div.container.px-0 > div > div.col-12.col-lg-9 > div > div > form > textarea"); var featuredImageInput = document.querySelector('input[name="featured_image"]'); textarea.addEventListener('change', function(event) { // 檢查是否存在imgBox元素 let imgBoxCheck = document.querySelector('.imgBox'); if (imgBoxCheck) { // 如果存在，則刪除imgBox元素 imgBoxCheck.parentNode.removeChild(imgBoxCheck); } // 獲取文本框的內容 var ContentText = textarea.value; // 創建一個空數組來存儲圖片鏈接 var imgArray = []; // 使用正則表達式查找圖片鏈接 var urlRegex = /https?:\/\/[^\s/$.?#].[^\s]*/gi; // 匹配以http或https開頭的鏈接 var matches = ContentText.match(urlRegex); if (matches) { // 疊代所有匹配項並篩選出以.png或.jpg結尾的鏈接 for (var i = 0; i < matches.length; i++) { if (matches[i].match(/\.(png|jpg)$/i)) { imgArray.push(matches[i]); } } } // 使用正則表達式匹配鏈接部分 var regex = /!\[\]\(([^)]+)\)/g; var match; while ((match = regex.exec(ContentText)) !== null) { imgArray.push(match[1]); } // 創建一個包含圖片的容器div（imgBox）並設置為display: flex let imgBox = document.createElement('div'); imgBox.className = 'imgBox'; // 添加類名 imgBox.style.display = 'flex'; // 平均分配圖片大小 var imageSize = 100 / imgArray.length; // 假設100%寬度，根據圖片數量計算每張圖片的寬度 // 將圖片鏈接轉換為img元素並插入到imgBox imgArray.forEach(function (imgUrl) { var imgDiv = document.createElement('div'); var img = document.createElement('img'); img.src = imgUrl; img.className = 'imgCover'; img.addEventListener('click', function () { // 設置name="featured_image"的輸入框的值為被點擊圖片的src屬性 featuredImageInput.value = img.src; }); // 設置img的寬度為100% img.style.width = '100%'; img.style.height = '100%'; imgDiv.appendChild(img); imgBox.appendChild(imgDiv); }); // 將imgBox插入到textarea後面 h5.insertAdjacentElement('afterend', imgBox); textarea.style.overflow = 'auto'; imgBox.style.border="5px solid gray" imgBox.style.marginTop="5px" }); // 創建一個包含CSS規則的<style>元素 var style = document.createElement('style'); style.type = 'text/css'; style.textContent = '.imgBox:hover .imgCover:not(:hover) { filter: grayscale(100%); opacity: 0.75; }'; // 將<style>元素添加到<head>中 document.head.appendChild(style); h5= document.createElement('h5') h5.innerText='請選擇你的文章縮圖：' h5.style.marginTop="50px" h5.style.fontSize="16px" textarea.insertAdjacentElement('afterend', h5); ``` ## 觀念筆記 這次的腳本內容其實沒有太多新的知識點，算是一個很好的複習。 querySelector addEventListener insertAdjacentElement forEach 以及正則表達式的使用。 ## 心得後記 網頁上的功能，其實就是這些基礎的運用配合起來！(°ཀ°) 所以不用擔心前端沒有東西練習，其實點子四處都有，練習也都很實用。 而不是每次都在重複輪迴相同的東西、感到疲倦！ 這次的前端小試身手就帶來一個回鍋菜，下次敬請期待更有趣的變化。 喜歡記得追蹤或留言唷。 還沒挑戰過此系列其他內容的，可以試著去挑戰看看◑ω◐
最近跟一些年輕的工程師合作，發現系統上線之後 bug 有點多 這當然很正常，不過，如果適度的留意自己的當下的「寫作風格」 其實可以減少很多 bug，或者是可以減少 debug 的時間 這些年工作下來，我發現在開發不同元件的時候，我基本上會在兩種風格中選擇，簡單跟大家分享 # 嚴格風 在寫一些基礎重要元件、或者呼叫第三方 API 時，我認為把「可能的狀態」通通清楚列出來比較好 也就是像這樣 ``` function doTask($arg1) { if ($arg1 === 'val1') { // ... } else if ($arg1 === 'val2') { // ... } else if ($arg1 === 'val3') { // ... } else { throw new Exception("Impossible state."); } } ``` 只要出現預期之外的值，就直接丟出例外，這樣可以大幅改善 developer experience 也就是在當下就提醒同事：「我這元件當初設計不是這樣用的，請檢查」 很多人不會把「可能的狀態」寫完，而是放在 else 底下，比如說 ``` function doTask($arg1) { if ($arg1 === 'val1') { // ... } else if ($arg1 === 'val2') { // ... } else { // handle `val3` here } } ``` 雖然程式課本都是這樣教的，但實務上這會導致很多可能的 bug 比方說有同事在使用這元件時，參數傳入 `val4` 結果程式繼續運行 這會導致一些錯誤的理解、讓錯誤的假設在團隊中持續蔓延 所以，在重要的元件，比如金流相關時，採用這種「嚴格風」去寫會比較好 也就是強迫大家搞清楚這個元件的用法，不准許憑感覺隨意呼叫 # 隨興風 在一些寬鬆的元件，通常是 search 相關的元件、抓資料相關的元件時，可以預期，呼叫方會隨意嘗試各種參數 甚至會有一些參數傳都不傳，覺得元件要有預設才合理 這種元件，就寫得盡量寬鬆、盡量多給預設值，會比較好 也就是呼叫方，參數要傳不傳，都可以，傳錯的時候，就當作是跟沒傳一樣，就用預設值就好 這種元件就是用起來很寬鬆，主要目的是希望不要因為這些小事，讓程式爛掉、故障在那邊 寫起來就是多檢查變數有沒有存在，沒有就給預設值 然後 if else 的時候也比較隨興，基本上不會丟例外，不管怎麼傳都盡量讓你跑 --- 不同的元件，適合採用不同的風格來寫 雖然這是一個主觀的問題，但適當的分辨當下應該採用哪種風格 會讓你的同事非常喜歡跟你工作，覺得你寫的元件「總是很好用」、「用錯的時候都會提醒」、「在不需要拘泥小節的時候，也不會囉唆」 話雖如此，要能知道當下適用的風格，其實需要許多年的經驗累積。 嚴格風、隨興風，只是一個概念，實際上的 coding style 有很多寫法，大家可以慢慢實驗＆嘗試 簡單給個方向，跟大家簡單分享
本文轉自:https://ithelp.ithome.com.tw/articles/10338948 ## 前情提要 資訊大爆炸。 有時候我們瀏覽技術文章，不一定真的是想學深奧的高級技術。 然而劣質低端的文章充斥著，則會降低我們學習的效率、甚至變成噪音與雜訊，干擾我們的思緒。 因此針對某些洗文或是質量很低的作者，我們必須列為思想犯， 否則會降低閱讀質量，平白浪費自己的時間、平台的版面、上網的電力、看到垃圾資訊的副作用等等.... ## 構思來源 如果有個思想審查警衛可以：**去除那些垃圾低端，稱不上技術文章的雜訊。** 以確保未來瀏覽文章的時候，不會再被洗文打擾， 也可以針對不喜歡的主題去封鎖，讓時間與精神更能專注於自己想要學的資訊。 阻止一些垃圾就是喜歡把自己尚未整理的白痴內容一直丟上來， 什麼都還不懂，把技術文章當成個人日記簿，寫一堆自我囈語、無病呻吟， 每天大量狂發文章，昭告天下以為這就是努力，欺騙自己也浪費別人的人生。 ## 「思想審查警衛」出動！ ## 功能 1. 把頭像屏蔽 2. 加上思想通緝犯、紅字與刪除線 3. 新增封殺按鈕 4. 版面通知封殺名單與文章數 5. 透過ajax確認某id的最新ID ## 效果截圖  此截圖僅是腳本示範，跟其使用者無關， 本人沒有任何覺得此使用者發的文章是差勁的意味，我認為非常上進、值得學習。  此圖也只是隨機挑user使用，純粹作為範例用途，不代表我個人意見。 ## 腳本下載 https://greasyfork.org/zh-TW/scripts/477283-%E6%80%9D%E6%83%B3%E7%8A%AF%E5%B0%81%E6%AE%BA ## 原理說明 鄭重聲明，這個示範真的毫無任何私人意味，此腳本也只是針對不同的主題去隱藏， 例如我想學python就不想看到JS的文章，因此使用此工具幫忙隱藏罷了。 取名做思想警察、比喻成清除垃圾等都只是文學上的趣味。 請勿當真Ꮚ･ꈊ･Ꮚ 這次的技術可說比較難，認真難很多！但是趣味性以及功能性是無比的超越！ 可以說幾乎是我寫系列文以來，最頂、最派的一篇！ 不過很多觀念已經出現過，在【前端小試身手】系列裡面，每次的腳本都是主打實用， 因此cookie或localstorage這種技術當然都會運用到。 ## JS原始碼 ``` // ==UserScript== // @license MIT // @name 👮思想犯封殺 // @namespace http://tampermonkey.net/ // @version 0.1 // @description 把廢文製造機轟出去 // @author You // @match https://ithelp.ithome.com.tw/articles* // @match https://ithelp.ithome.com.tw/users/* // @icon https://www.google.com/s2/favicons?sz=64&domain=ithome.com.tw // @grant none // @run-at document-end // ==/UserScript== let URL = window.location.href; let ArticleSite = "https://ithelp.ithome.com.tw/articles?tab=tech" let UserSite = "https://ithelp.ithome.com.tw/users/" // 判斷URL的開頭部分 if (URL.startsWith(ArticleSite)) { //文章頁執行清理垃圾程序 CleanGarbage(); } else if (URL.startsWith(UserSite)) { UserCheck(); } else { console.log("這邊不執行腳本"); } // 餅乾儲存的機制函數------------------------------------------------- function setListInCookie(list) { document.cookie = 'myList=' + JSON.stringify(list) + '; expires=Wed, 31 Dec 2099 23:59:59 GMT;'; } // 從 Cookie 中獲取 list function getListFromCookie() { var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myList\s*\=\s*([^;]*).*$)|^.*$/, "$1"); return JSON.parse(cookieValue) || []; } function CleanGarbage(){ // 從本地存儲中獲取數據 var myListData = localStorage.getItem("myList"); // 解析數據到變量 list var list = myListData ? JSON.parse(myListData) : []; //list = getListFromCookie()||[]; // 儲存要刪除的字符串名單 // 找到所有CLASS是"qa-list__info-link"的<a>元素 var linkElements = document.querySelectorAll('.qa-list__info-link'); var removedCount = 0; // 初始化已清除的垃圾數量 for (var j = 0; j < list.length; j++) { // 遍歷這些<a>元素，確保文本內容包含"伍貳捌"，然後刪除其父元素 for (var i = 0; i < linkElements.length; i++) { if (linkElements[i].textContent.includes(list[j])) { // 開始向上查找父元素 var parentElement = linkElements[i].parentElement; while (parentElement) { // 如果找到具有"classname"為"qa-list"的<div>元素，則刪除它 if (parentElement.classList.contains('qa-list')) { parentElement.remove(); removedCount++; // 增加清除的數量 console.warn('抓到"'+list[j]+'"這位思想犯'); break; // 找到並刪除後，結束循環 } parentElement = parentElement.parentElement; } } } if (removedCount>0){ // 顯示已清除的垃圾數量 console.log('已清除他的 ' + removedCount + ' 篇垃圾');} removedCount=0; } } //------------------------------------------------------- // 為了防止五百八改名，我們針對他的ID去ajax得到他最新的名稱 function FindBitch() { // 使用 Fetch API 獲取指定 URL 的內容 return fetch("https://ithelp.ithome.com.tw/users/20163468") .then(response => response.text()) .then(data => { // 創建一個臨時 div 元素以容納頁面內容 var tempDiv = document.createElement("div"); tempDiv.innerHTML = data; // 查找 class 為 "profile-header__name" 的元素 var profileNameElement = tempDiv.querySelector(".profile-header__name"); if (profileNameElement) { // 刪除元素內的所有 <span> 元素 var spanElements = profileNameElement.querySelectorAll("span"); spanElements.forEach(function(span) { span.remove(); }); // 讀取元素的文本內容，去掉前導和尾隨空格 var text = profileNameElement.textContent.trim(); // 返回處理後的文本內容 return text; } else { return "未找到元素"; } }) .catch(error => { console.error("發生錯誤: " + error); return "發生錯誤"; }); } //------------------------------------------------------- function UserCheck(){ //轉換資料從餅乾到localstorage var currentCookieValue = getCookie("myList"); // 2. 存儲數據到本地存儲 if (currentCookieValue) { var list = JSON.parse(currentCookieValue); // 存儲到本地存儲 localStorage.setItem("myList", JSON.stringify(list)); }else{ FindBitch() .then(text => { let FirstKill = [text]; setListInCookie(FirstKill); }) .catch(error => { console.error("找不到五百八:", error); }); } // 刪除不需要的ID document.querySelector('.profile-header__account').remove(); //封殺按鈕------------------------------------------------- // 找到具有class為"profile-header__right"的元素 var profileRightElement = document.querySelector('.profile-header__right'); var pullRightElement = profileRightElement.querySelector('.pull-right'); // 創建一個新按鈕元素 var BlockBtn = document.createElement('button'); BlockBtn.textContent = '封殺'; // 添加樣式和類名到按鈕 BlockBtn.style.marginTop = '10px'; BlockBtn.style.width = '100%'; BlockBtn.className = 'btn btn-trace trace_btn_border BlockBtn'; // 將按鈕元素添加到"pull-right"元素內部 pullRightElement.appendChild(BlockBtn); // 通緝犯名單的cookie------------------------------------------------ // 從 Cookie 中加載 list（例如，頁面加載時） list = getListFromCookie()||[]; let UserBlock = document.querySelector('.profile-header__name'); let text = UserBlock.textContent.trim(); // 如果使用者已經在封殺名單內的判斷，已存在或不存在 if (list.includes(text)) { BlockStart(BlockBtn); } else { // 針對封殺按鈕進行監聽事件 BlockBtn.addEventListener('click', function() { list.push(text); setListInCookie(list); //先加入到名單內，然後再執行封殺事件 BlockStart(); // 輸出到控制台 console.log('黑名單新增:' + text); //本地儲存機制----------------------------- let currentCookieValue = getCookie("myList"); let list2 = JSON.parse(currentCookieValue); // 存儲到本地存儲 localStorage.setItem("myList", JSON.stringify(list2)); }); } } // ------------------------------------------------ //封殺事件的函數 function BlockStart(){ let BlockBtn = document.querySelector('.BlockBtn'); BlockBtn.textContent = '已封殺'; BlockBtn.disabled = true; BadText(); BadImg(); } //封殺事件函數裡面的細項函數 function BadText(){ // 標記這傢夥是垃圾------------------------------------------------- let UserBlock = document.querySelector('.profile-header__name'); let newHeading = document.createElement('h1'); newHeading.textContent = '思想通緝犯'; // 把思想通緝犯這幾個大字加上去 UserBlock.parentElement.insertBefore(newHeading, UserBlock); UserBlock.style.textDecoration = "line-through"; UserBlock.style.color = "red"; } function BadImg(){ //圖片進行網點作業XD------------------------------------------------- var originalImage = document.querySelector('.profile-header__avatar'); // 創建一個包含交叉紅線的覆蓋層 <div> 元素 var overlayDiv = document.createElement('div'); overlayDiv.style.position = 'absolute'; overlayDiv.style.width = '150px'; overlayDiv.style.height = '150px'; overlayDiv.style.background = 'linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(-45deg, black 50%, transparent 50%)'; overlayDiv.style.backgroundSize = '5px 5px, 5px 5px'; overlayDiv.style.backgroundPosition = '0 0, 0 2px'; // 將覆蓋層疊加到圖片上 originalImage.parentNode.appendChild(overlayDiv); // 設置覆蓋層的位置，以與原始圖像對齊 overlayDiv.style.top = originalImage.offsetTop + 'px'; overlayDiv.style.left = originalImage.offsetLeft + 'px'; // 設置覆蓋層的z-index，以確保它在圖片上方 overlayDiv.style.zIndex = '2'; } ``` ## 觀念筆記 這個腳本開發足足花了我一整個晚上，將近八小時之久。 有趣的是，其中為了進行測試才選某些user當作隱藏對象，否則腳本執行上會出錯。 細心的人若觀察原始碼，也會發現裡面有個firstKill， 那是必須要的段落，先設置好cookie的首要內容物，才有辦法繼續操作下去( ิ◕㉨◕ ิ) 也就是初始化的概念XD 另一個有趣的點是，為了防止使用者改名導致腳本出錯，我甚至不惜再寫一段ajax， 去更新一下ID，這樣不管人家怎麼改，都逃不了， 要改成「別抓我」也沒用，這個腳本都還是可以run。 ## 心得後記 我只能說這篇是自從「備份IT幫發文、一眼全覽」最強的JS教學文章！ 超派，真的不騙( ﾒ∀・) 有些人喜歡看前端小試身手，有些人喜歡前端動手玩創意； 其實這兩個系列的本質都是JS的教學，是可以互相連接的，但也有很多不同的重心。 這個系列就是以腳本為主，重點在於創意與發想，打到使用者痛點。 【前端動手玩創意】則是以建構網站為起點， 任何元素與概念都會變成網頁上的一部分，算是比較基礎工的建立。 如果對JS的強大感興趣，那麼可以把這兩個系列交互看，反覆的閱讀、實際動手操作， 這樣一來的學習非常踏實，甚至比YT學習都來的高效率、實際。 尤其此系列都是原創發想的腳本，當然超強！ 喜歡記得關注，未來還有更多超酷的前端內容可以玩，下課⧸⎩⎠⎞͏(・∀・)⎛͏⎝⎭⧹
本文轉載自:https://ithelp.ithome.com.tw/articles/10338469 ## 前情提要 有時候，夜深人靜，總是會想要沉思人生的意義。 於是打開某個網站， 開始看一些只有長大了才能看的大人動作愛情學，必須好好鑽研， 此刻電影裡的聲響徹雲霄，你感覺無比尷尬..... 這時候就需要靜音神隊友。 可以自己加入網頁名單，讓小電影們先保持靜音，自己再手動開啟。 如此一來非常保險，絕對不讓你不小心爆音。 非常的有禮貌，人生的哲理更奧妙了。 ## 腳本下載  https://greasyfork.org/zh-TW/scripts/477196-%E9%9D%9C%E9%9F%B3%E5%B0%8F%E5%8A%A9%E6%89%8B ## JS程式碼 ``` // ==UserScript== // @name 靜音小助手 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://*/* // @icon https://www.google.com/s2/favicons?sz=64&domain=xvideos.com // @grant none // ==/UserScript== // 定義 JSON 資料，包含網址開頭 var jsonUrls = [ "https://www.xvideos.com/", "https://example.com/json2", // 添加更多的網址開頭 ]; // 取得當前網址 var currentUrl = window.location.href; // 檢查當前網址是否以 JSON 中的某些開頭開始 var isJsonUrl = jsonUrls.some(function(jsonUrl) { return currentUrl.startsWith(jsonUrl); }); // 如果當前網址符合 JSON 的某些開頭，執行程式碼 if (isJsonUrl) { // 在這裡放置你想要執行的程式碼 console.log("當前網址符合 JSON 開頭"); Mute(); } else { console.log("當前網址不符合 JSON 開頭"); } function Mute(){ // 取得網頁上所有的 <video> 元素 var videoElements = document.getElementsByTagName('video'); // 迭代所有的 <video> 元素並將其靜音 for (var i = 0; i < videoElements.length; i++) { videoElements[i].muted = true; } } ``` ## 觀念筆記 只能說，前端的東西往往越簡單，越強。 這次只是使用三個小觀念，都是超級基本的小小觀念，幼稚園等級。 ### 第一部分：使用陣列儲存網址 ``` // 定義 JSON 資料，包含網址開頭 var jsonUrls = [ "https://www.xvideos.com/", "https://example.com/json2", // 添加更多的網址開頭 ]; ``` 這部分就是把我們的資料儲存起來，可以自己新增訂義哪些網址要被匹配。 ### 第二部分：location的API 使用網址要確認網址，就是用location，這已經屢見不鮮。 另外字串的搜查，startsWith非常老舊卻也很無敵。 ### 第三部分：影片靜音API 很簡單，針對video元素muted就可以了，非常輕鬆！ 簡直就像早餐吃鬆餅一樣，鬆。 ## 心得 很多人常常說前端，好難，JS好基八 我是覺得，關你屁事？/ᐠ｡ꞈ｡ᐟ\ 你會罵蛋餅為什麼要這麼蛋餅嗎，蛋餅之所以好吃就是因為它是蛋餅，不好吃也因為它是蛋餅。 JS的奇怪或是難懂，只是它的本質，在那邊靠北靠母的風氣真的很無聊。 要玩梗也可以多一點新的梗，而不是表面嘴皮耍耍。 它很機八，但也很強，這就是JS的厲害之處。 因此這個簡單實用的小腳本，又再次被我們秒殺了！ 喜歡可以關注，未來還會有更多JS的小試身手、前端動手玩創意也還有一堆素材呢⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾
為了提升系統穩定性，最近替某電商客戶的專案寫單元測試 有一部份核心功能會用到第三方 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 ）來獲得更完整的知識。在那裡您將獲得更多示例和更多關於此內容的解釋。 希望這篇文章有幫助！ 🦀🦀
## 課程目標 - 認識 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 的感覺！ 做出以上功能，你就完成這次的課程目標了！
想玩一下 stable diffusion 在 macbook 嘗試了一下 不太好安裝 拿出家中的老舊筆電 2018 年買的 asus zenbook 上面有雙系統 ubuntu 18.04 不過顯卡一直沒有順利啟用 不管了先用 cpu 硬跑 https://github.com/AUTOMATIC1111/stable-diffusion-webui 按照 repo 指令照做 然後我有參考這篇文章 亂跑一些 pip 安裝指令之類的 反正亂裝一通 https://zhuanlan.zhihu.com/p/628058158 在執行這個時 會遇到很多錯誤訊息 ``` ./webui.sh ``` 在 terminal 先設定一些環境變數 好像是關閉搜尋顯卡吧 ``` export COMMANDLINE_ARGS="--skip-torch-cuda-test --precision full --no-half" ``` 就可以了 實際跑起來，產生一張圖，大概要 5 分鐘左右
## 前情提要 還在問說要不要學JQUERY？別問了，學就對了，沒人說學了一定要用好嗎。 以下讓我們先看一段純純的JS，就跟國中生的戀愛一樣， 牽牽小手，超純。 ## JS純 ``` // 純 JavaScript 選取元素清單 let list = document.querySelectorAll(".navigation li"); function activeLink(event) { // 使用 forEach 迴圈移除所有元素的 "hovered" 類別 list.forEach((item) => { item.classList.remove("hovered"); }); // 在滑鼠移過的元素上新增 "hovered" 類別 event.target.classList.add("hovered"); } // 使用 forEach 迴圈為每個元素加上滑鼠移過事件的監聽器 list.forEach((item) => { item.addEventListener("mouseover", activeLink); }); ``` ## 轉大人 接下來我們要轉大人了。 ### 選擇器 關於querySelectorAll這種querySelector很簡單，JQ都是用$這個字符來選取。 ## 修改class item.classList.remove("hovered"); event.target.classList.add("hovered"); 這兩個的話JQ有寫出兩隻API： removeClass addClass 所以很方便很好用 ## 事件監聽 addEventListener的話JQ則是用on來表達，這個看過幾次就能夠理解了唷！ ## JQ的寫法寫出來 ``` // 使用 jQuery 選取元素清單 let list = $(".navigation li"); function activeLink() { // 移除所有元素的 "hovered" 類別 list.removeClass("hovered"); // 在滑鼠移過的元素上新增 "hovered" 類別 $(this).addClass("hovered"); } // 使用 jQuery 的 each 方法為每個元素加上滑鼠移過事件的監聽器 list.each(function () { $(this).on("mouseover", activeLink); }); ``` ## 心得 JQ到底有沒有被拋棄或是需不需要學習，其實都是假議題，一堆人嘴上用JQ，然後嘴砲JQ 我們身為學習者其實就是花個一小時 就能學起來的東西，沒必要故意閉著眼睛不去了解。 以上，一篇文章馬上帶你學會JQuery！ 比較想要玩切版可以看這個: https://ithelp.ithome.com.tw/articles/10312922 [【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯](https://ithelp.ithome.com.tw/articles/10312922)
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (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
然後作為一個計時器可是總是顯示undefined 小米手環文件 https://cdn.discordapp.com/attachments/1132882463522312204/1132987644255670322/helloworld_pro.bin ``` var time_val; var go_timer; var stop_time = 0; function add_zero(num, digit) { let numString = String(num) while (numString.length < digit) { numString = "0" + numString } return numString } function timers() { if (true) { let temp_timer = new Date().getTime() - go_timer; let day = add_zero(Math.floor(temp_timer / (24 * 60 * 60 * 1000)), 2); let hours = add_zero(Math.floor((temp_timer % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)), 2); let minutes = add_zero(Math.floor((temp_timer % (60 * 60 * 1000)) / (60 * 1000)), 2); let seconds = add_zero(Math.floor((temp_timer % (60 * 1000)) / 1000), 2); let milliseconds = add_zero(temp_timer % 1000, 3); return [day, hours, minutes, seconds, milliseconds]; } } go_timer = new Date().getTime(); time_val = setInterval(() => { var time = timers(); console.log(time[0] + "天\n" + time[1] + "時\n" + time[2] + "分\n" + time[3] + "秒\n" + time[4] + "毫秒"); }, 1); /* undefined天 undefined時 undefined分 undefined秒 undefined毫秒 */
資深開發者 Jatin Sharma 在國外論壇分享了個人使用的 VSCode 設定，內容豐富，跟大家分享！ 原文出處：https://dev.to/j471n/my-vs-code-setup-971 ## 🎨主題 我使用 [**Andromeda**](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda) 作為我的 VS Code 的主要主題  ## 🪟圖標 對於圖標，我會在 [**材質圖標主題**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 和 [**材質主題圖標**]( https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons) **找找看。** ### 材質圖標主題  ### 材質主題圖標  ## ⚒️外掛 最讚的部分來了，有很多擴展我只提到了我最喜歡的或我每天主要使用的擴展。 ### 自動重命名標籤 自動重命名配對的 HTML/XML 標記，與 Visual Studio IDE 的操作相同。 **下載：** [**自動重命名標籤**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)  ### 括號對著色切換器 VS Code 擴展，為您提供一個簡單的命令來快速切換全局“括號對著色” **下載：** [**括號對著色切換器**](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)  ### C/C++ C/C++ 擴展向 Visual Studio Code 加入了對 C/C++ 的語言支持，包括編輯 (IntelliSense) 和除錯功能。 **下載：** [**C/C++**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools)  ### 程式碼執行器 執行多種語言的程式碼片段或程式碼文件 **下載：** [**程式碼執行器**](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)  ### 程式碼拼寫檢查器 一個基本的拼寫檢查器，可以很好地處理程式碼和文件。 該拼寫檢查器的目標是幫助發現常見的拼寫錯誤，同時保持較低的誤報數量。 **下載：** [**程式碼拼寫檢查器**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  ### DotENV VSCode `.env` 語法高亮。 **下載：** [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)  ### 錯誤鏡頭 ErrorLens 通過使診斷更加突出來增強語言診斷功能，突出顯示語言生成的診斷的整行，並內聯打印訊息。 **下載：** [**錯誤鏡頭**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)  ### ES7+ React/Redux/React-Native 片段 ES7+ 中的 JavaScript 和 React/Redux 片段以及 [VS Code](https://code.visualstudio.com/) 的 Babel 插件功能 **下載：** [**ES7+ React/Redux/React-Native 片段**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)  ### ESLint 該擴展使用安裝在打開的工作區文件夾中的 ESLint 庫。如果該文件夾未提供，則擴展程序將查找全局安裝版本。如果您尚未在本地或全局安裝 ESLint，請在工作區文件夾中執行“npm install eslint”進行本地安裝，或執行“npm install -g eslint”進行全局安裝。 **下載：** [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)  ### Git 圖 查看存儲庫的 Git 圖表，並從圖表中輕鬆執行 Git 操作。可配置為您想要的外觀！ **下載：** [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)  ### GitLens GitLens **增強了 VS Code 中的 Git，並解鎖每個存儲庫中**未開發的知識**。它可以幫助您通過 Git Blame 註釋和 CodeLens 一目了然地**可視化程式碼作者**，**無縫導航和探索** Git 存儲庫，**通過豐富的可視化和強大的比較命令**獲得有價值的見解**，等等更多的。 **下載：** [**GitLens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)  ### HTML 樣板 此擴展提供了所有 Web 應用程式中使用的標準 HTML 樣板程式碼。 **下載：** [**HTML 樣板**](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate)  ### Import Cost 此擴展將在編輯器中內聯顯示導入包的大小。該擴展利用 webpack 來檢測導入的大小。 **下載：** [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)  ### Live Server 它將啟用實時更改而不保存文件。 **下載：** [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  ### Markdown 多合一 Markdown 所需的一切（鍵盤快捷鍵、目錄、自動預覽等）。 ***注意***：VS Code 具有開箱即用的基本 Markdown 支持（例如，**Markdown 預覽**），請參閱官方文件了解更多訊息。 **下載：** [**Markdown All in One**](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)  ### Markdown 預覽增強 它顯示了 Markdown 內容的增強預覽。 **下載：** [**Markdown 預覽增強版**](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)  ### 將 JSON 粘貼為程式碼 複製 JSON，粘貼為 Go、TypeScript、C#、C++ 等。 **下載 -** [**將 JSON 粘貼為程式碼**](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)  ### 更漂亮 使用 Prettier 的程式碼格式化程序 **下載 -** [**Prettier**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  ### Python IntelliSense (Pylance)、Linting、除錯（多線程、遠程）、Jupyter Notebooks、程式碼格式化、重構、單元測試等。 **下載 -** [**Python**](https://marketplace.visualstudio.com/items?itemName=ms-python.python)  ### 設置同步 使用 GitHub Gist 跨多台計算機同步設置、程式碼片段、主題、文件圖標、啟動、按鍵綁定、工作區和擴展。 **下載 -** [**設置同步**](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)  ### Tailwind CSS IntelliSense 適用於 VS Code 的智能 Tailwind CSS 工具 **下載 -** [**Tailwind CSS IntelliSense**](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)  ### 所有亮點 突出顯示程式碼中的“TODO”、“FIXME”和其他註釋。 有時，在將程式碼發佈到生產環境之前，您會忘記檢查編碼時加入的 TODO。所以我長期以來一直想要一個擴展來突出顯示它們並提醒我還有註釋或尚未完成的事情。 希望這個擴展也能幫助您。 **下載 -** [**TODO 突出顯示**](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)  ### Turbo 控制台日誌 自動編寫有意義的日誌訊息的過程。 **下載 -** [**Turbo 控制台日誌**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)  ### 塔布寧人工智能 Tabnine 是一款 AI 程式碼助手，可讓您成為更好的開發人員。 Tabnine 將通過所有最流行的編碼語言和 IDE 中的實時程式碼完成來提高您的開發速度。 **下載 -** [**Tabnine AI**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)  ## ⚙️設置 以下“JSON”程式碼顯示了我的 VS Code 設置： ``` // user/settings.json { "files.autoSave": "afterDelay", "editor.mouseWheelZoom": true, "code-runner.clearPreviousOutput": true, "code-runner.ignoreSelection": true, "code-runner.runInTerminal": true, "code-runner.saveAllFilesBeforeRun": true, "code-runner.saveFileBeforeRun": true, "editor.wordWrap": "on", "C_Cpp.updateChannel": "Insiders", "editor.suggestSelection": "first", "python.jediEnabled": false, "editor.fontSize": 17, "emmet.includeLanguages": { "javascript": "javascriptreact" }, "editor.minimap.size": "fit", "editor.fontFamily": "Consolas, DejaVu Sans Mono, monospace", "editor.fontLigatures": false, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "python.formatting.provider": "yapf", "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "git.autofetch": true, "git.enableSmartCommit": true, "html-css-class-completion.enableEmmetSupport": true, "editor.formatOnPaste": true, "liveServer.settings.donotShowInfoMsg": true, "[python]": { "editor.defaultFormatter": "ms-python.python" }, "diffEditor.ignoreTrimWhitespace": false, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[c]": { "editor.defaultFormatter": "ms-vscode.cpptools" }, "editor.fontWeight": "300", "editor.fastScrollSensitivity": 6, "explorer.confirmDragAndDrop": false, "vsicons.dontShowNewVersionMessage": true, "workbench.iconTheme": "material-icon-theme", "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.renderWhitespace": "none", "workbench.startupEditor": "newUntitledFile", "liveServer.settings.multiRootWorkspaceName": "", "liveServer.settings.port": 5000, "liveServer.settings.donotVerifyTags": true, "editor.formatOnSave": true, "html.format.indentInnerHtml": true, "editor.formatOnType": true, "printcode.tabSize": 4, "terminal.integrated.confirmOnExit": "hasChildProcesses", "terminal.integrated.cursorBlinking": true, "terminal.integrated.rightClickBehavior": "default", "tailwindCSS.emmetCompletions": true, "sync.gist": "527c3e29660c53c3f17c32260188d66d", "gitlens.hovers.currentLine.over": "line", "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": [], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" }, "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "args": [] }, "Windows PowerShell": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe" }, "Ubuntu (WSL)": { "path": "C:\\WINDOWS\\System32\\wsl.exe", "args": [ "-d", "Ubuntu" ] } }, "javascript.updateImportsOnFileMove.enabled": "always", "[dotenv]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "editor.tabSize": 2, "cSpell.customDictionaries": { "custom-dictionary-user": { "name": "custom-dictionary-user", "path": "~/.cspell/custom-dictionary-user.txt", "addWords": true, "scope": "user" } }, "window.restoreFullscreen": true, "tabnine.experimentalAutoImports": true, "files.defaultLanguage": "${activeEditorLanguage}", "bracket-pair-colorizer-2.depreciation-notice": false, "workbench.editor.wrapTabs": true, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "terminal.integrated.fontFamily": "courier new", "terminal.integrated.defaultProfile.windows": "pwsh.exe -nologo", "terminal.integrated.shellIntegration.enabled": true, "terminal.integrated.shellIntegration.showWelcome": false, "editor.accessibilitySupport": "off", "editor.bracketPairColorization.enabled": true, "todohighlight.isEnable": true, "terminal.integrated.shellIntegration.history": 1000, "turboConsoleLog.insertEnclosingClass": false, "turboConsoleLog.insertEnclosingFunction": false, "files.autoSaveDelay": 500, "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.host": "localhost", "liveServer.settings.fullReload": true, "workbench.editor.enablePreview": false, "workbench.colorTheme": "Andromeda Bordered" } ``` ## 總結 以上簡單分享，希望對您有幫助！
## 課程目標 - 使用 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 ``` 依此類推，之後就這樣交作業！
因為一直找不到工作(...汗)所以來整理作品 [成果展示](https://superyngo.github.io/to_do_list/) 基本上是參考[Let's Write](https://www.letswrite.tw/)做的[Demo](https://letswritetw.github.io/letswrite-food-check/) 在頁面下方有作品導覽以及Github連結 使用工具： 1.Github Page 2.[Google Tag Manager](https://tagmanager.google.com/#/home) 步驟： 1.申請GTM並取得GTM代碼 2.將GTM代碼插入所有專案的index.html中，並將所有專案上傳github，開啟page頁面 3.另外做一個myNavbat的github page，將所有專案連結放進去，可參考[我做的](https://github.com/superyngo/myNavbar) 4.用GTM的「自訂HTML」功能將myNavbar和github連結塞進所有專案中，參考代碼如下： ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="myNav"></div> <div class="github"> <a class="githubHerf"> <i class="fa fa-github" aria-hidden="true"></i> </a> </div> <script> var githubHerf=document.querySelector(".githubHerf") githubHerf.setAttribute("href","https://github.com/superyngo"+{{Page Path}}) var myNav2 = document.querySelector(".myNav"); var iframe2 = document.createElement("iframe"); iframe2.setAttribute("src", "https://superyngo.github.io/myNavbar/"); iframe2.setAttribute("width", "100%"); iframe2.setAttribute("frameborder", "0"); myNav2.appendChild(iframe2) </script> <style> body{ background-color: #fff0df; } .github { position: fixed; left: 0; bottom: 0; display: flex; width: 100px; height: 100px; cursor: pointer; z-index: 2; :hover { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; scale: 0.9; } } .github::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 100px 0 0 100px; border-color: transparent transparent transparent #6e5494; } .github .fa { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; } @media screen and (max-width: 600px) { :root { font-size: 12px; } .github { width: 70px; height: 70px; } .github::before { border-width: 70px 0 0 70px; } .github .fa { left: 8px; bottom: 4px; font-size: 2rem; } } </style> ``` 注意事項； 1.不知為何我GTM塞iframe一直不給過，所以用append的。 2.iframe內的超連結預設會在iframe內開啟，要避免只要在myNavbar的head裡加上<base target="_parent" />就可以了。 3當初做這些作業時完全沒考慮theme和RWD，花了一些時間但又不想花太多時間結果就勉勉強強用手機也都能開。 閒聊： 前陣子都在codeSignal上刷題，看別人解法真的很神，學很多... 有沒有北部公司缺人啊...投履歷都沒人回..中年轉行真的不行嗎...
本文將分為三個部分： 1. 通用設計模式 2. 我的建議 3. 進一步閱讀 享受並且讓我知道您在專案中使用的模式和實踐🚀 原文出處：https://dev.to/jacobandrewsky/good-practices-and-design-patterns-for-vue-composables-24lk ## 通用設計模式 我認為了解建置可組合項模式的最佳來源實際上是 Vue.js 文件，您可以在[此處](https://vuejs.org/guide/reusability/composables.html)查看 ### 基本可組合項 Vue 文件顯示了以下 useMouse 可組合項的示例： ``` // mouse.js import { ref, onMounted, onUnmounted } from 'vue' // by convention, composable function names start with "use" export function useMouse() { // state encapsulated and managed by the composable const x = ref(0) const y = ref(0) // a composable can update its managed state over time. function update(event) { x.value = event.pageX y.value = event.pageY } // a composable can also hook into its owner component's // lifecycle to setup and teardown side effects. onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) // expose managed state as return value return { x, y } } ``` 稍後可以在元件中使用它，如下所示： ``` <script setup> import { useMouse } from './mouse.js' const { x, y } = useMouse() </script> <template>Mouse position is at: {{ x }}, {{ y }}</template> ``` ### 異步可組合項 為了獲取資料，Vue 建議使用以下可組合結構： ``` import { ref, watchEffect, toValue } from 'vue' export function useFetch(url) { const data = ref(null) const error = ref(null) watchEffect(() => { // reset state before fetching.. data.value = null error.value = null // toValue() unwraps potential refs or getters fetch(toValue(url)) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)) }) return { data, error } } ``` 然後可以在元件中使用它，如下所示： ``` <script setup> import { useFetch } from './fetch.js' const { data, error } = useFetch('...') </script> ``` ### 可組合合約 根據上面的示例，以下是所有可組合項都應遵循的約定： 1. 可組合文件名應以 use 開頭，例如 `useSomeAmazingFeature.ts` 2. 它可以接受輸入參數，這些參數可以是字串等基本類型，也可以接受 refs 和 getter，但需要使用 toValue 幫助器 3. Composable 應該返回一個 ref 值，該值可以在解構可組合項後存取，例如 `const { x, y } = useMouse()` 4. 可組合項可以保存可以在整個應用程式中存取和修改的全局狀態。 5. 可組合性可能會產生副作用，例如加入窗口事件偵聽器，但在卸載元件時應清除它們。 6. 可組合項只能在 `<script setup>` 或 `setup()` 掛鉤中呼叫。它們也應該在這些上下文中同步呼叫。在某些情況下，您還可以在生命週期掛鉤中呼叫它們，例如“onMounted()”。 7. 可組合項可以呼叫內部的其他可組合項。 8. 可組合項應在內部包裝某些邏輯，當過於復雜時，應將它們提取到單獨的可組合項中以便於測試。 ## 我的建議 我已經為我的工作專案和開源專案建置了多個可組合項 - NuxtAlgolia、NuxtCloudinary、NuxtMedusa，因此基於這些，我想根據我的經驗在上面的合同中加入一些要點。 ### 有狀態或/和純函數可組合項 在程式碼標準化的某個時刻，您可能會得出這樣的結論：您希望對可組合項中的狀態保留做出決定。 最容易測試的函數是那些不存儲任何狀態的函數（即它們是簡單的輸入/輸出函數），例如負責將字節轉換為人類可讀值的可組合函數。它接受一個值並返回一個不同的值 - 它不存儲任何狀態。 不要誤會我的意思，你不必做出“或”的決定。您可以完全保留有狀態和無狀態可組合項。但這應該是一個書面決定，以便以後更容易與他們合作 🙂 ### 可組合項的單元測試 我們希望使用 Vitest 為我們的前端應用程式實施單元測試。在後端工作時，進行單元測試程式碼覆蓋率非常有用，因為您主要關注邏輯。然而，在前端，您通常使用視覺效果。 因此，我們認為對整個元件進行單元測試可能不是最好的主意，因為我們基本上將對框架本身進行單元測試（如果按下按鈕，檢查狀態是否更改或模式是否打開）。 由於我們已將所有業務邏輯移至可組合項（基本上是 TypeScript 函數）內，因此它們很容易使用 Vitest 進行測試，並且允許我們擁有更穩定的系統。 ### 可組合項的範圍 不久前，在 VueStorefront 中，我們開發了自己的可組合方法（早在它們實際上像這樣被呼叫之前）。在我們的方法中，我們使用可組合項來映射電子商務的業務領域，如下所示： ``` const { cart, load, addItem, removeItem, remove, ... } = useCart() ``` 這種方法絕對有用，因為它允許將域包裝在一個函數中。在“useProduct”或“useCategory”等更簡單的示例中，實現和維護相對簡單。然而，正如您在此處的“useCart”示例中看到的那樣，當包裝一個包含更多邏輯而不僅僅是資料獲取的域時，這個可組合項正在發展成為一種非常難以開發和維護的形狀。 此時，我開始為 Nuxt 生態系統做出貢獻，其中引入了不同的方法。在這種新方法中，每個可組合項僅負責一件事。因此，我們的想法不是建置一個巨大的“useCart”可組合項，而是為每個功能建置可組合項，即“useAddToCart”、“useFetchCart”、“useRemovefromCart”等。 因此，維護和測試這些可組合項應該更容易 🙂 ## 進一步閱讀 這將是我的研究的全部內容。如果您想了解有關此主題的更多訊息，請務必查看以下文章： * https://vuejs.org/guide/reusability/composables.html * https://www.youtube.com/watch?v=bcZM3EogPJE * https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-composable/ * https://blog.logrocket.com/getting-started-vue-composables/ * https://macopedia.com/blog/news/how-can-vue-3-composables-make-your-life-easier
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
