JavaScript的基本術語

在前端開發中，JavaScript 是少不了的。隨着技術的日新月異，JavaScript 也在不斷帶來新的功能、術語和概念，使 Web 應用程序更具交互性、高效且用戶友好的體驗。 若想從事前端開發相關工作，那麼掌握 JavaScript 的基本術語是至關重要的。 接下來我們一起來探討 JavaScript 關鍵概念，從入門到高級。

理解 JavaScript 中的 ReadableStream

ReadableStream 是 Streams API 的一部分，它提供了一種在 JavaScript 中處理流數據的方法。 流是允許您連續從源讀取數據或將數據寫入目標的對象。 簡而言之，流提供了一種在數據到達時進行逐段處理數據的方法，它比將整個數據塊加載到內存中更有效。 ReadableStream的應用

獲取大型資源： 非常適合處理大型數據集或文件的場景，允許您在第一個塊可用時立即處理數據，而不是等待整個資源下載。
實時數據： 對於需要實時數據處理的應用程序非常有用，例如實時音頻或視頻流。

// Assuming fetch API supports streams
fetch('path/to/text-file.txt')
    .then(response => {
        const reader = response.body.getReader();
        return new ReadableStream({
            start(controller) {
                function push() {
                    reader.read().then(({
                        done,
                        value
                    }) => {
                        if (done) {
                            controller.close();
                            return;
                        }
                        controller.enqueue(value);
                        push();
                    });
                }
                push();
            }
        });
    })
    .then(stream => new Response(stream))
    .then(response => response.text())
    .then(text => console.log(text))
    .catch(err => console.error(err));

DOM（文檔對象模型）

DOM 是 Web 文檔的編程接口。它代表頁面，以便程序可以更改文檔結構、樣式和內容。 DOM 將文檔表示爲節點和對象,這樣編程語言就可以與頁面交互。 瞭解 DOM 對於操作網頁（包括動態添加、刪除或修改元素和內容）至關重要。

// Accessing an element and changing its text content
  document.getElementById('demo').textContent = 'Hello, World!';

模塊系統

JavaScript 的模塊系統，例如 CommonJS 和 ES 模塊，改變了開發人員組織和重用代碼的方式。 通過將代碼劃分爲可管理的模塊，這些系統增強了代碼的可維護性、可讀性和可擴展性，從而使構建複雜應用程序變得更加簡單。

  // ES Modules example
  import {
      fetchData
  } from './api.js';
fetchData().then(data => console.log(data));

JavaScript 中的有效負載

在 JavaScript 中，尤其是在處理 Web 開發和 API 時，有效負載 是指在請求中發送或在響應中接收的實際數據。 有效負載可以採用多種格式，其中 JSON 是最常見的格式之一，因爲它具有輕量級且易於解析的結構。 爲什麼有效負載很重要？

數據交換： 有效負載是客戶端和服務器之間數據交換的關鍵。瞭解如何處理有效負載對於實現 API 調用、Ajax 請求以及任何形式的數據檢索或提交至關重要。
效率： 瞭解如何有效地構建和解析有效負載可以顯着影響 Web 應用程序的性能。

// Sending a JSON payload to a server
fetch('https://api.example.com/data', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            key: 'value'
        }),
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch((error) => console.error('Error:', error));
	

事件

事件是您正在編程的系統中發生的操作或事件，系統會告訴您這些信息，以便您可以根據需要以某種方式響應它們。 例如，事件可以是用戶交互（例如單擊和鍵入）或系統事件（例如資源加載）。 處理事件是創建交互式 Web 應用程序的基礎，它允許開發人員執行代碼來響應用戶操作。

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

內容安全策略 (CSP)

內容安全策略 (CSP) 是一種安全標準，旨在防止跨站點腳本 (XSS)、點擊劫持和其他代碼注入攻擊。 通過指定允許的腳本、樣式和其他資源源，CSP 可以幫助開發人員保護其 Web 應用程序免受惡意活動的侵害。

活動委託

事件委託利用事件冒泡的概念向父元素添加單個事件偵聽器，而不是向各個子元素添加多個偵聽器。 此策略優化了性能和內存使用，特別是在具有許多交互元素的動態應用程序中。

document.getElementById('parent').addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        console.log('List item clicked!');
    }
});

AJAX（異步 JavaScript 和 XML）

AJAX 是一組 Web 開發技術，允許 Web 應用程序從服務器異步發送和檢索數據，而不會干擾現有頁面的顯示和行爲。 它可以讓您製作快速、動態的網頁。這意味着您可以更改頁面的部分內容，而無需重新加載整個頁面，從而提高用戶體驗。

// Basic AJAX call using XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {

if (xhr.status >= 200 && xhr.status < 300) {

console.log('Success:', JSON.parse(xhr.responseText));

} else {

console.error('Error:', xhr.statusText);

}

};
xhr.onerror = function() {

console.error('Request failed');

};
xhr.send();

漸進增強和優雅降級

漸進增強和優雅降級是旨在確保最廣泛的潛在受衆(例如還在使用老版本IE的客戶們)可以訪問 Web 應用程序的設計策略。 它專注於首先構建功能核心體驗，然後添加增強功能，而優雅降級則從完整體驗開始，並確保其在舊平臺上仍然可用。

JSON 廣泛使用的 JavaScript 術語

JSON 是一種輕量級數據交換格式，易於人類閱讀和編寫，也易於機器解析和生成。 它基於 JavaScript 的子集，但與語言無關，解析器幾乎適用於每種編程語言。 JSON 在現代 Web 開發中發揮着至關重要的作用，尤其是在 API 中，因爲開發人員使用它來構造客戶端和服務器之間發送的數據。

// JavaScript object
const obj = {
    name: "John",
    age: 30,
    city: "New York"
};
// Converting JavaScript object to JSON

const myJSON = JSON.stringify(obj);

console.log(myJSON); // {"name":"John","age":30,"city":"New York"}
// Parsing JSON to JavaScript object

const myObj = JSON.parse(myJSON);

console.log(myObj.name); // John

閉包經常被誤解的 JavaScript 術語

閉包是 JavaScript 中的一項功能，其中內部函數可以訪問外部（封閉）函數的變量 - 作用域鏈。每次創建函數時，JavaScript 都會自動創建閉包。 這些閉包在函數創建時形成，封裝並保留函數的範圍以供將來使用。 這種機制對於理解 JavaScript 中函數如何與其周圍狀態交互至關重要，從而允許封裝和私有變量等強大模式。

function makeGreeting(greeting) {
    return function(name) {
        console.log(`${greeting}, ${name}!`);
    };
}
const sayHello = makeGreeting('Hello');

sayHello('Alice'); // Outputs: Hello, Alice!

提升

提升是 JavaScript 的默認行爲，即將聲明移動到當前作用域的頂部（當前腳本或當前函數的頂部）。 瞭解提升對於管理變量和函數聲明至關重要，有助於避免代碼執行流程中的常見陷阱。

console.log(myVar); // undefined (not ReferenceError)
var myVar = 5;
hoistedFunction(); // Outputs: "This function has been hoisted."

function hoistedFunction() {

console.log('This function has been hoisted.');

}

範圍

範圍是當前執行的上下文。值和表達式在其中可見或可被引用或可被引用的上下文。如果變量或表達式不在當前範圍內，則它不可用。 作用域控制變量和參數的可見性和生命週期，這是構建和控制程序流程的基礎。

function outerFunction() {
    let outer = 'I am the outer function!';
function innerFunction() {
    console.log(outer); // Accesses outer function's variable
}

innerFunction();

}
outerFunction(); // Logs: I am the outer function!

原型

每個 JavaScript 對象都有一個原型。原型也是一個對象。所有 JavaScript 對象都從其原型繼承其屬性和方法。 原型是 JavaScript 基於原型的繼承機制的核心，它允許對象擴展其他對象並共享功能。

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {

console.log(${this.name} makes a noise.);

}
class Dog extends Animal {

speak() {

console.log(${this.name} barks.);

}

}
const dog = new Dog('Rex');

dog.speak(); // Rex barks.

ES6及更高版本

ES6是 JavaScript 的重大更新，引入了許多新功能，例如類、模塊、模板字符串、箭頭函數等。後續更新不斷增加功能。 熟悉 ES6 及更高版本對於編寫現代、高效、乾淨的 JavaScript 代碼至關重要。

const name = 'Alice';
const greet = (name) => `Hello, ${name}!`;
console.log(greet(name)); // Hello, Alice!

this

在 JavaScript 中，this 是一個關鍵字，表示它所屬的對象。它的值根據其使用上下文動態變化。 瞭解它在不同上下文中的行爲方式是掌握 JavaScript 的關鍵，尤其是在面向對象編程和事件處理方面。

const person = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
        return `${this.firstName} ${this.lastName}`;
    }
};
console.log(person.fullName()); // John Doe

獲取 API

Fetch API 提供了一種現代的、基於承諾的機制來發出網絡請求。 此 API 簡化了對資源的 HTTP 請求和處理響應，代表了舊 XMLHttpRequest 方法的演變。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

網絡存儲 API

Web Storage API提供了兩種機制：localStorage 和 sessionStorage，用於在瀏覽器中存儲數據。 此功能使 Web 應用程序能夠在用戶會話期間存儲數據，從而增強用戶體驗，而無需依賴服務器存儲或 cookie。

// Storing data
localStorage.setItem('key', 'value');
// Retrieving data

const data = localStorage.getItem('key');

console.log(data);

預檢請求

預檢請求是一種 CORS（跨源資源共享）請求，瀏覽器在執行可能對用戶數據產生影響的請求之前自動執行該請求。 具體來說，當請求使用 GET、HEAD 或 POST 以外的方法，或者使用具有某些 MIME 類型的 POST 或包含自定義標頭的請求時，會發生這種情況。預檢使用 OPTIONS 方法來檢查服務器是否可以安全發送實際請求。 跨不同域使用 API 和服務的開發人員必須主動了解預檢請求，以確保安全處理跨源請求。

WebSockets：實時通信的重要 JavaScript 術語

WebSocket 通過單個長期連接提供全雙工通信通道，允許在保持連接打開的同時來回傳遞消息，這與 HTTP 的請求響應模型不同。 這些對於構建實時、交互式 Web 應用程序至關重要，例如需要即時客戶端-服務器通信的實時聊天和遊戲應用程序。

const socket = new WebSocket('wss://example.com/socket');
socket.onopen = function(event) {

console.log('Connection established');

socket.send('Hello Server!');

};
socket.onmessage = function(event) {

console.log('Message from server', event.data);

};

CORS（跨源資源共享）

CORS 是一種機制，它使用額外的 HTTP 標頭來告訴瀏覽器爲在一個源運行的 Web 應用程序提供對來自不同源的選定資源的訪問權限。 它是一項安全功能，可防止惡意 Web 應用程序訪問其他應用程序的資源。 對於構建或使用 API 的開發人員來說，瞭解 CORS 對於管理如何從與資源本身域不同的域請求資源至關重要。

const express = require('express');
const app = express();
app.use((req, res, next) => {

res.header('Access-Control-Allow-Origin', '*');

res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

next();

});
app.get('/data', (req, res) => {

res.json({

message: 'This is CORS-enabled for all origins!'

});

});
app.listen(3000, () => {

console.log('Server running on port 3000');

});

漸進式網絡應用程序 (PWA)

PWA 是一種通過網絡交付的應用程序軟件，使用常見的網絡技術（包括 HTML、CSS 和 JavaScript）構建。 它們應該在使用符合標準的瀏覽器的任何平臺上運行，包括桌面和移動設備。 PWA 提供類似應用程序的用戶體驗，支持離線操作、後臺數據刷新、推送通知等功能，顯着增強移動用戶體驗。

Promise 和異步/等待

雖然前面提到過，但值得強調這些概念在處理JavaScript 中的 異步操作 時的重要性。 與回調等舊技術相比，Promise 提供了一種更乾淨、更健壯的異步操作處理方式。 Async/await 語法提供了一種更簡單的方法來編寫異步代碼，使其外觀和行爲類似於同步代碼。

// Using Promises
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
// Using async/await

async function fetchData() {

try {

const response = await fetch('https://api.example.com/data');

const data = await response.json();

console.log(data);

} catch (error) {

console.error('Error:', error);

}

}
fetchData();

Service Worker

Service Worker 是瀏​​覽器在後臺運行的腳本，與網頁分開，爲不需要網頁或用戶交互的功能打開了大門。如今，它們已經包含推送通知和後臺同步等功能。 服務工作者對於創建可靠、快速的 Web 應用程序和啓用離線體驗、後臺數據同步和網絡請求攔截等功能至關重要。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(err) {
        console.log('Service Worker registration failed:', err);
    });
}

Tree Shaking

Tree Shaking 是 JavaScript 和 Web 開發中常用的術語，用於描述在構建過程中從最終包中刪除未使用的代碼。 它有助於減小應用程序包的大小，從而縮短加載時間並提高性能。

CSR（客戶端渲染）

CSR 是瀏覽器使用 JavaScript 呈現網頁的地方。系統不是從 HTML 文檔本身檢索所有內容，而是提供基本結構並使用 JavaScript 來填充內容。 CSR 可以帶來更加動態和交互式的 Web 應用程序，但需要考慮 SEO 和初始加載性能。

SSR（服務器端渲染）

SSR 在服務器上渲染網頁，而不是在瀏覽器中渲染它們。當用戶請求某個頁面時，服務器會生成該頁面的 HTML 內容並將其發送到用戶的瀏覽器。 SSR 允許搜索引擎對內容進行索引並提供更快的初始頁面加載，從而顯着提高 Web 應用程序的性能和 SEO。

虛擬 DOM

虛擬 DOM 是一些 JavaScript 框架（如 React）中使用的概念，用於提高應用程序性能和用戶體驗。 它是內存中真實 DOM 的輕量級副本，並且不是直接更新 DOM，而是首先對虛擬 DOM 進行更改，然後虛擬 DOM 有效地更新真實 DOM。 對於使用使用此概念來優化渲染過程的庫和框架的開發人員來說，瞭解虛擬 DOM 至關重要。

Babel

Babel 是一個 JavaScript 編譯器，它允許開發人員今天使用下一代 JavaScript。它將 ES6 及更高版本轉換爲向後兼容的 JavaScript 版本。 Babel 對於確保 Web 應用程序可以在舊版瀏覽器上運行、增強兼容性和用戶覆蓋範圍至關重要。

Webpack

Webpack 是現代 JavaScript 應用程序的靜態模塊捆綁器。它處理應用程序並將所有文件（模塊）捆綁在一起。 瞭解 Webpack 對於旨在優化 Web 應用程序的加載時間和性能的開發人員非常重要。

NPM（節點包管理器）

NPM 是世界上最大的軟件註冊中心，用於共享和借用 JavaScript 代碼包。 NPM 知識對於管理項目中的依賴關係、共享您自己的項目以及安裝實用程序和框架至關重要。

SSG（靜態站點生成器）

SSG 是基於原始數據和模板生成完整靜態 HTML 網站的工具。他們在構建時預渲染頁面。 SSG 因其速度、安全性和易於部署而越來越受歡迎，特別是對於博客、文檔和營銷網站而言。

SPA（單頁應用程序）

SPA 是加載單個 HTML 頁面並在用戶與應用程序交互時動態更新該頁面的 Web 應用程序。 SPA 提供類似於桌面應用程序的更流暢的用戶體驗，這對於構建交互式現代 Web 應用程序的開發人員非常重要。

JSONP（帶填充的 JSON）

JSONP是一種發送JSON數據而不用擔心跨域問題的方法。它使用帶有回調函數的腳本標籤來接收數據。 雖然由於 CORS 和現代瀏覽器功能而有些過時，但理解 JSONP 對於處理遺留系統或作爲 Web 開發歷史的一部分很有用。

環境變量

JavaScript 應用程序使用環境變量安全地管理配置設置和敏感信息。 特別是在 Node.js 這樣的服務器端環境中，環境變量允許開發人員將配置與代碼分開，從而增強安全性和靈活性。

console.log(process.env.API_KEY);

跨瀏覽器兼容性

跨瀏覽器兼容性可確保 Web 應用程序在不同的 Web 瀏覽器中正確且一致地運行。 解決兼容性問題對於吸引廣泛受衆至關重要，並涉及使用 Babel 等 JavaScript 轉譯工具和 polyfill 來模擬缺失的功能。

網絡組件

Web 組件代表了一套不同的技術，允許開發人員通過封裝創建可重用的自定義元素。 這種現代的 Web 開發方法簡化了複雜界面的構建，促進了代碼重用和可維護性。

回調地獄和承諾

早期的 JavaScript 嚴重依賴回調來進行異步操作，由於深度嵌套的回調而導致回調地獄。 Promise 是作爲一種更簡潔的替代方案而引入的，允許更有效地鏈接和管理異步操作。

// Callback Hell Example
getData(function(a) {
    getMoreData(a, function(b) {
        getMoreData(b, function(c) {
            console.log(c);
        });
    });
});
// Promises Example

getData()

.then(a => getMoreData(a))

.then(b => getMoreData(b))

.then(c => console.log(c))

.catch(error => console.error(error));

錯誤處理

JavaScript 中有效的錯誤處理涉及優雅地預測和管理錯誤的策略。 使用 try/catch 塊、錯誤事件偵聽器和處理被拒絕的 Promise 都是編寫健壯、容錯代碼以增強應用程序可靠性和用戶體驗的關鍵實踐。

try {
    // Code that may throw an error
} catch (error) {
    console.error('Error caught:', error);
}

無服務器功能

無服務器功能允許開發人員運行後端代碼來響應 Web 應用程序觸發的事件，而無需管理服務器基礎設施，並根據需求自動擴展。

// Example of a serverless function in AWS Lambda (Node.js)
exports.handler = async (event) => {
    return {
        statusCode: 200,
        body: JSON.stringify({
            message: "Hello World"
        })
    };
};

輔助功能 (A11y)

確保 Web 應用程序的可訪問性可以讓儘可能多的人（包括殘疾人）使用它們。JavaScript 可以通過動態更新 ARIA 屬性來增強可訪問性。

// Dynamically updating ARIA attributes with JavaScript
document.getElementById('menu').setAttribute('aria-expanded', 'true');

網絡組裝(WebAssembly)

WebAssembly (Wasm) 支持瀏覽器中的高性能應用程序，允許開發人員使用 C++ 等語言來完成需要計算強度的 Web 開發任務。

// Loading a WebAssembly module example
WebAssembly.instantiateStreaming(fetch('module.wasm'), {})
    .then(result => {
        // Use exported Wasm functions
    });

CRUD 基本 JavaScript 術語

CRUD是指持久化存儲的四個基本操作。它是關係數據庫應用程序中實現的典型操作的助記符。 瞭解 CRUD 操作是任何使用數據庫或任何形式的數據存儲的開發人員的基礎，因爲它涵蓋了您可以對數據執行的基本操作。

性能優化技術

優化 JavaScript 性能涉及延遲加載組件、代碼分割和優化依賴項等技術，以使 Web 應用程序更快、響應更快。

// Lazy loading a module with dynamic imports
import('path/to/module').then(module => {
    module.doSomething();
});

國際化和本地化

要爲全球受衆準備應用程序，必須將其國際化，以便可以輕鬆地將其本地化爲不同的語言和文化。

// Example of internationalizing dates in JavaScript
const date = new Date();
const options = {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));

---

來源：https://www.iwmyx.cn/javascriptdjbsy.html