- 剑指JavaScript:核心原理与应用实践
- 尚硅谷教育编著
- 927字
- 2025-02-18 05:20:33
1.4 JavaScript的应用场景
JavaScript在生活中的应用随处可见,只要是与互联网有关的,几乎都使用了JavaScript。比如,在数据交互时,我们会发送AJAX(Asynchronous JavaScript And XML,异步JavaScript与XML技术)请求将数据传递给后端;微信小程序中的项目也用到了JavaScript;在服务端开发时,用到了Node.js。
在信息爆炸时代,网站不仅要呈现必要的关键信息,还要以最佳方式与用户进行动态交互,加深用户对网站信息或功能的印象,并提高用户体验和黏度。因此,更多网站的开发者们精心研发了一些表现力丰富的交互效果,如轮播图。轮播图是JavaScript中的经典案例,通过JavaScript实现了单击左右按钮切换图片、图片自动轮播等功能。以尚硅谷官网首页的轮播图为例,其效果如图1-4所示。

图1-4 尚硅谷官网首页的轮播图区域
我们最常见的功能就是表单验证,具体来说就是登录注册信息,不管在网站上还是在各大App上,这都是必须具备的功能。当用户单击“登录”按钮时,其内部通过JavaScript将表单信息提交给后端,使用JavaScript接收后端返回的结果后进行相应处理。这里我们以谷粒学苑的登录页面为例,其效果如图1-5所示。

图1-5 谷粒学苑的登录页面
下拉菜单也是常见的功能,当鼠标移动到菜单时,会先触发JavaScript的鼠标移入事件,然后通过JavaScript改变CSS样式,以达到当鼠标移入菜单后下拉菜单出现的效果。以尚硅谷官网首页为例,当鼠标移动到“培训课程”菜单时,它的下拉菜单如图1-6所示。
开发前端页面特效,如页面中的轮播图、下拉菜单等各种效果,以及表单验证等功能,这是JavaScript最早的应用场景。随着互联网的发展,JavaScript已经不局限于这些应用,我们已经可以使用JavaScript开发飞机大战、贪吃蛇、扫雷等游戏。飞机大战游戏页面如图1-7所示。

图1-6 “培训”课程菜单的下拉菜单

图1-7 飞机大战游戏页面
事实上,很多编程框架都是以JavaScript语言为基础搭建的。比如,Electron框架(见图1-8)的实现就是以JavaScript来开发桌面应用的,Vue(见图1-9)、React(见图1-10)和Angular(见图1-11)三大主流框架也是使用JavaScript实现根据数据渲染页面的效果。

图1-8 Electron图标

图1-9 Vue图标

图1-10 React图标

图1-11 Angular图标
除了上面描述的功能,JavaScript还可以开发自动化工具,使用这些工具可以让网页变得“自动化”。比如,可以自动进行打包、自动编译样式表、自动解决兼容问题等。此外,JavaScript还可以变成运行在服务器上的后端开发语言Node.js,以及能以Hybrid App形式运行在移动设备上的App开发语言。总之,在当前的互联网时代,JavaScript的应用是必不可少的。