JavaScript 的基本术语大全

在当今的Web开发中，JavaScript不仅是一种优势，而且是一种必需品。JavaScript不断带来新的功能、术语和概念，使Web应用程序更具交互性、高效且用户友好。无论您是刚刚开始Web开发之旅还是想要提高自己的技能，掌握JavaScript的基本术语都至关重要。在这份综合指南中，我们将探讨每个开发人员都应该了解的JavaScript关键概念，从基础到高级。本文涵盖了基本DOM、Promises的异步以及ServiceWorkers的功能，帮助您加深对JavaScript关键术语的理解。通过学习JavaScript的关键术语，Web开发时不再迷茫。1.JavaScript中的有效负载在JavaScript中，尤其是在处理Web开发和API时，有效负载是指在请求中发送或在响应中接收的实际数据。有效负载可以采用多种格式，其中JSON是最常见的格式之一，因为它具有轻量级且易于解析的结构。为什么有效负载很重要？

数据交换：有效负载是客户端和服务器之间数据交换的关键。了解如何处理有效负载对于实现API调用、Ajax请求以及任何形式的数据检索或提交至关重要。

效率：了解如何有效地构建和解析有效负载可以显着影响Web应用程序的性能。

//SingaJSONpayloadtoaserverfetch('',{method:'POST',headers:{'Content-Type':'application/json',},body:({key:'value'}),}).then(response=()).then(data=(data)).catch((error)=('Error:',error));

2.理解JavaScript中的ReadableStreamReadableStream是StreamsAPI的一部分，它提供了一种在JavaScript中处理流数据的方法。流是允许您连续从源读取数据或将数据写入目标的对象。简而言之，流提供了一种在数据到达时进行逐段处理数据的方法，它比将整个数据块加载到内存中更有效。ReadableStream的应用

获取大型资源：非常适合处理大型数据集或文件的场景，允许您在第一个块可用时立即处理数据，而不是等待整个资源下载。

//AssumingfetchAPIsupportsstreamsfetch('path/to/').then(response={constreader=();returnnewReadableStream({start(controller){functionpush(){().then(({done,value})={if(done){();return;}(value);push();});}push();}});}).then(stream=newResponse(stream)).then(response=()).then(text=(text)).catch(err=(err));

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

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

//ESModulesexampleimport{fetchData}from'./';fetchData().then(data=(data));

4.DOM（文档对象模型）DOM是Web文档的编程接口。它代表页面，以便程序可以更改文档结构、样式和内容。DOM将文档表示为节点和对象,这样编程语言就可以与页面交互。了解DOM对于操作网页（包括动态添加、删除或修改元素和内容）至关重要。

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

5.事件事件是您正在编程的系统中发生的操作或事件，系统会告诉您这些信息，以便您可以根据需要以某种方式响应它们。例如，事件可以是用户交互（例如单击和键入）或系统事件（例如资源加载）。处理事件是创建交互式Web应用程序的基础，它允许开发人员执行代码来响应用户操作。

('myButton').addEventListener('click',function(){alert('Buttonclicked!');});

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

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

('parent').addEventListener('click',(event)={if(==='LI'){('Listitemclicked!');}});

//JavaScriptobjectconstobj={name:"John",age:30,city:"NewYork"};//ConvertingJavaScriptobjecttoJSONconstmyJSON=(obj);(myJSON);//{"name":"John","age":30,"city":"NewYork"}//ParsingJSONtoJavaScriptobjectconstmyObj=(myJSON);();//John

10.AJAX（异步JavaScript和XML）AJAX是一组Web开发技术，允许Web应用程序从服务器异步发送和检索数据，而不会干扰现有页面的显示和行为。它可以让您制作快速、动态的网页。这意味着您可以更改页面的部分内容，而无需重新加载整个页面，从而提高用户体验。

//BasicAJAXcallusingXMLHttpRequestconstxhr=newXMLHttpRequest();('GET','',true);=function(){if(=200){('Success:',());}else{('Error:',);}};=function(){('Requestfailed');};();

11.闭包经常被误解的JavaScript术语闭包是JavaScript中的一项功能，其中内部函数可以访问外部（封闭）函数的变量-作用域链。每次创建函数时，JavaScript都会自动创建闭包。这些闭包在函数创建时形成，封装并保留函数的范围以供将来使用。这种机制对于理解JavaScript中函数如何与其周围状态交互至关重要，从而允许封装和私有变量等强大模式。

functionmakeGreeting(greeting){returnfunction(name){(`${greeting},${name}!`);};}constsayHello=makeGreeting('Hello');sayHello('Alice');//Outputs:Hello,Alice!

了解提升对于管理变量和函数声明至关重要，有助于避免代码执行流程中的常见陷阱。

(myVar);//undefined(notReferenceError)varmyVar=5;hoistedFunction();//Outputs:"Thisfunctionhasbeenhoisted."functionhoistedFunction(){('Thisfunctionhasbeenhoisted.');}

每个JavaScript对象都有一个原型。原型也是一个对象。所有JavaScript对象都从其原型继承其属性和方法。

原型是JavaScript基于原型的继承机制的核心，它允许对象扩展其他对象并共享功能。

functionAnimal(name){=name;}=function(){(`${}makesanoise.`);}classDogextsAnimal{speak(){(`${}barks.`);}}constdog=newDog('Rex');();//Rexbarks.

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

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

functionouterFunction(){letouter='Iamtheouterfunction!';functioninnerFunction(){(outer);//Accessesouterfunction'svariable}innerFunction();}outerFunction();//Logs:Iamtheouterfunction!

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

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

constperson={firstName:"John",lastName:"Doe",fullName:function(){return`${}${}`;}};(());//JohnDoe

16.ES6/ES2015及更高版本ES6（或ECMAScript2015）是JavaScript的重大更新，引入了许多新功能，例如类、模块、模板字符串、箭头函数等。后续更新不断增加功能。熟悉ES6及更高版本对于编写现代、高效、干净的JavaScript代码至关重要。

constname='Alice';constgreet=(name)=`Hello,${name}!`;(greet(name));//Hello,Alice!

17.网络存储APIWebStorageAPI提供了两种机制：localStorage和sessionStorage，用于在浏览器中存储数据。此功能使Web应用程序能够在用户会话期间存储数据，从而增强用户体验，而无需依赖服务器存储或cookie。

//('key','value');//Retrievingdataconstdata=('key');(data);

FetchAPI提供了一种现代的、基于承诺的机制来发出网络请求。

此API简化了对资源的HTTP请求和处理响应，代表了旧XMLHttpRequest方法的演变。

fetch('').then(response=()).then(data=(data)).catch(error=('Error:',error));

19.预检请求预检请求是一种CORS（跨源资源共享）请求，浏览器在执行可能对用户数据产生影响的请求之前自动执行该请求。具体来说，当请求使用GET、HEAD或POST以外的方法，或者使用具有某些MIME类型的POST或包含自定义标头的请求时，会发生这种情况。预检使用OPTIONS方法来检查服务器是否可以安全发送实际请求。跨不同域使用API和服务的开发人员必须主动了解预检请求，以确保安全处理跨源请求。20.CORS（跨源资源共享）CORS是一种机制，它使用额外的HTTP标头来告诉浏览器为在一个源运行的Web应用程序提供对来自不同源的选定资源的访问权限。它是一项安全功能，可防止恶意Web应用程序访问其他应用程序的资源。对于构建或使用API的开发人员来说，了解CORS对于管理如何从与资源本身域不同的域请求资源至关重要。

constexpress=require('express');constapp=express();((req,res,next)={('Access-Control-Allow-Origin','*');('Access-Control-Allow-Headers','Origin,X-Requested-With,Content-Type,Accept');next();});('/data',(req,res)={({message:'ThisisCORS-enabledforallorigins!'});});(3000,()={('Serverrunningonport3000');});

21.WebSockets：实时通信的重要JavaScript术语WebSocket通过单个长期连接提供全双工通信通道，允许在保持连接打开的同时来回传递消息，这与HTTP的请求响应模型不同。这些对于构建实时、交互式Web应用程序至关重要，例如需要即时客户端-服务器通信的实时聊天和游戏应用程序。

constsocket=newWebSocket('wss:///socket');=function(event){('Connectionestablished');('HelloServer!');};=function(event){('Messagefromserver',);};

22.ServiceWorkerServiceWorker是浏​览器在后台运行的脚本，与网页分开，为不需要网页或用户交互的功能打开了大门。如今，它们已经包含推送通知和后台同步等功能。服务工作者对于创建可靠、快速的Web应用程序和启用离线体验、后台数据同步和网络请求拦截等功能至关重要。

if('serviceWorker'innavigator){('/').then(function(registration){('ServiceWorkerregisteredwithscope:',);}).catch(function(err){('ServiceWorkerregistrationfailed:',err);});}

23.渐进式网络应用程序(PWA)PWA是一种通过网络交付的应用程序软件，使用常见的网络技术（包括HTML、CSS和JavaScript）构建。它们应该在使用符合标准的浏览器的任何平台上运行，包括桌面和移动设备。PWA提供类似应用程序的用户体验，支持离线操作、后台数据刷新、推送通知等功能，显着增强移动用户体验。24.Promise和异步/等待虽然前面提到过，但值得强调这些概念在处理JavaScript中的异步操作时的重要性。与回调等旧技术相比，Promise提供了一种更干净、更健壮的异步操作处理方式。Async/await语法提供了一种更简单的方法来编写异步代码，使其外观和行为类似于同步代码。

//UsingPromisesfetch('').then(response=()).then(data=(data)).catch(error=('Error:',error));//Usingasync/awaitasyncfunctionfetchData(){try{constresponse=awaitfetch('');constdata=();(data);}catch(error){('Error:',error);}}fetchData();

25.TreeShakingTreeShaking是JavaScript和Web开发中常用的术语，用于描述在构建过程中从最终包中删除未使用的代码。它有助于减小应用程序包的大小，从而缩短加载时间并提高性能。26.SSR（服务器端渲染）SSR在服务器上渲染网页，而不是在浏览器中渲染它们。当用户请求某个页面时，服务器会生成该页面的HTML内容并将其发送到用户的浏览器。SSR允许搜索引擎对内容进行索引并提供更快的初始页面加载，从而显着提高Web应用程序的性能和SEO。27.CSR（客户端渲染）CSR是浏览器使用JavaScript呈现网页的地方。系统不是从HTML文档本身检索所有内容，而是提供基本结构并使用JavaScript来填充内容。CSR可以带来更加动态和交互式的Web应用程序，但需要考虑SEO和初始加载性能。28.虚拟DOM虚拟DOM是一些JavaScript框架（如React）中使用的概念，用于提高应用程序性能和用户体验。它是内存中真实DOM的轻量级副本，并且不是直接更新DOM，而是首先对虚拟DOM进行更改，然后虚拟DOM有效地更新真实DOM。对于使用使用此概念来优化渲染过程的库和框架的开发人员来说，了解虚拟DOM至关重要。29.WebpackWebpack是现代JavaScript应用程序的静态模块捆绑器。它处理应用程序并将所有文件（模块）捆绑在一起。了解Webpack对于旨在优化Web应用程序的加载时间和性能的开发人员非常重要。30.BabelBabel是一个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.跨浏览器兼容性跨浏览器兼容性可确保Web应用程序在不同的Web浏览器中正确且一致地运行。解决兼容性问题对于吸引广泛受众至关重要，并涉及使用Babel等JavaScript转译工具和polyfill来模拟缺失的功能。36.环境变量JavaScript应用程序使用环境变量安全地管理配置设置和敏感信息。特别是在这样的服务器端环境中，环境变量允许开发人员将配置与代码分开，从而增强安全性和灵活性。

(_KEY);

37.网络组件Web组件代表了一套不同的技术，允许开发人员通过封装创建可重用的自定义元素。这种现代的Web开发方法简化了复杂界面的构建，促进了代码重用和可维护性。38.错误处理JavaScript中有效的错误处理涉及优雅地预测和管理错误的策略。使用try/catch块、错误事件侦听器和处理被拒绝的Promise都是编写健壮、容错代码以增强应用程序可靠性和用户体验的关键实践。

try{//Codethatmaythrowanerror}catch(error){('Errorcaught:',error);}

早期的JavaScript严重依赖回调来进行异步操作，由于深度嵌套的回调而导致回调地狱。

Promise是作为一种更简洁的替代方案而引入的，允许更有效地链接和管理异步操作。

//CallbackHellExamplegetData(function(a){getMoreData(a,function(b){getMoreData(b,function(c){(c);});});});//PromisesExamplegetData().then(a=getMoreData(a)).then(b=getMoreData(b)).then(c=(c)).catch(error=(error));

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

//ExampleofaserverlessfunctioninAWSLambda()=async(event)={return{statusCode:200,body:({message:"HelloWorld"})};};

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

//(fetch(''),{}).then(result={//UseexportedWasmfunctions});

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

//('menu').setAttribute('aria-expanded','true');

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

//ExampleofinternationalizingdatesinJavaScriptconstdate=newDate();constoptions={year:'numeric',month:'long',day:'numeric'};(('en-US',options).format(date));

44.CRUD基本JavaScript术语CRUD是指持久化存储的四个基本操作。它是关系数据库应用程序中实现的典型操作的助记符。了解CRUD操作是任何使用数据库或任何形式的数据存储的开发人员的基础，因为它涵盖了您可以对数据执行的基本操作。45.性能优化技术优化JavaScript性能涉及延迟加载组件、代码分割和优化依赖项等技术，以使Web应用程序更快、响应更快。

//Lazyloadingamodulewithdynamicimportsimport('path/to/module').then(module={();});

(总结)关于JavaScript基本术语的一些想法本文涵盖了从每个Web开发人员都会遇到的基本元素（如有效负载和DOM）到更复杂的概念（如事件循环和原型继承）。JavaScript是现代Web开发的心脏，理解其关键术语类似于掌握Web语言。