结合之前所说的内容,我们已经能够较为便捷地自己开发网页了,但是如果你真的从头开始写一个较为复杂的网站,就会发现这是一件十分繁琐复杂的事情。比如说以下几点是曾经困扰过我的问题:
1、代码复用问题:比如你自己设计的网站最上方有一个菜单或导航栏,需要不论网站怎么跳转页面,它都存在,最原始的方法肯定是在每个html文件中都加上这一段HTML和CSS代码,那假如你想修改这个菜单中的几个字,就得跑到所有文件中都修改一遍,这明显就不是一个好的代码习惯。(当然原生HTML中也有元素封装的内容就是专门用来解决这种问题,不过不是本章重点就不讲了)
2、频繁的DOM操作和性能问题:原生的网页开发对DOM的操作简直是太繁琐了,很多网页上的数据是不能前端写死的,都需要向后台请求数据,再渲染到前端,其中不仅有大量的DOM操作,十分繁琐复杂,还使网页变得很“卡”。
3、路由管理问题:原生的网页开发中没有路由管理的概念,只是简单地将一个html文件对应为一个url地址,文件之间的关联性也很差,所谓的路由跳转,只是从一个html文件到另一个html文件,很多重复部分需要重新加载,效率很低。
还有许多许多直接使用原生网页开发的问题,虽然这些问题都是有解决方法的,但是一一解决起来真的很繁琐。所以今天很有必要重点讲一下三大前端框架:Angular、React、Vue。
首先,前端框架当然不止这三种,之前说的bootstrap也勉强能称为框架(还是有人比较喜欢叫库),但是这三种是最最主流,也最最成熟的,被各大网站所应用,也广为前端开发者所喜爱。
先简单地讲一下他们的历史(废话)吧。首先是最早的Angular,是由大公司Google在2010年发布的,一开始由于它最早地颠覆了原来的网页设计理念,再加上有大公司保障,很多人都接受了它的开发理念,并使用它开发网站。但是由于推出得太着急了,BUG十分的多,再加上维护更新的不及时,后来逐渐被React和Vue拍死在沙滩上了,现在用的人真的不那么多了。
![](https://mu-mu.cn/blog/wp-content/uploads/2020/07/image-15.png)
之后是FaceBook于2013年推出的React,一推出就是十分完美的产品,有着完美的设计理念和后期维护,再加上Facebook使用它做出了很多产品,狠狠地以身作则打了一波广告,很快就反超了当时风靡的Angular。
![](https://mu-mu.cn/blog/wp-content/uploads/2020/07/image-16.png)
最后出来的是传奇的Vue。之前的两个框架都是大公司开发的,而Vue就完全不同,是前Google员工Evan You(尤雨溪)和团队以一己之力开发并在2014年发布,虽然单枪匹马,但是Vue却一点都不输前两个框架,不论是在设计的理念上还是在维护上,都毫不逊色。再加上尤雨溪中国人的身份和详细的中文文档,Vue在国内瞬间大热,并广泛地被前端开发者使用,连前两年大火的微信小程序,也是一种以Vue为基础再开发修改的小程序框架。
![](https://mu-mu.cn/blog/wp-content/uploads/2020/07/image-17.png)
虽然这三大框架开始的时候都各有特色,也各有不足,但是在不断的发展过程中,慢慢地吸取对方的优势之后,现如今已经十分地相似了,在掌握了一个框架之后,再去学习别的也都很容易了。可惜我接触这些太晚了,没能亲眼目睹历史,这些也都是我道听途说来的,接下来就简单谈一下我认识的前端框架。
首先是这三个前端框架发展至今都有的一些核心的概念:
1、将元素模块化、组件化,将一些复用性很高的元素封装为一个组件,然后可以很轻松地在别的地方使用,大大地提高了代码的复用率。
2、移除了繁琐的DOM操作,改为对数据、状态等进行操作,当数据和状态发生改变时,相应的DOM元素会自动更新,而不再需要对DOM进行操作了,不仅时开发变得简单,也极大地提升了效率。
3、设计了生命周期函数,为开发者提供了许多便捷。
4、都有很多的扩展库,比如有专门负责路由管理的库,还有负责数据管理的库,还有前端UI库等等,几乎是应有尽有,只需要下载引入,就能很方便地进行使用,极大地增加了开发效率,方便开发者。
5、通过懒加载(按需加载)、虚拟DOM、改变渲染手段、双向数据绑定等等许多许多手段,极大地提升了网页的性能。
具体还有很多优点,就不再一一赘述了,个人感觉使用框架还是能极大地方便开发的,而且开发出来的网站性能也十分不错,看到这里,应该有很多人都会产生疑惑,我想学习框架,但是这三个选哪个好呢?
个人感觉吧,Vue的设计理念简单,上手是最快的,也很适合小项目的开发,再加上开发者是国人,中文文档十分全面,使用的中国人也非常多,对于新手入门而言是非常好的。还有就是以Vue为基础再开发的微信小程序框架,也使得学习Vue的人更多了。
然后是React,相较于Vue有更好的性能,设计理念上也更适合大项目的开发和维护,在国外的应用更广泛,比如Facebook,Uber,Netflix,Twitter,Paypal等等,都是国外的大产品。还有React-Native,可以用于APP端的开发,使得学习React的人更多了。
Angular嘛,近些年来表现得确实不如React和Vue,我也没有深入学习过,就不发表意见了。
关于Vue和React更详细的内容,以后我也打算进行梳理总结,这次的内容差不多就说到这里了,下次有机会再见吧!
另外,如果你有兴趣,或者是有问题想要与我探讨,欢迎来访问我的博客:https:mu-mu.cn/blog