#TL;博士 在本文中，您將了解如何使用 Nextjs、CopilotKit 和 OpenAI 建立人工智慧驅動的簡歷產生器應用程式。 我們將涵蓋： - 利用 ChatGPT 撰寫履歷和求職信 📑 - 透過與履歷聊天逐漸完善你的履歷💬 - 將您的履歷和求職信匯出為 PDF 🖨️  --- ## CopilotKit：建構深度整合的應用內人工智慧聊天機器人 💬 只是簡單介紹一下我們的背景。 CopilotKit 是[開源 AI 副駕駛平台。](https://github.com/CopilotKit/CopilotKit) 我們可以輕鬆地將強大的 AI 聊天機器人整合到您的 React 應用程式中。完全可定制和深度集成。  {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} 現在回到文章。 --- ## **先決條件** 要開始學習本教程，您需要在電腦上安裝以下軟體： - 文字編輯器（例如 Visual Studio Code） - 節點.js - 套件管理器 ## **使用 NextJS 建立簡歷應用程式前端** **步驟 1：** 開啟命令提示字元並執行下列命令。 ``` npx create-next-app@latest ``` --- **第 2 步：** 系統將提示您選擇一些選項，如下所示。  **步驟 3：** 使用您選擇的文字編輯器開啟新建立的 Nextjs 專案。然後，在命令列上執行以下命令，以使用 Tailwind CSS 安裝帶有 NextJS 的 Preline UI。依照[本指南](https://preline.co/docs/frameworks-nextjs.html)完成 Preline 設定。 ``` npm install preline ``` --- **步驟4：** 在resume/app/page.tsx檔案中，新增以下程式碼內容。 ``` export default function Home() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-slate-900 bg-gradient-to-b from-violet-600/[.15] via-transparent text-sm py-3 sm:py-0 dark:bg-gray-800 dark:border-gray-700"> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 " aria-label="Global"> <div className="flex items-center justify-between"> <a className="flex-none text-xl text-gray-200 font-semibold dark:text-white py-8" href="#" aria-label="Brand"> ResumeBuilder </a> </div> </nav> </header> {/* <!-- Hero --> */} <div className="bg-slate-900 h-screen"> <div className="bg-gradient-to-b from-violet-600/[.15] via-transparent"> <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8"> {/* <!-- Title --> */} <div className="max-w-3xl text-center mx-auto pt-10"> <h1 className="block font-medium text-gray-200 text-4xl sm:text-5xl md:text-6xl lg:text-7xl"> Craft A Compelling Resume With AI Resume Builder </h1> </div> {/* <!-- End Title --> */} <div className="max-w-3xl text-center mx-auto"> <p className="text-lg text-gray-400"> ResumeBuilder helps you create a resume that effectively highlights your skills and experience. </p> </div> {/* <!-- Buttons --> */} <div className="text-center"> <a className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="#"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </a> </div> {/* <!-- End Buttons --> */} </div> </div> </div> {/* <!-- End Hero --> */} </> ); } ``` **步驟 5：** 在命令列上執行命令 *npm run dev*。導航至 http://localhost:3000/，您應該會看到新建立的 NextJS 專案。  --- ## 使用 GitHub GraphQL 從 GitHub 取得履歷資料 **步驟 1：** 使用下列命令安裝 Axios HTTP 用戶端。 ``` npm i axios ``` **步驟 2：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 GitHub 的資料夾。在GitHub資料夾中建立一個名為route.ts的檔案並加入以下程式碼。 ``` import { NextResponse } from "next/server"; import axios from "axios"; // Environment variables for GitHub API token and user details const GITHUB_TOKEN = "Your GitHub personal access token"; const GITHUB_USERNAME = "Your GitHub account username"; // Axios instance for GitHub GraphQL API const githubApi = axios.create({ baseURL: "https://api.github.com/graphql", headers: { Authorization: `bearer ${GITHUB_TOKEN}`, "Content-Type": "application/json", }, }); // GraphQL query to fetch user and repository data const getUserAndReposQuery = ` query { user(login: "${GITHUB_USERNAME}") { name email company bio repositories(first: 3, orderBy: {field: CREATED_AT, direction: DESC}) { edges { node { name url description createdAt ... on Repository { primaryLanguage{ name } stargazers { totalCount } } } } } } } `; // API route to handle resume data fetching export async function GET(request: any) { try { // Fetch data from GitHub const response = await githubApi.post("", { query: getUserAndReposQuery }); const userData = response.data.data.user; // Format resume data const resumeData = { name: userData.name, email: userData.email, company: userData.company, bio: userData.bio, repositories: userData.repositories.edges.map((repo: any) => ({ name: repo.node.name, url: repo.node.url, created: repo.node.createdAt, description: repo.node.description, language: repo.node.primaryLanguage.name, stars: repo.node.stargazers.totalCount, })), }; // Return formatted resume data return NextResponse.json(resumeData); } catch (error) { console.error("Error fetching data from GitHub:", error); return NextResponse.json({ message: "Internal Server Error" }); } } ``` **步驟 3：** 在應用程式資料夾中，建立一個名為 Components 的資料夾。然後，在元件資料夾中建立一個名為 githubdata.tsx 的檔案並新增以下程式碼。 ``` "use client"; import React, { useEffect, useState } from "react"; import axios from "axios"; // Resume data interface interface ResumeData { name: string; email: string; company: string; bio: string; repositories: { name: string; url: string; created: string; description: string; language: string; stars: number; }[]; } export const useGithubData = () => { const [resumeData, setResumeData] = useState<ResumeData | null>(null); // Fetch resume data from API useEffect(() => { axios .get("/api/github") .then((response) => { setResumeData(response.data); }) }, []); return { resumeData, }; } ``` --- ## 建立求職信和履歷功能 **步驟 1：** 透過在命令列上執行以下命令來安裝 CopilotKit 前端軟體包。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` **步驟2：** 在元件資料夾中建立一個名為resume.tsx 的檔案。然後在檔案頂端匯入 useMakeCopilotReadable、useMakeCopilotActionable 和 useGithubData 自訂掛鉤，如下所示。 ``` import React, { useState } from "react"; import { useGithubData } from "./githubdata"; import { useMakeCopilotReadable, useMakeCopilotActionable, } from "@copilotkit/react-core"; ``` **第 3 步：** 建立一個名為 CoverLetterAndResume 的元件。在元件內部，使用 useGithubData 掛鉤檢索從 GitHub 取得的資料。然後，宣告一個名為 createCoverLetterAndResume 的狀態變數和一個用於更新它的名為 setCreateCoverLetterAndResume 的函數。使用包含 letter 和 resume 兩個屬性的物件初始化 useState，如下所示。 ``` export const CoverLetterAndResume = () => { const {resumeData } = useGithubData(); const [createCoverLetterAndResume, setCreateCoverLetterAndResume] = useState({ letter: "", resume: "" }); } ``` **步驟 4：** 使用 useMakeCopilotReadable 掛鉤將從 GitHub 取得的資料新增為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable(JSON.stringify(resumeData)); ``` **步驟 5：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 createCoverLetterAndResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信和簡歷更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "createCoverLetterAndResume", description: "Create a cover letter and resume for a software developer job application.", argumentAnnotations: [ { name: "coverLetterMarkdown", type: "string", description: "Markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (coverLetterMarkdown, resumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: coverLetterMarkdown, resume: resumeMarkdown, })); }, }, [] ); ``` **步驟 6：** 在 CoverLetterAndResume 元件外部，建立一個名為 CoverLetterResume 的元件，用於在 Web 應用程式 UI 上顯示求職信和履歷。 ``` type CoverLetterResumeProps = { letter: string; resume: string; }; const CoverLetterResume = ({ letter, resume }: CoverLetterResumeProps) => { return ( <div className="px-4 sm:px-6 lg:px-8 bg-slate-50 py-4"> <div className="sm:flex sm:items-center"> <div className="sm:flex-auto"> <h1 className="text-3xl font-semibold leading-6 text-gray-900"> ResumeBuilder </h1> </div> </div> {/* Cover Letter Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter </h2> <div className="min-w-full divide-y divide-gray-300 p-2"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white p-2"> <ReactMarkdown>{letter}</ReactMarkdown> </div> </div> </div> </div> </div> </div> {/* Cover Letter End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <textarea className="p-2" id="coverLetter" value={letter} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} {/* Resume Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Resume </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <ReactMarkdown>{resume}</ReactMarkdown> </div> </div> </div> </div> </div> {/* Resume End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> {/* {letter} */} {/* <ReactMarkdown>{letter}</ReactMarkdown> */} <textarea className="p-2" id="resume" value={resume} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} </div> ); }; ``` **第7步：**然後返回CoverLetterAndResume元件內的CoverLetterResume元件，如下圖所示。 ``` return <CoverLetterResume {...createCoverLetterAndResume}/>; ``` **第8步：** 在應用程式資料夾中建立一個名為resumeandcoverletter的資料夾。然後，建立一個名為 page.tsx 的檔案並新增以下程式碼。 ``` "use client"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; import "@copilotkit/react-textarea/styles.css"; // also import this if you want to use the CopilotTextarea component import "@copilotkit/react-ui/styles.css"; // also import this if you want to use the chatbot component import React, { useEffect, useState } from "react"; import { CoverLetterAndResume } from "../components/resume"; function buildResume () { return ( <CopilotProvider chatApiEndpoint="./../api/copilotkit/chat"> <CopilotSidebarUIProvider> <CoverLetterAndResume /> </CopilotSidebarUIProvider> </CopilotProvider> ); } export default buildResume; ``` **步驟 9：** 使用下列指令安裝 openai 軟體套件。 ``` npm i openai ``` **步驟 10：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 copilotkit 的資料夾。在 copilotkit 資料夾中，建立一個名為 chat 的資料夾。然後，在聊天資料夾中建立一個名為route.ts的檔案並新增以下程式碼。 ``` import OpenAI from "openai"; const openai = new OpenAI({ apiKey: "Your ChatGPT API key", }); export const runtime = "edge"; export async function POST(req: Request): Promise<Response> { try { const forwardedProps = await req.json(); const stream = openai.beta.chat.completions .stream({ model: "gpt-4-1106-preview", ...forwardedProps, stream: true, }) .toReadableStream(); return new Response(stream); } catch (error: any) { return new Response("", { status: 500, statusText: error.error.message }); } } ``` **步驟 11：** 在應用程式資料夾中的 page.tsx 檔案中，在「開始」按鈕中新增一個連結，用於導航到簡歷和求職信頁面，如下所示。 ``` <div className="text-center"> <Link className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="/resumeandcoverletter"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </Link> </div> ``` **第12步：**導航至http://localhost:3000/，點擊「開始」按鈕，您將被重新導向到與聊天機器人整合的履歷和求職信頁面，如下所示。  **第 13 步：** 向右側的聊天機器人發出諸如“建立求職信和簡歷”之類的提示。聊天機器人將開始產生回應，完成後，它將在頁面左側顯示產生的求職信和履歷，如下所示。  --- ## 建立更新求職信功能 **第 1 步：** 宣告一個名為 updateLetter 的變數，用於保存先前產生的求職信。 ``` const updateLetter = createCoverLetterAndResume.letter; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateLetter 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Cover Letter:" + JSON.stringify(updateLetter)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateCoverLetter 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateCoverLetter", description: "Update cover letter for a software developer job application.", argumentAnnotations: [ { name: "updateCoverLetterMarkdown", type: "string", description: "Update markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedCoverLetterMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: updatedCoverLetterMarkdown, })); }, }, [] ); ``` ** 步驟 4：** 給聊天機器人一個提示，例如“更新求職信並加入我正在申請 CopilotKit 的技術寫作職位。”如下圖所示，您可以看到求職信已更新。  --- ## 建立更新復原功能 **第 1 步：** 宣告一個名為 updateResume 的變數，用於保存先前產生的求職信。 ``` const updateResume = createCoverLetterAndResume.resume; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateResume 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Resume:" + JSON.stringify(updateResume)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateResume", description: "Update resume for a software developer job application.", argumentAnnotations: [ { name: "updateResumeMarkdown", type: "string", description: "Update markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedResumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, resume: updatedResumeMarkdown, })); }, }, [] ); ``` **第 4 步：** 向聊天機器人發出提示，例如「更新履歷並將我的姓名加入為 John Doe，將我的電子郵件加入為 [email protected]」。如下圖所示，可以看到履歷已更新。  --- ## 建立下載求職信和履歷表 Pdfs 功能 **第 1 步：** 安裝 jsPDF，一個用 JavaScript 產生 PDF 的函式庫。 ``` npm i jspdf ``` **步驟 2：** 在 CoverLetterAndResume 元件內，使用 useMakeCopilotActionable 掛鉤設定一個名為“downloadPdfs”的操作，其中包含描述和實現函數，該函數使用 jsPDF 庫為求職信和簡歷建立 PDF，然後保存它們， 如下所示。 ``` function addTextToPDF(doc: any, text: any, x: any, y: any, maxWidth: any) { // Split the text into lines const lines = doc.splitTextToSize(text, maxWidth); // Add lines to the document doc.text(lines, x, y); } useMakeCopilotActionable( { name: "downloadPdfs", description: "Download pdfs of the cover letter and resume.", argumentAnnotations: [ { name: "coverLetterPdfA4", type: "string", description: "A Pdf that contains the cover letter converted from markdown text and fits A4 paper.", required: true, }, { name: "resumePdfA4Paper", type: "string", description: "A Pdf that contains the resume converted from markdown text and fits A4 paper.", required: true, }, ], implementation: async () => { const marginLeft = 10; const marginTop = 10; const maxWidth = 180; const coverLetterDoc = new jsPDF(); addTextToPDF( coverLetterDoc, createCoverLetterAndResume.letter, marginLeft, marginTop, maxWidth ); coverLetterDoc.save("coverLetter.pdf"); const resumeDoc = new jsPDF(); addTextToPDF( resumeDoc, createCoverLetterAndResume.resume, marginLeft, marginTop, maxWidth ); resumeDoc.save("resume.pdf"); }, }, [createCoverLetterAndResume] ); ``` **第 3 步：** 返回網頁應用程式中的聊天機器人，並提示「下載求職信和簡歷的 pdf 檔案」。 PDF 將開始下載，如果您開啟 coverLetter.pdf，您應該會看到產生的求職信，如下所示。  --- ## 結論 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 對於完整的源程式碼： https://github.com/TheGreatBonnie/AIPoweredResumeBuilder --- 原文出處：https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb
--- 標題：伺服器端渲染的優點和缺點。何時使用它以及何時選擇其他東西 發表：真實 描述：伺服器端渲染的優缺點。何時使用它以及何時選擇其他東西 標籤：[react、javascript、webdev、ssr] 封面圖：https://thepracticaldev.s3.amazonaws.com/i/pr5kh72wjga9rplx6c2z.jpg --- > 攝影：Daniel H. Tong 在 Unsplash 上 ## 什麼是 SSR？為什麼要關心？ SSR 代表伺服器端渲染。我將主要討論 React，但我想這對其他框架也有意義。 如果您關心以下內容，則需要 SSR： - **第一次有意義的繪畫**。僅 SSR 並不能保證良好的結果。您還需要關鍵的 CSS 和接近客戶等。 - **SEO** 並支援其他機器人，如 Twitter 和 Facebook - **優雅降級**。對於這一點，您需要確保您的服務無需 JS 即可使用 ## 這有什麼難的？ SSR 就像一個新的維度。無論您使用什麼，都需要為 SSR 重新配置它。 - 您是否使用「componentDidMount」來取得資料？您需要使用“getInitialProps”（來自 next.js 或 after.js）或 Redux 等狀態管理庫來使其在伺服器上執行 - 你使用路由器嗎？需要在伺服器上進行配置 - 你使用 i18n 嗎？需要在伺服器上進行配置 - 你使用 HMR 嗎？您將需要重新載入瀏覽器和伺服器的程式碼 - 你使用反應頭盔嗎？需要在伺服器上進行配置 - 你使用react-loadable嗎？您需要配置伺服器以傳遞使用的模組，以便客戶端可以預先載入它們 - 你使用 Redux 嗎？您需要序列化儲存並將其傳遞給客戶端 - 你使用 CSS-in-JS 嗎？您需要將其配置為在伺服器上產生關鍵 CSS 並將其內聯到 HTML 回應中 別誤會我的意思，這都是可以解決的。 Next.js 和 Razzle 解決了大部分問題。我想向您展示的是 SSR 如何將所有內容加倍（另一個維度），並且大多數時候都需要樣板。 好的。現在讓我們超越利益。 ## 第一個有意義的油漆 如果你正在做 SSR，這並不意味著你會得到開箱即用的第一個有意義的油漆。 - 您的設定是否有良好的第一個位元組時間？如果您的伺服器速度緩慢或過載 - 您將會遇到問題。確保使用最新的節點，縮小伺服器程式碼，[使用串流渲染](https://zeit.co/blog/streaming-server-rendering-at-spectrum)，最佳化子查詢（資料庫或網路）（如果有） 。 - 你們有提供關鍵的 CSS 嗎？否則，瀏覽器無法開始渲染頁面。 - 你使用網頁字體嗎？如果是，你會[優化](https://www.zachleat.com/web/compressive-webfonts/)嗎？ - 你的伺服器靠近客戶端嗎？ **如果您的伺服器在歐洲，但客戶端在日本，SSR 將無法幫助您**。從 CDN 提供「shell」可能會比 SSR 更快（從印象的角度來看）。如果因為法律限制您無法將伺服器移至離客戶端更近的地方怎麼辦？ - 您是否確保沒有不必要的重定向？否則，在慢速 3G 上重定向將毀掉你好不容易獲得的毫秒數。 SSR 並不是首次有意義的繪製的靈丹妙藥。如果您的後端很慢或距離很遠，您需要檢查「shell」和 CDN 是否可以更好地工作。您可以使用 [react-snap](https://github.com/stereobooster/react-snap) 之類的東西來預渲染靜態頁面並為其他頁面產生「shell」。 如果您的網站往往更靜態，您可以使用預渲染而不是 SSR。查看[react-static](https://react-static.js.org/) 或[gatsby](https://www.gatsbyjs.org/) 或[react-snap](https://github.com /react-snap)。com/stereobooster/react-snap)。 ## 這 這裡有3個選項： - 固態繼電器 - 預先渲染，如react-snap、react-static、gatsby等。 - 按需預渲染，如 rendertron、puppetron、pupperender 等。 如果可以的話，選擇預渲染。如果您唯一關心的是 SEO，則可以隨時輕鬆加入按需預渲染。 ## 優雅降級 這一點很棘手。這實際上取決於您想要實現多少降級？ - 你想支持連結嗎？這應該可以工作 - 你想像 https://www.seek.com.au/ 那樣支援下拉式選單嗎？你需要使用 CSS 和複選框的一些技巧 - 您需要支援表格嗎？除了現有的 JSON API 之外，您還需要端點來處理這些表單 有些功能沒有 JS 是相當困難的，例如組合框或地圖 ## 結論 SSR不錯，可以試試看。另外，請確保您的用戶真正從中受益。 如果您無法使用 SSR，請嘗試預渲染器，有時這是最簡單的選擇。 在 [twitter](https://twitter.com/stereobooster) 和 [github](https://github.com/stereobooster) 上關注我。 --- 原文出處：https://dev.to/stereobooster/server-side-rendering-or-ssr-what-is-it-for-and-when-to-use-it-2cpg
網路蘊藏著許多寶藏，但很多人卻不知道。 這裡有 10 個資源豐富的網站，可以在網路上免費學習任何東西： --- ## 1. 編碼 **免費程式碼營** 您可以免費學習編碼、建立專案並獲得認證。 **您可以獲得以下認證：** - 響應式網頁設計 - Javascript演算法與資料結構 - 前端開發庫 - 資料視覺化 - 關係型資料庫 - 和更多 ``` Link: https://www.freecodecamp.org/ ```  --- ## 2. 行銷 **行銷範例** 簡短、溫馨、實用的行銷範例之家，可幫助您更好地進行行銷。 **取得範例：** - 客戶獲取 - 轉換 - 保留 - 品牌策略 - 推薦策略 - 和更多 ``` Link: https://marketingexamples.com/ ```  --- ## 3. 無程式碼 每天獲得 30 分鐘的簡短課程，指導您 100 天的無程式碼之旅，以提升您的無程式碼技能。 - 你得到什麼？ - 指導課程 - 技巧和竅門 - 靈感鏡頭 - 驚喜獎勵 - 獎勵迷你挑戰 - 內建公共提示 ``` Link: https://www.100daysofnocode.com/start-the-challenge ```  --- ## 4.人工智慧 **人工智慧 100 天** 每天獲得 30 分鐘的簡短課程，指導您的 AI 學習之旅。 **你了解什麼？** - 人工智慧在日常生活中的無限應用 - 你知道科技兄弟在談論什麼。 - 你每天都使用人工智慧來建立很酷的專案並消除無聊的工作。 - 你知道為什麼你對人工智慧感到焦慮，甚至更興奮。 ``` Link: https://www.100daysai.com/ ```  --- ## 5. 語言 **多鄰國** 以遊戲化的方式學習您想要學習的任何語言，以保持您的動力。 **你得到什麼？** - 透過快速、簡短的課程，您將獲得積分並解鎖新級別，同時獲得現實世界的溝通技巧。 - 結合研究支援的教學方法和令人愉快的內容來建立課程。 - 類似遊戲的功能、有趣的挑戰和提醒，輕鬆養成語言學習的習慣。 - 課程經過量身定制，可幫助您以適當的水平和節奏學習。 ``` Link: https://www.duolingo.com/ ```  --- ## 6. 資料結構與演算法 **CSVISTOOL** 了解資料結構和演算法如何以視覺化方式運作。 **你能學到什麼？** - 清單 - 堆疊、佇列和出隊 - 樹和跳過列表 - 哈希圖 - 排序和快速選擇 - 字串搜尋 - 圖形演算法 - 和更多 ``` Link: https://csvistool.com/ ```  --- ## 7. 使用者體驗 **使用者體驗法則** 策劃設計人員在建立使用者介面時可以考慮的最佳實踐。 **你得到什麼？** - 啟發式 - 原則 - 格式塔 - 認知偏差 ``` Link: https://lawsofux.com/ ```  --- ## 8.Excel + Power BI **尚杜** 每週接收有關 Excel 和 Power BI 最佳提示的電子郵件 **你得到什麼？** - 強大的提示、資源和影片，幫助您在工作中取得進步。 - 資料分析、圖表、報告和自動化的真實範例 - 獎勵文件、PDF 指南和先睹為快 ``` Link: https://chandoo.org/wp/subscribe/ ```  --- ## 9. 時事通訊的成長 **反向成長** 了解如何從網路上最好的時事通訊成長故事中發展您的時事通訊。 **你得到什麼？** - 時事通訊企業如何賺錢 - 他們如何成長 - 他們如何透過時事通訊獲利 ``` Link: https://growthinreverse.com/ ```  --- ## 10.心智模型 **法南街** 了解讓您生活更美好的心理模式。 **如何取得？** - 核心心智模型 - 物理和化學的心理模型 - 生物學的心理模型 - 系統思維的心智模型 - 以及更多 ``` Link: https://fs.blog/mental-models/ ```  --- ## 與我聯繫 領英：https://www.linkedin.com/in/durgesh4993/ GitHub：https://github.com/Durgesh4993 LeetCode：https://leetcode.com/durgesh4993/ 簡介：https://linktr.ee/durgesh4993 --- 原文出處：https://dev.to/durgesh4993/10-websites-to-learn-anything-for-free-on-the-internet-4ahe
每個人都使用 CSS 框架來簡化工作並節省時間，Bootstrap 過去是，現在仍然是框架市場的王者。每個研究所、幾乎 YouTube 上的每個教學都在使用 Bootstrap，開發人員沒有學習 CSS 基礎知識和使用 Bootstrap。那時我也是個初學者，我從[W3schools](https://www.w3schools.com/)和[Lynda](https://www.lynda.com/)學習了HTML和CSS。然後我用了很多浮動來製作網頁，還蠻喜歡這樣的方式。 ___ 響應式設計是我的下一個目標，所以CSS 框架是實現響應式最簡單的方法，我嘗試閱讀文件並觀看Bootstrap 影片，但Bootstrap 的大量類和不方便的命名讓我感到害怕，而且我不喜歡使用bootstrap 因為我認為每個使用Bootstrap 的網站看起來都非常相似，它也會將樣式作為預設值應用到元素上，我嘗試了兩次或多次，但沒有在我的腦海中得到Bootstrap，所以我找到了一些替代方案，例如Foundation 和Material，但它們就像Bootstrap 一樣。我只是想讓我的網站響應式，然後我找到了 [Brad Traversy Skeleton CSS] 的影片(https://www.youtube.com/watch?v=nVANwdryGVc) ___ 我喜歡 Skeleton CSS，但現在他們的開發人員沒有更新它，它不是基於 CSS 網格或 Flexbox。裡面有些混亂，然後我發現了[Bulma](https://www.bulma.io/) ，我只是像平常一樣使用YouTube，然後我來到了[Bulma.css 教程影片](https://www.bulma.io/) www.youtube.com/watch?v=IiPQYQT2-wg) 標記為“最簡單的框架，你可以在20 分鐘內學會”，嗯，我看了它，它確實改變了我的生活，這確實是最簡單的框架，即使你不知道不必記住課程，它有一些優點： - 無預設樣式 - 強大的 Flexbox 網格 - 小尺寸（以 Kbs 為單位） - 可重複使用並且可以修改Sass - 沒有Javascript，只有CSS - 可重複使用的元件 ___ 我有點迷戀布瑪（我想）但是你可以嘗試一下。 順便說一句，這是我的第一篇文章，你可以在 Twitter 上關注我😉 [https://www.twitter.com/justaashir](https://www.twitter.com/justaashir) --- 原文出處：https://dev.to/justaashir/bulma-the-most-underrated-framework-of-the-css-framework-era-2gj8
我自 2019 年以來一直是 Web 開發人員。我使用 React.js 和基於 React 的框架，如 Gatsby、Next、Remix、Astro 和 Hydrogen。我從來沒有對這些工具感到完全滿意，但是，作為一個深入 JS 生態系統的初學者，我從同行那裡聽到的都是這樣的話：「這就是方式，任何其他程式語言要么慢，要么老」。  結果，我習慣了巨大的複雜性：多個獨立的儲存庫、數千個函式庫和框架來實現簡單的事情、GraphQL、微服務、無伺服器、靜態網站產生、增量靜態再生、部分水化、 redux 、redux-thunk、babel、webpack、react 伺服器元件、伺服器操作等。這個清單還可以再持續 10 分鐘。 直到有一天我說**受夠了！** 讓我們來看看我慢慢發瘋的完整時間線。這需要一段時間，在閱讀長篇文章之前，請隨意煮點咖啡！ --- ## 倦怠的時間表 ### [Gatsby.js](https://www.gatsbyjs.com/) 我記得完成我的訓練營並想：“我終於能夠建立我的作品集了！”，所以我做到了。只有一個小問題，我想在 Google 上建立索引，但是使用舊的「create-react-app」使這項任務幾乎不可能完成。很快我了解了 SEO 和 React 的水合循環，這讓我找到了這個問題的「解決方案」：Gatsby.js。靜態網站產生的想法對當時的我來說簡直是革命性的，畢竟沒有什麼比預先渲染 HTML 檔案更快了，對吧？ 我決定透過閱讀文件來學習這個新框架，讓我告訴你，這**不是**一次有趣的體驗。我以前從未聽說過 GraphQL，顯然，您需要它來產生所有靜態檔案（到底是什麼？？？）。我問我的一些網友，很難學習這些過度設計的廢話是否正常，他們回答說「技能問題，再努力一點！」。於是我更加努力，終於學會了之後，我把我的個人網站移植到了Gatsby上。  我的大部分頁面都成功在 Google 上建立了索引，幾個月來，我對結果非常滿意。然後另一個問題出現了：我的**很多**開發者朋友開始說“Gatsby 死了！建立 Next 是為了簡化靜態站點生成並提供伺服器端渲染”。 ### [Next.js](https://nextjs.org/) 我快速瀏覽了 Next 文件並**立即**愛上了它。我能夠在沒有 GraphQL 的情況下用三分之一的程式碼做與 Gatsby 相同的事情！我再次將我的作品集移植到另一個框架：Next。 這次我確實有一次美好的經驗。部署到 Vercel 輕而易舉，「getStaticProps」和「getServerSideProps」功能很簡單，但功能非常強大，我可以選擇每個頁面的渲染樣式，整體來說非常靈活。 不幸的是，我透過慘痛的教訓學到了一些東西：在 JavaScript 生態系統中，所有美好的事情都會結束。 ### [混音](https://remix.run/) 我清楚記得 Remix 發佈時的情景。多名科技影響者開始發布有關它的內容（一如既往）。然而，當時我在主頁上看到它不支援靜態網站生成，只支援伺服器端渲染，所以我想「等一下，這些年來投資於 [JAMstack](https://jamstack.org/) 都被扔在這裡了嗎？不可能，這個框架不會長久」。然而，令我驚訝的是，Remix 不僅生存了下來，而且還被 Shopify 收購 https://shopify.engineering/remix-joins-shopify ，並成為 Next 的重要競爭對手。 幾個月過去了，我決定嘗試看看。我再一次感到驚訝，Remix 的主要座右銘是使用 Web 基礎知識，而不是像 Next 這樣過於複雜的快取系統。因此，在Remix 中編碼時，我腦中需要的思維模型要簡單10 倍：沒有全域狀態管理器，只需使用URL，更少的客戶端狀態，將所有邏輯移至伺服器，並使用cookie，無需使用完整堆疊中間的 REST API 非常簡單，只需將資料庫查詢移至「loader」函數即可。 ### 離開矩陣  然後，突然間，真相呈現在我面前，我服下了紅色藥丸。我的腦海中開始浮現出多個問題：Remix 不就像所有其他「古老而無聊」的框架（如 Rails、Laravel 和 Django）一樣嗎？幾十年來，我們一直在使用伺服器端渲染進行全端 Web 開發，但 JavaScript 黑手黨集體認為這種方法是垃圾，將所有內容移至客戶端才是未來。難道同一個黑手黨認為 Rails 一直都是對的嗎？用 JS 框架做所有那些過度設計的怪物不是正確的舉動嗎？我開始質疑一切。這種「新」的 Web 開發方式更加簡單、快速。 ### 我已經完成了 Next 和 Vercel 我透過 [Next.js 應用程式路由器](https://nextjs.org/docs/app) 達到了臨界點。以下是 Vercel 向 Next 推送的所有錯誤的完整清單： - 曾經簡單的：「getStaticProps」和「getServerSideProps」函數現在變得複雜而麻煩。目前，沒有特定的位置來新增 API 呼叫或資料庫查詢，您可以將它們寫入任何您想要的位置！在多年前使用 PHP 犯了同樣的錯誤之後，我們開始再次將業務邏輯與 UI 混合。難道前端開發者不吸取過去的教訓嗎？如果我刪除按鈕會發生什麼事？這是否會破壞我的使用者身份驗證流程，因為資料庫呼叫位於其中？您的前端應該 100% 可廢棄且可更換。你相對於競爭對手的競爭優勢在於業務邏輯，它應該與 UI 層完全隔離。  - 接下來是伺服器優先。這聽起來沒那麼糟吧？畢竟，這解決了 SEO 問題並立即向用戶展示新鮮內容。問題在於，大多數現有的 Next 程式碼庫都依賴客戶端程式庫，例如樣式元件和一些全域狀態管理器。這是什麼意思？隨著此類重大變化的不斷發生，您的應用程式將在幾週而不是幾年內變成遺留軟體。更多的時間花在保持所有依賴項最新上，而不是做重要的事情：發布功能。 - Vercel 從 Meta 聘請了多名 React 核心團隊成員。這帶來了嚴重的利益衝突，因為這些工程師現在（據稱）正在發布有利於 Next 的功能，而不是優先考慮那些可以幫助所有基於 React 的框架（如 Remix）的功能。  我再也受不了了。我對自己說：你知道嗎？我厭倦了一遍又一遍地重新學習相同的框架，我完全不同意這種新的範式。 毫不奇怪，其他內容創作者也經歷了類似的情況： https://youtu.be/zkCBSz353fc?si=z3-FDVgcB3xfp06h https://youtu.be/Zt8mO_Aqzw8?si=10fy1d-ZoB7t3Uc_ --- ## 啟蒙之路 我非常累。在厭倦了所有的 React 工具後，我開始了尋找更簡單的 Web 框架的旅程。以下是我一直在尋找的先決條件： - 含電池 - 約定優於配置 - 良好的開發體驗 - 現代化且高性能的前端 我的第一個反應是查看 [Stack Overflow Survey 2023](https://survey.stackoverflow.co/2023/#section-most-popular-technologies-web-frameworks-and-technologies) 中的頂級框架。我立即從清單中刪除了所有與 JS、C# 和 Java 相關的內容。我從來沒有興趣學習後兩個，它們看起來醜陋且冗長。所以剩下的選項是：Laravel (PHP)、Django (Python)、Rails (Ruby) 和 Phoenix (Elixir)。 Python 是我在網路工程學位期間使用的語言，我獲得了非常愉快的體驗。 Django 似乎遵循約定優於配置的理念，但最終讓我放棄它的是沒有一個好的內建工具來在前端工作。論壇上的大多數人都說他們使用[HTMX](https://htmx.org/) 和[Alpine](https://alpinejs.dev/)，但是，兩者都是您需要安裝的外部依賴項。 放棄Laravel 是非常困難的，因為它具有驚人的成本效益，有數百個官方軟體包可以處理新創公司可能需要的幾乎所有內容，例如託管、身份驗證、條紋支付等。對於前端，他們創造了[慣性。Node.js](https://inertiajs.com/)，這是一種非常簡單而優雅的方式，可以在前端使用 React 的同時保持 Laravel 的高生產力和強大功能。百分之百誠實地說，我沒有選擇 Laravel 的唯一原因是 PHP 的語法，它看起來很難看，到處都是一堆 `$` 和 `->`。 ### Ruby on Rails Ruby on Rails 無需介紹。它是 Web 開發框架的元年，其革命性的「15 分鐘建立部落格」至今仍令人印象深刻。在我開始抱怨我發現的所有問題之前，讓我們先從好的方面開始。 與 Python 類似，Ruby 是一種可以向非技術人員展示的語言，他們會理解該軟體想要做什麼。它是**迄今為止**我見過的最容易閱讀和最美麗的語言。我很快就意識到，[編寫視覺上令人愉悅的程式碼](https://world.hey.com/dhh/a-writer-s-ruby-2050b634) 是Rails 團隊的首要任務，這對我來說來說是新的。 更不用說 Rails 幾乎發明了「包含電池」和「約定優於配置」的哲學，所以這不會是一個問題。在一份文件中，我提供了任何類型的 Web 應用程式所需的一切。 在前端，有 [Hotwire](https://hotwired.dev/)，這是一種非常簡單且輕量級的方法，可以實現 SPA 框架提供的所有 UX 改進。我一直很好奇測試這個庫的極限，它看起來非常有前途。 好吧，Rails 在紙面上滿足了我想要的框架的所有先決條件。我們來試試吧！我在本地測試的第一件事是“railsscaffold”命令。我立即感到震驚。一個指令就能產生 CRUD 所需的一切？決不！  在 Node + React 領域，要實現相同的目標，我需要手動編寫所有程式碼（這裡沒有生成器）並安裝一堆程式庫，例如：Vite、prisma、express、react router、redux、redux-thunk 、 vitest、cypress 、react 測試庫、zod、typescript、eslint、prettier、1000 個不同的插件，甚至可能還有GraphQL 或tRPC。基本上就是一個已經有 900 個依賴項的 package.json。 在“railsscaffold”最初的震驚之後，當我從控制器打開程式碼時，我再次震驚了： ``` class ArticlesController < ApplicationController def index @articles = Article.all end def show @article = Article.find(params[:id]) end def new @article = Article.new end def create @article = Article.new(article_params) if @article.save redirect_to @article else render :new, status: :unprocessable_entity end end def edit @article = Article.find(params[:id]) end def update @article = Article.find(params[:id]) if @article.update(article_params) redirect_to @article else render :edit, status: :unprocessable_entity end end def destroy @article = Article.find(params[:id]) @article.destroy redirect_to root_path, status: :see_other end private def article_params params.require(:article).permit(:title, :body) end end ``` 這是所有後端程式碼嗎？只需幾行？這不可能！這非常簡單，看起來就像一個「低程式碼」工具。它簡單、優雅、可讀性極強，這是我們在 JS 領域很少見的。 好吧，好吧，你現在一定在想：「這個來自網路的瘋狂 React 開發者說他最終使用了 Elixir，所以 ruby 一定有問題！」。你是對的，我的匿名朋友，有些事情讓我很惱火，讓我們談談。 首先，我們需要解決房間裡的大象：從 React + Typescript 轉向動態類型語言並不容易。從我開始編寫程式碼的那一刻起，我的 VScode 上就沒有出現智慧感知或充滿程式碼建議的下拉式選單，我感到盲目和迷失。這是一種可怕的感覺，我可能會在函數名稱上輸入錯誤，直到網站投入使用時才意識到！我知道我們可以編寫測試，但這是我希望在 IDE 上立即辨識的錯誤類型，而不是在測試或部署期間辨識。 另一件我以為我會喜歡但最終討厭它的事情是：太多的魔法。在 Typescript 程式碼庫中，我可以點擊任何類別或函數的頂部，前往原始程式碼並查看其實作方式。在 Rails 上，我到底在哪裡進行驗證（例如）？我是否在控制器內建立私有函數？有專門的資料夾嗎？不，正確的位置是在模型內部。為什麼？因為這就是它的工作原理，所以您要么採用該約定，要么很難編寫 Ruby 程式碼。我根本無法對一切在幕後如何運作產生“直覺”，我必須盲目地相信維護者在組織一切方面做得很好。 為了解決我的挫折感，我開始寫前端程式碼。如何建立元件？ [部分](https://guides.rubyonrails.org/layouts_and_rendering.html#using-partials)。如何定義該元件的 prop 類型？沒有辦法做到這一點，您需要打開它並直觀地查找其中的所有變數。做一些互動怎麼樣？建立國家？嗯，有帶有 [Stimulus](https://stimulus.hotwired.dev/) 的 Hotwire，但是正如您所看到的，您需要手動建立“重新渲染”功能，它沒有找到一種方法像React 這樣改變狀態後自動重新渲染頁面。 ``` // src/controllers/slideshow_controller.js import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = [ "slide" ] initialize() { this.index = 0 this.showCurrentSlide() } next() { this.index++ this.showCurrentSlide() } previous() { this.index-- this.showCurrentSlide() } showCurrentSlide() { this.slideTargets.forEach((element, index) => { element.hidden = index !== this.index }) } } ``` 我再一次感到沮喪。我非常接近找到完美的框架！如果 Rails 失敗，我想嘗試的下一個框架是什麼？靈丹妙藥。 ### 長生不老藥和鳳凰 我必須說實話，我已經沒有耐心了。我嘗試了多種不同的生態系統，我幾乎確信要堅持使用 Ruby on Rails，並放棄對完美的追求。直到我的 YouTube 推薦部分出現了一個影片： https://www.youtube.com/live/bfrzGXM-Z88?si=Xsa7yCKeVSY5R3sT 堅持，稍等！在這裡我們可以看到一位 React 開發人員說了很多關於函數式程式設計、Elixir 和 Phoenix Live View 的好話。也許我應該嘗試一下！ 我做的第一件事就是打開Elixir 和Phoenix 的文件，我真的很喜歡這樣一個事實：所有包都使用[Hex Docs](https://hexdocs.pm/) 以相同的方式進行記錄，您只需要取得習慣於單一介面以學習新事物。 另一個好處是，您只需閱讀文件即可真正學習 Elixir，無需昂貴的課程！在其他所有生態系統中，我必須透過付費課程學習語言，然後透過閱讀文件來學習框架。 然後是時候開始編寫程式碼了。很快我就明白函數式程式設計與 OOP 有很大不同。我們來做一個小小的比較： ``` // JS const obj = {name: "daniel"} obj.age = 25 // result: obj = {name: "daniel", age: 25} ``` ``` # Elixir obj = %{name: "daniel"} obj = Map.put(obj, :age, 25) # result: obj = %{name: "daniel", age: 25} ``` 或者您可以使用管道運算子透過更簡單的語法實現相同的效果： ``` # Elixir with pipe operator obj = %{name: "daniel"} |> Map.put(:age, 25) # result: obj = %{name: "daniel", age: 25} ``` 最初，您可能會發現它的可讀性較差且更複雜，但我保證隨著時間的推移它會變得有意義！嗯，至少對我來說是這樣。身為 React 開發人員，我已經習慣了到處都可以看到多個函數，甚至前端元件也是函數！更不用說建立類別有時被 JavaScript 黑手黨視為一種程式碼味道。我的大腦已經針對這種新範式進行了“塑造”，這對我來說很自然。自從我在大學獲得網路工程學位以來，我上過幾門關於物件導向程式設計的課程，但它從來沒有「受歡迎」。我無法將複雜的問題建模為類別和物件。隨著時間的推移，使用多個函數來「改變」一個變數是我在腦海中建模的方式。 主要框架怎麼樣？包含鳳凰電池嗎？約定優於配置？ **是的！** 老實說，生態系統與 Rails 不在同一水平，但已經達到了 95%。除非您需要非常具體的功能，Phoenix 都能滿足您的需求。 我幾乎被 Elixir 迷住了，我的清單中缺少兩件事：良好的開發人員體驗和現代/高效能的前端程式碼。 José Valim 宣布他正在嘗試為該語言加入類型，但 Elixir 目前還沒有這些類型，所以我很擔心。如何在沒有類型的情況下獲得智能感知和自動完成？很快我發現這些功能不一定相關。在 VScode 上安裝 [ElixirLS 擴充功能](https://marketplace.visualstudio.com/items?itemName=JakeBecker.elixir-ls) 後，我感到很驚訝。可以在隨機資料夾的隨機模組內定義函數，將其導入其他位置，並取得它的智慧感知和文件！我從靜態類型語言中獲得了這些好處，而無需編寫類型的麻煩，簡直太棒了！ https://elixir-lang.org/blog/2022/10/05/my-future-with-elixir-set-theoretic-types/ 我對前端的最後一個擔憂是由 Phoenix [Live View](https://hexdocs.pm/phoenix_live_view/welcome.html) 解決的。在程式碼方面，這正是文件主頁中讓我信服的部分：  您可以為每個元件定義“props”，如果類型不匹配，您的 IDE 中會出現錯誤，就像 React 一樣！感人的！ 使用者體驗怎麼樣？每當使用者點擊連結時是否會載入整個頁面？一定不行！即時視圖與客戶端建立 WebSocket 連接，然後每次頁面轉換只是透過 Websocket 進行內容交換，不會發出新的 HTTP 請求。此外，所有狀態都在伺服器端進行管理，這意味著 Trello 等豐富的用戶體驗過去由於加載過多的 JavaScript 而在客戶端非常卡頓，現在變得非常快！ Elixir 處理所有複雜的狀態邏輯並將頁面的更新部分傳送到前端。看看這裡的完整解釋： https://youtu.be/wrmVk2czqMg?si=ZoWAlPjQC-svmV3Y 由於我們使用 WebSocket 來建立 UI，因此建立像 Twitter 這樣的「即時」應用程式只需要幾行程式碼！ https://youtu.be/MZvmYaFkNJI?si=gAow6oIjgf8_OTkg ## 結論 可以肯定地說，「完美的技術堆疊」並不存在。解決所有問題的靈丹妙藥是我們在腦中創造的幻覺，以不斷尋找和建構最優化的工具。 然而，在個人層面上，完美的堆疊確實存在。因為每個開發人員都有偏好，您可以輕鬆找到適合您標準的工具。如果你有和我類似的旅程，完美的可能就是長生不老藥和鳳凰！所以試試看吧，也許你會像我現在一樣喜歡它。 如果您讀到了這篇文章的結尾，那您就太棒了！非常感謝您抽出寶貴的時間，希望我能為您的職業生涯帶來一些價值。  --- 原文出處：https://dev.to/danielbergholz/from-nextjs-to-rails-then-elixir-my-journey-through-reactjs-burnout-h8d
如果你錯過了，Node 的建立者 Ryan Dahl 的新 Javascript 和 Typescript runtime[已發布](https://deno.land/)！它有一些非常酷的功能，可供公眾使用！讓我們來看看一些簡潔的功能，並開始建立一個簡單的 hello world！ ## 什麼是 Deno？ Deno 是 Typescript（和 Javascript）的新runtime，主要用 Rust 寫。它有一些[偉大的目標](https://deno.land/manual.html#goals)和一些非常有趣的“非目標”，例如不使用`npm`並且沒有package.json。 ## 安裝 安裝 deno 就像執行以下命令一樣簡單： `curl -fsSL https://deno.land/x/install/install.sh |噓` 然後複製“export”行並將其新增至“~/bashrc”或“~/bash_profile”中。 打開一個新終端並執行“deno”。您應該會收到“>”提示。輸入“exit”，讓我們深入研究一些功能！ ## Deno 中的酷功能 ### 預設打字稿 預設情況下，整合 Deno 來執行 Typescript 檔案。它基本上使 Javascript 中的類型成為一等公民。不再需要透過 Babel 編譯來在伺服器端 Javascript 中使用 Typescript。 ### 從 URL 導入 Deno 允許您從網頁匯入，就像在瀏覽器中一樣。只需在您通常命名模組的位置新增一個 URL： ``` import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts"; ``` ### 標準庫 此外，Deno 有一個易於導入和使用的標準函式庫。有些模組可以執行多種不同的操作，例如 HTTP 處理、日期時間工作和檔案系統工作。您可以在[此處](https://github.com/denoland/deno_std)查看。 ### 使用 ES 模組 最後，Deno 僅支援 ES 模組語法，這表示不再需要 `require()` 語句，只需良好的 ole' `import x from "y"`。 ## 你好世界範例 讓我們快速看一下 Hello World，其中重點介紹了其中一些功能！ 將其複製到“hello-world.ts”檔案中。 ``` import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts"; const sayHello = (name: string = "world") => { console.log(bgBlue(red(bold(`Hello ${name}!`)))); } sayHello(); sayHello("Conlin"); ``` 現在您可以使用“deno hello-world.ts”執行它，它應該會列印出一些內容。 將“sayHello”呼叫之一更改為“sayHello(15);”並重新執行它。您應該看到類型錯誤，因為 15 不是字串！太酷了！ 您還會注意到如何從 URL 導入 - 它從標準庫中獲取一些控制台顏色內容！ # 最後的想法 Deno 還沒有完全準備好用於生產 - 有幾個 [bug](https://deno.land/benchmarks.html#req-per-sec)，但開發正在快速推進！這絕對是一個很酷的新開源專案，值得關注！ --- 原文出處：https://dev.to/wuz/getting-started-with-deno-e1m
## 簡介 本文列出了五個不太受歡迎的優秀專案，您應該嘗試一下。 🔥 這些工具旨在改進**資料處理**、**API 開發**、**後端測試**、**身份驗證**和**安全隧道**。 諸如此類的開源專案依賴社群支持🙏，因此請考慮探索並為這些儲存庫加註星標，以促進它們的發展。  *** ## 1. [集算器](http://scudata.com) **- 資料處理** > 💡 集算器是一種用於資料處理的腳本語言，具有豐富的函式庫函數和強大的語法。  集算器是一個針對結構化和半結構化資料的計算和處理引擎。集算器既不是SQL系統，也不是NoSQL技術（如MongoDB），而是採用自創的SPL（結構化處理語言）語法，編碼更簡單，可以利用現有的資料處理技術建立高效的程式。 集算器是**純Java**編寫的，可以輕鬆為您的Java🍵應用程式加入強大的資料處理功能，但非Java應用程式可以透過RESTful API呼叫集算器。 ### 熱門常見問題解答🤔 > **⬇️集算器可以執行在哪些平台上？** 由於它純粹是用 Java 建置，因此可以在任何配備 JVM（Java 虛擬機）、雲端伺服器甚至容器的作業系統中流暢執行。 😎 > **⬇️集算器可以基於現有資料庫運作嗎？** 是的當然！集算器支援數十種資料來源，包括資料庫、文字、excel、json/xml、web服務等。 > **⬇️ 為什麼要放棄 SQL 而選擇集算器？** 簡化的逐步程式碼，易於編寫和除錯。相較於SQL降低N倍的開發、硬體、維運成本。 > 🟢我最近寫了一篇關於這個工具的文章，重點介紹了它的強大功能。看看吧👇。 https://dev.to/shricodev/one-must-have-tool-for-anyone-in-data-field-2jek > 如果你想更深入地了解這個工具的潛力，**[jbx1279](https://dev.to/jbx1279)**分享了一些關於集算器和SPL本身的富有洞察力的文章。請務必也檢查一下它們。 https://github.com/SPLWare/esProc *** ## 2. [Firecamp](https://firecamp.dev/) **- 郵差替代方案** > 💡 API 開發平台，幫助開發人員輕鬆設計、開發、測試和記錄他們的 API。  Firecamp 是開放原始碼 Postman 的替代方案，具有 VScode DX，這是一個優先考慮開發人員體驗的 API 開發平台，並為設計、測試和記錄 API 提供無縫環境。 🎯 借助 Firecamp，跨工作區和團隊就 API 集合進行協作，並更快地建立 API，而無需在工具和應用程式之間切換。文件、CLI、CI/CD 一站式提供。 > **⬇️ 從 Postman 切換到 Firecamp 對我來說有挑戰性嗎？** 您可以將 Postman 腳本和資料（例如 **API Collection** 和 **環境變數**）無縫傳輸到 Firecamp，沒有任何問題。  https://github.com/firecamp-dev/firecamp *** ## 3. [Keploy](https://keploy.io/) **- 後端測試** > 💡 為您的應用程式產生實際有效的測試和存根！  Keploy 是您的開源、以開發人員為中心的後端測試工具。它使工程團隊的後端測試變得簡單且有效率。使用 Keploy，我們不必編寫手動測試用例。 它記錄 API 互動和預期回應，並產生測試案例和資料模擬，使我們的工作變得輕鬆高效，顯著加快發布速度並增強可靠性。 📈 > **⬇️ 它是一個單元測試框架嗎？還是它完全取代了單元測試？** Keploy 與「go-test」、「Pytest」或「Jest」等單元測試框架配合得很好，可簡化測試流程並節省高達 80% 的工作。雖然它涵蓋了大多數情況，但您仍然可以選擇為非 API 可呼叫方法編寫測試。 > **⬇️ 我需要更改程式碼才能將 Keploy 整合到我的應用程式中嗎？** 不需要。Keploy 可以很好地與您現有的程式碼庫配合，無需更改程式碼。  https://github.com/keploy/keploy *** ## 4. [Hanko](https://hanko.io) **- 金鑰驗證** > 💡 支援 FIDO2 和 WebAuthn 標準的無密碼身份驗證伺服器。  Hanko 是一款輕量級開源用戶身份驗證解決方案，可帶您踏上超越密碼的旅程。它支援 FIDO2 和 WebAuthn 標準，提供安全、無縫的使用者身份驗證體驗。 > **⬇️ Hanko 如何運作？** Hanko 的工作原理是使用使用者自己的裝置（例如智慧型手機、筆記型電腦或安全金鑰）註冊和驗證使用者。這些裝置可作為加密令牌，無需密碼或其他憑證即可證明使用者的身分。 Hanko 還支援各種身份驗證方法，例如行動應用程式中的生物辨識或 OAuth 登入。 > **⬇️ 我該如何開始使用 Hanko？** 您可以透過註冊免費帳戶並按照文件和教學課程開始使用 Hanko。對於生產用途，請選擇 Hanko Cloud。 > 🟢 我最近使用 Hanko Passkeys 身份驗證建立了一個專案。查看**[此處](https://github.com/shricodev/pdfwhisper-openai)**。  https://github.com/teamhanko/hanko *** ## 5. [Zrok](https://zrok.io/) **- Ngrok 類固醇** > 💡 Ngrok 的替代品，提供增強的功能和免費的 SaaS 型號。  Zrok 是一個建立在 **OpenZiti** 之上的工具，有助於共享正在執行的服務，例如 Web 伺服器或網路套接字，或安全地將靜態檔案目錄共享到網際網路。它是 Ngrok 的替代品，但具有一些增強功能和**免費 SaaS** 型號。 借助 Zrok，您可以為應用程式建立安全隧道，從而更輕鬆地共享和協作專案。 > **⬇️ 使用 Zrok 相對於 Ngrok 有什麼好處？** Zrok 擁有內建的身份驗證系統、用於管理隧道的 Web 儀表板以及免費的 SaaS 模型。它也是完全**可自我託管**。 > **⬇️ 我該如何開始使用 Zrok？** 若要開始使用 Zrok，請下載適合您平台的 Zrok 用戶端或使用 Web 介面建立隧道。您也可以使用 Zrok CLI 從命令列建立和管理隧道。  https://github.com/openziti/zrok *** > 如果您認為您使用的任何其他方便的專案沒有應有的受歡迎，請在下面的評論部分分享。 👇 非常感謝您的閱讀！ 🎉🫡 --- 原文出處：https://dev.to/shricodev/top-5-underrated-open-source-projects-that-no-one-talks-about-2gki
𝗛𝗶𝗖𝗼𝗺𝗺𝘂𝗻𝗶𝘁𝘆， 我們很高興與您分享這個好訊息：我們上個月完成了 500 萬美元的種子輪融資，以幫助開發人員建立 AI/資料全端應用程式。 𝗧𝗵𝗲 𝗧𝗮𝗶𝗽𝘆 𝗦𝘁𝗼𝗿𝘆 幾年前，Albert 和我在為大型組織領導人工智慧專案多年後，決定是時候過渡到完整的 Python 開發並停止使用傳統的 Java、JS、.Net 堆疊等。 我們非常清楚我們正在尋找哪些功能，但令我們驚訝的是，我們在許多現有的 Python 套件中找不到它們。 我們的使命既簡單又雄心勃勃：提供缺少的磚塊，阻止如此多的人工智慧/資料試點成功部署專案。 特別是，我們希望將最終用戶帶回「人工智慧/資料」畫面。今天我仍然驚訝地發現，關於最終用戶的提及如此之少：從資料科學家到資料工程師，都是關於資料流、公開演算法等？沒有提及人類將如何與人工智慧/資料模型互動......我們想改變這一切！ 所以我們決定建造 Taipy… 𝗧𝗮𝗶𝗽𝘆𝗰𝗼𝗺𝗯𝗶𝗻𝗲𝘀： - 功能強大的互動式前端應用程式產生器，但學習/使用非常簡單。 - 「場景」是最終用戶（以及資料科學家）輕鬆與資料和演算法互動的可能性。 2022 年，我們首次推出了 Taipy 作為開源專案（請查看我們的 [GitHub 頁面](https://github.com/Avaiga/taipy)），隨後於當年稍後推出了企業版本。 感謝這個令人驚嘆的社區的大力支持和興趣，我們的 GitHub 計畫不僅流行，而且受歡迎程度也顯著上升，在幾週內從 100 顆星增加到 3,000 多顆星！我們非常感謝您的支持和熱情。 [隨意 ⭐ Taipy 儲存庫](https://github.com/Avaiga/taipy) 我還要感謝我們早期的企業採用者，他們在驗證和測試新技術方面非常重要。感謝麥當勞、KnowledgeTouch、Groupe Les Mousquetaires、Total Energies、Textil Apparel Limited、IFP-EN 等提供的特價。 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗦𝘁𝗮𝘁𝘂𝘀 我們最近發布了： - [Taipy Cloud](https://www.taipy.io/posts/introducing-taipy-cloud-the-easiest-way-to-deploy-your-taipy-applications)允許社群使用者部署、託管和與世界其他地方分享他們的應用程式 - 重要的後端功能：Taipy Studio、應用程式版本控制、任務排程、Python API、用於場景管理的視覺化元件、新的 CLI 等等... - 在前端方面：一個新的樣式套件、一組用於即時應用程式建立的預設樣式表範本、新圖表... - [TalkToTaipy](https://talk-to-taipy.tapy.cloud/)，基於 LLM 的應用程式，僅使用自然語言探索資料集 𝗧𝗮𝗶𝗽𝘆’𝘀𝗳𝘂𝘁𝘂𝗿𝗲 這項重大投資使我們能夠繼續全職致力於改進 Taipy。這筆資金也是實現我們願景的關鍵一步，將 Taipy 定位為 Python 人工智慧/資料專案的領先平台。 𝗧𝗵𝗲 𝗻𝗲𝘅𝘁 𝗿𝗲𝗹𝗲𝗮𝘀𝗲 (𝗽𝗹𝗮𝗻 𝟰） 即將（本季）推出的精彩版本包含主要新功能： - 全新的**無程式碼 GUI 設計器**：您無需編碼即可建立 GUI 頁面！抱歉劇透，但這位新設計師是個殺手！ - **分散式計算：** 在遠端叢集上執行以並行場景/任務執行。 - **與主要平台整合**：如 Databricks、Dataiku 等。 所有這一切，同時忠於我們的開源根源！ 𝗢𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝘂𝗻𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘀𝗙 - 我們現在出現在多個社群平台：[Discord](https://discord.com/invite/SJyz2VJGxV)、[LinkedIn](https://www.linkedin.com/company/taipy-io)、[ X](https://twitter.com/Taipy_io) 和[YouTube](https://www.youtube.com/@taipy_io)。 - 我們贊助了多項活動：會議（PyData、Pycon、ODSC...）、黑客馬拉松、派對、網路研討會... - 我們也計劃很快開始定期舉辦 Taipy 技術講座。 。 是的，所有這些都是開源的！ 我們總是渴望收到您的來信，因此，如果您認為 Taipy 需要改進或加入哪些內容，請告訴我們。您的意見對於制定我們的路線圖非常寶貴。 謝謝大家的支持。沒有您，我們不可能達到這個里程碑！ 文森特·戈塞林和阿爾伯特·安托萬 太皮聯合創辦人 還沒看過 Taipy 嗎？歡迎造訪我們的[GitHub頁面](https://github.com/Avaiga/taipy ）。 --- 原文出處：https://dev.to/taipy/our-open-source-project-for-building-ai-data-full-stack-apps-got-funded-4e68
> 本文主要讲解脚本文件加载失败时的处理，对于其他类型的文件加载错误时，解决方向大致一样 ## 背景 在我们开发网站应用时，我们可能会遇到脚本加载失败的情况，导致脚本加载失败的原因有很多，比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。 ## 解决方案 在 JavaScript 中，我们可以创建一个监听来监听脚本加载失败的情况，然后针对加载失败的脚本进行重新加载。 重新加载的方案，一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表，用来在加载失败时匹配新的域名进行重试。 具体的解决方案，下面我一步一步讲解，另外希望大家可以仔细阅读注释中的内容 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>脚本加载失败如何重试</title> <script> window.addEventListener( "error", // 监听全局错误 function (e) { console.log(e); }, true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听 ); </script> </head> <body> <script src="https://www.zowlsat.com/api/1.js"></script> <script src="https://www.qqqqqqq.com/api/2.js"></script> <script src="https://www.zowlsat.com/api/3.js"></script> </body> </html> ``` 此时我们可以在浏览器控制台看到以下效果  但是这个监听方法会监听到很多其他的错误，我们只需要监听脚本加载失败的错误，所以我们要通过这个监听事件的参数 e 来判断了  根据上图我们可以发现，普通错误的类型是 ErrorEvent，而脚本加载失败的类型是 Event，并且他的 target 会指向 script 标签，所以我们根据这个区别过滤掉其他的错误，这样剩下的情况才是我们需要处理的。 ```js window.addEventListener( "error", function (e) { if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return; console.log(e); }, true ); ``` 接下来就是如何来实现重新加载，我们先给需要重新加载的域名建立一个映射关系，用于替换映射关系表中的域名。然后就是挨个匹配，当还是加载失败时继续匹配下一个，直到成功为止。 ```js const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"]; const retry = {}; window.addEventListener( "error", function (e) { if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return; // 创建一个URL对象 const url = new URL(e.target.src); // 获取文件路径 const key = url.pathname; // 假如映射表中没有这个文件路径，那么就初始化一个映射键 if (!(key in retry)) { retry[key] = 0; } // 假如匹配完整个映射表都没重新加载成功，则放弃 const index = retry[key]; if (index >= domainList.length) { return; } // 获取新的完整路径 const domain = domainList[index]; // 替换域名 url.host = domain; // 创建新的script标签 const script = document.createElement("script"); script.src = url.toString(); // 将新的script标签追加到加载失败的script标签之前 document.body.insertBefore(script, e.target); retry[key]++; }, true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听 ); ``` 到此为止，我们功能已经基本实现，效果如下图  但是有一个很关键的问题，就是假如我 2.js 这个文件中的内容，在 3.js 中要使用，那这样的话，2.js 就必须加载到 3.js 之前，否则就会报错。此时，我们就需要在 2.js 加载失败时，阻塞浏览器的解析，知道重新加载完成或者放弃重新加载时，再继续渲染之后的内容。 那这样的话我们该怎么做呢？🤔 其实很简单，在我们入门 js 时就学到过一个知识点，就是使用`document.write` `document.write`这个方法在解析期间使用的话，会阻塞浏览器的解析，而我们现在就是需要阻塞浏览器解析，那此时我们只需要将创建 script 标签的方法更换为`document.write`方法即可。 修改之后的代码如下： ```js const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"]; const retry = {}; window.addEventListener( "error", function (e) { if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return; const url = new URL(e.target.src); const key = url.pathname; if (!(key in retry)) { retry[key] = 0; } const index = retry[key]; if (index >= domainList.length) { return; } const domain = domainList[index]; url.host = domain; // 此处加上转译是因为防止编译器识别script标签为结束标签报错 document.write(`\<script src="${url.toString()}">\<\/script>`); // const script = document.createElement("script"); // script.src = url.toString(); // document.body.insertBefore(script, e.target); retry[key]++; }, true ); ``` 现在我们再打开控制台查看，现在js文件按它原来的顺序执行了，这样既不会改变原有的代码逻辑，又可以在可控范围内进行重新加载。 效果如下图：  以上是简单实现了一个js文件重新加载错误的方案，其实这个方案也可以运用到其他很多类型的文件，不限于js文件。 然后我们还需要更加细化这个方法的话，我们可能还需要考虑到这个script标签是否带有`async`、`defer`等属性，还有诸多需要考虑的点，但是沿着这个方向解决的话，大体是没有问题的。
--- 標題：2024 年學習 Python 的 7 個最佳地點 [網站 + 平台] 發表：真實 描述：如果您想知道 2024 年在哪裡學習 Python，那麼請查看這 8 個排名前列的網站和免費教程，以在 2024 年免費在線學習 Python 編程。 標籤: python, 程式設計, 編碼, 開發 封面圖片：https://thepracticaldev.s3.amazonaws.com/i/60y4jb5e98udezhppwt8.png --- *披露：這篇文章包含附屬連結；如果您透過本文提供的不同連結購買產品或服務，我可能會收到補償。* 不管你相信與否，Python 已經激勵了許多人學習編碼，而且它還在不斷激勵他們。我認識一些人因為不同的原因學習 Python，從 [web 開發](https://javarevisited.blogspot.com/2019/04/top-5-python-web-development-frameworks.html) 到[機器學習](https://javarevisited.blogspot.com/2019/08/top-5-python-books-for-data-science-and-machine-learning.html)。 我看過新人學習 Python，使用 Django 編寫 Web 應用程式，使用 Python 建立機器學習模型，然後編寫一些方便的腳本來自動執行無聊的工作。 Python 目前是世界上**#1 的程式語言**，並且由於資料科學和機器學習以及出色的 [Python 庫](https://javarevisited.blogspot.com/2018/10/ top-8-python- libraries-for-data-science-machine-learning.html）如Pandas、NumPy 和[TensorFlow](https://hackernoon.com/top-5-tensorflow-and-ml-courses-對於程式設計師-8b30111cad2c）。 因此，如果您也考慮在 2024 年學習 Python，或者已經開始使用 Python 進行編碼，但仍在尋找一些免費資源，那麼您來對地方了。 過去，我分享了許多有用的免費Python資源，例如[書籍](https://javarevisited.blogspot.com/2019/07/top-5-books-to-learn-python-in-2019.html ）和[免費課程](https://javarevisited.blogspot.com/2018/12/10-free-python-courses-for-programmers.html)。今天，我將分享一些可以免費學習 Python 的網站、免費教學和入口網站。 從免費資源中學習真是太棒了，因為您不需要信用卡，也不需要支付課程費用。您所需要的只是時間和學習的渴望。 然而，這並不容易，因為有很多[免費的Python資源](https://medium.com/swlh/5-free-python-courses-for-beginners-to-learn-online-e1ca90687caf)可用，選擇正確的一個是一項艱鉅的任務。這就像大海撈針一樣，這就是本文將為您提供幫助的地方。 順便說一句，如果你不介意花幾塊錢來學習像Python 這樣有價值和有用的東西，那麼我還建議你看看Josh Portilla 的**[完整的Python 3 Bootcamp](http://bit. ly/complete Udemy 上的 -python3-bootcamp)**。您將以更結構化的方式快速學習 Python，並且您可以在 Udemy 的促銷活動中僅花費 10 美元購買本課程。 ##2024 年 8 個初學者的熱門平台和免費 Python 教程 在這裡，您將找到一些免費學習 Python 的最佳地點，我與幾位 Python 專家一起精心挑選了這些資源。我有目的地選擇盡可能少的資源，但我仍然有一些選擇。如果您有任何其他免費教授 Python 開發的有用 Python 網站，請隨時推薦它們。 ###**1\. [Coursera](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2F)** 如果您想在不支付一分錢的情況下向世界一流大學學習，那麼 Coursera 就是您的最佳選擇。它提供史丹佛大學、歐洲工商管理學院、新加坡國立大學（新加坡國立大學）等知名大學教授的線上課程。 最重要的是，它還有最受歡迎的免費課程之一來學習*Python - 適合所有人的程式設計*（Python 入門）。 本課程將從零開始教您 Python 3。您不需要任何程式設計經驗，因為您將在課程中學習。超過 1250,000 名學生已經註冊了這門課程並學習如何編程，現在是您從中受益的機會。 課程也是 [**Python forEverybody 專業化**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org% Coursera 上的2Fspecializations %2Fpython)，其中包含另外4 個深入學習Python 的課程，例如： 1.【Python資料結構】( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-data%3Fspecialization%3Dpython） 2.【使用Python存取Web資料】( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-network-data%3Fspecialization%3Dpython） 3. [透過Python使用資料庫]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-databases%3Fspecialization%3Dpython） 4. [Capstone 專案：使用 Python 檢索、處理和視覺化資料]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-data-visualization） 所有課程都可以免費旁聽，這意味著您可以免費加入並學習。但是，您無法參加作業和測驗，並且在付款之前不會獲得任何認證。 [ ]( https://dev.to/javinpaul/7-python-online-courses-for-beginners-and-intermediate-programmers-1h4k) 如果您想要所有這些和認證，那麼您需要註冊不是免費的專業化課程。如果您負擔得起並欣賞該課程，無論如何，您應該訂閱，它完全值得您的時間和金錢。 我建議加入 [Coursera Plus]，這是 Coursera 的訂閱計劃，可以無限制地存取許多課程、認證和專案。如果您想參加 Coursera 中的多個課程或認證，這可能是最好的學習方式，不僅包括 Python，還包括資料科學和雲端。 ------ ###**2\. [Udemy](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2F)** 這是另一個流行的線上課程平台，它可能擁有地球上最大的線上課程集合。我喜歡 Udemy，因為你幾乎可以找到任何你想學的課程，而且還是免費的。 與 [Codecademy](https://bit.ly/codecademypro) 不同，您不需要任何訂閱，只需建立免費帳戶，然後您就可以註冊免費的 Python 課程。大多數講師在首次推出課程時都會免費提供課程，以便獲得一些關注、評論和社會認同。 但是，也有一些完全免費的優質 Python 課程。您可以加入他們來學習 Python 3。以下是我最喜歡的一些免費課程，可幫助您深入學習 Python。 Udemy 的優點是您可以向專家學習，但它的互動性不如 CodeCademy。不過，如果您喜歡透過影片學習，那麼沒有比 Udemy 更好的地方了。 如果你能負擔得起一些錢，你還可以以10 美元左右的一次性價格獲得很棒的訓練營風格的課程，例如**[The Complete Python 3 Bootcamp](http://bit.ly/complete -python3-bootcamp)**關於他們的閃購。 [** 如果您不知道 Educative.io 是一個基於文字的互動式平台，可讓您透過瀏覽器進行學習和編碼。您可以學習概念並只需在下一行中編寫程式碼，而無需擔心下載必要的軟體和設定開發環境。對於任何學習任何程式語言的初學者來說，這是最大的優勢，因為他們中的大多數人都陷入了這個設定部分。 如果你想[在2024 年學習Python](https://www.java67.com/2020/05/top-5-courses-to-learn-python-in-depth.html) 那麼這門課是完美的地方開始。本課程首先探索基本建置塊，然後再討論函數和循環等更高層次的概念。有趣的測驗和程式設計挑戰將伴隨您一路前行，幫助您強化課程中涵蓋的所有概念。 在課程結束時，您將熟悉[資料結構](https://becoming human.ai/6-courses-python-programmers-can-join-to-learn-data-structs-and -algorithms-c1a37284938e) 和Python中的函數式程式設計。這是一門免費課程，因此您無需支付任何費用即可加入，您只需建立 Educative.io 帳戶即可存取課程。 [](https://www.educative.io/courses/learn-python-from-從頭開始？affiliate_id=5073518643380224) ---- ### 4\. [DataCamp 的免費 Python 入門課程](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fintro-to-python-for -資料科學） DataCamp 的「Python 程式設計簡介」課程對於想要踏上 Python 世界之旅的初學者來說是一個極好的資源。此免費課程具有用戶友好的介面和全面的內容，適合剛接觸程式設計或希望鞏固基礎 Python 技能的學習者。 它涵蓋了變數、資料類型、控制結構、函數等關鍵概念，確保學生充分掌握 Python 基礎知識。透過實踐方法，參與者參與實際練習和編碼挑戰，以增強他們的理解。 無論您是想進入資料科學、Web 開發或任何 Python 相關領域，本課程都會對該語言的語法和功能進行紮實的介紹，為更高級的學習奠定基礎。 說到社會認同，超過 500 萬人參加了這門課程，這是任何線上 Python 課程的記錄，它的平均評分為 4.7，簡直令人驚嘆。 順便說一下，如果您喜歡Datacamp的線上學習平台及其課程，可以考慮付費訂閱。他們有不同的計劃，如標準、專業和高級，允許存取所有專案。我推薦 **[標準計劃](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fpricing)** 因為它是正確的-價格合理，您可以獲得提高資料技能的所有必需品。 [](https://datacampc. /c/1193463 /1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fintro-to-python-for-data-science) -------- ###**5\. [CodeCademy](https://bit.ly/codecademypro)** 如果您喜歡互動式學習，那麼沒有比 CodeCademy 更好的地方了。他們首先用盡可能少的單字教你理論，然後要求你使用該概念在線上編寫程式碼。最好的事情是您不需要進行任何設置，例如在電腦上安裝 Python。 您可以直接從瀏覽器執行 Python 程式碼。另一個好處是，在準備好之前，您不需要編寫完整的程式。您需要進行一些小的更改並執行它們。這是學習 Python 程式設計的一種很棒且有趣的方式。 我使用他們的互動式平台學習了 JavaScript、Java、Python 和 Linux。早些時候，他們是完全免費的，但現在他們有免費增值模式，其中一些課程或課程僅對付費會員開放。 目前，他們的[**學習Python 2**](https://bit.ly/learnpython2withcodecademy)課程是免費的，而[**Python 3課程**](https://bit.ly/learnpython3codecademy)只是免費的可供付費會員使用。如果您負擔得起並欣賞 CodeCademy，請務必訂閱，但如果您無法從他們的 Python 2 課程開始，那麼它非常適合沒有編碼經驗的初學者。 [](https://bit.ly/codecademypro) ----- ###**6\. [Google 的 Python 課程](https://developers.google.com/edu/python/)** 如果你不知道，Google 也為初學者提供了一套優秀的 Python 教程，稱為 Google 的 Python 課程。這是一個免費課程，適合有一點程式設計經驗並且想要學習 Python 的人。課程包括書面教程、講座影片和大量練習 Python 編碼的程式碼練習。 第一個練習涉及字串和清單等基本 Python 概念，為下一個練習奠定基礎，下一個練習是處理文字檔案、進程和 http 連接的完整程序。 Google 本身的許多專案都使用 [Python](https://javarevisited.blogspot.com/2018/05/10-reasons-to-learn-python-programming.html)。而且，這些材料通常在 Google 內部用於向剛開始編碼或幾乎沒有程式設計經驗的人教授 Python。 本材料最好的部分是 YouTube 上提供講座影片。因此您不需要任何其他帳戶。它還教您設定自己的[Python開發環境](https://medium.com/better-programming/top-5-courses-to-learn-python-in-2018-best-of-lot-26644a99e7ec ），這確實帶來了最初的挑戰，但從長遠來看是很好的。 ------ ###**7\. [微軟的免費Python課程](https://www.awin1.com/cread.php?awinmid=6798&awinaffid=631878&clickref=&p=%5B%5Bhttps%3A%2F%2Fwww.edx.org%2Fcourse%2Fintroduction-to - python-absolute-beginner-4%5D%5D)** 如果谷歌也有Python課程，微軟怎麼會落後呢？嗯，它還在 Edx（另一個流行的免費教育線上入口網站）上提供免費的 Python 課程。本課程名為“Python 簡介：絕對初學者”，是一門學習 Python 的免費課程，由高級內容開發人員 Eric Camplin 教授。 本課程將在Jupyter Notebooks 中教您Python，這是一個基於瀏覽器的線上[Python] 編碼編輯器(https://hackernoon.com/top-5-courses-to-learn-python-in-2018- best-of- lot-26644a99e7ec)，這表示你不需要安裝Python。這是一個為期 5 週的課程，每週學習 3 到 4 個小時。 本課程也是 Microsoft 入門級軟體開發專業計劃的一部分，該課程也是免費的。您只需在需要認證時付費。您可以將其新增至您的履歷或 LinkedIn 個人資料中，如下所示： [](https://javarevisited.blogspot.com/2018/03/top-5-courses-to-learn-python-in-2018.html) ------ ###8。 [學習 Python - FreeCodeCamp 的初學者完整課程 [教程]](https://www.youtube.com/watch?v=rfscVS0vtbw) 本課程將向您全面介紹 Python 中的所有核心概念。跟著影片一起學習，您很快就會成為 Python 程式設計師！您可以在 YouTube 上免費觀看，這是目錄 ⭐️內容⭐ ⌨️ (0:00) 簡介 ⌨️ (1:45) 安裝 Python 和 PyCharm ⌨️ (6:40) 設定和 Hello World ⌨️ (10:23) 繪製形狀 ⌨️ (15:06) 變數和資料類型 ⌨️ (27:03) 使用字串 ⌨️ (38:18) 處理數字 ⌨️ (48:26) 取得使用者的意見 ⌨️ (52:37) 建構一個基本計算器 ⌨️ (58:27) 瘋狂自由遊戲 ⌨️ (1:03:10) 列表 ⌨️ (1:10:44) 列表函數 ⌨️ (1:18:57) 元組 ⌨️ (1:24:15) 功能 ⌨️ (1:34:11) 退貨聲明 ⌨️ (1:40:06) If 語句 ⌨️ (1:54:07) If 語句與比較 ⌨️ (2:00:37) 建構一個更好的計算器 ⌨️ (2:07:17) 字典 ⌨️ (2:14:13) While 循環 ⌨️ (2:20:21) 建構一個猜謎遊戲 ⌨️ (2:32:44) For 循環 ⌨️ (2:41:20) 指數函數 ⌨️ (2:47:13) 2D 清單和嵌套循環 ⌨️ (2:52:41) 建構翻譯器 ⌨️ (3:00:18) 評論 ⌨️ (3:04:17) 嘗試/例外 ⌨️ (3:12:41) 讀取文件 ⌨️ (3:21:26) 寫入文件 ⌨️ (3:28:13) 模組和 Pip ⌨️ (3:43:56) 類別與物件 ⌨️ (3:57:37) 建構多項選擇測驗 ⌨️ (4:08:28) 物件函數 ⌨️ (4:12:37) 繼承 ⌨️ (4:20:43) Python 解譯器  ---- 這就是一些 **您可以免費學習 Python 的網站**。所有這些都是很棒的資源，您可以選擇您喜歡的資源。您不需要註冊所有這些，這將是荒謬且耗時的。相反，選擇最適合您的學習風格的一種。 例如，如果您喜歡互動式學習，請選擇[CodeCademy](https://javarevisited.blogspot.com/2019/09/codecademy-vs-udemy-vs-onemonth-which-is-better-for-learning-code . html），如果您喜歡非正規影片課程，那麼選擇 Udemy；如果您喜歡大學和學校等結構化教育，那麼選擇 Coursera。 而且，如果您喜歡基於文字的學習，請記住閱讀比觀看影片更快，那麼 Google 的 Python 課程是最好的。 除此之外，Scrimba 是另一個免費學習 Python 程式設計的好地方。 您可能喜歡的其他 **Python 文章和資源** - [2024年學習Python的10個原因](https://javarevisited.blogspot.com/2018/05/10-reasons-to-learn-python-programming.html) - [Python初學者學習Python的5大課程](https://javarevisited.blogspot.com/2018/03/top-5-courses-to-learn-python-in-2018.html) - [Python 開發者最喜歡的 5 個 Web 開發框架](https://javarevisited.blogspot.com/2019/04/top-5-python-web-development-frameworks.html) - [Python 與 JavaScript - 哪個更好開始？](https://javarevisited.blogspot.com/2019/05/python-vs-javascript-which-programming-language-beginners-should-learn.html) - [10門免費線上課程深入學習Python](https://javarevisited.blogspot.com/2018/12/10-free-python-courses-for-programmers.html) - [資料科學與機器學習的 8 個最佳 Python 函式庫](https://javarevisited.blogspot.com/2018/10/top-8-python-libraries-for-data-science-machine-learning.html) - [Python vs Java - 初學者應該學習哪種程式語言？](https://javarevisited.blogspot.com/2018/06/java-vs-python-which-programming-language-to-learn-first.html ) - [5 Python 資料科學與機器學習課程](https://javarevisited.blogspot.com/2018/03/top-5-data-science-and-machine-learning-online-courses-to-learn-online . html) - [完整的 Web 開發者路線圖](https://hackernoon.com/the-2019-web-developer-roadmap-ab89ac3c380e) - [10本針對程式設計師的免費Python程式設計書籍](http://www.java67.com/2017/05/top-7-free-python-programming-books-pdf-online-download.html) - [資料科學的 5 本 Python 書籍](https://javarevisited.blogspot.com/2019/08/top-5-python-books-for-data-science-and-machine-learning.html) 感謝您到目前為止閱讀這篇文章。如果您喜歡這些網站，請與您的朋友和同事分享。如果您有任何問題或回饋，請留言。 一切順利。 **P。 S. -** 如果你此刻只想做一件事來開啟你的 Python 程式設計之旅，那就加入 **[完整的 Python 3 Bootcamp](http://bit.ly/complete-python3-bootcamp ) ** Jose Portilla 在Udemy 上的課程。您將快速學習 Python 並且永遠不會後悔您的決定。 --- 原文出處：https://dev.to/javinpaul/top-5-places-to-learn-python-programming-for-free-m4c
早在 2012 年 10 月，TypeScript 0.8 就發布了。當時我正在開發一個中型 JavaScript 專案。它發布的那天，我閱讀了最初的規範，在玩了大約 10 分鐘後，我確信這將是未來，因此我開始用 TypeScript 重寫我的整個應用程式。相對於標準無型別 JavaScript 的好處是巨大的。 我對 [RawJS](https://www.squaresapp.org/rawjs/) 也有同樣的感覺。 [RawJS 是一個小型函式庫](https://github.com/squaresapp/rawjs)，它使普通 JavaScript 應用程式開發更符合人體工學。它不僅僅是當今最新的 Web 框架，可以與 React、Vue、Svelte 或其他框架競爭。 RawJS 是不同的。 RawJS 直觀地說明了為什麼框架本身的整個前提可能有點誤導。它表明大多數應用程式最好使用普通 JS 並採用某些程式模式。 我知道這是一個非常大膽的聲明。但我懇請您研究一下 RawJS 誕生背後的心態和想法。 ## React 往往會破壞專案的複雜性 我不認為我說 React 太複雜是太過分了。畢竟，Svelte 正是因此而專門建立的。 React 會導致應用程式臃腫。舉個例子——我最近接到了一項任務，負責監督一個 React 應用程式的開發，該應用程式的複雜性已經失控。我最終扔掉了整個應用程式，並使用 RawJS 重建了整個應用程式，使用了一個從未接觸過 RawJS 的團隊，甚至根本沒有做過很多直接的 DOM 操作。幾週之內，團隊就加快了速度，現在該應用程式比以前的 React 應用程式小了約 90%。不，這不是一個錯字。 我們現在已經到了這樣一個階段：React 是「沒有人會因為購買 IBM 而被解僱」的選擇。問題是——人們「應該」因為購買 IBM 而被解僱。這是一個隱喻，指的是那些懶得做充分的需求分析、默認從眾心態、出於恐懼和懶惰而盲目跟隨大多數其他人正在使用的東西的人。 一旦您有幸使用 RawJS 加速的普通 JavaScript 開發應用程式，React 的過度複雜程度就會變得更加清晰。 RawJS 對 props、state、hooks、JSX、從特定基礎強制繼承（React.Component）、虛擬 DOM、自動資料綁定以及 React 所做的一切的必要性提出了質疑。 React 的膨脹及其施加的限制（例如禁止您直接編輯 DOM）都集中在試圖維護其虛擬 DOM 系統的完整性，我認為這是針對特定領域問題的解決方案對於facebook.com，那些精心建置的應用程式根本不具備。 所謂的直接 DOM 操作的效能劣勢被嚴重誇大了。事實上，如果做得正確，直接 DOM 操作通常會提高效能。這是因為您能夠精確控制 DOM 的更新方式。它允許您根據需要使用手術刀更新 DOM 的微小區域。虛擬 DOM 與此相反。它是一個生硬的工具，在大量 DOM 子樹上執行複雜的比較演算法，以便自動計算需要更新的內容。 自動資料綁定和反應性的有用性也被誇大了。假設您的程式碼組織良好，那麼建立您的應用程式以便 DOM 由於資料變更而更新似乎不會比僅建置應用程式以在必要時明確更新 DOM 所需的程式碼少。但與前者的區別在於，它給你強加了一個巨大的難以除錯的黑盒子，並迫使你遵守他們的官僚機構層。除非您組裝了一個精心建置的普通 JS 應用程式（例如使用 RawJS！），否則很難體會到擺脫這種情況的好處。 ## 為什麼沒有人談論匿名控制器類別？ 匿名控制器類別（ACC）是一種需要引起更多關注的模式。它們是將普通 JavaScript 應用程式從雜亂無章轉變為連貫且美觀的關鍵想法之一。 ACC 的基本前提是建立一個與 DOM 中單一元素鬆散連接的物件，並且其垃圾收集生命週期等於所連接元素的生命週期。這是對繼承 HTMLElement 的一個進步，HTMLElement 是另一種選擇（但我不喜歡這種選擇，原因我將在另一篇文章中討論）。 考慮以下程式碼： ``` class SomeComponent { readonly head; constructor() { this.head = document.createElement("div"); this.head.addEventListener("click', () => this.click()); // Probably do some other stuff to this.head } private handleClick() { alert("Clicked!") } } ``` ACC 是建立單一 .head 元素（可能還有其他巢狀元素）、連接事件偵聽器、分配樣式等的類別。它們具有通常是事件處理程序或其他輔助方法的方法。然後實例化該元件，並將元件的 .head 元素加入 DOM： ``` const component = new SomeComponent(); document.body.append(component.head); ``` 該類別被視為“匿名”，因為一旦元件實例附加到 DOM，您就可以丟棄該實例。一旦元素從 DOM 中刪除並被垃圾回收，該類別的實例就會被垃圾回收，因為 DOM 是唯一擁有對它的引用的東西。例如： ``` class SomeComponent { readonly head; constructor() { this.head = document.createElement("div"); this.head.addEventListener("click', () => this.remove()); // Probably do some other stuff to this.head } private remove() { // Remove the component's .head element from the DOM, // which will by extension garbage collect this instance of // SomeComponent. this.head.remove(); } } ``` ACC 的優點在於它們基本上不會施加任何限制。他們可以繼承任何東西（或什麼都不繼承）。它們只是一個想法——您可以將它們塑造成您喜歡的樣子。 當然，在許多情況下您可能想要取得與特定元素關聯的 ACC。例如，想像一下迭代 this.head 元素的祖先元素，並取得與其關聯的 ACC 以呼叫某些公共方法。有一個名為 [HatJS](https://github.com/squaresapp/hatjs) 的輕量級程式庫，旨在改善使用 ACC 的人體工學。 **編輯：我是 HatJS 的作者。 「匿名控制器類別」是我發明的一個術語。這是在實驗過程中出現的模式，儘管我懷疑我是第一個發現它的人，因為這個概念非常明顯。就像 JSON 之前有名字一樣。您不需要將 HatJS 與 RawJS 一起使用。許多人正在建立普通的JavaScript 應用程式（或者對於迂腐的人來說是「普通的TypeScript 應用程式」），並且僅僅透過建立繼承自HTMLElement 的自訂元素，有效地將元素和控制器合併到同一個實體中，就取得了巨大的成功。我已經用這種方法建置了一些應用程式，並認為 ACC 更好，原因我會在以後的文章中介紹。** ## 改進 document.createElement() 具有令人驚訝的強大影響 儘管本文試圖為直接使用 DOM API 提供最有力的案例，但這些 API 絕對失敗的一個領域是使用屬性、樣式和事件附件來建立複雜的 DOM 層次結構。 DOM API 的這一部分非常冗長，如果沒有一些外部幫助，您的程式碼將比所需的長度長約 10 倍。這就是 RawJS 的用武之地。 RawJS 的設計正是為了一個目的。它使 document.createElement() 的人體工學性能提高了 10 倍。呼叫函數並取得 HTMLElement 實例的層次結構。它沒有任何其他作用。沒有奇怪的背景魔法。您可能不認為這聽起來很有影響力。但你的評估是錯的。 事實證明，在過去 15 年圍繞框架模式的構思中，我們不需要虛擬 DOM、反應性、資料綁定預編譯器或任何其他野生科學專案。我們需要匿名控制器類別模式和更好的方法來建立 HTMLElement 實例。 使用這兩種技術，我可以肯定地說，我永遠不會再故意使用 React 或任何其他競爭框架。這類框架根本無法提供超出 JavaScript 已經可以完成的功能，無法保證它們所施加的巨大權重和官僚作風。 那麼 RawJS 程式碼是什麼樣的呢？對 RawJS 建立者函數的呼叫遵循以下形式： ``` const htmlElement = raw.div(...parameters); ``` 強大的人體工學來自於可接受的參數的廣度（在 RawJS 中輸入為“Raw.Param”）。 參數可以是字串、數字、布林值、陣列、函數、DOM 節點實例、對 `raw.on("event", ...)` 的呼叫（建立可移植事件附件）以及幾乎任何其他內容。 RawJS 總是做你所期望的。 我不會重申使用 RawJS 來建立層次結構可以做的很棒的事情。快速入門對此進行了詳細介紹。 主要想法是，因為幾乎任何東西都可以是 Raw.Param，所以您可以建立迷你函數庫來產生 Raw.Params 列表並返回它們。由此可實現的程式碼重用水準是前所未有的。再說一次，除非你真正使用過它，否則很難欣賞它。我討厭與 LISP / 閉包進行比較，但還是有相似之處。 ## 我見過的最好的 CSS-in-JS 解決方案 如果不建構對應的 CSS，HTML 元素層次結建置構器有什麼用呢？ RawJS 還擁有一流的 CSS-in-JS 解決方案，它可以完成我在任何其他解決方案中未見過的功能。例如，RawJS 完全支援僅限於特定元素的 CSS。 ``` const anchor = raw.a( // This constructs CSS within a global style sheet, // and the rules below will be scoped to the containing // anchor element. raw.css( ":focus", { outline: 0 }, ":visited": { color: "red" } ), raw.text("Hyperlink!") ); ``` 使用 RawJS 的 CSS-in-JS 解決方案還可以做很多其他事情。本文並不是 RawJS 教程，但如果您正在尋找此類內容，這裡有一個快速入門和一個演示應用程式。 ## 使用 DOM 作為狀態管理器實際上很好。 我們收到的一個常見的反對意見是，您將應用程式狀態儲存在哪裡？答案是使用 DOM 作為狀態管理器。 在你對此感到不寒而慄之前，請記住tailwind 如何率先提出在HTML 元素上刪除數百萬個類名的想法，有效地重新建立內聯CSS 的等價物，多年來，內聯CSS 一直被認為是一種反模式，但開發人員堅持它其實是很好，現在大家都在做嗎？同樣的想法也適用於使用 DOM 作為狀態管理器。 如今，每個人決定建立應用程式的方式都是從某種被視為「真相來源」的資料結構開始，然後您需要以某種方式將其笨拙地投影到 UI 中。以另一種方式做這件事被認為是“天真的”，甚至是反模式。但是，我想建議擁有兩個需要保持同步的獨立表示本身就是一種反模式。 嘗試使用某種框架以宣告方式將資料對應到 DOM 會導致複雜度大幅增加。這種技術的問題在於，對同一件事物有兩種不同的表示自然會比假設的只有一種這種表示的替代技術更加臃腫。 事實證明，如果您讓 ACC 接受輸入資料以便自行渲染，效果實際上會好得多。然後，您可以使用某種保存函數來檢查 DOM 的狀態以產生可保存的資料塊。這樣，您的事實來源不必與 DOM 同步，因為您的事實來源就是 DOM。 檢查以下程式碼範例： ``` class FormComponent { readonly head; private readonly firstNameInput; private readonly lastNameInput; constructor(firstName: string, lastName: string) { this.head = raw.form( this.firstNameInput = raw.input({ type: "text", value: firstName }), this.lastNameInput = raw.input({ type: "text", value: lastName }), raw.button( raw.text("Save"), raw.on("submit", () => this.save()) ) ); } private save() { const firstName = this.firstNameInput.value; const lastName = this.lastNameInput.value; SomeDatabaseSomewhere.save({ firstName, lastName }); alert("Saved!"); } } ``` 看？您只需將值儲存在 DOM 中即可。在本例中，我們使用文字輸入的值，但您也可以將資料儲存為 HTML 屬性、類別名稱或任何有意義的內容。 當然，在某些情況下，您需要儲存無法分解為字串、數字和布林值的狀態。我還看到一些狀態儲存在 ACC 內的屬性中的情況。做任何對你有用的事。 ## 元件之間的通信 在某些情況下，您可能需要更新多個元件以回應一項操作，或更簡單地在 ACC 之間發送訊息。 HatJS 可以幫助解決這個問題。 請記住，ACC 建立了一種隱藏的控制器層次結構。您擁有典型的 DOM 元素層次結構，但只有某些元素是 ACC 的頭元素。因此，這將建立自己的 ACC 層次結構，它是整個 DOM 元素層次結構的嚴格子集。 [HatJS](https://github.com/squaresapp/hatjs) 具有遍歷 ACC 層次結構的功能，並快速擷取可能位於或不位於元素後面的 ACC 實例。 ``` class ParentComponent { readonly head; constructor() { this.head = raw.div( new ChildComponent().head ); // Call Hat.wear() to define the object as a "hat" // and make it discoverable by HatJS Hat.wear(this); } callAlert() { alert("Hello!"); } } class ChildComponent { readonly head; constructor() { this.head = raw.div( raw.on("click", () => { // Hat.over finds the "Hat" (or the ACC) that exists // above the specified element in the hierarchy. // And passing ParentComponent gives you type-safe // tells HatJS what kind of component you're looking // for, and also gives you type-safe access to it. Hat.over(this, ParentComponent).callAlert() }) ); } } ``` 除了「Hat.over()」之外，還有「Hat.under()」、「Hat.nearest()」等方法來尋找 DOM 相對中可能存在或不存在的特定類型的其他 ACC到指定的元素。 ## 興奮起來！ 那麼，我是否說服您啟動您的 React 應用程式並使用 RawJS 來重建您一生的工作？如果您想開始使用，請造訪 [這裡是 RawJS 網站](https://www.squaresapp.org/rawjs/)。 RawJS 的儲存庫是[此處](https://github.com/squaresapp/rawjs)，HatJS 的儲存庫是[此處](https://github.com/squaresapp/hatjs) --- 原文出處：https://dev.to/paulgordon/after-using-rawjs-im-never-touching-react-again-or-any-framework-vanilla-javascript-is-the-future-3ac1
React 是一個用於建立使用者介面的流行 JavaScript 函式庫，其生態系統不斷發展。為了幫助您隨時了解 React 及其生態系統的最新發展，我整理了 2024 年一些必讀文章的清單。這些文章涵蓋了廣泛的主題，從 React 最佳實踐到性能對 React 生態系統的優化等等。無論您是初學者還是經驗豐富的 React 開發人員，這些資源都可以幫助您更深入地了解 React 及其生態系統。名單如下：✨ --- ### 🚀 React 渲染互動指南 [🔗 連結](https://ui.dev/why-react-renders) 🔖 難度等級 - 中級  本文深入探討了 React 中渲染的概念，解釋了 React 何時以及如何更新視圖。它提供了一個簡單的心理模型來理解 React 的工作原理，並旨在澄清有關 React 渲染的常見誤解。 --- ### 🚀 新文件中的 React JS 最佳實踐 [🔗連結](https://sebastiancarlos.com/react-js-best-practices-from-the-new-docs-1c65570e785d) 🔖 難度等級 - 中級、專家  本文介紹了基於新 React 文件的 React 開發最佳實務。它旨在按順序閱讀，涵蓋了 React 的各個方面，適合有經驗和中級的 React 開發人員。 --- ### 🚀 索引作為鍵是一種反模式 [🔗 連結](https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318) 🔖 難度等級 - 初級 本文討論了在 React 中使用索引作為鍵以及為什麼它是一種反模式。它解釋了使用索引作為鍵在更新或刪除清單中的專案時如何導致問題，並提供了為清單專案分配鍵的替代解決方案。 --- ### 🚀 治癒 React useState Hell 的方法？ [🔗連結](https://www.builder.io/blog/use-reducer) 🔖 難度等級 - 中級  本文討論了 React 中使用 useState 鉤子管理狀態的挑戰，並建議使用 useReducer 鉤子作為解決方案。它強調了 useState 在管理複雜狀態方面的局限性，並提供了使用 useReducer 來解決這些限制的範例。 --- ### 🚀 使用 React 設定 ESLint [🔗 連結](https://z1.digital/blog/eslint-guide-how-to-use-it-with-confidence) 🔖 難度等級 - 中級  本文提供了有關在 React 中使用 ESLint 的全面指南，深入了解如何在 React 專案中有效地設定和使用 ESLint。它涵蓋了 React 開發中 ESLint 的最佳實踐和常見配置。 --- ### 🚀 React 18 中的自動批次：你應該知道什麼 [🔗連結](https://blog.bitsrc.io/automatic-batching-in-react-18-what-you-should-know-d50141dc096e) 🔖 難度等級 - 中級 本文介紹了 React 18 中自動批次的新功能，該功能預設批次從任何位置呼叫的狀態更新。它提供了一個簡單的範例來了解自動批次的工作原理以及它如何提高 React 應用程式的效能。本文的難度為中等。 --- ### 🚀 進階 React 元件組合指南 [🔗連結](https://frontendmastery.com/posts/advanced-react-component-composition-guide/) 🔖 難度等級 - 中級  本文是高階 React 元件組合的綜合指南，涵蓋了複雜 React 應用程式中組合元件和管理狀態的各種技術。它提供了建立可重複使用和可維護的 React 元件的實際範例和最佳實踐。本文的難度等級為中級到專家級。 --- ### 🚀 奇妙的閉包 [🔗 連結](https://www.developerway.com/posts/fantastic-closures) 🔖 難度等級 - 中級、專家  本文解釋了 JavaScript 中閉包的概念，以及如何在 React 中使用閉包來管理狀態和處理事件。它提供了使用閉包建立可重複使用元件的範例，並討論了在 React 中使用閉包的優點和缺點。 --- ### 🚀 帶有 tRPC 和 React 的全端 TypeScript [🔗連結](https://www.robinwieruch.de/react-trpc/) 🔖 難度等級 - 中級  本文提供了在 React/TypeScript 應用程式中實作 tRPC（用於建立 API 的 TypeScript 框架）的指南。它涵蓋了 tRPC 客戶端和伺服器相依性的安裝，並解釋了前端專案的具體實作。 --- ### 🚀 重新思考 React 最佳實踐 [🔗連結](https://frontendmastery.com/posts/rethinking-react-best-practices/) 🔖 難度等級 - 中級、專家  本文討論了 React 最佳實踐的演變，特別是在 React 18 和 React Server Components (RSC) 的背景下。它探討了 React 的核心約束、過去的管理方法以及 Remix 和 Next.js 等 React 框架中不斷變化的思維模型。 --- ### 🚀 反應性能 [🔗連結](https://www.causal.app/blog/react-perf) 🔖 難度等級 - 中級、專家  本文討論了提高 React 應用程式效能的各種技術，包括優化渲染、減小套件大小以及使用 React.memo 和 useMemo 掛鉤。它提供了提高 React 應用程式效能的實際範例和最佳實踐。 --- ### 🚀 下一張圖片的事實 [🔗 連結](https://dev.to/alex_barashkov/things-you-might-not-know-about-next-image-5go8) 🔖 難度等級 - 中級  本文介紹了有關 Next.js Image 元件的各種見解和詳細訊息，涵蓋了開發人員可能不知道的方面。它提供了有關使用 Next.js Image 及其功能的實用訊息，對於使用 Next.js 的開發人員非常有用。 --- ### 🚀 建立聊天：使用 React、WebSockets 和 Web Push 的瀏覽器通知 [🔗連結](https://dev.to/novu/building-a-chat-browser-notifications-with-react-websockets-and-web-push-1h1j) 🔖 難度等級 - 中級  本文提供了使用 React、WebSockets 和 Web Push 建立帶有瀏覽器通知的聊天應用程式的綜合指南。它提供了對這些技術整合的深入見解，並提供了在 Web 應用程式中實現聊天和通知的實用方法。 --- ### 🚀 如何使用 React 和 OpenAI API 建置和部署 ChatGPT 克隆應用程式 [🔗連結](https://kinsta.com/blog/chatgpt-clone/) 🔖 難度等級 - 中級  本文提供了使用 React 和 OpenAI API 建置和部署 ChatGPT 克隆應用程式的逐步指南。它涵蓋了依賴項的安裝、建置前端以及將應用程式部署到 Kinsta 的應用程式託管平台。 --- ### 🚀 React 批評的歷史參考 [🔗連結](https://www.zachleat.com/web/react-criticism/) 🔖 難度等級 - 中級、專家 本文提供了對 React 的批評的歷史參考，涵蓋了開發人員和專家多年來提出的各種擔憂和批評。它探討了 React 的局限性和缺點，並提供了有關 React 作為框架的演變的見解。 --- 總而言之，精選的「2024 年關於 React 的 15 篇最佳文章」可以為渴望了解不斷變化的 React 開發格局的開發人員提供全面的指南。這些文章根據其相關性、深度和見解而精心挑選，提供了今年掌握 React 的路線圖。透過深入研究這些資源，開發人員可以保持在 React 生態系統的最前沿，利用建立尖端 Web 應用程式所需的知識和技能來增強自己的能力。 --- ## 關於我 嘿，我是 Dhruv Kothari 👋 一位全端 Web 開發人員和 UI/UX 愛好者，目前在 Upraised 擔任軟體工程師。我也是一名有競爭力的程式設計師、50 歲以下的立方愛好者、集郵家和錢幣學家。您可以透過 [GitHub](https://github.com/kothariji) 和 [Twitter](https://twitter.com/_kothariji) 與我聯繫  --- 原文出處：https://dev.to/kothariji/the-ultimate-react-reading-list-top-15-must-read-articles-in-2024-2c3
看更多文章： 1. [使用 gRPC 和微服務建立可擴展的通知系統](https://dev.to/suprsend/building-a-scalable-notification-service-with-grpc-and-microservices-l6d) 2. [在 React 網站中新增通知來源](https://dev.to/suprsend/adding-a-notification-feed-in-react-websites-4oa0) 4. [2023 年現代應用通知基礎設施完整指南](https://dev.to/suprsend/a-complete-guide-on-notification-infrastruct-for-modern-applications-in-2023-13b9) --- 應用程式通常可以分為兩種類型的效能瓶頸： 1. **I/O 限制：** 這些應用程式將大部分時間花在處理輸入和輸出上。 2. **CPU 限制：** 這些應用程式將大部分時間花在運算任務上。 現在，這些分類如何轉化為前端應用程式的上下文，特別是 React 應用程式？ **React 中的 I/O 效能挑戰** 當涉及到 React 應用程式時，經常會出現 I/O 效能方面的問題，主要與非同步 HTTP 呼叫相關。無效地管理這些網路請求可能會導致應用程式速度減慢。雖然這篇文章主要關注 CPU 效能，但有必要簡要介紹一下可以找到 I/O 限制問題解決方案的關鍵領域： - 盡可能實施延遲載入。 - 在初始載入資產和後端請求時請務必小心。 - 減少載入高度靜態元素的頻率（例如，選擇選項、配置）。 - 去抖特定請求的次數。 - 使用 Promise.all 等技術盡可能並行化請求。 - 透過優化資料庫存取等措施來提高關鍵後端端點的效率。 **React 中的 CPU 效能挑戰** 這篇文章的主旨是解決 React 中的 CPU 效能挑戰。在深入研究細節之前，讓我們先對效能建立一個具體的定義： - 瀏覽器應用程式主要作為單執行緒程式執行。 - 腳本任務，例如 JavaScript 執行、DOM 渲染和事件處理，都發生在同一個執行緒。 - 緩慢的 JavaScript 模組可能會阻塞主執行緒。 - 如果主執行緒被阻塞，使用者介面將變得無回應，導致每秒幀數 (fps) 下降。 - 響應式 UI 的目標是至少 30 fps，理想情況下達到 60 fps，這意味著每幀的計算時間應在 30 毫秒或更短的時間內。 在 React 的背景下，這個問題變得至關重要。當觸發 React 元件更新時，整個子樹必須在 30 毫秒內渲染完畢。對於複雜而冗長的元件結構（例如表、樹和列表），這變得尤其具有挑戰性，可能需要大規模重新渲染。 **反應渲染和提交階段** 從高層次來看，React 分為兩個不同的階段： **渲染階段：** - 當元件更新時啟動，由 props 或 hooks 的變更觸發。 - React 遍歷元件子樹，渲染每個子樹並計算虛擬 DOM (VDOM) 子樹。 - 只有受更新影響的「髒」子樹需要重新計算；更新元件的父元件可能不需要重新渲染。 - 此階段的效率與每個子元件的大小和計算成本成正比。 - React.memo 可用於提供更有效率渲染流程的提示。 **提交階段：** - 渲染階段產生整個 UI 的新虛擬 DOM。 - 在提交階段，React 將新樹與前一棵樹進行比較（VDOM 比較）。 - React 計算反映新 VDOM 樹所需的最小 DOM 突變。 - 套用 DOM 突變，更新 UI。 - 預設情況下，此階段本質上是高效的。 - 整個過程必須在 30 或 16 毫秒內完成（分別針對 30 fps 和 60 fps），UI 才會被視為回應。工作負載與應用程式的大小成正比。 後續探索將聚焦在提升Render階段的效率。在深入研究優化技術之前，了解如何測量和辨識應用程式中的緩慢元件至關重要。 **測量** 我經常依賴的工具包括： 1. **Chrome 開發工具的效能標籤** 2. **React Dev Tool 的效能標籤** **Chrome 開發工具的效能標籤** 該工具作為適用於任何瀏覽器應用程式的綜合資源而脫穎而出。它提供對每秒幀數的洞察、捕獲堆疊追蹤、辨識程式碼的慢速或熱點部分等等。主要使用者介面由火焰圖表示。 若要深入了解套用於 React 的 Chrome 效能選項卡，請參閱此[文件](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance)。 **React 開發工具的效能標籤** 若要利用此工具，您需要在瀏覽器中安裝 React Dev Tool 擴充功能。它專門針對 React 客製化了 Chrome 開發工具效能標籤中的資訊。透過火焰圖，您可以觀察不同的提交階段以及在對應渲染階段執行的 JavaScript 程式碼。 該工具有助於輕鬆確定： - 當元件進行重新渲染時。 - 哪些道具改變了。 - 哪些鉤子發生了變化，包括狀態、上下文等等。有關更多詳細訊息，請參閱[介紹性帖子](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)。 **測量方法** 這是我在評估前端應用程式時更喜歡的方法： 1. **確定問題：** - 找出導致 UI 回應問題的頁面互動。 2. **建立一個假設：** - （可選）產生有關問題的潛在位置的想法。 3. **測量：** - 透過測量每秒幀數 (fps) 等基本指標來驗證問題。 4. **測量（第二部分）：** - 辨識有問題的程式碼部分； （可選）驗證您的假設。 5. **建立解決方案：** - 根據收集到的見解實施解決方案。 6. **測量解決方案：** - 透過檢查關鍵指標來驗證實施的解決方案是否解決或緩解了問題。 在沒有適當衡量的情況下進行最佳化會使努力實際上變得無效。雖然有些問題可能很明顯，但大多數問題都需要徹底的測量，從而構成性能增強過程的基石。 此外，測量可讓您向上傳達成果，向使用者、利害關係人和您的領導層通報應用程式特定領域內實現的效能改進（以百分比增益表示）。 **React 應用程式中 CPU 限制問題的通用解決方案** 現在有了測量結果並了解了問題領域，讓我們深入研究潛在的解決方案。優化 React 效能圍繞著改進渲染的元件和渲染的元件。 許多效能問題也源自於反模式。消除這些反模式（例如避免渲染方法中的內聯函數定義）有助於提高渲染時間。事實上，解決不良模式可以降低複雜性並同時提高效能。 **🤔 改進元件渲染** 辨識 React 應用程式中的緩慢元件通常指的是難以渲染或單一頁面上實例數量過多的特定元件。多種原因可能導致他們行動遲緩： - 元件內的阻塞計算。 - 渲染大型元件樹。 - 使用昂貴或低效率的函式庫。 大多數這些問題都歸結為提高元件渲染的速度。有時，關鍵元件不能依賴過於複雜的函式庫，需要回歸基本原則並實施更簡單的替代方案。 例如，我在複雜表格中每行的多個單元格中過度使用 Formik 時遇到了此類挑戰。雖然提高單一元件的效率還有很長的路要走，但注意力最終必須轉移到正在渲染的元件上。 **🧙 改進哪些元件渲染** 這方面提供了兩大類改進： 1. **虛擬化：** - 僅渲染視窗中可見的元件。例如，僅呈現使用者可以看到的表格行或清單專案。事實證明，這種方法對於複雜的 UI 是有益的，雖然可以在不解決「內容」步驟的情況下應用它，但建議這樣做。現代函式庫通常為虛擬化表和清單提供強大的支持，例如“react-virtualized”。虛擬化減少了 React 需要在給定幀中渲染的元件數量。 2. **道具優化：** - React 的目標是使元件類似於純函數，但可能會嘗試渲染不必要的次數。 **反應.備忘錄：** - React 中的大多陣列件都可以被記憶，確保使用相同的 props，元件返回相同的樹（儘管鉤子、狀態和上下文仍然受到尊重）。如果它們的 props 保持不變，則利用 `React.memo` 通知 React 跳過重新渲染這些已記憶的元件。 ``` import React from 'react'; const MyComponent = React.memo((props) => { // Component logic here }); export default MyComponent; ``` **假道具更改：useCallback：** - 解決虛假道具更改問題涉及道具內容保持不變但引用發生變化的情況。一個典型的例子是事件處理程序。 ``` import React, { useCallback } from 'react'; const MyComponent = () => { const onChange = useCallback((e) => console.log(e), []); return <input onChange={onChange} />; }; export default MyComponent; ``` **假道具更改：useMemo：** - 在將複雜資料結構作為 props 傳遞之前，在沒有適當記憶的情況下建立複雜的資料結構時，也會出現類似的挑戰。利用「useMemo」可確保僅在依賴項發生變更時才重新計算行，從而提高效率。 ``` import React, { useMemo } from 'react'; const MyComponent = ({ data, deps }) => { const rows = useMemo(() => data.filter(bySearchCriteria).sort(bySortOrder), [deps]); return <Table data={rows} />; }; export default MyComponent; ``` 雖然您可以靈活地自訂「React.memo」如何比較目前與先前的道具，但保持快速運算至關重要，因為它是渲染階段不可或缺的一部分。避免在每次渲染期間過於複雜的深度比較。 ## 現在看起來怎麼樣？ ### 道具已更改 它在 React 開發工具中的樣子：  他們真的嗎？它們是假的道具更改嗎？使用`useCallback`和`useMemo`。 ### 父渲染 它在 React 開發工具中的樣子：  使用“React.memo”來記住您的純元件。 ### 掛鉤已更改（狀態、上下文） 它在 React 開發工具中的樣子：  這裡沒有什麼太明顯的事情要做。嘗試驗證更改的鉤子是否有意義。也許一個糟糕的上下文提供者正在以與假道具更改可能出現的方式相同的方式偽造更改。 --- > 與此類似，我個人在 Slack 上經營著一個由開發人員主導的社群。我們在其中討論這些類型的實現、整合、一些真相炸彈、奇怪的聊天、虛擬會議以及一切有助於開發人員保持理智的事情；）畢竟，太多的知識也可能是危險的。 > 我邀請您加入我們的免費社區，參與討論，並分享您的驚人經驗和專業知識。您可以填寫此表格，Slack 邀請將在幾天後收到您的電子郵件。我們擁有來自一些偉大公司（Atlassian、Scaler、Cisco、IBM 等）的出色人員，您一定不想錯過與他們的互動。 [邀請表](https://forms.gle/VzA3ST8tCFrxt39U9) --- 您可能想要查看整合通知基礎架構的無縫方式。 https://github.com/suprsend/suprsend-go --- 原文出處：https://dev.to/nikl/react-is-slow-what-to-do-now-369g
## 介紹 在 Javascript 中，函數就是值（一等公民）。這意味著它們可以分配給變數和/或作為值傳遞。 ``` let random = function(){ return Math.random() } let giveMeRandom = random // assigning random to a variable ``` 這項知識使我們能夠用這種語言編寫函數式程式設計。在函數式程式設計中，我們大量使用高階函數。 ## 高階函數？ 高階函數是將其他函數作為參數*或*返回函數作為結果的函數。 以其他函數作為參數通常稱為“回調函數”，因為它是由高階函數回調的。這是 Javascript 常用的概念。 例如，陣列上的 *map* 函數是一個高階函數。 *map* 函數接受一個函數作為參數。 ``` const double = n => n * 2 [1, 2, 3, 4].map(double) // [ 2, 4, 6, 8 ] ``` 或者，使用匿名函數： ``` [1, 2, 3, 4].map(function(n){ return n * 2 }) // [ 2, 4, 6, 8 ] ``` *map* 函數是該語言內建的眾多高階函數之一。 *sort*、*reduce*、*filter*、*forEach* 是該語言內建的高階函數的其他範例。 高階函數可讓您編寫更簡單、更優雅的程式碼。讓我們看看如果沒有這樣的抽象，上面的程式碼會是什麼樣子。讓我們用循環取代 *map* 函數： ``` let array = [1, 2, 3, 4] let newArray = [] for(let i = 0; n < array.length; i++) { newArray[i] = array[i] * 2 } newArray // [ 2, 4, 6, 8 ] ``` ## 組合的力量 盡可能使用高階函數的一大優點是組合。 我們可以建立更小的函數，只處理一個邏輯。然後，我們透過使用不同的較小函數來組合更複雜的函數。 這種技術減少了錯誤並使我們的程式碼更易於閱讀和理解。 透過學習使用高階函數，您可以開始編寫更好的程式碼。 ## 例子 讓我們試著舉個例子。假設我們有一個教室的成績清單。我們的教室有 5 個女孩，5 個男孩，每個人的成績都在 0 到 20 之間。 ``` var grades = [ {name: 'John', grade: 8, sex: 'M'}, {name: 'Sarah', grade: 12, sex: 'F'}, {name: 'Bob', grade: 16, sex: 'M'}, {name: 'Johnny', grade: 2, sex: 'M'}, {name: 'Ethan', grade: 4, sex: 'M'}, {name: 'Paula', grade: 18, sex: 'F'}, {name: 'Donald', grade: 5, sex: 'M'}, {name: 'Jennifer', grade: 13, sex: 'F'}, {name: 'Courtney', grade: 15, sex: 'F'}, {name: 'Jane', grade: 9, sex: 'F'} ] ``` 我想了解一些關於此事的事情： - 該班的平均成績 - 男生的平均成績 - 女孩的平均成績 - 男孩中音調較高的 - 女孩中的最高調 我們將嘗試使用高階函數來獲得簡單易讀的程式。讓我們從編寫可以協同工作的簡單函數開始： ``` let isBoy = student => student.sex === 'M' let isGirl = student => student.sex === 'F' let getBoys = grades => ( grades.filter(isBoy) ) let getGirls = grades => ( grades.filter(isGirl) ) let average = grades => ( grades.reduce((acc, curr) => ( acc + curr.grade ), 0) / grades.length ) let maxGrade = grades => ( Math.max(...grades.map(student => student.grade)) ) let minGrade = grades => ( Math.min(...grades.map(student => student.grade)) ) ``` 我寫了7個函數，每個函數都有一份工作，而且只有一份工作。 *isBoy* 和 *isGirl* 負責檢查一名學生是男孩還是女孩。 *getBoys* 和 *getGirls* 負責將所有男孩或女孩帶出教室。 *maxGrade* 和 *minGrade* 負責取得某些資料中的最高和最低等級。 最後，*average*負責計算一些資料的平均等級。 請注意，*average* 函數還不知道它要處理的資料類型。這就是構圖之美。我們可以在不同的地方重複使用我們的程式碼。我可以將此功能與其他功能一起使用。 現在，我們已經有了編寫高階函數所需的東西： ``` let classroomAverage = average(grades) // 10.2 let boysAverage = average(getBoys(grades)) // 7 let girlsAverage = average(getGirls(grades)) // 13.4 let highestGrade = maxGrade(grades) // 18 let lowestGrade = minGrade(grades) // 2 let highestBoysGrade = maxGrade(getBoys(grades)) // 16 let lowestBoysGrade = minGrade(getBoys(grades)) // 2 let highestGirlsGrade = maxGrade(getGirls(grades)) // 18 let lowestGirlsGrade = minGrade(getGirls(grades)) // 9 ``` 請注意，外部函數（例如*average*）始終將內部函數的輸出作為輸入。因此，組合的唯一條件是確保輸出和輸入匹配。 而且因為每個函數只負責一件事，所以它使我們的程式碼更容易除錯和測試。 --- 原文出處：https://dev.to/damcosset/higher-order-functions-in-javascript-4j8b
 JavaScript 以其廣泛的採用和多功能性，已成為現代 Web 開發的基石。隨著您深入研究 JavaScript 開發，理解和利用模式變得至關重要。在本文中，我們將踏上揭開 JavaScript 模式神秘面紗的旅程，並探索它們如何增強您的程式設計實踐。 ## 先決條件 要理解本文中討論的概念和技術，您需要了解 JavaScript 的基礎知識。熟悉變數、函數、資料類型、物件導向程式設計等概念至關重要。 在繼續之前，讓我們花點時間了解 JavaScript 作為程式語言的重要性。 ### JavaScript 作為程式語言 JavaScript 通常被稱為“網路語言”，是一種動態的高階程式語言。它主要用於 Web 瀏覽器中的客戶端腳本編寫，但隨著 Node.js 的出現，它也在伺服器端獲得了關注。 JavaScript 的主要功能包括操作 DOM、處理事件、為網頁提供互動性等的能力。 話雖這麼說，讓我們簡單討論一下 JavaScript 中模式的重要性和用途。 ### JavaScript 開發中模式的重要性 JavaScript 中的模式可以作為軟體開發過程中遇到的重複問題的經過驗證的解決方案。它們提供結構、改進程式碼組織、增強可維護性並促進可重複使用性。透過理解和應用模式，開發人員可以編寫更清晰、更有效率的程式碼並有效應對複雜的挑戰。 ### 理解 JavaScript 模式的目的 理解 JavaScript 模式不僅僅是記住文法或遵循最佳實踐。它使開發人員能夠批判性地思考軟體設計、選擇適當的解決方案並建立可擴展的應用程式。透過掌握 JavaScript 模式，您可以深入了解該語言及其生態系統，從而能夠編寫健全且可維護的程式碼。 現在我們知道了 JavaScript 模式的重要性和用途，讓我們深入研究 JS 設計模式的基礎知識。 ## 設計模式的基礎知識 在本節中，我們為理解 JavaScript 開發背景下的設計模式奠定了基礎。 ###設計模式的定義與特點 設計模式是可重複使用的模板，封裝了解決重複出現的軟體設計問題的最佳實踐。它們提供了一種結構化的方法來設計軟體系統，並促進模組化、靈活和可維護的程式碼。設計模式的共同特徵包括其目的、結構、參與者和協作。 ###設計模式的類型 設計模式可分為三種主要類型： - 創意 - 結構性 - 行為的 了解這些類別有助於確定給定問題的適當模式。 - **創作模式** 建立模式專注於物件建立機制，提供以靈活且受控的方式實例化物件的方法。 JavaScript 中一些常用的建立模式包括： - 辛格頓 - 工廠 - 建構函數 - 原型 - 建造者 - 模組 **單例模式** 單例模式確保一個類別只有一個實例，並提供對其的全域存取點。當您想要限制類別的實例數量並確保在整個應用程式中可以存取單一共用實例時，此模式非常有用。 ``` // Implementation example of the Singleton Pattern class Singleton { constructor() { if (!Singleton.instance) { // Initialize the instance Singleton.instance = this; } return Singleton.instance; } } const instance1 = new Singleton(); const instance2 = new Singleton(); console.log(instance1 === instance2); // Output: true ``` 在此範例中，Singleton 類別有一個建構函數，用於檢查該類別的實例是否已存在。如果實例不存在（“!Singleton.instance”條件），它將透過將其指派給「Singleton.instance」來初始化該實例。這確保了對建構函數的後續呼叫將傳回相同的實例。 當使用新的 Singleton() 語法建立實例 1 和實例 2 時，這兩個變數都會引用 Singleton 類別的同一個實例。因此，當使用嚴格相等運算子比較實例 1 === 實例 2 時，其計算結果為 true。 **工廠模式** 工廠模式提供了一種建立物件而無需指定其特定類別的方法。它將物件建立邏輯封裝在一個單獨的工廠方法中，允許建立者和建立的物件之間的靈活性和解耦。 ``` // Implementation example of the Factory Pattern class Car { constructor(make, model) { this.make = make; this.model = model; } } class CarFactory { createCar(make, model) { return new Car(make, model); } } const factory = new CarFactory(); const myCar = factory.createCar("Tope", "Model 1"); ``` 在此範例中，使用 new CarFactory() 建立了一個 CarFactory 實例，然後使用參數「Tope」和「Model 1」在工廠上呼叫「createCar」方法。這將建立一個新的 Car 物件，其品牌為“Tope”，型號為“Model 1”，並分配給 `myCar` 變數。 **建構函式模式** 建構函式模式使用“new”關鍵字從建構函式建立物件。它允許您在建構函數中定義和初始化物件屬性。 ``` // Implementation example of the Constructor Pattern function Person(name, age) { this.name = name; this.age = age; } const tope = new Person("Tope", 24); ``` 上面的程式碼定義了一個名為 Person 的建構函數，它帶有兩個參數：姓名和年齡。在函數內部，使用 this 關鍵字將名稱和年齡值指派給新建立的物件的對應屬性。 稍後，透過使用參數“Tope”和 24 呼叫 Person 函數來建立 Person 物件的新實例。這將建立一個新物件，其 name 屬性設為“Tope”，age 屬性設為 24，然後指派給變數top。這段程式碼的輸出是 Tope 持有一個物件，代表一個名為「Tope」、年齡為 24 歲的人。 **原型模式** JavaScript 中的原型模式專注於透過複製或擴展現有物件作為原型來建立物件。它允許我們建立新實例而無需明確定義它們的類別。在此模式中，物件充當建立新物件的原型，從而實現繼承以及在多個物件之間共享屬性和方法。 ``` // Prototype object const carPrototype = { wheels: 4, startEngine() { console.log("Engine started."); }, stopEngine() { console.log("Engine stopped."); } }; // Create new car instance using the prototype const car1 = Object.create(carPrototype); car1.make = "Toyota"; car1.model = "Camry"; // Create another car instance using the same prototype const car2 = Object.create(carPrototype); car2.make = "Honda"; car2.model = "Accord"; car1.startEngine(); // Output: "Engine started." car2.stopEngine(); // Output: "Engine stopped." ``` 在此範例中，汽車實例 car1 和 car2 是使用原型物件 carPrototype 建立的。 car1 的品牌為“Toyota”，型號為“Camry”，而 car2 的品牌為“Honda”，型號為“Accord”。當呼叫 `car1.startEngine()` 時，輸出“Engine started.”，當呼叫 `car2.stopEngine()` 時，輸出“Engine waiting.”。這示範如何利用原型物件在多個實例之間共用屬性和方法。 **建造者模式** 在建構器模式中，建構器類別或物件負責建構最終物件。它提供了一組方法來配置和設定正在建置的物件的屬性。建置過程通常涉及按特定順序呼叫這些方法來逐步建立物件。 ``` class CarBuilder { constructor() { this.car = new Car(); } setMake(make) { this.car.make = make; return this; } setModel(model) { this.car.model = model; return this; } setEngine(engine) { this.car.engine = engine; return this; } setWheels(wheels) { this.car.wheels = wheels; return this; } build() { return this.car; } } class Car { constructor() { this.make = ""; this.model = ""; this.engine = ""; this.wheels = 0; } displayInfo() { console.log(`Make: ${this.make}, Model: ${this.model}, Engine: ${this.engine}, Wheels: ${this.wheels}`); } } // Usage const carBuilder = new CarBuilder(); const car = carBuilder.setMake("Toyota").setModel("Camry").setEngine("V6").setWheels(4).build(); car.displayInfo(); // Output: Make: Toyota, Model: Camry, Engine: V6, Wheels: 4 ``` 在此範例中，「CarBuilder」類別允許建構具有不同屬性的 Car 物件。透過呼叫`setMake`、`setModel`、`setEngine`、`setWheels`方法，設定Car物件的屬性。 build 方法完成建置並傳回完全建置的 Car 物件。 Car 類別代表一輛汽車，並包含一個「displayInfo」方法來記錄其詳細資訊。透過建立「carBuilder」實例並連結屬性設定方法，可以使用特定的品牌、型號、引擎和車輪值來建構汽車物件。呼叫“car.displayInfo()”顯示汽車的資訊。 **模組模式** 模組模式將相關的方法和屬性封裝到單一模組中，提供了一種乾淨的方式來組織和保護程式碼。它允許私有和公共成員，從而實現資訊隱藏並防止全域名稱空間污染。 ``` const MyModule = (function() { // Private members let privateVariable = "I am private"; function privateMethod() { console.log("This is a private method"); } // Public members return { publicVariable: "I am public", publicMethod() { console.log("This is a public method"); // Accessing private members within the module console.log(privateVariable); privateMethod(); } }; })(); // Usage console.log(MyModule.publicVariable); // Output: "I am public" MyModule.publicMethod(); // Output: "This is a public method" "I am private" "This is a private method" ``` 在此範例中，程式碼使用立即呼叫的函數表達式來封裝私人和公共成員。該模組具有私有變數和方法，以及公共變數和方法。存取時，公共成員提供預期的輸出。此模式允許對封裝的私有成員進行受控存取，同時公開選定的公共成員。 - **結構模式** 結構模式著重於組織和組合物件以形成更大的結構。它們促進物件的組合，定義物件之間的關係並提供靈活的方法來操縱其結構。 JavaScript 中一些常用的結構模式包括： - 裝飾模式 - 立面圖案 - 適配器 - 橋 - 合成的 **裝飾器模式** 裝飾器模式可讓您動態新增行為或修改物件的現有行為。它透過用一個或多個裝飾器包裝物件來增強物件的功能，而無需修改其結構。 ``` // Implementation example of the Decorator Pattern class Coffee { getCost() { return 1; } } class CoffeeDecorator { constructor(coffee) { this.coffee = coffee; } getCost() { return this.coffee.getCost() + 0.5; } } const myCoffee = new Coffee(); const coffeeWithMilk = new CoffeeDecorator(myCoffee); console.log(coffeeWithMilk.getCost()); // Output: 1.5 ``` 在此範例中，「CoffeeDecorator」類別包裝了基本「Coffee」物件並新增了附加功能。它有一個「getCost」方法，透過將基礎咖啡的成本與 0.5 的附加成本相結合來計算總成本。 在使用部分，建立了「Coffee」類別的「myCoffee」實例。然後，實例化「CoffeeDecorator」類別的「coffeeWithMilk」實例，並將「myCoffee」作為參數傳遞。當呼叫“coffeeWithMilk.getCost()”時，它會返回咖啡的總成本以及裝飾器加入的成本，從而得到 1.5 的輸出。此範例說明了裝飾器模式如何透過動態新增或修改物件的屬性或方法來擴展物件的功能。 **立面圖案** 外觀模式為複雜子系統提供了一個簡化的接口，充當隱藏底層實現細節的前端接口。它透過提供高級接口，提供了一種與複雜系統互動的便捷方式。 ``` // Implementation example of the Facade Pattern class SubsystemA { operationA() { console.log("Subsystem A operation."); } } class SubsystemB { operationB() { console.log("Subsystem B operation."); } } class Facade { constructor() { this.subsystemA = new SubsystemA(); this.subsystemB = new SubsystemB(); } operation() { this.subsystemA.operationA(); this.subsystemB.operationB(); } } const facade = new Facade(); facade.operation(); // Output: "Subsystem A operation." "Subsystem B operation." ``` 在此範例中，程式碼由三個類別組成：「SubsystemA」、「SubsystemB」和「Facade」。 `SubsystemA` 和 `SubsystemB` 類別代表獨立的子系統，並具有各自的 `operationA` 和 `operationB` 方法。 「Facade」類別作為一個簡化的接口，聚合了子系統的功能。 在使用部分，建立了“Facade”類別的“facade”實例。呼叫「facade.operation()」會觸發「SubsystemA」中的「operationA」和「SubsystemB」中的「operationB」的執行。結果，輸出顯示“子系統 A 操作”。接下來是「子系統 B 操作」。這展示了外觀模式如何提供統一且簡化的介面來與複雜的子系統交互，抽像出它們的複雜性並使它們更易於使用。 **適配器模式** 適配器模式是一種結構設計模式，它允許具有不相容介面的物件透過充當它們之間的橋樑來進行協作。它提供了一種將一個物件的介面轉換為客戶期望的另一個介面的方法。 ``` // Implementation class LegacyPrinter { printLegacy(text) { console.log(`Legacy Printing: ${text}`); } } // Target interface class Printer { print(text) {} } // Adapter class PrinterAdapter extends Printer { constructor() { super(); this.legacyPrinter = new LegacyPrinter(); } print(text) { this.legacyPrinter.printLegacy(text); } } // Usage const printer = new PrinterAdapter(); printer.print("Hello, World!"); // Output: "Legacy Printing: Hello, World!" ``` 在此程式碼中，適配器模式用於彌合「LegacyPrinter」類別和所需的「Printer」介面之間的差距。 `PrinterAdapter` 擴展了 `Printer` 類，並在內部利用 `LegacyPrinter` 來適配 `print` 方法。當呼叫 printer.print("Hello, World!")` 時，它會有效地觸發舊版列印功能，並輸出「Legacy Printing: Hello, World!」。這展示了適配器模式如何透過提供標準化介面來整合不相容的元件。 **橋樑圖案** 橋接模式是一種結構設計模式，它將系統的抽象和實現分開，允許系統獨立發展。它透過使用介面或抽象類別在兩者之間引入了橋樑。下面是一個範例程式碼片段來說明橋接模式： ``` // Example class Shape { constructor(color) { this.color = color; } draw() {} } // Concrete Abstractions class Circle extends Shape { draw() { console.log(`Drawing a ${this.color} circle`); } } class Square extends Shape { draw() { console.log(`Drawing a ${this.color} square`); } } // Implementor class Color { getColor() {} } // Concrete Implementors class RedColor extends Color { getColor() { return "red"; } } class BlueColor extends Color { getColor() { return "blue"; } } // Usage const redCircle = new Circle(new RedColor()); redCircle.draw(); // Output: "Drawing a red circle" const blueSquare = new Square(new BlueColor()); blueSquare.draw(); // Output: "Drawing a blue square" ``` 在此範例中，我們有由 Shape 類別表示的抽象，它具有顏色屬性和繪製方法。具體抽象（圓形和方形）繼承自 Shape 類別並實現其特定的繪製行為。 「Implementor」由 Color 類別表示，該類別聲明了「getColor」方法。具體的「Implementors」、「RedColor」和「BlueColor」繼承自 Color 類別並提供各自的顏色實作。 在使用部分，我們建立具體抽象的實例，傳遞適當的具體實現者物件。這允許抽象化將與顏色相關的功能委託給實現者。當我們呼叫draw方法時，它會從Implementor存取顏色並相應地執行繪圖操作。 **複合模式** 組合模式是一種結構設計模式，可讓您統一處理單一物件和物件組合。它使您能夠建立層次結構，其中每個元素都可以被視為單個物件或物件集合。此模式使用通用介面來表示單一物件（葉節點）和組合（複合節點），允許客戶端與它們統一互動。 ``` // Implementation class Employee { constructor(name) { this.name = name; } print() { console.log(`Employee: ${this.name}`); } } // Composite class Manager extends Employee { constructor(name) { super(name); this.employees = []; } add(employee) { this.employees.push(employee); } remove(employee) { const index = this.employees.indexOf(employee); if (index !== -1) { this.employees.splice(index, 1); } } print() { console.log(`Manager: ${this.name}`); for (const employee of this.employees) { employee.print(); } } } // Usage const john = new Employee("John Doe"); const jane = new Employee("Jane Smith"); const mary = new Manager("Mary Johnson"); mary.add(john); mary.add(jane); const peter = new Employee("Peter Brown"); const bob = new Manager("Bob Williams"); bob.add(peter); bob.add(mary); bob.print(); ``` 在此範例中，我們有 Component 類別 Employee，它代表個別員工。 Composite 類 Manager 擴展了 Employee 類，並且可以包含員工的集合。它提供了在集合中新增和刪除員工的方法，並重寫 print 方法以顯示經理的姓名及其下的員工。 在使用部分，我們建立一個複合層次結構，其中 Manager 物件可以包含單一員工 (Employee) 和其他經理 (Manager)。我們將員工加入經理中，建構了一個層次結構。最後，我們呼叫頂級經理的 print 方法，該方法遞歸地列印層次結構，顯示經理及其各自的員工。 - **行為模式** 行為模式關注物件之間的互動和職責分配。它們為物件之間的通訊、協調和協作提供解決方案。以下是行為模式的類型。 - 觀察者模式 - 策略模式 - 命令模式 - 迭代器模式 - 調解者模式 **觀察者模式** 觀察者模式在物件之間建立一對多關係，其中多個觀察者會收到主體狀態變化的通知。它支援物件之間的鬆散耦合並促進事件驅動的通訊。 ``` // Implementation example of the Observer Pattern class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { const index = this.observers.indexOf(observer); if (index !== -1) { this.observers.splice(index, 1); } } notifyObservers() { this.observers.forEach((observer) => observer.update()); } } class Observer { update() { console.log("Observer is notified of changes."); } } const subject = new Subject(); const observer1 = new Observer(); const observer2 = new Observer(); subject.addObserver(observer1); subject.addObserver(observer2); subject.notifyObservers(); // Output: "Observer is notified of changes." "Observer is notified of changes." ``` 在此範例中，「Subject」類別表示一個主題，它維護觀察者清單並提供新增、刪除和通知觀察者的方法。 「Observer」類別透過其「update」方法定義觀察者的行為。在使用部分，建立了「Subject」類別的「subject」實例。也使用“addObserver”方法建立兩個“observer”實例並將其新增至主題。 當呼叫“subject.notifyObservers()”時，它會觸發每個觀察者的“update”方法。結果，輸出「觀察者收到更改通知」。被記錄兩次，顯示觀察者已被告知主題的變化。 **策略模式** 策略模式可讓您將可互換的演算法封裝在單獨的策略物件中。它支援在執行時動態選擇演算法，從而提高靈活性和可擴展性。 ``` // Implementation example of the Strategy Pattern class Context { constructor(strategy) { this.strategy = strategy; } executeStrategy() { this.strategy.execute(); } } class ConcreteStrategyA { execute() { console.log("Strategy A is executed."); } } class ConcreteStrategyB { execute() { console.log("Strategy B is executed."); } } const contextA = new Context(new ConcreteStrategyA()); contextA.executeStrategy(); // Output: "Strategy A is executed." const contextB = new Context(new ConcreteStrategyB()); contextB.executeStrategy(); // Output: "Strategy B is executed." ``` 在此範例中，「Context」類別表示封裝不同策略的上下文，具有「strategy」屬性和「executeStrategy」方法。有兩個特定策略類，“ConcreteStrategyA”和“ConcreteStrategyB”，每個類別都有自己的“execute”方法來輸出特定訊息。 在使用部分，使用“ConcreteStrategyA”作為策略來建立“Context”類別的“contextA”實例。呼叫 `contextA.executeStrategy()` 會呼叫 `ConcreteStrategyA` 的 `execute` 方法，導致輸出「策略 A 已執行」。類似地，以「ConcreteStrategyB」為策略建立「contextB」實例，呼叫「contextB.executeStrategy()」會觸發「ConcreteStrategyB」的「execute」方法，從而輸出「策略 B 已執行」。這演示了策略模式如何透過將行為封裝在不同的策略物件中來允許在執行時動態選擇行為。 **命令模式** 命令模式將請求封裝為物件，允許您使用不同的請求對客戶端進行參數化、對請求進行排隊或記錄請求，並支援撤銷操作。它將請求的發送者與接收者解耦，從而促進鬆散耦合和靈活性。 ``` // Implementation class Receiver { execute() { console.log("Receiver executes the command."); } } class Command { constructor(receiver) { this.receiver = receiver; } execute() { this.receiver.execute(); } } class Invoker { setCommand(command) { this.command = command; } executeCommand() { this.command.execute(); } } const receiver = new Receiver(); const command = new Command(receiver); const invoker = new Invoker(); invoker.setCommand(command); invoker.executeCommand(); // Output: "Receiver executes the command." ``` 在此範例中，「Receiver」類別在呼叫時執行命令，「Command」類別封裝命令並將執行委託給接收者。 `Invoker` 類別設定並執行命令。在使用部分，建立了接收者、命令和呼叫者。此指令是為呼叫者設定的，呼叫「invoker.executeCommand()」會執行該指令，從而產生輸出「接收者執行該指令」。 **迭代器模式** 迭代器模式是一種行為設計模式，它提供了一種順序存取聚合物件的元素而不暴露其底層表示的方法。它允許您以統一的方式遍歷物件集合，而不管集合的具體實現如何。該模式將遍歷邏輯與集合分開，從而促進了一種乾淨而靈活的方法來迭代元素。 ``` // Implementation class Collection { constructor() { this.items = []; } addItem(item) { this.items.push(item); } createIterator() {} } // Concrete Aggregate class ConcreteCollection extends Collection { createIterator() { return new ConcreteIterator(this); } } // Iterator class Iterator { constructor(collection) { this.collection = collection; this.index = 0; } hasNext() {} next() {} } // Concrete Iterator class ConcreteIterator extends Iterator { hasNext() { return this.index < this.collection.items.length; } next() { return this.collection.items[this.index++]; } } // Usage const collection = new ConcreteCollection(); collection.addItem("Item 1"); collection.addItem("Item 2"); collection.addItem("Item 3"); const iterator = collection.createIterator(); while (iterator.hasNext()) { console.log(iterator.next()); } ``` 在此程式碼中，我們有由 Collection 類別表示的 Aggregate，它定義了用於建立迭代器物件的介面。具體聚合「ConcreteCollection」擴展了 Collection 類別並提供了迭代器建立的具體實作。 Iterator 由 Iterator 類別表示，它定義了存取和遍歷元素的介面。具體迭代器“ConcreteIterator”擴展了迭代器類別並提供了迭代邏輯的具體實作。在使用部分，我們建立一個 Concrete Aggregate 的實例“ConcreteCollection”，並向其中新增專案。然後我們使用 createIterator 方法建立一個迭代器。透過使用迭代器的“hasNext”和 next 方法，我們迭代集合併列印每個專案。 **調解者模式** 中介者模式透過引入充當協調物件之間互動的中心樞紐的中介者物件來簡化物件溝通。它封裝了通訊邏輯，並為物件提供了註冊、發送和接收訊息的方法。 ``` // Implementation class Mediator { constructor() { this.colleague1 = null; this.colleague2 = null; } setColleague1(colleague) { this.colleague1 = colleague; } setColleague2(colleague) { this.colleague2 = colleague; } notifyColleague1(message) { this.colleague1.receive(message); } notifyColleague2(message) { this.colleague2.receive(message); } } class Colleague { constructor(mediator) { this.mediator = mediator; } send(message) { // Send a message to the mediator this.mediator.notifyColleague2(message); } receive(message) { console.log(`Received message: ${message}`); } } // Usage const mediator = new Mediator(); const colleague1 = new Colleague(mediator); const colleague2 = new Colleague(mediator); mediator.setColleague1(colleague1); mediator.setColleague2(colleague2); colleague1.send("Hello Colleague 2!"); // Output: "Received message: Hello Colleague 2!" ``` 在此範例中，我們有一個 Mediator 類，它充當兩個 Colleague 物件之間的中介。中介者保存對同事的引用並提供在他們之間發送訊息的方法。 每個Colleague物件都有一個對中介者的引用，並且可以透過通知中介者來發送訊息。調解員又將訊息轉發給適當的同事。在這種情況下，同事 1 會向同事 2 發送訊息，後者接收並記錄該訊息。 ### 結論 我們探索了 JavaScript 中的一系列基本設計模式，包括建立模式、結構模式和行為模式。建立模式使我們能夠以靈活且高效的方式建立物件。結構模式有助於器官的靈活性和可擴展性。行為模式支援 JavaScript 物件之間的有效溝通和互動。透過利用這些設計模式，JavaScript 開發人員可以提高程式碼的可重複使用性、可維護性和整體系統效能。有了這些知識，我們就可以建立健壯且高效的 JavaScript 應用程式，以滿足現代軟體開發的需求。 --- 原文出處：https://dev.to/topefasasi/js-design-patterns-a-comprehensive-guide-h3m
我不是第一個這麼說的人，但我還是要說，2023 年對 JavaScript 框架來說是個不平凡的一年。我們一直在關注的新技術最終顯示出它們可以交付，而舊框架正在復興，如果您不注意，您可能會錯過一個相當重大的轉變。 我預計 2024 年將繼續出現更大的全面變化。這次不是新技術，而是精細化。既然基礎已經存在，那麼還有很多事情要做。 -------------------- ## 伺服器優先 如果讓我為過去幾年選擇一個主題，那就是這個。這一直是爭論的焦點，但不可否認。幾年前，每個人都在談論漸進式 Web 應用程式和離線應用程式。但那個對話框幾乎消失了。 相反，我們會受到 HTMX 的敏銳智慧的影響，解釋為什麼 JavaScript 只是一個錯誤。 Astro 毫無歉意地接管了內容網站的開發。甚至 React Core 團隊也接受了 React Server Components 的伺服器簡單性，Dan Abramov 的演講令人信服地表達了這一點，該演講探討瞭如果 React 始終是伺服器優先會怎樣。 https://www.youtube.com/watch?v=zMf_xeGPn6s 那麼我們的單頁應用程式親愛的在這麼短的時間內發生了什麼？它是否仍然存在，還是我們生活在多頁面應用程式和僅伺服器渲染 HTML 的時代？ ------------------ ## 回顧 2023 年 去年，我寫了一篇非常類似的文章，探討了新的一年 JavaScript 框架的趨勢，我認為這是一個很好的起點。 https://dev.to/this-is-learning/javascript-frameworks-heading-into-2023-nln 該文章中確定的三大技術趨勢成為去年討論的重要組成部分。 ### 訊號無所不在 從 2022 年底開始，Preact 和 Qwik 緊跟著 SolidJS 和 Vue 的腳步，採用這些 Reactive 原語，這種勢頭只會持續到 2023 年。 二月份，Angular 團隊宣布採用。這一訊息震驚了社群媒體。不僅。這是 Angular 的存在發生非常顯著變化的幾個因素之一。有人甚至稱之為「角度復興」。這是過去幾年我們第一次看到 React 團隊加入這場爭論，因為真正被問到的問題是「訊號什麼時候出現在 React 中？」。 我在下面的文章中寫了這個問題的更長的答案（以及在評論中與丹·阿布拉莫夫的討論）。 https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71 但簡短的回答是，訊號（至少作為 API）並不是他們感興趣的東西，而他們備受期待的「忘記」編譯器將扮演類似的角色。 但訊號傳播並沒有就此結束。 Lit 是 Google 的 Web 元件框架，推出了[Lit 3，具有第一方訊號支援](https://lit.dev/blog/2023-10-10-lit-3.0/#preact-signals-integration)。 Rich Harris 公佈了 Svelte 的未來，[他們新的基於訊號的「Runes」](https://svelte.dev/blog/runes)，將成為即將推出的 Svelte 5 中反應性的主要來源。 2023 年結束訊號是大多數前端 JavaScript 框架的主要部分。 ### 混合路由  去年，基於伺服器的路由得到了加強並發揮了新的作用。從 2022 年底開始，到今年，我們看到人們已經習慣了這種範式轉變，例如 React Server Components 和 Astro 的 View Transition API 整合。 前提是初始頁面載入後的伺服器渲染不應阻止客戶端導航，且客戶端導航不應意味著我們需要發送所有 JavaScript 來渲染可以靜態伺服器渲染的頁面部分。 值得注意的是，並非所有解決方案都是等效的，而且這個領域仍在建設中。我們正在進入一個新的空間，它不完全是單頁應用程式，也不完全是傳統的多頁面網站。需要進行新的權衡和新的理解。我們還沒有完成對陷阱的探索。 ### 邊緣網路：最後的前沿  邊緣功能似乎是那些明顯的勝利之一。將伺服器移至更靠近最終用戶的位置，可以大幅減少延遲。使用更輕的執行時間可以大幅減少冷啟動時間。我們終於可以提供我們一直夢想的網路體驗。以靜態的速度實現動態。 好吧，如果有什麼不同的話，2023 年是成長的陣痛和邊緣的一年。我們開始非常熱情。畢竟，Cloudflare 發布了邊緣資料庫，我們最喜歡的所有提供者都開始提供邊緣功能，而我們最喜歡的框架正在加入開箱即用的支援。提供者成立了一個 WinterCG 委員會來討論平台標準化問題。未來就在這裡。 我們最終認識到，即使在這些邊緣功能中，某些 Node API 也是必不可少的。您可以感謝或討厭 Next 和 Vercel 將“AsyncLocalStorage”推送到每個執行時，但我們需要它。 我們也意識到邊緣資料庫永遠無法滿足所有應用程式。即使使用串流媒體，伺服器瀑布也是真實且有影響力的。是的，即使使用 React Server 元件也是如此。 但這確實實現了我去年提出的目標，透過分散式部署進行整體創作。我們看到伺服器函數（`server$`、`use server`），甚至像 Worker Functions 這樣的變體在今年年初出現，表明我們可以分發我們部署 API 的方式，並被 Solid、Qwik 和 Next 採用。 到年底 [Next 14 發布了新的實驗性部分預渲染](https://nextjs.org/blog/next-14)，它允許單一請求從邊緣提供靜態內容，同時代理到伺服器-less 靠近資料庫的函數全部被串流傳輸，以提供類似Edge 的體驗，而無需在那裡部署整個應用程式。看到一些獨創性提供了兩全其美的解決方案真是太棒了。 ---------------- ## 展望 2024 年 ### 訊號年 我知道我已經在一篇文章中充分討論了信號，但真正的回報還沒有發生。我們在 JavaScript 中使用細粒度的類似 Signal 的原語已有 15 年了，那麼為什麼現在呢？ 這不僅僅是關於擁有它們，而是關於你如何使用它們。 Vue 多年來一直在隱藏這些原語，React 和 MobX 也是如此，但這幾乎沒有觸及事情的發展方向。那就是細粒度渲染。 SolidJS 所普及的內容，現在以 Vue Vapor 的形式進入 Vue，以及 Svelte 5 中的 Svelte。這些只是已經宣布的內容。 我希望其他採用訊號的人能夠更自然地將它們融入框架中，以便更好地從中受益。 這個領域的潛力令人興奮，致力於將 Signals 引入瀏覽器的 TC-39 提案的小組包括來自每個主要 JavaScript 框架的代表，而這個小組並不總是與標準密切相關。 ### 基礎設施主導的發展 既然伺服器端渲染框架已經打了一針強心劑，那麼下一個合乎邏輯的地方就是繼續考慮最大限度地利用這項新功能為我們提供的功能。標準的製定很慢，WinterCG 也需要一些時間，但這不會阻止這裡的發展。 為了實現差異化，我預期框架和基礎設施供應商都會面臨壓力，要求他們提供只能在特定平台上運作的獨特功能。雖然 2023 年各個提供者都在推動平等，以提供超出其基本靜態和功能託管的類似功能（例如鍵值存儲 Blob），但我只看到這裡提供獨特價值的競爭正在升溫。 框架在這方面的作用是保持一致的創作體驗和思考模型，同時找到利用呈現給我們的新能力的方法。這與 2000 年代末的瀏覽器戰爭沒有什麼不同，而且未來還會有很多事情發生。 ### 人工智慧  去年從框架的角度談論人工智慧還為時過早。明年也可能如此。但它就在眼前。程式碼遷移和生成工具都是很棒的想法，但它們遇到了我們多年來使用視覺化無程式碼或低程式碼編輯器所遇到的相同問題。人機界麵點仍然至關重要。畢竟，程式碼是有生命的東西。它會隨著時間的推移而增長和維持。 在過去的一年裡，與其他框架作者交談時，我們發現它吸引了我們周圍的人，但還沒有達到明確我們在其中的角色的程度。但這種情況正在改變。 是的，人工智慧正在回答一個永恆的問題：為什麼你的應用程式速度很慢。 對開發人員工具的影響是一回事。但我們也看到我們的框架中內建即時性的潛力越來越大。我也不僅僅指用於持久後端的 Websockets。元框架中的 API 已經從簡單的 JSON 發展到使用 SolidStart、Qwik 和 Next 中的「伺服器功能」完全流式跨網路 JavaScript 執行。不難想像生成技術即時建立使用者介面。 -------------------------- ## 結論  2024 年可能會繼續我們過去幾年看到的成熟趨勢。從 2020-22 年，我們看到了許多新的 JavaScript（和 WASM）框架（Qwik、Million.js、Astro、Next 13、Remix、Hydrogen、SvelteKit、SolidStart、Leptos、Dioxus、HTMX），但這還不是去年的案例。我們已經找到了方法，現在我們需要充分發揮它們的潛力。 我不確定我們是否已經成功地解決了複雜性，這對像 Astro 或 HTMX 這樣的簡化解決方案給予了大力支持。但我仍然充滿希望。 期望每個人都就「單頁應用程式」到底是什麼或何時應該使用擺在我們面前的各種選項達成一致可能有點太過分了，但這些解決方案每天都在變得更有能力實現他們設定的目標出去做。 我們所知道的網頁開發是否會改變已經不再是一個問題。即使方向還不完全明確，革命已經來臨。期望在那裡見到你。 --- 原文出處：https://dev.to/this-is-learning/javascript-frameworks-heading-into-2024-i3l
在学习 JavaScript中，变量、函数、类、循环、异步这些都是基础知识。这些基础知识是我们使用 JavaScript 的基础。但是，在日常的业务开发中，我们需要一些更高级的技巧来更好地解决问题。 > 通过本文你将了解到 JS 的高级知识点以及实际应用技巧，如高级数据结构和算法、函数式编程、异步编程和面向对象编程。我们会利用代码实例来让大家更好地理解这些知识点。同时，我们也会提供一些实战案例的示范和使用技巧，让你更好地将这些技术应用到实际业务中。 ## 高级数据结构和算法 ### Map 和 Set 数据结构 在 JavaScript 中，Map 数据结构通常用于存储键值对，它可以使用任意类型作为键和值。Set 数据结构用于存储唯一值的集合。 ```js // 创建Map对象 const map = new Map(); // 设置键值对 map.set("name", "Tom"); map.set("age", 20); // 获取键值对 console.log(map.get("name")); // 'Tom' console.log(map.get("age")); // 20 // 创建Set对象 const set = new Set(); // 添加元素 set.add(10); set.add(20); set.add(30); // 删除元素 set.delete(20); // 判断元素是否存在 console.log(set.has(10)); // true console.log(set.has(20)); // false ``` ### 堆、栈和队列 堆和栈是常用的内存分配方式。栈是一种后进先出的数据结构，堆是一种动态分配的内存结构。队列是一种先进先出的数据结构，它通常用于缓存和并发编程中。 ```js // 使用数组模拟堆 const arr = [1, 2, 3, 4]; arr.push(5); // 入堆 console.log(arr.pop()); // 出堆 // 使用数组模拟栈 const stack = [1, 2, 3, 4]; stack.push(5); // 入栈 console.log(stack.pop()); // 出栈 // 使用数组模拟队列 const queue = [1, 2, 3, 4]; queue.push(5); // 入队 console.log(queue.shift()); // 出队 ``` ### 深度优先搜索和广度优先搜索 深度优先搜索（DFS）和广度优先搜索（BFS）是常用的遍历算法。DFS 通常用于解决深度问题，BFS 适用于宽度问题。 ```js // 深度优先遍历 function dfs(node) { if (node == null) return; console.log(node.value); dfs(node.left); dfs(node.right); } // 广度优先遍历 function bfs(node) { const queue = [node]; while (queue.length) { const curr = queue.shift(); console.log(curr.value); if (curr.left) queue.push(curr.left); if (curr.right) queue.push(curr.right); } } ``` ### 常用算法 常用的算法有排序、搜索、查找等。 ```js // 排序算法：快速排序使用分治思想，通过把数组分成较小的块来排序。 function quickSort(arr) { if (arr.length < 2) { return arr; } let pivot = arr[0]; let left = []; let right = []; for (let i = 1; i < arr.length; i++) { if (arr[i] < pivot) { left.push(arr[i]); } else { right.push(arr[i]); } } return [...quickSort(left), pivot, ...quickSort(right)]; } // 查找算法： function binarySearch(arr, target) { let left = 0; let right = arr.length - 1; while (left <= right) { const mid = Math.floor((left + right) / 2); if (arr[mid] === target) { return mid; } else if (arr[mid] < target) { left = mid + 1; } else { right = mid - 1; } } return -1; } ``` ## 函数式编程 ### 高阶函数和柯里化 高阶函数和柯里化是函数式编程中的常见概念，它们可以让我们创建更加抽象、灵活的函数。 ```js // 高阶函数 function higherOrderFunction(func) { return function (num) { return func(num); }; } function double(num) { return num * 2; } const doubleFunc = higherOrderFunction(double); console.log(doubleFunc(10)); // 20 // 柯里化 function curry(func) { return function curried(...args) { if (args.length >= func.length) { return func.apply(this, args); } else { return function (...args2) { return curried.apply(this, [...args, ...args2]); }; } }; } function sum(a, b, c) { return a + b + c; } const curriedSum = curry(sum); console.log(curriedSum(1)(2)(3)); // 6 ``` ### 闭包和作用域 闭包和作用域是 JavaScript 中比较常见的概念。闭包可以让我们维护函数内的状态，作用域则决定了变量的可见范围。 ```js // 闭包 function closure() { let i = 0; return function () { return ++i; }; } const func = closure(); console.log(func()); // 1 console.log(func()); // 2 // 作用域 let a = 10; function foo() { let a = 20; console.log(a); // 20 } foo(); console.log(a); // 10 ``` ### 函数式编程中的常见模式 函数式编程中有很多常见的模式，如 map、filter、reduce 等。 ```js // map const arr = [1, 2, 3]; const mapArr = arr.map((item) => item * 2); console.log(mapArr); // [2, 4, 6] // filter const filterArr = arr.filter((item) => item > 1); console.log(filterArr); // [2, 3] // reduce const reduceArr = arr.reduce((sum, curr) => sum + curr, 0); console.log(reduceArr); // 6 异步编程 Promise和async/await Promise和async/await是常见的异步编程方式，它们可以让我们更好地处理异步编程中的问题。 // Promise function promise() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('done'); }, 1000); }); } promise().then((result) => console.log(result)); // 'done' // async/await async function asyncFunc() { const result = await promise(); console.log(result); } asyncFunc(); // 'done' ``` ### 事件循环和 EventEmitter 事件循环和 EventEmitter 用于处理异步事件，它们可以让我们更好地处理事件流。 ```js // 事件循环 console.log("start"); setTimeout(() => { console.log("setTimeout"); }, 0); Promise.resolve().then(() => console.log("promise")); console.log("end"); // EventEmitter const { EventEmitter } = require("events"); const emitter = new EventEmitter(); emitter.on("doSomething", (arg1, arg2) => { console.log(`${arg1} ${arg2}`); }); emitter.emit("doSomething", "Hello", "World"); // 'Hello World' ``` ### Web Worker Web Worker 可以让我们将长时间运行的任务移出主线程，以避免阻塞 UI。 ```js // 主线程 const worker = new Worker("worker.js"); worker.onmessage = (event) => { console.log(event.data); }; worker.postMessage("start"); // worker.js self.onmessage = (event) => { const result = longCalculation(event.data); self.postMessage(result); }; ``` ## 面向对象编程 ### 类和继承 JavaScript 中的类和继承与其他面向对象编程语言类似。 ```js // 类 class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Cat extends Animal { constructor(name, breed) { super(name); this.breed = breed; } speak() { console.log(`${this.name} meows.`); } get description() { return `${this.name} is a ${this.breed} cat.`; } set nickname(nick) { this.name = nick; } } const cat = new Cat("Fluffy", "Persian"); cat.speak(); // 'Fluffy meows.' console.log(cat.description); // 'Fluffy is a Persian cat.' cat.nickname = "Fuffy"; console.log(cat.name); // 'Fuffy' ``` ### Encapsulation、Inheritance、Polymorphism（封装、继承、多态） 封装、继承、多态是面向对象编程中的重要概念。 ```js // 封装 class Person { constructor(name) { this._name = name; } get name() { return this._name.toUpperCase(); } set name(newName) { this._name = newName; } } const person = new Person("John"); console.log(person.name); // 'JOHN' person.name = "Lisa"; console.log(person.name); // 'LISA' // 继承 class Shape { constructor(color) { this.color = color; } draw() { console.log("Drawing a shape..."); } } class Circle extends Shape { constructor(color, radius) { super(color); this.radius = radius; } draw() { console.log(`Drawing a ${this.color} circle with radius ${this.radius}.`); } } const circle = new Circle("red", 10); circle.draw(); // 'Drawing a red circle with radius 10.' // 多态 function drawShape(shape) { shape.draw(); } drawShape(new Shape("blue")); // 'Drawing a shape...' drawShape(new Circle("green", 20)); // 'Drawing a green circle with radius 20.' ``` ## 总结和实战 在本文中，我们介绍了一些 JavaScript 的高级知识点，如高级数据结构和算法、函数式编程、异步编程和面向对象编程。我们还提供了一些代码示例和实战案例，让大家更好地理解和掌握这些技术。 ### 通过 Promise.all 实现并发请求 ```js function fetchData(urls) { const promises = urls.map((url) => fetch(url)); return Promise.all(promises).then((responses) => Promise.all( responses.map((response) => { if (!response.ok) throw new Error(response.statusText); return response.json(); }) ) ); } ``` ### 使用 async/await 实现异步调用 ```js async function getData(url) { const response = await fetch(url); if (!response.ok) throw new Error(response.statusText); const data = await response.json(); return data; } ``` ### 在面向对象编程中使用工厂模式 ```js class Product { constructor(name, price) { this.name = name; this.price = price; } } class ProductFactory { createProduct(name, price) { return new Product(name, price); } } const productFactory = new ProductFactory(); const product = productFactory.createProduct("Apple", 1); console.log(product.name); // 'Apple' console.log(product.price); // 1 ``` 本文结束，感谢阅读
你好👋 今天，讓我們來看看**前 1% 的開發人員使用**的 8 個 React 儲存庫（以及那些您可能從未聽說過的儲存庫）。 準備好？  --- # 我們如何找到前 1% 的開發人員使用的儲存庫？ 🔦 我們如何找到最好的開發人員使用的東西背後的故事植根於大量的資料探勘和一些重要的建模。 現在，在 Quine，我們根據開發人員的**[DevRank](https://docs.quine.sh/for-developers/devrank)** 對開發人員進行排名。 簡單來說，DevRank 使用 [Google 的 PageRank 演算法](https://en.wikipedia.org/wiki/PageRank) 根據開發人員對開源儲存庫的貢獻來衡量開發人員在開源領域的重要性。 為了建立此列表，我們查看了前 1% 已加星號的儲存庫。 🌟 然後，我們計算了前 1% 的開發者會為回購加註星標的可能性，與後 50% 的開發者不支持的可能性進行比較。  最後，經過一番挑選，我們找到了以下 8 個儲存庫。 ：向下點： 當您想要建立很酷的網頁應用程式時，這些儲存庫將特別有用。** 如果您有興趣建立小型應用程式，並且喜歡應用人工智慧方面，我們建議您查看 Creator Quests，這是一項**開源挑戰，獎勵開發人員使用 ChatGPT、Claude、Gemini 建立酷炫的 GenerativeAI 應用程式**和更多。 :upside_down_face: 💰 最新的 Creator Quest 挑戰您使用生成式 AI 建立開發人員工具。要參與，只需註冊 [Quine](https://quine.sh/?utm_source=devto&utm_campaign=best_react_repos) 並前往 _Quests_。 **目前獎金池為$2028**，並且隨著更多參與者的加入，獎金池將會增加！點擊下面的圖片並嘗試！ ⬇️ [](https://quine.sh/?utm_source=devto&utm_campaign=best_react_repos) --- # jsxstyle/jsxstyle **不再有 JS 到 CSS 的跳躍** [](https://github.com/jsxstyle/jsxstyle) **為什麼要關心？** 在 Web 開發中，使用 React 或 Preact，您必須設定元件的樣式（如按鈕、選單等）。傳統上，這是使用單獨的 CSS 檔案或複雜的樣式系統來完成的，這可能非常耗時且管理起來很麻煩。 jsxstyle 可讓您直接在 JavaScript 程式碼中以及元件中定義樣式，從而簡化了此過程。換句話說，這意味著您不再需要在 JS 和 CSS 檔案之間跳躍。 **設定**：`npm install jsxstyle` **範例用例**：您的程式碼可以如下所示。 👇 ``` <Row padding={15}> <Block backgroundColor="#EEE" boxShadow="inset 0 0 0 1px rgba(0,0,0,0.15)" borderRadius={5} height={64} width={64} marginRight={15} backgroundSize="contain" backgroundImage="url(http://graph.facebook.com/justinbieber/picture?type=large)" /> <Col fontFamily="sans-serif" fontSize={16} lineHeight="24px"> <Block fontWeight={600}>Justin Bieber</Block> <Block fontStyle="italic">Canadian</Block> </Col> </Row> ``` [https://github.com/jsxstyle/jsxstyle](https://github.com/jsxstyle/jsxstyle) --- # 💨 alangpierce/蔗糖酶 **Babel 的超快替代品** [](https://github.com/alangpierce/sucrase) **為什麼你應該關心？** Babel 是 Web 開發中廣泛使用的工具，可將現代 JavaScript 程式碼轉換為舊瀏覽器可以理解的格式。 Sucrase 是 Babel 更快的替代品。 **設定**: ``` yarn add --dev sucrase # Or npm install --save-dev sucrase node -r sucrase/register main.ts ``` **用例範例**：Sucrase 可以直接從 JS 呼叫： ``` import {transform} from "sucrase"; const compiledCode = transform(code, {transforms: ["typescript", "imports"]}).code; ``` [https://github.com/alangpierce/sucrase](https://github.com/alangpierce/sucrase) --- # 🎨 woorm/折射鏡 **我為您的網頁程式碼著色，讓您的生活更輕鬆** [](https://github.com/wooorm/refractor) **為什麼你應該關心？** Refractor 很重要，因為它允許您加入突出顯示，從而增強專案的可讀性；尤其是當您將程式碼片段新增至 Web 應用程式時。它允許您用 270 多種程式語言表達程式碼，並且在傳統的基於 HTML 的突出顯示不理想的領域（例如 CLI 表單）特別有用。 **設定**：`npm install refractor` **用例範例**： ``` import {refractor} from 'refractor' const tree = refractor.highlight('"use strict";', 'js') console.log(tree) ``` **產量**： ``` { type: 'root', children: [ { type: 'element', tagName: 'span', properties: {className: ['token', 'string']}, children: [{type: 'text', value: '"use strict"'}] }, { type: 'element', tagName: 'span', properties: {className: ['token', 'punctuation']}, children: [{type: 'text', value: ';'}] } ] } ``` [https://github.com/wooorm/refractor](https://github.com/wooorm/refractor) --- # 🐦 react-static-tweets **您在網站上加入推文的最佳選擇。** [](https://github.com/transitive-bullshit/react-static-tweets) **為什麼你應該關心？** 將推文加入到您的網站是您在許多登陸頁面上看到的一項很酷的功能。 React Static Tweets 很重要，因為它提供了一種在 Web 專案中嵌入推文的高效方法，與 Twitter 的標準嵌入方法相比，提供更快的載入時間和更好的效能。 **設定**: ``` npm install react-static-tweets static-tweets date-fns # or yarn add react-static-tweets static-tweets date-fns ``` **用例範例：** ``` import React from 'react' import { fetchTweetAst } from 'static-tweets' import { Tweet } from 'react-static-tweets' const tweetId = '1358199505280262150' export const getStaticProps = async () => { try { const tweetAst = await fetchTweetAst(tweetId) return { props: { tweetAst }, revalidate: 10 } } catch (err) { console.error('error fetching tweet', err) throw err } } export default function Example({ tweetAst }) { return <Tweet ast={tweetAst} /> } ``` [https://github.com/transitive-bullshit/react-static-tweets](https://github.com/transitive-bullshit/react-static-tweets) --- # 🖨️ preactjs/preact-render-to-string **以 HTML 形式呈現您的元件** [](https://github.com/preactjs/preact-render-to-string) **為什麼要關心？** 「preact-render-to-string」是一個工具，可以幫助網站更快地載入並在搜尋引擎中更好地顯示。使用 Preact 等 JS 框架建立的網站需要一段時間才能顯示內容，因為瀏覽器必須先執行 JavaScript。此儲存庫透過將元件轉換為現成的 HTML 來完成伺服器端的繁重工作。因此，當有人造訪該網站時，即使網路速度很慢，他們也會立即看到內容。 **設定**：`npm install preact-render-to-string` **用例範例：** ``` import { render } from 'preact-render-to-string'; import { h, Component } from 'preact'; /** @jsx h */ // Classical components work class Fox extends Component { render({ name }) { return <span class="fox">{name}</span>; } } // ... and so do pure functional components: const Box = ({ type, children }) => ( <div class={`box box-${type}`}>{children}</div> ); let html = render( <Box type="open"> <Fox name="Finn" /> </Box> ); console.log(html); // <div class="box box-open"><span class="fox">Finn</span></div> ``` [https://github.com/preactjs/preact-render-to-string](https://github.com/preactjs/preact-render-to-string) --- # 🏆 自行車刮鬍/曲柄 **唯一的 JavaScript 框架** [](https://github.com/bikeshaving/crank) **為什麼要關心？** 在像 React 這樣的傳統 Web 框架中，Web 元件配置一次，僅在明確指定時才更改。它們看起來像是需要手動更新的靜態影像。 Crank.js 透過允許小部件更新自身以回應新資料來改變這一點，類似於用新新聞刷新的新聞收報機。這對於管理即時資料（例如即時體育賽事比分或產品更新）的 Web 應用程式尤其有用。 這個倉庫需要更多的人遷移到這裡才能獲得關注，但它仍然是一個非常酷的倉庫，值得關注。 👀 **設定**：`$ npm i @b9g/crank` **用例範例**： ``` import {renderer} from "@b9g/crank/dom"; function Greeting({name = "World"}) { return ( <div>Hello {name}</div> ); } renderer.render(<Greeting />, document.body); ``` [https://github.com/bikeshaving/crank](https://github.com/bikeshaving/crank) --- # 🎯 evoluhq/evolu **我是一個本地第一的人** [](https://github.com/evoluhq/evolu) **為什麼要關心？** Web 應用程式通常依賴在伺服器上儲存使用者資料，這需要持續的網路連接，並引起對隱私和資料安全的擔憂。這種基於伺服器的方法也意味著如果伺服器發生故障或公司停止運營，效能會降低，並且可能會遺失資料。 Evolu 引入了「本地優先」方法，其中資料直接儲存在使用者的裝置上。這意味著您的應用程式可以離線工作，更快地存取資料，並提供增強的隱私和安全性。如果您正在建立離線 Chrome/瀏覽器應用程式，這將非常有用。 **設定**：` npm install @evolu/react` 要開始使用它，您可以在[此處](https://www.evolu.dev/docs/quickstart)找到這個很棒的指南。 [https://github.com/evoluhq/evolu](https://github.com/evoluhq/evolu) --- # 📸 笑話社群/快照差異 **我比較你們的元件並突出顯示差異** [](https://github.com/jest-community/snapshot-diff) **為什麼要關心？** 在測試 React 元件或其他 JavaScript 值時，開發人員通常會比較整個狀態或輸出。這意味著處理大量資料，查找特定變更就像大海撈針一樣。 Snapshot-diff 是重點比較工具，可讓您取得元件的兩種不同狀態（或任兩個 JavaScript 值）並直接比較它們，僅將差異突出顯示。 這對於測試 React 元件特別有幫助，因為它可以準確指出兩種狀態之間發生的變化，從而更容易辨識和理解程式碼變更的影響。 **設定**：`yarn add --dev snapshot-diff` **範例用例：** 預設笑話匹配器 ``` const snapshotDiff = require('snapshot-diff'); test('snapshot difference between 2 strings', () => { expect(snapshotDiff(a, b)).toMatchSnapshot(); }); const React = require('react'); const Component = require('./Component'); test('snapshot difference between 2 React components state', () => { expect( snapshotDiff(<Component test="say" />, <Component test="my name" />) ).toMatchSnapshot(); }); ``` [https://github.com/jest-community/snapshot-diff](https://github.com/jest-community/snapshot-diff) --- **我希望這些發現對您有價值，並將有助於建立更強大的 React 工具包！⚒️** 如果您今天想利用這些工具來獲得獎勵，我們剛剛發起了一項使用生成式人工智慧建立開發人員工具的挑戰。 如果對此有興趣，請登入 [Quine](https://quine.sh/?utm_source=devto&utm_campaign=best_react_repos) 並發現任務！ 💰  最後，請**考慮透過加星號來支持這些專案。 ⭐️** PS：我們與他們沒有任何關係。我們只是認為偉大的專案值得高度認可。 下週見， 您的開發夥伴💚 巴普 --- 原文出處：https://dev.to/quine/8-repos-used-by-the-top-1-of-react-devs-2758
## **簡介** 在本教程中，您將學習如何使用**現代工具**和**最佳實踐**來監控您的Javascript應用程式。 探索分散式追蹤的力量，並了解如何無縫整合和利用 Odigos 和 Jaeger 等工具來增強您的監控能力。 **您將學到什麼：✨** - 如何在 Javascript 中建立微服務🐜。 - 為微服務設定 Docker 容器📦。 - 配置 Kubernetes ☸️ 以管理微服務。 - 整合追蹤後端以可視化追蹤🔍。 您準備好成為監控 JS 應用程式的**專家**了嗎？ 😍 說**是的，先生！**。 我聽不到你說話。大聲點說。 🙉  *** ## **讓我們設定一下 🦄** > 🚨 在部落格的這一部分中，我們將建立一個虛擬的 JavaScript 微服務應用程式並將其部署在本地 Kubernetes 上。如果您已經有一個並且正在跟進，請隨意跳過這一部分。 為您的應用程式建立初始資料夾結構，如下所示。 👇🏻 ``` mkdir microservices-demo cd microservices-demo mkdir src cd src ``` ### **設定伺服器** 🖥️ > 👀 出於演示目的，我將建立兩個相互通信的微服務，最終我們可以使用它來視覺化分散式追蹤。 - **建置與 Dockerize 微服務 1** 在「/src」資料夾中，建立一個新資料夾「/microservice-1」。在資料夾內初始化 **NodeJS** 專案並安裝所需的依賴項。 ``` mkdir microservice-1 cd microservice-1 npm init -y npm install --save express node-fetch ``` 建立一個新檔案“index.js”並新增以下程式碼： ``` // 👇🏻/src/microservice-1/index.js const express = require("express"); const fetch = require("node-fetch") const app = express(); const PORT = 3001; app.use(express.json()); app.get("/", async (req, res) => { try { const response = await fetch("http://microservice2:8081/api/data"); const data = await response.json(); res.json({ data: "Microservice 2 data received in Microservice 1", microservice2Data: data, }); } catch (error) { console.error(error.message); res.status(500).json({ error: "Internal Server Error" }); } }); app.listen(PORT, () => { console.log(`Microservice 1 listening on port ${PORT}`); }); ``` 伺服器正在偵聽連接埠“3001”，並且在對“/”發出請求時，我們從“microservice2”請求資料並將回應作為 JSON 物件返回。 📦 現在，是時候對這個微服務進行 docker 化了。在“/microservice-1”資料夾中建立一個新的“Dockerfile”並新增以下程式碼： ``` // 👇🏻/src/microservice-1/Dockerfile FROM node:18 # Use /usr/src/app as the working directory WORKDIR /usr/src/app # Copy package files and install production dependencies COPY --chown=node:node package*.json /usr/src/app RUN npm install --production # Copy the rest of the files COPY --chown=node:node . /usr/src/app/ # Switch to the user node with limited permissions USER node # Expose the application port EXPOSE 3001 # Set the default command to run the application CMD ["node", "index.js"] ``` 將我們不想推送到容器的文件加入到“.dockerignore”總是很好。使用我們不想推送的檔案的名稱來建立一個“.dockerignore”檔案。 ``` // 👇🏻/src/microservice-1/.dockerignore node_modules Dockerfile ``` 最後，透過執行以下命令來建構 🏗️ docker 映像： ``` docker build -t microservice1-image:latest . ``` 現在，這就是我們第一個微服務的完整設定。 ✨ - **建置與 Dockerize 微服務 2** 我們將有一個類似於“microservice1”的設置，只是在這裡和那裡進行了一些更改。 在「/src」資料夾中，建立一個新資料夾「/microservice-2」。在該資料夾內，初始化 **NodeJS** 專案並安裝所需的依賴項。 ``` mkdir microservice-2 cd microservice-2 npm init -y npm install --save express node-fetch ``` 建立一個新檔案“index.js”並新增以下程式碼： ``` // 👇🏻/src/microservice-2/index.js const express = require("express"); const fetch = require("node-fetch") const app = express(); const PORT = 3002; app.use(express.json()); app.get("/api/data", async (req, res) => { const url = "https://jsonplaceholder.typicode.com/users"; try { const response = await fetch(url); const data = await response.json(); res.json(data); } catch (error) { console.error(error.message); res.status(500).json({ error: "Internal Server Error" }); } }); app.listen(PORT, () => { console.log(`Microservice 2 listening on port ${PORT}`); }); ``` 伺服器正在偵聽連接埠 3002，根據對“/api/data”的“GET 請求”，我們從“jsonplaceholder”獲取資料並將回應作為 JSON 物件傳回。 📦 現在，是時候對這個微服務進行 docker 化了。複製並貼上「microservice1」的整個「Dockerfile」內容，然後將連接埠從 3001 變更為 3002。 另外，新增一個「.dockerignore」檔案並包含我們在建立「microservice1」時新增的相同檔案。 最後，透過執行以下命令來建構 🏗️ Docker 映像： ``` docker build -t microservice2-image:latest . ``` 現在，這也是我們第二個微服務的完整設定。 ✨ - **設定 Kubernetes** > 確保已安裝 **[Minikube](https://github.com/kubernetes/minikube)** 透過執行以下命令建立新的本機 Kubernetes 叢集。我們在設定 Odigos 和 Jaeger 時將需要它。 **啟動 Minikube：🚀** ``` minikube start ``` 現在我們已經準備好並 Docker 化了兩個微服務，是時候設定 Kubernetes 來管理這些服務了。 在專案的根目錄下，建立一個新資料夾「/k8s/manifests」。在此資料夾中，我們將為兩個微服務新增部署和服務配置。 - **部署設定📜**：用於在 Kubernetes 叢集上實際部署容器。 - **服務配置📄**：將 Pod 暴露給叢集內部和叢集外部。 首先，我們為「microservice1」建立清單。建立一個新檔案「microservice1-deployment-service.yaml」並新增以下內容： ``` // 👇🏻/k8s/manifests/microservice1-deployment-service.yaml apiVersion: apps/v1 kind: Deployment metadata: name: microservice1 spec: selector: matchLabels: app: microservice1 template: metadata: labels: app: microservice1 spec: containers: - name: microservice1 image: microservice1-image # Make sure to set it to Never, or else it will pull from the docker hub and fail. imagePullPolicy: Never resources: limits: memory: "200Mi" cpu: "500m" ports: - containerPort: 3001 --- apiVersion: v1 kind: Service metadata: name: microservice1 labels: app: microservice1 spec: type: NodePort selector: app: microservice1 ports: - port: 8080 targetPort: 3001 nodePort: 30001 ``` 此配置部署了一個名為「microservice1」的微服務，其資源限制為 **200MB 記憶體** 🗃️ 和 **0.5 個 CPU 核心**。它透過部署在連接埠 3001 上公開微服務，並透過服務在 **NodePort** 30001 上公開微服務。 > 🤔 還記得我們用名稱「microservice1-image」建構的「Dockerfile」嗎？我們使用相同的映像來建立容器。 可透過集群內的連接埠 8080 存取它。我們假設「microservice1-image」透過「imagePullPolicy: Never」在本地可用。如果沒有到位，它將嘗試從 Docker Hub 🐋 中提取映像並失敗。 現在，讓我們為「microservice2」建立清單。建立一個名為「microservice2-deployment-service.yaml」的新檔案並新增以下內容： ``` // 👇🏻/k8s/manifests/microservice1-deployment-service.yaml apiVersion: apps/v1 kind: Deployment metadata: name: microservice2 spec: selector: matchLabels: app: microservice2 template: metadata: labels: app: microservice2 spec: containers: - name: microservice2 image: microservice2-image # Make sure to set it to Never, or else it will pull from the docker hub and fail. imagePullPolicy: Never resources: limits: memory: "200Mi" cpu: "500m" ports: - containerPort: 3002 --- apiVersion: v1 kind: Service metadata: name: microservice2 labels: app: microservice2 spec: type: NodePort selector: app: microservice2 ports: - port: 8081 targetPort: 3002 nodePort: 30002 ``` 它與“microservice1”的清單類似，只有一些更改。 👀 此配置部署一個名為「microservice2」的微服務，並透過部署在連接埠 3002 上將其內部公開，並透過服務在 **NodePort** 30002 上將其外部公開。 可透過叢集內的連接埠 8081 進行存取，假設「microservice2-image」可透過「imagePullPolicy: Never」在本地使用。 全部完成後，請確保套用這些設定並使用這些服務啟動 Kubernetes 叢集。將目錄更改為`/manifests`並執行以下命令：👇🏻 ``` kubectl apply -f microservice1-deployment-service.yaml kubectl apply -f microservice2-deployment-service.yaml ``` 執行以下命令檢查我們的兩個部署是否正在**執行**：👇🏻 ``` kubectl get pods ```  最後，我們的應用程式已準備就緒，並使用必要的部署配置部署在 Kubernetes 上。 🎉 *** ## **安裝 Odigos 😍** > 💡 [**Odigos**](https://odigos.io/) 是一個開源可觀察性控制平面，使組織能夠建立和維護其可觀察性管道。  > ℹ️ 如果您在 Mac 上執行，請執行以下命令在本地安裝 Odigos。 ``` brew install keyval-dev/homebrew-odigos-cli/odigos ``` > ℹ️ 如果您使用的是 Linux 計算機，請考慮透過執行以下命令從 GitHub 版本安裝它。確保根據您的 Linux 發行版更改該檔案。 > ℹ️ 如果 Odigos 二進位檔案不可執行，請在執行安裝指令之前執行此指令 `chmod +x odigos` 使其可執行。 ``` curl -LJO https://github.com/keyval-dev/odigos/releases/download/v1.0.9/cli_1.0.9_linux_amd64.tar.gz tar -xvzf cli_1.0.9_linux_amd64.tar.gz ./odigos install ```  > 如果您需要有關其安裝的更多簡短說明，請按照此[**連結**](https://docs.odigos.io/installation)操作。 現在，Odigos 已準備好執行 🎉。我們可以執行它的 UI，配置追蹤後端，並相應地發送追蹤。 *** ## **將 Odigos 連接到追蹤後端 💫** > 💡 [**Jaeger**](https://github.com/jaegertracing/jaeger) 是一個開源的端對端分散式追蹤系統。  ### **設定 Jaeger！** ✨ 在本教程中，我們將使用 **Jaeger** 🕵️♂️，這是一個流行的開源平台，用於查看微服務應用程式中的分散式追蹤。我們將用它來查看 Odigos 生成的痕跡。 > 有關 Jaeger 安裝說明，請點選此 [**link**](https://www.jaegertracing.io/download/)。 👀 若要在 Kubernetes 叢集上部署 Jaeger，請執行下列命令：👇🏻 ``` kubectl create ns tracing kubectl apply -f https://raw.githubusercontent.com/keyval-dev/opentelemetry-go-instrumentation/master/docs/getting-started/jaeger.yaml -n tracing ``` 在這裡，我們建立一個「tracing」命名空間，並在該命名空間中為 Jaeger 應用部署配置📃。 此命令設定自託管 Jaeger 實例及其服務。 👀 執行以下命令來取得正在執行的 pod 的狀態：👇🏻 ``` kubectl get pods -A -w ``` 等待所有三個 Pod 都 **正在執行**，然後再繼續。  現在，要在本地查看 Jaeger Interface 💻，我們需要進行連接埠轉送。將流量從本機電腦上的連接埠 16686 轉送至 Kubernetes 叢集中選定 pod 上的連接埠 16686。 ``` kubectl port-forward -n tracing svc/jaeger 16686:16686 ``` 此命令在本機電腦和 Jaeger pod 之間建立一條隧道，公開 Jaeger UI，以便您可以與其互動。 最後，在瀏覽器上開啟「 http://localhost:16686 」並查看 Jaeger 實例正在執行。  ### **設定 Odigos 與 Jaeger 一起工作！** 🌟 > ℹ️ 對於 Linux 用戶，請前往從 GitHub 版本下載 Odigos 二進位檔案的資料夾，然後執行以下命令來啟動 Odigos UI。 ``` ./odigos ui ``` > ℹ️ 對於 Mac 用戶，只需執行： ``` odigos ui ``` 造訪“ http://localhost:3000 ”，您將看到 Odigos 介面，您將在“default”命名空間中看到您的部署。  選擇這兩個選項並點擊“下一步”。在下一頁上，選擇 Jaeger 作為後端，並在出現提示時加入以下詳細資訊： - **目的地名稱🛣️**：提供您想要的任何名稱，例如說**快速追蹤**。 - **端點🎯**：為端點加上`jaeger.tracing:4317`。 就是這樣 - Odigos 已準備好向我們的 Jaeger 後端發送痕跡。就是這麼簡單。 🤯  *** ## **查看分散式追蹤 🧐** 設定 Odigos 後，在 Jaeger 主頁「 http://localhost:16686 」上，您將已經看到列出的兩個微服務。  Odigos 已經開始向 Jaeger 發送我們的應用程式痕跡。 😉 請記住，這是我們的微服務應用程式。由於以「microservice1」為起點，因此再向「microservice1」發出一些請求，隨後它將向「microservice2」請求資料並傳回。最終，Jaeger 將開始填滿這些痕跡。  點擊任一請求，您應該能夠觀察請求如何流經您的應用程式以及完成每個請求所需的時間。 這一切都是在沒有更改一行程式碼的情況下完成的。 🤯 一切都感謝 **Odigos**！ 🤩  想像一下，這只是一個很小的虛擬應用程式，但對於一個執行著大量微服務並相互交互的更大的應用程式來說，分散式追蹤將非常強大！ 💪 透過分散式跟踪，您可以輕鬆辨識應用程式中的瓶頸，並確定哪個服務導致問題或花費更長的時間。 🕒 *** ## **讓我們總結一下！ 🥱** 到目前為止，您已經學習如何使用 **Odigos** 作為應用程式和追蹤後端 **Jaeger** 之間的 **中間件**，透過分散式追蹤來密切監控 👀 Javascript 應用程式。 👏 如果您已經做到了這一步，請拍拍自己的背。 🥳你值得擁有！ 😉 本教學的源程式碼可在此處取得： https://github.com/keyval-dev/blog/tree/main/odigos-monitor-JS-like-a-pro > 如果您對本文有任何疑問或建議，請在下面的評論部分分享。 👇🏻 那麼，這就是本文的內容。感謝您的閱讀！ 🎉🫡 --- 原文出處：https://dev.to/odigos/monitor-your-javascript-application-like-a-pro-581p
在任何領域，無論是藝術、體育還是軟體開發，達到頂峰的最快方法就是研究那些已經處於頂峰的人……並做他們正在做而你沒有做的事情。 如果您以編寫程式碼為生，這意味著要考慮一下高級開發人員。這意味著確定他們擁有哪些你不具備的技能、習慣和特質。 在過去 3 年裡與全球頂尖軟體工程師一起工作了數千個小時之後，我發現您現在就可以實施 12 種高級開發人員特質，以快速將您的成長提升到一個新的水平。 讓我們從第一開始… ## 1. 專注 專注意味著對某些事情說不，這樣我們就可以做其他事情。 理想情況下，對不重要的事情說不。並對那些能帶來改變的事情說「是」。使船移動得更快的東西。 這對許多開發人員來說確實很難，因為它違背了我們的本能。這意味著接受你無法完成所有事情。並不是每個機會都是平等的。 你不可能學習所有新的框架。您無法閱讀所有時事通訊。您不可能參加所有會議。而你不必這樣做。 你的時間有限。你的能量也是如此。 成為高級開發人員意味著選擇你的戰鬥。  > 「人們認為專注意味著對你必須關注的事情說『是』。但這根本不是這個意思。這意味著對其他一百個好主意說不。” ——史蒂夫‧賈伯斯 有趣的是，你選擇的越好，你進步的速度就越快。高級開發人員每天都有 24 小時的時間。但他們做得更多。 如何？ 透過少做事。 當新事物出現時，問問自己“這真的很重要嗎？”或者這只是另一個趨勢？很可能這只是另一個偽裝成機會的干擾。  高級開發人員說的「不」多於「是」。他們完成的專案比開始的專案還要多。他們在學習新框架之前先掌握已經使用的框架。如果你想更快進入高級，你需要培養的第一個特質就是專注。 ## 2. 二階思維 讓「初級開發者」尖叫的一件事是「讓我們建造它，我們會找到結果」的態度。年輕人傾向於先編碼，後思考。 如果您剛開始，這可能是一個很好的態度，但是當您開發可用於生產的軟體時，您將無法更改一些技術決策。或者很容易改變。 例如，您選擇Vue作為前端框架。 然後，需求會改變。你開始認為 React 會是更好的選擇。當然，你可以切換到 React。但這既不容易，也不便宜。 資深開發人員知道，靠自己的供應很容易獲得快感。但是，如果您愛上了您最了解的框架和函式庫，您將開始做出糟糕的技術決策。  他們會三思而後行，考慮自己選擇的後果。這可能意味著在嘗試理解問題時詢問「五個為什麼」。 或考慮他們的解決方案可能存在的缺點。 例如，現在我們新增了 Redux，全域狀態可能更容易管理。但我們必須在 Redux 上招募新的開發人員。學習曲線很高。 而且，你猜怎麼著，我們的 JavaScript 套件會變得更大，這對效能不利。 考慮二階環境將使您成為更好的開發人員。它還將在技術面試中為您提供幫助。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 3.實用主義 當初級開發人員閱讀一本關於最佳實踐的書時，他們會跳起來並嘗試將它們應用到任何版本中的每一行程式碼。他們虔誠地追隨他們。 如果您無法自己做出技術決策，那麼遵守預先定義的規則會容易得多。但軟體開發不是一種宗教。 一個很好的例子是測試。 當初級開發人員閱讀 TDD（測試驅動開發）時，他們將開始嘗試測試所有內容。旨在實現完整的程式碼覆蓋率。事實上，完整的程式碼覆蓋率會帶來遞減的結果，並且最終會浪費時間。  高級開發人員知道如何平衡最佳實踐和上市時間。何時走捷徑，何時不走捷徑。 快速破解會產生錯誤和技術債。當程式碼上下文發生變化時，始終遵守規則會導致錯誤的決策。 你需要一個平衡。 根據情況重新考慮您的技術選擇。 ## 4. 沒有什麼好證明的 由於缺乏自信，初級開發人員發現自己不斷地試圖向他人證明自己。與對自己的價值和技能缺乏安全感的高級開發人員一樣。 他們的信心是建立在他人的認可之上。 這是一場失敗的遊戲。 他們會嘗試在某個技術討論、與他人交談或在深夜或週末推送程式碼時展示自己了解多少。 事實上，所有這些行為都會造成有毒的團隊環境並適得其反。在最好的情況下，他們會讓你看起來比實際情況更高級。  獵豹不需要在比賽中證明自己，它只是為了狩獵而奔跑。 有兩種方法可以解決這個問題。 第一個是停止在外部驗證上花費太多。因為事實是你不需要向任何人證明自己。只對你自己。 第二是與頭腦中的負面聲音和平相處。 你可以成為你最嚴厲的批評者。完美主義、對失敗的恐懼以及對「真正的」開發人員的錯誤認知正在摧毀你的自尊。這就是為什麼無論你多努力，你總是感覺功虧一簣。 是時候擺脫你的頭腦了。 專注於掌握你的手藝，剩下的就會水到渠成。您將立即對自己和自己的技能更加自信。你將不再試圖向陌生人證明自己。 ## 5. 掌握基礎知識 每當我在 LinkedIn 上看到開發人員的個人資料，並且他們將自己描述為「React」開發人員或「Angular」開發人員時，我就知道他們不是高級開發人員。他們可能是該框架中的高級人員，但總體而言不是高級人員。 框架開發人員永遠不會成為高級開發人員。 框架不會讓你成為高級，因為框架只是錦上添花。不是蛋糕本身。冰山一角與其底部。  我甚至推測，目前軟體開發人員中冒充者症候群盛行的背後，甚至是高階開發人員的背後，並不是缺乏天賦，也不是缺乏努力。 這是基本面薄弱。 這也是為什麼除錯或效能優化等主題對於大多數開發人員來說是一個猜謎遊戲。他們不習慣深入挖掘他們正在使用的庫和工具的表面。 要成為高級開發人員，您不僅必須了解事物背後的“什麼”，還必須了解事物背後的“原因”。 例如，高級開發人員不僅能夠建立 React 應用程式。但他們也會理解為什麼 React 是以某種方式建構的。以及它如何與編寫的語言（JavaScript/TypeScript）和執行的平台（Web 瀏覽器）融合。 好訊息是，一旦你掌握了基本原理，一切的水平都會上升。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 6. 端對端交付 公司避開初級開發人員的第一大原因是他們需要大量外部協助才能完成工作。外部幫助意味著您將打擾高級開發人員來完成您的工作。 初級開發人員被認為“昂貴”，因為他們無法獨立交付。 相反，高級開發人員可以提供端到端的服務。給他們一堆要求，他們會解決剩下的問題。這並不意味著他們是獨狼，而且他們通常非常擅長團隊合作。 這並不意味著高級開發人員快速破解事物只是為了推動它們前進。 那不是「真正的」前輩。 這並不意味著他們深入了解軟體開發生命週期的每個部分。 但是，高級開發人員了解整個軟體開發生命週期的所有主要部分。並且可以為其中的每一個（前端、後端、部署）做出貢獻。 如果您是想要升級的初級/中級開發人員，那麼端對端交付是您需要關注的特徵。 ## 7. 心智模型 高級開發人員與初級開發人員的主要區別之一是他們可以處理的複雜性。 老年人可以理解更複雜的程式碼庫和需求。 他們可以理解二階環境。程式碼庫的變化將如何影響效能、成本甚至團隊。 他們這樣做並不是因為他們記住了每個實作細節。這是不可能的，因為人類的記憶非常有限。 他們這樣做是因為他們將程式碼的複雜度抽象化為心理模型。這些都是表示現實的簡單方法。 開發人員如何建構高品質的心理模型？ 透過查看框架和庫的背後並學習它們背後的設計模式。根據您的技術堆棧，存在著許多噪音。諸如 SOLID 原則或 MVC 之類的東西... 但我認為最好的開始方法是選擇您正在使用的任何框架並嘗試超越程式碼。  開始問自己，為什麼框架的建立者要這樣建構它？它是建立在新概念的基礎上還是只是古老原則的實現（通常是這種情況）？ 透過回答這些問題，您將建立軟體開發的思維模型，並能夠處理更多的複雜性。這是快速成長為高級開發人員的最有效方法之一。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 8. 資深開發人員控制故事 高階開發人員可以做得非常好的一件事是領導技術討論並影響周圍的其他人。無論是業務利害關係人、產品經理或其他開發人員，資深開發人員都知道如何引導他們朝著正確的方向發展。 他們結合自信、技術專長和溝通技巧來做到這一點。 高級開發人員也能夠設定嚴格的界限。 他們可以不同意而不會情緒激動。他們可以在會議期間為自己（和他人）挺身而出。他們積極協商薪資。 他們講述自己的故事。  高級開發人員知道如何以及何時在沙子上劃線並說“夠了”。 如果另一個開發人員在程式碼審查期間開始指責其他人，老年人知道如何阻止他們。如果高階主管試圖介入開發人員的工作並進行微觀管理，高階管理層知道如何在不破壞關係的情況下阻止他們。 沒有關於如何變得更加自信的開發人員的分步指南。 這需要重複和練習。第一步是停止一直說「是」。並開始嘗試在薪資談判中取得進展。 ## 9. 長期思考 初級開發人員考慮“現在”。他們的想法是短期的。當他們走捷徑時，他們的程式碼也是如此。初級開發人員會擴展一段程式碼，而不考慮正確重構它，或乾脆忽略測試和效能。 但青年人也會對自己的職業生涯進行短期思考。 這可能意味著跳槽過多或自毀前程。這可能意味著忽視。 就像不提高你的技能或推銷自己的方式一樣，因為現在你的工作很穩定。只是被解僱六個月後才後悔。 成為更高級的開發人員的一部分是開始進行長期思考。 第一個方法是改變你的心態。大多數初級開發人員的短期思維不是由懶惰引起的，而是由自我懷疑引起的。 他們內心深處仍在思考成為開發人員是否適合他們。或者他們是否選擇了正確的職業。 這些疑慮阻止他們做出長期承諾。  好事需要時間，資深開發人員知道這一點並相應地調整他們的想法。 現在，隨著人工智慧威脅到軟體開發的終結，這種短期思維比以往任何時候都更加頻繁。如果某件事很快就會消失，為什麼還要承諾呢？ 相信我，只有當我完全致力於我作為開發人員的職業生涯時，事情才開始起飛。 我說：「就是這樣」。 我不再向外張望。我告訴自己：這是我現在的工作，也是我未來十年的工作，所以讓我把它做好吧。 我開始投資我的技能，因為現在我知道它們會得到回報。 即使你未來 20 年不打算寫程式碼，擁有長遠的心態也會為你帶來巨大的好處。高級開發人員之所以能夠達到高級水平，是因為他們致力於自己的技術。如果您渴望實現這一目標，您也應該這樣做。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 10.卓越是一種習慣 我想正是 Kent Beck 說過那句名言：「我不是一個偉大的程式設計師，只是一個有著好習慣的好程式設計師」。習慣很重要，因為它們經得起時間的考驗。 因為您擁有的任何關於 JavaScript 框架的知識遲早都會過時。技術變革。但你的習慣將永遠伴隨你。 好訊息是人類是習慣的動物。 在我們的大腦中設定新的慣例並不容易。 但一旦我們將它們內化為習慣，我們就很容易堅持下去。利用這一點的最佳方法是實現您的任何目標並將其分解為日常行動。然後透過重複將這些行為變成習慣。 例如，如果您想更好地進行測試，請每天編寫一個單元測試。 如果您想在日常會議中做好更多準備並清晰思考，請寫日記。如果你想找到一份新的開發人員工作，並且你必須發送 100 份申請，那麼每天發送 10 份申請。 養成新的習慣，你向高級水準的進步將持續且穩定。 ## 11. 保護您最重要的資產 身為高階開發人員意味著不僅要長遠考慮您的程式碼和技術決策，還要考慮您的健康。 因為健康就是財富。 我在影片中一次又一次地談論這一點。 開發人員的工作需要久坐。您一天的大部分時間都坐在電腦前的椅子上。這對你的健康非常不利。 然後，辦公室裡到處都是垃圾食品，像是薯條、汽水和糖果。這意味著除非您有意識地努力，否則您將很難保持健康和體形。 但如果你想擁有一個長期而富有成效的軟體編寫職業，並且不想最終出現背部問題、糖尿病，甚至更糟糕的情況，那麼你需要開始照顧自己的健康。  欲得金蛋，勿殺鵝。如果你想提高工作效率，首先要照顧好自己。 這並不意味著您必須開始每週去健身房 5 次。 或進行一些瘋狂的節食。但每周至少2至3次運動。您可以去健身房、跑步或參加團隊運動。現在我正在做 在飲食方面，減少糖和精緻碳水化合物的攝取。肉也不要過量。 也要考慮您的心理健康。 忽略諸如「吃飯、睡覺、編碼、重複」之類的建議，在工作之外建立自己的生活。 開始一個新的嗜好。聯繫朋友。休息一下。 從短期來看，你的進步可能會慢一些。但從長遠來看，你將能夠在遊戲中停留更長時間。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 12. 閉合圓圈 最後，資深開發人員了解業力是如何運作的。他們知道，無論他們多麼努力，或者多麼聰明，在他們走向頂峰的道路上，都有數十個人的幫助。 這並沒有剝奪他們的優點，但也承認其他人。 所以他們關閉了這個圈子。 他們幫助其他開發人員。他們這樣做是沒有期望的。 不是因為它可能會讓你升職。或是地位，或是仰慕。他們這樣做是因為這是正確的事。  甚至科比·布萊恩也抽出時間來指導年幼的孩子並讓他們進入籃球領域。您也可以抽出時間來幫助新開發人員。 幫助剛起步的人會帶給你部分火花。初學者第一次看到事物時所感受到的熱情和好奇心是如此具有感染力。 另一件你可以變成日常習慣的事情！ 好的，就是這樣。具備這 12 個特徵，您將快速成長到高級甚至更高級別。 --- 原文出處：https://dev.to/dragosnedelcu/12-senior-developer-traits-junior-developers-need-to-master-285m
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
