现在前端手艺飞速发展,基本是基于三大框架开辟的SPA(单页面运用)。本文主如果总结一下组件化开辟头脑重要点。
- 组件化能够协助处置惩罚前端构造的复用性问题,全部页面能够由差别的组件组合、嵌套组成。
- 一个组件有本身的实际形状和行动,组件的显现形状和行动能够由(React中数据状况(state)和设置参数(props)Vue中是data和props)配合决议。
- 数据状况和设置参数的转变都邑影响到组件的显现形状。当数据变化的时刻,组件的显现须要更新。所以组件化形式能供应一种高效的自动化地帮我们更新页面。下降了代码的复杂度,带来更好的可保护性。
那末我们在基于组件开辟的时刻就重要斟酌剖析需求。
拿到一个需求今后,我们要做的第一件事变就是明白需求、剖析需求、分别这个需求由哪些组件组成。
组件的分别没有迥殊明白的规范。分别组件的目标是为了代码可复用性、可保护性。只需某个部份有能够复用到别的处所,你都能够把它抽离出来当做一个组件;或许把某一部份抽离出来对代码的构造和管剖析带来协助,你也能够绝不犹豫地把它抽离出来。
组件化开辟的长处。
说到底,前端组件化开辟以后。能够很大水平的下降体系各个功用的耦合性,而且提高了功用内部的聚合性。这对前端工程化以及下降代码的保护难度,是有很大协助的。
耦合性的下降,提高了体系的伸展性,下降了开辟的复杂度,提拔开辟效力,下降开辟本钱。
组件封装的好,加班也少了,bug 也少了,就有更多时候喝喝咖啡、撩撩小姐姐、打打吃鸡了。:) 美滋滋。
设想组件要遵照一个准绳:一个组件只专注做一件事,且把这件事做好。
组件化开辟的难点。
模块(组件)之间须要同享数据”,和“数据能够被恣意修正致使不可预感的效果”之间的抵牾。这个是前端组件开辟须要处置惩罚的难点。
基于这个点现在我以为处置惩罚最好的东西就是Redux状况管理东西。有兴致的同砚能够移步Redux中文文档。http://cn.redux.js.org/