开发者社区> lovelydong> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端组件化的发展

简介: 前端组件化的发展
+关注继续查看
福利推荐:阿里云、腾讯云、华为云等大品牌云产品全线2折优惠活动来袭,4核8G云服务器899元/3年,新老用户共享优惠,点击这里立即抢购>>>

近年来,随着前端技术不断更新迭代!渐渐发现前端越来越简单了,但也越来越复杂了——简单到你可以用一个Github的starter搭建一个框架,集成所有的全家桶,涵盖单元测试和功能测试,包括部署以及发布,甚至你开发时使用的UI库都让你写不了几行css;可又复杂到如此多的框架和库层出不穷,你还没来得及学会官网的文档,就已经有新的替代品了,那就更别提静下心去学习其中的源码或推敲原理了,所以学习下组件化思想而不是单单学习框架了。

?为什么要说写组件化思想呢?因为我觉得它是伴随着前端发展的一个不可或缺的设计思想,目前几大流行框架也都非常好的实现了组件化,比如React,Vue。React之前用得算是比较多了,所以本篇我决定以Vue作为基础,去谈一谈前端模块化,组件化,可维护化的设计细想。

1.什么是前端组件化

?组件化并不是前端所特有的,一些其他的语言或者桌面程序等,都具有组件化的先例。确切的说,只要有UI层的展示,就必定有可以组件化的地方。简单来说,组件就是将一段UI样式和其对应的功能作为独立的整体去看待,无论这个整体放在哪里去使用,它都具有一样的功能和样式,从而实现复用,这种整体化的细想就是组件化。不难看出,组件化设计就是为了增加复用性,灵活性,提高系统设计,从而提高开发效率。

2.前端组件化的演变

?在前端JQ时代,大部分的前端开发都是:操作DOM,发起ajax请求,刷新数据,局部更新页面。这样的动作反反复复,甚至在同一个项目里同样的流程也许还要重复,其实jQuery本身也有有自己模块化的设计,有时我们也会用到类似jQuery UI等不错的库来减少工作量,但请注意,这里我只认为它是模块化的。

?频繁操作DOM,过程式的开发方式的确不怎么样。这时开始流行MV*框架思想,比如MVC,前端开始学习后端的思想,讲业务逻辑,UI,功能,可以按照不同的文件去划分,结构清晰,设计明了,开发起来也不错。在这个基础上,又有了更加不错的MVVM框架,它的出现,更加简化了前端的操作,并且将前端的UI赋予了真实意义:你所看到的任何UI,应该都对应其相应的ViewModel,即你看到的view就是真实的数据,并且实现了双向绑定,只要UI改变,UI所对应的数据也改变,反之亦然。这的确很方便,但大部分的MVVM框架,并没有实现组件化,或者说没有很好的实现组件化,因为MVVM最大的问题就是:

1.执行效率,只要数据改变,它下面所有监测数据上绑定的UI一般都会去更新,效率很低,如果你操作频繁,很可能调了几十万遍(有可能层次太深或者监测了太多的数据变化)。

2.由于MVVM一般需要严格的ViewModel的作用域,因此大部分情况不支持多次绑定,或者只允许绑定一个根节点做为顶层DOM渲染,这就给组件化带来了困难(不能独立的去绑定部分UI)。

?而后,在此基础上,一些新的前端框架“取其精华,去其糟粕”,开始大力推广前端组件化的开发方式,从这一点来说,React和Vue是类似的。

?但从框架本身来说,React和Vue是完全不同的,前者是单向数据流管理设计的先驱,如果非让我做一个不恰当的比较的话,我觉得React+Redux是将MVC做到了极致(action->request, reducer->controller);而后者则是后起之秀,既吸取了React的数据流管理方式(Vue本身也可以用类似React的方式去开发,但难度比较大而已,不是很Vue)的设计理念,也实现了MVVM的双向绑定和数据监控(这应该是Vue的核心了),所以Vue是比较灵活的,可以按需扩展,它才敢称自己是渐进式框架。至此,前端进入了组件化开发时代!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
了解前端工程化之组件化——Vue组件
了解前端工程化之组件化——Vue组件
8 0
前端-vue基础53-组件化开发思想
前端-vue基础53-组件化开发思想
27 0
前端周刊第十期
前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。
68 0
前端模块化之基础组件
前端的基础组件,后续的所有组件都是继承该基础组件实现的。
82 0
前端周刊第六期
前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。
80 0
前端编年史
笔者学习一门知识有一个习惯,就是会先去了解这门知识的一个大致历史框架,而后再学习具体的知识内容。这样做有以下两个目的: 1.可以增添兴趣,对于越枯燥的知识越是有效。 2.可以知道这门知识的来龙去脉,可以知道依托于这门知识,自己将会去向何方。
2091 0
前端容灾
什么是容灾 容灾的概念始于后端,指当遇到某个服务器或某个机房发生自然灾害、断网断电等情况下的应急办法,可以保证服务依然可用。 新入行的小伙伴可能有疑问,都断网断电了怎么可能保证网站还可以正常访问那?其实这是对大型网站,理解不深导致的,你认为的网站是这样的 像这种单机的服务自然没法做什么容灾了,这一台机器挂了服务也就挂了。
2198 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
2021前端热门技术解读
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js在前端服务化上的实践与探索
立即下载


http://www.vxiaotou.com