前端为什么使用框架？解决了哪些问题？

JavaScript 框架对于前端来说就像是，八倍镜对于98K一样重要，成为了前端开发事半功倍，不可或缺的一部分。但是很少有人思考过，我们为什么使用框架？仅仅是因为代码量减少吗？

很多前端开发者使用框架是因为：

“ 现在某某框架很火，我也要学习使用一下。”

“ 这个框架 UI 库很多，漂亮，跟公司设计很相似。”

“ 这个框架有很多插件，引入调用一下就行，省了我很多代码量。”

“ 公司项目碰巧很适合做单页面应用。”

“ 我喜欢用数据绑定。”

上面的几个答案确实是框架可以解决的问题，但仅仅是因为这些吗？因为某一个问题，就引入一个庞大的框架，绝不应该如此。

为什么使用框架？

近年来，因为互联网的崛起，web 业务也越来越复杂和多元化，一个web项目也不是像以前那样写几个网页拼起来，加几个特效 duang 一下就成了。项目复杂了，出现的问题也就多了。

前后端分离

在前后分离概念出现之前，大部分 web 项目都是后端人员又当爹又当妈的，前后端一起搞，导致质量和效率不是很好。而且对个人的发展也有影响，一个人你什么都会，也意味着你什么都不精，毕竟天才还是少数的。这也是社会趋势影响，大公司招聘，一般也都是需要某一方面很有研究的专才。

在互联网的洪流下，以前的那种方式越来越跟不上节奏，所以前后端分离应运而生。

前后端分离后，前端的任务也变得重要起来，web前端开发慢慢趋于规范。

但是在 jQuery 称霸的时代里，并不能满足前端开发人员的需求。也慢慢暴露出了很多不好解决的问题：外部js引用太多，复用性低，开发周期太长，性能低，效率低等等，这些 jQuery 不好解决或者说解决不了的问题，也成为了前端开发的趋势。

使用框架解决了哪些问题

重复引用外部js

在以前使用jQuery开发时，当项目越来越复杂和庞大的时候，可能会用到各种各样的第三方插件，而且不只是一个页面使用，所以会出现每个页面都要引用一遍相同的js文件，冗余大的问题。

这样不仅会使页面代码变得杂乱，而且会影响页面的打开速度，万一以后需要变更一下js文件的路径，还要一个一个去修改，对后期的维护也是很大的负担。

使用框架开发时（例如Vue），一般都会搭配构建工具使用（例如webpack），整个项目运行时会有一个入口文件，当你有多个组件都会用到某个文件或插件时，仅仅在这个入口文件引入一次，就可以在你所有组件中使用这个插件的方法，可以说是一劳永逸。就算后期文件位置有所变动，也只是修改入口文件中的引用路径就可以了。

组件化

组件是前端框架里非常强大的功能之一，它可以扩展你的HTML，封装可以重用的代码块，比如你的轮播图、tab切换、页面头部、页面底部等等。

这种独立的组件具有了结构（html），表现（css）和行为（js）完整的功能，很大程度的节省了代码量，提高了代码的复用性。根据不同的需求定制你自己的组件，在需要的页面引用即可。在团队合作开发中，相对独立开发不同的组件，效率上也有很大的提升。

开发周期长

jQuery开发时，需要频繁的操作DOM，几乎任何动态效果都需要去选择DOM来进行相应的操作，这使开发变得麻烦起来，很多的时间都用到了操作DOM上，项目的开发周期自然被延长。

使用框架开发，框架中封装许多的频繁使用的功能，例如Angular中的指令，指令功能有数据绑定，表单验证，数据格式化等等。这时前端的重点只需要放在数据逻辑部分，而不需要花费很大的精力去操作DOM完成功能，从而加快项目进度。

性能

很多DOM操作会引起回流和重绘，对于jQuery来说，大量的操作DOM虽然方便，但是很浪费页面性能。

框架和jQuery虽然都会操作DOM，但是框架吧大量的DOM进行了处理和优化（例如Vue的虚拟DOM），通过数据驱动，就能渲染出DOM，大大提升了性能。

你有没有思考过你的项目为什么使用框架呢？

关注前端公众号：前端很忙