前端框架与库解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43331014/article/details/124981962

前端各框架和组件梳理

- 前端六大基本概念

前端知识点非常杂乱，我们需要区分哪些是框架，哪些只是完成某些功能的api集合。

前端六大基本概念

Library，Toolkit，Framework，Design，Boilerplate，Scaffolding
其中讨论的最多的是Library（库）和Framework（框架）。

1.Library（库）

Library就是库，而且分为两类，一个是方法库，一个是UI组件库。

1）AJAX

AJAX 即“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。这么说可能有些抽象，下面看个具体的例子：
在这里插入图片描述
如上图所示，当我们百度搜索东西时，下面会自动弹出来相关联的提示，这时候你输入的数据其实已经和服务器进行交互在数据库里查询匹配了，但你会发现整个页面并没有刷新，只是搜索框这一部分刷新。这就是AJAX的作用。

2）axiox

axios是前端必备的前后交互ajax请求库， vue/react官方推荐使用。
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： axios实现了对ajax的封装，更像是ajax的一种规范，简化了我们写代码的复杂度，其原理逻辑还是一样的。也可以说axios是ajax，ajax不止axios。

3）JQuery

JQuery是javascript的一个框架，它是对JavaScript进行了整合封装，所以对于整个前端来应该算是个库，也就是有人做好了很多功能，你直接拿来用就好了。比如实现Ajax。纯javascript，你可能需要些好多函数，来新建对象，捕捉事件，处理异常等。但用JQuery，你只要按规则调用一个方法就行。而且之前需要写好多代码判断是什么浏览器来正确使用不同的ajax版本，JQuery已经写好了判断，用$.ajax $.get $.post 甚至JSONP都已经给你封装好了，直接调用就OK。

UI组件库

UI组件库，满足特定业务需要的高可复用的常见UI组件集合。例如Ant Design of React/Ant Design of Angular(NG-ZORRO)，Element UI，LayUI，EasyUI。早期的Yahoo UI，Extjs，jQuery UI。此处不作详细的介绍了。

2.Framework（框架）

框架是用来构建一个应用的主体结构。你在这个主体结构上添砖加瓦，实现自己的需求，有些框架实际上就是各种库和组件的集成。用来构建一个应用的主体结构。你在这个主体结构上添砖加瓦，实现自己的需求。Web服务器端的框架基本实现的都是MVC设计模式，你在Model、View、Controller层分别去添加代码。Web前端，Angular(以及它的前身Angularjs)实现的都是MVP模式，是Model、View、Presenter三层。老一辈的其他前端框架，例如Backbone、Ember，实现的是所谓MVVM。

1）Angular

Angular是一款优秀的前端JS框架，Angular有着诸多特性，最为核心的是MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能，在自定义指令后可以在项目中多次使用。