我非常喜歡Astro的frontmatter。 我們可以在其中放置任何JavaScript，而其中最有用的功能之一就是在構建時擷取資料。 我們可以使用fetch()或者Fetch API來實現擷取。 Astro的好處是它支援在frontmatter中使用top-level await，因此我們不需要像使用IIFE（[立即執行函式](https://zh.wikipedia.org/wiki/%E5%8D%B3%E6%99%82%E5%87%BD%E5%BC%8F%E8%A1%A8%E7%A4%BA%EF%BC%89））或者調用async function來使用fetch()，因為fetch是一個基於promise的API。 換句話說，你可以直接使用await： --- const res = await fetch('https://api.sampleapis.com/coffee/hot') const data = await res.json() --- <ul> {data.map(item => ( <li>{item.title}</li> ))} </ul> 值得再次提醒的是，這個網絡請求是在構建時進行的，因此只在網站部署時執行一次。 當然，在再次部署時也會執行。 因此，如果我們在API中做了任何更改，如果你希望網站顯示新數據，你需要觸發重新構建，這通常可以通過Webhooks在各個平台上實現。

在Dockerfile介紹文章中，我介紹了一個簡單的 Node.js Dockerfile 示例： FROM node:14 WORKDIR /usr/src/app COPY package*.json app.js ./ RUN npm install EXPOSE 3000 CMD ["node", "app.js"] 注意：在CMD行中使用雙引號。單引號將導致錯誤。 讓我們使用這個 Dockerfile 构建一個映像，然後運行容器。 我將在 dev/docker/examplenode 文件夾中創建這個文件。我在 app.js 文件中創建了一個簡單的 Node.js 應用，使用 Express 框架： const express = require('express') const app = express() app.get('/', (req, res) => res.send('Hello World!')) app.listen(3000, () => console.log('Server ready')) 非常簡單，但是我們有一個依賴項。我需要將它添加到 package.json 文件中，所以我運行了以下命令： npm init -y npm install express 現在你可以運行 node app.js 確保它正常運行： 停止這個進程，現在讓我們從這個創建一個 Docker 映像。 你只需要保留 app.js、package.json 和 package-lock....

了解一下在學習React之前是否需要學習一些東西 如果您想學習React，首先需要掌握一些基礎知識。特別是一些在React中會反覆使用的最新JavaScript功能。 有時候人們認為某個特定功能是React提供的，但實際上它只是現代JavaScript語法。 起初不需要成為這些主題的專家，但您深入研究React時，就需要更加熟練地掌握這些知識。 我將列出一些事項，並提供我撰寫的文章的連結，以幫助您快速掌握基礎知識： JavaScript類 ES模組 非同步編程的基礎知識：回調函數，Promise，async/await 箭頭函數 this關鍵字 展開運算符 解構賦值 物件字面量 JavaScript函數式編程

如果您剛剛開始學習JavaScript，您需要多深入地了解這門語言呢？ 作為初學者，在您對編程能力充滿信心之前確實很難達到這一點。 在學習編程的過程中，您可能會感到困惑，不知道JavaScript在哪裡結束，Node.js從哪裡開始，反之亦然。 在潛入Node.js之前，我建議您對主要的JavaScript概念有良好的掌握： 語法結構 表達式 類型 變量 函數 this 箭頭函數 迴圈 迴圈和作用域 數組 模板字面量 分號 嚴格模式 ECMAScript 6、2016、2017 掌握了這些概念，您就可以成為一名熟練的JavaScript開發人員，在瀏覽器和Node.js兩個環境中都能夠應對自如。 以下概念也是理解非同步編程的關鍵，而非同步編程是Node.js的一個基本部分： 非同步編程和回調函數 計時器 Promises Async和Await 閉包 事件循環

在編寫JavaScript代碼時，您可能需要延遲函數的執行。了解如何使用setTimeout和setInterval在未來安排函數的執行。 setTimeout() 零延遲 setInterval() 遞迴setTimeout setTimeout() 在編寫JavaScript代碼時，您可能需要延遲函數的執行。 這就是setTimeout的工作。您指定一個將要延遲執行的回調函數，以及以毫秒表示的延遲時間： setTimeout(() => { // 2秒後執行 }, 2000) setTimeout(() => { // 50毫秒後執行 }, 50) 這個語法定義了一個新函數。您可以在其中調用任何其他函數，或者可以傳遞一個現有的函數名稱和一組參數： const myFunction = (firstParam, secondParam) => { // 做些事情 } // 2秒後執行 setTimeout(myFunction, 2000, firstParam, secondParam) setTimeout返回計時器id。這通常不會使用，但您可以存儲這個id，如果要刪除該計劃的函數執行，則可以清除它： const id = setTimeout(() => { // 應該在2秒後執行 }, 2000) // 我改變了主意 clearTimeout(id) 零延遲 如果將延遲時間設置為0，則回調函數將盡快執行，但在當前函數執行之後執行： setTimeout(() => { console.log('after ') }, 0) console.log(' before ') 將打印before after。 這對於避免在密集任務上阻塞CPU並在執行繁重計算時讓其他函數執行非常有用，通過在調度程序中對函數進行排隊。 某些瀏覽器（IE和Edge）實現了一個setImmediate()方法，具有完全相同的功能，但它不是標準的，並且在其他瀏覽器上不可用。但它是Node.js中的標準函數。 setInterval() setInterval是一個與setTimeout類似的函數，但有一個區別：它不僅運行一次回調函數，而是以您指定的特定時間間隔（以毫秒為單位）無限次運行：...

使用React來建立一個簡單的Google Sheets或Excel的克隆版本。 相關內容 第一步 構建簡單的試算表 介紹公式 性能優化 保存表格內容 總結 用React創建一個能工作且可配置重用的試算表React組件，可以支持所有計算需要 🙂 相關內容 此教程涵蓋以下主題，我已編寫了相應的指南： React JSX ES6 如果你對這些主題還不熟悉，你可能會想先查看一下這些指南來入門。 第一步 此教程的代碼可在GitHub上找到：https://github.com/flaviocopes/react-spreadsheet-component 首先，我們將詳細介紹我們要構建的内容。我們將創建一個Table組件，它將具有固定數量的行。每一行都有相同數量的列，每一列都是一個Cell組件。 我們將能夠選擇任何單元格，並在其中輸入任何值。此外，我們還能對這些單元格執行公式，從而創建一個工作中的試算表，完全不會輸在Excel或Google Sheets😏</sarcasm>。 下面是一個小Demo動畫： 該教程首先介紹了試算表的基本組件，然後進入更高級的功能，比如： 添加公式計算的能力 優化性能 將內容保存到本地存儲中 構建簡單的試算表 如果你還沒有安裝create-react-app，那麼現在就可以安裝了： npm install -g create-react-app 然後運行： npx create-react-app spreadsheet cd spreadsheet npm start React應用程序將在localhost:3000上啟動： 這個操作在spreadsheet文件夾中創建了很多文件： 我們現在只需要關注App.js。該文件默認包含以下代碼： import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App....

Emmet 是一個非常方便的工具，可以讓你快速編寫 HTML。就像魔法一樣。Emmet 不是什麼新東西，已經存在多年，每個編輯器都有對應的插件。 從頭開始建立 HTML 檔案 > 和 + 更高級 倍數 分組以便提高可讀性 id 和 class 屬性 添加獨特的 class 或 id 其他屬性 添加內容 在你的標記中添加遞增數字 標頭中標籤的參考 常用標籤的參考 語義化 HTML 標籤的參考 表單元素的參考 Emmet 是一個非常方便的工具，可以讓你快速編寫 HTML。 就像魔法一樣。 Emmet 不是什麼新東西，已經存在多年，每個編輯器都有對應的插件。在 VS Code 中，Emmet 是內建的功能，當編輯器識別到可能的 Emmet 命令時，會顯示提示信息。 如果你輸入的內容沒有其他解釋，且 VS Code 認為它可能是一個 Emmet 表達式，它會直接在提示信息中預覽該內容: 然而，直到我開始研究並撰寫關於 Emmet 的內容，我才真正知道如何充分利用它的細節。 我希望在我的日常工作中使用它，所以這是我學到的關於 Emmet 的內容。 從頭開始建立 HTML 檔案 輸入 !，將獲得一個基本的 HTML 範本來開始編寫： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html> 和 +...

在電子和時間測量中，你會經常遇到這些詞語：毫、微、納、皮。它們的意思是什麼呢？ 在電子和時間測量中，你會經常遇到這些詞語：毫、微、納、皮。 本文是對這些詞語含義的快速參考。 毫 = 10^-3 = 0.001 微 = 10^-6 = 0.000001 納 = 10^-9 = 0.000000001 皮 = 10^-12 = 0.000000000001 我使用的順序很重要，要記住它們的含義：反復幾次，毫-微-納-皮，下次你就會記住它們了。

IndexedDB 是瀏覽器多年來引入的一種存儲功能之一。這是一個關於 IndexedDB 的介紹，這是一種由所有現代瀏覽器支持的 Web 數據庫。 介紹 IndexedDB 創建 IndexedDB 數據庫 如何創建數據庫 將數據添加到數據庫中 在創建存儲時添加數據，進行初始化 在存儲創建後添加數據，使用事務 從存儲中獲取數據 從存儲中獲取一個項目：get() 從存儲中獲取所有項目：getAll() 從 IndexedDB 中刪除數據 刪除整個 IndexedDB 數據庫 刪除對象存儲中的數據 從之前的數據庫版本遷移 唯一鍵 檢查存儲是否存在 從 IndexedDB 中刪除 刪除數據庫 刪除對象存儲 要刪除對象存儲中的數據，請使用事務 還有更多！ 介紹 IndexedDB IndexedDB 是多年來引入瀏覽器的數據存儲能力之一。 它是一個鍵值存儲（NoSQL 數據庫），被認為是“在瀏覽器中存儲數據的終極解決方案”。 它是一個異步 API，這意味著執行昂貴的操作不會阻塞 UI 线程，為用戶提供了流暢的體驗。它可以存儲無限量的數據，但一旦超過一定閾值，用戶將被提示提高站點限制。 它在所有現代瀏覽器上都受支持。 它支持事務、版本控制並提供良好的性能。 在瀏覽器內部，我們也可以使用： Cookies：可以存儲大量字符串 Web Storage（或 DOM Storage），這是一個常用來識別 localStorage 和 sessionStorage 的術語，它們都是鍵值存儲。sessionStorage 不會保留數據，當會話結束時，數據就被清除了，而 localStorage 會在不同的會話之間保留數據。 本地/會話存儲的缺點是被限制在一個小（且不一致）的大小，不同瀏覽器的實現為每個站點提供2MB到10MB的空間。 過去，我們還有 Web SQL，一個對 SQLite 的封裝。但現在 Web SQL 已經被棄用，在一些現代瀏覽器上不受支持，它從未被公認為標準，因此不應使用。然而，根據 Can I Use 的數據，83% 的用戶設備上有此技術。...

很多時候，程式碼範例會使用最新的 JavaScript 功能。有時，這些功能很難與框架的功能區分開來。這在 React 中經常發生，例如 React 鼓勵一種非常現代化的 JavaScript 方法。 很多時候，程式碼範例會使用最新的 JavaScript 功能。 有時，這些功能很難與框架的功能區分開來。這在 React 中經常發生，例如 React 鼓勵一種非常「現代化」的 JavaScript 方法。 本文旨在解釋那些可能讓你困惑的細節，尤其是如果你來自 ES6 之前的 JavaScript 背景，或者如果您從零開始學習的話。 目標是讓您至少能識別出哪些結構是常規的 JavaScript，哪些結構屬於框架的一部分。我不會深入解釋這些東西的工作原理，而是會給一些指標，以供您深入了解。 箭頭函式 箭頭函式的語法如下： const myFunction = () => { //... } 與常規函式略有不同： const myFunction = function() { //... } 小括號可以包含參數，就像常規函式一樣。有時，在函式中只有一個語句時，大括號會完全省略，這是一個隱式返回值（不需要 return 關鍵字）： const myFunction = i => 3 \* i 更多關於箭頭函式 展開運算符 如果你看到以下程式碼： const c = [...a] 這個語句複製了一個陣列。 你也可以將項目新增到陣列中，使用以下語法： const c = [...a, 2, 'test'] ....