浅谈前端组件化协同开发

浅谈前端组件化协同开发

#想象中的组件化开发与现实中的组件化开发

在很久以前，那个时候人们做网页还离不开Dreamweaver，先拉出一个table，然后点住一个地方，再插入一个”组件“，重复这个过程，一个网页很快就可以被做出来；也有人用一张很大的图片充满了浏览器，然后用area标签添，在需要点击跳转的地方划出一块点击区域，现在淘宝装修还有不少人在用这种方法做页面。

那个时代做网页的是两拨人，”美工“和”程序员“，这里称呼”美工“并不是为了贬低这个职业，而是当时大家还没有意识到这个职业的重要性，后来慢慢的也不知怎么才改口成了”设计师“；用Dreamweaver生成的table标签而做成的网页，层级非常的深，修改起来的难度非常大，用我师傅当时的话来说，”去改table做的网页，还不如重做一个来的快“。程序员们意识到这一点，并且开始使用div+css的方式“写网页”，有人发现用这种方式写的网页不仅利于后期维护修改，居然还更容易被搜索引擎收录，所以网页制作的工作也变成了程序员的一部分。

从程序员开始担任了网页制作的工作之后，先是套用了MVC的概念，既是模型、视图和控制器，在web开发中的具体表现就是，用户通过视图（View）产生交互数据发送到模块（Model）,模块对数据经过处理后发送到控制器（Controller），由控制器对数据库进行数据访问，这是一套应用非常广泛的架构模式，也非常的实用。

视图层的工作因为社会整体审美水平的提高，相对的对开发人员的技能要求也越来越高，后来由于个人的选择，有些人偏向于视图层的开发，有些人偏向于数据处理的开发，web开发分家为前后端；（大神Ryan Lienhart Dahl开发出NodeJS前端去抢后端的活，这又是后话了）。

有人发觉为啥前端写页面要做非常多重复的工作，一张设计稿过来，先画好块，往里写具体标签，一行一行的写样式，有重复的部分复制粘贴一下，整个页面中重复的部分非常多，一点都不“优雅”；尽管css一开始就设计了类这个概念，优秀的程序员可以最大程度的解耦，但是html依旧避免不了复制粘贴，而且跨页面、跨项目、跨开发人员等等不同的“环境”下，复制粘贴依旧是最通常的做法。

于是，组件的概念被人提起，从后端开发被引入到前端的开发工作中。

试想一下，你只要调用一个函数，页面中就会有一个完全可用的组件，那开发起来得有多便捷？省下的时间可以多跟前台妹子聊聊天（逃

组员之间只需要创建并维护好组件库，工作的效率将大幅度提高，比老罗的TNT提高不止1400%工作效率，一时间网上关于组件化的文章像雪花飘撒一样繁多，人人都在谈论前端组件化开发，

#组件化开发更多是后端的概念，在ui为主的前端水土不服。

然而事实真的是如此吗？

打脸来得太快，计算机运作的基本原理是什么？

输入——计算——输出

对数据的处理非常好组件化，只要对输入的数据进行规范化，通常可以得到一个理想中的结果；但是UI交互上并不是如此，一个幸苦封装好的组件再次使用时，通常都要经过修改，而且大多数人对于组件化的目的从出发点就错了。前端的具体工作内容是由设计师和产品经理决定的，你开发中“封装”好的组件，因为设计图和实际业务的冲突，通常很难适用，而如果需要修改组件，那么你只能新复制一份，或者在组件内部做出判断区分应用场景，这就让组件化变得十分鸡肋。

单组件内部的代码编写通常是一个人完成，程序员之间的编码风格通常大相径庭，这也使得新入职的程序员比起维护老组件，更愿意开发自己的新组建。（如果你读过一些令人头疼的代码，我相信你会跟我一样深有体会）

曾经有一个哥们，用React做了公司的wap版本，当时并没有学会如何用redux做数据的管理，所以一切子级向父级传数据都用回调的方式，这个项目上线后他自己本人也不愿意再去碰这些代码了；工作中一些人通常会有一些不太好的编码习惯，所以你可以看到，开发资源十分紧缺的小公司小团队，却要每年都做一全新的版本，组件化并不能帮你避免这一点。

#组件的封装真的做得到吗？

在学习面向对象的时候，我们会得到三个新名词，封装、继承和多态；简单来说，封装就是私有变量属性和私有方法，不论是这个类实例化的对象还是继承了这个类的子类，都无法直接访问。

放到前端中来，你会发现在样式层面，你无法做到真正的封装；子类（下层）的样式有机会影响到父类（上层），这个是前端天生的缺陷。!importance和内联样式说明了一开始就是越小越重要。

#向现实妥协的前端协同开发

本文并不是想要单纯的喷组件化，三大框架Mvvm对组件化开发的解决方案也非常的棒，我只是想让大家停下来几分钟，好好想一想，我们应该如何去科学的合理的组件化；

下面我分享一点自己的思考：

一键可替换的只能是颜色，通过Sass定义颜色的变量即可实现，全局使用的颜色均通过变量管理。

最可以复用的组件通常是封装最小的组件，例如按钮 输入框 选择框。

统筹协调好同事之间的开发流程也是前端开发人员的工作责任，前端可以说是开发部门的交际花了，市场运营产品设计后端运维都要交接配合，所以明确好工作流程就显得尤为重要，如果能与设计和产品敲定一套相对完整的设计规范，那将会使得前端组件化开发的工作顺利的多。

在工作闲暇至于要整理好组件库，寻找有趣的可能会用到的大型组件，例如转盘和各种特效。

By 吴挂面