为什么使用前端框架

刚工作那会，前端都是用HTML+CSS+JS来写的,现在各种前端框架层出不穷，基本都是引入前端框架来构建前端，为什么？

一、什么是框架

框架是一个可复用的设计构件，它规定了应用的体系结构，阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程，表现为一组抽象类以及其实例之间协作的方法，框架的关键还在于框架内对象间的交互模式和控制流模式。应用框架强调的是软件的设计重用性和系统的可扩充性,以缩短大型应用软件系统的开发周期，提高开发质量。框架其实就是某种应用的半成品，就是一组组件，供你选用完成你自己的系统。简单说就是使用别人搭好的舞台，你来做表演。而且，框架一般是成熟的，不断升级的软件。　　

前端框架也是框架，是框架更具体的分类，是随着前端功能的增强而产生的，对于往应用方向发展（也就是越来越像客户端）的web产品就很必要做前端架构这件事，它开始以模型为中心，DOM操作只是附加，通过关注点分离鼓励改进应用程序。未来的发展趋势是前后端只靠json数据进行通信，后端只处理和发送一段json到前端，计算和模板渲染都在前端进行，后台程序不再做模板的任何处理。有效实现前后端的解耦，简化开发流程，便于维护管理，可以把精力更多放到业务逻辑，提升开发效率。　　

二、前端框架的特点：

1.声明式& 数据驱动渲染

React提供的JSX和Vue提供的模板目的是为了实现声明式渲染的功能。不论是JSX，或者是Vue中的模板，本质上都是描述了『状态』与『视图』之间的映射关系。所以声明式渲染是框架的特性。声明了映射关系之后，可以得到一个公式：　　

UI =render(state)

状态与视图之间的映射关系，等同于render函数。JSX与Vue的模板在这一点上是相同的。在框架的内部，不论是JSX还是Vue的模板，最终会编译成render函数。上面这个公式，输入的是state，输出的是DOM。所以输入变了输出就变了，这个特性就是我们常说的数据驱动视图。

这里会引出一个问题，框架必须要知道Web应用在运行时”状态“是否发生了变化，然后才能使用前面提到的公式重新输出一个新的UI。所以如何知道Web应用的状态在运行时是否发生了变化这个问题是所有框架必须去解决的。解决方案有很多种。不同框架，或者同一个框架的不同版本对这个问题的解决方案都不同，但相同的是都可以解决问题。

2. 组件化

现代主流框架都具备的一个特性是“组件”，它们都会以“组件”作为一个基本的抽象单元。可能不同的框架，它所提供的操控组件的方式不一样，但概念上是相似的。

之前听过一次尤雨溪的知乎Live，他将实际应用中的组件分为四种类型并依次介绍了四种组件之间的区别：

（1）展示型组件：展示型组件是最直接也是最常用的组件，就是用数据渲染视图，“数据进，DOM出”。

（2）接入型组件：接入型组件通常会跟接入数据的service层打交道。包含一些和服务器或数据源打交道的逻辑，然后接入型组件会将数据往下传，传给比较简单的展示型组件。在React中这种类型的组件被称为“容器组件（containercomponent）”。

（3）交互型组件：交互型组件典型的例子是对表单组件的封装和增强。大部分组件库，像ElementUI都是以交互型组件为主。这一类组件会有比较复杂的交互逻辑，但是它是一个非常通用的逻辑，所以它强调复用。

（4）功能型组件：功能型组件是比较抽象的组件。用Vue举例，路由的<router-view>和Vue自带的<transition>都属于功能型组件。它本身不渲染任何内容，它是一个逻辑型的组件。它通常作为一个扩展或一种抽象机制存在。

不同框架操控组件的方式可能不一样，但使用组件的“心法”永远是一样的。这就是关注特性带来的好处，你可以切换到任意一个框架，使用组件或封装组件时，总是上面列出的几种类型。掌握了“心法”的程序员在切换框架时，他的状态通常是这样的：我现在想写一个交互型组件，这个框架都提供了哪些API？去翻翻文档看一下。然后就可以写出一个很优雅的组件出来，哪怕刚使用这个框架才不到一天。如果没有掌握“心法”，用了一个框架写出的代码很糟糕，那么换了一个框架也不会写出更好的代码，甚至更糟糕。

3.路由

在前端框架中都是前端路由，可以保证性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。　　在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。

4.良好周边以及社区

一个框架的成长必然离不开别人的辅助升级。不断吸收新的想法使得框架走的会越来越好。

5、其他特性

前面详细介绍了几个个特性给大家感受下为什么要重视特性。框架的特性太多，而且不同的框架都会有不同的特性，不能每一个都详细介绍，下面列出一些大家比较熟悉的通用特性：

（1）状态和数据流管理

（2）CLI工具

（3）同构/服务端渲染

（4）CSS管理方案

三、总结

为什么使用前端框架，不再从零用HTML、CSS和JS写页面，主要是提高开发效率。既然叫框架，我们就可以引人该框架（舞台），我们只需要在上边跳舞即可，没必要自己在搭建舞台了。前端框架三巨头React、Angular和 Vue，虽然都很受欢迎，且保持着上升趋势，但Vue 爆发力最强，但在使用率上，仍低于React。我构建前端项目用的是Vue.js，Vue的整体思想是拥抱经典的Web 技术，并在其上进行扩展，之前HTML、CSS、JS也比较熟。