首页 > 自考资讯 > 高考百科

一篇讲透“大”前端,前端的前世今生

小条 2024-10-01

描述“大”前端的文章

当我们想到前端时,我们都会想到浏览器。前端的主要工作就是通过浏览器显示你想要显示的内容。之前浏览器的功能和产品各不相同,性能差异巨大,语法也不清楚(让调试过程真的很痛苦)。我为所有正在学习前端的朋友感到非常高兴。

前端3轴:

96cde1d1d02041eca01461f09b3b956d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728396420&x-signature=VAHbwcMmYpczppOgE81Z%2FDvkaG4%3D1.HTML

2.CSS

3.JavaScript

其中html标签具有在页面上显示按钮、文本框、输入框、文本、图像的功能。示例:标签按钮、输入、图像。

Css:为按钮、文本框、输入框和文本添加颜色。

JavaScript:按下页面上的按钮时执行操作以及一些动态效果的程序。

e24e33ce59a94747a737bf3133cd393a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728396420&x-signature=%2FTj8PkQk2eUASz8wk6aIElk88Hc%3D 模板引擎

如何使用Sanbanaxe创建类似表格的页面内容?后来开发了几个模板(后端Java)。

jsp、freemarker、velocity、数据转换成页面内容、动态数据生成静态页面

插件jQuery

以前的浏览器具有不同的功能和产品,导致性能差异很大和语法不一致。这就是jQuery诞生的时候,相当于包裹了JavaScript的外层,语法相同,开发效率也提高了。

3d7c7dcd5e4e49c5910dbcf0baf54f64~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728396420&x-signature=EgeSTvsFqtt6op1gghM3KbdLkVc%3D 页面用户界面

随着发展,市面上出现了几个UI框架,Extjs有自己的系统,easyui,layui。 UI提供的组件(例如,下拉框、树形结构、进度条、表格等)使网页空间更加美观,使开发人员更加高效。

可视化技术:

随着时间的推移,可视化不断发展,svg、canvas 和webgl (html5) 等支持技术变得流行。

Svg: 可缩放矢量图形。用于定义基于矢量的网络图形。 SVG 使用XML 格式来定义图形。

Canvas: 使用JavaScript 绘制路径、矩形、圆形、文本,并将图像添加到网页的矩形区域。这可以在像素级别进行控制。

WebGL:简单来说,WebGL是一种3D绘图标准,提供硬件3D加速渲染,让前端开发者能够更流畅地展示一些3D场景和模型,提高数据可视化效果。

Web 的视觉进化是互联网发展的自然结果,前端框架层出不穷。

前端框架:Vue、React

Vue 是一个用于构建用户界面的渐进式框架。所谓框架,就是Vue已经打好了地基和结构,盖房子的时候就需要根据Vue的结构规则来实现。

以前的界面需要操作DOM 元素(JavaScript、jQuery、前端模板)。

随着Vue的出现,你不再需要担心DOM渲染,双向数据绑定,减少DOM操作,提高渲染效率。

React:用于构建用户界面的JavaScript 框架。

使用VDOM减少DOM交互和JSX(克服一些JS的不足)实现单向响应式数据流。

如今,前端页面变得越来越复杂,优化工具WebPack也应运而生。

WebPack主要进行模块转换、打包和优化。

打包:将多个Javascript文件打包成一个文件,以提高下载速度。

转换:将扩展语言转换为常规JavaScript,以便浏览器可以理解。

优化:随着前端变得越来越复杂,性能也成为一个问题,WebPack也开始承担起优化和提高性能的责任。

WebPack : 的作用

89e918475a9f4190bc8bcc2450ab320d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728396420&x-signature=SgVyuazTG2xPcBNn2OvB7uCbzD4%3D 服务器开发:NodeJS

d3230ce688dc4fb999fd762351725e76~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728396420&x-signature=%2BrQ1V8ACBJtSK127KK79%2BEfULnY%3DNodeJs : 在服务器端运行的JavaScript。基于Google的V8引擎,

事件驱动的I/O 服务器端JavaScript 环境

版权声明:本文转载于网络,版权归作者所有。如有侵权,请联系本站编辑删除。

猜你喜欢