Web前端框架/库/工具

前言

前端从步枪(原生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.mzph.cn/web/1445.shtml

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

相关文章

【c++11】看完立马就懂--右值引用!!!

右值引用 一、什么是右值?什么是左值?二、右值引用三、右值引用的好处四、万能引用五、完美转发 一、什么是右值?什么是左值? 首先,当我们看到右值的时候,我们很自然的就会产生疑问? 什么的右边…

黑马鸿蒙学习5:LIST容器

LIST容器,其实就是如果FOREACH容器展示不全的话,会自动有滚动条了。要注意的是,LIST中必须有固定的listitem这个项,而且列表里面只能包含一个根组件。 必须把ROW容器放到listitem中,如下:

51、图论-岛屿数量

思路: 该问题要求在一个由 1(表示陆地)和 0(表示水)组成的二维网格中,计算岛屿的数量。岛屿被水包围,并且通过水平或垂直连接相邻的陆地可以形成。这个问题的核心是识别并计数网格中相连的陆地…

CSV解析

一直以为csv靠逗号(,)分割数据,那么只要用str.spilt(,,row)便可以将数据分割开。 事实证明想简单了,csv里还有这样的规定,如果数据内有双引号(")和逗号(,)那么&…

车载电子电器架构 —— 售后诊断开发

车载电子电器架构 —— 售后诊断开发 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己…

在Postgres中,如何有效地管理大型数据库的大小和增长

文章目录 一、定期清理和维护1. VACUUM和ANALYZE2. 删除旧数据和归档 二、分区表三、压缩数据四、配置优化1. 调整维护工作负载2. 监控和日志 五、使用外部存储和扩展1. 外部表和FDW2. 扩展和插件 六、定期备份和恢复测试结论 管理大型数据库的大小和增长是数据库管理员&#x…

Java中的变量与常量

标识符 Java语言规定标识符由任意顺序的字母、下划线(_)、美元符号($)和数字组成,并且第一个字符不能是数字。标识符也不能是Java中的关键字(保留字)。 在Java语言中,标识符的字母…

环境监测系统--------MQ系列气体检测模块驱动教程(保姆级教程)

⏩ 大家好哇!我是小光,嵌入式爱好者,一个想要成为系统架构师的大三学生。 ⏩在环境检测中我们经常会用到检测气体的传感器,检测乙醇、甲烷、一氧化碳、氢气等等,博主呕心沥血对MQ系列传感器做一个史上最详细的使用教程…

网络安全产品---堡垒机

what 在网上搜索 运维审计与风险控制系统就是是堡垒机 我认为的堡垒机就是提供高效运维、认证管理、访问控制、安全审计和报表分析功能的云服务设备 实现高效运维的同时最大程度控制运维风险。 how 能够对运维人员维护过程进行全面跟踪、控制、记录、回放 支持细粒度配置…

政企版 WPS Pro 专业版注册安装教程

政企版 WPS Pro 专业版安装及激活步骤 第 1 步:下载压缩包(内含注册码)【无解压密码】。 第 2 步:解压缩后,运行 exe 文件,默认步骤安装即可。 第 3 步:安装完成后,新建一个 Word …

使用QQ邮箱进行登录验证

使用场景不多说,接下来直接看实现~ 登录到QQ邮箱,进入设置 打开IMAP/SMTP服务,记得把授权码记录下来,后面配置文件中需要用到 新建application的配置文件 spring:mail:# 指定邮件服务器地址host: smtp.qq.comusername: 你自己的q…

ROS 2边学边练(31)-- 管理大工程

前言 往往现实中的工程都是会包含很多节点很多参数很多主题的那种,如果单独通过各种ros2 run命令进行启动管理,恐怕难以招架,主要还是通过launch文件的方式进行管理,而launch文件也可以像节点那样按功能的不同模块化,最…

【学习】黑盒测试用例设计方法都有哪些

在软件测试中,黑盒测试是一种重要的测试方法,它专注于软件的外部行为,而不关心其内部结构和实现。黑盒测试的目标是确保软件的功能符合需求规格说明书中的要求。为了有效地进行黑盒测试,需要设计合理的测试用例。本文将详细介绍黑…

【Android】Activity task和Instrumentation杂谈

文章目录 activity taskInstrumentation机制参考 Android不仅可以装载众多的系统组件,还可以将它们跨进程组成ActivityTask,这个特性使得每个应用都不是孤立的。 activity task 从数据结构角度看,Task有先后之分,源码实现上采取了…

基于SpringBoot+Vue钢材销售管理系统的设计与实现

系统介绍 为了更好地发挥本系统的技术优势,根据钢材销售管理系统的需求,本文尝试以B/S经典设计模式中的Spring Boot框架,JAVA语言为基础,通过必要的编码处理、钢材销售管理系统整体框架、功能服务多样化和有效性的高级经验和技术…

高级IO简介

一、非阻塞IO 阻塞其实就是进入了休眠状态,交出了 CPU 控制权。 普通文件的读写操作是不会阻塞的,不管读写多少个字节数据, read() 或 write() 一定会在有限的时间内返回,所以普通文件一定是以非阻塞的方式进行 I/O 操作&…

【Visual Studio 2012中文版】下载安装以及使用方法

文章目录 前言一、下载安装包二、安装步骤1.双击VS2012_ULT_chs.iso文件打开2.双击vs_ultimate.exe打开安装程序3.选择要安装的功能4.软件正在安装,请耐心等待10分钟5.安装成功,点击“启动”6.激活码(产品密钥) 三、VS2012使用&am…

CRMEB Pro版营销功能规则解读

现在,无论是中小型企业拓宽渠道,还是传统企业转型,基本都在考虑布局线上,做微商城是一大趋势,相比传统第三方电商平台,独立部署的商城系统自主性更强,功能开发也更灵活。其中,作为电…

vue3 -- 项目使用自定义字体font-family

在Vue 3项目中使用自定义字体(font-family)的方法与在普通的HTML/CSS项目中类似。可以按照以下步骤进行操作: 引入字体文件: 首先,确保你的字体文件(通常是.woff、.woff2、.ttf等格式)位于项目中的某个目录下,比如src/assets/font/。 在全局样式中定义字体: 在你的全局…

[阅读笔记25][WebArena]A Realistic Web Environment for Building Autonomous Agents

这篇论文提出了WebArena这个环境与测试基准,在24年1月发表。 之前的agent都是在一些简化过的合成环境中测试的,这会导致与现实场景脱节。这篇论文构建了一个高度逼真、可复现的环境。该环境涉及四个领域:电子商务、论坛讨论、软件开发和内容管…