当前位置: 首页 > news >正文

当年很流行,现在已经淘汰的前端技术有哪些?

近几年,前端技术真可谓是飞速发展,不断有新的技术涌现,爆火的前端框架 Astro,前端运行时 Bun,构建工具 Vite 等都给前端提供了强大动力。当然,也有很多前端技术随着技术的发展不再需要使用,有了更好的替代方案。本文就来盘点一下那些不再流行的前端技术,以及对应的现代化替代方案。

本文提到的技术不代表不能再使用了,其仍存在一些适用场景,并且很多遗留老项目可能是使用这些技术实现的,需要进行维护。只是在新项目技术选型时,应尽可能考虑使用更为现代化的前端技术。

jQuery

jQuery 仍然是一个很流行的 JavaScript 库,其生态系统中有超百万个插件。但这是一个技术上的历史遗留问题,并不是真的很流行,只是很多老网站仍然使用。根据 BuiltWith 的数据,排名前 100 万的网站中有 78% 仍以某种方式使用 jQuery,很大一部分原因是 WordPress 使用了 jQuery,而很多网站都是使用 WordPress 创建的。

虽然 jQuery 依然被广泛使用,但它已经不再是前端开发中的必须技术。现代前端框架已经内置了许多 jQuery 的功能,并且具有更好的性能和更少的代码。

如果要开发新的前端应用,可以选择当下流行的前端框架,如 Vue、React、Nuxt.js、Next.js 等。

React 类组件

最开始,React 中的组件都是类组件,需要结合生命周期来编写,写起来很麻烦。直到 v16.8 版本引入了 Hooks,得以让我们更方便的使用函数组件,函数组件的代码也更加清晰易懂。

图片

因此,理解类组件是如何工作的以及生命周期方法仍然是很好的。但如果正在编写新的 React 组件,建议使用带有 React Hook 的函数组件。

Bootstrap

Bootstrap 是一个流行的 CSS 框架,它提供了预定义的CSS样式、网格系统、JavaScript插件以及许多可重用的组件,如导航栏、按钮、表单等。在七八年前,很多网站都使用 Bootstrap 来编写,当时他们声称自己是“世界上最先进的响应式前端框架”。但是,现在来看,Bootstrap 的样式并不是很美观,还存在包体积大,难以自定义,实现落后,开发体验不好等问题。

如今,有很多更优秀的替代方案可以选择,比如:

  • UI 组件库:Ant Design、Element UI、Arco Design;
  • CSS-in-JS:Styl-Components、Emotion;
  • 功能类优先框架:Tailwind CSS、UnoCSS。

Python Django

Django 是 Python 语言的一种 Web 开发框架,曾被广泛用于创建动态网站,但由于现代前端技术如 React、Angular 和 Vue 的兴起,Django 已经不再是前端开发中的必须技术。Django 相对于现代前端框架来说,生态系统不完善,开发难度更大,并且不符合现代开发的前后端分离的理念。可以选用现在更为流行的前端框架,比如 React、Vue等。

AngularJS

AngularJS 由 Google 于 2010 年发布,当时最著名的 JavaScript 库是 jQuery。AngularJS(也称为 Angular 1)不仅仅是一个库,它是一个将 MVVM 概念带入前端开发世界的完整框架。

2016 年,我们今天所熟知的 Angular 发布了。注意,不要把 AngularJS 和 Angular 混淆了。AngularJS 从版本 2 开始就被 Angular 取代了,目前已经不再被 Google 官方支持和维护。

图片

Angular 是一个用 TypeScript 编写的现代化前端框架,是对 AngularJS 的改进和升级。它采用了组件化编程范式、模块化体系结构,并提供了更好的性能、可扩展性和可测试性。Angular 又被称为 "Angular 2+" 或 "Angular Next"。

对于新的项目,可以选择使用 Angular 来开发,但是更推荐使用更受欢迎的 Vue 和 React 来开发,因为在国内这两个框架使用的更多,生态更加完善,社区比较活跃,这也意味着遇到问题时更容易解决。

Ajax

Ajax 在前端开发中曾经被广泛使用,但现在已经成为基本技术,不再是独立的技术。Ajax 只有在前端面试中可能会被问到,很少会在实际的项目中需要编写 Ajax。Ajax 的功能简单,使用起来有很多局限性,推荐使用功能更全面的第三方数据请求库来处理数据请求,比如 Axios,它们的功能更加全面,使用起来也更方便,或者更现代化的前端请求 API:fetch。

Grunt、Gulp

Grunt 和 Gulp 都是前端自动化构建工具,它们可以帮助开发者自动化地执行文件编译、压缩、合并等任务:

  • Grunt 是一个基于配置的前端自动化工具,开发者需要通过编写详细的配置文件(Gruntfile.js)来描述任务的执行过程。Grunt 的生态系统中有大量的插件,覆盖了几乎所有前端开发中可能用到的任务,这让开发者可以快速找到适合自己的插件并加以利用。
  • Gulp 是基于流式处理的前端自动化构建工具,它的核心理念是使用流来处理文件。在任务执行过程中,文件以流的形式在任务之间传递,这种方式使得 Gulp 的构建过程更加高效,并且能够减少磁盘的读写操作。

虽然这两个工具都很强大,目前还有一些使用场景。但是随着前端的快速发展,出现了很多更为现代化工具,比如 Webpack、Vite 等,这些工具使用更简单,效率更高,推荐使用这些现代化的构建工具。

雪碧图

CSS雪碧图是一种将多个小图标或图片合并成一张大图的技术。通过将多个图标或图片合并成一张大图,然后使用CSS的背景定位来控制显示不同部分的图像,从而减少了页面加载的请求次数,提高网页性能。

但是随着前端技术的快速发展,出现了更多实用的技术,比如 SVG、iconfont,这些技术提供了更多灵活性和便利性,很多情况下可以取代雪碧图。HTTP 2 的出现使得一次可以请求多个文件,雪碧图存在的意义就不大了。并且,由于雪碧图使用复杂,不易维护,一张图崩了整个网页的图标就都崩了,图标位置确定后就不好再修改等问题,不再需要雪碧图这种形式。

IE兼容技术

2022 年 6 月 16 日,IE 浏览器正式退役,之后将由 Edge 浏览器接棒继续提供服务。许多网站和程序要求兼容 IE,IE6 对 W3C 标准支持不够友好,这可能是很多前端开发的噩梦了,IE6 的普及导致之后的 20 年间,不断有开发者因为适配需要适配 IE6 而焦头烂额。

如今,IE 浏览器,由现代浏览器 Edge 继续提供服务,Edge 紧跟最近的技术,快速更新和维护。开发者也不再需要学习那些令人头疼的兼容 IE 的技术了,喜大普奔!

图片

相关文章:

当年很流行,现在已经淘汰的前端技术有哪些?

近几年,前端技术真可谓是飞速发展,不断有新的技术涌现,爆火的前端框架 Astro,前端运行时 Bun,构建工具 Vite 等都给前端提供了强大动力。当然,也有很多前端技术随着技术的发展不再需要使用,有了…...

IP地址定位是什么?有哪些优缺点?

IP地址定位是一种用于确定设备或用户地理位置的方法,具有一些明显的优点和缺点。以下是IP地址定位的优缺点: 优点: 广泛适用性: IP地址定位适用于几乎所有与互联网连接的设备,包括计算机、智能手机、平板电脑和物联网…...

scrapy爬虫之网站图片爬取

Scrapy是一个强大的Python爬虫框架,可以用于爬取网站上的各种数据,包括图片。以下是一个简单的示例,演示如何使用Scrapy来爬取网站上的图片: 安装Scrapy: 如果尚未安装Scrapy,可以使用以下命令安装它&…...

flask整合rabbitMQ插件的方式

文章目录 二、Python-flask-rabbitMQ-插件方式整合引言具体步骤1 安装依赖:2 编写实体类:3 编写消费者和生产者:4 初始化消费者和生产者:5 其他地方使用生产者 二、Python-flask-rabbitMQ-插件方式整合 引言 当今互联网应用的高…...

【React】高频面试题

1. 简述下 React 的事件代理机制? React使用了一种称为“事件代理”(Event Delegation)的机制来处理事件。事件代理是指将事件处理程序绑定到组件的父级元素上,然后在需要处理事件的子元素上触发事件时,事件将被委托给…...

Java数据结构之稀疏数组

目录 线性结构与非线性结构线性结构非线性结构 稀疏数组应用场景 代码实现二维数组转稀疏数组稀疏数组转二维数组 线性结构与非线性结构 线性结构 数据结构分两种,线性与非线性,线性结构的数据元素之间存在一对一的关系。 一对一指的是每个数据元素都…...

迅为RK3568开发板RTMP推流之视频监控

1 搭建 RTMP 媒流体服务器 nginx-rtmp 是一个基于 nginx 的 RTMP 服务模块,是一个功能强大的流媒体服务器模块, 它提供了丰富的功能和灵活的配置选项,适用于构建各种规模的流媒体平台和应用。无论是搭建实时视频直播平台、点播系统或多屏互…...

利用CSRF或XSS攻击网站的例子

利用 CSRF 攻击网站的简单示例&#xff1a; 假设有一个在线银行应用&#xff0c;用户可以在其中执行转账操作。用户登录后&#xff0c;系统会生成一个包含转账信息的表单&#xff0c;用户需要填写表单来发起转账。这个表单如下所示&#xff1a; <form action"https:/…...

LeetCode讲解篇之113. 路径总和 II

文章目录 题目描述题解思路题解代码 题目描述 题解思路 深度优先遍历二叉树&#xff0c;遍历的同时记录路径&#xff0c;直到遍历到叶节点&#xff0c;若路径和为targetSum则添加到结果集中 题解代码 func pathSum(root *TreeNode, targetSum int) [][]int {var res make([…...

中国HR从业者现状是怎样的?应如何提升自己?

HR(Human Resource)解释为人力资源&#xff0c;现在统称为人力资源顾问&#xff0c;跟传统人事有本质区别。传统人事一般是和行政部做相类似的工作&#xff0c;比如招聘&#xff0c;培训&#xff0c;职员的考核&#xff0c;职员的薪酬&#xff0c;职员调动等。现代人力资源&…...

Promise笔记-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题

Promise笔记 1. 预备知识1.1 实例对象与函数对象1.2 两种类型的回调函数1. 同步回调2. 异步回调 1.3 JS中的异常error处理1. 错误的类型2. 错误处理&#xff08;捕获与抛出&#xff09;3. 错误对象 2.Promise的理解和使用2.1 Promise是什么1.理解Promise2.Promise 的状态3. Pro…...

计算机考研自命题(2)

1、C语言-字符串交替拼接 1、用C编程&#xff0c;将两个字符串数组存储实现交替连接如aaa和bbb两个字符连接成ababab 如aaa和baba 两个字符&#xff0c;连接成 abaaaba #include<stdio.h>/* 解题思路&#xff1a;将两个字符串交替拼接&#xff0c;定义三个数组&#xff0…...

ZKP6.1 Discrete-log-based Polynomial Commitments (Preliminary)

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 6: Discrete-log-based Polynomial Commitments (Yupeng Zhang) Recall How to build an efficient SNARK? A polynomial commitment scheme A polynomial interactive oracle proof (IOP) SNARK for general circuits Plo…...

五金经营小程序商城的作用体现在哪

对消费者而言&#xff0c;如今线上购买五金是很多人的选择&#xff0c;传统线下购买&#xff0c;不仅需要跑路&#xff0c;而且店内未必有所需品&#xff0c;但线上平台则一目了然购买所需品&#xff0c;本地/外地均可以触达到&#xff0c;同时还可对用户/会员进行高效管理&…...

今年这行情,不会自动化的要做好心理准备了

李强是一名软件测试工程师&#xff0c;入行之后在一家小型公司工作了五年。这段时间里&#xff0c;他主要负责手工测试和一些简单的自动化测试工作。由于公司项目也相对简单&#xff0c;他逐渐陷入了工作的舒适区&#xff0c;没有积极追求新的知识和技能。 然而随着身边朋友发展…...

汽车保养笔记

汽车保养笔记 汽车小保养汽车大保养五油&#xff1a;机油变速箱油刹车油转向助力油离合器油 四滤&#xff1a;机油滤芯更换空气滤芯更换空调滤芯更换汽油滤芯更换 三水防冻液(水)玻璃水电瓶水 其他刹车片球头减震器火花塞 4S店的4大套路---没必要清洗节气门更换火花塞和高压线圈…...

【斗破年番】官方改编用心了,彩鳞怀孕并未删,萧潇肯定登场,真相在丹药身上

【侵权联系删除】 【文/郑尔巴金】 斗破苍穹年番动画已经更新了&#xff0c;相信不少人都感觉到不可思议&#xff0c;萧炎跟随美杜莎女王回蛇人族的剧情&#xff0c;居然魔改成这样。好好的腹中孕育出新生命&#xff0c;变成了陨落心炎残余能量&#xff0c;不及时处理的话&…...

英语——分享篇——每日200词——3201-3400

3201——air-conditioning——[eərkəndɪʃnɪŋ]——n.空调设备&#xff1b;vt.给…装上空调——air-conditioning——air-condition空调(熟词)ing鹰(谐音)——空调设备的噪音让鹰不得安宁——The trains dont even have proper air-conditioning, grumbles Mr So. ——地铁…...

合并区间(C++解法)

题目 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;intervals …...

CUDA学习笔记(十四) Constant Memory

转载至https://www.cnblogs.com/1024incn/tag/CUDA/ CONSTANT MEMORY constant Memory对于device来说只读但是对于host是可读可写。constant Memory和global Memory一样都位于DRAM&#xff0c;并且有一个独立的on-chip cache&#xff0c;比直接从constant Memory读取要快得多…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...