在前端开发中，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));