我第一次開始編碼是在 14 歲時，當時我正在尋求建立我的第一家新創公司。我不知道從哪裡開始，最後選擇了一個名為 OpenCart 的熱門開源電子商務平台。經過大量時間和不眠之夜後，我發布了我的新創公司的第一個版本，用戶可以在其中交易和出售二手 DVD。幾個版本之後，我應用了該程式碼庫中的所有最佳實踐來建立一個自訂平台，如果沒有任何範例可供學習，我就無法做到這一點。 在這篇文章中，我收集了 5 個使用 React 建立的專案範例，可以幫助每個新手 (React) 開發人員提高技能。有時教程有點太慢或不夠複雜，而您只是想探索“真正的”程式碼庫。所有列出的專案都附帶自訂後端或使用開放 API 來獲取資料，因此您不必使用模擬資料。享受！ TMDB 電影資料庫 ---------- 作為一名電影迷，我花了很多時間在 IMDb 上尋找節目或人物，但不幸的是他們不提供開放的 API。這就是電影資料庫 (TMDb) 的用武之地，它提供了一個[出色的開源 API](https://www.themoviedb.org/documentation/api?language=en-US) ，其中包含有關大多數電影和電視節目的資訊。這是一個流行的 API，可用於（愛好）專案或當您真正喜歡電影時。 [Stephen Kempin](https://twitter.com/s_kempin)的這個專案展示瞭如何在此 API 之上建立電影資料庫應用程式，使用 React 和 Twitter 的 typeahead.js 庫來實現自動建議搜尋功能。 https://github.com/SKempin/reactjs-tmdb-app 電子商務入門者 ------- 在過去的幾年裡，訂閱食品、刮鬍產品或衣服變得非常流行。使用這個開源產品，您可以建立自己的訂閱服務，而且它是全端的！（！！！）。使用 Crate，您可以獲得使用 React 建立的前端以及 Node.js 和 GraphQL 後端。如果您渴望創辦自己的公司，並且正在尋找好的材料來學習如何模組化程式碼或整合前端和後端，那麼一定要看看這個儲存庫。他們甚至使用[StoryBook](https://storybook.js.org/) ，因此您可以檢查該專案中使用的所有元件。 https://github.com/atulmy/crate 蘋果音樂克隆 ------ 您聽過 Apple Music、Spotify 或 Google 上的音樂嗎？該專案是第一個專案的克隆，甚至帶有您可以使用的後端。想建立自己的後端嗎？有說明可以您自己執行此操作。在前端，React 與 Redux 和 Redux Thunk 一起使用，為您提供了一個廣泛的範例來開始使用 Redux 進行狀態管理。該專案尚不支援 React Hooks，因此請考慮這是一個挑戰，看看是否可以重構它。 https://github.com/tvillarete/apple-music-js Slack 克隆 ---- 如果您是一家公司的開發人員，那麼您很有可能一直在使用 Slack 作為溝通工具。還有什麼比建立您每天使用的工具的克隆更好的學習方法呢？ [Luke Jackson](https://twitter.com/lukejacksonn)的 Slack 克隆版本使用 React 和流行的產品[ChatKit](https://pusher.com/chatkit) ，可讓您輕鬆建立進階聊天應用程式。您可以透過請求 API 金鑰免費開始使用。發現任何錯誤並願意開始為開源做出貢獻嗎？此存儲庫中有開放的[初學者友好](https://github.com/pusher/react-slack-clone/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)票證。 https://github.com/lukejacksonn/react-slack-clone Hacker News 克隆 ------ [駭客新聞](https://news.ycombinator.com/)不僅是與程式設計和技術相關的新聞的重要來源。它也是開發人員中的經典，通常是展示新前端框架或語言的演示的起點。 [Clinton D'Annolfo](https://twitter.com/clintondannolfo)的這個特定專案透過在前端使用 React 和 GraphQL，以及在 Node.js 和 GraphQL 上執行的伺服器來實現這一目標。作為獎勵，加入了[Next.js](https://nextjs.org/)以支援伺服器端渲染 (SSR)。 https://github.com/clintonwoo/hackernews-react-graphql 您對這些專案有何看法？希望他們可以幫助您提高 React 技能，並且不要忘記留下任何反饋 😄！ --- 原文出處：https://dev.to/gethackteam/5-examples-of-react-applications-to-learn-from-275b
我喜歡優化。 但如果網站無法在 Internet Explorer 11 瀏覽器中執行，用戶不會關心我的優化程式碼。 我使用**[Endtest](https://endtest.io)**建立自動化測試並在跨瀏覽器雲端上執行它們。 **[Netflix](https://jobs.lever.co/netflix/db335e29-c731-42ff-ad3a-eeecbe95b36f)**使用相同的平台來測試他們的網路應用程式。 它甚至被列為某些**[工作](https://www.linkedin.com/jobs/view/1486749071/)**的必備技能。 **[Endtest](https://endtest.io)**確實有一些非常好的功能，例如： • 跨瀏覽器網格，在 Windows 和 macOS 電腦上執行 • 用於自動化測試的無程式碼編輯器 • 支援網頁應用程式 • 支援本機和混合Android 和iOS 應用程式 • 用於測試執行的無限視訊錄製 • 螢幕截圖比較 • 地理位置 • If 語句 • 循環 • 在測試中上傳文件 • Endtest API，可輕鬆與您的 CI/CD 系統集成 • 進階斷言 • 在真實行動裝置上進行行動測試 • 使用 Endtest Mailbox 進行電子郵件測試 您應該查看**[文件](https://endtest.io/guides/docs/how-to-create-web-tests/)**。 以下是 9 個極為強大的 JavaScript 技巧。 **1.全部替換** ---------- 我們知道 string.replace() 函數僅取代第一次出現的位置。 您可以透過在正規表示式末尾新增 /g 來取代所有出現的情況。 ``` var example = "potato potato"; console.log(example.replace(/pot/, "tom")); // "tomato potato" console.log(example.replace(/pot/g, "tom")); // "tomato tomato" ``` **2. 提取唯一的值** -------------- 我們可以使用 Set 物件和 Spread 運算子建立一個僅具有唯一值的新陣列。 ``` var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1] var unique_entries = [...new Set(entries)]; console.log(unique_entries); // [1, 2, 3, 4, 5, 6, 7, 8] ``` **3. 將數字轉換為字串** --------------- 我們只需使用帶有一組空引號的串聯運算子即可。 ``` var converted_number = 5 + ""; console.log(converted_number); // 5 console.log(typeof converted_number); // string ``` **4. 將字串轉換為數字** --------------- 我們需要的只是 + 運算子。 請小心這一點，因為它僅適用於“字串數字”。 ``` the_string = "123"; console.log(+the_string); // 123 the_string = "hello"; console.log(+the_string); // NaN ``` **5. 隨機排列陣列中的元素** ----------------- **我每天都在洗牌** ``` var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(my_list.sort(function() { return Math.random() - 0.5 })); // [4, 8, 2, 9, 1, 3, 6, 5, 7] ``` **6. 展平多維陣列** ------------- 只需使用 Spread 運算子即可。 ``` var entries = [1, [2, 5], [6, 7], 9]; var flat_entries = [].concat(...entries); // [1, 2, 5, 6, 7, 9] ``` **7. 短路條件** ----------- 讓我們來看這個例子： ``` if (available) { addToCart(); } ``` 並通過簡單地將變數與函數一起使用來縮短它： ``` available && addToCart() ``` **8. 動態屬性名稱** ------------- 我一直認為我必須先聲明一個物件，然後才能指派動態屬性。 ``` const dynamic = 'flavour'; var item = { name: 'Coke', [dynamic]: 'Cherry' } console.log(item); // { name: "Coke", flavour: "Cherry" } ``` **9. 使用 length 調整陣列大小/清空陣列** ---------------------------- 我們基本上覆蓋了陣列的長度。 如果我們想要調整陣列的大小： ``` var entries = [1, 2, 3, 4, 5, 6, 7]; console.log(entries.length); // 7 entries.length = 4; console.log(entries.length); // 4 console.log(entries); // [1, 2, 3, 4] ``` 如果我們想清空陣列： ``` var entries = [1, 2, 3, 4, 5, 6, 7]; console.log(entries.length); // 7 entries.length = 0; console.log(entries.length); // 0 console.log(entries); // [] ``` 我認為您正在尋找 JavaScript hack 真的很酷，但是您確定您的 Web 應用程式可以在所有瀏覽器和裝置上正常運作嗎？ 您可以使用**[Endtest](https://endtest.io)**快速建立自動化測試並在跨瀏覽器雲端上執行它們。 您甚至無需編寫程式碼即可使用它。 說真的，只需閱讀**[文件](https://endtest.io/guides/docs/how-to-create-web-tests/)**即可。 --- 原文出處：https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p
您曾經遇到過非常複雜的程式設計問題嗎？您可能可以寫出邏輯，但不太確定應該使用的語法？編寫偽程式碼是一個很好的起點。 這是什麼 ---- 偽程式碼是一種“語言”，您可以在其中編寫所有編碼邏輯，而無需編寫一行特定於語言的程式碼。在演算法研究中，尤其是機器學習演算法中，你經常會看到這種情況。這並不意味著您不能將其用於 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
嗨大家好，新年快樂:煙火::煙火::煙火:! ---------------------- 這是一篇很長的文章，所以請耐心聽我一秒鐘或一個小時。每個問題的每個答案都有一個向上箭頭**↑**連結，可讓您返回到問題列表，這樣您就不會浪費時間上下滾動。 ### 問題 - [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
長話短說 ==== 在本文中，您將學習如何使用 Nextjs、CopilotKit 和 OpenAI 建立人工智慧驅動的 PowerPoint 應用程式。我們將涵蓋： - 利用 ChatGPT 建立您的 PowerPoint 簡報📊 - 與您的 PowerPoint 簡報聊天💬 - 將音訊和圖像新增至您的 PowerPoint 簡報🔉  --- CopilotKit：建構深度整合的應用內人工智慧聊天機器人💬 ------------------------------- CopilotKit 是[開源人工智慧副駕駛平台。](https://github.com/CopilotKit/CopilotKit)我們可以輕鬆地將強大的人工智慧聊天機器人整合到您的 React 應用程式中。完全可定制和深度集成。  {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} ###### \*在布胡布上 現在回到文章。 --- **先決條件** -------- 要開始學習本教程，您需要在電腦上安裝以下軟體： - 文字編輯器（例如 Visual Studio Code） - Node.js - 套件管理器 使用 NextJS 建立 PowerPoint 應用程式前端 ------------------------------ **步驟 1：**使用下列指令 Git 複製 PowerPoint 應用程式樣板。 ``` git clone https://github.com/TheGreatBonnie/aipoweredpowerpointpresentation ``` **步驟 2：**在文字編輯器上開啟 PowerPoint 應用程式樣板，並使用下列指令安裝所有專案相依性。 ``` npm install ``` 步驟3： • 前往根目錄\*\*\*\*並建立一個名為**`.env.local`的檔案。**在該文件中，加入下面保存您的 ChatGPT API 金鑰的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API Key” ``` **步驟4：**在命令列執行命令*npm run dev* 。導航至 http://localhost:3000/，您應該會看到 PowerPoint 應用程式前端。  建立 PowerPoint 投影片功能 ------------------- 步驟 1：前往**`/[root]/src/app/components`** ，並建立一個名為`present.tsx`的檔案。然後在文件頂部導入以下相依性。 ``` "use client"; import { useCopilotContext } from "@copilotkit/react-core"; import { CopilotTask } from "@copilotkit/react-core"; import { useMakeCopilotActionable, useMakeCopilotReadable, } from "@copilotkit/react-core"; import { useEffect, useState } from "react"; import "./../presentation/styles.css"; import Markdown from "react-markdown"; ``` 步驟 2：定義一個名為 Slide 的 TypeScript 接口，其中包含 PowerPoint 簡報投影片的標題和內容屬性。 ``` // Define slide interface interface Slide { title: string; content: string; } ``` 步驟 3：建立一個名為`Presentation`函數，並使用usestate 初始化名為`allSlides`和`currentSlideIndex`狀態變數`usestate.`變數`allSlides`將保存幻燈片陣列，而`currentSlideIndex`將保存目前幻燈片索引。 ``` export function Presentation (){ const [allSlides, setAllSlides] = useState<Slide[]>([]); const [currentSlideIndex, setCurrentSlideIndex] = useState<number>(0); } ``` 步驟 4：在`Presentation`函數中，使用`useMakeCopilotReadable`掛鉤新增投影片的`allSlides`陣列作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Powerpoint presentation slides: " + JSON.stringify(allSlides)); ``` 步驟 5：使用`useMakeCopilotActionable`掛鉤設定一個名為`createNewPowerPointSlide`操作，其中包含描述和更新`allSlides`和`currentSlideIndex`狀態變數的實作函數，如下所示。 ``` useMakeCopilotActionable( { name: "createNewPowerPointSlide", description: "create slides for a powerpoint presentation. Call this function multiple times to present multiple slides.", argumentAnnotations: [ { name: "slideTitle", type: "string", description: "The topic to display in the presentation slide. Use simple markdown to outline your speech, like a headline.", required: true, }, { name: "content", type: "string", description: "The content to display in the presentation slide. Use simple markdown to outline your speech, like lists, paragraphs, etc.", required: true }, ], implementation: async (newSlideTitle, newSlideContent) => { const newSlide: Slide = { title: newSlideTitle, content: newSlideContent}; const updatedSlides = [...allSlides, newSlide]; setAllSlides(updatedSlides); setCurrentSlideIndex(updatedSlides.length - 1); }, }, [], ); ``` 步驟6：定義一個名為`displayCurrentSlide`的函數，用於在前端顯示目前投影片索引。 ``` // Display current slide const displayCurrentSlide = () => { const slide = allSlides[currentSlideIndex]; return slide ? ( <div className="h-screen flex flex-col justify-center items-center text-5xl text-white bg-cover bg-center bg-no-repeat p-10 text-center" style={{ textShadow: "1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000", }} > <Markdown className="markdown">{slide.title}</Markdown> <Markdown className="markdown">{slide.content}</Markdown> </div> ) : ( <div className="h-screen flex flex-col justify-center items-center text-5xl text-white bg-cover bg-center bg-no-repeat p-10 text-center"> No Slide To Display </div> ); }; ``` 步驟 7： 定義一個名為 addSlide 的函數，該函數包含一個名為 CopilotTask 的類別。 CopilotTask 類別定義新增投影片的功能。 ``` // Add new slide function const addSlide = new CopilotTask({ instructions: "create a new slide", actions: [ { name: "newSlide", description: "Make a new slide related to the current topic.", argumentAnnotations: [ { name: "title", type: "string", description: "The title to display in the presentation slide.", required: true, }, { name: "content", type: "string", description: "The title to display in the presentation slide.", required: true, }, ], implementation: async (newSlideTitle,newSlideContent,) => { const newSlide: Slide = {title: newSlideTitle,content: newSlideContent,}; const updatedSlides = [...allSlides, newSlide]; setAllSlides(updatedSlides); setCurrentSlideIndex(updatedSlides.length - 1); }, }, ], }); const context = useCopilotContext(); const [randomSlideTaskRunning, setRandomSlideTaskRunning] = useState(false); ``` 步驟 8：定義兩個函數 goBack 和 goForward。 goBack 函數定義導覽到上一張投影片的功能，而 goForward 函數定義導覽到下一張投影片的功能。 ``` // Button click handlers for navigation const goBack = () => setCurrentSlideIndex((prev) => Math.max(0, prev - 1)); const goForward = () => setCurrentSlideIndex((prev) => Math.min(allSlides.length - 1, prev + 1)); ``` 步驟9：傳回一個呼叫displayCurrentSlide函數的元件，並包含呼叫addSlide、goBack和goForward函數的按鈕。 ``` return ( <div> {displayCurrentSlide()} <button disabled={randomSlideTaskRunning} className={`absolute bottom-12 left-0 mb-4 ml-4 bg-blue-500 text-white font-bold py-2 px-4 rounded ${randomSlideTaskRunning ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"}`} onClick={async () => { try { setRandomSlideTaskRunning(true); await addSlide.run(context); } finally { setRandomSlideTaskRunning(false); } }} > {randomSlideTaskRunning ? "Loading slide..." : "Add Slide +"} </button> <button className={`absolute bottom-0 left-0 mb-4 ml-4 bg-blue-500 text-white font-bold py-2 px-4 rounded ${randomSlideTaskRunning ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"}`} onClick={goBack}>Prev</button> <button className={`absolute bottom-0 left-20 mb-4 ml-4 bg-blue-500 text-white font-bold py-2 px-4 rounded ${randomSlideTaskRunning ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"}`} onClick={goForward}>Next</button> </div> ); ``` 步驟10：在Presentation資料夾中，將以下程式碼加入page.tsx檔案。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import {Presentation} from "../components/present"; import "./styles.css"; let globalAudio: any = undefined; let globalAudioEnabled = false; const Demo = () => { return ( <CopilotKit url="/api/copilotkit/openai"> <CopilotSidebar defaultOpen={true} labels={{ title: "Presentation Copilot", initial: "Hi you! 👋 I can give you a presentation on any topic.", }} clickOutsideToClose={false} onSubmitMessage={async (message) => { if (!globalAudioEnabled) { globalAudio.play(); globalAudio.pause(); } globalAudioEnabled = true; }} > <Presentation/> </CopilotSidebar> </CopilotKit> ); }; export default Demo; ``` 步驟11：導覽至http://localhost:3000/，點擊「開始」按鈕，您將被重定向到與聊天機器人整合的演示頁面，如下所示。  步驟12：給右側的聊天機器人一個提示，例如「在TypeScript上建立PowerPoint簡報」聊天機器人將開始產生回應，完成後，它將在頁面左側顯示產生的PowerPoint投影片，如下圖所示  步驟 13：關閉聊天機器人窗口，然後按一下新增投影片 + 按鈕將新投影片新增至 PowerPoint 簡報中，如下所示。  第 14 步：按一下「上一張」按鈕，您將導覽至上一張投影片。如果您按一下「下一步」按鈕，您將導覽至下一張投影片。  建立 PowerPoint 投影片 自動語音功能 ------------------------ 步驟1：在`present.tsx`檔案中，宣告一個名為`globalAudio`的變數，如下所示。 ``` let globalAudio: any = undefined; ``` 步驟2：在`Presentation`元件中，宣告一個`useEffect`鉤子，用一個新的**`Audio`**物件初始化**`globalAudio`** ，如下所示。 ``` useEffect(() => { if (!globalAudio) { globalAudio = new Audio(); } }, []); ``` 步驟 3：更新 useMakeCopilotActionable 掛鉤，透過 API 將 PowerPoint 幻燈片文字轉換為語音，如下所示。 ``` useMakeCopilotActionable( { name: "createNewPowerPointSlide", description: "create slides for a powerpoint presentation. Call this function multiple times to present multiple slides.", argumentAnnotations: [ { name: "slideTitle", type: "string", description: "The topic to display in the presentation slide. Use simple markdown to outline your speech, like a headline.", required: true, }, { name: "content", type: "string", description: "The content to display in the presentation slide. Use simple markdown to outline your speech, like lists, paragraphs, etc.", required: true }, { name: "speech", type: "string", description: "An informative speech about the current slide.", required: true, }, ], implementation: async (newSlideTitle, newSlideContent, speech) => { const newSlide: Slide = { title: newSlideTitle, content: newSlideContent }; const updatedSlides = [...allSlides, newSlide]; setAllSlides(updatedSlides); setCurrentSlideIndex(updatedSlides.length - 1); const encodedText = encodeURIComponent(speech); const url = `/api/tts?text=${encodedText}`; globalAudio.src = url; await globalAudio.play(); await new Promise<void>((resolve) => { globalAudio.onended = function () { resolve(); }; }); await new Promise((resolve) => setTimeout(resolve, 500)); }, }, [], ); ``` 步驟 4：更新 addSlide 函數，透過 API 將新的 PowerPoint 投影片文字轉換為語音，如下所示。 ``` // Add new slide function const addSlide = new CopilotTask({ instructions: "create a new slide", actions: [ { name: "newSlide", description: "Make a new slide related to the current topic.", argumentAnnotations: [ { name: "title", type: "string", description:"The title to display in the presentation slide.", required: true, }, { name: "content", type: "string", description:"The title to display in the presentation slide.", required: true, }, { name: "speech", type: "string", description: "An informative speech about the current slide.", required: true, }, ], implementation: async (newSlideTitle, newSlideContent, speech) => { const newSlide: Slide = { title: newSlideTitle, content: newSlideContent }; const updatedSlides = [...allSlides, newSlide]; setAllSlides(updatedSlides); setCurrentSlideIndex(updatedSlides.length - 1); const encodedText = encodeURIComponent(speech); const url = `/api/tts?text=${encodedText}`; globalAudio.src = url; await globalAudio.play(); await new Promise<void>((resolve) => { globalAudio.onended = function () { resolve(); }; }); await new Promise((resolve) => setTimeout(resolve, 500)); }, } ] }); ``` 步驟 5： 再次向聊天機器人發出「在 TypeScript 上建立 PowerPoint 簡報」提示，您應該會聽到簡報投影片的聲音。  建立圖像生成功能 -------- 步驟1：在present.tsx檔案中，新增一個名為backgroundImage的新屬性來鍵入介面Slide，如下所示。 ``` // Define slide interface interface Slide { title: string; content: string; backgroundImage: string; } ``` 步驟 2：更新 useMakeCopilotActionable 掛鉤以產生 PowerPoint 簡報投影片的圖片。 ``` useMakeCopilotActionable( { name: "createPowerPointSlides", description: "create slides for a powerpoint presentation. Call this function multiple times to present multiple slides.", argumentAnnotations: [ { name: "slideTitle", type: "string", description: "The topic to display in the presentation slide. Use simple markdown to outline your speech, like a headline.", required: true, }, { name: "content", type: "string", description: "The content to display in the presentation slide. Use simple markdown to outline your speech, like lists, paragraphs, etc.", required: true }, { name: "backgroundImage", type: "string", description: "What to display in the background of the slide (i.e. 'dog' or 'house').", required: true, }, { name: "speech", type: "string", description: "An informative speech about the current slide.", required: true, }, ], implementation: async (newSlideTitle, newSlideContent, newSlideBackgroundImage, speech) => { const newSlide: Slide = { title: newSlideTitle, content: newSlideContent, backgroundImage: newSlideBackgroundImage }; const updatedSlides = [...allSlides, newSlide]; setAllSlides(updatedSlides); setCurrentSlideIndex(updatedSlides.length - 1); const encodedText = encodeURIComponent(speech); const url = `/api/tts?text=${encodedText}`; globalAudio.src = url; await globalAudio.play(); await new Promise<void>((resolve) => { globalAudio.onended = function () { resolve(); }; }); await new Promise((resolve) => setTimeout(resolve, 500)); }, }, [], ); ``` 步驟 2：更新 addSlide 函數以產生新的 PowerPoint 簡報投影片的圖片。 **步驟3：**更新`slide.tsx`檔案中的`Slide`元件以透過[`unsplash.com`](http://unsplash.com/)產生映像 ``` // Add new slide function const addSlide = new CopilotTask({ instructions: "create a new slide", functions: [ { name: "newSlide", description: "Make a new slide related to the current topic.", argumentAnnotations: [ { name: "title", type: "string", description:"The title to display in the presentation slide.", required: true, }, { name: "content", type: "string", description:"The title to display in the presentation slide.", required: true, }, { name: "backgroundImage", type: "string", description: "What to display in the background of the slide (i.e. 'dog' or 'house').", required: true, }, { name: "speech", type: "string", description: "An informative speech about the current slide.", required: true, }, ], implementation: async (newSlideTitle, newSlideContent, newSlideBackgroundImage, speech) => { const newSlide: Slide = { title: newSlideTitle, content: newSlideContent, backgroundImage: newSlideBackgroundImage }; const updatedSlides = [...allSlides, newSlide]; setAllSlides(updatedSlides); setCurrentSlideIndex(updatedSlides.length - 1); const encodedText = encodeURIComponent(speech); const url = `/api/tts?text=${encodedText}`; globalAudio.src = url; await globalAudio.play(); await new Promise<void>((resolve) => { globalAudio.onended = function () { resolve(); }; }); await new Promise((resolve) => setTimeout(resolve, 500)); }, } ] }); ``` 步驟 3：更新 displayCurrentSlide 函數以將背景圖像新增至 PowerPoint 簡報投影片中。 ``` // Display current slide const displayCurrentSlide = () => { const slide = allSlides[currentSlideIndex]; return slide ? ( <div className="h-screen flex flex-col justify-center items-center text-5xl text-white bg-cover bg-center bg-no-repeat p-10 text-center" style={{ backgroundImage: 'url("https://source.unsplash.com/featured/?' + encodeURIComponent(allSlides[currentSlideIndex].backgroundImage) + '")', textShadow: "1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000", }} > <Markdown className="markdown">{slide.title}</Markdown> <Markdown className="markdown">{slide.content}</Markdown> </div> ) : ( <div className="h-screen flex flex-col justify-center items-center text-5xl text-white bg-cover bg-center bg-no-repeat p-10 text-center"> No Slide To Display </div> ); }; ``` **步驟 4：**前往 Web 應用程式，您應該會看到背景圖像已新增至 PowerPoint 投影片中。  結論 -- 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 筆記： - 告訴聊天機器人要寫什麼 - 建立包含文字、圖片和自動語音的幻燈片。 這是全部實作程式碼： https://github.com/CopilotKit/CopilotKit/blob/mme/tools/CopilotKit/examples/next-openai/src/app/helloworld/page.tsx 你可以拿程式碼寫文章，一定要截圖。 確保按照邏輯實現的順序寫文章： - 首先，外部 React 元件（ `page.tsx`中的`HelloWorld`元件） ``` - cover `CopilotKit` and `CopliotSidebar` ``` - 然後覆蓋`Presentation`反應元件而不加入 Copilot 功能 ``` - include the `Slide` react component ``` - 最後，在建立基本的 React 應用程式後，加入描述 Copilot 特定功能的部分（ `useMakeCopilotReadable`和`useMakeCopilotActionable` ） - 最後，介紹生成音訊+影像的函數。保持描述非常簡短，只需說“我們透過瀏覽器audio-gen API產生音訊”和“我們透過[`unsplash.com`](http://unsplash.com/)產生圖像” 執行演示： - 請參閱文件/貢獻指南，以了解如何執行 CopilotKit 儲存庫中包含的範例應用程式：https://docs.copilotkit.ai/contribute/quickstart-contribute - 執行 - 前往`/helloworld`頁面 --- 結論 -- 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 對於完整的源程式碼： https://github.com/TheGreatBonnie/aipoweredpresentation 感謝@theGreatBonnie 在本文中所做的出色工作。 別忘了...  {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- 原文出處：https://dev.to/copilotkit/how-to-build-ai-powered-powerpoint-app-nextjs-openai-copilotkit-ji2
DevOps 是 IT 產業中一個快速發展的領域。作為一名 DevOps 工程師，跟上開發空間以避免落後至關重要。 GitOPs 是該領域已經發展成熟的流行範例。 **GitOps**是一種 DevOps 框架或實踐，透過它，我們使 Git 儲存庫成為單一事實來源，同時將 CI/CD 和版本控制應用於基礎設施自動化。 [紅帽](https://www.redhat.com/en/topics/devops/what-is-gitops)將其定義為「使用 Git 儲存庫作為單一事實來源來交付基礎設施即程式碼」。 另一方面， **[DevSecOps](https://aws.amazon.com/what-is/devsecops/#:~:text=DevSecOps%20is%20the%20practice%20of,is%20both%20efficient%20and%20secure.)**是 DevOps 的新改進版本，它在 SDLC（軟體開發生命週期）中灌輸安全工具和控制措施。 devsecops 方法的主要目標是“將安全性左移”，即安全性應該從一開始就成為開發生命週期的一部分，而不是事後才想到。 在本專案指南中，我們將應用 GitOps 實踐，同時實作包含許多工具的高階端對端 DevSecOps 管道。 專案概況 ==== 這是一個由兩部分組成的專案。在第一部分中，我們將設定執行 CI 管道的 EC2 執行個體。 **若要了解如何使用 jenkins 建立標準的持續整合管道，請按[此處](https://dev.to/kelvinskell/a-practical-guide-to-building-a-standard-continuous-integration-pipeline-with-jenkins-2kp9)。** 在第二部分中，我們將設定 EKS 叢集、ArgoCD 用於持續交付，並配置 Prometheus 和 Grafana 用於應用程式監控。 在這個專案中，我們將涵蓋以下內容： **- 基礎架構即程式碼：**我們將使用 terraform 來設定我們的 EC2 執行個體以及 EKS 叢集。 **- Jenkins 伺服器設定：**在 Jenkins 伺服器上安裝和設定基本工具，包括 Jenkins 本身、Docker、OWASP 相依性檢查、Sonarqube 和 Trivy。 **- EKS 叢集部署：**利用 Terraform 建立 Amazon EKS 叢集，這是 AWS 上的託管 Kubernetes 服務。 **- 負載平衡器配置：**為 EKS 叢集配置 AWS 應用程式負載平衡器 (ALB)。 **- ArgoCD 安裝：**安裝並設定 ArgoCD 以實現持續交付和 GitOps。 **- Sonarqube 整合：**整合 Sonarqube 以在 DevSecOps 管道中進行程式碼品質分析。 **- 監控設定：**使用 Helm、Prometheus 和 Grafana 實現對 EKS 叢集的監控。 **- ArgoCD應用程式部署：**使用ArgoCD部署微服務應用程式，包括資料庫和入口元件。 第一部分：設定 CI 管道 ============= **- 第 1 步：設定 EC2 執行個體** 克隆[Git 儲存庫](https://github.com/Kelvinskell/microservices-devops-1)。 `cd`進入 terraform 目錄。 執行`terraform init` ，然後執行`terraform plan`以查看建議的基礎架構變更。 執行`terraform apply`來實作這些變更並配置實例。 此實例使用使用者資料進行引導，一旦配置完畢，將自動安裝 jenkins、sonarqube、trivy 和 docker。  **- 步驟2：修改應用程式程式碼** 這是一個簡單但關鍵的步驟。在您剛剛複製的儲存庫中包含的**Jenkinsfile**中，您必須將所有出現的「 **kelvinskell** 」變更為您的 DockerHub 使用者名稱。如果您想自己實施這個專案，這是非常有必要的。 **- 第 3 步：設定 Jenkins 伺服器** - 在瀏覽器上登入jenkins伺服器。  - 安裝建議的插件並完成註冊。 - 前往“管理Jenkins”、“插件”，然後安裝以下插件：Docker、Docker Commons、Docker pipeline、SonarQube Scanner、Sonar 品質門、SSH2 Easy、OWASP 依賴項檢查、OWASP Markup Formatter 插件、GitHub API pluin 和GitHub pipeline插件。  - 設定工具：前往 Dashborad > 管理 jenkins > 工具 **git安裝**  **聲納掃描器安裝**  **依賴性檢查**  **Docker安裝**  **- 第 4 步：配置 SonarQube** - 在瀏覽器上，連接到連接埠 9000 上的 Jenkins 伺服器 IP 位址並登入伺服器。 預設使用者名稱和密碼是“admin”。  登入後，按一下“手動”。  請按照上圖中的說明操作，然後按一下「設定」。 **注意：**您的專案金鑰必須完全是**newsread-microservices-application** 。這樣，您就不必編輯 Jenkinsfile。 - 選擇**“With Jenkins”**並選擇 GitHub 作為 DevOps 平台。  - 點擊**“配置分析”** ，在步驟3中，複製“sonar.projectKey”，稍後您將需要它。  - 點選「帳戶」>「我的帳戶」>「產生令牌」。 為其命名並點擊“生成”。  - 前往“管理 Jenkins”>“憑證” - 選擇 Secret tex 並貼上您剛剛複製的令牌。  - 現在前往 Jenkins 儀表板 > 設定 Jenkins > 系統 > Sonarqube 伺服器 > 新增 Sonarqube - 將其命名為“SonarQube Server”，輸入秘密令牌的伺服器 URL 和憑證 ID。 請注意，我們的伺服器 url 是 localhost，因為 SonarQube 與 jenkins 託管在同一台伺服器上。  - 點選“儲存”。 **- 第 5 步：整合您的 DockerHub 憑證** 此階段對於 Jenkins 存取您的 DockerHub 帳戶至關重要。 - 前往“管理 Jenkins”>“憑證”>“新增憑證”  **- 第 6 步：設定 Jenkins 管道** - 從 Jenkins 的儀表板中，按一下「新專案」並建立管道作業。  - 在“建置觸發器”下，選擇“觸發遠端建置”。  在「身份驗證令牌」方塊下設定秘密令牌。我們將在建立 GitHub Webhook 時使用它。 - 在管道下，確保參數設定如下： - 定義：來自 SCM 的管道腳本 - SCM：設定您的 SCM。確保只建立您的主分支。例如，如果您的主分支名為“main”，請將“\*/main”放在要建置的分支下。 - 腳本路徑：Jenkinsfile  **注意：**您必須將我的[儲存庫](https://github.com/Kelvinskell/microservices-devops-1)分叉到您自己的 GitHub 帳戶。這是您存取儲存庫並能夠對其進行配置所必需的。 完成此操作後，建立 GitHub 個人存取權杖。 我們將使用 GitHub PAT 從 Jenkins 向我們的儲存庫進行身份驗證。 - 連接到 EC2 實例，切換到 jenkins 用戶，建立 SSH 金鑰對。公鑰將作為您的 PAT 上傳到 GitHub，而私鑰將加入到我們的 Jenkins 配置中。  - 返回 Jenkins 伺服器，點擊“新增憑證”  錯誤訊息現已消失。  - 點選“儲存”。 **- 第 7 步：建立 GitHub WebHook** 這對於遠端觸發我們的詹金斯建置是必要的。 - 前往儲存庫的 GitHub Webhook 建立頁面並輸入以下資訊： URL：輸入以下 URL，根據需要替換 \*\*\* 之間的值： ``` ***JENKINS_SERVER_URL***/job/***JENKINS_JOB_NAME***/build?token=***JENKINS_BUILD_TRIGGER_TOKEN*** ```  **- 第 8 步：執行管道** 現在，我們已經完成了該管道的配置。是時候檢驗我們的工作了。 您可以透過進行變更並推送到 GitHub 儲存庫來觸發管道。如果正確配置了 Web hook 觸發器，這將自動啟動管道。 或者，您只需點擊“立即建置”即可執行管道。 如果一切都按預期配置，您將得到以下輸出：  結論 -- 我們現在已經結束了這個專案的第一部分。在第一部分中，我們配置並設定了持續整合管道。第二部分將涉及使用 ArgoCD 實施 GitOps。 我們將使用 terraform 配置 EKS 集群，然後使用 ArgoCD 持續部署到 EKS 集群。 這裡的想法是，您可以讓單獨的團隊管理流程的兩個部分 - 持續整合和持續部署。從而進一步解耦和簡化整個過程，同時使用 Git 作為我們的單一事實來源。 **PS：**我願意接受遠距 DevOps、雲端和科技寫作機會。 在[LinkedIn](https://linkedin.com/in/kelvin-onuchukwu-3460871a1)上與我聯絡。 --- 原文出處：https://dev.to/kelvinskell/advanced-end-to-end-devops-project-deploying-a-microservices-app-to-aws-eks-using-terraform-helm-jenkins-and-argocd-part-i-3a53
介紹 -- 過去一年，生成式人工智慧一直是科技領域的熱門話題。每個人都在使用它來建造很酷的專案。谷歌有自己的生成人工智慧，稱為 Gemini。 最近，Google 為 Gemini 開發者推出了 API。它附帶了幾個庫和框架，開發人員可以使用它們將其合併到他們的應用程式中。 在本文中，我們將建立一個簡單的 Node.js 應用程式並將 Google Gemini 整合到其中。我們將使用[**Google Gemini SDK**](https://www.npmjs.com/package/@google/generative-ai) 。 那麼，事不宜遲，讓我們開始吧！ 什麼是雙子座？ -------  Google Gemini 是由 Google AI 開發的強大且多方面的 AI 模型。 Gemini 不僅處理文字；也處理文字。它可以理解和操作各種格式，如程式碼、音訊、圖像和視訊。這為您的 Node.js 專案帶來了令人興奮的可能性。 專案設定： ----- ### **1.建立Node.js專案：** 要啟動我們的專案，我們需要設定 Node.js 環境。那麼，讓我們建立一個節點專案。在終端機中執行以下命令。 ``` npm init ``` 這將初始化一個新的 Node.js 專案。 ### 2.安裝依賴項： 現在，我們將安裝專案所需的依賴項。 ``` npm install express body-parser @google/generative-ai dotenv ``` 這將安裝以下軟體包： - express：流行的 Node.js Web 框架 - body-parser：用來解析請求體的中介軟體 - @google/generative-ai：用於存取 Gemini 模型的套件 - dotenv：從 .env 檔案載入環境變數 ### 3.**設定環境變數：** 接下來，我們將建立一個`.env`資料夾來安全地儲存 API 憑證等敏感資訊。 ``` //.env API_KEY=YOUR_API_KEY PORT=3000 ``` ### 4.**取得API金鑰：** 在使用 Gemini 之前，我們需要從 Google Developers Console 設定 API 憑證。為此，我們需要註冊 Google 帳戶並建立 API 金鑰。 登入後，前往<https://makersuite.google.com/app/apikey> 。我們會得到這樣的結果：  然後我們將點擊“建立 API 金鑰”按鈕。這將產生一個唯一的 API 金鑰，我們將使用它來驗證對 Google Generative AI API 的請求。 > 要測試您的 API，您可以執行以下 Curl 命令： > > ```javascript > 捲曲\\ > -H '內容類型：application/json' \\ > -d '{"contents":\[{"parts":\[{"text":"寫一個關於魔法背包的故事"}\]}\]}' \\ > -X POST https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=YOUR\_API\_KEY > ```` > > 將`YOUR_API_KEY`替換為我們先前獲得的實際 API 金鑰。 取得 API 金鑰後，我們將使用 API 金鑰更新`.env`檔。 ### 5. 建立 Express 伺服器： 現在，我們將在根目錄中建立一個`index.js`檔案並設定一個基本的express 伺服器。請看下面的程式碼： ``` const express = require("express"); const dotenv = require("dotenv"); dotenv.config(); const app = express(); const port = process.env.PORT; app.get("/", (req, res) => { res.send("Hello World"); }); app.listen(port, () => { console.log(`Server running on port ${port}`); }); ``` 在這裡，我們使用“dotenv”套件從`.env`檔案存取連接埠號碼。 在專案的頂部，我們使用`dotenv.config()`載入環境變數，使其可以在整個檔案中存取。 ### 6. 執行專案： 在此步驟中，我們將向`package.json`檔案新增一個啟動腳本，以輕鬆執行我們的專案。 因此，將以下腳本新增至 package.json 檔案中。 ``` "scripts": { "start": "node index.js" } ``` package.json 檔案應如下所示：  要檢查一切是否正常，讓我們使用以下命令執行該專案： ``` npm run start ``` 這將啟動 Express 伺服器。現在如果我們造訪這個 URL <http://localhost:3000/>我們會得到：  驚人的！專案設定已完成並且執行完美。接下來，我們將在下一節中將 Gemini 加入我們的專案中 新增Google雙子座： ------------ ### 1. 設定路由和中介軟體： 要將 Gemini 新增至我們的專案中，我們將建立一個`/generate`路由，以便與 Gemini AI 進行通訊。 為此，將以下程式碼新增至`index.js`檔案。 ``` const bodyParser = require("body-parser"); const { generateResponse } = require("./controllers/index.js"); //middleware to parse the body content to JSON app.use(bodyParser.json()); app.post("/generate", generateResponse); ``` 在這裡，我們使用`body-parser`中間件將內容解析為 JSON 格式。 ### 2.設定Google Generative AI： 現在，我們將建立一個控制器資料夾，並在其中建立一個`index.js`檔案。在這裡，我們將建立一個新的控制器函數來處理上面程式碼中聲明的生成路由。 ``` const { GoogleGenerativeAI } = require("@google/generative-ai"); const dotenv = require("dotenv"); dotenv.config(); // GoogleGenerativeAI required config const configuration = new GoogleGenerativeAI(process.env.API_KEY); // Model initialization const modelId = "gemini-pro"; const model = configuration.getGenerativeModel({ model: modelId }); ``` 在這裡，我們透過傳遞環境變數中的 API 金鑰來為 Google Generative AI API 建立一個配置物件。 然後，我們透過向配置物件的`getGenerativeModel`方法提供模型 ID（“gemini-pro”）來初始化模型。 > #### **型號配置：** > > 我們也可以依照自己的方便配置模型參數 > > 這些參數值控制模型如何產生回應。 > > 例子： > > ```javascript > 常量產生配置 = { > 停止序列：\[“紅色”\]， > 最大輸出令牌：200， > 溫度：0.9， > 頂部P：0.1， > 頂級K：16， > }; > > const model = configuration.getGenerativeModel({ model: modelId, GenerationConfig }); > ```` > #### **安全設定：** > > 我們可以使用安全設定來防止有害的反應。預設情況下，安全性設定配置為阻止在各個維度上具有中等到高可能性不安全的內容。 > > 這是一個例子： > > ```javascript > const { HarmBlockThreshold, HarmCategory } = require("@google/generative-ai"); > > 常量安全設定 = \[ > { > ``` > category: HarmCategory.HARM_CATEGORY_HARASSMENT, > > ``` > ``` > threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH, > > ``` > }, > { > ``` > category: HarmCategory.HARM_CATEGORY_HATE_SPEECH, > > ``` > ``` > threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, > > ``` > }, > \]; > > const model = genAI.getGenerativeModel({ model: "MODEL\_NAME", safetySettings }); > ```` > > 透過這些安全設置，我們可以透過最大限度地減少有害內容生成的可能性來增強安全性。 ### 3. 管理對話歷史記錄： 為了追蹤對話歷史記錄，我們建立了一個陣列`history`並將其從控制器檔案中匯出： ``` export const history = []; ``` ### 4.**實現控制器功能：** 現在，我們將編寫一個控制器函數`generateResponse`來處理產生路由（/generate）並產生對使用者請求的回應。 ``` /** * Generates a response based on the given prompt. * @param {Object} req - The request object. * @param {Object} res - The response object. * @returns {Promise} - A promise that resolves when the response is sent. */ export const generateResponse = async (req, res) => { try { const { prompt } = req.body; const result = await model.generateContent(prompt); const response = await result.response; const text = response.text(); console.log(text); history.push(text); console.log(history); res.send({ response: text }); } catch (err) { console.error(err); res.status(500).json({ message: "Internal server error" }); } }; ``` 在這裡，我們從請求正文中獲取提示，並使用`model.generateContent`方法根據提示產生回應。 為了追蹤響應，我們將響應推送到歷史陣列。 ### 5. 查看回覆紀錄： 現在，我們將建立一條路線來檢查我們的回應歷史記錄。該端點傳回`history`陣列。 將簡單程式碼加入`./index.js`資料夾中。 ``` app.get("/generate", (req, res) => { res.send(history); }); ``` 我們就完成了！ ### 6.執行專案： 現在，我們必須檢查我們的應用程式是否正常運作！ 讓我們使用以下命令來執行我們的專案： ``` npm run start ```  沒有錯誤！感謝上帝！ :) 它運作正常。 ### 7. 檢查功能 接下來，我們將使用 Postman 發出 Post 請求來驗證我們的控制器功能。 我們將使用以下 JSON 負載向<http://localhost:3000/generate>發送 POST 請求： ``` { "prompt": "Write 3 Javascript Tips for Beginners" } ```  我們得到了回應： ``` { "response": "1. **Use console.log() for Debugging:**\n - console.log() is a useful tool for debugging your JavaScript code. It allows you to inspect the values of variables and expressions, and to see how your code is executing. This can be especially helpful when you encounter errors or unexpected behavior in your program.\n\n2. **Learn the Basics of Data Types:**\n - JavaScript has several built-in data types, including strings, numbers, booleans, and objects. Understanding the properties and behaviors of each data type is crucial for writing effective code. For instance, strings can be manipulated using string methods, while numbers can be used in mathematical operations.\n\n3. **Use Strict Mode:**\n - Strict mode is a way to opt-in to a restricted and secure subset of JavaScript. It helps you to write more secure and reliable code, as it throws errors for common mistakes that would otherwise go unnoticed in regular JavaScript mode. To enable strict mode, simply add \"use strict;\" at the beginning of your JavaScript file or module." } ```  偉大的！我們的 Gemini AI 整合正在按預期工作！ 此外，我們可以造訪[http://localhost:3000/generate 的](http://localhost:3000/generate)歷史記錄端點來查看對話歷史記錄。 這樣，我們就將 Gemini AI 整合到了 Node.js 應用程式中。在接下來的文章中，我們將探索 Gemini AI 的更多用例。 到那時，請繼續關注！ 結論 -- 如果您發現這篇部落格文章有幫助，請考慮與可能受益的其他人分享。您也可以關注我，以了解更多有關 Javascript、React 和其他 Web 開發主題的內容。 要贊助我的工作，請存取： [Arindam 的贊助頁面](https://arindam1729.hashnode.dev/sponsor)並探索各種贊助選項。 在[Twitter](https://twitter.com/intent/follow?screen_name=Arindam_1729) 、 [LinkedIn](https://www.linkedin.com/in/arindam2004/) 、 [Youtube](https://www.youtube.com/channel/@Arindam_1729)和[GitHub](https://github.com/Arindam200)上與我聯絡。 感謝您的閱讀:)  --- 原文出處：https://dev.to/arindam_1729/how-to-use-google-gemini-with-nodejs-2d39
**長話短說** -------- 到 2024 年，Python 仍然是資料科學的主要語言，因為它簡單，而且還擁有用於資料清理、特徵工程、視覺化和機器學習的各種函式庫。 如果您想開始或將您的職業生涯轉向更加以資料科學為導向的方向，此列表將為您提供您需要了解的庫。  --- 1-太皮 ---- **領域：全面應用**  Taipy 旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。 這個開源 Python 函式庫專為輕鬆開發前端 (GUI) 和 ML/資料管道而設計。 它程式碼量低，專為任何 pythonista 設計。 主要特徵： - 邁向資料科學：筆記本相容並與機器學習平台（Dataiku、Databricks 等......）輕鬆集成 - Taipy 隨著應用程式用戶的增加而擴展 - Taipy 適用於大型資料集 - 非同步模式：非常適合處理高負載應用程式  {% cta https://github.com/Avaiga/taipy %} Star ⭐ Taipy 儲存庫 {% endcta %} 您的支持意義重大🌱，並且在許多方面為我們帶來了很大的幫助，例如寫文章！ 🙏 --- 2-Matplotlib ------------ **領域：資料視覺化**  Matplotlib 是最著名的視覺化小工具庫。 借助該庫，您可以利用其廣泛的圖表和自訂功能輕鬆繪製任何 2D 圖形。 一個很棒的庫，可以透過簡單快速的圖表檢查模型的效能。 {% cta https://github.com/matplotlib/matplotlib %} Star ⭐ 儲存庫 {% endcta %} --- 3- 熊貓 ----- **領域：資料處理與分析**  如何在不了解 Pandas 的情況下使用 Python 進行編碼？熊貓是Python皇室！ 該庫的兩個資料結構是： - 資料框 - 系列 該庫允許快速且有效率地載入、清理和準備資料。 主要功能包括： - 載入資料中 - 重塑資料框 - 基礎統計 {% cta https://github.com/pandas-dev/pandas %} Star ⭐ 儲存庫 {% endcta %} --- 4-Numpy ------- **領域：數值計算**  Numpy 不如 Pandas 通用，但它是科學計算和資料預處理的重要工具。 使用 Numpy 時，您將熟悉陣列並知道如何有效地進行資料操作和數學函數。 這個庫對於您的資料科學專案絕對是必不可少的。 {% cta https://github.com/numpy/numpy %} Star ⭐ 儲存庫 {% endcta %} --- 5-Scikit-學習 ----------- **領域：機器學習**  另一個 Python 函式庫，這一次，您在 Python 中進行機器學習的首選。 該庫有多種演算法： - K-均值聚類 - 回歸 - 分類 但它還透過例如資料分割和降維技術來設定您的機器學習專案。 {% cta https://github.com/scikit-learn/scikit-learn %} Star ⭐ 儲存庫 {% endcta %} --- 6-西伯恩 ----- **領域：統計資料視覺化**  Seaborn 將為 Matplotlib 帶來一些附加功能。 當 Matplotlib 強調精確性和簡單性時，該程式庫帶來了複雜且有吸引力的視覺化效果。 {% cta https://github.com/mwaskom/seaborn %} Star ⭐ 儲存庫 {% endcta %} --- 7-TensorFlow 或 Pytorch ---------------------- **領域：深度學習**  Pytorch 還是 TensorFlow 這就是問題所在。 這兩個庫提供了神經網路的介面。 它們非常靈活，可為您提供高效的 API 來建立和建立神經網路模型。 選擇取決於您，但這裡有一些區別： - PyTorch 具有更自然語言處理的角度 - Pytorch 更具 Python 風格 {% cta https://github.com/tensorflow/tensorflow %} Star ⭐ TensorFlow 儲存庫 {% endcta %} {% cta https://github.com/pytorch/pytorch %} Star ⭐ PyTorch 儲存庫 {% endcta %} --- 8-硬 --- **領域：深度學習**  Keras 是開始深度學習的好方法，因為它在 TensorFlow 之上執行，但實作過程得到簡化。 {% cta https://github.com/keras-team/keras %} Star ⭐ 儲存庫 {% endcta %} --- 9-狀態模型 ------ **領域：統計建模**  該庫有一系列統計模型。 它是機器學習專案探索性資料分析階段的絕佳工具。 一系列功能涵蓋從描述性分析到統計測試；它也是一個適合處理時間序列資料、單變數和多元統計等的函式庫。 {% cta https://github.com/statsmodels/statsmodels %} Star ⭐ 儲存庫 {% endcta %} --- 10-極地 ----- **領域：快速資料操作**  Polars 是一個為處理大型資料集而建立的 DataFrame 函式庫。 它的靈感來自 Python 的頂級庫 - Pandas，但進行了（快速）調整，速度提高了 10 到 100 倍。處理大型資料集時必須了解的工具。 {% cta https://github.com/pola-rs/polars %} Star ⭐ 儲存庫 {% endcta %} --- 結論 -- 這十個函式庫對於任何機器學習專案都是必不可少的，掌握它們將增強您的資料科學履歷。 請隨時評論您最喜歡的 ML/AI 庫！ --- 原文出處：https://dev.to/taipy/python-libraries-for-your-datascience-cv-in-2024-5cl7
利用 Rust 支援的後端框架與 React 前端相結合，提供出色的無瀏覽器體驗 ----------------------------------------  許多開發人員都可以告訴您他們對 JavaScript GUI 框架又愛又恨的關係，該框架幫助徹底改變了許多桌面應用程式的製作方式。事實上，我們今天使用的許多應用程式，無論是與開發、社交媒體、通信……凡是有關的應用程式，都是使用 Electron 框架建置的。 如果您好奇，請從其[網站](https://www.electronjs.org/apps)查看使用 Electron 的應用程式的精選清單。 --- 關鍵是，Electron 為具有 Web 開發經驗的開發人員提供了為多個平台建立獨立桌面應用程式的機會…所有這些都無需學習任何新的程式語言！它提供了使用我們許多人一直使用的相同 JavaScript、CSS 和 HTML 的能力，這當然是非常棒的！ 簡單總結一下 Electron 是如何做到這一點的： > Electron 是一個使用 JavaScript、HTML 和 CSS 建立桌面應用程式的框架。透過將 Chromium 和 Node.js 嵌入到其二進位檔案中，Electron 允許您維護一個 JavaScript 程式碼庫並建立可在 Windows、macOS 和 Linux 上執行的跨平台應用程式 - 無需本地開發經驗。 ---  --- 使用 Electron 建立桌面應用程式的最大缺點之一，正如你們中的一些人可能在 Stack Overflow 和其他論壇中看到的那樣…生成的二進位檔案往往非常大！如此之大，即使只是一個中等大小的程式碼庫也可能產生約 60MB 的最終二進位。 在親身經歷了這種挫敗感之後，我開始想知道是否有一個神奇的解決方案可以解決這個問題……事實證明， **Rust 恰好提供了一個！** ---  --- > Tauri 是一個工具包，可協助開發人員使用幾乎任何現有的前端框架為主要桌面平台開發應用程式。核心是用 Rust 建構的，CLI 利用 Node.js，使 Tauri 成為一種真正的多語言方法來建立和維護出色的應用程式。 ### 潛入 令我興奮的是，他們的命令列鷹架工具建立了使用熟悉的前端框架啟動和執行所需的所有 Rust 檔案。不僅如此，一旦我準備好開始將自己的功能加入到後端以供 UI 使用，Tauri 就可以讓一切工作變得相當無縫！ ---  --- 我決定嘗試讓 Tauri 為我計劃參與的一個社區專案建立一個新的桌面儀表板應用程式，劇透一下……**它並沒有讓人失望！** 正如我之前提到的，入門相當簡單： - 確保您的系統已安裝 Rust - 如果在 Windows 或 Linux 上，請確保安裝相關相依性 - 執行一個簡單的命令來設定您的專案 之後，問題是將前端原始檔全部放在一起，同時當我需要一些有關 UI 和後端之間的進程間通訊的指導時，偶爾會參考 Tauri 的文件。 --- {% 嵌入 https://gist.github.com/dedSyn4ps3/5703367578339fc8c3440ea8a09fa449 %} --- 使用 Tauri 建立儀表板的美妙之處在於，我不再需要為了能夠正確利用進程間通訊而建立單獨的`preload.js`檔案。 所需要的只是在我想要從 UI 呼叫的函數上方的`main.rs`中進行正確的註釋，以及在我的 React `jsx`檔案中加入一個簡單的導入行： `import { invoke } from '@tauri-apps/api/tauri'` 最終，Tauri 建置的應用程式的強大之處在於其後端使用 Rust。這使得像我這樣的開發人員能夠將他們的最終產品建置成本地執行的二進位文件，其大小只是許多 Electron 建置的應用程式的一小部分。 ### 結論 至少對我來說，很明顯，Tauri 肯定有潛力繼續發展，直至推翻 Electron 作為主導的「前端」GUI 框架。儘管由於是基於 Rust 建置的，可能會存在一些令人生畏的因素，但了解其內部結構所需的少量時間是非常值得的！ ---  --- 我鼓勵任何想要開始前端 GUI 開發之旅的人檢查 Tauri 框架，並抵制立即將 Electron 作為直接解決方案的衝動……我向你保證，你會感到驚訝！ 為了完整起見，您可以在我的 Gitlab 上找到我的社群專案的完整程式碼庫。如果您正在為自己的專案尋找任何想法，請檢查一下！ {% 嵌入 https://gitlab.com/dedSyn4ps3/enviroplus-desktop %} {% 嵌入 https://dev.to/dedsyn4ps3 %} {% cta https://github.com/dedsyn4ps3 %} 💻 也查看我的 Github！{% endcta %} --- 原文出處：https://dev.to/dedsyn4ps3/goodbye-electron-hello-tauri-26d5
介紹 -- 2024 年即將到來，我們努力為新的一年做計劃，思考來年我們可以做或學到的事情。現在是在新的一年中尋找要學習的框架、了解它們的功能並找出它們的特別之處的最佳時機。我們查看了 2023 年[JS 新星](https://risingstars.js.org/2023/en)名單以獲取指導，並試圖盡可能客觀。**對於每個特色框架，我們重點介紹了它們最大的優點，以便您可以了解它們的優點以及哪些可以讓您親自嘗試！** HTMX - 回到基礎🚲 ------------  這是給誰的： - 你想少寫 JavaScript - 您想要更簡單、以超媒體為中心的程式碼 如果不從那些自詡為和平前端庫的東西入手，那將是一種罪。 HTMX 在 2023 年人氣飆升，在過去一年中獲得了大部分 GitHub 明星。 HTMX 不是普通的 JS 框架。如果您在[HTMX](https://htmx.org/)工作，您將把大部分時間花在超媒體世界中，與我們通常以 JS 為重的現代 Web 開發觀點相比，您會以完全不同的眼光來看待 Web 開發。 **HTMX 利用 HATEOAS（超媒體作為應用程式狀態引擎）概念的力量，使開發人員能夠直接從 HTML 存取瀏覽器功能，而不是使用 Javascript** 。 這也證明您可以透過發布精彩的迷因並將口碑作為主要行銷來源來獲得知名度和認可。不僅如此，你還可以成為HTMX的[CEO](https://htmx.ceo/) ！它吸引了許多開發人員嘗試這種建立網站的方法並重新思考他們當前的做法。所有這些都讓 2024 年該圖書館的未來變得令人興奮。 Wasp - 全棧，開箱即用🚀 ---------------  這是給誰的： - 您想快速發布全端應用程式 - 您希望在一個出色的一體化解決方案中繼續使用 React 和 Node.js，而不需要手動選擇堆疊的每個部分 - 您想要一個用於 React 和 Node.js 的免費 saas 模板，其中所有內容都已預先配置 - [Open SaaS](https://github.com/wasp-lang/open-saas) 對於那些希望該工具簡單輕鬆地完全控制其堆疊的人來說，別再猶豫了！ [Wasp](https://github.com/wasp-lang/wasp)是一個固執己見的全端框架，它利用其編譯器以快速、簡單的方式為您的應用程式建立資料庫、後端和前端。**它使用 React、Node.js 和 Prisma，這些都是全端 Web 開發人員正在使用的最著名的工具。** Wasp 的核心是 main.wasp 文件，它可以滿足您的大多數需求。在那裡，您可以定義： - 全端認證 - 資料庫結構定義 - 非同步作業，無需額外的基礎設施 - 部署簡單且靈活 - 全端類型安全 - 電子郵件發送（Sendgrid、MailGun、SMTP 伺服器...） - 和更多… 最酷的事？在您的 Wasp 應用程式完成編譯步驟後，輸出是標準的 React + Vite 前端、Node.js 後端和 PostgreSQL 資料庫。從那裡，您可以使用單一命令輕鬆地將所有內容部署到[Fly.io](http://Fly.io)等。 儘管有些人可能認為 Wasp 固執己見的立場是一件消極的事情，但它是 Wasp 眾多全端功能背後的驅動力。借助 Wasp，為單一開發人員或小型團隊啟動全端專案變得更加容易，特別是如果您使用預製模板或[OpenSaaS](https://github.com/wasp-lang/open-saas)之一作為 SaaS 啟動器。由於專案的核心定義明確，因此很容易開始專案，並有可能在幾天內建立您自己的全端 SaaS！ **同樣很酷的是，大多數 Web 開發人員的大部分現有知識仍然適用於此，因為 Wasp 所使用的技術已經建立**。 Solid.js - 一流的反應性 ↔️ --------------------  這是給誰的： - 如果你想要高反應性程式碼 - 現有的 React 開發人員想要嘗試一些低學習曲線的高效能東西 [Solid.js](https://www.solidjs.com/)是一個非常高效能的 Web 框架，與 React 有一些相似之處。例如，兩者都使用 JSX，利用基於函數的元件方法，**但它不使用 Virtual DOM，而是將程式碼轉換為 vanilla JS** 。儘管如此，它更出名的是利用信號、備忘錄和效果來實現細粒度反應的方法。儘管如此，訊號仍然是 Solid 中最簡單和最著名的原語。它們包含值及其 getter 和 setter 函數，允許框架根據需要在 DOM 中的確切位置觀察和更新更改，這與 React 不同，React 會重新渲染整個元件。 Solid.js 不僅使用 JSX，還對其進行了增強。它提供了一些很酷的新功能，例如 Show 元件，它可以啟用 JSX 元素的條件渲染，而 For 元件則允許更輕鬆地迭代 JSX 中的集合。另一個重要的事情是，它還有一個名為Solid Start（目前處於測試階段）的元框架，使用戶能夠根據自己的偏好，使用基於文件的路由、操作、API 路由和中間件等，以不同的方式呈現應用程式特徵。 Astro - 靜態網站之王👑 ---------------  這是給誰的： - 如果您想要一款適用於部落格、CMS 網站的優秀工具 - 一個可以整合其他函式庫和框架的框架 如果您在 2023 年建立了一個內容驅動的網站，那麼您很有可能使用[Astro](https://astro.build/)作為您選擇的框架來實現它！ Astro 是另一個使用不同架構概念來脫穎而出的框架。對 Astro 來說，它是島嶼建築。在 Astro 的上下文中，島嶼是頁面上的任何互動式 UI 元件，從靜態內容的海洋中脫穎而出。一個頁面可以有任意數量的島嶼，因為它們彼此隔離執行，但它們也可以共享狀態並相互通信，這非常有用。 Astro 的另一個有趣的事情是，他們的方法使用戶能夠使用[不同的前端框架，](https://docs.astro.build/en/guides/integrations-guide/)例如 React、Vue、Solid 來製作他們的網站。因此，開發人員可以輕鬆地根據他們目前的知識建立網站，並利用可以整合到 Astro 網站中的現有元件。 Svelte - 簡單而有效🎯 ---------------  這是給誰的： - 你想要一個容易學習的框架 - 編寫簡單且程式碼執行速度快 **[Svelte](https://www.notion.so/Web-frameworks-we-are-most-excited-for-in-2024-35cfadc282ab4d28904b0fe4adf231d4?pvs=21)是另一個框架，它試圖透過盡可能簡單和對初學者友好來簡化和加速 Web 開發**。這是一個非常簡單的學習框架，因為要擁有響應式屬性，您必須聲明它並在 HTML 模板中使用它。每當 Javascript 中的值以程式設計方式更新時（例如，透過觸發 onClick 事件按鈕），它將反映在 UI 上，反之亦然。 Svelte 的下一步將是引入符文。 Runes 將成為 Svelte 處理反應性的方式，以便更輕鬆地處理大型應用程式。類似於 Solid.js 的訊號，符文提供了一種透過使用類似函數的語句來利用應用程式的反應狀態的直接方法。與 Svelte 目前的工作方式相比，它們將允許使用者精確定義整個腳本的哪些部分是反應性的，以便元件具有更高的效能。與 Solid 和 Solid Start 類似，Svelte 也有自己的框架，稱為 SvelteKit。 SvelteKit 為使用者提供了一種快速啟動由 Vite 支援的 Svelte 應用程式的方法。它提供路由器、建置優化、不同的渲染和預渲染方式、影像優化等。 Qwik - 很快🚤 ----------  這是給誰的： - 如果您想要一個高效能的網頁應用程式 - 現有的 React 開發人員想要嘗試一些低學習曲線的高效能東西 此列表中最後但並非最不重要的框架是[Qwik](https://qwik.builder.io/) 。 Qwik 是另一個利用 JSX 和功能元件的框架，類似於 Solid.js 的做法，為基於 React 的開發人員提供熟悉的環境，以便盡快上手。顧名思義， **Qwik 的主要重點是實現應用程式的最高效能和執行速度**。 Qwik 透過利用可恢復性的概念來實現其速度。簡而言之，可恢復性是基於暫停伺服器上的執行並在客戶端上恢復執行的思想，而無需重播和下載所有應用程式邏輯。這種行為是透過延遲 JavaScript 程式碼的執行和下載來實現的，除非有必要處理用戶交互，這是一件很棒的事情。它既可以提高整體速度，又可以將頻寬量降低到絕對最小值，從而實現近乎即時的載入。 結論 -- 我們提到的所有這些框架和庫之間最大的共同點是熟悉度。**每個人都尋求以一種基於他們當前知識的方式來接觸潛在的新開發人員，而不是做一些全新的事情，這是一個非常酷的概念**。 當然，這裡可能還有更多未在全文中提及的函式庫和框架，但至少值得一提。例如，我們有 Angular，除了新的徽標和文件之外，它還包括訊號和新的控制流。還有 Remix 新增了對 Vite、React Server Components 和新的 Remix SPA 模式的支援。最後，我們不能忘記 Next.js，它在過去幾年中成為了 React 開發人員的預設選項，為新的 React 功能鋪平了道路。 --- 原文出處：https://dev.to/wasp/web-frameworks-we-are-most-excited-for-in-2024-4d15
介紹 -- 在 SPA 出現之前，Web 應用程式通常是多頁面的。這意味著每次用戶與應用程式互動時，伺服器都會發送完整的新頁面，然後瀏覽器會再次載入它。每次用戶在頁面之間導航時，都會發生完整的頁面重新加載，這可能會減慢速度並造成不太流暢的用戶體驗。類似的應用程式通常是使用伺服器端技術建立的，例如 PHP、Ruby on Rails、ASP.NET 等，這些技術在伺服器端產生 HTML 程式碼並將其發送到瀏覽器。  Web開發人員是通用專家，他們同時負責前端和後端部分。隨著網路技術的發展和用戶的需求，需要新的解決方案，使他們能夠在沒有任何問題或等待的情況下使用互動式介面。 這就是第一個使用 BackboneJs 或 AngularJs 的 SPA 解決方案的出現。它們使我們能夠減少伺服器的負載（當時伺服器的資源有限），並在透過 JS 處理網頁時提供互動性，因為無需等待伺服器更新的新頁面。 這就是前端和後端部分的劃分。純粹前端開發人員的角色變得更加需求和多樣化。他們開始專注於建立使用者介面、使用 HTML、CSS 和 JavaScript，以及與 API 和伺服器互動。另一方面，後端開發人員變得更加關注資料處理、應用程式業務邏輯、使用資料庫和建立伺服器 API。 這就是我們進入 React、Angular2、Vue 和其他 Web 應用程式開發工具時代的方式。現在我們不再建立簡單的表單和列表，而是有 js 路由、狀態管理、瀏覽器 API、將授權令牌綁定到請求、資料映射等。 > ### 我們開始把簡單的事情複雜化。 透過這種方法，出現了以下問題： - **溝通協調困難**。 Api 合約與通訊方法 — HTTP 1.1、Websocket、GraphQL。 JSON 解析和驗證。 - **理解和認識上的分歧**。例如，您可以開發一個建立許多查詢的前端應用程式，並將其視為正常且最佳化的 SPA。但對於後端來說，這是一個非常危險的情況，因為它現在需要大量的資料庫存取以及對這些資料的適當聚合，這會影響它的效能和維護。 - **重複工作**。後端的大多數 CRUD 操作在前端都有類似的行為。我們不只是從伺服器獲取列表，現在我們將其放入 store() 中，每個用戶操作都透過dispatch() 處理並等待請求執行，之後我們透過reducer() 更新store根據結果——**後端對資料庫所做的一切，我們都會在前端重複**。 （頁面重新加載和從伺服器將 SPA 恢復到當前狀態也值得一提 - 目前是一個單獨的痛苦） - **除錯和測試困難**。現在您需要考慮可能的整合問題並在應用程式雙方的上下文中測試它們。是的，您可以為前端應用程式建立隔離的 e2e 測試，但它們不能保證生產中的可靠性。是的，有 ZoD 用於驗證伺服器回應，但它的使用百分比是多少？ - **增加了開發時間和成本**。對 API 合約的任何更改都需要兩個人同時進行。您不能像以前那樣直接將模板變更為伺服器。你需要集會、分成單獨的任務、商業分析專家等等來讓改變順利進行。 - **搜尋引擎優化**。由於我們的應用程式完全是透過 JS 建構的，搜尋引擎無法取得應用程式內容及其導航來正確索引它，因此需要 SSR 和 SSG 解決方案。 - **安全**。在頁面上輸入的任何關鍵資料在傳遞到伺服器之前都需要隱藏。此外，應用程式需要向伺服器請求大量個人訊息，從而洩露存取權杖。 那麼，通常的前端為什麼會消亡呢？ ---------------- 只需存取任何資源，您就會看到有多少職位空缺： - Python + Django - PHP + Laravel - NextJs + React - Nuxt + Vue 這些都是用於基於伺服器的 Web 應用程式開發的捆綁包。由於採用 Hydration 和 Resumability 方法，伺服器只能渲染介面的修改部分，而無需重新載入頁面。 他們提供什麼： - 伺服器應用程式現在不需要複雜的 HTTP 或 WS 合約並且雙方都支援它們，它可以使用更好的方法與 gRPC 等其他服務交換資訊。 - 由於缺乏中間批准，更改過程更快，對於 1 人，用戶看到的結果會立即更改。 - 測試可以全面檢查應用程式，消除整合測試並減少錯誤。 - 您僅交換 HTML 標記，所有「請求-回應」邏輯對使用者來說都是隱藏的 - 當您可以傳遞現成的範本時，為什麼還要傳遞大量 JSON 資料來將 SPA 還原到正確的狀態呢？ - 你不需要擔心瀏覽器相容性，也不需要使用babel等工具，因為頁面上的JS程式碼很少。 隨著No-Code解決方案的出現、透過AI生成模板、龐大的伺服器資源和SEO需求——目前數量的前端開發人員和工具不再需要只開發前端部分。 企業主有一個合理的問題——“*為什麼我需要雇用一個純粹的前端開發人員和一個純粹的後端開發人員來做一個簡單的應用程式？”* 全端開發人員並不是一種管理時尚，就節省人員配備而言，現在它已成為中流砥柱。你不需要一個純粹的前端開發人員，你需要一個能夠製作整個應用程式、直接對資料庫或其他服務執行簡單操作並顯示結果的開發人員。 是的，毫無疑問仍然會存在需要前端和後端分離的複雜或“無頭”應用程式，但大多數應用程式將脫離 SPA 並沿著已經存在的方式發展，但現在我們有一個解決方案那些問題。隨著 HTMX 的出現，任何具有基礎知識的後端開發人員都可以建立 Web 應用程式。現在你甚至不需要了解 JS 就可以建立一個幾乎沒有邏輯的單頁應用程式。 你可能會問，「*前端開發人員不僅負責 JS 邏輯，還負責 CSS 和適當的選擇器、HTML 及其語義，後端開發人員現在必須知道嗎？* 」 — 不，現在人工智慧或「HTML 佈局設計師」可以根據 Figma 的佈局產生模板。 HTML 範本的邏輯和互動性現在在伺服器上定義。 結論 -- 現在是思考您是否真的需要所有這些複雜的前端開發工具以及您是否應該保持純粹的前端開發人員的好時機。 我預計目前的前端開發人員將採用 60% 前端和 40% 後端的比例轉向全端資格，以保持相關專家的地位。 HTMX 只是開始，NextJs 或 Nuxt 工具的向量將會成長，Angular 類型的框架如果不能適應新的實作就會消亡，儘管 Angular 生態系統已經在 AnalogJs 上有了原型 資源 -- - [**htmx - 強大的 html 工具**](https://htmx.org/) - [**模擬**](https://analogjs.org/) - [按「前端開發人員」角色搜尋職位](https://www.indeed.com/jobs?q=front+end+developer&l=Remote) - [按「全端開發人員」角色搜尋職位](https://www.indeed.com/jobs?q=full+stack+developer&l=Remote) - [**Vercel 的 Next.js - React 框架**](https://nextjs.org/) - [**Nuxt：直覺的 Vue 框架**](https://nuxt.com/) --- 原文出處：https://dev.to/misterion96/the-front-end-development-were-used-to-is-dying-4e19
您是否正在尋找**最好的 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
讓我給你一個簡單的🚦路線圖，讓你知道你現在在哪裡以及下一步應該去哪裡。  🔑關鍵概念 ----- 每個網站都有兩個部分。一個**前端**，一個**後端**。 前端是您在瀏覽器中看到它並與之互動的部分。**所有視覺方面**。 後端是為前端提供動力的部分。它*在幕後*，**主要是儲存資料和資料庫**並提供給前端。 🌐工作 --- 因此，網路開發工作分為`three categories` 。 - 👨💻前端開發 - 🛟後端開發 - 🚢以及全端開發（涉及前端和後端開發） 👷♂️後端開發人員到底是做什麼的？ ------------------ 後端開發人員負責建立驅動用戶所使用的應用程式*功能*的**基礎系統**。 這包括設計架構、實施和維護這些關鍵系統等各種任務。 他們的職責通常涉及與： - 💾 資料庫，例如MySQL， - ✂️ 框架，例如 Laravel 或 Ruby on Rails，以及 - 🧨 API（應用程式介面）。 他們的專業知識確保後端基礎設施無縫執行，從而實現使用者介面與底層資料和流程之間的順暢互動。 如果您不知道的話，這是後端開發人員的`core`職責： |任務|描述| |---|---| |了解績效需求與目標 |了解網站的效能要求和目標 | | API的開發與管理|為網站建立和管理 API | |開發資料儲存與處理系統|建置系統以安全地儲存和處理支付處理等流程所需的資料| |編寫、測試和維護程式碼 |編寫程式碼、測試和開發編碼問題的解決方案，包括維護任務 | |設計網站架構|使用敏捷 Scrum 和框架等既定方法設計網站架構 | |組織系統邏輯|有效建構系統邏輯| |提供系統問題的解決方案|提供解決方案來解決與系統相關的問題和挑戰 | --- 🥷 六個月內成為後端開發人員的技能 ----------------- 成為熟練的後端開發人員需要在相對較短的時間內掌握各種技能和技術。 下面，我概述了一個**全面的路線圖**，以幫助您在六個月內實現這一目標： **第 1 個月：🦴後端開發基礎** - **第一週：**了解後端開發人員的角色和職責。熟悉資料庫、框架和 API。 - **第 2-3 週：**參加資料庫綜合課程。了解 SQL 和 MySQL 等關聯式資料庫。練習建立和管理資料庫。 - **第 4 週：**了解伺服器端程式語言。從 PHP 或 Python 開始。學習基本語法、控制結構和資料類型。 **第 2 個月：🍖高階後端概念** - **第 1-2 週：**加深對資料庫的理解。探索 MongoDB 等 NoSQL 資料庫。了解*資料建模和優化*。 - **第 3-4 週：**掌握伺服器端程式語言。深入研究 PHP 或 Python。了解函數、類別和物件導向程式設計。 - **最後 2 天：**使用框架進行實踐專案。選擇流行的框架，例如*適用於 PHP 的 Laravel 或適用於 Python 的 Django* 。建立簡單的應用程式以理解模型-視圖-控制器 (MVC) 架構。 **第 3 個月：🌦️API 開發和集成** - **第 1-2 週：**了解 API 及其在後端開發中的重要性。探索 RESTful API 設計原則。 - **第 3 週：**開始建立您自己的 API。使用`Postman`等工具來測試和偵錯 API 端點。了解身份驗證和安全性。 - **第 4 週：**關注*API 整合*。了解如何在 Web 和行動應用程式中使用 API。練習將第三方 API 整合到您的專案中。 **第 4 個月：🛸故障排除與最佳化** - **第 1-2 週：**掌握故障排除技術。了解如何有效診斷和除錯後端應用程式。 - **第 3 週：**進入效能優化階段。了解快取、負載平衡和資料庫索引。 - **第 4 週：**學習監控和分析工具。使用 New *Relic 或 Datadog*等工具來監控應用程式效能。了解如何產生和**分析**績效指標。 **第 5 個月：🌥️雲端基礎設施和部署** - **第 1 週：**了解雲端運算概念。了解 AWS 或 Azure 等流行的雲端供應商。 - **第 2-4 週：**學習後端開發雲端服務課程。了解無伺服器運算、容器化和微服務。 - **休息日：**練習將應用程式部署到雲端。了解 CI/CD 管道和自動化部署策略。 **第 6 個月：🏗️高級主題和專案** - **第 1-2 週：**在上個月，學習更多高階後端主題。選擇訊息佇列、事件驅動架構和即時通訊等主題。 - **第 3 週：**開展*頂點計畫*。選擇一個具有挑戰性的專案，整合各種後端技術和概念。 - **第 4 週：**最後，反思您的學習歷程。審查您的專案並確定需要改進的領域。透過練習**程式設計挑戰**來準備工作面試。 ⛏️後端開發：工具與軟體 ------------ 以下是後端開發中常用的工具和軟體的細分： **1. 📇資料庫框架：** - **MySQL：**用於儲存和檢索資料的關聯式資料庫管理系統。它廣泛用於 Web 應用程式，並提供可擴展性和可靠性。 - **MongoDB：**一種 NoSQL 資料庫程序，使用具有模式彈性的類似 JSON 的文件。它適用於資料模型快速變化或非結構化資料的應用程式。 **2. 🛝網路伺服器：** - **Apache HTTP Server 2：**一種開源 Web 伺服器軟體，可透過網際網路提供 Web 內容。它以其穩定性、安全性和靈活性而聞名，使其成為託管網站和 Web 應用程式的熱門選擇。 **3. 🔐安全協定：** - **SSL/TLS 憑證：**這些是透過電腦網路提供安全通訊的加密協定。 SSL（安全通訊端層）及其後繼者 TLS（傳輸層安全性）對伺服器和用戶端之間的資料進行加密，確保線上連線的機密性和完整性。 **4. 💫版本控制系統：** - 接下來，請熟悉版本控制系統。這些系統有助於追蹤專案歷史並實現與其他人的協作工作。 - 🔌 吉特： - Git 是使用最廣泛的版本控制系統，超過 70% 的軟體開發團隊都在使用。這是一個必須知道的工具，建議分配大約兩週的時間來學習 Git。 後端開發人員通常利用這些工具和軟體來建立強大、可擴展且安全的 Web 應用程式，用於處理資料儲存、伺服器託管和線上通訊加密。 如果您尋求有關後端開發的更多知識，請考慮查看此[深入的後端開發路線圖](https://roadmap.sh/backend)。 --- 👏結論 --- 透過遵循此時間表並持續努力學習，您可以在 6 個月內獲得寶貴的後端開發技能，並為找到後端開發工作做好充分準備。 如果您想在六個月內成為前端開發人員，您也可以閱讀這篇文章。 👇 [6 個月內成為前端開發人員的路線圖](https://dev.to/codewithshahan/must-have-frontend-development-skills-roadmap-2024-28jc) 最後，如果你想知道[前端開發的未來](https://dev.to/codewithshahan/the-future-of-frontend-development-1amd)，你也可以看看這篇文章。 請關注更多有價值的內容，如果您覺得有幫助，您可能也會喜歡我的[YouTube 頻道](https://www.youtube.com/programmingwithshahan)。 感謝您花時間閱讀這篇文章。 🤳我的社交： [X](https://twitter.com/shahancd) --- 原文出處：https://dev.to/codewithshahan/skills-to-become-a-backend-developer-in-6-months-roadmap-4li3
什麼是 readme 文件？ -------- 自述文件是用戶在查看儲存庫時首先看到的內容。它讓用戶了解專案的內容、使用的語言、條款和條件、您的專案可以做什麼、顯示正在執行的應用程式的螢幕截圖等。 為什麼它如此重要？ --------- 該用戶可能是招募人員、您未來的老闆或客戶。因此，需要注意的是，專案的自述文件應該回答專案的內容、原因和方式。 因此，重要的是要包含最重要的訊息，對專案和所使用的技術堆疊進行清晰的描述，並提供可能不適合 README 文件的連結和進一步說明，以避免不必要地搜尋所有其他文件。可能會導致用戶失去興趣並轉向下一個潛在員工。 編寫有關該專案的良好文件是多麼重要，我怎麼強調都不為過。使用者不僅在尋找有關專案本身的訊息，而且還看到您的文件技能和對細節的關注，這可以讓您更接近找到工作。 如果您讀過我的其他文章，您可能已經注意到，除了程式設計之外，學習其他技能對我的職業生涯有多麼重要，這些技能最終幫助我找到了工作。良好的文件就是其中之一。 自述文件中應包含哪些內容？ ------------- 以下是一些可以幫助您的指導性問題： - 該專案是關於什麼的？ - 為什麼開發它，你的動機是什麼？ - 它解決什麼問題？ - 你學到了什麼？ - 是什麼讓您的專案脫穎而出？ 我將向您展示如何將這些問題轉換為文字。 ### 可能的結構 **描述** 專案的目的和描述，以便閱讀您的作品集的人可以在閱讀專案資訊的前幾秒鐘內了解該專案。 **技術堆疊** 技術堆疊，包括您的專案使用的程式語言、程式庫和框架（例如：Python、React 等）。如果您有使用外部公共 API 的前端應用程式，請提及這一點。 **設計** 與專案相關的使用者介面範例。如果專案有使用者介面，您可以插入使用者介面的 GIF、影片或圖像。 如果它是在終端上執行的應用程式，您可以建立一個 GIF 來展示如何使用它。這有助於了解如何與應用程式互動以及人們在執行專案時會看到什麼。 **特徵** 如果您的專案有很多功能，您應該加入**“功能”**部分並在此處列出它們。 **如何執行專案** 有關如何設定、執行和使用該專案的說明。如果有人想從頭開始該專案，這很好，他們應該在專案的自述文件中找到他們需要了解的所有內容，而不需要您的任何幫助。 如果很簡單，您可以將其包含在自述文件中。如果說明較長，您也可以參考專案中的另一個文件。 您還應該使用 Netlify 來託管您的專案，以便使用者可以打開已部署的應用程式並立即使用它來查看它是如何運作的。 （請記住，並非每個查看您 GitHub 個人資料的招募人員都充分了解如何在本地建立專案。） 如何設計自述文件的樣式？ ------------ `README.md`中的`.md`副檔名代表 Markdown，這是一種輕量級標記語言，具有簡單的文字格式化語法。它是一種非常簡單的語言，用於為 GitHub 建立美觀且美觀的自述文件。 因此，您可以使用典型的 Markdown 語言，例如 ``` # Heading 1 ## Heading 2 ### Heading 3 Emphasis, aka italics, with *asterisks* or _underscores_. Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. 1. First ordered list item 2. Another item ⋅⋅* Unordered sub-list. 1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list 4. And another item. [I'm an inline-style link](https://www.google.com) [I'm an inline-style link with title](https://www.google.com "Google's Homepage")  ``` --- 原文出處：https://dev.to/yuridevat/how-to-create-a-good-readmemd-file-4pa2
歡迎最近新註冊的用戶 @skytsai3321 @eriksun0310 @luumii694 @ertclee @aelgy @FlameOfDeepSea @Berlin @alan880227 @apingbping @yu11 @YouKlike @balduran @joyho @Irene907 @ScottZhuang @imgeorgechou @sdgm00 @YZRay @102-Funny @Trillion6880 @yii016999 @kevin262666 @wjhprince @pon541998 @vvvaty @ioriayaka @Julixku @AspiringYouth @tree @hlajungo @timmy @lenaiou @a27589485 @JUstin0908 @Yif18 @kwks @ht5268 @wzxc02765 @jou924 @ericwalker @zhuolaoda1106 @chloe1026 @Trista @tyty10251 @StevenMa @mesak @fayee1130 @keasdaz1dar8 @XiaoYu @k886279 @a1097562 @h86130 @shih @rjpvtpnmkf @Castella @wq41422827 @sleeppig8 @uyuy989842 @Eason860502 @s80010090 @james81061916 歡迎在留言處簡單自介一下～ 可以說一下從哪邊發現這論壇的～最近在學什麼東西～或者是關於你的一件小趣事～ 也請大家多多回覆別人的留言，問別人小問題，或者回個「嗨嗨 👋」都很好～ **歡迎各位加入這個技術成長社群！**
身為開發人員，我總是在尋找那些小細節，因為細節很重要。 我們都是 DEV 上一個大社群的一部分，在這篇文章中，我很高興分享一些您可能不知道的這個平台上意想不到的功能和技巧。 讓我帶您了解在 DEV 上可以做的 12 件令人驚訝的事情，從建立自訂按鈕到建立評論範本！ 請評論並讓我知道哪一點最讓你驚訝。 --- 1.使用標籤過濾貼文。 ----------- 隨著我們的提要中不斷出現帖子，擁有一些控制和過濾器至關重要。一種方法是使用標籤過濾貼文。 例如，要查看帶有`#discuss`標籤的帖子，只需導航到[dev.to/t/discuss](https://dev.to/t/discuss) 。 同樣，如果您想要帶有標籤`#softwaredevelopment`的帖子，請前往[dev.to/t/softwaredevelopment](https://dev.to/t/softwaredevelopment) 。 作為一般規則，您可以使用它。 ``` https://dev.to/t/paste_your_tag_without_spaces ``` 您可以將上述 URL 與您的標籤貼在一起，以查看相關類別中的熱門貼文。  您可以找到負責處理該特定標籤的標籤管理員。 如果您想知道，標籤管理員負責維護標籤與貼文的相關性。 您可以在[dev.to/dashboard/following\_tags](https://dev.to/dashboard/following_tags)檢查您關注的標籤。 所有標籤的完整清單可在[dev.to/tags](https://dev.to/tags)上找到。 --- 2.基於官方標籤的便利資源。 -------------- 它可能與第一個相關，但並非每個標籤都如此。 某些標籤提供了方便的官方資源，例如`tailwindcss`的文件或`nextjs`的有用指南。這些資源可能很有價值，尤其是當您不熟悉某個特定標籤時。  例如， `nextjs`標籤有不錯的資源:)  這些「小細節」讓DEV平台更加人性化、資訊豐富。 --- 3.RSS 源。 -------- 向 5 歲的孩子解釋 RSS feed： > 想像一下，您有一個最喜歡的卡通節目，每次有新劇集時，您的神奇電視就會向您展示它。 RSS 提要就像網站的神奇信使。當您最喜歡的網站上有新內容時，它會告訴您的計算機，這樣您就可以看到它，而無需一直檢查。這就像一個友好的通知，說：「嘿，您喜歡的網站上發生了一些有趣的事情！」。 這就像擁有來自多個來源的內容的個人化新聞源。 - 使用以下命令檢查您的 DEV RSS 提要： `dev.to/feed/your_username` - 檢查我用來尋找 RSS 來源 URL 的[Chrome 擴充功能](https://chromewebstore.google.com/detail/get-rss-feed-url/kfghpdldaipanmkhfpdcjglncmilendn)。 在本[指南](https://dev.to/p/publishing_from_rss_guide)中詳細了解如何從 DEV 的 Feed 建立草稿。 前往[dev.to/settings/extensions](https://dev.to/settings/extensions)貼上您的 RSS Feed URL 並將其與您的 DEV 設定檔整合。 假設您有自己的博客，每當您將博客發佈到您的網站時，開發人員都會將該博客作為草稿帖子獲取，您可以從儀表板發布該博客。  ### 什麼是規範 URL？ 想像一下您有一個網頁，並且有它的一些副本或變體。 （您的個人部落格+DEV部落格） 規範 URL 就像將主要 URL 標記為老闆一樣——原始來源。 它可以幫助搜尋引擎了解哪個版本是最重要或首選的，從而防止混淆並提高網頁的搜尋引擎排名。 重新發佈內容以保持搜尋引擎的清晰度時，了解規範 URL 至關重要。 --- 4.許多創新事物的瘋狂徽章。 -------------- DEV 每週根據文章中介紹的技術授予多個徽章。從技術堆疊徽章到「喜愛的評論」徽章等古怪徽章，每個徽章都有自己的魅力。 例如，如果您使用 React 撰寫文章並被視為本週最佳作者，您將獲得 React 徽章。  我忍不住分享我對我看到的一些可愛徽章的興奮之情。  我認識幾個擁有這枚心愛徽章的人。 如果你知道，請評論！    誰有這個？哈哈！值得聚會。  我有這個，但沒有贏得任何遊戲🤣  前 7 位作者徽章通常被認為是最負盛名的，是我個人最喜歡的。獲得此徽章本身就是一種榮譽。  我無法一一列舉；否則，人們會生氣。哈哈！ 在[dev.to/badges](https://dev.to/badges)上探索徽章的完整清單。 --- 5.軟體比較。 ------- 比較軟體並不是一個新趨勢。我們一直這樣做。 因此，開發團隊列出了社群建立的熱門貼文清單。人們通常會一遍又一遍地瀏覽這些帖子。 名單包含約 350 多家軟體公司。必須檢查！ - [dev.to/software-comparisons](https://dev.to/software-comparisons) - 軟體比較  --- 6. 為圖像新增標題。 ----------- 在 DEV 貼文中，您可以為圖像加入標題，以提供上下文或附加資訊來補充所顯示的圖像。 這是在圖像中導航的一種有趣的方式。 以下是您可以如何做到這一點。 您必須在圖像後面使用`<figcaption>`標記。 例如，請參見下圖及其文法。  Anmol Baranwal 的 GitHub 簡介 ```  <figcaption> GitHub Profile of Anmol-Baranwal </figcaption> ``` --- 7.訂閱評論。 ------- 通常，作為帖子的作者，您會自動訂閱所有評論。 這意味著您將收到該帖子的每條評論的通知。 然而，有趣的是，您還可以訂閱其他貼文的評論。我建議這樣做，特別是對於帶有`#discuss`標籤的帖子，因為它可以讓您接觸到各種觀點，最終獲得寶貴的學習經驗。 - `top-level comments`的通知是一個方便的功能。  --- 8. 嵌入和換行。 --------- 大多數人都已經知道這一點了。 但對於那些不這樣做的人，您可以嵌入任何影片，以便可以播放影片而不是粘貼連結。 它允許觀眾直接觀看影片，而無需存取其他網站。 ``` {% embed paste_url_here %} ``` 例如，嵌入我的 DEV 設定檔將如下所示。 {% 嵌入 https://dev.to/anmolbaranwal %} 有些人可能不知道使用` `建立換行符。 這種簡單的技術可以提高貼文的可讀性。 例如，可以使用` `將第一個句子與下一個內容分開。 。 第二句話由換行符號分隔。 --- 9. 號召性用語按鈕。 ----------- 這是最酷的！ 您知道您可以製作帶有描述的個人化按鈕嗎？如此令人興奮！ 這是吸引註意力和增強參與度的便捷方式，而且非常容易實施。 例如，讓我們為我的 GitHub 個人資料建立一個 CTA： {% cta https://github.com/Anmol-Baranwal %} 🚀 造訪我的 GitHub 個人資料 {% endcta %} 您可以使用以下語法來建立該按鈕： ``` {% cta https://github.com/Anmol-Baranwal %} 🚀 Visit My GitHub Profile {% endcta %} ``` 這種個人化的風格可以為您的貼文增添全新的維度。 該語法使用 Shopify 建立的[Liquid 標籤](https://github.com/Shopify/liquid)。 --- 10. 完整的編輯指南。 ------------ 這是即使是頂級作者也可能不知道的隱藏寶石。 DEV 團隊製作了一份全面的編輯器指南，幾乎涵蓋了使用編輯器的各個方面。它是回答以下問題的一站式資源： - 如何為圖像加入標題 - 支援的 URL 嵌入 - 如何新增不會顯示在內容中的評論（作者註） - Markdown 基礎+推薦封面圖片尺寸（1000 \* 420） - 他們甚至涵蓋了可存取性等等。 請在[dev.to/p/editor\_guide](https://dev.to/p/editor_guide)閱讀完整指南。 非常感謝開發團隊建立瞭如此方便的指南！請關注官方開發團隊並加入其中：） {% 嵌入 https://dev.to/devteam %} --- 11.評論範本。 -------- DEV 提供的另一個很棒的功能是保存評論範本的能力。無論是自我介紹還是分享社群媒體 URL，這些範本都可以節省您的時間並提高互動的一致性。 它可能很小，但它的威力很大！ 它與 GitHub 上常見的功能非常相似。  讓我們看看它是如何工作的。 若要設定評論模板，請造訪[dev.to/settings/response-templates](https://dev.to/settings/response-templates)  您可以輕鬆新增帶有短標題的新範本以供快速參考。  當您位於帖子的評論部分時，請點擊右下角的三個點 -> 然後點擊書籤符號。您將找到可以直接使用的模板清單。  值得信賴的用戶甚至可以獲得預先定義的模板列表，以更加方便。  --- 12. 播客？影片?以及隱藏標籤的力量。 -------------------- 您知道您可以在 DEV 上傳貼文影片嗎？  您可以在[dev.to/dashboard](https://dev.to/dashboard)的左下角找到上傳影片的選項  這是改進您的帖子的絕佳方法。在[dev.to/videos](https://dev.to/videos)上發現這些影片貼文。 DEV 還設有專門討論播客的部分。您甚至可以在[dev.to/pod](https://dev.to/pod)上提交自己的播客以供審查並探索其他各種播客。 > 個人化提要的隱藏標籤 隱藏標籤是一種讓您能夠更好地控制所看到的內容的方法，也是一種從 Feed 中隱藏您不想看到的內容的方法。  您可以在標籤頁面上隱藏標籤 - 使用搜尋來尋找您想要隱藏的特定標籤  您也可以在儀表板的「以下標籤」部分隱藏標籤 - 按三個點即可存取隱藏選項 - 您可以在[dev.to/dashboard/hidden\_tags](https://dev.to/dashboard/hidden_tags)找到隱藏標籤。  您可以查看儀表板上隱藏的標籤並取消隱藏它們 此功能可確保在 DEV 上提供更個人化和愉快的瀏覽體驗。 我不會討論 API，因為這會讓帖子變得很長。 不過，如果您有興趣，可以探索有關[Forem API 的](https://developers.forem.com/api/v1)更多資訊。 --- 獎金 -- 我知道我知道！ 我承諾了 12 件事，但這裡還有一些關於「只要有人讀你的博客，你就可以賺錢！」的額外內容。 在這篇富有洞察力的[部落格文章](https://dev.to/hacksultan/web-monetization-like-i-m-5-1418)中探討網路貨幣化的概念。這是一本很棒的指南，解釋了您需要了解的一切。 您還可以閱讀有關如何成為[DEV Mod](https://dev.to/community-moderation)並與其他社區成員合作的更多資訊。 --- 我不知道你怎麼想，但我特別興奮， `DEV`團隊可能還隱藏著更多寶藏。哈哈！ 我希望你今天學到了一些新東西。 我喜歡 DEV 社區，因為它是接觸各種精彩內容的絕佳場所：生動的討論帖子、深入的教程、庫更新、職業建議等等。 > 如果您熱衷於贊助這篇文章，請給我發訊息 [email protected] 或在 Twitter 上聯繫我！ 🚀 如果您喜歡我的內容，請透過在我的 GitHub 和 Twitter 上關注我來支持我。 - [GitHub](https://github.com/Anmol-Baranwal) - 繼續建造！ - [推特](https://twitter.com/Anmol_Codes) - [領英](https://www.linkedin.com/in/Anmol-Baranwal/) {% 嵌入 https://dev.to/anmolbaranwal %} 多寫，多啟發。  --- 原文出處：https://dev.to/anmolbaranwal/12-things-you-didnt-know-you-could-do-with-dev-2041
在程式設計社群中，從事業餘專案的想法被許多人拋棄。坐在空白的程式碼編輯器前思考要建立什麼可能會令人生畏。許多部落格文章都建議建立計算器、待辦事項清單和社交媒體克隆等應用程式。雖然這些肯定對學習技術堆疊有幫助，但讓我們面對現實吧——這世界不需要更多的計算器或待辦事項清單應用程式。相反，我們可以圍繞面向公眾的 REST API 建立新的、有趣的應用程式。 > 這是我經營的部落格[Imago Dev](https://imago.dev)的交叉貼文。 ### 什麼是 REST API？ 可表示狀態傳輸 (REST) 應用程式介面 (API) 提供了一組方法，程式設計師可以使用這些方法透過 HTTP 發送和接收資料。由於這些方法是透過 HTTP 實現的，因此任何程式語言都可用於使用 REST API。 幾乎所有可以想像的不同領域都有數以千計的 REST API 可用。天氣或股票市場等常用公共資料有數十個 API 可供使用。許多流行的網路平台，例如 Facebook 和 Twitter，也向開發人員提供 API。有些專有 API 對呼叫次數有限制。許多需要註冊並接收私有 API 金鑰。最安全的 API 需要設定 OAuth 以便使用者安全登入。 您可以[在此 Github 上](https://github.com/public-apis/public-apis)找到大量公共 api 列表，並在[RapidAPI](https://rapidapi.com)上找到更豐富的列表。 ### 10 個有趣的公共 REST API 這個清單當然並沒有詳盡地列出很酷的 REST API，而只是一些我認為特別簡潔且值得進行一些副專案的 API。所有這些都是完全免費的，除了獲取 API 金鑰之外不需要任何其他東西 - 無需弄清楚如何處理 OAuth 或為其使用付費。 1. [PokeAPI](https://pokeapi.co)有史以來最大的媒體特許經營商現在可以輕鬆獲得 800 多個 Pokemon 的資料。 2. [NASA API](https://api.nasa.gov/index.html)空間，最後的前沿。取得有關小行星、星係等的資料。 3. [Open Food Facts](https://world.openfoodfacts.org/data)來自世界各地的大量食品資料。 4. [TransLoc OpenAPI](https://rapidapi.com/transloc/api/openapi-1-2)取得城市和大學校園公共交通的即時資料。 5. [Urban Dictionary API](https://rapidapi.com/community/api/urban-dictionary)人們想出的俚語真是令人驚訝。 6. [Merriam-Webster Dictionary API](https://dictionaryapi.com)適合需要真實單字定義和同義詞的人。 7. [Numbers API](http://numbersapi.com)有關數字的有趣事實和瑣事。 8. [WeatherBit API](https://www.weatherbit.io/api)當前和歷史天氣資料。 9. [美國政府資料 API](https://www.data.gov/developers/apis)一個相當大的包羅萬象的美國農業、健康和公共安全等數十個資料樣本。 10. [Bible API](https://scripture.api.bible)有史以來最暢銷的書。有史以來最偉大的故事。 ### 如何處理它們 所有這些公共 API 都很棒，但是擁有一系列有趣的資料來源並不能本質上幫助解決確定新專案要做什麼的初始問題。 最好的起點是簡單地獲取和顯示資料。也許這正在顯示當天的神奇寶貝或鍵入的單字的定義。對於更具創意的類型，請嘗試獲取資料片段並將其映射到視覺元素，例如溫度到顏色或根據公車移動繪製線條。 最困難的部分就是開始。一旦您克服了獲取和顯示資訊的最初障礙，我相信您會為您的專案想到很多後續步驟！ --- 原文出處：https://dev.to/camerenisonfire/10-intriguing-public-rest-apis-for-your-next-project-2gbd
有了正確的函式庫，任何開發人員都可以在他們的應用程式中建立強大的人工智慧功能（如 Ninja 🥷）。 在此列表中，我編譯了 7 個很棒的 AI 庫，您現在可以使用它們（相對）輕鬆地發布功能。 不要忘記為這些圖書館加註星標以表達您的支持。  https://github.com/CopilotKit/CopilotKit --- 1. [CopilotPortal](https://github.com/CopilotKit/CopilotKit) ：建構應用程式原生人工智慧聊天機器人 -------------------------------------------------------------------------------  應用程式內人工智慧聊天機器人助理可以「查看」您目前的應用程式狀態並在前端和後端採取操作。 一組完全可自訂的反應元件和掛鉤以及用於建立 LLM 和您的應用程式之間互動的架構。 定義*useMakeCopilotReadable* 、 *useMakeCopilotActionable*和*CopilotSidebarUIProvider*使其運作。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; export default function App(): JSX.Element { return ( <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> <CopilotSidebarUIProvider> <YourContent /> </CopilotSidebarUIProvider> </CopilotProvider> ); } ``` https://github.com/CopilotKit/CopilotKit --- 2. [RAGxplorer](https://github.com/gabrielchua/RAGxplorer) - 視覺化並探索您的 RAG 文件 ----------------------------------------------------------------------------  RAGxplorer 是一個 Python 工具，用於視覺化機器學習和自然語言處理中的 RAG（檢索增強生成）文件。 以互動方式探索 RAG 流程中使用的文件中的聯繫和內容。 若要設定 RAGxplorer，請在程式碼中定義 RAG 檢查點路徑並安裝指定的依賴項。 ``` import streamlit as st from utils.rag import build_vector_database st.set_page_config(page_title="RAGxplorer", page_icon="🔍") uploaded_file = st.file_uploader("Upload your PDF", type='pdf') query = st.text_input("Enter your query") search = st.button("Search") top_k = st.number_input("Number of Chunks", value=5, min_value=1) st.session_state["chroma"] = build_vector_database(uploaded_file, ...) st.session_state['retrieved_id'] = query_chroma(...) plot_embeddings(...) ``` https://github.com/gabrielchua/RAGxplorer --- 3. [Tavily GPT 研究員](https://github.com/assafelovic/gpt-researcher)- 獲得法學碩士以搜尋網路和資料庫 -----------------------------------------------------------------------------------  Tavilly 可讓您將 GPT 支援的研究和內容產生工具新增至您的 React 應用程式中，從而增強其資料處理和內容建立功能。 ``` # Create an assistant assistant = client.beta.assistants.create( instructions=assistant_prompt_instruction, model="gpt-4-1106-preview", tools=[{ "type": "function", "function": { "name": "tavily_search", "description": "Get information on recent events from the web.", "parameters": { "type": "object", "properties": { "query": {"type": "string", "description": "The search query to use. For example: 'Latest news on Nvidia stock performance'"}, }, "required": ["query"] } } }] ) ``` https://github.com/assafelovic/gpt-researcher --- 4. [Pezzo.ai](https://github.com/pezzolabs/pezzo) - 開發者優先的 LLMOps 平台 --------------------------------------------------------------------  用於管理 OpenAI 通話的集中平台。 優化您的提示和令牌使用。追蹤您的人工智慧使用情況。 免費且易於整合。 ``` const prompt = await pezzo.getPrompt("AnalyzeSentiment"); const response = await openai.chat.completions.create(prompt); ``` https://github.com/pezzolabs/pezzo --- 5. [DeepEval](https://github.com/confident-ai/deepeval) - 評估 LLM、RAG 和微調性能 --------------------------------------------------------------------------  DeepEval 是一個開源框架，透過將評估視為單元測試來簡化法學碩士的評估。 它提供了評估 LLM 輸出的各種指標，其模組化設計允許開發人員定制他們的評估流程 要使用它，您需要安裝該程式庫、編寫測試案例並執行這些用例來評估您的 LLM 的效能。 ``` Pytest Integration: from deepeval import assert_test from deepeval.metrics import HallucinationMetric from deepeval.test_case import LLMTestCase test_case = LLMTestCase( input="How many evaluation metrics does DeepEval offers?", actual_output="14+ evaluation metrics", context=["DeepEval offers 14+ evaluation metrics"] ) metric = HallucinationMetric(minimum_score=0.7) def test_hallucination(): assert_test(test_case, [metric]) ``` https://github.com/confident-ai/deepeval --- 6. [CopilotTextarea](https://github.com/RecursivelyAI/CopilotKit) - React 應用程式中的 AI 驅動寫作 ----------------------------------------------------------------------------------------  具有 Github CopilotX 功能的任何 React `<textarea>`的直接替代品。 自動完成、插入、編輯。 可以即時或由開發人員提前提供任何上下文。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; // Provide context... useMakeCopilotReadable(...) // in your component... <CopilotProvider> <CopilotTextarea/> </CopilotProvider>` ``` https://github.com/RecursivelyAI/CopilotKit --- 7. [SwirlSearch](https://github.com/swirlai/swirl-search) - 人工智慧驅動的搜尋。 ----------------------------------------------------------------------  Swirl Search 是一個開源平台，它使用人工智慧同時搜尋多個資料來源並提供有關這些資料的起草報告。 它可以跨各種來源進行搜尋，包括搜尋引擎、資料庫和雲端服務，並且可以按照儲存庫中提供的安裝說明輕鬆設定。 Swirl Search 建置在 Python/Django 堆疊上，在 Apache 2.0 授權下發布，並作為 Docker 映像提供，使其可供使用者存取和自訂。 https://github.com/swirlai/swirl-search --- 謝謝閱讀！不要忘記為文章加入書籤，給出您的反應，並支持和查看提到的很棒的庫。 乾杯! --- 原文出處：https://dev.to/copilotkit/im-building-an-ai-project-here-are-the-libraries-im-going-to-use-pd0
> 面向雲程式設計的宣言。 別誤會我的意思，我喜歡雲！它使我能夠建立令人驚嘆的東西，並徹底改變了我使用軟體創新和解決問題的方式。 它是「*新電腦*」、終極電腦、「*無電腦電腦*」。它可以彈性擴展，永遠在線，無處不在，可以做任何事情。這是無邊無際的。它肯定會留在這裡。 但天哪，這絕對不是我們在未來十年內建立雲端應用程式的方式。隨著雲端從“我不想讓伺服器放在我的辦公桌下”發展到“我的應用程式需要30 個不同的託管服務來執行其任務”，我們有點忘記了優秀的開發人員體驗是什麼樣子的。 為雲端建立應用程式有時感覺就像把我孩子的袋子裡未使用的樂高積木灑滿了客廳地板並試圖建造一座城堡。在經歷了撕碎的撲克牌、可怕的芭比娃娃頭和漏電的電池之後，你讀了第一百萬次說明書，卻發現你最終建造的東西與上次建造的東西基本上相同。 分類樂高積木很有趣！和孩子們一起打發時間。它甚至滿足了我的強迫症……但見鬼，這不是我想要建立專業軟體的方式！ *讓我試著描述一下我和我的開發人員朋友正在努力解決的問題。* ### 我想專注於為我的用戶創造價值 當我建立專業軟體時，我希望將大部分時間花在應用程式的*功能*領域，而不是我使用的平台的*非功能*機制。 每次我想要在 AWS Lambda 函數內執行程式碼時，我都必須了解它需要與 tree-shaken 依賴項捆綁在一起，作為 zip 檔案上傳到 S3 並透過 Terraform 部署，這是沒有意義的。或者，為了能夠向 SNS 發布訊息，我的 IAM 策略必須有一個允許對主題的 ARN 執行`sns:Publish`操作的語句。*每個開發人員都需要了解 ARN 是什麼嗎？* 所有這些東西與我試圖為用戶創造的價值沒有任何關係。這是純粹的力學。**我們能擺脫它嗎？** ### 我想獨立 作為一名開發人員，最令人沮喪和最扼殺流程的情況之一是我必須停下來等待某人或某事才能繼續前進。 就像快樂地在空中滑翔，欣賞風景，欣賞優美的背景音樂，突然，*砰！*混凝土牆。 當您為雲端建立應用程式時，這堵混凝土牆有多種形狀和尺寸。是 DevOps 人員排隊；需要更新的是 IAM 策略；是只有外部兼職顧問才知道如何除錯的部署失敗；我們希望內部平台中不斷積壓的缺失旋鈕和 API 能夠改變一切。 這些障礙令人沮喪，因為它們迫使我切換環境，應用「臨時」安全策略，並發明我不想談論的醜陋駭客。這是一個破碎的世界。 我想獨立。我希望能夠把事情做好，保持順其自然。我想一次一點地改善世界，並在完成*後*繼續下一件事。我想要完成任務時的多巴胺激增，而不是另一個未完成的線程的羞恥感。 ### 我想要即時回饋 我說過我想要獨立，但不要誤以為我會寫完美的程式碼。這就是為什麼我想用鉛筆而不是鋼筆寫程式碼。 有些開發人員可以花一整天的時間進行編碼，甚至無需呼叫編譯器，最終，他們進行編譯和部署，然後就可以正常工作了。 我很欽佩他們，但我不是那種類型的開發人員。不，先生。對我來說，這就是迭代、迭代、迭代。我從小處開始，用輕鉛筆畫草圖，看一看，擦掉一堆東西，畫一條更粗的線，後退一步，瞇著眼睛，畫更多，擦掉更多，再看一眼，*沖洗並重複*。 這就是為什麼對我來說，最重要的是迭代速度。我越早執行並測試我的應用程式，我就能越快地返回並迭代。這就是我的流量所在。 當我開始程式設計時，我使用 Borland C++。過去，在 IBM PC AT 機器（TURBO ON）上編譯和執行一個程式大約需要 100ms。**雲端中的平均迭代周期需要幾分鐘。分鐘！有時要幾十分鐘！** 這是當今雲端中迭代的樣子：我對程式碼進行了更改；然後我需要編譯它；將其部署到我的測試帳戶；找到管理控制台的方式來實際觸發它；等待它執行並去搜尋 登入另一個服務。然後我意識到有一個錯誤回應告訴我我很愚蠢，因為我怎麼不知道我必須傳入 Accept-Content: application/json，否則我會得到一些名為「XML」的奇怪結果我不知道該怎麼辦（開個玩笑，XML 很棒，不是真的）。現在一切又重新來過… 因此，您說“編寫單元測試”，以居高臨下的方式試圖證明當前的現實是合理的。 「偉大的開發人員編寫單元測試」。好的！因此，現在我需要獲取我的程式碼，該程式碼進行了大約20 個外部API 呼叫，並透過從過時的文件中複製並貼上它們來以某種方式模擬API 回應，結果卻發現我的請求被拒絕了，因為我缺少了一些隱式操作我的 IAM 安全聲明。我們都去過那裡。 **說實話，給我90年代的開發者經驗**。我想要進行更改，並且希望能夠以互動方式或透過在幾毫秒內的單元測試來測試此更改，並且我想坐在沒有 WiFi 的飛機上執行此操作，好嗎？ （我們在 90 年代沒有 WiFi）。 ### 所以這只是一句吐槽？ 一定不行！我是電腦程式編制員。有時我覺得我從出生起就一直在寫軟體。我一直在社會危險的時期這樣做，當時成為電腦極客並不酷。 我一直喜歡成為開發人員，因為如果我對自己的工具不滿意，我可以製作自己的工具。畢竟，製造工具已經融入了我們的 DNA——人類製造工具的歷史已經超過一百萬年。 我對我的工具不滿意。 2022 年 4 月，我與好朋友、前微軟同事 \[Shai Ber\] 聯手，創立了 \[Wing\]，其使命是***為開發者解鎖雲端***。我們聚集了一群令人難以置信的美麗極客，他們與我們一樣對開發人員體驗和開源充滿熱情，並開始了我們的旅程，使開發人員（即我們自己）能夠解決這些基本問題。 ### 編譯器來救援 那麼我們該如何一次解決所有這些問題呢？ **我們正在為雲端建立一種程式語言。** 「*一種程式語言！？* 」你問。 “*世界上沒有足夠的程式語言嗎？* ”，“*編寫一個編譯器真的很難嗎？* ”， *“開發人員想要學習一門全新語言的機會有多大？* ”，“*為什麼不能你侵入了現有的語言工具鏈，瞇起眼睛，然後就到此為止了嗎？* ” 我不是一個心血來潮就建立程式語言的人。事實上，我花了過去五年的時間建立 \[AWS CDK\]，這是一個*多語言庫*，它允許開發人員使用他們最喜歡的程式語言定義雲端基礎設施，從而解決了我正在談論的一些挑戰。 「滿足開發人員所在的位置」是 AWS 和 CDK 的美好宗旨，它激勵我們建立 \[JSII\] 和 \[constructs\] 等出色的技術。 ***但有時，「他們在哪裡」並不是一個足夠好的模型來創造所需的體驗。*** 用程式碼定義基礎設施確實使我們能夠建立更高層級的抽象，但只要我的應用程式程式碼需要與此基礎設施交互，抽象就變得太\[洩漏\]。我被迫要了解比我需要的更多的知識，而且我必須成為 IAM、VPC、ALB、EBS 等領域的專家，基本上還有比我想記住的更多的 TLA。 我們今天使用的語言都是圍繞著*電腦是一台機器*的想法而設計的。他們已經達到了能夠為我們提供對這些機器的可靠抽象的程度。它們抽象化了 CPU、記憶體、檔案系統、行程管理和網路。作為開發人員，我不必關心文件在磁碟上的佈局方式，甚至不必關心哈希映射需要多少記憶體。我只需寫`readFile()`或`new Dictionary()`即可開始我的一天。是的，對我來說，了解幕後發生的事情並不是一個壞主意，但我並不是被迫這樣做。 大多數這些語言還為我提供類型安全。當我使用錯誤數量的參數呼叫函數時，我的編譯器會對我大喊大叫。我不必等到我的應用程式執行時才意識到我忘記了參數，或者傳遞了錯誤的類型。 **在雲端，我獨自一人**。每當我的程式碼需要與雲端資源或服務互動時（隨著產業的發展，這種情況越來越多）我必須放棄程式語言的舒適性和安全性。我必須跳出機器的邊界，進入網路的狂野西部，而我的編譯器卻一無所知。 突然之間，所有痛苦的來源幾乎變得非常明顯。如今的雲端應用程式只是由互不相連的部分拼湊而成。我有一個用於我的基礎設施的編譯器，另一個用於我的函數，另一個用於我的容器，另一個用於我的 \[CI/CD 管道\]。每個機器都非常認真地對待自己的工作，並讓我在每台機器中保持安全和快樂，但我的應用程式不再在單台機器上執行，我的應用程式在雲端上執行。 ***雲就是計算機。*** ### Wing，一種面向雲端的程式語言 當新的程式設計範式出現時，語言需要時間來迎頭趕上。我曾經喜歡用 C 語言建立物件導向的程式碼，但它是一個有漏洞的抽象。我必須了解物件在記憶體中的佈局方式、\[V 表\] 的工作原理，並記住將物件作為每個函數的第一個參數傳遞。當程式語言開始像一等公民一樣支援物件導向的概念時，這種範式就民主化了，今天大多數開發人員甚至不知道 V 表是什麼，世界一直在旋轉。 **Wing** ，或者***winglang，***如果你想可愛一點的話，它擁有你所期望的現代、面向物件、強類型和通用語言的所有好東西，但它還包括一些額外的原語，旨在支持分佈式雲作為一等公民的基於服務的性質。 ### 一探究竟 我們在 Wing 上的工作已經快一年了，我很高興邀請您查看並告訴我您的想法。雖然仍處於 Alpha 階段，尚未準備好投入生產使用，但已經可以用它來建立一些[實際的應用程式](https://github.com/winglang/research/tree/main/dogfooding)。 https://github.com/winglang/wing --- 原文出處：https://dev.to/winglang/cloud-why-so-difficult-3j33
展示開放 SaaS 🎉 ----------- 我們非常高興推出[Open SaaS](https://opensaas.sh) ，這是適用於 React、NodeJS 和 Prisma 的完全免費、開源、生產級 SaaS 樣板。 在這裡查看它的實際效果： https://www.youtube.com/watch?v=rfO5SbLfyFE Open SaaS 擁有您最近看到的那些付費 SaaS 入門者的所有功能，除了它完全**免費**且**開源**。 **我們覺得為一些需要自己管理的樣板程式碼支付 300-2,000 美元是瘋狂的**。最重要的是，許多樣板文件嚴重依賴第三方服務。再加上託管和其他費用，您需要花費大量資金才能將您的想法推向世界。 **這就是為什麼透過開放 SaaS，我們有意識地決定盡可能嘗試使用開源和免費服務。**例如，我們在[OpenSaaS.sh](http://OpenSaaS.sh)上託管的演示應用程式及其管理儀表板由 Plausible 分析的自架版本提供支援。希望您的 SaaS 具有相同的功能嗎？那麼，Open SaaS 已為您預先配置好！ 此外，Open SaaS 使用的[Wasp 框架](https://wasp.sh)可以為您建立許多功能，例如 Auth 和 Cron 作業，這樣您就不必支付第三方服務費用或完全自己編寫程式碼（我們稍後會更詳細地解釋這一點）。 在我們開始之前... ---------- 悠悠悠悠👋 [](https://www.producthunt.com/posts/open-saas?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-open-saas) Open SaaS[現已在 Product Hunt](https://www.producthunt.com/posts/open-saas)上線！快來支持我們的免費開源倡議🙏 [](https://www.producthunt.com/posts/open-saas) 為什麼我們要建造它......然後免費贈送它 ---------------------- [我們預發布版本](https://devhunt.org/tool/open-saas)中的初步回饋基本上是正面的，但我們也收到了一些問題，例如： - “它會保持免費嗎？” - “您開源這個的動機是什麼？” 所以我們認為我們應該先回答這些問題。  首先，是的，它是 100% 免費和開源的，並將保持這種狀態。 其次，我們相信，開發者、獨立駭客和個人企業家社群的集體知識將比個人或小團體產生更好的樣板。當您從某些開發人員那裡購買SaaS 入門版時，您已經獲得了一個固執己見的堆棧，然後除此之外，您還獲得了按照他們認為最好的方式建置的應用程式- 這可能並不總是最適合*您。* 第三， [Open SaaS](https://opensaas.sh)是[Wasp](https://wasp.sh)的一個專案，一個超強的開源React + NodeJS + Prisma全端框架。我們 Wasp 團隊相信 Wasp 非常適合快速且有效率地建立 SaaS 應用程式，我們希望這個模板能夠證明這一點。另外，身為開發人員，我們從其他開源專案中學到了很多東西，而 Wasp 本身就是一個開源專案。 基本上，我們熱愛開源理念，並且希望將其發揚光大。 🙏 因此，我們希望能夠為開發者社群提供非常有價值的資產，同時宣傳我們的開源全端框架。我們很高興看到社區為其做出貢獻，以便它不斷發展並成為最好的 SaaS 樣板。 開放 SaaS 是由什麼組成的 --------------- 我們在 Open SaaS 上投入了大量的精力，包括[文件](https://docs.opensaas.sh)，以便開發人員可以自信、輕鬆地啟動 SaaS 應用程式。 我們還花了一些時間檢查其他免費的開源 SaaS 啟動器，並希望確保 Open SaaS 具有可立即投入生產的啟動器的所有正確功能，而不顯得臃腫。我們認為我們已經在很大程度上實現了這一點，儘管我們將繼續加入功能並隨著時間的推移進行改進。 目前的主要特點如下： - 🔐 身份驗證（電子郵件驗證、Google、github） - 📩 電子郵件（sendgrid、emailgun、SMTP） - 📈 管理儀表板（合理或谷歌分析） - 🤑 Stripe 付款（只需加入您的訂閱產品 ID） - ⌨️ 端對端類型安全性（無需配置） - 🤖 OpenAI 整合（AI 驅動的範例應用程式） - 📖 Astro 博客 - 🚀 部署在任何地方 - 📄 完整的文件和社群支持 值得深入了解其中每個功能的細節，所以讓我們開始吧。 ### 授權 [](https://www.producthunt.com/posts/open-saas) 感謝 Wasp，Open SaaS 附帶了許多可能的身份驗證方法： - 使用者名稱和密碼（最簡單/最容易進行開發測試） - 已驗證電子郵件並重設密碼 - Google 和/或 Github 社群登入 這就是 Wasp 真正發揮作用的地方，因為設定全端 Auth 並取得預先配置的 UI 元件所需要做的就是： ``` //main.wasp app SaaSTemplate { auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, gitHub: {}, } } } ``` 嚴重地。就是這樣！ 只需確保您已設定社交身份驗證並擁有 API 金鑰以及定義的`User`和`ExternalAuth`實體，就可以開始了。不用擔心，這部分內容已在[Open SaaS Docs](https://docs.opensaas.sh)中詳細記錄和解釋。 最重要的是，Open SaaS 預先配置了一些範例，說明如何自訂和建立一些真正強大的身份驗證流程。 ### 管理儀表板和分析 [](https://www.producthunt.com/posts/open-saas) 透過利用[Wasp 的工作功能](https://wasp-lang.dev/docs/advanced/jobs)，Open SaaS 每小時從 Plausible 或 Google 的網站分析（您的選擇！）和 Stripe 的資料 API 中提取資料，並將其保存到我們的資料庫中。然後，該資料將顯示在我們的管理儀表板上（前往[OpenSaaS.sh](https://OpenSaaS.sh)查看其實際情況）。好的部分是，要為您自己的應用程式存取這些資料，您所要做的就是按照我們的指南獲取分析 API 金鑰，插入提供的腳本，然後就可以開始了！ 再次強調，Wasp 讓整個過程變得非常簡單。透過已經為您定義的查詢 API 和取得我們需要的資料的功能，Open SaaS 然後在`main.wasp`設定檔中使用 Wasp 作業： ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@server/workers/calculateDailyStats.js" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 就是這樣！ Wasp 負責為您設定和執行 cron 作業。 ### 條紋支付 [](https://www.producthunt.com/posts/open-saas) 如果您是以前從未建立過自己的 SaaS 的開發人員，那麼與 Stripe 這樣的支付處理器整合可能是您將面臨的少數挑戰之一。 當我建立第一個 SaaS [CoverLetterGPT.xyz](https://coverlettergpt.xyz)時，我的情況就是如此。這實際上是我建造它的主要動機之一；了解如何將 Stripe 支付整合到應用程式以及 OpenAI API 中。 儘管 Stripe 因擁有豐富的文件而聞名，但這個過程仍然令人畏懼。你必須： - 建立正確的產品類型 - 設定 webhook 端點 - 告訴 Stripe 將正確的 Webhook 事件傳送給您 - 正確使用事件 - 處理重複付款和失敗付款 - 在上線之前透過 CLI 進行正確測試 這就是為什麼為您設定 Stripe 訂閱付款是一個巨大的勝利。 但比這更重要的是，為您方便地記錄整個過程！這就是為什麼 Open SaaS[在我們的文件中為您提供方便的 Stripe 指南](https://docs.opensaas.sh)🙂 [](https://www.producthunt.com/posts/open-saas) ### 端對端類型安全 Open SaaS 是使用 Typescript 建置的，因為它是一個全棧應用程式，所以從後端到前端的類型安全可以成為真正的救星。我的意思是，一些[固執己見的堆疊](https://create.t3.gg/)在此基礎上變得非常流行。 幸運的是，Wasp 為您提供開箱即用的端到端類型安全性（無需配置！），因此 Open SaaS 可以輕鬆利用它。 這是一個例子： 1. 讓 Wasp 了解您的伺服器操作： ``` // main.wasp action getResponse { fn: import { getResponse } from "@server/actions.js", entities: [Response] } ``` 2. 輸入並實施您的伺服器操作。 ``` // src/srever/actions.ts type RespArgs = { hours: string; }; const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { } ``` 3. 導入並在客戶端呼叫。  客戶端類型將被正確推斷！  ### AI 驅動的範例應用程式（附有 OpenAI API） [](https://www.producthunt.com/posts/open-saas) 人工智慧正在使新的應用程式創意成為可能，這也是我們看到開發人員對建立 SaaS 應用程式的興趣重新抬頭的部分原因。正如我上面提到的，我建造的第一個 SaaS 應用程式[CoverLetterGPT](https://coverlettergpt.xyz)是「GPT 包裝器」之一，我很自豪地說它帶來了約350 美元MRR（每月經常性收入）的可觀被動收入。 我個人認為，我們在軟體開發方面處於最佳狀態，開發新的、有利可圖的人工智慧應用程式有很大的潛力，尤其是「獨立駭客」和「個人企業家」。 這就是 Open SaaS 推出 AI 調度助手演示應用程式的原因。您輸入任務及其分配的時間，AI Scheduler 會為您的一天建立詳細的計劃。 [](https://www.producthunt.com/posts/open-saas) 在幕後，這是使用 OpenAI 的 API 為每個任務分配優先級，並將它們分解為詳細的子任務，包括喝咖啡休息時間！它還利用 OpenAI 的函數呼叫功能以使用者定義的 JSON 物件形式回傳回應，以便客戶端每次都能正確使用它。此外，我們計劃在未來加入開源法學碩士，敬請期待！ 示範版 AI Scheduler 可協助開發人員學習如何有效使用 OpenAI API，並激發一些 SaaS 應用程式創意！ ### 隨處部署。容易地。 許多流行的 SaaS 新創公司都使用依賴託管的框架，這意味著您只能依賴一個提供者進行部署。雖然這些都是簡單的選擇，但它可能並不總是最適合您的應用程式。 Wasp 為您提供了部署全端應用程式的無限可能性： - 使用`wasp deploy`一鍵部署到[Fly.io](http://Fly.io) - 使用`wasp build`並部署 Dockerfiles 和客戶端，無論您喜歡什麼！ `wasp deploy`的優點在於它會自動產生和部署您的資料庫、伺服器和用戶端，並為您設定環境變數。 Open SaaS 還內建了環境變數和常數驗證器，以確保您已正確設定部署所需的所有內容，以及文件中的部署指南 [](https://www.producthunt.com/posts/open-saas) 最後，您擁有自己的程式碼，並且可以自由地將其部署到任何地方，而無需受供應商鎖定。 幫助我們，幫助你 -------- [](https://www.producthunt.com/posts/open-saas?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-open-saas) 想支持我們的免費開源計畫嗎？那麼現在就去[Product Hunt 上](https://www.producthunt.com/posts/open-saas)向我們提供一些支援吧！ 🙏 [](https://www.producthunt.com/posts/open-saas) 現在就開始建立您的 SaaS！ --------------- 我們希望 Open SaaS 能夠讓更多的開發人員能夠發布他們的想法和副專案。我們也希望從開發人員那裡獲得一些回饋和意見，以便我們能夠使其成為最好的 SaaS 樣板啟動器。 因此，如果您有任何意見或發現任何錯誤，請[在此處提交問題](https://github.com/wasp-lang/open-saas/issues)。 如果您發現 Open SaaS 和/或 Wasp 很有用，最簡單的支援方法就是給我們一顆星： - 為[Open SaaS 儲存庫](https://github.com/wasp-lang/open-saas)加註星標 - 給[黃蜂倉庫](https://github.com/wasp-lang/wasp)加註星標 --- 原文出處：https://dev.to/wasp/you-dont-need-to-pay-for-saas-boilerplates-open-saas-56lj
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
