Web前端框架/库/工具

ops/2024/9/19 7:34:15/ 标签: 前端框架

前言

前端从步枪(原生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.ppmy.cn/ops/7797.html

相关文章

TPCC MySQL

目录 1. tpcc-mysql下载 2. tpcc-mysql安装 3. 初始化tpcc-mysql 4. 使用tpcc-mysql测试 5. 结果解释 1. tpcc-mysql下载 https://github.com/Percona-Lab/tpcc-mysql 2. tpcc-mysql安装 [rootlocalhost soft]# unzip tpcc-mysql-master.zip [rootlocalhost soft]# cd t…

代码随想录训练营24day-贪心算法2

一、122 买卖股票最佳时机 题目介绍限制条件,必须卖了再买,而且当前交易一只股票。一开始想法是去遍历,找到每个区间段间的差值,然后再相加。看了解答,其实每一天的利润,都是可以用差值表示出来&#xff0…

Spring - 1 ( 8000 字 Spring 入门级教程 )

一:SpringBoot 快速上手 环境准备 ⾃检Idea版本: 社区版: 2021.1 -2022.1.4专业版: ⽆要求 如果个⼈电脑安装的idea不在这个范围, 需要卸载重新安装.(⼀定要删除注册表) Maven Maven是⼀个项⽬管理⼯具。基于POM(Project Object Model,…

centos 7.9 安装 ftp 传输文件

ftp server 端 sudo yum install vsftpd ftp其中 vsftpd 为 ftp server 端,ftp 包含 ftp 这个客户端命令。 # sudo rpm -ql vsftpd/etc/logrotate.d/vsftpd /etc/pam.d/vsftpd /etc/vsftpd /etc/vsftpd/ftpusers /etc/vsftpd/user_list /etc/vsftpd/vsftpd.conf /…

耀斑层-如何在Unity中实现耀斑亮光效果

在Unity中实现耀斑亮光效果可以通过以下步骤来实现: 创建一个空物体作为光源:在场景中创建一个空物体,并将其放置在需要发出耀斑亮光效果的位置上。 添加光源组件:选中空物体,在Inspector面板中点击"Add Compone…

C# 下记录(Record)详解

在C# 9.0中,引入了一个新的关键字:record。record关键字用于定义记录类型,这是一种不可变的数据结构,用于表示具有明确字段名称和类型的数据集。本文将详细介绍C#中record类型的使用和特点,以及如何通过记录记录器&…

使用easyexcel将csv转为excel

一.背景 供应商系统下载的csv文件不支持域控(主要是第三方wps服务不能对csv文件加密,但是可以对office系列产品进行权限访问的加密控制)。因此思路就改为现将csv文件转为excel文件,然后对excel文件进行加域控制。本文主要介绍如何…

数据结构--双向链表

在讲双向链表之前,我们先了解一下链表的分类: 链表的结构⾮常多样,主要分为带头与不带头、单向与双向、循环与不循环。三个种类可以任意搭配,所以总共可以形成八种链表,但是最常用的是单向不带头不循环链表和双向带头循…

html、css、QQ音乐移动端静态页面,资源免费分享,可作为参考,提供InsCode在线运行演示

CSDN将我上传的免费资源私自变成VIP专享资源,且作为作者的我不可修改为免费资源,不可删除,寻找客服无果,很愤怒,(我发布免费资源就是希望大家能免费一起用、一起学习),接下来继续寻找…

代码托管基础操作

在待上传代码文件夹中右键,打开Git Bash Here依次输入以下命令: git init(在本地初始化一个代码仓库,具体表现为会在你的文件夹里出现一个隐藏的.git文件夹) git add .(先把代码放到本地的一个缓冲区)添加当前目录下的…

命理八字之答案之书前端uniapp效果实现

#uniapp# #答案之书# 不讲废话&#xff0c;先上截图 <div class"padding"><div class"flex align-center justify-center" style"padding-top:100px;"><div class"radarContainer"><div id"radarBox"…

初识ansible变量及实例配置

目录 1、为什么要使用变量 2、变量分类 3、 变量详解 3.1 vars,vars_files , group_vars 3.1 .1 vars 剧本中定义变量 3.1.2 vars_file 将变量存放到一个文件中&#xff0c;并在剧本中引用 3.1.3 group_vars 创建一个变量文件给某个组使用 实例1-根据不同的主机…

[ LeetCode ] 题刷刷(Python)-第35题:搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 nums 为 无重复元素 的 升序 排列数组 请必须使用时间复杂度为 O(log n) 的算法。 示例 示例 1: 输入: …

Django老项目升级到新版本

手上有个 Django 老项目&#xff0c;一直跑得好好的&#xff0c;好几年没动过了&#xff0c;维护费收得正爽&#xff0c;没想到客户来了个新的运营人员&#xff0c;丢了个改动需求过来。我一看也没啥大改&#xff0c;就答应了。大意了。 问题 刚开始改&#xff0c;我这种老鸟…

MongoDB聚合运算符:$sampleRate

MongoDB聚合运算符&#xff1a;$sampleRate 文章目录 MongoDB聚合运算符&#xff1a;$sampleRate语法使用举例 $sampleRate聚合运算符用$match&#xff0c;按照指定的抽样比例&#xff0c;从输入的文档中随机选择相应的文档。 语法 { $sampleRate: <non-negative float>…

使用Spring Boot整合定时任务(Schedule)

1、添加依赖&#xff1a; 在pom.xml文件中添加Spring Boot的定时任务依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId> </dependency> 2、创建定时任务类&#xff1a; 创建…

搜索+剪枝,LeetCode 216. 组合总和 III

目录 一、题目 1、题目描述 2、接口描述 python3 cpp 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 python3 cpp 一、题目 1、题目描述 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多…

Linux下跟踪某个进程的内核处理时延消耗情况

1.利用系统自动的trace功能&#xff0c;编辑如下脚本&#xff0c;vim trace_process.sh #!/bin/sh cd /sys/kernel/debug/tracing/ #清空原有跟踪信息 echo > trace echo nop > current_tracer #设置要跟踪的进程 echo "pid281255" echo 281255 > set_ftra…

【项目】仿muduo库One Thread One Loop式主从Reactor模型实现高并发服务器(TcpServer板块)

【项目】仿muduo库One Thread One Loop式主从Reactor模型实现⾼并发服务器&#xff08;TcpServer板块&#xff09; 一、思路图二、模式关系图三、定时器的设计1、Linux本身给我们的定时器2、我们自己实现的定时器&#xff08;1&#xff09;代码部分&#xff08;2&#xff09;思…

ASP.Net MVC 登录页面实现RSA非对称加密

一、什么是RSA非对称加密 RSA是1977年由罗纳德李维斯特&#xff08;Ron Rivest&#xff09;、阿迪萨莫尔&#xff08;Adi Shamir&#xff09;和伦纳德阿德曼&#xff08;Leonard Adleman&#xff09;一起提出的。 RSA算法是一种非对称加密算法&#xff0c;与对称加密算法不同…