Web前端框架/库/工具

news2024/9/20 3:23:56

前言

前端从步枪(原生js)到了半自动武器(jQuery)并进化为全自动武器(三大框架(angular,react,vue及其生态链))。

常说工欲善其事必先利其器。对于那些想要提高用户体验的企业来说,这一点尤其正确。在我们所处的数字世界中,给予UI或用户界面更多关注是一件非常必要的事。

在这里,我将简要地讨论前端框架在创建交互式网站方面的重要性,并提供一个推荐用于网络开发的顶级框架列表。

  • React.js
  • jQuery
  • Angular
  • Express
  • ASP.NET Core
  • Vue.js
  • ASP.NET

让我们来具体看一看每个框架。

JavaScript是最基本手工工具,jQuery是博世电动工具,vue.js和elementUI是做好的简易门、窗、桌子、凳子。

c8b9ef087d6d4c3484b2a16d97fe5775.png

5f33d5d8c974469e81e2e8aabd6f30f5.png

ae56334462e34ad285125af01b9c210a.png

e0cf32a92e7042b9a48a7cdff16164af.png

06ac909166974257a430dd9f7b54d3d6.png

三大框架,大量采用设计模式,基于架构思想;

比如单例(angular中的服务)、观察者(数据绑定、事件、消息)、装饰(框架组织各对象、指令)之类设计模式;

比如 mvvm 模式架构,代码分层,组织各职责(模块、模型、服务、控制器、组件、视图)对象,使之协作,如 vm 粘合视图和模型。

而 jQuery、Bootstrap UI、Lodash 之类框架/库/工具,提供的是特定功能对象,有采用设计模式实现功能,如 jQuery 外观模式各种 Ajax 操作,但无对整个项目工程的组织。

都是解决软件工程中各种痛点,关注点、切入点不一样,都很复杂。

简而言之:三大前端框架中的vue和react,就是视图层的library,angular稍重一点,属于大而全的framework,jQuery是一个工具库,与underscore和lodash相比,前者侧重于DOM与BOM相关的web api,后者侧重数据与逻辑,bootstrap,一种响应式的设计模式,同时提供了快速开发所需的css代码,ui组件和设计范式,elementui,layui,easyui这些都属于ui库了,用于视图层快速搭建某一类风格页面的“物料”。

一、React.js

发布年份 - 2013年开发单位 - Meta (Facebook)

React.js是一个由Facebook开发的JavaScript库,有助于创建交互式UI。它通过为个人网站构建互动元素,在网络开发中提供支持。

使用React.js的优点和缺点

优点:

  • 开发人员可以很容易地在一个小的组件中进行修改。
  • 组件得以重复利用,避免反复开发。
  • 拥有大量的开发人员,大量技术支持。
  • 使用谷歌搜索引擎,索引很简单。

缺点:

  • 因为更新换代太快,编写文档变得困难。
  • 由于React.js的开发速度缓慢,它可能需要开发人员重新学习流程。
  • 虽然可有可无,但有可能出现的JSX可能在很大程度上使新的开发者感到困惑。
  • 在React.js上,索引有时可能是个难题。

二、jQuery

发布年份 - 2006开发者 - jQuery团队

jQuery是一个快速、小型且以功能为中心的JavaScript库,它使动画和HTML文档遍历等任务变得容易。

它还提供了技术支持,以确保使用该框架开发的网站具有多功能性和可扩展性。简言之,它改变了开发者编写JavaScript的方式。

使用jQuery的优点和缺点

优点:

  • 开发灵活性较高的Ajax模板变得很容易。所以避免了闪屏刷新,使网站使用更丝滑。
  • 该网站有一套大型的文档和教程。这使得前端开发者可以轻松地学习网页开发的基础知识。
  • 不同的功能变得容易执行。

缺点:

  • 与其他CSS相比,表现缓慢。
  • 如果在没有强大的JS基础上使用jQuery,错误是不可避免的。
  • 由于jQuery的开放源码性质,不易拓展修改。

三、Angular

发布年份 - 2016年开发单位 - 谷歌

被称为现代网络开发人员的库,Angular为专业人士提供了灵活性,提高了网站的开发速度。它为开发专家提供技术支持,以获得对可扩展性的最终控制。因此,满足数据要求变得很容易。

Angular的优点和缺点

优点:

  • 拥有一个优秀而丰富的材料设计库,确保网站具有很高的质量。
  • 其中的代码是可读的,也是可以测试的。
  • 提高了开发的速度和性能。

缺点:

  • 对SEO爬虫的可访问性差,使其难以执行优化网站的任务。
  • 由于没有服务器授权和认证支持,授权等任务变得很困难。因此,用户授权和数据安全访问也成为了挑战。

四、Ember.js

发布年份 - 2011年开发单位 - Ember核心团队

Ember.js是一个开源的JavaScript网络框架,协助开发者创建单页网站。由于其中API的存在,开发任务得到简化。

使用Ember.js的优点和缺点

优点:

  • 理解写好的代码很容易,因此对所有的开发者来说,完成一个项目是一个简单的任务。
  • 通过它可以顺利地保证数据管理。
  • 提供双向的数据绑定支持。

缺点:

  • 拥有复杂的语法。
  • 拥有非常少的在线资源,因此学习使用它可能很困难。
  • 对配置的依赖性会更大。

五、ASP.NET CORE

发布年份 - 2016年开发者 - .NET基金会

作为微软在2016年推出的免费开源框架,ASP.NET Core有助于提高网络性能。它在运行不同的组件、API时以最稳定的速度提供支持。

使用ASP.NET Core的优点和缺点

优点:

  • 与旧版本(ASP.NET MVC)相比,它能提供约23倍的请求。
  • 由于其开源性质,它有助于提高总体质量。
  • 通过新集成的网络服务器Kestrel,简化了IT部门的工作。

缺点:

  • 学习该框架可能需要相当长的时间。
  • 工作流相关的服务,如Windows工作流基金会、工作流服务等,缺乏进入.NET核心的计划。
  • 第三方库支持缺失。因此,如果类库使用了可能不被支持的.NET框架API,那么兼容性可能成为一个问题。

六、Vue.js

发布年份 - 2014年开发者 - Evan You

一个开源的MVVM前端Web开发JS框架,它有助于建立互动的Web用户界面。它以高性能著称,也因使用反应式和编译器优化的渲染系统而闻名,几乎不需要依赖人工优化。

Vue.js的优点和缺点

优点:

  • 在开发可能很复杂的项目时,使用方便。
  • 加速了整个开发过程。
  • 容易学习。具备良好的JavaScript知识就可以开始使用该框架了。

缺点:

  • 一个开发者所占比例小的小规模社区,不适合用于大型项目。
  • 拥有较少的插件,可能需要切换到其他语言。
  • 双向绑定可能是一项任务。因此,你需要扁平化代码以实现无感数据处理。

七、ASP.NET

发布年份 - 2022年

开发单位 - 微软

ASP.NET协助开发者使用C#创建直观和有吸引力的Web UI。.NET可以通过WebAssembly在浏览器中运行。

此外,它还确保了服务器和客户端之间的双向实时通信。它支持创建独立和易于部署的微服务,可以在Docker上顺利运行。

ASP .NET的优点和缺点

优点:

  • 编码时间大大减少。
  • 功能独特,具有高性能和高可扩展性。
  • 有通用语言运行时的框架语言基础,具有高灵活性。

缺点:

  • 服务器许可证和支付费用昂贵。
  • 文档理解困难。
  • 进行更新可能需要较长的时间。

了解了这些框架和它们不同的优缺点,让我们评估一下标准,以确保我们做出正确的选择。

如何正确选择前端框架

1、检查他们的核心功能并仔细阅读他们的文档。

2、选择一个可定制、可配置的框架。

3、分析它对服务器端渲染的支持。

一旦你了解到前端框架可以无缝地实现所有这些方面,你就爱上了使用它进行Web开发。

阅读这篇文章后,你可能对使用合适的前端框架有所了解。它将帮助你创建一个具有丰富用户界面的沉浸式网站,提供重要的商业价值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1612789.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络原理-IP协议

一、IP协议报头 版本号:用来表示IP协议的版本,现在常用的IP协议有两个版本,IPv4和IPv6,其他版本可能只存在于实验室中,并没有被广泛的使用。 首部长度:用来表示IP报头的长度,因为存在"选项"字段,所以IP报头是可变长的,此处单位为4…

B树和B+树试题解析

一、单项选择题 01.下图所示是一棵(A ). A.4阶B树 B.3阶B树 C.4阶B树 D.无法确定 02.下列关于m阶B树的说法中,错误的是( C ). A.根结点至多有m棵子树 B.所有叶结点都在同一层次上 C.非叶结点至…

【MySQL】查询(进阶)

文章目录 前言1、新增2、聚合查询2.1聚合函数2.1.1count2.1.2sum2.1.3avg2.1.4max和min 2.2、GROUP BY子句2.3HAVING 3、联合查询/多表查询3.1内连接和外连接3.2自连接3.3子查询3.4合并查询 前言 在前面的内容中我们已经把查询的基本操作介绍的差不多了,接下来我们…

基于SpringBoot + Vue实现的学生心理咨询评估管理系统设计与实现+毕业论文+开题报告+答辩PPT

介绍 系统有管理员和用户。 管理员可以管理个人中心,用户管理,试题管理,试卷管理,考试管理等。用户参加考试。 学生心理咨询评估系统的登录流程,针对的角色就是操作员的操作角色。在登录界面需要的必填信息就是账号信…

创新案例|Amazon.com 2023 年营销策略:电子商务零售巨头商业案例研究

2022 年最后一个季度,亚马逊报告净销售额超过 1,492 亿美元。这种季节性峰值是亚马逊季度报告的典型特征,但增长是不可否认的,因为这是该公司有史以来最高的季度。毫无疑问,这家电商零售巨头继续引领电商增长。本文将介绍我们今天…

Flink学习(七)-单词统计

前言 Flink是流批一体的框架。因此既可以处理以流的方式处理,也可以按批次处理。 一、代码基础格式 //1st 设置执行环境 xxxEnvironment env xxxEnvironment.getEnvironment;//2nd 设置流 DataSource xxxDSenv.xxxx();//3rd 设置转换 Xxx transformation xxxDS.…

【春秋云镜】CVE-2023-43291 emlog SQL注入

靶场介绍 emlog是一款轻量级博客及CMS建站系统,在emlog pro v.2.1.15及更早版本中的不受信任数据反序列化允许远程攻击者通过cache.php组件执行SQL语句。 不感兴趣的可以直接拉到最后面,直接获取flag 备注:没有通过sql注入获取到flag&…

python多线程技术(Threading)

文章目录 前言一、多线程(Threading)是什么?二、threading库1.初识多线程2.增加新线程2.1 多线程的基本使用2.2 对多线程是同时进行的进行一个直观上的演示(非重点--理解是实时就行)2.3 thread.join()功能2.4 使用queue(队列)功能获取多线程的返回值(重要,这就是前面那…

MySql对于时间段交集的处理和通用实现方式(MyBatis-Plus)

问题:一般传统时间筛选是在[ 开始时间 → 结束时间 ]这个区间内的子集,也就是全包含查询方式,这种只会筛选一种情况。如果场景需要是开展一个活动,需要活动时间检索应该但凡包含就返回,也就是需要查询这个时间段有涉及…

Java的Hash算法及相应的Hmac算法

【相关知识】 加密算法知识相关博文:浅述.Net中的Hash算法(顺带对称、非对称算法)-CSDN博客 【出处与参考】 MessageDigest 类介绍、分多次调用update方法与一次性调用一致的说明引自: https://blog.csdn.net/cherry_chenr…

2024 IDM最新破解版及软件介绍

*IDM:信息时代的高效管理工具** 在快节奏的现代社会中,随着信息的爆炸式增长,如何高效、有序地管理信息成为每个人都需要面对的挑战。IDM,作为一种信息管理工具,正在逐渐受到人们的青睐。 IDM,全称Inform…

HAL STM32 I2C方式读取MT6701磁编码器获取角度例程

HAL STM32 I2C方式读取MT6701磁编码器获取角度例程 📍相关篇《Arduino通过I2C驱动MT6701磁编码器并读取角度数据》🎈《STM32 软件I2C方式读取MT6701磁编码器获取角度例程》📌MT6701当前最新文档资料:https://www.magntek.com.cn/u…

Scanpy(1)数据结构和样本过滤

注:主要讲述scanpy处理数据的结构、数据过滤(生信领域)和数据预处理(和机器学习类似,但是又有不同。) 1. Scanpy简介与安装 Scanpy 是一个可扩展的工具包,用于分析与 AnnData(一种…

git 小记

一、 github新建仓库 git clone 。。。。。。。。。。。 (增删查补,修改) git add . git commit -m "修改” git push (git push main) 二、branch 分支 branch并不难理解,你只要想像将代码拷贝到不同目录…

ruoyi-vue前端的一些自定义插件介绍

文章目录 自定义列表$tab对象打开页签关闭页签刷新页签 $modal对象提供成功、警告和错误等反馈信息(无需点击确认)提供成功、警告和错误等提示信息(类似于alert,需要点确认)提供成功、警告和错误等提示信息&#xff08…

restful请求风格的增删改查-----修改and删除

一、修改&#xff08;和添加类似&#xff09; 前端&#xff1a; <script type"text/javascript">function update(){//创建user对象var user {id:$("#id").val(),username:$("#username").val(),password:$("#password").val…

排序 “贰” 之选择排序

目录 ​编辑 1. 选择排序基本思想 2. 直接选择排序 2.1 实现步骤 2.2 代码示例 2.3 直接选择排序的特性总结 3. 堆排序 3.1 实现步骤 3.2 代码示例 3.3 堆排序的特性总结 1. 选择排序基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个…

又来!黄金主题LOF(161116)溢价40%开放申购,拖拉机都开冒烟了!

查看基金公告&#xff0c;黄金主题LOF(161116)下周一(4月22号)开放申购&#xff0c;限额100元&#xff0c;目前溢价40%&#xff0c;可以一拖七套利。 这熟悉的配方&#xff0c;这熟悉的套路&#xff01;一个月前的今天&#xff0c;我好像在标普500LOF上见过。又是易方达这个狗基…

数据结构_时间复杂度

✨✨所属专栏&#xff1a;数据结构✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 什么是时间复杂度&#xff1f; 时间复杂度的定义&#xff1a;在计算机科学中&#xff0c;算法的时间复杂度是一个函数&#xff0c;它定量描述了该算法的运行时间。一个算法执行所耗费的时间&#xff0…

上位机图像处理和嵌入式模块部署(树莓派4b和类muduo网络编程)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 既然是linux编程&#xff0c;那么自然少不了网络编程。在linux平台上面&#xff0c;有很多的网络编程库可以选择&#xff0c;大的有boost、qt&…