在当今的 Web 开发中，JavaScript 不仅是一种优势，而且是一种必需品。JavaScript 不断带来新的功能、术语和概念，使 Web 应用程序更具交互性、高效且用户友好。

转译:每个开发人员都必须了解的 JavaScript 基本术语

无论您是刚刚开始Web 开发之旅还是想要提高自己的技能，掌握 JavaScript 的基本术语都至关重要。

在这份综合指南中，我们将探讨每个开发人员都应该了解的 JavaScript 关键概念，从基础到高级。

我们涵盖了基本 DOM、Promises 的异步魔法以及 Service Workers 的现代功能，这将帮助您加深对 JavaScript 关键术语的理解。

通过学习构成 JavaScript 世界的关键术语，准备好充分利用 Web 开发。

1 — 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));

2 — 理解 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));

3 — 模块系统

JavaScript 的模块系统，例如 CommonJS 和 ES 模块，彻底改变了开发人员组织和重用代码的方式。

通过将代码划分为可管理的模块，这些系统增强了代码的可维护性、可读性和可扩展性，从而使构建复杂应用程序变得更加简单。

  // ES Modules example
  import {
      fetchData
  } from './api.js';

  fetchData().then(data => console.log(data));

4 — DOM（文档对象模型）

DOM 是 Web 文档的编程接口。它代表页面，以便程序可以更改文档结构、样式和内容。

DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

了解 DOM 对于操作网页（包括动态添加、删除或修改元素和内容）至关重要。

document.getElementById('demo').textContent = 'Hello, World!';

5 — 事件

事件是您正在编程的系统中发生的操作或事件，系统会告诉您这些信息，以便您可以根据需要以某种方式响应它们。

例如，事件可以是用户交互（例如单击和键入）或系统事件（例如资源加载）。

处理事件是创建交互式 Web 应用程序的基础，它允许开发人员执行代码来响应用户操作。

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

6 — 事件委托

事件委托利用事件冒泡的概念向父元素添加单个事件侦听器，而不是向各个子元素添加多个侦听器。

此策略优化了性能和内存使用，特别是在具有许多交互元素的动态应用程序中。

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

7 — 内容安全策略 (CSP)

内容安全策略 (CSP) 是一种安全标准，旨在防止跨站点脚本 (XSS)、点击劫持和其他代码注入攻击。

通过指定允许的脚本、样式和其他资源源，CSP 可以帮助开发人员保护其 Web 应用程序免受恶意活动的侵害。

8 — 渐进增强和优雅降级

渐进增强和优雅降级是旨在确保最广泛的潜在受众可以访问 Web 应用程序的设计策略。

它专注于首先构建功能核心体验，然后添加增强功能，而优雅降级则从完整体验开始，并确保其在旧平台上仍然可用。

9 — JSON

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

10 — 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();

11 - 闭包经常被误解的 JavaScript 术语

闭包是 JavaScript 中的一项功能，其中内部函数可以访问外部（封闭）函数的变量 - 作用域链。每次创建函数时，JavaScript 都会自动创建闭包。

这些闭包在函数创建时形成，封装并保留函数的范围以供将来使用。

这种机制对于理解 JavaScript 中函数如何与其周围状态交互至关重要，从而允许封装和私有变量等强大模式。

function makeGreeting(greeting) {
    return function(name) {
        console.log(`${greeting}, ${name}!`);
    };
}

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

12 — 提升

提升是 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.');
}

3 — 原型(Prototype)

每个 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.

14 — 范围(Scope)

范围是当前执行的上下文。值和表达式在其中可见或可以被引用或可以被引用的上下文。如果变量或表达式不在当前范围内，则它不可用。

作用域控制变量和参数的可见性和生命周期，这是构建和控制程序流程的基础。

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!

15 — this

在 JavaScript 中，this 是一个关键字，表示它所属的对象。它的值根据其使用上下文动态变化。

了解它在不同上下文中的行为方式是掌握 JavaScript 的关键，尤其是在面向对象编程和事件处理方面。

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

console.log(person.fullName()); // John Doe

16 — ES6/ES2015 及更高版本

ES6（或 ECMAScript 2015）是 JavaScript 的重大更新，引入了许多新功能，例如类、模块、模板字符串、箭头函数等。后续更新不断增加功能。

熟悉 ES6 及更高版本对于编写现代、高效、干净的 JavaScript 代码至关重要。

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

17 — 网络存储 API(Web Storage API)

Web Storage API提供了两种机制：localStorage 和 sessionStorage，用于在浏览器中存储数据。

此功能使 Web 应用程序能够在用户会话期间存储数据，从而增强用户体验，而无需依赖服务器存储或 cookie。

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

// Retrieving data
const data = localStorage.getItem('key');
console.log(data);

18 — Fetch 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));

19 — 预检请求(Preflight Request)

预检请求是一种 CORS（跨源资源共享）请求，浏览器在执行可能对用户数据产生影响的请求之前自动执行该请求。

具体来说，当请求使用 GET、HEAD 或 POST 以外的方法，或者使用具有某些 MIME 类型的 POST 或包含自定义标头的请求时，会发生这种情况。预检使用 OPTIONS 方法来检查服务器是否可以安全发送实际请求。

跨不同域使用 API 和服务的开发人员必须主动了解预检请求，以确保安全处理跨源请求。

20 — 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');
});

21 — 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);
};

22 — Service Worker

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);
    });
}

23 — 渐进式网络应用程序 (PWA)

PWA 是一种通过网络交付的应用程序软件，使用常见的网络技术（包括 HTML、CSS 和 JavaScript）构建。

它们应该在使用符合标准的浏览器的任何平台上运行，包括桌面和移动设备。

PWA 提供类似应用程序的用户体验，支持离线操作、后台数据刷新、推送通知等功能，增强移动用户体验。

24 — Promise 和Async/await

虽然前面提到过，但值得强调这些概念在处理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();

25 — Tree Shaking

Tree Shaking 是 JavaScript 和 Web 开发中常用的术语，用于描述在构建过程中从最终包中删除未使用的代码。

它有助于减小应用程序包的大小，从而缩短加载时间并提高性能。

26 — SSR（服务器端渲染）

SSR 在服务器上渲染网页，而不是在浏览器中渲染它们。当用户请求某个页面时，服务器会生成该页面的 HTML 内容并将其发送到用户的浏览器。

SSR 允许搜索引擎对内容进行索引并提供更快的初始页面加载，从而提高 Web 应用程序的性能和 SEO。

27 — CSR（客户端渲染）

CSR 是浏览器使用 JavaScript 呈现网页的地方。系统不是从 HTML 文档本身检索所有内容，而是提供基本结构并使用 JavaScript 来填充内容。

CSR 可以带来更加动态和交互式的 Web 应用程序，但需要考虑 SEO 和初始加载性能。

28 — 虚拟 DOM(Virtual DOM)

虚拟 DOM 是一些 JavaScript 框架（如 React、VUE）中使用的概念，用于提高应用程序性能和用户体验。

它是内存中真实 DOM 的轻量级副本，并且不是直接更新 DOM，而是首先对虚拟 DOM 进行更改，然后虚拟 DOM 有效地更新真实 DOM。

对于使用使用此概念来优化渲染过程的库和框架的开发人员来说，了解虚拟 DOM 至关重要。

29 — Webpack

Webpack 是现代 JavaScript 应用程序的静态模块捆绑器。它处理应用程序并将所有文件（模块）捆绑在一起。

了解 Webpack 对于旨在优化 Web 应用程序的加载时间和性能的开发人员非常重要。

30 — Babel

Babel 是一个 JavaScript 编译器，它允许开发人员今天使用下一代 JavaScript。它将 ES6 及更高版本转换为向后兼容的 JavaScript 版本。

Babel 对于确保 Web 应用程序可以在旧版浏览器上运行、增强兼容性和用户覆盖范围至关重要。

31.NPM（节点包管理器）

NPM 是世界上最大的软件注册中心，用于共享和借用 JavaScript 代码包。

NPM 知识对于管理项目中的依赖关系、共享您自己的项目以及安装实用程序和框架至关重要。

32 — SPA（单页应用程序）

SPA 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

SPA 提供类似于桌面应用程序的更流畅的用户体验，这对于构建交互式现代 Web 应用程序的开发人员非常重要。

33 — SSG（静态站点生成器）

SSG 是基于原始数据和模板生成完整静态 HTML 网站的工具。他们在构建时预渲染页面。

SSG 因其速度、安全性和易于部署而越来越受欢迎，特别是对于博客、文档和营销网站而言。

34 — JSONP（带填充的 JSON）

JSONP是一种发送JSON数据而不用担心跨域问题的方法。它使用带有回调函数的脚本标签来接收数据。

虽然由于 CORS 和现代浏览器功能而有些过时，但理解 JSONP 对于处理遗留系统或作为 Web 开发历史的一部分很有用。

35 — 跨浏览器兼容性(Cross-Browser Compatibility)

跨浏览器兼容性(Cross-Browser Compatibility)可确保 Web 应用程序在不同的 Web 浏览器中正确且一致地运行。

解决兼容性问题对于吸引广泛受众至关重要，并涉及使用 Babel 等 JavaScript 转译工具和 polyfill 来模拟缺失的功能。

36 — 环境变量(Environment Variables)

JavaScript 应用程序使用环境变量安全地管理配置设置和敏感信息。

特别是在 Node.js 这样的服务器端环境中，环境变量允许开发人员将配置与代码分开，从而增强安全性和灵活性。

复制

console.log(process.env.API_KEY);

37 — Web Components

Web 组件代表了一套不同的技术，允许开发人员通过封装创建可重用的自定义元素。

这种现代的 Web 开发方法简化了复杂界面的构建，促进了代码重用和可维护性。

38 — 错误处理(Error Handling)

JavaScript 中有效的错误处理涉及优雅地预测和管理错误的策略。

使用 try/catch 块、错误事件侦听器以及处理被拒绝的 Promise 都是编写健壮、容错代码以增强应用程序可靠性和用户体验的关键实践。

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

39 — 回调地狱和Promises

早期的 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));

40 — Serverless Functions

Serverless Functions允许开发人员运行后端代码来响应 Web 应用程序触发的事件，而无需管理服务器基础设施，并根据需求自动扩展。

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

41 — WebAssembly

WebAssembly (Wasm) 支持浏览器中的高性能应用程序，允许开发人员使用 C++ 等语言来完成需要计算强度的 Web 开发任务。

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

42 — 无障碍:Accessibility (A11y)

确保 Web 应用程序的可访问性可以让尽可能多的人（包括残疾人）使用它们。JavaScript 可以通过动态更新 ARIA 属性来增强可访问性。

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

43 — 国际化和本地化

要为全球受众准备应用程序，必须将其国际化，以便可以轻松地将其本地化为不同的语言和文化。

// 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));

44 — CRUD

CRUD是指持久化存储的四个基本操作。它是关系数据库应用程序中实现的典型操作的助记符。

了解 CRUD 操作是任何使用数据库或任何形式的数据存储的开发人员的基础，因为它涵盖了您可以对数据执行的基本操作。

45 — 性能优化技术

优化 JavaScript 性能涉及延迟加载组件、代码分割和优化依赖项等技术，以使 Web 应用程序更快、响应更快。

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

关于 JavaScript 基本术语的最终思考

踏上 JavaScript 基本术语之旅，我们涵盖了广阔的领域 - 从每个 Web 开发人员都会遇到的基本元素（如有效负载和 DOM）到更复杂的概念（如事件循环和原型继承）。

JavaScript 是现代 Web 开发的心跳，理解其关键术语类似于掌握 Web 语言。

当您继续探索和应用这些概念时，请记住每个术语都是您开发技能的基石。

不断尝试，不断学习，最重要的是，不断编码。

掌握 JavaScript 的道路仍在继续，但通过本指南中涵盖的基本术语，您已经做好了应对 Web 开发世界中遇到的挑战和机遇的准备。

网站首页 > 基础教程 正文