JavaScript

在 JavaScript 中用 slugify 給字符串添加斜線字尾

在這個技術博客中，我們將學習如何在 JavaScript 中使用 slugify 函數給字符串添加斜線字尾。首先，你需要安裝 slugify 函數庫： npm i slugify 然後導入它： import slugify from 'slugify' 你可以這麼做： const slug = slugify('Testing this') console.log(slug) //testing-this 請注意，如果該字符串中包含點或其他標點符號，slugify 函數不會刪除它們。如果需要刪除這些標點符號，你可以使用正則表達式，像這樣： slugify('Testing. this!', { remove: /[\*+~.,()'"!:@]/g })

在 JavaScript 中解構對象和數組

學習如何使用解構語法在 JavaScript 中處理數組和對象給定一個對象，使用解構語法可以將其中一些值提取出來並放入命名變量中： const person = { firstName: 'Tom', lastName: 'Cruise', actor: true, age: 54 // made up } const { firstName: name, age } = person // name: Tom, age: 54 name 和 age 包含了所需的值。這種語法也可以應用於數組： const a = [1, 2, 3, 4, 5] const [first, second] = a 這個語句通過從數組 a 中使用索引 0、1、4 獲取項目創建了 3 個新變量： const [first, second, , , fifth] = a

在JavaScript中動態選擇對象的方法

學習如何在JavaScript中動態訪問對象的方法有時候你有一個對象，根據某些條件需要調用一個方法或不同的方法。例如，你有一個 car 對象，根據 driver.sleepy 的值，你可能想要把它開車(drive())或停車(park())。如果司機的瞌睡程度超過6，我們需要在他開車時把車停下來。以下是使用 if/else 條件語句實現此功能的例子： if (driver.sleepy > 6) { car.park() } else { car.drive() } 讓我們重寫這個例子，使它更加動態。我們可以使用三元運算符動態選擇方法名，並將它作為字符串值獲取。使用方括號，我們可以從對象的可用方法中選擇它： car[driver.sleepy > 6 ? 'park' : 'drive'] 通過上面的語句，我們獲取了方法的引用。我們可以通過追加括號來直接調用它： car[driver.sleepy > 6 ? 'park' : 'drive']()

在JavaScript中生成隨機而唯一的字符串

在構建我的在線課程平台時，我遇到了生成數千個唯一URL的問題。每個參與課程的人都會被分配一個唯一的URL。後端知道所有這些URL並將有效的URL映射到課程內容上。我希望有一個唯一的URL，因為我可以將URL關聯到購買郵件。這樣，我就可以避免使用登錄功能，同時讓每個人都有一個單獨的URL，以便在URL意外或故意被公開分享時，我可以阻止濫用。於是我開始寫我的Node.js腳本。我使用了randomstring這個包，並將數字添加到Set對象中，直到我得到想要的數量。使用Set意味著每個字符串都是唯一的，因為調用add並傳遞重複的字符串不會產生任何效果。我創建了一個名為generateStrings()的函數來返回這個Set： const generateStrings = (numberOfStrings, stringLength) => { const randomstring = require('randomstring') const s = new Set() while (s.size < numberOfStrings) { s.add(randomstring.generate(stringLength)) } return s } 可以這樣調用它： const strings = generateStrings(100, 20) 其中100是我想要的字符串數量，20是每個字符串的長度。一旦我們獲得了這個Set，我們可以使用values()Set方法來遍歷它們： for (const value of strings.values()) { console.log(value) }

在Node.js中解析JSON

如何從字符串解析JSON，以及如何在Node.js中讀取JSON文件如果您有一個字符串作為一部分的JSON數據，最好的方法是使用JavaScript標準的JSON.parse方法來解析數據。自ECMAScript 5以來，這個方法已經提供給V8，這是Node.js所使用的JavaScript引擎。示例： const data = '{ "name": "Flavio", "age": 35 }' try { const user = JSON.parse(data) } catch(err) { console.error(err) } 請注意，JSON.parse是同步的，所以JSON文件越大，你的程序執行時間也會越長，因為需要阻塞程序執行直到解析完成。你可以通過將其放在一個promise和setTimeout調用中，以異步方式處理JSON。這確保解析在事件循環的下一次迭代中進行。 const parseJsonAsync = (jsonString) => { return new Promise(resolve => { setTimeout(() => { resolve(JSON.parse(jsonString)) }) }) } const data = '{ "name": "Flavio", "age": 35 }' parseJsonAsync(data).then(jsonData => console.log(jsonData)) 如果您的JSON數據是存在文件中的，您首先需要讀取它。一種非常簡單的方法是使用require()： const data = require('./file.json') 由於你使用了.json擴展名，所以require()足夠聰明，會自動解析JSON數據到data對象中。唯一的一個缺點是文件讀取是同步的方式進行的。此外，require()的結果會被緩存，所以如果您因為更新了文件而再次調用它，直到程序退出之前，您將無法獲取新的內容。這個功能用於使用JSON文件作為應用程序配置的一部分，這是一個完全有效的使用場景。您還可以手動讀取文件，使用fs.readFileSync： const fs = require('fs') const fileContents = fs....

在不同的JavaScript庫中進行相同的POST API調用

我使用了一個很酷的應用程序Insomnia來測試API，它允許您對REST API或GraphQL API服務進行HTTP請求。該應用程序具有一個很好的按鈕，可以生成代碼以從應用程序複製API請求，您可以在其中以可視化方式設計所有請求數據。在內部，他們使用了httpsnippet，這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。無論如何，導出的代碼片段有幾個，我想展示不同庫中相同的API調用。首先，這是API調用的描述。我向 api.randomservice.com 網站發送一個POST請求（這是我隨便想出的一個隨機URL）到 /dog 端點。我向該端點發送一個帶有2個屬性的對象： { name: 'Roger', age: 8 } 作為JSON編碼。我還傳遞了一個 content-type 以將內容設置為 application/json，並且還傳遞了一個 authorization 標頭，以使用通過API儀表板分配給我的Bearer令牌對請求進行身份驗證。 XHR 第一個代碼示例是使用XHR（可在瀏覽器中原生支持）和在Node.js中使用xmlhttprequest庫： const data = JSON.stringify({ name: 'Roger', age: 8 }); const xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener('readystatechange', function() { if (this.readyState === this.DONE) { console.log(this.responseText); } }); xhr.open('POST', 'https://api.randomservice.com/dog'); xhr.setRequestHeader('content-type', 'application/json'); xhr.setRequestHeader('authorization', 'Bearer 123abc456def'); xhr.send(data); Fetch API 然後，我們使用Fetch API進行相同的代碼片段，這也是另一個在瀏覽器中原生可用且可以在Node.js中使用node-fetch的API： fetch('https://api.randomservice.com/dog', { method: 'POST', headers: { 'content-type': 'application/json', authorization: 'Bearer 123abc456def' }, body: JSON....

在瀏覽器中使用原生 JavaScript 實現事件委派

在 jQuery 中，我最喜歡的功能之一就是事件委派。特別是.on()方法。我們先選擇一個 DOM 元素，然後使用.on()來附加一個事件處理程序，該處理程序將在該元素的特定子元素上執行。為什麼這很有用？因為如果你動態地將元素添加到 DOM 中，通過.on()注册的單個事件監聽器將對所有子元素都有效，包括在註冊事件處理程序之後添加到 DOM 中的子元素。假設你有一個表格。在表格內部，我們有一組行，每個行都有一個帶有點擊處理程序的按鈕。在 DOM 加載時，你註冊一個事件監聽器： document.addEventListener('DOMContentLoaded', () => { const buttons = document.querySelectorAll('button') for (const button of buttons) { button.addEventListener(...) } }) 但如果我們向表格中添加一個新的行，我們還必須記得註冊一個新的事件監聽器。那麼我們如何使用原生 JavaScript 實現相同的功能呢？我們可以創建一個 on 函數，該函數接受三個參數：包裹元素的選擇器，事件類型（例如 'click' 字符串），以及子元素的選擇器字符串，用於匹配包裹元素的後代元素。在這個函數中，我們首先創建一個循環，然後對每個與我們的包裹元素選擇器匹配的元素添加事件監聽器（因此它可以應用於多個包裹元素）。然後，如果事件的目標與我們的子元素選擇器（函數的第三個參數）匹配，我們調用作為第四個參數傳遞的回調函數，並將事件作為參數傳遞： const on = (selector, eventType, childSelector, eventHandler) => { const elements = document.querySelectorAll(selector) for (element of elements) { element.addEventListener(eventType, eventOnElement => { if (eventOnElement.target.matches(childSelector)) { eventHandler(eventOnElement) } }) } } 這是我們如何調用這個函數：...

在處理 DOM 時，時間的重要性

在與我的編程訓練班學生一起工作時，我幫助了其中一些人解決了一個問題：時間。特別是，有一件事起初可能並不明顯。當您存取 DOM 元素的值並將其存儲到變量中時，當 DOM 元素更改時，該變量將不會更新為新值。假設您在表單中有一個輸入字段 <input id="temperature">，並以以下方式獲取其值： const temperature = document.querySelector('input#temperature').value temperature 變數會獲取瀏覽器在執行此語句時輸入字段的狀態，並且值將永遠保持不變。這就是為什麼您不能像這樣操作： const temperature = document.querySelector('input#temperature').value document.querySelector('form') .addEventListener('submit', event => { //將溫度值發送到服務器 }) 而您需要在提交表單時訪問溫度值： document.querySelector('form') .addEventListener('submit', event => { const temperature = document.querySelector('input#temperature').value //將溫度值發送到服務器 }) 或者，您可以將輸入字段的引用存儲在變量中，然後在提交表單時使用它來訪問其值： const temperatureElement = document.querySelector('input#temperature') document.querySelector('form') .addEventListener('submit', event => { const temperature = temperatureElement.value //將溫度值發送到服務器 })

如何使用 Drag and Drop API

了解如何使用 Drag and Drop API 為您的使用者創建交互式體驗使用 Drag and Drop API，您可以定義頁面中的哪些元素是可拖動的，並在用戶拖動元素時攔截它。它在現代瀏覽器中得到了很好的支持：在我們開始研究這個 API 之前，我們必須知道如何定義頁面中的可拖動元素。我們可以通過在頁面的 HTML 中添加 draggable 屬性並將其設置為 true 來實現： <div draggable="true"> ... </div> 這就足以使元素成為可拖動的。提示：圖片、文字選擇和鏈接默認情況下是可拖動的，除非您在它們上面設置了 draggable 為 false。我們還可以從用戶計算機中將文件拖動到瀏覽器中。在這種情況下，我們傳輸的是文件。我們還需要澄清的另一點是元素可以拖放到哪裡。就像我們不能隨意拖動任何元素一樣，我們也不能隨意拖放到任何元素中。元素必須是有效的放置目標。要使元素成為放置目標，您需要侦聽其 dragover 事件，並根據需要從該事件返回 false 或調用 preventDefault()： const element = document.querySelector('#my-drop-target') element.addEventListener('dragover', event => { event.preventDefault() }) 一旦完成了上述步驟，我們就擁有了一個可拖動元素和一个放置目標，就可以開始進一步操作了。我們可以與可拖動元素交互的事件有： dragstart drag dragend 放置目標上可以交互的事件有： dragenter dragover dragleave drop 拖放操作概述及觸發的事件當用戶開始拖動一個可拖動元素時，可以進行鼠標點擊並移動鼠標，或者也可以單擊並保持選擇，然後移動選擇區，此時會在元素上觸發 dragstart 事件： element.addEventListener('dragstart', event => { //... }) 傳遞給事件處理函數的 event 對象是一個 DragEvent 對象。它是從更一般的事件對象中擴展出來的，與所有其他事件（鼠標，鍵盤，滾動等）共享。...

如何使用 insertAdjacentHTML

insertAdjacentHTML 是一個非常酷的 DOM 方法，我們可以在任何 DOM 元素上調用它來向頁面添加新的內容。這是一種很好且靈活的插入新內容的方式。該方法在一個元素上被調用，並接受兩個參數：位置和包含 HTML 的字符串。以下是一個示例： const item = `<div> test </div> ` document.querySelector('#container').insertAdjacentHTML('afterend', item) 請注意這裡的 afterend 字符串。它表示我們要將 HTML 添加到容器中的位置。我們有四個可能的位置： beforebegin：在元素之前 afterbegin：在元素的第一個子元素之前 beforeend：在元素的最後一個子元素之後 afterend：在元素之後以下是我們如何向列表添加新項目的示例： document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')