JavaScript

如何創建一個滑鼠離開視窗時彈出的彈窗

你知道那些當你試圖關閉瀏覽器視窗時出現的煩人彈窗嗎？它們好像知道你在試圖關閉視窗，就像它們能讀取你的思想一樣。實際上，這是一個非常簡單的概念，你需要聽取特定的DOM事件。我個人不推薦使用彈窗，因為我覺得它們很煩人，但是你的公司可能要求你實現一個，所以在這裡我們就來實現一個。我喜歡保持事情簡單，所以這裡是HTML的部分： <!doctype html> <head> <title>彈窗頁面</title> </head> <body> <div id="popup"> <h3>彈窗！</h3> </div> </body> 再來是這部分的CSS： body { font-family: system-ui; background-color: #f6d198; } #popup { position: fixed; width: 100%; visibility: hidden; z-index: 10002; top: 0; opacity: 0; transform: scale(0.5); transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; position: relative; margin: 0 auto; text-align: center; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); width: 60%; background: #862a5c; padding-bottom: 100px; padding-top: 50px; color: #fff; font-size: 2rem; } 最後是這段JavaScript：...

如何動態導入 JavaScript 模組

了解如何動態導入 JavaScript 模組您是否曾經有過動態載入 JavaScript 模組的需求嗎？也許您正在嘗試從一個資料夾載入東西，但您不知道資料夾的名稱，它是動態生成的。但執行像這樣的操作： import test from folder + '/test.js' 或 import test from `${folder}/test.js` 無法正常運作。您需要進行動態導入，使用以下方法： const test = await import(folder + '/test.js') 我在JavaScript 動態導入中更詳細地介紹了 JavaScript 的這個相對較新的功能。

如何在 Ghost 網站上添加搜索功能

我想在自己使用 Ghost 架設的網站上添加搜索功能。你可以在這個頁面上看到這個教程的最終效果：https://ritywool.it/ricerca/。當你第一次開始處理這個任務時，你會覺得 “這一定很簡單”。但不知何故 Ghost 軟件並沒有提供一個簡單的解決方案，你需要使用第三方插件並修改模板。這確實需要一位懂得處理這些的開發者。不知道為什麼他們沒有提供一個內建的簡單解決方案，而不是需要像我這樣的開發者花時間來調整主題。這真是奇怪，因為他們在管理面板中有搜索功能，但卻沒有解決辦法來面對公共頁面。他們官方建議使用 Google 自定義搜索，但這實際上並不是一個解決方案。如果是一個靜態網站生成器，這也還可以理解，因為它沒有運行搜索的引擎，但 Ghost 不是一個靜態網站生成器。我探索了一段時間的可能選項。他們文檔中建議的一個選項是 GhostHunter，但這對我來說沒有起作用。我嘗試了一下，但在控制台中出現了各種 JavaScript 錯誤，而且我沒有耐心去看問題出在哪裡。這個項目似乎也已經被停止開發了，最後一次提交是 2 年前。然後我找到了 Ghost Finder，這個插件完美地解決了問題，所以我在這裡解釋一下如何使用。它是一個使用 Ghost API 來搜索文章的 JavaScript 庫。首先，我在本地創建了網站的副本（使用 npm install ghost-cli -g 和 ghost install local），並使用了在生產環境上使用的主題。我從 /ghost/#/settings/design 下載了這個主題。接著，我下載了 Ghost Finder 庫並將其放在 assets 目錄下。然後，我在 Ghost 管理面板中創建了一個具有 “/search” URL 別名的 search 頁面。然後我進入了編輯器，創建了一個 page-search.hbs 文件（後面的 - 之後的文件名必須與頁面別名匹配）。我在命令行中使用 ghost restart 重新啟動 Ghost，以使其識別到這個頁面（這只在本地需要，生產環境上不需要）。我使用了 Casper 默認主題，這部分可能因為你使用的主題不同而有所不同，不過我在 default.hbs 文件中加入了 Ghost Finder 的 JavaScript 文件（這會載入到所有頁面，不幸的是）：...

如何在 JavaScript 中使用初始值初始化新陣列

瞭解在 JavaScript 中如何使用一組值來初始化新陣列的方法簡單解決方案: Array(12).fill(0) fill() 是在 ES6 中引入的新方法。

如何在 JavaScript 中使用捕獲組擷取正則表達式的所有結果

我面臨了這樣的任務基本上，我有一個包含多個URL的字符串，我想使用正則表達式處理它們。這個正則表達式使用了捕獲組，非常方便。那麼，讓我們從獲取單個結果開始： const text = 'hello1 bla bla hello2' const regex = /hello\d/ text.match(regex) /* [ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ] */ 使用 g標誌可以從正則表達式中獲取多個結果，而且這是自動進行的，但現在 match() 的結果不同，只返回匹配的結果： const text = 'hello1 bla bla hello2' const regex = /hello\d/g console.log(text.match(regex)) //[ 'hello1', 'hello2' ] 使用 ES2020中的 matchAll() 方法可以獲得更詳細的結果集。該方法返回一個迭代器對象，所以需要使用循環來遍歷結果： for (let match of text.matchAll(regex)) { console.log(match) } /* [ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ] [ 'hello2', index: 15, input: 'hello1 bla bla hello2', groups: undefined ] */ 現在讓我們談談捕獲組。...

如何在 JavaScript 中使用頂層等待

學習如何在當前的 v8 中使用這個新功能通常只能在異步函數內部使用等待。因此通常要宣告立即調用的異步函數表達式來包裹它： (async () => { await fetch(/* ... */) })() 或者也可以先宣告一個函數然後再調用它： const doSomething = async () => { await fetch(/* ... */) } doSomething() 頂層等待將允許我們簡單地運行： await fetch(/* ... */) 而不需要這麼多樣板代碼。注意：這僅在ES模塊中運作。對於單個的 JavaScript 文件，無需打包工具，你只需將其保存為 .mjs 擴展名，就可以使用頂層等待。

如何在 JavaScript 中克隆任何物件

在 JavaScript 領域中，我們過去經常需要做各種關於克隆的事情。為什麼呢？因為…引用。基本類型（字串、數字、布林值…）總是可以正確地 “克隆”，因為它們是按值傳遞的。其他所有物件（物件、陣列、日期等等）都是物件。而物件是按引用傳遞的。所以，我們必須使用不同的方式進行深度克隆，否則你會得到同一個物件的引用，只是名稱不同。但現在已經是 2023 年，我們可以使用 structuredClone()。 const b = structuredClone(a) 這將深度克隆非基本類型。只需注意它是一個新的 API，所以如果你在瀏覽器中使用它，請確保使用提供 core-js（babel）polyfill 的建構工具。

如何在 JavaScript 中創建多行字符串

了解如何創建多行字符串直到 2015 年引入 ES6（ECMAScript 2015）和模板字面量，JavaScript 從未有過一個很好的處理多行字符串的方法。模板字面量是由反引號 delimit 的字符串，而不是常規的單引號/雙引號定界符。它們具有一個獨特的特性：它們允許多行字符串： const 多行字符串 = `一個跨行的字符串` const 另一個多行字符串 = `嘿這很酷一個跨行的字符串 ! `

如何在 JavaScript 中在特定索引位置添加項目到陣列

了解如何在 JavaScript 中在特定索引位置添加項目到陣列假設您想要在陣列中添加一個項目，但不想將項目附加在陣列的末尾。您想要明確地將其添加到陣列的特定位置。這個位置被稱為索引。陣列索引從0開始，因此如果您想要在第一個位置添加項目，則會使用索引0，在第二個位置索引是1，以此類推。要執行此操作，您將使用陣列的splice()方法。這個函數非常強大，除了我們現在要使用的方式之外，它還允許從陣列中刪除項目。因此，請謹慎操作。 splice()接受3個或更多個引數。第一個是起始索引：我們將開始進行更改的位置。第二個是刪除計數參數。由於我們是要添加到陣列中，所以在我們所有的示例中刪除計數都是0。在此之後，您可以添加一個或多個要添加到陣列中的項目。以下是一個示例。請看這個陣列： const colors = ['yellow', 'red'] 您可以在yellow之後添加一個項目，如下所示： colors.splice(1, 0, 'blue') //colors === ['yellow', 'blue', 'red'] 您還可以在yellow之後添加多個項目，如下所示： colors.splice(1, 0, 'blue', 'orange') //colors === ['yellow', 'blue', 'orange', 'red'] 注意：結果假設colors仍為['yellow', 'red'] 要在第一個位置添加，請將0作為第一個引數使用，如下所示： colors.splice(0, 0, 'blue') //colors === ['blue', 'yellow', 'red']

如何在 JavaScript 中在陣列的開頭新增項目

假設你想要在陣列的開頭新增一個項目。要執行這個操作，你可以使用陣列的 splice() 方法。 splice() 方法需要三個或更多的引數。第一個引數是起始索引，也就是我們要開始做變更的位置。第二個是刪除的數量，由於我們是要新增項目，所以在我們的範例中刪除的數量都是 0。在這之後，你可以新增一個或多個要加入陣列中的項目。要在第一個位置新增，將第一個引數設為 0： const colors = ['yellow', 'red']; colors.splice(0, 0, 'blue'); //colors === ['blue', 'yellow', 'red']