- 剑指JavaScript:核心原理与应用实践
- 尚硅谷教育编著
- 927字
- 2024-05-11 19:05:53
1.4 JavaScript的应用场景
JavaScript在生活中的应用随处可见,只要是与互联网有关的,几乎都使用了JavaScript。比如,在数据交互时,我们会发送AJAX(Asynchronous JavaScript And XML,异步JavaScript与XML技术)请求将数据传递给后端;微信小程序中的项目也用到了JavaScript;在服务端开发时,用到了Node.js。
在信息爆炸时代,网站不仅要呈现必要的关键信息,还要以最佳方式与用户进行动态交互,加深用户对网站信息或功能的印象,并提高用户体验和黏度。因此,更多网站的开发者们精心研发了一些表现力丰富的交互效果,如轮播图。轮播图是JavaScript中的经典案例,通过JavaScript实现了单击左右按钮切换图片、图片自动轮播等功能。以尚硅谷官网首页的轮播图为例,其效果如图1-4所示。
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_17_1.jpg?sign=1739471670-RYdCjKFfJllQtxXJEU97VwHgvkvfObl3-0-da1b6321b7b146fe00f62d27f800efb0)
图1-4 尚硅谷官网首页的轮播图区域
我们最常见的功能就是表单验证,具体来说就是登录注册信息,不管在网站上还是在各大App上,这都是必须具备的功能。当用户单击“登录”按钮时,其内部通过JavaScript将表单信息提交给后端,使用JavaScript接收后端返回的结果后进行相应处理。这里我们以谷粒学苑的登录页面为例,其效果如图1-5所示。
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_17_2.jpg?sign=1739471670-BZrV5EbDnOpxSOpB3Ex9Yqi9Gb2MDyx7-0-c8c8d1dc78e04930c2c157f05458253b)
图1-5 谷粒学苑的登录页面
下拉菜单也是常见的功能,当鼠标移动到菜单时,会先触发JavaScript的鼠标移入事件,然后通过JavaScript改变CSS样式,以达到当鼠标移入菜单后下拉菜单出现的效果。以尚硅谷官网首页为例,当鼠标移动到“培训课程”菜单时,它的下拉菜单如图1-6所示。
开发前端页面特效,如页面中的轮播图、下拉菜单等各种效果,以及表单验证等功能,这是JavaScript最早的应用场景。随着互联网的发展,JavaScript已经不局限于这些应用,我们已经可以使用JavaScript开发飞机大战、贪吃蛇、扫雷等游戏。飞机大战游戏页面如图1-7所示。
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_18_1.jpg?sign=1739471670-H5MjnZ4IzwGfwv9zeAI2XLjqKc2ajFSe-0-abf7ea069dc366b1505bd3b0c7ff56af)
图1-6 “培训”课程菜单的下拉菜单
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_18_2.jpg?sign=1739471670-0cTA3y7Z48FfV7i9TMNlxHciKCrcR302-0-52f974687e55a0073e6b8811b31bd748)
图1-7 飞机大战游戏页面
事实上,很多编程框架都是以JavaScript语言为基础搭建的。比如,Electron框架(见图1-8)的实现就是以JavaScript来开发桌面应用的,Vue(见图1-9)、React(见图1-10)和Angular(见图1-11)三大主流框架也是使用JavaScript实现根据数据渲染页面的效果。
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_18_3.jpg?sign=1739471670-jS79D4aigTYkmwdOgekz4n0eHET7glsV-0-2eb1e22b5c14b8351fc875ff3d018a14)
图1-8 Electron图标
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_18_4.jpg?sign=1739471670-1Ry2pdcSAkgDxXDtcL24yp55otxrj2Lc-0-b422da7e52f247ad9118592de91aa967)
图1-9 Vue图标
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_18_5.jpg?sign=1739471670-rloWC6dpx8DufGFzANhduFsaqPnajnYu-0-b20e925d8863f11ec03d8a076383acf7)
图1-10 React图标
![](https://epubservercos.yuewen.com/F694A6/29436049807129906/epubprivate/OEBPS/Images/45235_18_6.jpg?sign=1739471670-m1y6FkWHfuLYPJRMIzF6u2a60eMpnxX0-0-45fa7d6cfaef27cfb691efc1effa36c8)
图1-11 Angular图标
除了上面描述的功能,JavaScript还可以开发自动化工具,使用这些工具可以让网页变得“自动化”。比如,可以自动进行打包、自动编译样式表、自动解决兼容问题等。此外,JavaScript还可以变成运行在服务器上的后端开发语言Node.js,以及能以Hybrid App形式运行在移动设备上的App开发语言。总之,在当前的互联网时代,JavaScript的应用是必不可少的。