歡迎使用我們精選的 JavaScript 技巧集合，它將幫助您優化程式碼、使其更具可讀性並節省您的時間。 讓我們深入研究 JavaScript 的功能和超越傳統的技巧，並發現這種強大的程式語言的全部潛力。 ### 1. 使用!!轉換為布林值 使用雙重否定快速將任何值轉換為布林值。 ``` let truthyValue = !!1; // true let falsyValue = !!0; // false ``` ### 2. 預設功能參數 設定函數參數的預設值以避免未定義的錯誤。 ``` function greet(name = "Guest") { return `Hello, ${name}!`; } ``` ### 3. 短 if-else 的三元運算符 `if-else`語句的簡寫。 ``` let price = 100; let message = price > 50 ? "Expensive" : "Cheap"; ``` ### 4. 動態字串的範本文字 使用模板文字在字串中嵌入表達式。 ``` let item = "coffee"; let price = 15; console.log(`One ${item} costs $${price}.`); ``` ### 5. 解構賦值 輕鬆從物件或陣列中提取屬性。 ``` let [x, y] = [1, 2]; let {name, age} = {name: "Alice", age: 30}; ``` ### 6. 用於陣列和物件克隆的擴展運算符 克隆陣列或物件而不引用原始陣列或物件。 ``` let originalArray = [1, 2, 3]; let clonedArray = [...originalArray]; ``` ### 7. 短路評估 使用邏輯運算子進行條件執行。 ``` let isValid = true; isValid && console.log("Valid!"); ``` ### 8. 可選連結 (?.) 如果引用為`nullish`則可以安全地存取巢狀物件屬性，而不會出現錯誤。 ``` let user = {name: "John", address: {city: "New York"}}; console.log(user?.address?.city); // "New York" ``` ### 9. 空合併運算子 (??) 使用`??`為`null`或`undefined`提供預設值。 ``` let username = null; console.log(username ?? "Guest"); // "Guest" ``` [](https://try.monday.com/9xf9ftaa4i2f) ### 10. 使用`map` 、 `filter`和`reduce`進行陣列操作 無需傳統循環即可處理陣列的優雅方法。 ``` // Map let numbers = [1, 2, 3, 4]; let doubled = numbers.map(x => x * 2); // Filter const evens = numbers.filter(x => x % 2 === 0); // Reduce const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); ``` ### 11.標記模板文字 使用模板文字進行函數呼叫以進行自訂字串處理。 ``` function highlight(strings, ...values) { return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, ''); } let price = 10; console.log(highlight`The price is ${price} dollars.`); ``` ### 12.使用Object.entries()和Object.fromEntries() 將物件轉換為陣列並返回以方便操作。 ``` let person = {name: "Alice", age: 25}; let entries = Object.entries(person); let newPerson = Object.fromEntries(entries); ``` ### 13. 唯一元素的集合物件 使用 Set 儲存任何類型的唯一值。 ``` let numbers = [1, 1, 2, 3, 4, 4]; let uniqueNumbers = [...new Set(numbers)]; ``` ### 14. 物件中的動態屬性名稱 在物件文字表示法中使用方括號來建立動態屬性名稱。 ``` let dynamicKey = 'name'; let person = {[dynamicKey]: "Alice"}; ``` ### 15. 使用bind()進行函數柯里化 建立一個新函數，在呼叫時將其 this 關鍵字設定為提供的值。 ``` function multiply(a, b) { return a * b; } let double = multiply.bind(null, 2); console.log(double(5)); // 10 ``` ### 16. 使用 Array.from() 從類別陣列物件建立陣列 將類似陣列或可迭代的物件轉換為真正的陣列。 ``` let nodeList = document.querySelectorAll('div'); let nodeArray = Array.from(nodeList); ``` ### 17. 可迭代物件的 for...of 循環 直接迭代可迭代物件（包括陣列、映射、集合等）。 ``` for (let value of ['a', 'b', 'c']) { console.log(value); } ``` ### 18. 使用 Promise.all() 實作並發 Promise 同時執行多個 Promise 並等待所有的都解決。 ``` let promises = [fetch(url1), fetch(url2)]; Promise.all(promises) .then(responses => console.log('All done')); ``` ### 19. 函數參數的剩餘參數 將任意數量的參數捕獲到陣列中。 ``` function sum(...nums) { return nums.reduce((acc, current) => acc + current, 0); } ``` [](https://imp.i384100.net/c/3922519/1320997/14726) ### 20. 用於性能優化的記憶 儲存函數結果以避免冗餘處理。 ``` const memoize = (fn) => { const cache = {}; return (...args) => { let n = args[0]; // assuming single argument for simplicity if (n in cache) { console.log('Fetching from cache'); return cache[n]; } else { console.log('Calculating result'); let result = fn(n); cache[n] = result; return result; } }; }; ``` ### 21. 使用 ^ 交換值 使用 XOR 以位元運算子交換兩個變數的值，無需使用臨時變數。 ``` let a = 1, b = 2; a ^= b; b ^= a; a ^= b; // a = 2, b = 1 ``` ### 22. 使用 flat() 展平陣列 使用`flat()`方法輕鬆展平巢狀陣列，並將展平深度作為可選參數。 ``` let nestedArray = [1, [2, [3, [4]]]]; let flatArray = nestedArray.flat(Infinity); ``` ### 23. 用一元加法轉換為數字 使用一元加運算子快速將字串或其他值轉換為數字。 ``` let str = "123"; let num = +str; // 123 as a number ``` ### 24. HTML 片段的模板字串 使用模板字串建立 HTML 片段，使動態 HTML 生成更加清晰。 ``` let items = ['apple', 'orange', 'banana']; let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`; ``` ### 25. 使用 Object.assign() 合併物件 將多個來源物件合併到一個目標物件中，有效地組合它們的屬性。 ``` let obj1 = { a: 1 }, obj2 = { b: 2 }; let merged = Object.assign({}, obj1, obj2); ``` [](https://amzn.to/3UXGIyx) 使用符合人體工學的滑鼠優化您的編程設置，專為舒適和長時間的編碼會話而定制。 ### 26. 預設值短路 處理潛在的未定義或空變數時，使用邏輯運算子指派預設值。 ``` let options = userOptions || defaultOptions; ``` ### 27. 使用括號表示法動態存取物件屬性 使用括號表示法動態存取物件的屬性，當屬性名稱儲存在變數中時非常有用。 ``` let property = "name"; let value = person[property]; // Equivalent to person.name ``` ### 28. 使用 Array.includes() 進行存在檢查 使用includes() 檢查陣列是否包含某個值，它是indexOf 的更清晰的替代方法。 ``` if (myArray.includes("value")) { // Do something } ``` ### 29. Function.prototype.bind() 的強大功能 將函數綁定到上下文（此值）並部分套用參數，以建立更多可重複使用和模組化的程式碼。 ``` const greet = function(greeting, punctuation) { return `${greeting}, ${this.name}${punctuation}`; }; const greetJohn = greet.bind({name: 'John'}, 'Hello'); console.log(greetJohn('!')); // "Hello, John!" ``` ### 30.防止物件修改 使用`Object.freeze()`防止物件進行修改，使其不可變。對於更深層的不變性，請考慮更徹底地強制不變性的函式庫。 ``` let obj = { name: "Immutable" }; Object.freeze(obj); obj.name = "Mutable"; // Fails silently in non-strict mode ``` 我希望這些 JavaScript 技巧為您提供如何進行[JavaScript 程式設計的](https://www.w3schools.com/js/)新視角。 從利用模板文字的簡潔功能到掌握`map` 、 `filter`和`reduce`的效率，這些 JavaScript 技巧將豐富您的開發工作流程並激發您的下一個專案。 讓這些 JavaScript 技巧不僅可以完善您目前的專案，還可以在您的[程式設計之旅](https://www.webdevstory.com/programming-roadmap/)中激發未來創新的靈感。 ***支持我們的技術見解*** [](https://www.buymeacoffee.com/mmainulhasan) [](https://www.paypal.com/donate/?hosted_button_id=GDUQRAJZM3UR8) 注意：此頁面上的某些連結可能是附屬連結。如果您透過這些連結進行購買，我可能會賺取少量佣金，而無需您支付額外費用。感謝您的支持！ --- 原文出處：https://dev.to/mmainulhasan/30-javascript-tricky-hacks-gfc
🔑 關鍵概念 ------ 什麼是可重複使用的 React 元件？您可以將它們視為建置塊。 它們是獨立的程式碼片段，可以在整個網站中重複使用，以節省您的時間和精力。 它們可以是從簡單按鈕到複雜表單的任何內容。 **為什麼要使用可重複使用的元件？** 隨著您的網站的發展，您可以透過組合現有元件輕鬆加入新功能。這使您的程式碼更具可擴展性和適應性。 您可以**在未來的專案中使用可重複使用的程式碼，**而無需從頭開始重新編寫。 --- 🧩 如何寫出乾淨、可重複使用的 React 元件 ------------------------ 在編寫乾淨的可重複使用 React 元件時，需要記住以下*兩個最重要的*事情：  **1. 🩼避免副作用。**不要將與外部資料互動的邏輯（例如進行 API 呼叫）直接放入可重複使用元件中。相反，將此邏輯作為`props`傳遞給元件。 例如，如果一個按鈕不僅僅是看起來漂亮，例如從網路獲取資料，**那麼它可能無法重複使用。** 在您掌握透過最佳實踐傳遞 props 的概念之前，我不會向您展示這方面的範例。繼續閱讀。 這是一個可重複使用的按鈕元件。但它缺乏最佳實踐。我將在範例部分向您展示原因。 ``` // This is a reusable button component (bad practice!) const Button = () => { return ( <button> Click Me </button> ); } ``` **2. 🗃️使用 props。** Props 是傳遞給元件以自訂其行為和外觀的參數。這允許您將相同的元件用於不同的目的。 ``` // This is a button component that can change its color const Button = ({ color }) => { return ( <button style={{ backgroundColor: color }}> Click Here </button> ); } ``` 這仍然是一個不好的做法，因為您有一個名為「點擊這裡」的固定標籤。如果您想更改按鈕上的文本，例如“註冊”，那麼您必須返回按鈕元件並進行更改。 這意味著每次我們想要使用不同的文字時，我們都必須返回並編輯程式碼。換句話說，它不再可重複使用。 **💪 挑戰：**那麼解決方案是什麼？ 你已經有了答案。但如果您不這樣做，我將在範例部分向您展示。 **🌴提示：**考慮一下您可能希望如何在不同情況下使用該元件，並將其設計得靈活且適應性強。 🍃可重複使用 React 元件的範例 ------------------ 以下是可重複使用 React 元件的一些常見範例，以及一些幫助您入門的程式碼範例： **1. 按鈕：**具有不同樣式和功能的基本按鈕。 ``` // Button component import React from "react"; const Button = ({ color, label, onClick }) => { return ( <button className={`padding-2 shadow-none hover:shadow background-light-${color} hover:background-dark-${color}`} onClick={onClick} > {label} </button> ); }; export default Button; // Using the Button component <Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} /> ``` 正如你所看到的，我沒有在按鈕元件中寫“Click Here”。我想讓我的按鈕可重複使用，因此它不知道有關自訂樣式或文字的任何資訊。 因此，我將它們作為 props（例如，顏色、標籤、onClick）傳遞，以便將來更改它們，而無需觸摸原始按鈕元件。希望這能說清楚。 > **🪜解決方案：**您需要將每個功能作為可重複使用元件中的`props`傳遞 - 就是這樣。 **2. 導覽列：**在整個網站上提供一致導覽的導覽列。 ``` // Navbar component import React from "react"; const Navbar = ({ isLoggedIn }) => { return ( <div className="navbar"> <div className="navbar-container"> <div className="navbar-logo"> <img src={logo} alt="logo" /> </div> <div className="navbar-links"> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> {isLoggedIn ? ( <a href="/profile">Profile</a> ) : ( <a href="/login">Login</a> )} </div> </div> </div> ); }; export default Navbar; // Using the Navbar component <Navbar isLoggedIn={true} /> ``` 如您所見，我通過了`<Navbar isLoggedIn={true} />` 此行利用`Navbar`元件並傳遞值為 true 的`isLoggedIn`屬性，表示使用者已登入。這將顯示「個人資料」連結並隱藏「登入」連結。 與按鈕元件類似，導覽列元件是可重複使用的，並接受 props 來自訂其行為。完美的！ **3. 為什麼在按鈕元件中呼叫 API 是不好的做法** 現在，您已經了解了 React 中可重複使用元件的所有內容。 讓我們透過解決一個複雜的問題來更深入地研究。 考慮這樣的場景，您有一個執行 API 呼叫的按鈕。按鈕元件的程式碼可以如下： ``` import React from "react"; import doAPICall from "../api" const SaveButton = () => { return ( <button onClick={() => { doAPICall(); }} > Save </button> ); } export default SaveButton ``` 很明顯，您不能在多個地方重複使用上述按鈕，因為該按鈕元件內部包含副作用（ `doAPICall()` ）。 為了使該元件可重複使用，首先，您必須提取副作用並將其作為 prop 傳遞給按鈕元件，如下所示： ``` const App = () => { function doAPICall() { // Does an API call to save the current state of the app. } return ( <div> <SaveButton onClick={doAPICall}/> </div> ) } ``` 按鈕元件將如下所示： ``` const SaveButton = ({ onClick }) => { return ( <button onClick={onClick} > Save </button> ); } ``` 正如您所看到的，現在可以在您想要透過點擊按鈕儲存資料的所有位置重複使用上面的按鈕。該按鈕現在可以在多個地方像這樣使用： ``` const App = () => { function saveUser() { // Does an API call to save the user. } function saveProject() { // Does an API call to save the project. } return ( <div> <SaveButton onClick={saveUser}/> <SaveButton onClick={saveProject}/> </div> ) } ``` 您也可以透過使用 prop 來控制標籤，使按鈕元件更具可重複使用性，如下所示： ``` const App = () => { function saveUser() { // Does an API call to save the user. } function saveProject() { // Does an API call to save the project. } return ( <div> <SaveButton onClick={saveUser} label="Save user" /> <SaveButton onClick={saveProject} label="Save project" /> </div> ) } ``` 按鈕元件將如下所示： ``` const SaveButton = ({ onClick, label }) => { return ( <button onClick={onClick} > {label} </button> ); } ``` **🫧 推薦：🤖🦾 [Figma AI：](https://psxid.figma.com/8g4g75niz3sg-7v0ro9)** 如果您需要快速設計簡報或網站，Figma AI 可以提供現成的範本。並且它可以與[Figma](https://psxid.figma.com/pq1612tcamkx)順利配合。只要告訴它你想要什麼，畫一點，然後繁榮——你的想法就變成現實了！  您可以嘗試[Figma AI](https://psxid.figma.com/8g4g75niz3sg-7v0ro9) ，目前它對所有人免費。 --- 👏結論 --- 恭喜！您已經成功學習如何使用最佳實踐建立乾淨的可重複使用 React 元件。 請記住，**可重複使用元件是健壯的 React 開發的建置塊**。透過練習可重複使用元件，您可以建立更乾淨、更有效率、更易於維護的 React 應用程式。 您練習得越多，您就越能更好地辨識在專案中使用它們的機會！ 如果您喜歡這篇文章，您可能也會喜歡我的[𝕏](https://twitter.com/shahancd)帳戶，以了解更多有關前端開發的課程。 **閱讀更多：**[前端開發的未來](https://dev.to/codewithshahan/the-future-of-frontend-development-1amd) --- 原文出處：https://dev.to/codewithshahan/writing-clean-reusable-components-in-react-best-practices-2gka
是的，初學者的挫折感是一種常見的情緒，而且很自然。不要因為這種傾向而責怪，因為我們自己都可能經歷過這種情況。不要撒謊，您可能在某個領域中發現初學者很煩人，因為您擁有更高水平的專業知識。 如果你沒有，那麼，做你自己就很糟糕。 然而，必須認識到，應對初學者的挑戰不僅是學習旅程的一部分，也是個人成長的重要面向。在本文中，我們深入研究了初學者旅程中伴隨的各種挫折，並探討了為什麼承認和解決這些挫折對於任何努力提高技能和知識的人來說都是至關重要的。 因此，讓我們探索初學者階段的複雜性，並發現有價值的見解，以推動您在學習努力中前進： **1. 缺乏知識：** 作為初學者通常意味著缺乏基礎知識，讓我們面對現實吧，這對您和您想要向其學習的人來說可能會令人沮喪。當你剛開始時，你可能有遠大的抱負，但將它們分解為可操作的步驟感覺就像試圖蒙住眼睛解開魔術方塊。 初學者並沒有意識到自己的無能，這常常會導致他們尷尬地提出看似愚蠢的問題——我曾經經歷過，這樣做過，現在仍然偶爾這樣做。 *舉個例子*：幾年前，我竟然厚顏無恥地詢問谷歌員工是否可以給比爾蓋茲發一封電子郵件來解決我的 Windows 7 啟動金鑰問題。我感到很羞愧，但這也提醒我們，即使是職業選手也曾經是一無所知的新手。 你需要提出問題來獲取知識，即使它們可能很愚蠢。 感謝像 chatGPT 這樣的工具，與以前不同的是，你現在可以安全地提出愚蠢的問題，唯一會嘲笑你的人就是 openai 的工程師。 ***從人們那裡獲取知識而不顯得愚蠢*** 現在，有些東西你只能從人們那裡學習/獲得，並且你可能需要為了這類事情而接近他們（但僅限於這類事情）。當向他人尋求幫助時，一切都取決於給予和索取。人們更有可能幫助解決棘手的問題，從而帶來某種互惠互利。所以，在你向某人尋求建議之前，想想這對他們有什麼好處？ 如果你的問題對他們沒有幫助或沒有興趣，你應該問chatGPT，因為chatGPT 沒有更好的事情要做。 ***害怕顯得愚蠢*** 這是完全正常的。但事情是這樣的——承認自己的無知是邁向智慧的第一步。畢竟，每個人都是從新手開始的，暴露我們專業知識的缺乏只是成為真正專家的旅程的一部分。 你是否因為擔心別人認為你很蠢而害怕與人接觸？ Lmao，如果你回到根本上，你害怕看起來很愚蠢的原因只是因為你很愚蠢——就這個話題而言。 遲早，你在該領域的技能不足將會暴露出來。所以無論如何也無所謂，最好還是仔細揭開，快速獲得知識。 **2、不耐煩：** 正如他們所說，耐心是一種美德，但讓我們面對現實吧——這是一顆難以吞嚥的藥丸，尤其是當你深入學習新事物的時候。無論是掌握一項技能、達到財務里程碑，還是等待您最喜歡的系列的下一部，不耐煩常常會出現。 想想看：您是否願意等待我的下一篇文章（知道它將於下週一下午 3:00 準時發布），還是因為“下個月的某個時候”的模糊承諾而懸而未決？確切地。擁有明確的時間表可以讓你更容易保持耐心。 在追逐那個難以捉摸的夢想時，你能喚起聖人的耐心嗎？這是一個艱難的問題，尤其是當成功之路充滿不確定性時。你看，你無法計算出達到那個里程碑的確切時刻，因為你還沒有走過那條路。這是一個第二十二條軍規：你需要知識來實現目標，但在實現目標之前你不會真正掌握這些知識。令人困惑，對吧？ 例如，你不知道你需要多長時間才能賺到第一個十億，因為你沒有所需的知識，而當你擁有所需的知識時，你應該已經賺到了十億，因為這是了解您是否已獲得有關如何賺取第一個十億美元的足夠知識的唯一方法。 如果你認為你知道如何賺到第一個十億，但你還沒有做到，那麼你告訴自己為什麼*你沒有*做到的任何故事，都代表著一個知識空白，你需要填補這個空白，以更接近所需的真正知識。賺十億。 你和你的目標之間的每一個障礙都是一個等待學習的教訓。這都是旅程的一部分，我的朋友。擁抱不確定性，享受挑戰，並記住－成功之路不是一條直線；而是一條直線。這是一條蜿蜒的道路，充滿了曲折、轉彎，偶爾會走彎路。 作為一個初學者，你會感到焦慮，因為你似乎無法填補你現在的位置和你想要的位置之間的差距；因為你沒有所需的知識。 你獲得的知識越多，前方的道路就會變得更清晰、更光明。越接近隧道的盡頭，路就越清晰，盡頭的光會照亮前路，雖然沒有確切的“隧道盡頭”，但學習是一生的旅程（至少，是這樣）本來就是這樣的）。 因此，與其專注於目的地，不如專注於旅程本身。旅程就是目的地。享受過程，享受挑戰，享受一路上的小勝利。畢竟，正是不確定性才讓這段旅程變得值得。如果一定能成功，那還有什麼樂趣呢？ 正是不確定性使得耐心變得困難，如果在特定時間範圍內保證成功，許多懶惰的人就會開始投入工作。 當你開始看到曙光時，你就已經到了意識到自己無能的階段。 現在您可以清楚地看到自己的限制以及您想要獲得的技能的困難。這是覺醒的階段。 這是29%的人開始懈怠、70%的人放棄的階段。 但如果你已經讀到這裡，我就知道那不是你。 **3.害怕失敗：** 把事情做好是最好的學習方式，但一開始你就不可能不失敗就完成任何事。 *失敗是知道下一步該學什麼的唯一方法。* 很多人只是堅持低階學習；在大腦中記憶和儲存事實和數字而不付諸實踐，認為自己知道很多，這可能會導致鄧寧克魯格效應。 對於那些不知道的人來說，鄧寧-克魯格效應是一種認知偏差，它會導致人們高估自己的能力，從而導致錯誤的自信感。換句話說，他們認為自己知道一切，而實際上，他們只觸及了表面。 但事實是：真正學習的唯一方法就是捲起袖子、親力親為。知識只有付諸實踐才有價值。否則，這些只是無用的瑣事擾亂你的大腦。  *你想要堆疊知識還是想要堆疊結果？* 在我的環境中流行一句話：「沒有知識就是浪費」。我不相信這是真的。如果你不使用知識，知識絕對會浪費。 這句話一定起源於人們過去所知道的一些隨機的事情拯救了他們時所獲得的多巴胺。 嗯，是的，隨機知識有時會有所幫助。但是，您是否願意繼續累積知識並希望它派上用場，並祈禱您所擁有的知識會以某種方式幸運地使您成功，或者您是否會採取積極的步驟來確保您掌控自己的成功。你會驚訝地發現有多少人仍然不選擇後者。  人生不是一場學校考試，透過反省事實和數字就能為你贏得**A** ，如果你學到了一些你沒有應用的東西，你就是在浪費時間。人生是一場親力親為、充滿動感的冒險，成功只屬於那些願意捲起袖子、親力親為的人。 你需要做更多，而不是知道更多。 不要挑選一本新書，而是按照你在上一本中讀過的內容去做。閱讀本文將為您提供訊息，但只有將這些訊息付諸實踐才能帶來轉變。 如果你想以十倍的速度學習，並在幾個月內實現別人需要幾年才能實現的目標，*那麼你需要學習如何學習。* 不要毫無目的地學習，而是這樣做： - 了解基礎知識 - 概述一個專案來解決您遇到的問題，或其他人正在為初學者解決的基本問題 - 開始建立專案 - 一路學習 **4. 過於急切：** 這就像在你還沒學會爬行之前就試圖衝刺一樣。一頭扎進新事物可能會令人興奮，但不要超前。 當初學者太急於證明自己時，他們常常會為了急於引起轟動而忽略重要的說明並跳過關鍵的基礎知識。這就像在不先打地基的情況下試圖建造一座房子一樣——你注定會失敗。 問題的根源是什麼？***感性太多，理性思考不夠***。充滿熱情固然很好，但當你的情緒影響了你的判斷時，你就會走向災難。不要幻想所有的可能性，醒來並注意現實的冷酷事實。相信我，它並不那麼迷人，但它是完成真正工作的地方。 所以，事情是這樣的：努力保持謙虛和冷靜。把你的牌放在胸前－不要讓你的情緒出賣你。無論有人給你 1 美元還是 100 萬美元，都要保持撲克臉。表達自己的情緒可能有助於人際關係，但在生意上呢？沒那麼多。 當人們在人際關係中充分理解你時，溝通就會變得更容易。當人們在商業上更了解你時，操縱就會變得更容易 在商業中，情緒可以發揮複雜的作用。雖然理解和同理心在人際關係中很受重視，但在商業世界中，它們有時可能被視為可利用的漏洞。如果您顯得絕望，如果對方利用這種情況（也許是提高價格），請不要感到驚訝。在商業交易中保持專業和冷靜以避免被操縱至關重要，同時仍然認識到真正的聯繫和同理心的重要性，儘管是在不同的背景下。 控制住你的情緒，你就會非常有效地學習，而不會顯得愚蠢。 **5、不一致：** 大多數人都是懶惰的，只在自己想做的時候做自己想做的事。 > 我有這條法律；*如果你花在不做某件事上的時間比持續做某件事所花的時間多，那麼你就是在倒退並浪費你過去付出的努力。* 對我來說，速度是獲勝的最重要因素，你能以多快的速度完成這項高品質的工作？這才是重要的。 很多人說“聰明的工作勝過艱苦的工作”，我認為這並不重要，“快速的工作永遠會獲勝”（記住，我先說的）  聰明的工作可以打敗艱苦的工作的唯一原因是它更快。找到一種快速完成某件事的方法是明智之舉。速度更重要。當你不一致時，你就會失去動力。 如果某人持續努力，而你慢慢變得聰明，他/她會因為速度更快而獲得更多結果。 力求努力、聰明、快速地工作。 **6. 太害羞不敢成功：** 許多人喜歡用可笑的藉口說他們是一個內向的人，並且由於他們的“天性”而無法將自己放在那裡尋找機會。 那是廢話，社交是一種技能，而不是個性，你需要發展你的社交技能，讓你的創造力變得有價值。擁有創造性技能並不足以取得成功，您需要補充技能才能充分利用它；說服的藝術。 從技術上來說，你可能在某件事上擁有最好的技能，但如果人們不了解你，那就毫無用處。你擁有與你的臉一樣獨特的價值，如果你不能讓人們注意到它，你就無法將這種價值賦予任何人。 有時，您可能會看到那些技能不如您的人享受您沒有的機會，只是因為他們建立了人際網絡，而不總是因為這對他們來說更容易。 在過去，你要成功，顯然仍然需要人脈，但為了獲得這些人脈，你需要努力學習，進入最好的學校，結識最好的人，你需要錢去長途旅行才能見到最好的人。名人和成功人士可能會或可能不會聽你的，所以如果你真的想成功，你必須走出你的舒適區，發揮你的魅力，讓自己看起來很體面。如今，借助網路，您可以向任何名人發送私訊（有些人仍然不知道這的意義，不幸的是，這幾乎就像他們在睡覺一樣）。 ***利用網路。*** 從一開始就推銷自己，不要害怕表現得像個初學者，也不要害怕認為有些人可能會認為你很愚蠢或基礎。讓我給你看一些東西： 看看這個 Twitter/𝕏 帳號。  它實際上只是發布“這一年已完成 x%”，沒有其他內容，並且它有 130 萬粉絲。我目前在…稍後在 Twitter 上關注我🥺。 > 皇室教訓：我們就像網路上超過 5,300,500,000 人一樣，無論你是否基礎並不重要，仍然有人會喜歡你所做的事情，無論如何你都有義務接觸他們什麼。 大多數討厭你的基本內容的人可能會嫉妒他們有相同的想法或知識，但沒有足夠的勇氣將其表達出來。 不要等到成為大師才開始表現自己。  *山頂孤獨，戰壕裡擁擠。* 人們更喜歡能夠產生共鳴，你的地位越低，越多的人能夠產生共鳴並欣賞你的成長。當你達到前 1% 時，就會變得更加孤獨，也更難找到可以交往的人。 許多人都在尋求他們能夠實現目標、能夠變得偉大的保證：「如果這個人能夠在面臨挑戰的情況下表現出這一點，我當然也可以！先讓我了解他們是如何做到的」。 所以本質上我的觀點是，大師非常有價值，但你可以輕鬆地向更接近你水平的人學習，也許領先 1-10 步，越接近越容易。 例如，我從伊隆馬斯克那裡學到了很多東西，但我從我網絡中目前的導師那裡學到了更多，因為他們是「平易近人的」。 此人可能是該領域的專家，但如果無法聯繫到他/她，他/她就無法為您提供針對您的具體情況的個人化建議。 您可能正在聽一些優秀的 YouTuber 的講話，這個人可能會給出準確的建議，但您的情況可能是這些事實的例外，可能存在一些細微差別，導致這些事情不起作用。 然後你可能最終會得出結論，這個人所說的是無稽之談（儘管我並不是說每個人都總是正確的）。 處於金字塔底部的你更容易接近。利用這一點來發揮你的優勢。 我認為名人面臨的問題之一是，他們通常會受到很多人試圖「接近」他們的轟炸，他們沒有足夠的時間或精力去照顧每個人。但你做到了，這是你擁有伊隆馬斯克所沒有的東西，利用它來攀登金字塔。 > 透過你的可及性為人們提供價值，從而成為難以接近的人；你所給予的價值將變得非常有價值，以至於初學者或金字塔底層的人很難獲得它。 您可以展示您的專業知識，並為近距離和個人聯繫收取額外費用。 我希望這對你有幫助，我很讚揚，我幫助人們從他們的創造力中賺錢，[訂閱我的時事通訊](https://tbk.beehiiv.com)（商業造王者）以獲得關於如何從你的創造力中賺錢印鈔系統的更多新鮮觀點。我為人們創造更多機會透過我的專案等賺取更多收入，我的時事通訊是與我聯繫並了解更多有關我的專案的好方法。 請務必將這篇文章轉發並分享給困擾您的煩人的初學者。和平✌️ --- 原文出處：https://dev.to/drpraze/skill-issue-how-to-master-anything-10x-faster-without-looking-stupid-2hj4
想像一下，您的客戶要求您建立一個 Web 應用程式，以滿足其客戶的所有需求。這就是你的客戶會告訴你的全部內容，你能建造它嗎？很明顯，您錯過了更多訊息，並且存在要求，但您知道什麼是要求嗎？如果我們沒有明確定義它們，會產生什麼後果？存在哪些類型的需求？本文將嘗試以簡單的方式回答其中一些問題。 概括 -- - [什麼是要求？](#what-is-a-requirement) - [為什麼它們很重要以及需求定義不明確的後果](#why-they-matters-and-consequence-of-poorly-defined-requirements) - [我們怎樣才能有一個好的需求](#how-we-can-have-a-good-requirement) - [要求等級](#levels-of-requirements) ``` - [User requirements](#user-requirements) ``` ``` - [System requirements](#system-requirements) ``` - [要求類型](#types-of-requirements) ``` - [Functional requirements](#functional-requirements) ``` ``` - [Non-functional requirements](#non-functional-requirements) ``` - [結論](#conclusion) 什麼是要求？ ------ 首先，我們需要了解軟體開發環境中的需求是什麼。 Shari Pleeger 給我們下了一個很好的定義： > 系統特徵或系統為實現其目標而能夠完成的事情的描述 換句話說，要求是辨識產品或流程操作、功能或設計約束或特徵的聲明，該聲明是**明確的**、**可**測試的、**可測量**的，並且是接受產品或流程所必需的（由消費者或內部品質保證指南） 。 每個需求都是基於現實中存在的問題而建立的，而軟體只是解決它的一種方法。 為什麼它們很重要以及需求定義不明確的後果 -------------------- 現在我們知道什麼是要求，我們必須問： > “為什麼對於從事 IT 工作的人來說了解它如此重要？” 我會給你一些原因。根據要求，我們能夠： - 為專案規劃提供依據 - 對於研究變更請求至關重要 - 允許從開發的最早階段進行風險管理 - 它們是驗收測試的基礎 - 合約管理  如果我們的需求定義不明確會發生什麼事？ 第一個也是合乎邏輯的後果是專案交付的延遲。當我們開始一個專案或衝刺時，沒有對要開發的內容有所有明確的要求，存在錯誤的可能性是巨大的！因此，開發人員和 QA 團隊需要承擔更多工作，從而降低了他們的生活品質。 如果出現在Production中，就會有許多不滿意的用戶，讓產品的信心降低，甚至導致系統報廢。另一個後果是維護系統的成本。 我們怎樣才能有一個好的需求 ------------- 需求的編寫方式因團隊而異，但它們都應該具有以下三個特徵： - 明確 - 可測試 - 可測量的 要求等級 ---- ### 用戶要求 使用者需求定義了我們的軟體需要做什麼。它可以透過使用者的需求、期望、限制和介面來描述使用者面臨的問題。 此類需求是為客戶編寫的，我們使用自然語言加圖表。我們可以使用待辦事項清單應用程式的使用者需求範例： > 使用者應該能夠在清單中插入新任務 ### 系統需求 系統需求是定義系統有效運作所需的硬體、軟體和網路元件的功能和約束的規格。 這些要求對於設計、實施和維護系統至關重要。他們負責描述必須做什麼，而不是如何做。 使用我們已經使用過的相同要求，我們可以詳細了解它： |用戶需求|系統需求 | | -------------------------------------------------- ------ | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------------------------------------ | |使用者應該能夠在清單中插入新任務 | - 使用者應該能夠點擊插入按鈕以新增任務 \- 當使用者點擊按鈕時，任務新增應出現在清單中 插入 \- 只有登入使用者才能存取任務清單| 要求類型 ---- ### 功能要求 功能需求描述了一個系統應該執行的操作。它們描述了系統應該提供什麼、系統應該如何對特定輸入做出反應以及系統在特定情況下應該如何表現。他們還可以描述系統不應該做什麼。 功能需求可以描述使用者或系統需求。 ### 非功能性需求 非功能性需求描述系統或環境應提供的服務或功能。他們負責定義系統的架構。我們對非功能性需求有不同的類別，它們是： 1. **表現：** ``` - _Response Time:_ Specifies the maximum acceptable time for the system to respond to user input. ``` ``` - _Throughput:_ Defines the number of transactions or operations the system can handle in a given time. ``` 2. **可用性：** ``` - _User Interface (UI) and User Experience (UX):_ Specifies criteria related to the design, ease of use, and overall user experience. ``` ``` - _Accessibility:_ Ensures that the system is usable by individuals with disabilities. ``` 3. **可靠性：** ``` - _Availability:_ Specifies the percentage of time the system should be operational. ``` ``` - _Fault Tolerance:_ Defines the system's ability to continue functioning in the presence of faults or errors. ``` 4. **安全：** ``` - _Authentication:_ Describes how users are identified and verified. ``` ``` - _Authorization:_ Specifies the level of access granted to different users or roles. ``` ``` - _Data Encryption:_ Requires the use of encryption to protect sensitive data. ``` 5. **可擴充性：** ``` - _Horizontal Scalability:_ Describes how well the system can handle an increase in load by adding more hardware. ``` ``` - _Vertical Scalability:_ Describes how well the system can handle an increase in load by increasing the capacity of existing hardware. ``` 6. **相容性:** ``` - _Hardware Compatibility:_ Ensures the system can run on specified hardware configurations. ``` ``` - _Software Compatibility:_ Ensures the system can work with specified software components. ``` 7. **可維護性：** ``` - _Modifiability:_ Describes the ease with which the system can be modified or updated. ``` ``` - _Testability:_ Specifies the ease with which the system can be tested to ensure its correctness. ``` 8. **可移植性：** ``` - _Platform Independence:_ Describes the ability of the system to run on different operating systems. ``` ``` - _Data Portability:_ Ensures that data can be easily transferred between different systems. ``` 9. **文件:** ``` - _User Documentation:_ Specifies the requirements for user manuals and guides. ``` ``` - _Technical Documentation:_ Describes the requirements for system architecture, API documentation, etc. ``` 10. **監理與合規：** ``` - _Legal Requirements:_ Ensures that the system complies with relevant laws and regulations. ``` ``` - _Industry Standards:_ Specifies adherence to industry-specific standards. ``` 結論 -- 正如我們所看到的，軟體需求對我們來說非常重要，並且有很多不同類型的需求，但最重要的是確保在開始開發之前，我們已經很好地定義了它們。 我希望這些內容對您有用。 如果您有任何疑問，請隨時與我聯繫！ 親吻💅🏼 --- 原文出處：https://dev.to/m4rri4nne/what-you-need-to-know-about-software-requirements-2hc0
--- 標題：為什麼事件溯源是一種微服務通訊反模式 發表：真實 描述：這篇文章描述了合理的事件溯源用例，並提供了微服務之間通訊的替代方案。 封面圖片：https://github.com/OLibutzki/blog/raw/master/water-4230596\_1920.jpg 標籤： 事件溯源, 領域驅動設計, 領域事件 --- 一般而言，事件驅動架構，特別是事件溯源，在過去幾年中獲得了廣泛關注。這種趨勢是由於我們努力建構具有彈性和可擴展性的模組化系統而引起的。*微服務*是在這種情況下經常使用的術語。在我看來，微服務只是實現有界脈絡的一種方法。模組化系統的核心是模組的邊界，而如何辨識這些邊界最有前途的想法是 Eric Evans 的領域驅動設計中引入的[戰略設計](https://en.wikipedia.org/wiki/Domain-driven_design#Strategic_domain-driven_design)。它可以幫助您辨識/發現模組及其邊界（[有界上下文](https://martinfowler.com/bliki/BoundedContext.html)），並描述這些有界上下文相互關聯的方式（上下文映射）。 *注意：我會預設某些術語的一些預知，因為我不想第一千次解釋它們。我決定連結到[microservices.io](https://microservices.io/) 、[維基百科](https://en.wikipedia.org)或[Martin Fowler 的 Bliki](https://martinfowler.com/bliki/)的解釋，因此，如果您對自己的知識感到不舒服，則可以更深入地研究某個主題。* 領域事件作為通用語言的核心 ============= 儘管在 Eric 的書中沒有明確提及，但領域事件很好地促進了 DDD 概念的發展。像 Alberto Brandolini 的[事件風暴](https://en.wikipedia.org/wiki/Event_storming)這樣的技術將事件的焦點從技術層面轉移到組織/業務層面。我們不討論一些 UI 層事件，例如*ButtonClickedEvent* ，而是討論領域事件，它們是業務領域的一部分，並由業務專家說出和理解。這些領域事件是一流的概念，並提供了一種形成所有參與者（領域專家、開發人員…）都同意的[通用語言的](https://martinfowler.com/bliki/UbiquitousLanguage.html)好方法。 用於跨界通訊的領域事件 =========== 領域事件可用於促進有界上下文之間的溝通。假設我們有一家具有三個限界上下文的線上商店：訂單、交貨、發票。 訂單上下文的網域事件是*訂單已接受*。發票和交付上下文對此事件的發生感興趣，因為它會導致一些內部流程啟動。 脫鉤神話 ==== 使用領域事件可以幫助您開發解耦的模組。模組可能會暫時離線。領域事件不關心不可用的模組，它們描述過去發生的事情。這取決於其他模組處理事件的速度。您得到的是一個設計上具有彈性的系統。 除了時間解耦之外，領域事件還具有另一個優勢，至少乍看之下是這樣： Order 上下文不必知道 Invoice 和 Delivery 上下文會偵聽其事件。實際上它甚至不需要知道這些上下文的存在。 這很酷，但具有挑戰性的部分是事件負載。哪些資料放入事件中？ 簡單的答案：事件溯源！ =========== 事件很有用，所以為什麼不賦予它們盡可能多的權力（和責任）。這就是[事件溯源](https://microservices.io/patterns/data/event-sourcing.html)的基本思想。您不會透過更新資料 (CRUD) 而是透過套用事件流來儲存聚合的狀態。 除了您可以重播事件以重建應用程式狀態之外，事件來源的一個重要功能是您可以免費獲得完整且可靠的審核日誌。因此，當需要這樣的稽核日誌時，在評估持久性策略時一定要考慮事件溯源。 事件溯源只是一種持久性策略嗎？ =============== 您可能想知道為什麼我從領域事件直接轉向持久化策略，因為這些概念顯然適用於不同的層/抽象層級。 ……這就是我的觀點：事件溯源是由單一限界上下文做出的本地決策！這些事件不該向外界曝光！其他限界上下文則不知道彼此的持久化策略，因此它們不知道也不關心另一個限界上下文是否使用事件溯源。 如果您在全球範圍內使用事件溯源，則會暴露您的持久層。 您的持久性將成為您的公共 API。每次限界上下文調整其持久性資料時，我們都必須處理公共 API 變更。 我很確定每個人都同意，由於開發和執行時耦合，不同的限界上下文[共享（關係）資料庫中的資料](https://microservices.io/patterns/data/shared-database.html)是一個壞主意。但差別在哪裡呢？ 空無一人。我們是否共享事件或資料庫表並不重要。在這兩種情況下，我們都會分享持久性詳細資訊。 有出路 === 我仍然認為領域事件非常適合限界上下文之間的通信，但這些事件不應與用於事件溯源的事件相對應。 我提出的解決方案是合乎邏輯的結果：無論您使用 CRUD 還是事件溯源方法來實現持久性，您都可以將領域事件發佈到全域事件儲存。這些領域事件是有界上下文的公共 API。如果您喜歡在限界上下文中使用事件溯源，則可以將這些事件儲存在本機事件儲存中，該儲存只能從此限界上下文存取 選擇的自由 ===== 在公共 API 中擁有專用領域事件可讓您決定如何對這些事件建模。您不受事件來源事件預先定義的佈局的限制。 對於每次發生的“現實世界事件”，您有兩個選擇： 使用已發布語言的開放主機服務 -------------- 準確發布一個網域事件，其中包含其他限界上下文可能需要的所有資料。在 DDD 術語中，我們將其稱為具有已發布語言的開放主機服務。  現實世界事件*Order Accepted*的發生會導致發布一個網域事件*OrderAccepted* 。此事件的有效負載包含 Order 期望其他限界上下文感興趣的所有資料...因此希望 Invoice 和 Delivery 上下文找到它們所需的所有資訊。 客戶/供應商 ------ 發布多個專用領域事件，每個事件使用者一個。您必須與另一方（消費者）討論每個特定的領域事件，而不必定義共享模型。 DDD 將這種關係稱為客戶/供應商。  現實世界事件*Order Accepted*的發生會導致每個消費限界上下文發布一個網域事件： *InvoiceOrderAccepted*和*DeliveryOrderAccepted* 。每個領域事件都包含消費上下文所請求的資料。 我不想討論這兩種選擇的優缺點。我只是想強調一下，您可以自由選擇領域事件的數量及其有效負載。 這是您不應低估的巨大優勢，因為您可以決定如何發展有界上下文的 API，而不必致力於事件溯源所需的事件。 結論 == 向外界公開持久性細節是一種眾所周知的反模式。在談論持久性時，我們首先想到的是資料庫表，但我解釋了為什麼用於事件來源的事件只是持久性資料的另一種方式。因此，暴露這些事件也是一種反模式。 {% 推特 784691906005635072 %} 如果以適當的（本地）方式使用事件溯源，它會非常強大。乍一看，它似乎是事件驅動架構的靈丹妙藥，但如果您深入研究，您會意識到它可能會引導您進入緊密耦合（分散式）系統……當然，這不是您的目標。 參考 == 除了我的個人經驗之外，我還從不同的摘要和會議演講中獲得了許多靈感。我想重點介紹 Eberhard Wolff 的演講《*基於事件的架構以及使用 Kafka 和 Atom 的實現》* 。特別是[事件溯源](https://youtu.be/Ecg7lvvm8aU?t=1178)和[事件中有什麼？](https://youtu.be/Ecg7lvvm8aU?t=655)與本博文的上下文高度相關。我選擇的線上商店範例是受到這次演講的啟發。 如果您想獲取更多訊息，還可以查閱其他一些資源： - [領域事件與事件溯源，](https://www.innoq.com/en/blog/domain-events-versus-event-sourcing/)作者：Christian Stettler，部落格文章 - [關於事件溯源，他們沒有告訴您的事情](https://medium.com/@hugo.oliveira.rocha/what-they-dont-tell-you-about-event-sourcing-6afc23c69e9a)由 Hugo Rocha 撰寫，部落格文章 - [DDD、CQRS、事件溯源的十年（CQRS/ES 不是頂級架構），](https://youtu.be/LDW0QWie21s?t=1259)作者：Greg Young，會議演講 --- 原文出處：https://dev.to/olibutzki/why-event-sourcing-is-a-microservice-anti-pattern-3mcj
您是否想過為開源做出貢獻？如果你在這裡，你可能就這麼做了😄 對於初學者來說，這可能會讓人感到困惑，但我可以理解——我自己也經歷過這樣的情況。然而，您找到了繼續前進的意志力並了解了有關此過程的更多訊息，我希望本文將向您展示它並不像看起來那麼複雜。 大多數接受貢獻的儲存庫通常都有一個您應該留意的**CONTRIBUTING.MD**檔案。由於並非所有存儲庫都是相同的，因此該文件將告訴您有關為該特定存儲庫做出貢獻的過程的更多資訊。 然而，一些通用規則可以應用於大多數儲存庫，我們將在本文中討論它們。 ### 支持我們🙏🏻  在我們開始之前，如果您為我們的[開源儲存庫](https://github.com/cyclops-ui/cyclops)加註星標並幫助我們獲得我們的產品，我們將非常高興 在其他開發者面前的工具 ⭐ 在哪裡貢獻？ ------ 我想到的第一個問題是：在哪裡做出貢獻？ 好吧，您應該從**您已經使用的**專案開始。也許某些庫需要更新，或者某些工具有錯誤？ 您可能想為您的**專業領域**內的某些專案或使用您熟悉的**技術堆疊的**專案做出貢獻。 這些都是偉大的競爭者，你應該研究一下他們。 如果您不了解任何專案但仍想做出貢獻，請瀏覽 GitHub 或造訪[Quine](https://quine.sh/contribute)等網站，其中許多開源儲存庫正在尋找貢獻者。 在本文中，我們將使用我們的開源儲存庫 - [**Cyclops**](https://github.com/cyclops-ui/cyclops) 。 如何知道哪些方面需要改進？ ------------- 無論您是在尋找事情做，還是已經知道需要修復的錯誤，所有貢獻都從同一個地方開始 -**問題選項卡**。  如果您是該專案的新手，您可以尋找大多數儲存庫都有的「 ***goodfirst issues」***標籤。顧名思義，它們是參與專案的一個很好的切入點。所有問題都應該有問題的描述。 如果您知道此處未列出的問題或錯誤，或者您希望看到新功能的引入，請開啟一個新問題！一旦您提出問題，維護人員將決定下一步要做什麼，您應該**在開始編碼之前等待他們的答案**。 **專業提示**：如果您要提出錯誤問題，請務必寫下如何重現該錯誤的步驟！ 如何貢獻？ ----- 好的，我們找到了一個儲存庫，這是我們想要解決的問題，與維護人員進行了交談，並獲得了解決該問題的綠燈。最後讓我們開始編碼吧！ ### 1. 分叉倉庫 第一步是**分叉**儲存庫。這將**複製該專案**並將其新增至您的 GitHub 帳戶。  ### 2. 克隆倉庫 現在轉到您的儲存庫並找到分叉的儲存庫。點選**< > 程式碼**按鈕並選擇選項之一 (HTTPS / SSH / GitHub CLI)。  **複製框中的內容**。現在打開終端並將自己定位到要在本地儲存專案的位置。一旦您定位好自己，請在終端機中輸入以下命令： ``` git clone <paste the copied content> ``` 片刻之後，您的 PC 上就應該有該專案了！ ### 3. 建立新分支 現在，轉到本機資料夾並建立新分支。請務必查看專案的**CONTRIBUTE.md** ，看看維護者是否希望您遵循一些**分支命名**規則！ ### 4. 提交並推動您的更改 一旦準備好分支，您就可以開始更改程式碼庫。完成後，提交更改並將其推送到您的分叉存儲庫。如果儲存庫已就位，請務必遵循**提交訊息約定**（檢查**CONTRIBUTING.md** ）。 ### 5. 發起拉取請求 現在您已經推送了更改並希望將它們合併到主存儲庫，是時候建立拉取請求了！再次，您應該檢查**CONTRIBUTING.md**規則，看看維護者是否希望您**在建立 PR 時遵循命名約定**以及他們希望在描述中看到什麼。  ❗請務必將`base repository`設定為您衍生的原始儲存庫❗ 我建立了一個 PR，現在怎麼辦？ ---------------- 您對所做的更改感到滿意，並成功建立了對主儲存庫的拉取請求。現在怎麼辦？現在，你**等著吧**。 根據您的 PR 正在修復的問題的緊急程度以及維護人員的日程安排，您將不得不等待有人**審核**您的拉取請求。準備好解釋為什麼以及你做了什麼（如果你在 PR 描述中沒有做好），並在必要時**進行更改**。 不要以個人名義接受任何變更要求。你們所有人都是為了專案的進步而來到這裡，沒有人懷有惡意。**如果您不同意**審稿人的意見，**請告訴他們**！健康的討論從來都不是壞事。 為什麼分叉？ 🍴 -------- 您可能想知道為什麼我們必須分叉存儲庫。為什麼不直接克隆原始版本並在單獨的分支上工作？基本上，刪除#1 步驟，其餘的不是一樣嗎？ 好吧，您可以嘗試，但是一旦您推送更改，您就會發現您**沒有這樣做的授權**！透過分叉儲存庫，您將成為複製儲存庫的擁有者，並**有權更改程式碼庫**。這是一個簡潔的系統，可以確保只有原始維護者批准的變更才能通過。 去貢獻吧！ ----- 現在您已經掌握了這些訊息，您就可以開始在開源世界中留下自己的印記了！去幫助您已經聽說過和沒有聽說過的無數專案，並加入這個不斷發展的社區。我們將非常感謝您的幫助，我確信這一點😉 您知道有哪些開源專案帶有很多「第一期好」的標籤嗎？請在評論中分享！ --- 原文出處：https://dev.to/cyclops-ui/interested-in-contributing-to-open-source-heres-what-you-need-to-know-g1c
目錄 == - [介紹](#introduction) - [技術堆疊](#tech-stack) - [特徵](#features) - [設定 Next.js 應用程式](#step-1-setting-up-the-nextjs-application) - [安裝所需的套件](#step-2-installing-required-packages) - [設定 Redis 連接](#step-3-setting-up-redis-connection) - [配置 BullMQ 佇列](#step-4-configuring-bullmq-queue) - [Next.js 儀器設置](#step-5-nextjs-instrumentation-setup) - [設定 Bright Data 的抓取瀏覽器](#step-6-setting-up-bright-datas-scraping-browser) - [Bright Data 的抓取瀏覽器是什麼？](#what-is-bright-datas-scraping-browser) - [設定 Bright Data 抓取瀏覽器的步驟](#steps-to-set-up-bright-datas-scraping-browser) - [使用 Puppeteer 實作抓取邏輯](#implementing-the-scraping-logic-with-puppeteer) - [航班搜尋功能](#flight-search-feature) - [顯示航班搜尋結果](#displaying-flight-search-results) - [探索完整的指南和程式碼庫](#discover-the-complete-guide-and-codebase) - [在 YouTube 上觀看詳細說明](#watch-the-detailed-explanation-on-youtube) - [在 GitHub 上探索完整程式碼](#explore-the-full-code-on-github) - [結論](#conclusion) 介紹 == 在不斷發展的 Web 開發領域，有效收集、處理和顯示外部來源資料的能力變得越來越有價值。無論是市場研究、競爭分析或客戶洞察，網路抓取在釋放網路資料的巨大潛力方面都發揮著至關重要的作用。 這篇部落格文章介紹了建立強大的 Next.js 應用程式的綜合指南，該應用程式旨在從領先的旅行搜尋引擎之一 Kayak 抓取航班資料。透過利用 Next.js 的強大功能以及 BullMQ、Redis 和 Puppeteer 等現代技術。 技術堆疊 ==== - [Next.js](https://nextjs.org/docs) - [順風CSS](https://tailwindcss.com/docs) - [下一個介面](https://nextui.org/docs) - [健康）狀況](https://zustand.surge.sh/) - [條紋](https://stripe.com/docs) - [Bright Data 的抓取瀏覽器](https://brdta.com/kishansheth21) - [打字稿](https://www.typescriptlang.org/docs) - [雷迪斯](https://redis.io/documentation) - [BullMQ](https://docs.bullmq.io/) - [傀儡師](https://pptr.dev/) - [智威湯遜](https://jwt.io/introduction) - [阿克西奧斯](https://axios-http.com/docs/intro) - [PostgreSQL](https://www.postgresql.org/docs) - [棱鏡](https://www.prisma.io/docs) 特徵 == - 🚀 帶有 Tailwind CSS 的 Next.js 14 應用程式目錄 - 體驗由最新 Next.js 14 提供支援的時尚現代的 UI，並使用 Tailwind CSS 進行設計，以實現完美的外觀和感覺。 - 🔗 API 路由和伺服器操作 - 深入研究與 Next.js 14 的 API 路由和伺服器操作的無縫後端集成，確保高效的資料處理和伺服器端邏輯執行。 - 🕷 使用 Puppeteer Redis 和 BullMQ 進行抓取 - 利用 Puppeteer 的強大功能進行進階 Web 抓取，並使用 Redis 和 BullMQ 管理佇列和作業以實現強大的後端操作。 - 🔑 用於身份驗證和授權的 JWT 令牌 - 使用 JWT 令牌保護您的應用程式，為整個平台提供可靠的身份驗證和授權方法。 - 💳 支付網關 Stripe - 整合 Stripe 進行無縫支付處理，為預訂旅行、航班和飯店提供安全、輕鬆的交易。 - ✈️ 使用 Stripe 支付網關預訂旅行、航班和飯店 - 使用我們的 Stripe 支援的支付系統，讓您的旅遊預訂體驗變得輕鬆。 - 📊 從多個網站抓取即時資料 - 從多個來源抓取即時資料，保持領先，讓您的應用程式更新最新資訊。 - 💾 使用 Prisma 將抓取的資料儲存在 PostgreSQL 中 - 利用 PostgreSQL 和 Prisma 高效儲存和管理抓取的資料，確保可靠性和速度。 - 🔄 用於狀態管理的 Zustand - 透過 Zustand 簡化狀態邏輯並增強效能，在您的應用程式中享受流暢且可管理的狀態管理。 - 😈 該應用程式的最佳功能 - 使用 Bright Data 的抓取瀏覽器抓取不可抓取的資料。  Bright Data的抓取瀏覽器為我們提供了自動驗證碼解決功能，可以幫助我們抓取不可抓取的資料。 第 1 步：設定 Next.js 應用程式 --------------------- 1. **建立 Next.js 應用程式**：首先建立一個新的 Next.js 應用程式（如果您還沒有）。您可以透過在終端機中執行以下命令來完成此操作： ``` npx create-next-app@latest booking-app ``` 2. **導航到您的應用程式目錄**：變更為您新建立的應用程式目錄： ``` cd booking-app ``` 步驟2：安裝所需的軟體包 ------------ 您需要安裝多個軟體包，包括 Redis、BullMQ 和 Puppeteer Core。執行以下命令來安裝它們： ``` npm install ioredis bullmq puppeteer-core ``` - `ioredis`是 Node.js 的強大 Redis 用戶端，支援與 Redis 進行通訊。 - `bullmq`以 Redis 作為後端來管理作業和訊息佇列。 - `puppeteer-core`可讓您控制外部瀏覽器以進行抓取。 步驟3：設定Redis連接 ------------- 在適當的目錄（例如`lib/` ）中建立一個檔案（例如`redis.js` ）來配置 Redis 連線： ``` // lib/redis.js import Redis from 'ioredis'; // Use REDIS_URL from environment or fallback to localhost const REDIS_URL = process.env.REDIS_URL || 'redis://localhost:6379'; const connection = new Redis(REDIS_URL); export { connection }; ``` 步驟4：配置BullMQ佇列 -------------- 透過在 Redis 配置所在的相同目錄中建立另一個檔案（例如， `queue.js` ）來設定 BullMQ 佇列： ``` // lib/queue.js import { Queue } from 'bullmq'; import { connection } from './redis'; export const importQueue = new Queue('importQueue', { connection, defaultJobOptions: { attempts: 2, backoff: { type: 'exponential', delay: 5000, }, }, }); ``` 第 5 步：Next.js 儀器設置 ------------------ Next.js 允許偵測，可以在 Next.js 配置中啟用。您還需要建立一個用於作業處理的工作文件。 1.**在 Next.js 中啟用 Instrumentation** ：將以下內容新增至`next.config.js`以啟用 Instrumentation： ``` // next.config.js module.exports = { experimental: { instrumentationHook: true, }, }; ``` 2.**建立用於作業處理的 Worker** ：在您的應用程式中，建立一個檔案 ( `instrumentation.js` ) 來處理作業處理。該工作人員將使用 Puppeteer 來執行抓取任務： ``` // instrumentation.js export const register = async () => { if (process.env.NEXT_RUNTIME === 'nodejs') { const { Worker } = await import('bullmq'); const puppeteer = await import('puppeteer-core'); const { connection } = await import('./lib/redis'); const { importQueue } = await import('./lib/queue'); new Worker('importQueue', async (job) => { // Job processing logic with Puppeteer goes here }, { connection, concurrency: 10, removeOnComplete: { count: 1000 }, removeOnFail: { count: 5000 }, }); } }; ``` 第 6 步：設定 Bright Data 的抓取瀏覽器 --------------------------- 在設定 Bright 資料抓取瀏覽器之前，我們先來談談什麼是抓取瀏覽器。 ### Bright Data 的抓取瀏覽器是什麼？ Bright Data 的抓取瀏覽器是一款用於自動網頁抓取的尖端工具，旨在與 Puppeteer、Playwright 和 Selenium 無縫整合。它提供了一套網站解鎖功能，包括代理輪換、驗證碼解決等，以提高抓取效率。它非常適合需要互動的複雜網頁抓取，透過在 Bright Data 基礎架構上託管無限的瀏覽器會話來實現可擴展性。如欲了解更多詳情，請造訪[光明資料](https://brdta.com/kishansheth21)。  <a id="steps-to-set-up-bright-datas-scraping-browser"></a> #### 第 1 步：導覽至 Bright Data 網站 首先造訪[Brightdata.com](https://brdta.com/kishansheth21) 。這是您存取 Bright Data 提供的豐富網頁抓取資源和工具的入口。  #### 第 2 步：建立帳戶 造訪 Bright Data 網站後，註冊並建立一個新帳戶。系統將提示您輸入基本資訊以啟動並執行您的帳戶。  #### 第 3 步：選擇您的產品 在產品選擇頁面上，尋找代理商和抓取基礎設施產品。本產品專為滿足您的網路抓取需求而設計，提供強大的資料擷取工具和功能。  #### 第 4 步：新增代理 在「代理程式和抓取基礎設施」頁面中，您會找到一個「新增按鈕」。點擊此按鈕開始將新的抓取瀏覽器新增到您的工具包的過程。  #### 第五步：選擇抓取瀏覽器 將出現一個下拉列表，您應該從中選擇抓取瀏覽器選項。這告訴 Bright Data 您打算設定一個新的抓取瀏覽器環境。  #### 第 6 步：為您的抓取瀏覽器命名 為您的新抓取瀏覽器指定一個唯一的名稱。這有助於稍後辨識和管理它，特別是如果您計劃對不同的抓取專案使用多個瀏覽器。  #### 步驟7：新增瀏覽器 命名您的瀏覽器後，按一下「新增」按鈕。此操作完成了新的抓取瀏覽器的建立。  #### 第 8 步：查看您的抓取瀏覽器詳細訊息 新增抓取瀏覽器後，您將被導向到一個頁面，您可以在其中查看新建立的抓取瀏覽器的所有詳細資訊。這些資訊對於整合和使用至關重要。  #### 第 9 步：存取程式碼和整合範例 尋找“查看程式碼和整合範例”按鈕。點擊此按鈕將為您提供如何跨多種程式語言和程式庫整合和使用抓取瀏覽器的全面視圖。對於希望自訂抓取設定的開發人員來說，此資源非常寶貴。  #### 第 10 步：整合您的抓取瀏覽器 最後，複製 SRS\_WS\_ENDPOINT 變數。這是一條關鍵訊息，您需要將其整合到原始程式碼中，以便您的應用程式能夠與您剛剛設定的抓取瀏覽器進行通訊。  透過遵循這些詳細步驟，您已在 Bright Data 平台中成功建立了一個抓取瀏覽器，準備好處理您的網頁抓取任務。請記住，Bright Data 提供廣泛的文件和支持，幫助您最大限度地提高抓取專案的效率和效果。無論您是在收集市場情報、進行研究還是監控競爭格局，新設定的抓取瀏覽器都是資料收集庫中的強大工具。 ### 第 7 步：使用 Puppeteer 實作抓取邏輯 從我們上次設定用於抓取航班資料的 Next.js 應用程式的地方開始，下一個關鍵步驟是實現實際的抓取邏輯。此過程涉及利用 Puppeteer 連接到瀏覽器實例、導航到目標 URL（在我們的範例中為 Kayak）並抓取必要的飛行資料。提供的程式碼片段概述了實現此目標的複雜方法，與我們先前建立的 BullMQ 工作設定無縫整合。讓我們分解這個抓取邏輯的元件，並了解它如何適合我們的應用程式。 #### 建立與瀏覽器的連接 我們抓取過程的第一步是透過 Puppeteer 建立與瀏覽器的連線。這是透過利用`puppeteer.connect`方法來完成的，該方法使用 WebSocket 端點 ( `SBR_WS_ENDPOINT` ) 連接到現有的瀏覽器實例。此環境變數應設定為您正在使用的抓取瀏覽器服務的 WebSocket URL，例如 Bright Data： ``` const browser = await puppeteer.connect({ browserWSEndpoint: SBR_WS_ENDPOINT, }); ``` #### 開啟新頁面並導航到目標 URL 連線後，我們在瀏覽器中建立一個新頁面並導航到作業資料中指定的目標 URL。此 URL 是我們打算從中抓取航班資料的特定 Kayak 搜尋結果頁面： ``` const page = await browser.newPage(); await page.goto(job.data.url); ``` #### 抓取航班資料 我們邏輯的核心在於從頁面中抓取航班資料。我們透過使用`page.evaluate`來實現這一點，這是一種 Puppeteer 方法，允許我們在瀏覽器上下文中執行腳本。在此腳本中，我們等待必要的元素加載，然後繼續收集航班資訊： - **Flight Selector** ：我們以`.nrc6-wrapper`類別為目標元素，其中包含航班詳細資訊。 - **資料擷取**：對於每個航班元素，我們提取詳細訊息，例如航空公司徽標、出發和到達時間、航班持續時間、航空公司名稱和價格。出發和到達時間經過清理，以刪除最後不必要的數值，確保我們準確地捕捉時間。 - **價格處理**：價格在刪除所有非數字字元後提取為整數，確保其可用於數值運算或比較。 擷取的資料被建構成飛行物件陣列，每個物件都包含上述詳細資訊： ``` const scrappedFlights = await page.evaluate(async () => { // Data extraction logic const flights = []; // Process each flight element // ... return flights; }); ``` #### 錯誤處理和清理 我們的抓取邏輯被包裝在一個 try-catch 區塊中，以在抓取過程中優雅地處理任何潛在的錯誤。無論結果如何，我們都會確保瀏覽器在finally區塊中正確關閉，從而保持資源效率並防止潛在的記憶體洩漏： ``` try { // Scraping logic } catch (error) { console.log({ error }); } finally { await browser.close(); console.log("Browser closed successfully."); } ``` #### 整個程式碼 ``` const SBR_WS_ENDPOINT = process.env.SBR_WS_ENDPOINT; export const register = async () => { if (process.env.NEXT_RUNTIME === "nodejs") { const { Worker } = await import("bullmq"); const puppeteer = await import("puppeteer"); const { connection } = await import("./lib/redis"); const { importQueue } = await import("./lib/queue"); new Worker( "importQueue", async (job) => { const browser = await puppeteer.connect({ browserWSEndpoint: SBR_WS_ENDPOINT, }); try { const page = await browser.newPage(); console.log("in flight scraping"); console.log("Connected! Navigating to " + job.data.url); await page.goto(job.data.url); console.log("Navigated! Scraping page content..."); const scrappedFlights = await page.evaluate(async () => { await new Promise((resolve) => setTimeout(resolve, 5000)); const flights = []; const flightSelectors = document.querySelectorAll(".nrc6-wrapper"); flightSelectors.forEach((flightElement) => { const airlineLogo = flightElement.querySelector("img")?.src || ""; const [rawDepartureTime, rawArrivalTime] = ( flightElement.querySelector(".vmXl")?.innerText || "" ).split(" – "); // Function to extract time and remove numeric values at the end const extractTime = (rawTime: string): string => { const timeWithoutNumbers = rawTime .replace(/[0-9+\s]+$/, "") .trim(); return timeWithoutNumbers; }; const departureTime = extractTime(rawDepartureTime); const arrivalTime = extractTime(rawArrivalTime); const flightDuration = ( flightElement.querySelector(".xdW8")?.children[0]?.innerText || "" ).trim(); const airlineName = ( flightElement.querySelector(".VY2U")?.children[1]?.innerText || "" ).trim(); // Extract price const price = parseInt( ( flightElement.querySelector(".f8F1-price-text")?.innerText || "" ) .replace(/[^\d]/g, "") .trim(), 10 ); flights.push({ airlineLogo, departureTime, arrivalTime, flightDuration, airlineName, price, }); }); return flights; }); } catch (error) { console.log({ error }); } finally { await browser.close(); console.log("Browser closed successfully."); } }, { connection, concurrency: 10, removeOnComplete: { count: 1000 }, removeOnFail: { count: 5000 }, } ); } }; ``` ### 步驟8：航班搜尋功能 基於我們的航班資料抓取功能，讓我們將全面的航班搜尋功能整合到我們的 Next.js 應用程式中。此功能將為使用者提供一個動態介面，透過指定出發地、目的地和日期來搜尋航班。利用強大的 Next.js 框架以及現代 UI 庫和狀態管理，我們建立了引人入勝且響應迅速的航班搜尋體驗。 #### 航班搜尋功能的關鍵組成部分 1. **動態城市選擇**：此功能包括來源和目的地輸入的自動完成功能，由預先定義的城市機場程式碼清單提供支援。當使用者輸入時，應用程式會過濾並顯示匹配的城市，透過更輕鬆地尋找和選擇機場來增強用戶體驗。 2. **日期選擇**：使用者可以透過日期輸入選擇預期的航班日期，為規劃旅行提供彈性。 3. **抓取狀態監控**：啟動抓取作業後，應用程式透過定期 API 呼叫來監控作業的狀態。這種非同步檢查允許應用程式使用抓取過程的狀態更新 UI，確保使用者了解進度和結果。 #### 航班搜尋元件的完整程式碼 ``` "use client"; import { useAppStore } from "@/store"; import { USER_API_ROUTES } from "@/utils/api-routes"; import { cityAirportCode } from "@/utils/city-airport-codes"; import { Button, Input, Listbox, ListboxItem } from "@nextui-org/react"; import axios from "axios"; import Image from "next/image"; import { useRouter } from "next/navigation"; import React, { useEffect, useRef, useState } from "react"; import { FaCalendarAlt, FaSearch } from "react-icons/fa"; const SearchFlights = () => { const router = useRouter(); const { setScraping, setScrapingType, setScrappedFlights } = useAppStore(); const [loadingJobId, setLoadingJobId] = useState<number | undefined>(undefined); const [source, setSource] = useState(""); const [sourceOptions, setSourceOptions] = useState< { city: string; code: string; }[] >([]); const [destination, setDestination] = useState(""); const [destinationOptions, setDestinationOptions] = useState< { city: string; code: string; }[] >([]); const [flightDate, setFlightDate] = useState(() => { const today = new Date(); return today.toISOString().split("T")[0]; }); const handleSourceChange = (query: string) => { const matchingCities = Object.entries(cityAirportCode) .filter(([, city]) => city.toLowerCase().includes(query.toLowerCase())) .map(([code, city]) => ({ code, city })) .splice(0, 5); setSourceOptions(matchingCities); }; const destinationChange = (query: string) => { const matchingCities = Object.entries(cityAirportCode) .filter(([, city]) => city.toLowerCase().includes(query.toLowerCase())) .map(([code, city]) => ({ code, city })) .splice(0, 5); setDestinationOptions(matchingCities); }; const startScraping = async () => { if (source && destination && flightDate) { const data = await axios.get(`${USER_API_ROUTES.FLIGHT_SCRAPE}?source=${source}&destination=${destination}&date=${flightDate}`); if (data.data.id) { setLoadingJobId(data.data.id); setScraping(true); setScrapingType("flight"); } } }; useEffect(() => { if (loadingJobId) { const checkIfJobCompleted = async () => { try { const response = await axios.get(`${USER_API_ROUTES.FLIGHT_SCRAPE_STATUS}?jobId=${loadingJobId}`); if (response.data.status) { set ScrappedFlights(response.data.flights); clearInterval(jobIntervalRef.current); setScraping(false); setScrapingType(undefined); router.push(`/flights?data=${flightDate}`); } } catch (error) { console.log(error); } }; jobIntervalRef.current = setInterval(checkIfJobCompleted, 3000); } return () => clearInterval(jobIntervalRef.current); }, [loadingJobId]); return ( <div className="h-[90vh] flex items-center justify-center"> <div className="absolute left-0 top-0 h-[100vh] w-[100vw] max-w-[100vw] overflow-hidden overflow-x-hidden"> <Image src="/flight-search.png" fill alt="Search" /> </div> <div className="absolute h-[50vh] w-[60vw] flex flex-col gap-5"> {/* UI and functionality for flight search */} </div> </div> ); }; export default SearchFlights; ``` ### 步驟9：航班搜尋頁面UI  ### 顯示航班搜尋結果 成功抓取飛行資料後，下一個關鍵步驟是以使用者友善的方式將這些結果呈現給使用者。 Next.js 應用程式中的 Flights 元件就是為此目的而設計的。 ``` "use client"; import { useAppStore } from "@/store"; import { USER_API_ROUTES } from "@/utils/api-routes"; import { Button } from "@nextui-org/react"; import axios from "axios"; import Image from "next/image"; import { useRouter, useSearchParams } from "next/navigation"; import React from "react"; import { FaChevronLeft } from "react-icons/fa"; import { MdOutlineFlight } from "react-icons/md"; const Flights = () => { const router = useRouter(); const searchParams = useSearchParams(); const date = searchParams.get("date"); const { scrappedFlights, userInfo } = useAppStore(); const getRandomNumber = () => Math.floor(Math.random() * 41); const bookFLight = async (flightId: number) => {}; return ( <div className="m-10 px-[20vw] min-h-[80vh]"> <Button className="my-5" variant="shadow" color="primary" size="lg" onClick={() => router.push("/search-flights")} > <FaChevronLeft /> Go Back </Button> <div className="flex-col flex gap-5"> {scrappedFlights.length === 0 && ( <div className="flex items-center justify-center py-5 px-10 mt-10 rounded-lg text-red-500 bg-red-100 font-medium"> No Flights found. </div> )} {scrappedFlights.map((flight: any) => { const seatsLeft = getRandomNumber(); return ( <div key={flight.id} className="grid grid-cols-12 border bg-gray-200 rounded-xl font-medium drop-shadow-md" > <div className="col-span-9 bg-white rounded-l-xl p-10 flex flex-col gap-5"> <div className="grid grid-cols-4 gap-4"> <div className="flex flex-col gap-3 font-medium"> <div> <div className="relative w-20 h-16"> <Image src={flight.logo} alt="airline name" fill /> </div> </div> <div>{flight.name}</div> </div> <div className="col-span-3 flex justify-between"> <div className="flex flex-col gap-2"> <div className="text-blue-600">From</div> <div> <span className="text-3xl"> <strong>{flight.departureTime}</strong> </span> </div> <div>{flight.from}</div> </div> <div className="flex flex-col items-center justify-center gap-2"> <div className="bg-violet-100 w-max p-3 text-4xl text-blue-600 rounded-full"> <MdOutlineFlight /> </div> <div> <span className="text-lg"> <strong>Non-stop</strong> </span> </div> <div>{flight.duration}</div> </div> <div className="flex flex-col gap-2"> <div className="text-blue-600">To</div> <div> <span className="text-3xl"> <strong>{flight.arrivalTime}</strong> </span> </div> <div>{flight.to}</div> </div> </div> </div> <div className="flex justify-center gap-10 bg-violet-100 p-3 rounded-lg"> <div className="flex"> <span>Airplane </span> <span className="text-blue-600 font-semibold"> Boeing 787 </span> </div> <div className="flex"> <span>Travel Class: </span> <span className="text-blue-600 font-semibold">Economy</span> </div> </div> <div className="flex justify-between font-medium"> <div> Refundable <span className="text-blue-600"> $5 ecash</span> </div> <div className={`${ seatsLeft > 20 ? "text-green-500" : "text-red-500" }`} > Only {seatsLeft} Seats Left </div> <div className="cursor-pointer">Flight Details</div> </div> </div> <div className="col-span-3 bg-violet-100 rounded-r-xl h-full flex flex-col items-center justify-center gap-5"> <div> <div> <span className="line-through font-light"> ${flight.price + 140} </span> </div> <div className="flex items-center gap-2"> <span className="text-5xl font-bold">${flight.price}</span> <span className="text-blue-600">20% OFF</span> </div> </div> <Button variant="ghost" radius="full" size="lg" color="primary" onClick={() => { if (userInfo) bookFLight(flight.id); }} > {userInfo ? "Book Now" : "Login to Book"} </Button> </div> </div> ); })} </div> </div> ); }; export default Flights; ``` #### 航班搜尋結果  ### 探索完整的指南和程式碼庫 上面共享的部分和程式碼片段僅代表使用 Next.js 建立強大的航班資料抓取和搜尋應用程式所需的完整功能和程式碼的一小部分。為了掌握這個專案的全部內容，包括高級功能、優化和最佳實踐，我邀請您更深入地研究我的線上綜合資源。 #### 在 YouTube 上觀看詳細說明 有關引導您完成此應用程式的開發過程、編碼細微差別和功能的逐步影片指南，請觀看我的 YouTube 影片。本教程旨在讓您更深入地了解這些概念，讓您按照自己的步調進行操作並獲得對 Next.js 應用程式開發的寶貴見解。 https://www.youtube.com/watch?v=ZWVhk0fxHM0 #### 在 GitHub 上探索完整程式碼 如果您渴望探索完整的程式碼，請造訪我的 GitHub 儲存庫。在那裡，您將找到完整的程式碼庫，包括讓該應用程式在您自己的電腦上執行所需的所有元件、實用程式和設定說明。 https://github.com/koolkishan/nextjs-travel-planner ### 結論 使用 Next.js 建立飛行資料抓取和搜尋工具等綜合應用程式展示了現代 Web 開發工具和框架的強大功能和多功能性。無論您是希望提高技能的經驗豐富的開發人員，還是渴望深入 Web 開發的初學者，這些資源都是為您的旅程量身定制的。在 YouTube 上觀看詳細教程，在 GitHub 上探索完整程式碼，並加入對話以增強您的開發專業知識並為充滿活力的開發者社群做出貢獻。 --- 原文出處：https://dev.to/kishansheth/nextjs-14-booking-app-with-live-data-scraping-using-scraping-browser-610
如果您嘗試在 PC 上使用終端，我對您的痛苦表示歉意。以下是一些可以提高您的工作流程的最佳終端模擬器： ### [1.Cmder](https://cmder.net//)  [Cmder](https://cmder.net//)是一款便攜式控制台模擬器，基於已經流行的[Conemu](https://conemu.github.io/)建置； Conemu 也值得一試，因為它可以作為 Cmder 的替代品。 Cmders網站對此解釋得非常完美： > 將 cmder 更多地視為一個軟體包，而不是一個單獨的應用程式。所有的魔力都是透過 ConEmu 發生的。透過[Clink](https://mridgers.github.io/clink/)的增強。 儘管 Cmder 有時會出現速度問題（儘管建議它是便攜式的），但它仍然是一個很好的基本控制台模擬器，可以用來實現您的目標。 ### [2.Hyper.is](https://hyper.is/)  [Hyper](https://hyper.is/)是一款時尚的終端，可在 PC 和 MAC 上使用，並且在主題、插件和 shell 方面是完全可自訂的。由於我在安裝[zsh shell](https://github.com/robbyrussell/oh-my-zsh)時遇到了一些錯誤，因此在開發方面似乎仍然有很多工作要做。不管怎樣，它都是一個值得研究的出色的可擴展終端。 （注意：如果您想選擇 Pokemon 主題，可以[在這裡獲取！](https://github.com/klaussinani/hyper-pokemon) ） ### [3. terminus](https://eugeny.github.io/terminus/)  「現代的航站」是總站的口號。該終端看起來類似於開發環境，它帶有分割窗格、完全可配置的快捷方式、選項卡以及對所有主要 shell 的支援。這個航站樓仍然是新的，接下來會發生什麼將會令人興奮。 ### [4. FluentTerminal](https://github.com/felixse/FluentTerminal)  適用於PowerShell、CMD、WSL 或自訂shell 的終端，甚至可以從iTerm 獲取主題，並具有可編輯的鍵綁定和快速可調整的設置，[Fluent](https://github.com/felixse/FluentTerminal) 絕對值得一試。 ### [5. alacritty](https://github.com/jwilm/alacritty)  這個有點爭議。 Alacritty 聲稱自己是「現有最快的終端模擬器」。雖然這[可能不完全正確，](https://news.ycombinator.com/item?id=16936181)但許多用戶報告使用 Alacritty 時速度很快，但使用速度很低。因此，儘管它可能不適合所有人，但它也許能夠解決您在終端上遇到的一些滯後/撕裂問題。 這篇文章是否有幫助或想要加入一些內容/提出問題？請隨意 [connect](https://dev.to/connect) 並[關注](https://dev.to/adnanmostafa)以了解更多資訊或在下面發表評論！ --- 原文出處：https://dev.to/adnanmostafa/the-best-free-standalone-terminals-for-windows-2019-kmj
大家都怎麼啦！ 過去幾個月我一直在研究 Rust，並且總是試圖接近 Laravel 環境中的實際堆疊。 對於我來說，作為一名 PHP 開發人員，跳入 Rust 確實是一項艱鉅的任務，因為我以前從未接觸過函數式編程，但是我找到了一種方法讓這變得「更容易」。 銹據我所知 ----- 整個生態系統由不同的套件組成，您應該根據需要加入它，這與 Laravel 不同，Laravel 圍繞框架有一個非常強大的環境。 所以我的第一印像是我必須學習如何使用基礎包： - 多滕維 - 時空 - 時間 - Uuid - 等等。 但是當涉及到 Web 開發（主要是 API）時，您必須從眾多現有框架中選擇一個。喜歡： - Actix（目前使用） - 阿克蘇姆（評估中） - Rocket（人們總是告訴我不要使用它，仍然不知道為什麼） 而且它們都沒有 Laravel 那種固執己見的“結構”，所以我決定建立我的。 Rust 中的 Laravel --------------- 我為什麼要談 Laravel？因為它為我們提供的“MVC”結構對於使用 Rust Web 的小型專案來說足夠優雅。 當我使用固定的 Laravel 框架編寫 Rust 程式碼時，事情開始變得有意義。這是我正在談論的內容的結構： ``` ./src ├── app.rs ├── config.rs ├── http │ ├── controllers │ │ ├── leaderboard_controller.rs │ │ ├── mod.rs │ │ └── submissions_controller.rs │ ├── mod.rs │ └── requests │ ├── leaderboard_request.rs │ ├── mod.rs │ └── submission_request.rs ├── main.rs ├── models │ ├── leaderboard.rs │ ├── mod.rs │ └── submission.rs └── repositories ├── leaderboard_repository.rs ├── mod.rs └── submission_repository.rs ``` 該專案目前正在使用中： - [阿克泰克斯](https://actix.rs/docs/) - [卡律布狄斯 ORM](https://github.com/nodecosmos/charybdis) 你可以在這個[Pull Request](https://github.com/DanielHe4rt/leaderboard-rust/pull/1)中檢查我的混亂情況 問題是：在使用 Rust 時遵循這個想法會是一件好事嗎？簡單性和良好的維護結構是我在專案中一直追求的目標。 另外，我正在考慮寫一些關於我的流程如何從 PHP 遷移到 Rust 的系列文章，您有興趣閱讀類似的內容嗎？ 希望在這裡看到您的想法，謝謝！ --- 原文出處：https://dev.to/danielhe4rt/laravel-inside-rust-i-have-a-reason-for-that-ke3
https://github.com/meemknight/memGrab 未來如果學C++第一件事情就是學一下修改遊戲記憶體 寫個小外掛! 之前我記得cheat engine下載好像有毒 安全的繁中檔我好像也沒有備份起來 逛到這個功能看起來差不多 如果有需求應該可以擋一下 而且還可以順便透過C去理解其中運作原理 貼在這邊，也許有興趣學C的人會剛好看到，可以來研究，未來也可以分享!!
*ESLINT* ：你有沒有想過ESLINT 是什麼，當我第一次聽說ESLINT 時，我很好奇它到底是怎麼回事，從那時起我就一直在我的專案中使用它，儘管一開始我錯誤地使用了它，那就是為什麼我發布這篇文章是為了讓人們能夠正確理解。但在深入探討之前，讓我先快速解釋一下什麼是 ESLINT 和 VS Code。 **ESLINT**是用於 Javascript 和 JSX 的可插入 linting 實用程序，它有助於發現可能的錯誤。 **VS Code**是頂級的開發編輯器之一，它由 Microsoft 開發和維護，它有助於提高生產力，並且還具有許多功能，我要強調的功能之一是擴充。擴充功能是 VS Code 中的外部套件，可讓您擴展編輯器的功能 你可以從他們的官方網站下載 VS Code [VS Code Download](https://code.visualstudio.com/) **注意：***我不會深入研究 VS Code。本文中有關 VS Code 的所有內容都只與 ESLINT 相關*。 **腳步**： - 建立一個 JavaScript 專案 - 在 VS Code 編輯器中安裝 eslint 作為擴展 - 使用 npm 將 eslint 安裝為全域包 - 在您的 javascript 專案中初始化 eslint - 修改專案中的 eslint 設定檔。 讓我們使用`npm init --yes`建立一個簡單的 javascript 專案  操作成功後，它將建立一個*package.json*文件，該文件將管理我們專案的所有配置。 讓我們嘗試在 VS Code 編輯器上安裝 ESLINT 擴充  一旦我們在 VS Code 編輯器上安裝了 eslint 擴展，然後使用下面的程式碼透過 npm 將 eslint 安裝為全域包 ``` npm install eslint -g ``` 您需要在專案中初始化 eslint，以便可以利用 eslint 的強大功能。從您的根專案輸入以下程式碼來初始化 eslint ``` eslint --init ``` 在初始化期間 eslint 會問你一些問題，更像是設定你的設定檔。 - **您想如何使用 ESLint？** ``` * __To check syntax only__ => it helps you correct your syntax and make sure it conform to standard. ``` ``` * __To check syntax and find problems__ => to help you check for syntax correctness and also help to find any problems in your code base ``` ``` * __To check syntax, find problems, and enforce code style___ => to help you check for syntax, find problem and enforce style, enforcing style means to conforms to a particular coding standard such as Airbnb, Google and other Standard coding style. But I always go for the last option the one with syntax, find problems and enforce code style ``` - **您的專案使用什麼類型的模組？** ``` * __Javascript module (import/export)__ => if your project has babel installed then you definitely need to choose this option. If you are working on a project such as React, Vue, Angular e.t.c they all use babel so you need choose this option. ``` ``` * __CommonJS (require/exports)__ => this option is meant for commonJS that has nothing to do with babel, maybe your nodejs project and any other javascript project ``` - **您的專案使用哪個框架？** ``` * __React__ => if you are using react in/for your project then this option is for you ``` ``` * __Vue__ => if you are using Vue in/for your project then this option is for you ``` ``` * __None of these__ => if you are using neither React or Vue in your project choose this option ``` - **你的程式碼在哪裡執行？** ``` * __Browser__ => if your project runs on browser e.g React, Angular, Vue e.t.c then go for this option ``` ``` * __Node__ => if your project is a node based then gladly choose this option ``` - **您希望如何為您的專案定義風格？** ``` * __Use a popular style guide__ => This allows you to choose from set of popular style such as Airbnb,Standard and Google style guide, it is advisable to choose this option in order for you to follow popular and most used style guide and i will be choosen this option in this post. ``` ``` * Answer questions about your style: _This is for custom style guide_ ``` ``` * Inspect your JavaScript file(s).: _custom style guide_ ``` - **您希望設定檔採用什麼格式？** ``` * __Javascript__ => whether you want your eslint config file to be in *.js* file ``` ``` * __YAML__ => whether you want your eslint config file to be in *.yaml* file ``` ``` * __JSON__ => whether you want your eslint config file to be in *.json* file ``` 您可以選擇此部分中的任何選項 選擇首選設定檔類型後，它將提示您安裝所有必要的依賴項。成功安裝所有必要的依賴項後，它將產生一個帶有“.eslintrc”.“js/json/yaml”的設定檔。 **如下所示的設定檔範例**  下面是一個小動畫圖像，顯示 VS Code 如何與 eslint 配合使用來通知您 javascript 專案中的錯誤  **在專案中設定 ESLINT 規則** 在專案中定義 ESLINT 規則會告知 eslint 您要新增或刪除的規則類型。您可以在設定檔的規則部分修改/設定規則 要設定的規則範例是 ``` "rules" : { no-console: 0; no-empty: 0; no-irregular-whitespace:0; } ``` 您可以定義盡可能多的規則，您可以在其官方文件[ESLINT Rules Documentation](https://eslint.org/docs/rules/)上閱讀有關 ESLINT 規則的更多訊息 最後，我將向您展示如何將 eslint 連結到 javascript 專案編譯器/轉譯器 以下步驟 - 前往`package.json`文件，在文件的腳本段中加入以下內容 ``` script:{ "lint":"eslint" } ``` **注意：** *“lint”只是一個普通單詞，您可以使用任何您喜歡的單詞* 然後在你的根專案中你可以執行你的 linting 腳本 ``` npm run lint ``` > ESLINT 有助於提高工作效率，根據標準編寫程式碼，並在您的程式碼庫違反樣式指南規則時標記錯誤。透過這篇文章，您應該能夠將 ESLINT 整合到您的 Javascript 專案中。 --- 原文出處：https://dev.to/devdammak/setting-up-eslint-in-your-javascript-project-with-vs-code-2amf
您曾經遇到過非常複雜的程式設計問題嗎？您可能可以寫出邏輯，但不太確定應該使用的語法？編寫偽程式碼是一個很好的起點。 這是什麼 ---- 偽程式碼是一種“語言”，您可以在其中編寫所有編碼邏輯，而無需編寫一行特定於語言的程式碼。在演算法研究中，尤其是機器學習演算法中，你經常會看到這種情況。這並不意味著您不能將其用於 Web 開發。 為什麼你會使用它 -------- 有些專案非常龐大，如果您不花時間編寫一些偽程式碼，您最終可能會迷失在大量已實現的程式碼中。當您編寫一些偽程式碼時，它讓您有機會真正思考潛在的問題。您可以查看純邏輯和程式流程，而不必擔心程式碼如何運作。 在開始輸入真實程式碼之前編寫偽程式碼也將幫助您更快地完成專案。將其視為藍圖。您知道一切需要去哪裡以及一切如何協同工作。因此，當您進入實際的建造階段時，您無需考慮太多，因為您已經考慮過需要做什麼。 最好的部分是偽程式碼不依賴任何程式語言。您剛剛寫出的邏輯可以被任何人採用並翻譯成他們選擇的語言。它使您可以自由地重複使用和改進您正在建立的應用程式的體系結構。 偽程式碼更微妙的用途之一是與其他人共享它。有時，您會有一個可以在多個專案中使用的特定邏輯，但它們都採用不同的程式語言。當您擁有可用的偽程式碼時，您可以將其提供給其他程式設計師，他們可以用他們需要的任何語言編寫該邏輯。 另一個很棒的功能是您可以以任何您喜歡的格式編寫偽程式碼。您可以使用學術格式。它的結構和細節令人難以置信，但往往涉及大量數學知識。或者，您可以寫出您希望程式碼執行的操作的簡單概述。 怎麼寫 --- 這是我在一篇學術論文中寫的一些偽程式碼的範例：  我將是第一個承認這對 Web 開發來說可能有點大材小用的人。如果您發現自己使用 LaTex 編寫偽程式碼，則可能會使其變得比您需要的更複雜。很可能在 Word 甚至記事本中快速寫下一些內容就足夠了。 以下是我為我的一個 Web 開發專案編寫的一些簡單偽程式碼的範例： ``` IF userlogin = true API call to get user data Assign data to variables Re-route user to dashboard ELSEIF userlogin failed more than 3 times Don't allow more attempts Send user notification email Re-route user to home page ELSE Log bad login attempt Show error message Clear login form ``` 您不必對偽程式碼掌握太多技術，但通常您可以包含的細節越多，編寫實際程式碼就越容易。想像一下你正在為你的程式寫一個大綱。它讓您有機會真正思考您想要完成的任務，並且可以準確地看到所有程式碼是如何組合在一起的。 使用偽程式碼需要關注的主要內容是： - 程式的邏輯流程 - 程序中複雜部分的詳細訊息 - 一致的格式 除了一些硬核思考之外，編寫偽程式碼其實並不需要太多。當您編寫它時，您將開始看到可以加入更多細節的地方或可以刪除一些細節的地方。請記住，這主要是供您使用，因此請以對您有意義的方式編寫。 就我個人而言，我喜歡偽程式碼。當我開始輸入真正的程式碼時，它可以幫助我保持思路清晰。當您規劃好所有邏輯後，您就有更多時間來試驗效能和最佳化。最重要的是，當您深入程式碼編寫時，您不必費力思考（是的，有計劃的懶惰）。 你怎麼認為？您認為偽程式碼值得花時間還是您寧願直接跳入程式碼？ --- 嘿！你應該在 Twitter 上關注我：https://twitter.com/FlippedCoding --- 原文出處：https://dev.to/flippedcoding/how-to-write-pseudo-code-2jfe
## 前情提要 是這樣的，最近研究逆向，其實研究很久了XD 常常看到網站上的mp4連結，會是一串位置，後面附上很多數值，類似token或加密的東西： 舉例 https://某網站net/exp=1708705706~acl=%2Fbdf53323-8c58-41e9-8d85-00c7b9174e08%2F%2A~hmac=bb644cf702c45f8e70a3a61c6e0c8c8b6353d6b4e2ecf0f5e395f89fc57660c3/bdf53323-8c58-41e9-8d85-00c7b9174e08/parcel/video/c089253b.mp4 有些數值是固定的我知道，但看起來exp似乎是expire，感覺是cookie的有效時間， 數字上看起來也像是timeStamp(時間戳) 理論上我修改一下應該不會有問題才對？結果無法，假設我更改成1708703980 就會變成是Access Denied 看來是說這網址的所有參數都是固定的囉？ ## 深入研究 我嘗試關掉重開，第二次去看一下它發送的請求： https://某網站net/exp=1708707048~acl=%2Fbdf53323-8c58-41e9-8d85-00c7b9174e08%2F%2A~hmac=41582b98b6eaa767b327b060a358e63b082606777a83c5475ccdc4d49054151e/bdf53323-8c58-41e9-8d85-00c7b9174e08/parcel/video/27479ba9.mp4? 這就玄妙了，沒想到一切參數除了acl似乎沒有變化以外，居然連mp4前面的東西都變了 。 我這兩個是同一段影片才對，照理說應該要是固定的檔案名稱。 看來它應該是每次都有不同的加密去產生這樣的網址，後端再去作出驗證？ 而exp可能也不是我單純想像的，而是也像是一組密碼？
長話短說 ---- 在這個易於理解的教程中，您將學習如何在幾分鐘內建立自己的 MonkeyType CLI 版本。 😎 **您將學到什麼：✨** - 使用 Pythoncurses 模組建立具有**WPM**和**Accuracy**支援的強大打字 CLI 應用程式。 您準備好成為 CLI MonkeyTyper 了嗎？ 😉 無論這是您的第一個 CLI 應用程式還是第 n 個應用程式。請隨意跟隨。  --- 設定環境🙈 ----- > ℹ️不需要設定虛擬環境，我們不會使用任何外部相依性。 建立一個資料夾來保存專案的所有原始程式碼： ``` mkdir cli-monkeytype-python cd cli-monkeytype-python ``` 建立兩個新文件，我們將在其中編寫程式： ``` touch main.py typing_test.py ``` `main.py`檔案將作為我們應用程式的起點，而`typing_test.py`檔案將保存程式的所有邏輯。 > ℹ️對於Linux或Mac用戶，您不需要下載任何依賴項，我們將主要使用**curses** 、 **time**和**random**模組，這些模組都包含在Python標準庫中。 ⚠️**注意** > Windows 使用者可能必須安裝curses，因為它不包含在Windows 的Python 標準庫中。在繼續下一步之前，請確保已安裝它。 --- 讓我們來寫程式吧🐵 --------- > 💡 我們將在本節中研究應用程式的方法、大綱和實際編碼部分。 😵💫 ### 方法和概要👀 我們將在這裡採取不同的方法，而不是將所有程式碼都塞在`main`文件中。我們將把程式碼分成不同文件中的類別。 將有一個單獨的文件，其中包含一個負責封裝與打字測試相關的所有邏輯的類別。在主文件中，我們將呼叫此類的方法。聽起來，對吧？讓我們開始吧。 🚀 這是我們類別的骨架以及我們將要處理的所有方法。 ``` class TypingTest: def __init__(self, stdscr): pass def get_line_to_type(self): pass def display_wpm(self): pass def display_accuracy(self): pass def display_typed_chars(self): pass def display_details(self): pass def test_accuracy(self): pass def test_wpm(self): pass ``` 所有函數名稱都應該是不言自明的。如果您需要協助理解每個函數的作用，即使在查看了此大綱之後，為什麼還要閱讀這篇文章？只是開玩笑\*不是真的\*。 😏 > 🥱 這是一個適合初學者的應用程式。別擔心，一起編碼吧。 ### 真正的樂趣開始了！  我們將從導入模組並編寫`__init__`方法開始。這將初始化程式執行所需的所有術語。 ``` import curses import random import time class TypingTest: def __init__(self, stdscr): self.stdscr = stdscr self.to_type_text = self.get_line_to_type() self.user_typed_text = [] self.wpm = 0 self.start_time = time.time() # Initialize color pairs curses.init_pair(3, curses.COLOR_WHITE, curses.COLOR_BLACK) curses.init_pair(2, curses.COLOR_RED, curses.COLOR_BLACK) curses.init_pair(1, curses.COLOR_GREEN, curses.COLOR_BLACK) # --SNIP-- ``` `stdscr`用於控制終端螢幕，對於建立使用者可以看到其擊鍵的基於文字的使用者介面至關重要。 ⌨️ `get_line_to_type`方法取得一行文字供使用者鍵入。該文字儲存在`self.to_type_text`變數中。當他們鍵入時，他們輸入的字元將保存在`self.user_typed_text`清單中。我們使用列表是因為當使用者更正錯誤輸入的字元時，彈出最後一項會更容易。 初始每分鐘字數 (WPM) 分數設定為 0，我們記錄測驗的開始時間。我們也初始化了一些**顏色對**，根據它們是否正確來指示字元上的顏色。稍後，我們將根據使用者打字所需的時間來計算**WPM** 。 現在，新增以下功能的程式碼 > ℹ️ 確保在專案根目錄中建立一個名為`typing_texts.txt`的新文件，其中包含幾行文字。參考：[點這裡](https://github.com/shricodev/blogs/blob/main/cli-monkeytype-python/typing_texts.txt)。 ``` # --SNIP-- def get_line_to_type(self): with open("typing_texts.txt", "r", encoding="utf-8") as file: lines = file.readlines() return random.choice(lines).strip() def display_wpm(self): self.stdscr.addstr(1, 0, f"WPM: {self.wpm}", curses.color_pair(3)) def display_accuracy(self): self.stdscr.addstr( 2, 0, f"Accuracy: {self.test_accuracy()}%", curses.color_pair(3), ) def display_typed_chars(self): for i, char in enumerate(self.user_typed_text): correct_character = self.to_type_text[i] # Use color pair 1 if correct, else color pair 2. color = 1 if char == correct_character else 2 self.stdscr.addstr(0, i, char, curses.color_pair(color)) def display_details(self): self.stdscr.addstr(self.to_type_text) self.display_wpm() self.display_accuracy() self.display_typed_chars() # --SNIP-- ``` 讓我總結一下這些方法，它們非常簡單： 🎯 `get_line_to_type(self)` ：從名為「typing\_texts.txt」的檔案中擷取刪除了尾隨空格的隨機行。 🎯 `display_wpm(self)` ：當使用者鍵入時在螢幕上的第一行顯示 WPM。 🎯 `display_accuracy(self)` ：在螢幕上第 2 行顯示**準確率百分比。**準確率由我們即將編寫的`test_accuracy()`方法計算。 🎯 `display_typed_chars(self)` ：顯示使用者在螢幕上輸入的字符，突出顯示一個顏色對（顏色 1）中的正確字符和另一個顏色對（顏色 2）中的錯誤字符。 🎯 `display_details(self)` ：它本質上是一個輔助函數，幫助顯示上面所有顯示函數的內容。 好的，現在我們已經編寫了這些顯示方法，讓我們實現實際的邏輯來測試準確性和 WPM 本身。 新增以下程式碼行： ``` # --SNIP-- def test_accuracy(self): total_characters = min(len(self.user_typed_text), len(self.to_type_text)) # If there are no typed chars, show accuracy 0. if total_characters == 0: return 0.0 matching_characters = 0 for current_char, target_char in zip(self.user_typed_text, self.to_type_text): if current_char == target_char: matching_characters += 1 matching_percentage = (matching_characters / total_characters) * 100 return matching_percentage def test_wpm(self): # getkey method by default is blocking. # We do not want to wait until the user types each char to check WPM. # Else the entire logic will be faulty. self.stdscr.nodelay(True) while True: # Since we have nodelay = True, if not using max(), # users might end up with time.time() equal to start_time, # resulting in 0 and potentially causing a zero-divisible error in the below line. time_elapsed = max(time.time() - self.start_time, 1) # Considering the average word length in English is 5 characters self.wpm = round((len(self.user_typed_text) / (time_elapsed / 60)) / 5) self.stdscr.clear() self.display_details() self.stdscr.refresh() # Exit the loop when the user types in the total length of the text. if len(self.user_typed_text) == len(self.to_type_text): self.stdscr.nodelay(False) break # We have `nodelay = True`, so we don't want to wait for the keystroke. # If we do not get a key, it will throw an exception # in the below lines when accessing the key. try: key = self.stdscr.getkey() except Exception: continue # Check if the key is a single character before using ord() if isinstance(key, str) and len(key) == 1: if ord(key) == 27: # ASCII value for ESC break # If the user has not typed anything reset to the current time if not self.user_typed_text: self.start_time = time.time() if key in ("KEY_BACKSPACE", "\b", "\x7f"): if len(self.user_typed_text) > 0: self.user_typed_text.pop() elif len(self.user_typed_text) < len(self.to_type_text): self.user_typed_text.append(key) ``` 🎯 `test_accuracy(self)` ：透過將使用者輸入的字元與目標文字進行比較，計算並返回打字準確度（以百分比形式）。如果字元匹配，則將匹配字元的計數加1。最後，計算匹配的百分比。 🎯 `test_wpm(self)` ：計算每分鐘字數（WPM）並即時更新顯示。我們用一個**公式**來計算WPM，這不是我想出來的，我從網路複製的。它追蹤使用者輸入的內容，處理退格鍵，並在使用者完成輸入目標文字或按**ESC**時停止。 偉大的！這就是我們的**TypingTest**類別。 🎉 > ✅ 我們編寫程式碼的方式可以幫助我們輕鬆地將程式碼匯入到任何未來的專案中，並使維護變得更加容易。 是時候測試我們的實作了。 🙈 在`main.py`檔案中，加入以下程式碼行： ``` from curses import wrapper from typing_test import TypingTest def main(stdscr): stdscr.clear() stdscr.addstr("Welcome to the typing speed test") stdscr.addstr("\nPress any key to continue!") while True: typing_test = TypingTest(stdscr) stdscr.getkey() typing_test.test_wpm() stdscr.addstr( 3, 0, "Congratulations! You have completed the test! Press any key to continue...", ) stdscr.nodelay(False) key = stdscr.getkey() # Check if the key is a single character before using ord() if isinstance(key, str) and len(key) == 1: if ord(key) == 27: # ASCII value for ESC break if __name__ == "__main__": wrapper(main) ``` > 💡 注意：我們從curses `wrapper`方法內的main 函數，該函數處理curses 模組的初始化和清理。 在 main 中，我們建立**TypingTest**類別的實例並在無限循環中執行測試，這讓使用者可以繼續執行測試，直到他們決定按**ESC**退出。 讓我們看看它的實際效果。 🔥  > 🫵 如果你已經做到了這一步，我想指派一個小任務給你。目前，我們正在從文件中隨機選擇文字進行輸入。我希望您從網路上**抓取**輸入文字並使用該內容。請隨意在我的儲存庫中開啟包含您的變更的拉取請求。 > 如果您需要幫助，我已經參與了一個類似的 Python 抓取專案。請隨意[檢查](https://github.com/shricodev/IPO-Monitor-NEPSE)一下。 --- **包起來！** 🐒 ---------- 到目前為止，您已經建立了一個 Python CLI 應用程式來測試您在終端機中的打字速度。 本文的記錄原始碼可在此處取得： https://github.com/shricodev/blogs/tree/main/cli-monkeytype-python 非常感謝您的閱讀！ 🎉🫡 > 在下面的評論部分寫下你的想法。 👇 {% cta https://twitter.com/shricodev %} 在 Twitter 上追蹤我 🐥 {% endcta %} {% 嵌入 https://dev.to/shricodev %} --- 原文出處：https://dev.to/shricodev/build-your-own-cli-version-of-monkeytype-bm7
嗨大家好，新年快樂:煙火::煙火::煙火:! ---------------------- 這是一篇很長的文章，所以請耐心聽我一秒鐘或一個小時。每個問題的每個答案都有一個向上箭頭**↑**連結，可讓您返回到問題列表，這樣您就不會浪費時間上下滾動。 ### 問題 - [1. `undefined`和`null`有什麼差別？](#1-whats-the-difference-between-undefined-and-null) - [2. && 運算子的作用是什麼？](#2-what-does-the-ampamp-operator-do) - [3. || 是什麼意思？運營商做什麼？](#3-what-does-the-operator-do) - [4. 使用 + 或一元加運算子是將字串轉換為數字的最快方法嗎？](#4-is-using-the-or-unary-plus-operator-the-fastest-way-in-converting-a-string-to-a-number) - [5.什麼是DOM？](#5-what-is-the-dom) - [6.什麼是事件傳播？](#6-what-is-event-propagation) - [7.什麼是事件冒泡？](#7-whats-event-bubbling) - [8. 什麼是事件擷取？](#8-whats-event-capturing) - [9. `event.preventDefault()`和`event.stopPropagation()`方法有什麼差別？](#9-whats-the-difference-between-eventpreventdefault-and-eventstoppropagation-methods) - [10. 如何知道元素中是否使用了`event.preventDefault()`方法？](#10-how-to-know-if-the-eventpreventdefault-method-was-used-in-an-element) - [11. 為什麼這段程式碼 obj.someprop.x 會拋出錯誤？](#11-why-does-this-code-objsomepropx-throw-an-error) - \[12.什麼是`event.target` ？\](#12-什麼是 eventtarget- ） - [13.什麼是`event.currentTarget` ？](#13-what-is-eventcurrenttarget) - [14. `==`和`===`有什麼差別？](#14-whats-the-difference-between-and-) - [15. 為什麼在 JavaScript 中比較兩個相似的物件時回傳 false？](#15-why-does-it-return-false-when-comparing-two-similar-objects-in-javascript) - [16. `!!`是什麼意思？運營商做什麼？](#16-what-does-the-operator-do) - [17. 如何計算一行中的多個表達式？](#17-how-to-evaluate-multiple-expressions-in-one-line) - [18.什麼是吊裝？](#18-what-is-hoisting) - [19.什麼是範圍？](#19-what-is-scope) - [20.什麼是閉包？](#20-what-are-closures) - [21. JavaScript 中的假值是什麼？](#21-what-are-the-falsy-values-in-javascript) - [22. 如何檢查一個值是否為假值？](#22-how-to-check-if-a-value-is-falsy) - [23. `"use strict"`有什麼作用？](#23-what-does-use-strict-do) - [24. JavaScript 中`this`的值是什麼？](#24-whats-the-value-of-this-in-javascript) - [25. 物件的`prototype`是什麼？](#25-what-is-the-prototype-of-an-object) - \[26.什麼是 IIFE，它有什麼用？\](#26-what-is-an-iife-what-is-the-use-of-it ） - [27. `Function.prototype.apply`方法有什麼用？](#27-what-is-the-use-functionprototypeapply-method) - [28. `Function.prototype.call`方法有什麼用？](#28-what-is-the-use-functionprototypecall-method) - [29. `Function.prototype.apply`和`Function.prototype.call`有什麼差別？](#29-whats-the-difference-between-functionprototypeapply-and-functionprototypecall) - [30. `Function.prototype.bind`的用法是什麼？](#30-what-is-the-usage-of-functionprototypebind) - \[31.什麼是函數式程式設計以及 JavaScript 的哪些特性使其成為函數式語言的候選者？\](#31-什麼是函數式程式設計和 javascript 的特性是什麼-使其成為函數式語言的候選者 ） - [32.什麼是高階函數？](#32-what-are-higher-order-functions) - [33.為什麼函數被稱為First-class Objects？](#33-why-are-functions-called-firstclass-objects) - \[34.手動實作`Array.prototype.map`方法。\](#34-手動實作 arrayprototypemap-method ） - [35. 手動實作`Array.prototype.filter`方法。](#35-implement-the-arrayprototypefilter-method-by-hand) - [36. 手動實作`Array.prototype.reduce`方法。](#36-implement-the-arrayprototypereduce-method-by-hand) - [37.什麼是`arguments`物件？](#37-what-is-the-arguments-object) - [38. 如何創造沒有**原型的**物件？](#38-how-to-create-an-object-without-a-prototype) - [39. 為什麼當你呼叫這個函數時，這段程式碼中的`b`會變成全域變數？](#39-why-does-b-in-this-code-become-a-global-variable-when-you-call-this-function) - [40.什麼是**ECMAScript** ？](#40-what-is-ecmascript) - [41. **ES6**或**ECMAScript 2015**有哪些新功能？](#41-what-are-the-new-features-in-es6-or-ecmascript-2015) - [42. `var` 、 `let`和`const`關鍵字有什麼差別？](#42-whats-the-difference-between-var-let-and-const-keywords) - [43. 什麼是**箭頭函數**？](#43-what-are-arrow-functions) - [44.什麼是**類別**？](#44-what-are-classes) - [45.什麼是**模板文字**？](#45-what-are-template-literals) - [46.什麼是**物件解構**？](#46-what-is-object-destructuring) - [47.什麼是`ES6 Modules` ？](#47-what-are-es6-modules) - [48.什麼是`Set`物件以及它如何運作？](#48-what-is-the-set-object-and-how-does-it-work) - [49. 什麼是回呼函數？](#49-what-is-a-callback-function) - [50. 什麼是**Promise** ？](#50-what-are-promises) - [51. 什麼是*async/await*以及它是如何運作的？](#51-what-is-asyncawait-and-how-does-it-work) - [52. **Spread 運算子**和**Rest 運算**子有什麼差別？](#52-whats-the-difference-between-spread-operator-and-rest-operator) - [53. 什麼是**預設參數**？](#53-what-are-default-parameters) - [54.什麼是**包裝物件**？](#54-what-are-wrapper-objects) - [55.**隱性強制**和**顯性**強制有什麼差別？](#55-what-is-the-difference-between-implicit-and-explicit-coercion) - [56. 什麼是`NaN` ？以及如何檢查值是否為`NaN` ？](#56-what-is-nan-and-how-to-check-if-a-value-is-nan) - [57. 如何檢查一個值是否為一個**陣列**？](#57-how-to-check-if-a-value-is-an-array) - [58. 如何在不使用`%`或模運算子的情況下檢查數字是否為偶數？](#58-how-to-check-if-a-number-is-even-without-using-the-or-modulo-operator) - [59. 如何檢查物件中是否存在某個屬性？](#59-how-to-check-if-a-certain-property-exists-in-an-object) - [60.什麼是**AJAX** ？](#60-what-is-ajax) - [61. JavaScript 中建立物件的方式有哪些？](#61-what-are-the-ways-of-making-objects-in-javascript) - [62. `Object.seal`和`Object.freeze`方法有什麼不同？](#62-whats-the-difference-between-objectseal-and-objectfreeze-methods) - [63. `in`運算子和物件中的`hasOwnProperty`方法有什麼差別？](#63-whats-the-difference-between-the-in-operator-and-the-hasownproperty-method-in-objects) - [64. JavaScript中處理**非同步程式碼的**方法有哪些？](#64-what-are-the-ways-to-deal-with-asynchronous-code-in-javasscript) - [65.**函數表達式**和**函數宣告**有什麼不同？](#65-whats-the-difference-between-a-function-expression-and-function-declaration) - \[66.一個函數有多少種*呼叫*方式？\]( 66-函數可以有多少種方式被呼叫） ================= - [67. 什麼是*記憶*，它有什麼用？](#67-what-is-memoization-and-whats-the-use-it) - [68. 實現記憶輔助功能。](#68-implement-a-memoization-helper-function) - [69. 為什麼`typeof null`回傳`object` ？如何檢查一個值是否為`null` ？](#69-why-does-typeof-null-return-object-how-to-check-if-a-value-is-null) - [`new`關鍵字有什麼作用？](#70-what-does-the-new-keyword-do) ### 1. `undefined`和`null`有什麼差別？ [^](#the-questions "返回問題")在了解`undefined`和`null`之間的差異之前，我們必須先了解它們之間的相似之處。 - 它們屬於**JavaScript 的**7 種基本型別。 ``` let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint']; ``` - 它們是**虛假的**價值觀。使用`Boolean(value)`或`!!value`將其轉換為布林值時計算結果為 false 的值。 ``` console.log(!!null); //logs false console.log(!!undefined); //logs false console.log(Boolean(null)); //logs false console.log(Boolean(undefined)); //logs false ``` 好吧，我們來談談差異。 - `undefined`是尚未指派特定值的變數的預設值。或一個沒有**明確**回傳值的函數。 `console.log(1)` 。或物件中不存在的屬性。 JavaScript 引擎為我們完成了**指派**`undefined`值的任務。 ``` let _thisIsUndefined; const doNothing = () => {}; const someObj = { a : "ay", b : "bee", c : "si" }; console.log(_thisIsUndefined); //logs undefined console.log(doNothing()); //logs undefined console.log(someObj["d"]); //logs undefined ``` - `null`是**「代表無值的值」** 。 `null`是已**明確**定義給變數的值。在此範例中，當`fs.readFile`方法未引發錯誤時，我們得到`null`值。 ``` fs.readFile('path/to/file', (e,data) => { console.log(e); //it logs null when no error occurred if(e){ console.log(e); } console.log(data); }); ``` 當比較`null`和`undefined`時，使用`==`時我們得到`true` ，使用`===`時得到`false` 。您可以[在此處](#14-whats-the-difference-between-and-)閱讀原因。 ``` console.log(null == undefined); // logs true console.log(null === undefined); // logs false ``` ### 2. `&&`運算子的作用是什麼？ [^](#the-questions "返回問題") `&&`或**邏輯 AND**運算子在其運算元中尋找第一個*假*表達式並傳回它，如果沒有找到任何*假*表達式，則傳回最後一個表達式。它採用短路來防止不必要的工作。在我的一個專案中關閉資料庫連線時，我在`catch`區塊中使用了它。 ``` console.log(false && 1 && []); //logs false console.log(" " && true && 5); //logs 5 ``` 使用**if**語句。 ``` const router: Router = Router(); router.get('/endpoint', (req: Request, res: Response) => { let conMobile: PoolConnection; try { //do some db operations } catch (e) { if (conMobile) { conMobile.release(); } } }); ``` 使用**&&**運算子。 ``` const router: Router = Router(); router.get('/endpoint', (req: Request, res: Response) => { let conMobile: PoolConnection; try { //do some db operations } catch (e) { conMobile && conMobile.release() } }); ``` ### 3. `||`是什麼意思？運營商做什麼？ [↑](#the-questions "返回問題") `||` or**邏輯 OR**運算子尋找其運算元中的第一個*真值*表達式並傳回它。這也採用短路來防止不必要的工作。在**ES6預設函數參數**被支援之前，它被用來初始化函數中的預設參數值。 ``` console.log(null || 1 || undefined); //logs 1 function logName(name) { var n = name || "Mark"; console.log(n); } logName(); //logs "Mark" ``` ### 4. 使用**+**或一元加運算子是將字串轉換為數字的最快方法嗎？ [^](#the-questions "返回問題")根據[MDN 文件，](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus) `+`是將字串轉換為數字的最快方法，因為如果該值已經是數字，它不會對該值執行任何操作。 ### 5.什麼是**DOM** ？ [^](#the-questions "返回問題") **DOM**代表**文件物件模型，**是 HTML 和 XML 文件的介面 ( **API** )。當瀏覽器第一次讀取（*解析*）我們的 HTML 文件時，它會建立一個大物件，一個基於 HTML 文件的非常大的物件，這就是**DOM** 。它是根據 HTML 文件建模的樹狀結構。 **DOM**用於互動和修改**DOM 結構**或特定元素或節點。 想像一下，如果我們有這樣的 HTML 結構。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document Object Model</title> </head> <body> <div> <p> <span></span> </p> <label></label> <input> </div> </body> </html> ``` 等效的**DOM**應該是這樣的。  **JavaScript**中的`document`物件代表**DOM** 。它為我們提供了許多方法，我們可以用來選擇元素來更新元素內容等等。 ### 6.什麼是**事件傳播**？ [↑](#the-questions "返回問題")當某個**事件**發生在**DOM**元素上時，該**事件**並非完全發生在該元素上。在**冒泡階段**，**事件**向上冒泡，或到達其父級、祖父母、祖父母的父級，直到一直到達`window` ，而在**捕獲階段**，事件從`window`開始向下到達觸發的元素事件或`<a href="#12-what-is-eventtarget-">event.target</a>` 。 **事件傳播**分為**三個**階段。 1. [捕獲階段](#8-whats-event-capturing)－事件從`window`開始，然後向下到達每個元素，直到到達目標元素。 2. [目標階段](#12-what-is-eventtarget-)– 事件已到達目標元素。 3. [冒泡階段](#7-whats-event-bubbling)－事件從目標元素冒起，然後向上移動到每個元素，直到到達`window` 。  ### 7.什麼是**事件冒泡**？ [↑](#the-questions "返回問題")當某個**事件**發生在**DOM**元素上時，該**事件**並非完全發生在該元素上。在**冒泡階段**，**事件**向上冒泡，或到達其父級、祖父母、祖父母的父級，直到一直到達`window` 。 如果我們有一個像這樣的範例標記。 ``` <div class="grandparent"> <div class="parent"> <div class="child">1</div> </div> </div> ``` 還有我們的js程式碼。 ``` function addEvent(el, event, callback, isCapture = false) { if (!el || !event || !callback || typeof callback !== 'function') return; if (typeof el === 'string') { el = document.querySelector(el); }; el.addEventListener(event, callback, isCapture); } addEvent(document, 'DOMContentLoaded', () => { const child = document.querySelector('.child'); const parent = document.querySelector('.parent'); const grandparent = document.querySelector('.grandparent'); addEvent(child, 'click', function (e) { console.log('child'); }); addEvent(parent, 'click', function (e) { console.log('parent'); }); addEvent(grandparent, 'click', function (e) { console.log('grandparent'); }); addEvent(document, 'click', function (e) { console.log('document'); }); addEvent('html', 'click', function (e) { console.log('html'); }) addEvent(window, 'click', function (e) { console.log('window'); }) }); ``` `addEventListener`方法有第三個可選參數**useCapture ，**預設值為`false`事件將在**冒泡階段**發生，如果為`true` ，事件將在**捕獲階段**發生。如果我們點擊`child`元素，它會分別在**控制台**上記錄`child` 、 `parent`元素、 `grandparent` 、 `html` 、 `document`和`window` 。這就是**事件冒泡**。 ### 8. 什麼是**事件擷取**？ [↑](#the-questions "返回問題")當某個**事件**發生在**DOM**元素上時，該**事件**並非完全發生在該元素上。在**捕獲階段**，事件從`window`開始一直到觸發事件的元素。 如果我們有一個像這樣的範例標記。 ``` <div class="grandparent"> <div class="parent"> <div class="child">1</div> </div> </div> ``` 還有我們的js程式碼。 ``` function addEvent(el, event, callback, isCapture = false) { if (!el || !event || !callback || typeof callback !== 'function') return; if (typeof el === 'string') { el = document.querySelector(el); }; el.addEventListener(event, callback, isCapture); } addEvent(document, 'DOMContentLoaded', () => { const child = document.querySelector('.child'); const parent = document.querySelector('.parent'); const grandparent = document.querySelector('.grandparent'); addEvent(child, 'click', function (e) { console.log('child'); }, true); addEvent(parent, 'click', function (e) { console.log('parent'); }, true); addEvent(grandparent, 'click', function (e) { console.log('grandparent'); }, true); addEvent(document, 'click', function (e) { console.log('document'); }, true); addEvent('html', 'click', function (e) { console.log('html'); }, true) addEvent(window, 'click', function (e) { console.log('window'); }, true) }); ``` `addEventListener`方法有第三個可選參數**useCapture ，**預設值為`false`事件將在**冒泡階段**發生，如果為`true` ，事件將在**捕獲階段**發生。如果我們點擊`child`元素，它會分別在**控制台**上記錄`window` 、 `document` 、 `html` 、 `grandparent` 、 `parent`和`child` 。這就是**事件捕獲**。 ### 9. `event.preventDefault()`和`event.stopPropagation()`方法有什麼差別？ [↑](#the-questions "返回問題") `event.preventDefault()`方法**阻止**元素的預設行為。如果在`form`元素中使用，它**會阻止**其提交。如果在`anchor`元素中使用，它**會阻止**其導航。如果在`contextmenu`中使用，它**會阻止**其顯示或顯示。而`event.stopPropagation()`方法會停止事件的傳播或停止事件在[冒泡](#7-whats-event-bubbling)或[捕獲](#8-whats-event-capturing)階段發生。 ### 10. 如何知道元素中是否使用了`event.preventDefault()`方法？ [↑](#the-questions "返回問題")我們可以使用事件物件中的`event.defaultPrevented`屬性。它傳回一個`boolean` ，指示是否在特定元素中呼叫了`event.preventDefault()` 。 ### 11. 為什麼這段程式碼`obj.someprop.x`會拋出錯誤？ ``` const obj = {}; console.log(obj.someprop.x); ``` [^](#the-questions "返回問題")顯然，由於我們嘗試存取 a 的原因，這會引發錯誤 `someprop`屬性中的`x`屬性具有`undefined`值。請記住，物件中的**屬性**本身並不存在，且其**原型**具有預設值`undefined`且`undefined`沒有屬性`x` 。 ### 12.什麼是**event.target** ？ [↑](#the-questions "返回問題")最簡單來說， **event.target**是**發生**事件的元素或**觸發**事件的元素。 HTML 標記範例。 ``` <div onclick="clickFunc(event)" style="text-align: center;margin:15px; border:1px solid red;border-radius:3px;"> <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;"> <div style="margin:25px;border:1px solid skyblue;border-radius:3px;"> <button style="margin:10px"> Button </button> </div> </div> </div> ``` JavaScript 範例。 ``` function clickFunc(event) { console.log(event.target); } ``` 如果您單擊按鈕，它會記錄**按鈕**標記，即使我們將事件附加在最外部的`div`上，它也會始終記錄**按鈕**，因此我們可以得出結論， **event.target**是觸發事件的元素。 ### 13.什麼是**event.currentTarget** ？ [↑](#the-questions "返回問題") **event.currentTarget**是我們**明確**附加事件處理程序的元素。 複製**問題 12**中的標記。 HTML 標記範例。 ``` <div onclick="clickFunc(event)" style="text-align: center;margin:15px; border:1px solid red;border-radius:3px;"> <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;"> <div style="margin:25px;border:1px solid skyblue;border-radius:3px;"> <button style="margin:10px"> Button </button> </div> </div> </div> ``` 並且稍微改變我們的**JS** 。 ``` function clickFunc(event) { console.log(event.currentTarget); } ``` 如果您按一下該按鈕，即使我們按一下該按鈕，它也會記錄最外層的**div**標記。在此範例中，我們可以得出結論， **event.currentTarget**是我們附加事件處理程序的元素。 ### 14. `==`和`===`有什麼差別？ [^](#the-questions "返回問題") `==` \_\_(抽象相等)\_\_ 和`===` \_\_(嚴格相等)\_\_ 之間的區別在於`==`在*強制轉換*後按**值**進行比較，而`===`在不進行*強制轉換的*情況下按**值**和**類型**進行比較。 讓我們更深入地研究`==` 。那麼首先我們來談談*強制*。 *強制轉換*是將一個值轉換為另一種類型的過程。在本例中， `==`進行*隱式強制轉換*。在比較兩個值之前， `==`需要執行一些條件。 假設我們必須比較`x == y`值。 1. 如果`x`和`y`具有相同的類型。 然後將它們與`===`運算子進行比較。 2. 如果`x`為`null`且`y` `undefined` ，則傳回`true` 。 3. 如果`x` `undefined`且`y`為`null`則傳回`true` 。 4. 如果`x`是`number`類型， `y`是`string`類型 然後回傳`x == toNumber(y)` 。 5. 如果`x`是`string`類型， `y`是`number`類型 然後返回`toNumber(x) == y` 。 6. 如果`x`是`boolean`類型 然後返回`toNumber(x) == y` 。 7. 如果`y`是`boolean`類型 然後回傳`x == toNumber(y)` 。 8. 如果`x`是`string` 、 `symbol`或`number`且`y`是 type `object` 然後回傳`x == toPrimitive(y)` 。 9. 如果`x`是`object`且`x`是`string` 、 `symbol` 然後返回`toPrimitive(x) == y` 。 10. 返回`false` 。 **注意：** `toPrimitive`首先使用物件中的`valueOf`方法，然後使用`toString`方法來取得該物件的原始值。 讓我們舉個例子。 | `x` | `y` | `x == y` | | ------------- |:-------------:| ----------------: | | `5` | `5` | `true` | | `1` | `'1'` | `true` | | `null` | `undefined` | `true` | | `0` | `false` | `true` | | `'1,2'` | `[1,2]` | `true` | | `'[object Object]'` | `{}` | `true` | 這些範例都傳回`true` 。 **第一個範例**屬於**條件一**，因為`x`和`y`具有相同的類型和值。 **第二個範例**轉到**條件四，**在比較之前將`y`轉換為`number` 。 **第三個例子**涉及**條件二**。 **第四個範例**轉到**條件七，**因為`y`是`boolean` 。 **第五個範例**適用於**條件八**。使用`toString()`方法將陣列轉換為`string` ，該方法傳回`1,2` 。 **最後一個例子**適用於**條件十**。使用傳回`[object Object]`的`toString()`方法將該物件轉換為`string` 。 | `x` | `y` | `x === y` | | ------------- |:-------------:| ----------------: | | `5` | `5` | `true` | | `1` | `'1'` | `false` | | `null` | `undefined` | `false` | | `0` | `false` | `false` | | `'1,2'` | `[1,2]` | `false` | | `'[object Object]'` | `{}` | `false` | 如果我們使用`===`運算符，則除第一個範例之外的所有比較都將傳回`false` ，因為它們不具有相同的類型，而第一個範例將傳回`true` ，因為兩者俱有相同的類型和值。 ### 15. 為什麼在 JavaScript 中比較兩個相似的物件時回傳**false** ？ [^](#the-questions "返回問題")假設我們有下面的例子。 ``` let a = { a: 1 }; let b = { a: 1 }; let c = a; console.log(a === b); // logs false even though they have the same property console.log(a === c); // logs true hmm ``` **JavaScript**以不同的方式比較*物件*和*基元*。在*基元*中，它透過**值**來比較它們，而在*物件*中，它透過**引用**或**儲存變數的記憶體位址**來比較它們。這就是為什麼第一個`console.log`語句回傳`false`而第二個`console.log`語句回傳`true`的原因。 `a`和`c`有相同的引用，而`a`和`b`則不同。 ### 16. **!!**是什麼意思？運營商做什麼？ [↑](#the-questions "返回問題")**雙非**運算子或**!!**將右側的值強制轉換為布林值。基本上，這是一種將值轉換為布林值的奇特方法。 ``` console.log(!!null); //logs false console.log(!!undefined); //logs false console.log(!!''); //logs false console.log(!!0); //logs false console.log(!!NaN); //logs false console.log(!!' '); //logs true console.log(!!{}); //logs true console.log(!![]); //logs true console.log(!!1); //logs true console.log(!![].length); //logs false ``` ### 17. 如何計算一行中的多個表達式？ [↑](#the-questions "返回問題")我們可以使用`,`或逗號運算子來計算一行中的多個表達式。它從左到右計算並傳回右側最後一項或最後一個操作數的值。 ``` let x = 5; x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10); function addFive(num) { return num + 5; } ``` 如果記錄`x`的值，它將是**27** 。首先，我們**增加**x 的值，它將是**6** ，然後我們呼叫函數`addFive(6)`並將 6 作為參數傳遞，並將結果分配給`x` ， `x`的新值將是**11** 。之後，我們將`x`的當前值乘以**2**並將其分配給`x` ， `x`的更新值將是**22** 。然後，我們將`x`的當前值減去 5 並將結果指派給`x` ，更新後的值將是**17** 。最後，我們將`x`的值增加 10 並將更新後的值指派給`x` ，現在`x`的值將是**27** 。 ### 18.什麼是**吊裝**？ [^](#the-questions "返回問題")**提升**是一個術語，用於描述將*變數*和*函數*移動到其*（全域或函數）*作用域的頂部（即我們定義該變數或函數的位置）。 要理解**提升**，我必須解釋*執行上下文*。 **執行上下文**是目前正在執行的「程式碼環境」。**執行上下文**有兩個階段*：編譯*和*執行*。 **編譯**- 在此階段，它獲取所有*函數聲明*並將它們*提升*到作用域的頂部，以便我們稍後可以引用它們並獲取所有*變數聲明***（使用 var 關鍵字聲明）** ，並將它們*提升*並給它們一個默認值*未定義*的 . **執行**- 在此階段，它將值指派給先前*提升的*變數，並*執行*或*呼叫*函數**（物件中的方法）** 。 **注意：**只有使用*var*關鍵字宣告的**函數宣告**和變數才會*被提升*，而不是**函數表達式**或**箭頭函數**、 `let`和`const`關鍵字。 好吧，假設我們在下面的*全域範圍*內有一個範例程式碼。 ``` console.log(y); y = 1; console.log(y); console.log(greet("Mark")); function greet(name){ return 'Hello ' + name + '!'; } var y; ``` 此程式碼記錄`undefined` ， `1` ， `Hello Mark!`分別。 所以*編譯*階段看起來像這樣。 ``` function greet(name) { return 'Hello ' + name + '!'; } var y; //implicit "undefined" assignment //waiting for "compilation" phase to finish //then start "execution" phase /* console.log(y); y = 1; console.log(y); console.log(greet("Mark")); */ ``` 出於範例目的，我對變數和*函數呼叫*的*賦值*進行了評論。 *編譯*階段完成後，它開始*執行*階段，呼叫方法並向變數賦值。 ``` function greet(name) { return 'Hello ' + name + '!'; } var y; //start "execution" phase console.log(y); y = 1; console.log(y); console.log(greet("Mark")); ``` ### 19.什麼是**範圍**？ [↑](#the-questions "返回問題") JavaScript 中的**作用域**是我們可以有效存取變數或函數的**區域**。 JavaScript 有三種類型的作用域。**全域作用域**、**函數作用域**和**區塊作用域(ES6)** 。 - **全域作用域**- 在全域命名空間中宣告的變數或函數位於全域作用域中，因此可以在程式碼中的任何位置存取。 ``` //global namespace var g = "global"; function globalFunc(){ function innerFunc(){ console.log(g); // can access "g" because "g" is a global variable } innerFunc(); } ``` - **函數作用域**- 函數內聲明的變數、函數和參數可以在該函數內部存取，但不能在函數外部存取。 ``` function myFavoriteFunc(a) { if (true) { var b = "Hello " + a; } return b; } myFavoriteFunc("World"); console.log(a); // Throws a ReferenceError "a" is not defined console.log(b); // does not continue here ``` - **區塊作用域**- 在區塊`{}`內宣告的變數**（ `let` 、 `const` ）**只能在區塊內存取。 ``` function testBlock(){ if(true){ let z = 5; } return z; } testBlock(); // Throws a ReferenceError "z" is not defined ``` **範圍**也是一組查找變數的規則。如果一個變數在**當前作用域中**不存在，它會在**外部作用域中查找**並蒐索該變數，如果不存在，它會再次**查找，**直到到達**全域作用域。**如果該變數存在，那麼我們可以使用它，如果不存在，我們可以使用它來拋出錯誤。它搜尋**最近的**變數，一旦找到它就停止**搜尋**或**尋找**。這稱為**作用域鏈**。 ``` /* Scope Chain Inside inner function perspective inner's scope -> outer's scope -> global's scope */ //Global Scope var variable1 = "Comrades"; var variable2 = "Sayonara"; function outer(){ //outer's scope var variable1 = "World"; function inner(){ //inner's scope var variable2 = "Hello"; console.log(variable2 + " " + variable1); } inner(); } outer(); // logs Hello World // because (variable2 = "Hello") and (variable1 = "World") are the nearest // variables inside inner's scope. ```  ### 20.什麼是**閉包**？ [^](#the-questions "返回問題")這可能是所有這些問題中最難的問題，因為**閉包**是一個有爭議的話題。那我就從我的理解來解釋。 **閉包**只是函數在宣告時記住其當前作用域、其父函數作用域、其父函數的父函數作用域上的變數和參數的引用的能力，直到在**作用域鏈**的幫助下到達全域作用域。基本上它是聲明函數時建立的**作用域**。 例子是解釋閉包的好方法。 ``` //Global's Scope var globalVar = "abc"; function a(){ //testClosures's Scope console.log(globalVar); } a(); //logs "abc" /* Scope Chain Inside a function perspective a's scope -> global's scope */ ``` 在此範例中，當我們宣告`a`函數時**，全域**作用域是`a's`*閉包*的一部分。  變數`globalVar`在影像中沒有值的原因是該變數的值可以根據我們呼叫`a`**位置**和**時間**而改變。 但在上面的範例中， `globalVar`變數的值為**abc** 。 好吧，讓我們來看一個複雜的例子。 ``` var globalVar = "global"; var outerVar = "outer" function outerFunc(outerParam) { function innerFunc(innerParam) { console.log(globalVar, outerParam, innerParam); } return innerFunc; } const x = outerFunc(outerVar); outerVar = "outer-2"; globalVar = "guess" x("inner"); ```  這將列印“猜測外部內部”。對此的解釋是，當我們呼叫`outerFunc`函數並將`innerFunc`函數的回傳值指派給變數`x`時，即使我們將新值**outer-2**指派給`outerVar`變數， `outerParam`也會具有**outer**值，因為 重新分配發生在呼叫`outer`函數之後，當我們呼叫`outerFunc`函數時，它會在**作用域鏈**中尋找`outerVar`的值，而`outerVar`的值為**「outer」** 。現在，當我們呼叫引用了`innerFunc`的`x`變數時， `innerParam`的值為**inner，**因為這是我們在呼叫中傳遞的值，而`globalVar`變數的值為**猜測**，因為在呼叫`x`變數之前，我們為`globalVar`分配了一個新值，並且在呼叫`x`時**作用域鏈**中`globalVar`的值是**猜測**。 我們有一個例子來示範沒有正確理解閉包的問題。 ``` const arrFuncs = []; for(var i = 0; i < 5; i++){ arrFuncs.push(function (){ return i; }); } console.log(i); // i is 5 for (let i = 0; i < arrFuncs.length; i++) { console.log(arrFuncs[i]()); // all logs "5" } ``` 由於**Closures**的原因，此程式碼無法按我們的預期工作。 `var`關鍵字建立一個全域變數，當我們推送一個函數時 我們返回全域變數`i` 。因此，當我們在循環之後呼叫該陣列中的其中一個函數時，它會記錄`5` ，因為我們得到 `i`的目前值為`5` ，我們可以存取它，因為它是全域變數。因為**閉包**保留該變數的**引用，**而不是其建立時的**值**。我們可以使用**IIFES**或將`var`關鍵字變更為`let`來解決此問題，以實現區塊作用域。 ### 21. **JavaScript**中的**假**值是什麼？ [↑](#the-questions "返回問題") ``` const falsyValues = ['', 0, null, undefined, NaN, false]; ``` **假**值是轉換為布林值時變成**false 的**值。 ### 22. 如何檢查一個值是否為**假值**？ [↑](#the-questions "返回問題")使用**布林**函數或雙非運算符**[！！](#16-what-does-the-operator-do)** ### 23. `"use strict"`有什麼作用？ [^](#the-questions "返回問題") `"use strict"`是**JavaScript**中的 ES5 功能，它使我們的程式碼在*函數*或*整個腳本*中處於**嚴格模式**。**嚴格模式**幫助我們避免程式碼早期出現**錯誤**並為其加入限制。 **嚴格模式**給我們的限制。 - 分配或存取未宣告的變數。 ``` function returnY(){ "use strict"; y = 123; return y; } ``` - 為唯讀或不可寫的全域變數賦值； ``` "use strict"; var NaN = NaN; var undefined = undefined; var Infinity = "and beyond"; ``` - 刪除不可刪除的屬性。 ``` "use strict"; const obj = {}; Object.defineProperty(obj, 'x', { value : '1' }); delete obj.x; ``` - 參數名稱重複。 ``` "use strict"; function someFunc(a, b, b, c){ } ``` - 使用**eval**函數建立變數。 ``` "use strict"; eval("var x = 1;"); console.log(x); //Throws a Reference Error x is not defined ``` - **該**值的預設值是`undefined` 。 ``` "use strict"; function showMeThis(){ return this; } showMeThis(); //returns undefined ``` **嚴格模式**的限制遠不止這些。 ### 24. JavaScript 中`this`的值是什麼？ [↑](#the-questions "返回問題")基本上， `this`是指目前正在執行或呼叫函數的物件的值。我說**目前**是因為**它**的值會根據我們使用它的上下文和使用它的位置而改變。 ``` const carDetails = { name: "Ford Mustang", yearBought: 2005, getName(){ return this.name; }, isRegistered: true }; console.log(carDetails.getName()); // logs Ford Mustang ``` 這是我們通常所期望的，因為在**getName**方法中我們傳回`this.name` ，在此上下文中`this`指的是`carDetails`物件，該物件目前是正在執行的函數的「擁有者」物件。 好吧，讓我們加入一些程式碼讓它變得奇怪。在`console.log`語句下面加入這三行程式碼 ``` var name = "Ford Ranger"; var getCarName = carDetails.getName; console.log(getCarName()); // logs Ford Ranger ``` 第二個`console.log`語句印製了**「Ford Ranger」**一詞，這很奇怪，因為在我們的第一個`console.log`語句中它印了**「Ford Mustang」** 。原因是`getCarName`方法有一個不同的「擁有者」物件，即`window`物件。在全域作用域中使用`var`關鍵字聲明變數會在`window`物件中附加與變數同名的屬性。請記住，當未使用`"use strict"`時，全域範圍內的`this`指的是`window`物件。 ``` console.log(getCarName === window.getCarName); //logs true console.log(getCarName === this.getCarName); // logs true ``` 本例中的`this`和`window`指的是同一個物件。 解決此問題的一種方法是使用函數中的`<a href="#27-what-is-the-use-functionprototypeapply-method">apply</a>`和`<a href="#28-what-is-the-use-functionprototypecall-method">call</a>`方法。 ``` console.log(getCarName.apply(carDetails)); //logs Ford Mustang console.log(getCarName.call(carDetails)); //logs Ford Mustang ``` `apply`和`call`方法期望第一個參數是一個物件，該物件將是該函數內`this`的值。 **IIFE** （即**立即呼叫函數表達式）** 、在全域作用域中宣告的函數、物件內部方法中的**匿名函數**和內部函數都有一個指向**window**物件的預設**值**。 ``` (function (){ console.log(this); })(); //logs the "window" object function iHateThis(){ console.log(this); } iHateThis(); //logs the "window" object const myFavoriteObj = { guessThis(){ function getThis(){ console.log(this); } getThis(); }, name: 'Marko Polo', thisIsAnnoying(callback){ callback(); } }; myFavoriteObj.guessThis(); //logs the "window" object myFavoriteObj.thisIsAnnoying(function (){ console.log(this); //logs the "window" object }); ``` 如果我們想要取得`myFavoriteObj`物件中的`name`屬性**（Marko Polo）**的值，有兩種方法可以解決這個問題。 首先，我們將`this`的值保存在變數中。 ``` const myFavoriteObj = { guessThis(){ const self = this; //saves the this value to the "self" variable function getName(){ console.log(self.name); } getName(); }, name: 'Marko Polo', thisIsAnnoying(callback){ callback(); } }; ``` 在此圖像中，我們保存`this`的值，該值將是`myFavoriteObj`物件。所以我們可以在`getName`內部函數中存取它。 其次，我們使用**ES6[箭頭函數](#43-what-are-arrow-functions)**。 ``` const myFavoriteObj = { guessThis(){ const getName = () => { //copies the value of "this" outside of this arrow function console.log(this.name); } getName(); }, name: 'Marko Polo', thisIsAnnoying(callback){ callback(); } }; ``` [箭頭函數](#43-what-are-arrow-functions)沒有自己的`this` 。它複製封閉詞法範圍的`this`值，或複製`getName`內部函數外部的`this`值（即`myFavoriteObj`物件）。我們也可以根據[函數的呼叫方式](#66-how-many-ways-can-a-function-be-invoked)來決定`this`的值。 ### 25. 物件的`prototype`是什麼？ [↑](#the-questions "返回問題")最簡單的`prototype`是一個物件的*藍圖*。如果目前物件中確實存在它，則將其用作**屬性**和**方法**的後備。這是在物件之間共享屬性和功能的方式。這是 JavaScript**原型繼承**的核心概念。 ``` const o = {}; console.log(o.toString()); // logs [object Object] ``` 即使`o.toString`方法不存在於`o`物件中，它也不會拋出錯誤，而是傳回字串`[object Object]` 。當物件中不存在屬性時，它會尋找其**原型**，如果仍然不存在，則會尋找**原型的原型**，依此類推，直到在**原型鏈**中找到具有相同屬性的屬性。**原型鏈**的末尾在**Object.prototype**之後為`null` 。 ``` console.log(o.toString === Object.prototype.toString); // logs true // which means we we're looking up the Prototype Chain and it reached // the Object.prototype and used the "toString" method. ``` ### 26. 什麼是**IIFE** ，它有什麼用？ [^](#the-questions "返回問題") **IIFE**或**立即呼叫函數表達式**是在建立或宣告後將被呼叫或執行的函數。建立**IIFE**的語法是，我們將`function (){}`包裝在括號`()`或**分組運算**子內，以將函數視為表達式，然後用另一個括號`()`呼叫它。所以**IIFE**看起來像這樣`(function(){})()` 。 ``` (function () { }()); (function () { })(); (function named(params) { })(); (() => { })(); (function (global) { })(window); const utility = (function () { return { //utilities }; })(); ``` 這些範例都是有效的**IIFE** 。倒數第二個範例顯示我們可以將參數傳遞給**IIFE**函數。最後一個範例表明我們可以將**IIFE**的結果保存到變數中，以便稍後引用它。 **IIFE**的最佳用途是進行初始化設定功能，並避免與全域範圍內的其他變數**發生命名衝突**或污染全域名稱空間。讓我們舉個例子。 ``` <script src="https://cdnurl.com/somelibrary.js"></script> ``` 假設我們有一個指向庫`somelibrary.js`的連結，該庫公開了我們可以在程式碼中使用的一些全域函數，但該庫有兩個我們不使用`createGraph`和`drawGraph`方法，因為這些方法中有錯誤。我們想要實作我們自己的`createGraph`和`drawGraph`方法。 - 解決這個問題的一種方法是改變腳本的結構。 ``` <script src="https://cdnurl.com/somelibrary.js"></script> <script> function createGraph() { // createGraph logic here } function drawGraph() { // drawGraph logic here } </script> ``` 當我們使用這個解決方案時，我們將覆蓋庫為我們提供的這兩種方法。 - 解決這個問題的另一種方法是更改我們自己的輔助函數的名稱。 ``` <script src="https://cdnurl.com/somelibrary.js"></script> <script> function myCreateGraph() { // createGraph logic here } function myDrawGraph() { // drawGraph logic here } </script> ``` 當我們使用此解決方案時，我們還將這些函數呼叫更改為新函數名稱。 - 另一種方法是使用**IIFE** 。 ``` <script src="https://cdnurl.com/somelibrary.js"></script> <script> const graphUtility = (function () { function createGraph() { // createGraph logic here } function drawGraph() { // drawGraph logic here } return { createGraph, drawGraph } })(); </script> ``` 在此解決方案中，我們建立一個實用程式變數，它是**IIFE**的結果，它傳回一個包含`createGraph`和`drawGraph`兩個方法的物件。 **IIFE**解決的另一個問題就是這個例子。 ``` var li = document.querySelectorAll('.list-group > li'); for (var i = 0, len = li.length; i < len; i++) { li[i].addEventListener('click', function (e) { console.log(i); }) } ``` 假設我們有一個`ul`元素，其類別為**list-group** ，並且它有 5 個`li`子元素。當我們**點擊**單一`li`元素時，我們希望`console.log` `i`的值。 但我們想要的程式碼中的行為不起作用。相反，它會在對`li`元素的任何**點擊**中記錄`5` 。我們遇到的問題是由於**閉包的**工作方式造成的。**閉包**只是函數記住其當前作用域、其父函數作用域和全域作用域中的變數引用的能力。當我們在全域範圍內使用`var`關鍵字聲明變數時，顯然我們正在建立一個全域變數`i` 。因此，當我們單擊`li`元素時，它會記錄**5** ，因為這是我們稍後在回調函數中引用它時的`i`值。 - 解決這個問題的一種方法是**IIFE** 。 ``` var li = document.querySelectorAll('.list-group > li'); for (var i = 0, len = li.length; i < len; i++) { (function (currentIndex) { li[currentIndex].addEventListener('click', function (e) { console.log(currentIndex); }) })(i); } ``` 這個解決方案之所以有效，是因為**IIFE**為每次迭代建立一個新範圍，並且我們捕獲`i`的值並將其傳遞到`currentIndex`參數中，因此當我們呼叫**IIFE**時，每次迭代的`currentIndex`值都是不同的。 ### 27. `Function.prototype.apply`方法有什麼用？ [^](#the-questions "返回問題") `apply`呼叫一個函數，在呼叫時指定`this`或該函數的「所有者」物件。 ``` const details = { message: 'Hello World!' }; function getMessage(){ return this.message; } getMessage.apply(details); // returns 'Hello World!' ``` 這個方法的工作方式類似於`<a href="#28-what-is-the-use-functionprototypecall-method">Function.prototype.call</a>`唯一的差異是我們傳遞參數的方式。在`apply`中，我們將參數作為陣列傳遞。 ``` const person = { name: "Marko Polo" }; function greeting(greetingMessage) { return `${greetingMessage} ${this.name}`; } greeting.apply(person, ['Hello']); // returns "Hello Marko Polo!" ``` ### 28. `Function.prototype.call`方法有什麼用？ [^](#the-questions "返回問題")此`call`呼叫一個函數，指定呼叫時該函數的`this`或「擁有者」物件。 ``` const details = { message: 'Hello World!' }; function getMessage(){ return this.message; } getMessage.call(details); // returns 'Hello World!' ``` 這個方法的工作方式類似於`<a href="#27-what-is-the-use-functionprototypeapply-method">Function.prototype.apply</a>`唯一的差異是我們傳遞參數的方式。在`call`中，我們直接傳遞參數，對於每個參數`,`用逗號分隔它們。 ``` const person = { name: "Marko Polo" }; function greeting(greetingMessage) { return `${greetingMessage} ${this.name}`; } greeting.call(person, 'Hello'); // returns "Hello Marko Polo!" ``` ### 29. `Function.prototype.apply`和`Function.prototype.call`有什麼差別？ [↑](#the-questions "返回問題") `apply`和`call`之間的唯一區別是我們如何在被呼叫的函數中傳遞**參數**。在`apply`中，我們將參數作為**陣列**傳遞，而在`call`中，我們直接在參數列表中傳遞參數。 ``` const obj1 = { result:0 }; const obj2 = { result:0 }; function reduceAdd(){ let result = 0; for(let i = 0, len = arguments.length; i < len; i++){ result += arguments[i]; } this.result = result; } reduceAdd.apply(obj1, [1, 2, 3, 4, 5]); // returns 15 reduceAdd.call(obj2, 1, 2, 3, 4, 5); // returns 15 ``` ### 30. `Function.prototype.bind`的用法是什麼？ [↑](#the-questions "返回問題") `bind`方法傳回一個新*綁定的*函數 到特定的`this`值或“所有者”物件，因此我們可以稍後在程式碼中使用它。 `call` 、 `apply`方法立即呼叫函數，而不是像`bind`方法那樣傳回一個新函數。 ``` import React from 'react'; class MyComponent extends React.Component { constructor(props){ super(props); this.state = { value : "" } this.handleChange = this.handleChange.bind(this); // Binds the "handleChange" method to the "MyComponent" component } handleChange(e){ //do something amazing here } render(){ return ( <> <input type={this.props.type} value={this.state.value} onChange={this.handleChange} /> </> ) } } ``` ### 31.什麼是**函數式程式設計**？ **JavaScript**的哪些特性使其成為**函數式語言**的候選者？ [^](#the-questions "返回問題")**函數式程式設計**是一種**聲明式**程式設計範式或模式，它介紹如何**使用表達式來**計算值而不改變傳遞給它的參數的函數來建立應用程式。 JavaScript**陣列**具有**map** 、 **filter** 、 **reduce**方法，這些方法是函數式程式設計世界中最著名的函數，因為它們非常有用，而且它們不會改變或改變陣列，這使得這些函數變得**純粹**，並且JavaScript 支援**閉包**和**高階函數**，它們是**函數式程式語言**的一個特徵。 - **map**方法建立一個新陣列，其中包含對陣列中每個元素呼叫提供的回調函數的結果。 ``` const words = ["Functional", "Procedural", "Object-Oriented"]; const wordsLength = words.map(word => word.length); ``` - **filter**方法會建立一個新陣列，其中包含透過回調函數中測試的所有元素。 ``` const data = [ { name: 'Mark', isRegistered: true }, { name: 'Mary', isRegistered: false }, { name: 'Mae', isRegistered: true } ]; const registeredUsers = data.filter(user => user.isRegistered); ``` - **reduce**方法對累加器和陣列中的每個元素（從左到右）套用函數，將其減少為單一值。 ``` const strs = ["I", " ", "am", " ", "Iron", " ", "Man"]; const result = strs.reduce((acc, currentStr) => acc + currentStr, ""); ``` ### 32.什麼是**高階函數**？ [^](#the-questions "返回問題")**高階函數**是可以傳回函數或接收具有函數值的一個或多個參數的函數。 ``` function higherOrderFunction(param,callback){ return callback(param); } ``` ### 33.為什麼函數被稱為**First-class Objects** ？ [^](#the-questions "返回問題") JavaScript 中的 \_\_Functions\_\_ 是**一流物件**，因為它們被視為該語言中的任何其他值。它們可以分配給**變數**，可以是稱為**方法的物件的屬性**，可以是**陣列中的專案**，可以**作為參數傳遞給函數**，也可以**作為函數的值返回**。函數與**JavaScript**中任何其他值之間的唯一區別是**函數**可以被呼叫。 ### 34. 手動實作`Array.prototype.map`方法。 [↑](#the-questions "返回問題") ``` function map(arr, mapCallback) { // First, we check if the parameters passed are right. if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') { return []; } else { let result = []; // We're making a results array every time we call this function // because we don't want to mutate the original array. for (let i = 0, len = arr.length; i < len; i++) { result.push(mapCallback(arr[i], i, arr)); // push the result of the mapCallback in the 'result' array } return result; // return the result array } } ``` 正如`Array.prototype.map`方法的MDN描述。 **map() 方法建立一個新陣列，其中包含對呼叫陣列中的每個元素呼叫所提供函數的結果。** ### 35. 手動實作`Array.prototype.filter`方法。 [↑](#the-questions "返回問題") ``` function filter(arr, filterCallback) { // First, we check if the parameters passed are right. if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') { return []; } else { let result = []; // We're making a results array every time we call this function // because we don't want to mutate the original array. for (let i = 0, len = arr.length; i < len; i++) { // check if the return value of the filterCallback is true or "truthy" if (filterCallback(arr[i], i, arr)) { // push the current item in the 'result' array if the condition is true result.push(arr[i]); } } return result; // return the result array } } ``` 正如`Array.prototype.filter`方法的 MDN 描述。 **filter() 方法建立一個新陣列，其中包含透過所提供函數實現的測試的所有元素。** ### 36. 手動實作`Array.prototype.reduce`方法。 [↑](#the-questions "返回問題") ``js 函數reduce（arr，reduceCallback，initialValue）{ // 首先，我們檢查傳遞的參數是否正確。 if (!Array.isArray(arr) || !arr.length || typeof reduceCallback !== 'function') { ``` return []; ``` } 別的 { ``` // If no initialValue has been passed to the function we're gonna use the ``` ``` let hasInitialValue = initialValue !== undefined; ``` ``` let value = hasInitialValue ? initialValue : arr[0]; ``` ``` // first array item as the initialValue ``` ``` // Then we're gonna start looping at index 1 if there is no ``` ``` // initialValue has been passed to the function else we start at 0 if ``` ``` // there is an initialValue. ``` ``` for (let i = hasInitialValue ? 0 : 1, len = arr.length; i < len; i++) { ``` ``` // Then for every iteration we assign the result of the ``` ``` // reduceCallback to the variable value. ``` ``` value = reduceCallback(value, arr[i], i, arr); ``` ``` } ``` ``` return value; ``` } } ``` As the MDN description of the <code>Array.prototype.reduce</code> method. __The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.__ ###37. What is the __arguments__ object? [↑](#the-questions "Back To Questions") The __arguments__ object is a collection of parameter values pass in a function. It's an __Array-like__ object because it has a __length__ property and we can access individual values using array indexing notation <code>arguments[1]</code> but it does not have the built-in methods in an array <code>forEach</code>,<code>reduce</code>,<code>filter</code> and <code>map</code>. It helps us know the number of arguments pass in a function. We can convert the <code>arguments</code> object into an array using the <code>Array.prototype.slice</code>. ``` 函數一（）{ 返回 Array.prototype.slice.call(參數); } ``` Note: __the <code>arguments</code> object does not work on ES6 arrow functions.__ ``` 函數一（）{ 返回參數； } 常數二 = 函數 () { 返回參數； } 常量三 = 函數三() { 返回參數； } const 四 = () => 參數； 四（）； // 拋出錯誤 - 參數未定義 ``` When we invoke the function <code>four</code> it throws a <code>ReferenceError: arguments is not defined</code> error. We can solve this problem if your enviroment supports the __rest syntax__. ``` const 四 = (...args) => args; ``` This puts all parameter values in an array automatically. ###38. How to create an object without a __prototype__? [↑](#the-questions "Back To Questions") We can create an object without a _prototype_ using the <code>Object.create</code> method. ``` 常數 o1 = {}; console.log(o1.toString()); // Logs \[object Object\] 取得此方法到Object.prototype const o2 = Object.create(null); // 第一個參數是物件「o2」的原型，在此 // case 將為 null 指定我們不需要任何原型 console.log(o2.toString()); // 拋出錯誤 o2.toString 不是函數 ``` ###39. Why does <code>b</code> in this code become a global variable when you call this function? [↑](#the-questions "Back To Questions") ``` 函數 myFunc() { 令a = b = 0； } myFunc(); ``` The reason for this is that __assignment operator__ or __=__ has right-to-left __associativity__ or __evaluation__. What this means is that when multiple assignment operators appear in a single expression they evaluated from right to left. So our code becomes likes this. ``` 函數 myFunc() { 令 a = (b = 0); } myFunc(); ``` First, the expression <code>b = 0</code> evaluated and in this example <code>b</code> is not declared. So, The JS Engine makes a global variable <code>b</code> outside this function after that the return value of the expression <code>b = 0</code> would be 0 and it's assigned to the new local variable <code>a</code> with a <code>let</code> keyword. We can solve this problem by declaring the variables first before assigning them with value. ``` 函數 myFunc() { 令 a,b; a = b = 0; } myFunc(); ``` ###40. <div id="ecmascript">What is __ECMAScript__</div>? [↑](#the-questions "Back To Questions") __ECMAScript__ is a standard for making scripting languages which means that __JavaScript__ follows the specification changes in __ECMAScript__ standard because it is the __blueprint__ of __JavaScript__. ###41. What are the new features in __ES6__ or __ECMAScript 2015__? [↑](#the-questions "Back To Questions") * [Arrow Functions](#43-what-are-arrow-functions) * [Classes](#44-what-are-classes) * [Template Strings](#45-what-are-template-literals) * __Enhanced Object literals__ * [Object Destructuring](#46-what-is-object-destructuring) * [Promises](#50-what-are-promises) * __Generators__ * [Modules](#47-what-are-es6-modules) * Symbol * __Proxies__ * [Sets](#48-what-is-the-set-object-and-how-does-it-work) * [Default Function parameters](#53-what-are-default-parameters) * [Rest and Spread](#52-whats-the-difference-between-spread-operator-and-rest-operator) * [Block Scoping with <code>let</code> and <code>const</code>](#42-whats-the-difference-between-var-let-and-const-keywords) ###42. What's the difference between <code>var</code>, <code>let</code> and <code>const</code> keywords? [↑](#the-questions "Back To Questions") Variables declared with <code>var</code> keyword are _function scoped_. What this means that variables can be accessed across that function even if we declare that variable inside a block. ``` 函數給MeX(showX) { 如果（顯示X）{ ``` var x = 5; ``` } 返回x； } console.log(giveMeX(false)); console.log(giveMeX(true)); ``` The first <code>console.log</code> statement logs <code>undefined</code> and the second <code>5</code>. We can access the <code>x</code> variable due to the reason that it gets _hoisted_ at the top of the function scope. So our function code is intepreted like this. ``` 函數給MeX(showX) { 變數 x; // 有一個預設值未定義 如果（顯示X）{ ``` x = 5; ``` } 返回x； } ``` If you are wondering why it logs <code>undefined</code> in the first <code>console.log</code> statement remember variables declared without an initial value has a default value of <code>undefined</code>. Variables declared with <code>let</code> and <code>const</code> keyword are _block scoped_. What this means that variable can only be accessed on that block <code>{}</code> on where we declare it. ``` 函數給MeX(showX) { 如果（顯示X）{ ``` let x = 5; ``` } 返回x； } 函數給MeY（顯示Y）{ 如果（顯示Y）{ ``` let y = 5; ``` } 返回y； } ``` If we call this functions with an argument of <code>false</code> it throws a <code>Reference Error</code> because we can't access the <code>x</code> and <code>y</code> variables outside that block and those variables are not _hoisted_. There is also a difference between <code>let</code> and <code>const</code> we can assign new values using <code>let</code> but we can't in <code>const</code> but <code>const</code> are mutable meaning. What this means is if the value that we assign to a <code>const</code> is an object we can change the values of those properties but can't reassign a new value to that variable. ###43. What are __Arrow functions__? [↑](#the-questions "Back To Questions") __Arrow Functions__ are a new way of making functions in JavaScript. __Arrow Functions__ takes a little time in making functions and has a cleaner syntax than a __function expression__ because we omit the <code>function</code> keyword in making them. ``` //ES5版本 var getCurrentDate = 函數 (){ 返回新日期（）； } //ES6版本 const getCurrentDate = () => new Date(); ``` In this example, in the ES5 Version have <code>function(){}</code> declaration and <code>return</code> keyword needed to make a function and return a value respectively. In the __Arrow Function__ version we only need the <code>()</code> parentheses and we don't need a <code>return</code> statement because __Arrow Functions__ have a implicit return if we have only one expression or value to return. ``` //ES5版本 函數問候（名稱）{ return '你好' + 名字 + '!'; } //ES6版本 const 問候 = (name) => `Hello ${name}` ; constgreet2 = 名稱 => `Hello ${name}` ; ``` We can also parameters in __Arrow functions__ the same as the __function expressions__ and __function declarations__. If we have one parameter in an __Arrow Function__ we can omit the parentheses it is also valid. ``` const getArgs = () => 參數 const getArgs2 = (...休息) => 休息 ``` __Arrow functions__ don't have access to the <code>arguments</code> object. So calling the first <code>getArgs</code> func will throw an Error. Instead we can use the __rest parameters__ to get all the arguments passed in an arrow function. ``` 常量資料 = { 結果：0， 數字：\[1,2,3,4,5\], 計算結果() { ``` // "this" here refers to the "data" object ``` ``` const addAll = () => { ``` ``` // arrow functions "copies" the "this" value of ``` ``` // the lexical enclosing function ``` ``` return this.nums.reduce((total, cur) => total + cur, 0) ``` ``` }; ``` ``` this.result = addAll(); ``` } }; ``` __Arrow functions__ don't have their own <code>this</code> value. It captures or gets the <code>this</code> value of lexically enclosing function or in this example, the <code>addAll</code> function copies the <code>this</code> value of the <code>computeResult</code> method and if we declare an arrow function in the global scope the value of <code>this</code> would be the <code>window</code> object. ###44. What are __Classes__? [↑](#the-questions "Back To Questions") __Classes__ is the new way of writing _constructor functions_ in __JavaScript__. It is _syntactic sugar_ for using _constructor functions_, it still uses __prototypes__ and __Prototype-Based Inheritance__ under the hood. ``` //ES5版本 函數人（名字，姓氏，年齡，地址）{ ``` this.firstName = firstName; ``` ``` this.lastName = lastName; ``` ``` this.age = age; ``` ``` this.address = address; ``` } Person.self = 函數(){ ``` return this; ``` } Person.prototype.toString = function(){ ``` return "[object Person]"; ``` } Person.prototype.getFullName = function (){ ``` return this.firstName + " " + this.lastName; ``` } //ES6版本 類人{ ``` constructor(firstName, lastName, age, address){ ``` ``` this.lastName = lastName; ``` ``` this.firstName = firstName; ``` ``` this.age = age; ``` ``` this.address = address; ``` ``` } ``` ``` static self() { ``` ``` return this; ``` ``` } ``` ``` toString(){ ``` ``` return "[object Person]"; ``` ``` } ``` ``` getFullName(){ ``` ``` return `${this.firstName} ${this.lastName}`; ``` ``` } ``` } ``` __Overriding Methods__ and __Inheriting from another class__. ``` //ES5版本 Employee.prototype = Object.create(Person.prototype); 函數 Employee(名字, 姓氏, 年齡, 地址, 職位名稱, 開始年份) { Person.call(this, 名字, 姓氏, 年齡, 地址); this.jobTitle = jobTitle; this.yearStarted = YearStarted; } Employee.prototype.describe = function () { return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}` ； } Employee.prototype.toString = function () { 返回“\[物件員工\]”； } //ES6版本 class Employee extends Person { //繼承自「Person」類 建構函數（名字，姓氏，年齡，地址，工作標題，開始年份）{ ``` super(firstName, lastName, age, address); ``` ``` this.jobTitle = jobTitle; ``` ``` this.yearStarted = yearStarted; ``` } 描述（） { ``` return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}`; ``` } toString() { // 重寫「Person」的「toString」方法 ``` return "[object Employee]"; ``` } } ``` So how do we know that it uses _prototypes_ under the hood? ``` 類別東西{ } 函數 AnotherSomething(){ } const as = new AnotherSomething(); const s = new Something(); console.log(typeof Something); // 記錄“函數” console.log(AnotherSomething 類型); // 記錄“函數” console.log(as.toString()); // 記錄“\[物件物件\]” console.log(as.toString()); // 記錄“\[物件物件\]” console.log(as.toString === Object.prototype.toString); console.log(s.toString === Object.prototype.toString); // 兩個日誌都回傳 true 表示我們仍在使用 // 底層原型，因為 Object.prototype 是 // 原型鏈的最後一部分和“Something” // 和「AnotherSomething」都繼承自Object.prototype ``` ###45. What are __Template Literals__? [↑](#the-questions "Back To Questions") __Template Literals__ are a new way of making __strings__ in JavaScript. We can make __Template Literal__ by using the backtick or back-quote symbol. ``` //ES5版本 vargreet = '嗨，我是馬克'; //ES6版本 讓問候 = `Hi I'm Mark` ； ``` In the ES5 version, we need to escape the <code>'</code> using the <code>\\</code> to _escape_ the normal functionality of that symbol which in this case is to finish that string value. In Template Literals, we don't need to do that. ``` //ES5版本 var 最後一個字 = '\\n' - ' 在' - '我\\n' - '鋼鐵人\\n'; //ES6版本 讓最後一個單字=` ``` I ``` ``` Am ``` 鋼鐵人 `; ``` In the ES5 version, we need to add this <code>\n</code> to have a new line in our string. In Template Literals, we don't need to do that. ``` //ES5版本 函數問候（名稱）{ return '你好' + 名字 + '!'; } //ES6版本 const 問候 = 名稱 => { 返回`Hello ${name} !` ; } ``` In the ES5 version, If we need to add an expression or value in a string we need to use the <code>+</code> or string concatenation operator. In Template Literals, we can embed an expression using <code>${expr}</code> which makes it cleaner than the ES5 version. ###46. What is __Object Destructuring__? [↑](#the-questions "Back To Questions") __Object Destructuring__ is a new and cleaner way of __getting__ or __extracting__ values from an object or an array. Suppose we have an object that looks like this. ``` 常量僱員 = { 名字：“馬可”， 姓氏：“波羅”， 職位：“軟體開發人員”， 聘用年份：2017 }; ``` The old way of getting properties from an object is we make a variable t
管理社區是一項艱鉅的工作，但經過幾年的努力，它就變得容易了。這是我們社區的第一個月，我想向您展示我們迄今為止所取得的成就。 如果您打算經營一個社區甚至加入一個社區，本系列將以[地下室開發人員](https://discord.gg/basementdevs)為例向您展示如何衡量社區的健康狀況。 目錄 -- - [一、整體成就](#1-general-achievements) - [2. 人口統計](#1-demographics) ``` * [2.1 New Members](#21-new-members) ``` ``` * [2.2 Members Activation](#22-members-activation) ``` ``` * [2.3 Member Visits & Comunicators](#23-member-visits-amp-comunicators) ``` - [3. 活動](#3-events) - [4. 合作夥伴](#4-partnerships) - [5. 發佈內容](#5-published-content) - [6. 現在怎麼辦？](#6-what-now) 一、整體成就 ------ 首先，我要感謝加入社群的幾位讀者。現在我們有幾個波蘭人每天在那裡參與活動。 > 僅供參考：社群正在尋找像您這樣的成員，所以請盡快加入我們！ ：D  我們最新的每週例會人數達到了 71 人的高峰。 自從我們建立社群以來，我們的每週會議一直是討論新機會、專案和其他機會，並聽取成員意見的地方。 < 視訊控制樣式=“高度：100％；”> 您的瀏覽器不支援影片標籤。 說到社群回饋，我們的大多數成員都是想要習慣英語的巴西人，因此社群中製作的第一個專案是一個覆蓋層，用於將我們在每週會議中所說的所有內容從英語翻譯成巴西葡萄牙語！為[Pantotone](https://github.com/Pantotone)乾杯，這個神奇工具的創造者！  此外，由於我們開始建立專案，因此建立了一個新的 GitHub 組織來託管與我們社區相關的所有專案。不要忘記[關注我們的社區](https://github.com/basementdevs)以獲取最新的專案更新！ 2. 人口統計 ------- 當我們談論成長時，我們談論的是數字！以下是**1 月 14 日至 2 月 12 日**的回顧。 ### 2.1 新成員 自 1 月 15 日起，我們的會員人數增加了一倍！目前我們的伺服器上有 2197 名活躍會員，其中許多人每天都在不同風格的語音頻道（小組或一對一）和文字頻道中練習英語。  ### 2.2 會員激活 我們本月將研究的指標之一是新成員的“激活”，即他們了解社區的含義以及為什麼它非常適合他們。  我們在第一個月做得很好，你可以看到圖表直接到底部，但這只是因為上週我們在巴西舉辦了**狂歡**節，所以這是預料之中的，我們的巴西開發商值得參加這個令人驚嘆的活動和一個愉快的假期。 ### 2.3 會員來訪及溝通  我們的平均溝通者數量或參與度是 8%。我們的目標是到 3 月底達到 15%。我們要怎麼做呢？我還不知道，但有了這份每週活動列表，這應該是個不錯的選擇。 3. 活動 ----- 活動是我們社區的核心，上個月舉辦了 16 場預先安排的活動，分為 5 個模式： - **地下室會議：**我們的每週會議於每週二晚上 07:00 BRT 舉行。其目的是分享我們社區的計劃、宣布新的合作夥伴關係、向成員通報最新訊息，當然還有練習英語。 - **和雷納託一起練習：**每週三，我們的社區都會聚在一起和雷納託一起練習英語。在這次練習中，我們的成員會得到一個主題，每個人都與雷納托就這個主題進行對話，總是引入新單字來擴大社群的詞彙量。 - **與JP一起旅行：**在本次會議中，我們的會員將與JP一起計劃他們的夢想旅行，討論費用、參觀地點、當地美食等等！快來和我們一起規劃您的旅程。 - **與李奧納多一起練習：**每週四早上，我們的社區都會與李奧納多一起參加英語練習課程。參與者被分配一個主題並與李奧納多對話，融入新單字建立詞彙量。 - **Coding Dojo：**二月初，我們推出了 Basement Coding Dojo，這是一項社群成員在模擬衝刺期間在開發團隊中扮演角色的活動。我們的第一個 Dojo 開發團隊由[Gabriel](https://github.com/gvieiragoulart) 、 [Lorena](https://github.com/Lorenalgm) 、 [Lucas](https://github.com/lucas-pace) 、 [Pedro](https://github.com/pedrovian4) 、 [Renato](https://github.com/reenatoteixeira)和[Yuri](https://github.com/yurastico)組成。在一個月的時間裡，團隊的目標是建立一個簡單但完整的應用程式，從事設計、後端和前端工作，參加每週會議並與開源專案互動。您可以在[此存儲庫](https://github.com/basementdevs/english-coding-dojo)中找到有關此事件的更多資訊。 4. 合作夥伴 ------- 現在我們最大的目標是找到HR公司甚至是正在積極招募開發人員的公司。 這個月，我們的目標是建立一個人口統計資料，提供更多有關有趣事物的訊息，為我們的會員帶來這些機會，例如：資歷、堆疊等。到目前為止，我們已經取得了一些成果，但還沒有什麼意義，因為這對我們來說是一種新方法。  如果您的公司有空缺職位，請發送電子郵件至 [email protected]，我會將其轉發給我們最好的會員進行申請！ 5. 發佈內容 ------- 上個月，我們社群的成員在這個平台上發表的文章獲得了多項認可。我們想重點介紹以下文章，這些文章是其發布週中最相關的文章（前 7 名）。 {% 嵌入 https://dev.to/danielhe4rt/database-101-how-to-model-leaderboards-for-1m-players-game-2pfa %} 「在他的『Database 101』系列的最新一期中，@danielhe4rt 探索了為擁有100 萬玩家的遊戲排行榜建模的複雜藝術。本文借鑒開源節奏遊戲YARG 的個人經驗並利用ScyllaDB 的效率，深入研究了查詢驅動的資料建模和寬列資料庫概念，為製作高性能排行榜提供了全面的指南。” {% 嵌入 https://dev.to/reenatoteixeira/everything-that-you-need-to-know-about-git-2440 %} 「透過這份全面的初學者指南，探索GIT 的程式碼版本控制世界！這篇突破性文章由首次DEV 貢獻者@reenatoteixeira 撰寫，精心解開了GIT 的所有要點，確保學習之旅順利進行。具有清晰的解釋和詳細的步驟-通過逐步指導，您將掌握 GIT 的藝術，為您提供無縫的版本控制功能。” {% 嵌入 https://dev.to/kecbm/staircase-detail-112g %} 透過我們的貢獻者@kebcm 建立的這個精彩的分步教程，了解如何為初學者在編程中建立樓梯！樓梯是由一系列台階形成的視覺表示，每個台階都由 # 字元表示。探索如何建立列印自訂尺寸樓梯的函數。 {% 嵌入 https://dev.to/anthonyvii/be-a-better-developer-with-these-git-good-practices-2dim %} 如果您是開發人員，您可能會經常使用 Git。無論是單獨還是團隊開發，這對於應用程式開發都至關重要。但許多人都在與混亂的儲存庫和不清楚的提交訊息/分支名稱作鬥爭。學好 Git 並堅持最佳實踐是職業發展的關鍵之一。 6. 現在怎麼辦？ --------- 到目前為止，我們的社區正在以一種我們意想不到的方式發展，但仍然以健康的方式發展。許多以前從未嘗試過**技術英語**的人已經邁出了練習的第一步，並開始**看到新的可能性**，這就是我們需要的燃料。 如果您想成為這一變革之旅的一部分，請加入我們的[Discord 伺服器](https://discord.gg/basementdevs)，並且不要忘記喜歡和評論本文！ 歡迎任何讓我們的社區變得更好的建議，好嗎？保持水分，下個月見！ > 順便說一句，**雷納托**和**安東尼**在這份報告中幫助我乾杯：D --- 原文出處：https://dev.to/danielhe4rt/what-weve-achieved-with-1-month-of-basement-devs-3pec
https://youtu.be/U-FNn-xZ2tI?si=U5d9VAz9boyOjWtP 五子棋不只是小朋友的遊戲 其中也有很複雜的計算力 以及針對開局走勢思考的判斷能力 有空的時候研究棋類 對活化大腦是有幫助的 只要你努力多鑽研一點 而不是只停留在 阿 這就是圈圈叉叉 那說不定有一天你也能上場比賽~
如果您是開發人員，您可能每天都會使用名為 Git 的版本控制系統。無論是團隊工作還是個人工作，該工具的使用對於應用程式的開發過程都至關重要。然而，通常會遇到混亂的儲存庫、提交的訊息不明確、無法傳達有用資訊以及濫用分支等問題。對於想要在就業市場中脫穎而出的人來說，了解如何正確使用 Git 並遵循良好實踐至關重要。 --- 目錄 -- 1. [Git 分支的命名約定](#naming-conventions) 2. [分支名稱約定前綴](#branch-names) 3. [提交訊息](#commit-message) 4. [常規提交](#conventional-commits) --- Git 分支的命名約定<a id="naming-conventions"></a> ------------------------------------------ 當我們使用程式碼版本控制時，我們應該遵循的主要良好實踐之一是為分支、提交、拉取請求等使用清晰且描述性的名稱。確保所有團隊成員的簡潔工作流程至關重要。除了提高生產力之外，記錄專案的開發過程還可以簡化團隊合作。透過遵循這些做法，您很快就會看到好處。 基於此，社群建立了一個您可以在專案中遵循的分支命名約定。以下專案的使用是可選的，但它們可以幫助提高您的開發技能。 **1.小寫：**分支名稱不要使用大寫字母，堅持小寫； **2. 連字符分隔：**如果您的分支名稱由多個單字組成，請用連字符分隔它們。遵循烤肉串慣例。避免 PascalCase、camelCase 或 Snake\_case； **3. (az, 0-9)：**分支名稱中僅使用字母數字字元和連字符。避免使用任何非字母數字字元； **4. 請不要使用連續的連字號（--）。**這種做法可能會令人困惑。例如，如果您有分支類型（例如功能、錯誤修復、修補程式等），請改用斜線 (/)； **5. 避免以連字符結尾分支名稱**。這是沒有意義的，因為連字符分隔單詞，並且末尾沒有單詞可以分隔； **6. 這個做法最重要：**使用描述性的、簡潔的、清晰的名稱來解釋分支上做了什麼； **分支名稱錯誤** - `fixSidebar` - `feature-new-sidebar-` - `FeatureNewSidebar` - `feat_add_sidebar` **好聽的支行名字** - 功能/新側邊欄 - 新增側邊欄 - 修補程式/取得歷史資料上的間隔查詢參數 --- 分支名稱約定前綴<a id="branch-names"></a> --------------------------------- 有時分支的目的並不明確。它可以是新功能、錯誤修復、文件更新或其他任何內容。為了解決這個問題，通常的做法是在分支名稱上使用前綴來快速解釋分支的用途。 - **feature：**它傳達了將要開發的新功能。例如， `feature/add-filters` ； - **發布：**用於準備新版本。前綴`release/`通常用於在合併來自分支主伺服器的新更新以建立版本之前執行諸如上次觸及和修訂之類的任務。例如， `release/v3.3.1-beta` ； - **bugfix：**它表示您正在解決程式碼中的錯誤，並且它通常與問題相關。例如， `bugfix/sign-in-flow` ； - **hotfix：**與bugfix類似，但它與修復生產環境中存在的嚴重錯誤有關。例如， `hotfix/cors-error` ； - **docs：**寫一些文件。例如， `docs/quick-start` ； 如果您正在使用任務管理工作流程，例如 Jira、Trello、ClickUp 或任何可以建立使用者故事的類似工具，則每張卡片都有一個關聯的編號。因此，通常在分行名稱的前綴上使用這些卡號。例如： - `feature/T-531-add-sidebar` - `docs/T-789-update-readme` - `hotfix/T-142-security-path` --- 提交訊息<a id="commit-message"></a> ------------------------------- 讓我們來談談提交訊息。不幸的是，很容易找到帶有“加入了很多東西”或“皮卡丘，我選擇你”之類的提交訊息的專案......是的，我曾經發現一個專案，其中提交訊息與神奇寶貝戰鬥有關。 提交訊息在開發過程中非常重要。創造一段美好的歷史將在你的旅程中給你很多幫助。與分支一樣，提交也有社區建立的約定，您可以在下面了解： - 提交訊息包含三個重要部分：主題、說明和頁腳。提交的主題是必要的，它定義了提交的目的。描述（正文）用於為提交的目的提供額外的上下文和解釋。最後是頁腳，通常用於元資料，例如分配提交。雖然同時使用描述和頁腳被認為是一種很好的做法，但這不是必需的。 - **在主題行中使用祈使語氣。**例如： > `Add README.md` ✅; > `Added README.md` ❌； > `Adding README.md` ❌； - **主題行的第一個字母大寫。**例如： > `Add user authentication` ✅； > `add user authentication` ❌； - **不要以句號結束主題行。**例如： > `Update unit tests` ✅； > `Update unit tests.` ❌; - 主題行限制在**50個字元**以內，即清晰、簡潔； - 將正文包裹在**72 個字元**處，並將主題與**空白行**分隔開； - 如果您的提交正文有多個段落，請**使用空白行將它們分開**； - 如有必要，使用**要點**而不是僅使用段落； --- 常規提交<a id="conventional-commits"></a> ------------------------------------- > “常規提交規範是基於提交訊息的輕量級約定。它提供了一組簡單的規則來建立明確提交歷史記錄。” 以下引用來自Conventional Commit 的官方網站。該規範是社區中提交訊息最常使用的約定。 ### 結構 ``` <type>[optional scope]: <description> [optional body] [optional footer(s)] ``` ### 提交類型 我們要研究的第一個結構是提交類型。它提供了有關此提交中所做操作的清晰上下文。您可以在下面看到提交類型清單以及何時使用它們： - **feat：**引進新功能； - **fix：**修復軟體錯誤； - **refactor：**用於程式碼更改，保留其整體功能； - **chore：**不影響生產程式碼的更新，涉及工具、配置或程式庫調整； - **docs：**文件文件的新增或修改； - **perf：**程式碼更改提高效能； - **style：**與程式碼呈現相關的調整，例如格式和空白； - **test：**測試的包含或修正； - **build：**影響建置系統或外部依賴項的修改； - **ci：** CI 設定檔和腳本的更改； - **env：**描述 CI 流程中設定檔的調整或加入，例如容器配置參數。 ### 範圍 範圍是一種結構，可以在提交類型之後加入以提供額外的上下文資訊： - `fix(ui): resolve issue with button alignment` - `feat(auth): implement user authentication` ### 身體 提交訊息的正文提供了提交引入的更改的詳細說明。它通常會加入在主題行後面的空白行之後。 **例子：** ``` Add new functionality to handle user authentication. This commit introduces a new module to manage user authentication. It includes functions for user login, registration, and password recovery. ``` ### 頁尾 提交訊息的頁腳用於提供與提交相關的附加資訊。這可以包括諸如誰審查或批准了變更之類的詳細資訊。 **例子：** ``` Signed-off-by: John <[email protected]> Reviewed-by: Anthony <[email protected]> ``` ### 突破性變革 指示提交包含可能導致相容性問題或需要修改相關程式碼的重大變更。您可以在頁腳中新增`BREAKING CHANGE`或包含`!`在類型/範圍之後。 ### 使用常規提交的提交範例 ``` chore: add commitlint and husky chore(eslint): enforce the use of double quotes in JSX refactor: type refactoring feat: add axios and data handling feat(page/home): create next routing chore!: drop support for Node 18 ``` **包含主題、正文和頁尾：** ``` feat: add function to convert colors in hexadecimal to rgba Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Reviewed-by: 2 Refs: #345 ``` --- 參考 -- - <https://www.conventionalcommits.org> - <https://medium.com/@abhay.pixolo/naming-conventions-for-git-branches-a-cheatsheet-8549feca2534> - <https://se-education.org/guides/conventions/git.html> - <https://cbea.ms/git-commit/> https://blog.geekhunter.com.br/o-que-e-commit-e-como-usar-commits-semanticos/ --- 原文出處：https://dev.to/anthonyvii/be-a-better-developer-with-these-git-good-practices-2dim
你能在 4 小時內完成你的作品集嗎？ 聽起來很瘋狂，對吧？ > 您的作品集是一個展示您最好的作品、個性和才能的網站。您可以被雇用，人們可以更多地了解您。 建立一個好的投資組合需要遵循各種規則，而條件取決於您的職業。例如，使用者體驗設計師與軟體開發人員的情況可能完全不同。 ### 我認為一個好的作品集應該是什麼樣的。 對我來說，這三件事對於一個好的作品集是必不可少的。 應該很**簡單**。**在職的**。**專業的**。 - 存取作品集的人的體驗應該很好。 - 此人應該能夠與您聯繫（通常是聯絡表單）。 - 作品集應該有一個故事和一點個人風格。 - 它應該放在網域上以提高可信度。 - 它不應該有太多會破壞這一刻的花俏動畫。 ### 為什麼你應該製作一個投資組合？ 擁有作品集是一種常見的做法，尤其是當您有多個東西要展示時。 > 並非每個人都有時間或資源來製作完全適合自己需求的獨特投資組合。 嗯，你不應該。 在這個不斷發展的世界中沒有必要。 沒有非常容易使用的程式碼工具。 但是你能在一天甚至一小時內製作出作品集嗎？ 我們無法製作最好的作品集，但我們可以製作一個效果良好的體面作品集。 如果您不喜歡這個也沒關係，因為我知道製作具有自己獨特風格的作品集需要花費很多時間。 每個人都有自己的經歷，每個人都試圖根據我們多年來所學到的知識互相幫助。 一點注意 ---- 我是使用者體驗法則的忠實粉絲，知道如何才能做到優秀。 我不會介紹像 Bubble、Framer、Wix 和 Squarespace 這樣的無程式碼工具，因為它們已經很流行了。 --- 我管理多個社群檔案，因此我總是糾結於將觀眾引導至哪些社群媒體。 大多數人都在努力擁有多個配置文件，您一定聽說過`linkfree`或`bento` 。 您不僅僅是一系列關於您的連結。 你必須講述你的故事。這個故事很重要。 作品集是實現這一目標的最佳方式，因此這裡有一些工具，對於想要快速獲得具有良好使用者體驗的作品集的人來說將很有幫助。 您可以使用每個選項連接到您的網域。 我敢打賭這篇文章會讓你大吃一驚。 那我們就開始吧。 --- 1.[聚合工作](https://www.polywork.com/invite/anmol_baranwal-voltorb) ---------------------------------------------------------------- Polywork 是 2022 年最好的產品之一。 它可以在幾秒鐘內將您的 LinkedIn 個人資料轉換為個人網站。 我是 Polywork 的忠實粉絲，因為製作獨特風格的作品集是多麼容易。它有一個圖形編輯器，可以讓你建立部分，你也可以在後台使用人工智慧。 相信我，這就是您所需要的一切。  最棒的是它是免費的，您可以以大約 96 美元購買一年。考慮到您將透過高級版本解鎖所有新`fonts` 、 `layouts`和`colors` ，這是一個相當不錯的交易。 這是來自其中一個模板。酷吧 :D  在免費版本中，您將獲得一個按鈕來隨機化您的作品集（不同的主題和佈局）。一定要嘗試！ 您可以加入這樣的個人化連結。  您可以建立亮點以及「關於我」、「社交連結」和個人化「標題」等部分。此外，還有超過 1,000 種針對不同個人資料量身定制的徽章供您選擇。  開箱即用的是，您可以控制您的`social card` 、 `metadata` ，甚至頁面`title` 。這使您可以完全控制，使您的投資組合看起來真實。  有很多話要說，但最方便的功能是有人可以多快與您聯繫。 就好像在短短幾秒鐘內，讓我們面對現實吧，這正是每個投資組合所需要的。  您可以查看我的[Polywork 個人資料](https://www.polywork.com/anmolbaranwal)作為樣本。  關於 Polywork 的最佳簡介之一來自 Craftwork 的共同創辦人[Mike Bifulco](https://www.polywork.com/irreverentmike) 。一探究竟！ > 在 Polywork 上創造一個好的作品集甚至不需要超過 4 小時。 2.[來自珍珠](https://peerlist.io/anmolbaranwal/signup) -------------------------------------------------- 我加入 Peerlist 已經幾個月了。我也是他們的測試版行動用戶之一。 除了可以使用同行清單做的其他事情之外，您還可以在網域上製作良好的投資組合。 讓我們討論其中的一些。   您可以在一個設定檔中包含所有內容。 - GitHub 個人資料、貢獻和固定儲存庫 - DEV + Hashnode + Medium 部落格文章 - YouTube影片 - 子堆疊 + RSS 來源 - Codeforces 和其他編碼設定文件 - 您甚至可以從 Product Hunt 加入您的狩獵或製造商產品 基本上一切:D   對等列表上還有一個集合的概念。我在其他地方見過這些，但是將這些放在您的個人資料中確實很棒。 您可以在一個地方新增社交資料卡。 以及您推薦的影片、書籍、播客或自訂內容。  您甚至可以找到工作並通過您的簡歷和經驗進行驗證。  您還可以做的另一件事是為某人提供擔保，這可以提高可信度並讓您在個人資料中具有明顯的優勢。它與LinkedIn上的推薦類似，但他們在卡片上做了一些創意。  您可以免費將您的個人資料連接到您的自訂網域。所以，這就是你的投資組合的樣子。  順便說一句，如果您想知道 -> 您的社交連結將位於底部。 您甚至可以讓您的專案在同行清單中受到關注：D 牽涉的事情很多，我無法一一列舉。 我將在後面的文章中介紹 Peerlist 中令人興奮的內容。 請注意！ 3.[展示](https://www.showwcase.com/) ---------------------------------- Showwcase 的主要目標是建立一個強大的開發者社群。 Showwcase 是我幾個月前使用的第一個。  一種簡單而強大的方式來展示您的故事。 最獨特的功能之一是您可以與 Stripe 連接，並且可以從付費追蹤者那裡賺錢。多麼酷啊？ 這些是您可以在自訂部分之外製作的一些部分。  您可以輕鬆加入社交連結並查看一些很棒的社區，例如`Open Source` 、 `Hackathons` 、 `Internships` 、 `Portfolios`等等。  您可以獲得推薦，甚至可以加入合作者，這是一件很划算的事情。我從一開始就對此感到驚訝。  您可以使用您的個人連結產生並製作適合 ATS 的簡歷。 例如，您可以[在這裡](https://www.showwcase.com/anmol-baranwal/resume/ats)找到我的。它使用網站資訊。順便說一下，我的個人資料沒有更新：D 這個社群非常龐大，我已經加入 Showwcase 幾個月了。  您可以在[anmol-baranwal.showwcase.com](https://anmol-baranwal.showwcase.com/)查看我的展示個人資料 請參閱 Showwcase 執行長[Rong](https://www.showwcase.com/tianrongliew)的簡介。 您可以在 Showwcase 進行招募和受聘。 我不喜歡簡歷功能，該功能只是從個人資料中收集資料。有履歷會更有利。 但 Showwcase 已經提供了超出您所需的功能。 4.[閱讀](https://read.cv/) ------------------------ 這是製作作品集的另一種方式。我喜歡 Read 的使用者介面。 最好的事情是有人可以隨時隨地與您聯繫，並且很容易找到帶有甜蜜表情符號的聯繫按鈕。它實際上鼓勵人們使用該聯繫部分。  您可以在 ReadCV 上查看[Edmundo Santos](https://read.cv/edmundo)的個人資料。非常棒。  有各種各樣的部分，如社交聯繫、經驗、副專案、演講、寫作等等。  您可以加入的部分數量令人難以置信。它為您在各個部分提供了很大的靈活性。  當然，還有職位列表和自訂網域，您可以將您的個人資料連結到其中。 佈局是固定的，但足以讓您入門。 我見過很多偉大的人使用“閱讀”作為他們的首選個人資料！ --- 這些是您可以使用的一些很棒的資源。 - [超過 25 個帶有程式碼的令人驚嘆的作品集](https://dev.to/anmolbaranwal/stunning-portfolios-that-will-blow-your-mind-fuel-your-creativity-226o) - [無需編碼即可建立令人驚嘆的網站的 20 個工具](https://dev.to/anmolbaranwal/20-game-changing-website-builders-to-build-classy-websites-without-coding-4ll7) - [開發人員的最小組合模板](https://github.com/cobiwave/simplefolio)- GitHub 上有 13k Stars --- 當您將個人資料連接到網域時，沒有人有時間查看您是否自己製作了作品集。只要它對你有用，那就太棒了。 你覺得有用嗎？ 除了 ReadCV（新手）之外，我已經嘗試了這些方法好幾個月了，直到那時我才讓你知道。 順便說一句，這些都沒有贊助。我希望如此。哈哈！ 如果你堅持使用那些簡單、無聊的工具，你就錯過了。在這個科技世界中，您可以毫無麻煩地建立您的投資組合。 程式設計師會否認建立這樣的作品集行不通，但這不是真的，如果它對你有用那就太好了。 我已經完成了 5000 多個小時的編程，我可以這麼說。 任何好的東西都比糟糕的投資組合好。 正如我在一開始所說的，如果您不想透過程式設計來建立原始作品集也沒關係，因為只有開發人員才應該使用程式碼來完成它。 您還需要什麼？ 匆忙！建立您的作品集並向世界展示:D 你認為哪個最好？我喜歡 Polywork & Read。兩者都是我在列表中使用最少的：D 我很高興我終於寫了這篇文章。 我透過深入研究並分享我的經驗來撰寫內容。您可以透過[在 GitHub 上贊助](https://github.com/sponsors/Anmol-Baranwal)我來支持我。 請在[GitHub](https://github.com/Anmol-Baranwal)和[Twitter](https://twitter.com/Anmol_Codes)上關注我:) > 如果您熱衷於贊助這篇文章，請給我發訊息 [email protected] 或在 Twitter 上聯繫我！ 🚀 {% 嵌入 https://github.com/Anmol-Baranwal %} 多寫，多啟發。  --- 原文出處：https://dev.to/anmolbaranwal/make-your-portfolio-in-just-4-hours-its-possible-2p3
您是否正在尋找**最好的 JavaScript 專案**來透過原始程式碼增加您的 JavaScript 知識？ 在這篇文章中，我分享了 100 個最佳 JavaScript 教學。有各種各樣的專案，例如初學者 JavaScript 專案、中級 JavaScript 專案和高級 JavaScript 專案。 因此，無論您對 JavaScript 有什麼樣的了解，這些專案都會對您有所幫助。 🥳🥳 JavaScript 專案 ------------- JavaScript 是用於 Web 開發的最受歡迎的程式語言之一。它用途廣泛、功能強大，可用於建立各種專案，從簡單的腳本到複雜的 Web 應用程式。 如果您希望提高您的 JavaScript 技能或向潛在雇主展示您的能力，那麼**使用原始程式碼開發 JavaScript 專案**是一個很好的方法。 這裡我給了每個專案的源碼連結。因此，您可以自己練習這些**JavaScript 專案**。 😇  最佳 JavaScript 專案創意 ------------------ 讓我們來看看前 100 個 JavaScript 專案並討論如何建立它們。 ### 適合初學者的 JavaScript 專案 如果您是一位想要深入編碼世界或尋求擴展技能的初學者，那麼從**簡單的 JavaScript 專案**開始可能是寓教於樂的絕佳方式。這個初學者級 JavaScript 專案一定會對您有幫助。 #### 圖像顏色選擇器 Javascript  JavaScript 中的圖像顏色選擇器是一個**簡單的 JavaScript 專案**，可讓使用者直接從圖像中選擇顏色。 它使用戶能夠以互動方式從網頁上顯示的圖像中選取顏色，從而簡化諸如顏色匹配、顏色採樣或從圖像中提取顏色資訊等任務。 [預覽和程式碼](https://codingartistweb.com/2022/11/image-color-picker-javascript/) #### 數字時鐘 JavaScript  JavaScript 中的數位時鐘是一個基於 Web 的應用程式或 JavaScript 專案，它以數位格式在網頁上顯示當前時間。 這是一個常見且簡單的專案，展示如何使用 JavaScript 在網路上建立動態和互動式內容。 [預覽和程式碼](https://dev.to/nehasoni__/digital-clock-using-javascript-2648) #### 使用 JavaScript 的秒錶  使用 JavaScript 的秒錶是一個基本的 JavaScript 專案，可讓使用者測量經過的時間。它通常由一個用於開始計時的開始按鈕、一個用於暫停計時器的停止按鈕以及一個用於清除已用時間並重新開始的重置按鈕組成。 [預覽和程式碼](https://dev.to/shantanu_jana/create-a-simple-stopwatch-using-javascript-3eoo) #### RGB 顏色滑桿 JavaScript  JavaScript 中的 RGB 顏色滑桿是一個**適合初學者的完美 JavaScript 專案**，它允許使用者透過調整顏色的紅色、綠色和藍色 (RGB) 分量的值來選擇顏色。 此互動式元件通常由三個滑桿或輸入欄位（每個顏色通道一個）以及一個預覽區域組成，該區域根據所選 RGB 值顯示結果顏色。 [預覽和程式碼](https://codingartistweb.com/2023/05/rgb-color-slider-javascript/) #### JavaScript 年齡計算器  JavaScript 年齡計算器是適合初學者的簡單 JavaScript 專案，它根據出生日期和當前日期計算一個人的年齡。它通常以生日的形式獲取用戶的輸入，然後計算並顯示他們的年齡。 [預覽和程式碼](https://dev.to/code_mystery/javascript-age-calculator-calculate-age-from-date-of-birth-o9b) #### 懸停時影像縮放  JavaScript 中的懸停圖像縮放功能可讓使用者將遊標懸停在圖像上時放大圖像。 此效果可讓使用者更仔細地查看圖像中的細節，從而增強使用者體驗，而無需使用者點擊其他控製或與其他控制項進行互動。 [預覽和程式碼](https://dev.to/shantanu_jana/image-zoom-on-hover-using-javascript-code-demo-328g) #### OTP 生成器 JavaScript  JavaScript 中的 OTP（一次性密碼）產生器是一種產生唯一程式碼的工具，該程式碼通常由數字或字母數字字元組成，該程式碼一次性使用或在有限時間內有效。 OTP 通常用於 Web 應用程式中的使用者驗證、雙重認證 (2FA) 和帳戶驗證流程。 [預覽和程式碼](https://codingartistweb.com/2023/12/otp-generator/) #### JavaScript 手電筒效果  JavaScript 手電筒效果模擬手電筒或聚光燈在網頁上產生的照明。它是一種互動式視覺效果，透過將注意力集中在頁面的特定元素或區域來增強使用者體驗。 實現手電筒效果通常涉及在網頁上建立遮罩層，並允許使用者使用滑鼠或觸控輸入來移動手電筒。 [預覽和程式碼](https://groundtutorial.com/flashlight-effect-with-html-css-javascript/) #### 影像手風琴  JavaScript 中的圖像手風琴是一種使用者介面元素，它以垂直或水平堆疊的形式顯示一組圖像，允許用戶展開和折疊單個圖像以顯示與每個圖像相關的更多細節或資訊。 這種互動創造了一種視覺上吸引人的方式來呈現圖像集合，同時節省網頁空間。 [預覽和程式碼](https://groundtutorial.com/image-accordion-using-html-css-javascript/) #### 拖放元素  JavaScript 拖放功能可讓使用者透過點擊網頁元素並將其拖曳到頁面上的不同位置來與它們互動。 此功能通常在 Web 應用程式中用於執行諸如重新排序清單、在容器之間移動元素或建立互動式使用者介面等任務。 [預覽和程式碼](https://groundtutorial.com/draggable-element-javascript/) #### 隨機數產生器  JavaScript 中的隨機數產生器（RNG）是一種產生指定範圍內或具有特定特徵的隨機數的工具。隨機數通常用於遊戲、模擬、密碼學和統計分析等應用。 JavaScript提供了用於生成隨機數的內建函數和方法，可以根據應用程式的要求進行自訂。 [預覽和程式碼](https://foolishdeveloper.com/random-password-generator-with-javascript/) #### 使用 JavaScript 的小費計算器  [預覽和程式碼](https://groundtutorial.com/tip-calculator-html-css-javascript/) #### HTML、CSS、JS 中的雙範圍滑桿  [預覽和程式碼](https://groundtutorial.com/double-range-slider-in-html-css-javascript/) #### 使用 JavaScript 的倒數計時器  [預覽和程式碼](https://dev.to/shantanu_jana/how-to-build-a-countdown-timer-using-javascript-4f4h) #### 使用 JavaScript 的漸層顏色產生器  [預覽和程式碼](https://dev.to/shantanu_jana/gradient-color-generator-with-javascript-html-5e3p) #### 使用 Javascript 懸停時圖像縮放  [預覽和程式碼](https://dev.to/shantanu_jana/image-zoom-on-hover-using-javascript-code-demo-328g) ### 中階 JavaScript 專案 對於中級 JavaScript 開發人員來說，有許多專案提供了擴展技能、探索新技術和深入研究 Web 開發概念的機會。以下是為中級開發人員量身定制的 JavaScript 專案想法清單： #### 自訂遊標  JavaScript 中的自訂遊標是指以自訂設計的圖形或 HTML 元素取代預設遊標外觀（例如箭頭或手形指標）的能力。這使得網頁開發人員能夠建立與網站主題或品牌相符的獨特且具有視覺吸引力的遊標效果。 [預覽和程式碼](https://foolishdeveloper.com/simple-mouse-cursor-effects-using-javascript-free-code/) #### 回文檢查器應用程式  JavaScript 中的回文檢查器應用程式是一個簡單的 Web 應用程式，允許使用者輸入一串字元並檢查它是否是回文。 回文是單字、片語、數字或其他字元序列，無論空格、標點符號和大小寫，向前和向後讀起來都相同。 [預覽和程式碼](https://groundtutorial.com/how-to-check-palindrome-in-javascript/) #### 滑動圖像拼圖 Javascript  JavaScript 中的滑動圖像拼圖是一種經典遊戲，其中圖像被分成較小的圖塊，玩家的目標是透過滑動它們來重新排列圖塊以形成原始圖像。遊戲提供了娛樂性和挑戰性的體驗，同時也考驗玩家解決問題的能力和空間推理能力。 [預覽和程式碼](https://groundtutorial.com/image-puzzle-game-javascript/) #### 使用 Javascript 的貨幣轉換器  使用 JavaScript 的貨幣轉換器是一個 Web 應用程式，允許用戶根據當前匯率將價值從一種貨幣轉換為另一種貨幣。 用戶通常輸入他們想要轉換的金額，選擇來源貨幣，然後選擇目標貨幣。然後，應用程式從 API 檢索最新的匯率並相應地計算換算後的金額。 [預覽和程式碼](https://codingartistweb.com/2023/03/currency-converter-with-javascript/) #### 猜顏色遊戲Javascript  JavaScript 中的顏色猜測遊戲是一種互動式 Web 應用程式，玩家會看到目標顏色，並且必須猜測該顏色的 RGB 或十六進位程式碼。遊戲通常會提供線索來幫助玩家做出有根據的猜測，例如在正方形中顯示顏色或提供有關顏色成分（紅色、綠色、藍色）或亮度的提示。 [預覽和程式碼](https://groundtutorial.com/color-guessing-game-javascript/) #### 拖放可排序列表  JavaScript 中的拖放可排序清單是一個使用者介面元件，可讓使用者透過將清單中的專案拖曳到新位置來重新排序。 此功能通常在 Web 應用程式中用於執行諸如重新排列待辦事項清單中的專案、對圖庫中的圖像進行排序或在文件管理器中組織文件等任務。 [預覽和程式碼](https://codingartistweb.com/2023/02/drag-and-drop-sortable-list-javascript/) #### 觸碰並拖曳影像滑桿  JavaScript 中的觸控和拖曳圖像滑桿是一個使用者介面元件，可讓使用者水平滑動或拖曳圖像以在圖像庫中導航。這種類型的滑桿針對智慧型手機和平板電腦等支援觸控的裝置進行了最佳化，但也可以與桌面瀏覽器上基於滑鼠的互動無縫協作。 [預覽和程式碼](https://groundtutorial.com/touch-image-slider-using-html-css-javascript/) #### 偵測網路速度 JavaScript  在 JavaScript 中偵測網路速度涉及測量從伺服器下載已知大小的檔案所需的時間。有多種技術可以實現此目的，包括使用 XMLHttpRequest、fetch API 或 HTML5 功能（例如網路資訊 API）。 [預覽和程式碼](https://foolishdeveloper.com/detect-internet-speed-javascript/) #### JavaScript 模因應用程式  JavaScript Memes 應用程式是一個 Web 應用程式，允許使用者瀏覽、搜尋和查看 memes。它通常從 API 或資料庫中獲取模因，並將其顯示在用戶友好的介面中，通常具有分頁、排序、過濾和社交共享選項等功能。用戶可以與迷因互動，例如喜歡或分享它們，並且可以上傳自己的迷因。 [預覽和程式碼](https://codingartistweb.com/2022/10/memes-app-html-css-javascript/) #### 多個骰子滾軸  JavaScript 中的多個骰子滾輪是一個允許使用者滾動多個不同類型的骰子（例如，d4、d6、d8、d10、d12、d20）並顯示結果的工具。 它通常用於《龍與地下城》等桌上角色扮演遊戲 (RPG) 中，或用於各種遊戲或教育目的。 [預覽和程式碼](https://codingartistweb.com/2023/10/multiple-dice-roller/) #### 密碼強度背景  JavaScript 中的密碼強度背景是一項功能，當使用者在輸入欄位中鍵入密碼時，可以提供使用者有關密碼強度的視覺回饋。 此回饋通常是透過更改輸入欄位的背景顏色來提供的，以根據預先定義的標準指示密碼是弱、中等還是強。 [預覽和程式碼](https://codingartistweb.com/2023/10/password-strength-background/) #### 自訂滑鼠懸停效果  JavaScript 中的自訂滑鼠懸停效果是一種視覺效果，當使用者將滑鼠懸停在網頁上的元素上時，效果會變更該元素的外觀或行為。 這種效果可以透過使用 CSS 過渡或動畫結合 JavaScript 事件監聽器來偵測滑鼠懸停事件並觸發所需的效果來實現。 [預覽和程式碼](https://codingartistweb.com/2023/12/custom-mouse-hover-effect-with-javascript/) #### 文字相似度檢查器  JavaScript 中的文字相似度檢查器是一種測量兩段文字或文件之間相似性的工具或應用程式。 文字相似度可以使用各種演算法和技術來計算，例如餘弦相似度、Jaccard 相似度、Levenshtein 距離或 TF-IDF（詞頻-逆文件頻率）。 [預覽和程式碼](https://codingartistweb.com/2023/09/text-similarity-checker/) #### 使用 JavaScript 的拋硬幣遊戲  [預覽和程式碼](https://dev.to/shantanu_jana/coin-toss-game-using-javascript-css-1cf0) #### Javascript 剪刀石頭布遊戲  [預覽和程式碼](https://groundtutorial.com/rock-paper-scissor-game-javascript/) #### JavaScript 中的右鍵上下文選單  [預覽和程式碼](https://dev.to/shantanu_jana/custom-right-click-context-menu-in-javascript-4112) ### 高級 JavaScript 專案 高階 JavaScript 專案通常涉及建立複雜的 Web 應用程式或利用複雜框架、程式庫和 API 的軟體解決方案。 這些專案可能需要前端開發、後端開發或全端開發的專業知識。以下是高級 JavaScript 專案的一些範例： #### 帶有儲存的隨機報價產生器  JavaScript 中帶有儲存功能的隨機報價產生器是一個 Web 應用程式，它向用戶顯示隨機報價，並允許他們保存自己喜歡的報價以供以後查看。 該應用程式通常從預先定義清單或外部 API 檢索報價，在網頁上動態顯示它們，並為使用者提供使用 localStorage 儲存和檢索所選報價的選項。 [預覽和程式碼](https://dev.to/nehasoni__/random-quote-generator-using-html-css-and-javascript-3gbp) #### 使用 JavaScript 的螢幕截圖應用程式  使用 JavaScript 建立螢幕截圖擷取應用程式涉及利用瀏覽器功能來擷取目前網頁或頁面中特定元素的螢幕截圖。 雖然 JavaScript 本身無法直接截取螢幕截圖，但它可以與瀏覽器 API 互動以觸發螢幕截圖擷取功能。 [預覽和程式碼](https://codingartistweb.com/2023/05/screenshot-capture-app-using-javascript/) #### 警報應用程式 JavaScript  JavaScript 中的鬧鐘應用程式是一個簡單的應用程式，可讓用戶設定鬧鐘並在特定時間接收通知或警報。 它通常涉及用戶互動來設定所需的鬧鐘時間，然後應用程式在背景執行，在達到設定時間時觸發通知。 [預覽和程式碼](https://www.codingnepalweb.com/simple-alarm-clock-html-javascript/) #### 文字轉語音轉換器  JavaScript 中的文字轉語音 (TTS) 轉換器是一種將書面文字轉換為口語單字的工具或應用程式。它利用瀏覽器 API 或第三方庫將文字合成為語音，並透過裝置的揚聲器或耳機播放。以下是使用 HTML、CSS 和 JavaScript 的文字轉語音轉換器的基本實作： [預覽和程式碼](https://dev.to/shantanu_jana/text-to-speech-converter-with-javascript-30oo) #### QR 碼產生器 JavaScript  JavaScript 中的 QR 程式碼產生器是一種允許使用者在 Web 應用程式中動態建立快速回應 (QR) 程式碼的工具。 QR 碼是二維條碼，可以包含各種類型的訊息，例如 URL、文字、聯絡資訊或 Wi-Fi 憑證。 [預覽和程式碼](https://dev.to/murtuzaalisurti/how-to-make-a-qr-code-generator-using-vanilla-javascript-3cla) #### 測驗應用程式 JavaScript  JavaScript 中的測驗應用程式是一個互動式 Web 應用程式，它向使用者提出一系列問題並允許他們選擇答案。回答完所有問題後，應用程式會評估答案並提供回饋，例如總分和正確答案。 [預覽和程式碼](https://codingartistweb.com/2022/06/quiz-app-with-javascript/) #### 使用 Javascript 的天氣應用程式  使用 JavaScript 的天氣應用程式是一個 Web 應用程式，可為使用者提供特定位置的當前天氣資訊。它通常從天氣 API 檢索天氣資料、處理資料並將其顯示在使用者友好的介面中。 [預覽和程式碼](https://codingartistweb.com/2022/07/weather-app-with-javascript/) #### 自訂視訊播放器  JavaScript 中的自訂影片播放器是一個 Web JavaScript 專案，它提供用於播放影片內容的自訂使用者介面 (UI)。它通常包括播放、暫停、音量控制、播放速度調整、進度條、全螢幕模式和自訂樣式等功能。 [預覽和程式碼](https://codingartistweb.com/2022/07/custom-video-player-using-javascript/) #### 學生 JavaScript 專案 如果您是學生，那麼這些 JavaScript 專案將對您有很大幫助。 JavaScript 提供了適合不同技能水平的學生（從初學者到高級學習者）的各種專案。 這些專案不僅有助於強化基本概念，也提供 Web 開發的實務經驗。以下是一些**供學生使用的 javascript 專案想法**。 #### 星級評級 JavaScript  JavaScript 中的星級評級元件是一個學生導向的 JavaScript 專案，可讓使用者透過選擇代表不同滿意度或品質等級的星級來對專案進行評級。通常，它由一組水平排列的可點擊星形圖示組成，其中選定的星形突出顯示以指示使用者的評級。 [預覽和程式碼](https://dev.to/codingnepal/star-rating-system-in-html-css-javascript-97a) #### 五彩紙屑效果 Javascript  JavaScript 中的五彩紙屑效果是指一種圖形效果，其中彩色「五彩紙屑」（小紙片或其他材料）在螢幕上散佈或投擲，通常以節日或慶祝的方式進行。 [預覽和程式碼](https://codingartistweb.com/2022/11/confetti-effect-javascript/) #### 刮刮卡Javascript  JavaScript 中的刮刮卡是一個**最好的 js 專案**，它模仿刮掉隱藏區域以顯示下面內容的體驗，類似於彩票或促銷卡。在 Web 開發中，這種效果通常使用 HTML5 畫布元素和 JavaScript 來處理互動來實作。 [預覽和程式碼](https://codingartistweb.com/2022/08/scratch-card-with-javascript/) #### 用 Javascript 進行西蒙遊戲  西蒙遊戲是一款經典的記憶技巧電子遊戲。它涉及一個播放一系列音調和燈光的設備，然後玩家必須重複該序列。 在 Simon 遊戲的 JavaScript 實作中，您通常會建立一個使用者介面，其中的按鈕代表每種顏色，遊戲邏輯將涉及產生和顯示一系列顏色供玩家模仿。 [預覽和程式碼](https://dev.to/nanythery/coding-my-first-game-with-javascript-simon-says-60d) #### 自訂音樂播放器 Javascript  使用 JavaScript 建立自訂音樂播放器涉及建立允許使用者控制音訊播放的使用者介面。[預覽和程式碼](https://dev.to/codingnepal/create-custom-music-player-in-javascript-2367) #### 富文本編輯器  富文本編輯器是一個元件，使用戶能夠使用類似於文字處理器的各種樣式和格式選項來編輯和格式化文字。這些編輯器通常提供粗體、斜體、底線、文字對齊、專案符號、編號清單等功能。 [預覽和程式碼](https://codingartistweb.com/2022/04/rich-text-editor-with-javascript/) > 如果您喜歡這些最佳 JavaScript 專案，那麼我將向此列表加入更多專案。請不要忘記喜歡分享和關注。 使用可用原始碼開始**JavaScript 專案**是增強程式設計技能和擴展知識的絕佳方法。透過剖析現有專案，您可以學習其他人的程式碼，了解不同的設計模式，並發現針對常見挑戰的創新解決方案。😊😊 希望您喜歡這些 JavaScript 專案。您將在我給出的源程式碼連結中獲得逐步說明。希望最佳 JavaScript 專案創意能幫助您增加 JavaScript 知識。  因此，捲起袖子，深入研究原始碼，開始建立一些令人驚奇的東西！ 🥳🥳 --- 原文出處：https://dev.to/shantanu_jana/100-javascript-projects-with-source-code-59lo
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
