我想解決這個特定的使用情境，即在我的分析中追蹤訂閱我的電子報的人數作為一個「目標」。 我正在放棄使用Google Analytics，其中您可以設置「頁面漏斗目標」，意味著您訪問頁面X，您訪問頁面Y，這是一個目標。 在我正在嘗試的新分析工具（Plausible）中無法實現，因此我必須找到一個技巧。 在您訂閱之後，您會登錄到特定的頁面上，您可以從該頁面下載一些東西。 我不能說「目標是訪問此頁面」，因為人們可能保存它，將其加入書籤，稍後返回。 因此，我這樣做，在訂閱之後，您會被重定向到一個臨時頁面，並在頂部加入此JavaScript片段： <script> setTimeout(() => location.href = "/page", 2000) </script> 所以人們會在2秒後重定向到/page。 此外，我還添加了一個顯示「2秒後將您重定向到下載頁面…」的信息，並提供了一個「或點擊這裡」的鏈接，以防萬一（禁用了JavaScript？）他們無法重定向。
REPL代表Read-Evaluate-Print-Loop，這是一個快速探索Node功能的好方法。 我們使用node命令來運行Node.js腳本： node script.js 如果省略文件名，則使用REPL模式： node 如果你現在在終端中嘗試這樣做，會得到以下結果： ❯ node > 命令進入閒置模式，等待我們輸入內容。 提示：如果你不確定如何打開終端，請搜索“如何在…上打開終端”。 REPL等待我們輸入一些JavaScript代碼。 先從簡單的開始，輸入以下內容： > console.log('test') test undefined > 第一個值test是我們要求控制台打印的輸出，然後得到的是undefined，這是運行console.log()的返回值。 現在我們可以輸入新的JavaScript代碼。 使用Tab鍵來自動補全 REPL的一個很酷的功能是它的互動性。 在編寫代碼時，如果按下Tab鍵，REPL會嘗試自動補全你已經定義的變量或預定義的變量。 探索JavaScript對象 嘗試輸入JavaScript類的名稱，例如Number，然後加上一個點並按下Tab鍵。 REPL將打印出你可以訪問該類的所有屬性和方法： 探索全局對象 你可以通過輸入global.並按下Tab鍵來檢查你可以訪問的全局對象： 特殊變量 _ 如果在某些代碼之後輸入_，它將打印出上一個操作的結果。 點命令 REPL有一些特殊命令，都以點.開頭。它們包括： .help：顯示點命令的幫助信息 .editor：啟用編輯器模式，便於編寫多行JavaScript代碼。進入此模式後，輸入Ctrl-D運行編寫的代碼。 .break：在輸入多行表達式時，輸入.break命令將中止進一步的輸入，相當於按下Ctrl-C。 .clear：重置REPL上下文為空對象，並清除當前正在輸入的多行表達式。 .load：加載一個JavaScript文件，相對於當前工作目錄 .save：將REPL會話中的所有內容保存到文件中（指定文件名） .exit：退出REPL（相當於按兩次Ctrl-C） REPL知道何時你正在輸入多行語句，而不需要調用.editor命令。 例如，如果你開始輸入迭代器，像這樣： [1, 2, 3].forEach(num => { 然後按下enter鍵，REPL將移到一個以3個句點開頭的新行，表示你現在可以繼續編寫該塊的代碼。 ... console.log(num) ... }) 如果你在一行的末尾輸入.break，多行模式將停止，該語句將不被執行。
在這個教程中，我將使用Phaser.js創建一個平台遊戲。 玩家可以使用左/右箭頭鍵移動，使用上箭頭鍵跳躍。目標是收集遊戲中的所有星星： 當玩家收集到所有星星時，我們將在頂部顯示“遊戲結束”，然後沒有其他操作。 雖然這非常簡單，但這是開始一個非常有趣的遊戲的開始，並且這也是展示Phaser以及JavaScript作為遊戲創作編程語言的絕佳方式。 設置專案 創建一個空文件夾，然後運行以下命令： npm init -y 這將初始化一個最小的’package.json’文件。 然後運行以下命令： npm install phaser 如果尚未安裝Parcel，請運行以下命令： npm install -g parcel-bundler 現在創建一個’app.js’文件，然後運行： parcel watch app.js 這將告訴Parcel在’dist/app.js’文件中構建我們的遊戲。 創建一個’index.html’文件，內容如下： <!DOCTYPE html> <html> <head> <script src="./dist/app.js"></script> </head> </html> 安裝’browser-sync’以運行包含此文件夾內容的HTTP服務器： npm install -g browser-sync 然後運行以下命令： browser-sync start --server --files "." 以上命令會觀察當前文件夾（以及所有子文件夾）中的所有文件的變化，並在端口3000上啟動一個Web服務器，自動打開一個瀏覽器窗口以連接到服務器。 每次更改文件，瀏覽器都會刷新，因此我們可以更快地進行開發。 太好了！我們可以開始了。 初始化Phaser 打開’app.js’並編寫以下代碼： import Phaser from 'phaser' 讓我們添加一個最小的配置： const config = { width: 800, height: 600, backgroundColor: 0xffffff, scene: { preload, create, update }, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } } } const game = new Phaser....
以現代方式進行JavaScript變數的深拷貝 多年以來，我們一直使用奇怪的解決方法來進行JavaScript物件的深拷貝。 其中許多方法容易出現錯誤。 比如使用JSON.parse(JSON.stringify(obj))，這種方法可能會忽略某些類型的物件。 或者更糟糕的是，通過引用來複製物件屬性，這樣可能會引入未來的錯誤。 如今，我們有structuredClone()，它是DOM API的一部分。 它不是JavaScript的一部分，而是DOM API的一部分。 它在所有現代瀏覽器的最新版本中都可用： 在Node.js 17+中也可用。
如何使用瀏覽器提供的confirm() API來讓使用者確認操作 confirm()允許我們在執行某些操作之前詢問使用者確認。 這個API的歷史可以追溯到網絡的起源，並且被每個瀏覽器支持。 它非常簡單，我認為它在許多不同情況下都可能派上用場，而不需要自定義的UI。 它的工作原理如下：您調用confirm()函數，傳遞一個表示要確認的內容的字符串，該內容將顯示給用戶： confirm("確定要刪除該元素嗎？") 在Chrome中顯示如下： 在Safari中顯示如下： 在Firefox中顯示如下： 正如您所見，在每個瀏覽器中顯示稍有不同，但是概念是相同的。 您應該調用window.confirm()，但由於window是隱式的，所以也可以僅使用confirm() 瀏覽器會阻止腳本的執行，直到用戶點擊確定或取消按鈕。沒有點擊按鈕，您無法退出。 對confirm()的調用會返回一個布爾值，如果用戶點擊了確定，則返回true；如果用戶點擊了取消，則返回false，因此我們可以將其賦值給一個變量，或在條件語句中使用它： const confirmed = confirm("確定要刪除該元素嗎？") if (confirm("確定要刪除該元素嗎？")) { console.log('已確認') }
如果你需要在 DOM 中使用原生 JavaScript 為 HTML 元素添加屬性，該怎麼辦呢？ 假設你已經使用 querySelector() 選中了一個元素： const button = document.querySelector('#mybutton') 你可以按照以下步驟為它附加屬性： 創建屬性 設置屬性的值 將屬性附加到元素上 例如： const attribute = document.createAttribute('id') attribute.value = `remove-${item.name}` button.setAttributeNode(attribute) 如果該元素尚不存在，則你需要先創建元素，然後創建屬性，再將屬性添加到元素上，最後再將元素添加到 DOM 中： const button = document.createElement('button') const attribute = document.createAttribute('id') attribute.value = `some-value` button.setAttributeNode(attribute) button.textContent = 'Click me' document.querySelector('.container').appendChild(button)
使用地理定位 API 我們可以向瀏覽器請求使用者的位置座標。 瀏覽器提供了一個 navigator.geolocation 對象，通過這個對象我們可以執行所有的地理定位操作。 由於安全性考慮，地理定位 API 只在使用 HTTPS 服務的頁面上可用，並且在所有現代瀏覽器上都可用。 navigator.geolocation 由於 window 是全局對象，我們可以直接訪問 navigator 而無需指定 window.navigator。 瀏覽器提供的 window.navigator 屬性指向一個名為 Navigator 對象 的容器對象，它使我們能夠使用許多 Web 平台 API。 geolocation 對象提供了以下方法： getCurrentPosition() watchPosition() clearWatch() 第一個方法用於獲取當前的位置座標。當我們第一次調用此方法時，瀏覽器會自動要求用戶允許我們訪問此信息。以下是在 Chrome、Firefox 和 Safari 上展示此界面的示例： 此操作只需在每個來源上執行一次。您可以更改您的決定，並撤消權限決策。以下示例演示如何在 Chrome 上進行更改： 一旦授予此權限，我們就可以繼續操作。 獲取使用者的位置 讓我們從以下示例代碼開始： navigator.geolocation.getCurrentPosition(() => {}) 應該會彈出權限窗格，請允許權限。 請注意，我傳遞了一個空的箭頭函數（arrow function），因為該函數需要一個回調函數。 此函數接收一個包含實際位置信息的 Position 對象： navigator.geolocation.getCurrentPosition(position => { console.log(position) }) 此對象具有2個屬性： coords，一個 Coordinates 對象 timestamp，獲取位置時的 UNIX 時間戳 Coordinates 對象具有幾個定義位置的屬性： accuracy，位置測量值的精確度，以米為單位。 altitude，測量的高度值。 altitudeAccuracy，高度測量精確度，以米為單位。 heading，設備行進的方向。以度為單位表示（0 = 北，90 = 東，180 = 南，270 = 西）。 latitude，測量的緯度值。 longitude，測量的經度值。 speed，設備行進的速度，以米/秒為單位。 根據不同的實現和設備，其中一些屬性可能為 null。例如，在我的 MacBook Air 上運行的 Chrome 上，我只獲得了 accuracy、latitude 和 longitude 的值。...
了解如何使用純 JavaScript 隱藏和重新顯示元素。 要如何使用純 JavaScript 隱藏 DOM 元素？ 每個元素都有一個 style 屬性，可以使用它來修改 CSS 的樣式屬性。 你可以將 display 屬性設置為 ’none’（就像在 CSS 中使用 display: none; 一樣）： element.style.display = 'none'; 若要再顯示它，將其設回 block 或 inline： element.style.display = 'block';
了解如何修复 JavaScript 中的小数运算问题 如果你在 JavaScript 中尝试对两个小数进行求和，你可能会有一个惊喜。 0.1 + 0.1 是，如你所预期的，0.2 但是有时候你会得到一些意外的结果。 比如 0.1 + 0.2。 结果并不是如你预期的 0.3，而是 0.30000000000000004。 或者 1.4 - 1，结果是 0.3999999999999999 我确定你的问题是：为什么会这样？ 首先，这不仅仅是 JavaScript 的问题，对于每一种编程语言都是一样的。 原因是计算机将数据存储为二进制的 0 或 1。 任何一个值都可以表示为二进制数字系统中的一个 2 的幂。 1 可以表示为 1 * 2^0 10 可以表示为 1 * 2^1 + 0 * 2^0 并不是每个十进制数字都能够完美地在这个二进制格式中表示，因为一些数字在二进制中是重复的数字。尝试将 0.1 从十进制转换为二进制。 简而言之，我们需要无限精度来表示 0.1，虽然计算机可以很好地近似，但当我们进行计算时，我们会失去一些数据，因为我们需要在某个地方“截断”，这就导致了你在上面看到的那些意外的结果。 你可以使用像 decimal.js、bignumber.js 或 big.js 这样的库。 你也可以使用这样的“技巧”。 你决定在小数点后面截断两个位置，例如，将数字乘以 100 来去除小数部分。 然后在求和后除以 100： 0.1 + 0.2 //0.30000000000000004 (0.1.toFixed(2) * 100 + 0....
以下是如何修復 JavaScript 中的錯誤 “Uncaught SyntaxError: cannot use import statement outside a module” 的方法。 在從 JavaScript 文件中導入函數時，我遇到了這個錯誤：Uncaught SyntaxError: cannot use import statement outside a module。 這個錯誤的原因是：你正在嘗試使用 import 語句，但你不在 ES 模組中（ES module）。 這個錯誤可能發生在 Node.js 環境中或瀏覽器中。 首先，這是 Node.js 的解決方案：你需要在項目的文件夾中添加一個 package.json 文件，並加入以下內容： { "type": "module" } 對於瀏覽器，當你加載腳本時，需要在 script 標籤中添加 type 屬性並設置值為 module，像這樣： <script type="module" src="./file.js"></script> 而不是： <script src="./file.js"></script>