浅谈为什么模块化开发备受欢迎?

要解答这个问题 , 首先得弄明白 , 什么是模块化?
请问你是否有过这样的痛苦 , 一个js因为业务需求可能会在n个html文件中引用,如下图所示.
最头疼的是因为业务需求同一个类似的方法可能在很多地方出现.再加上各种callback,调试起来简直就是地狱 。
为什么要模块化开发? 假设一个选择商品的列表会在围绕商品的业务中都是用到,那么没有模块化开发的情况下你要怎么做?引入js和相应的dom节点再处理好相应的事件,想想都为当年付出的时间感觉惋惜.
但上面的做法完全是浏览器识别的做法,并且也仅仅是这样才可以正确执行
为了解决以上问题,各大厂商和行业都对前端进行工程化作贡献,提出mvvm概念,起初实现此概念的是IT行业老大谷歌,代表作Angular,当前第一个版本并不尽人意,从2.0之后各种service和controller,配合typeScript使用起来得心应手,有种在写后台代码的感觉一样 。
后起之秀 随之出现react , 以及reactNative , 不仅仅对mvvm有着良好的实现 , 并且还要统一大前端[App] 。
高质量国产,尤大神在使用以上框架之后取其优点同样实现了mvvm的概念落地,就这样Vue诞生了,其实业界有传闻Vue就是尤玉溪曾经的英文名 。
凭借着轻量级特点和拓展性强的特点Vue仅仅在三年之内2015-2018几乎成为前端工程师的标杆,出去和朋友吹牛,身为一个前端工程师不会Vue都是笑柄.不过他的轻量级开发和可拓展性确实是业界公认的 。
模块化开发的优点想必大家都玩过积木[小儿科了] , 我们在系统开发之前先将系统以模块划分 , 再划分业务和具体的功能实现 , 当然层次根据业务复杂程度而定 , 最优的是适度的设计 , 如果死板的遵循设计 , 那么也就失去了设计本身的意义了 。
举个例子[图片脑补]用户模块
用户列表用户添加/编辑/详情[处理好状态一个组件即可实现]用户列表选择,对入参和选择后emit的数据做好处理即可,控件调用者自行接收对应数据做业务处理.现在其他组件需要用户id作为参数
那么仅仅需要将用户列表做一次封装,对外输出选择的用户数据即可,是不是很简单[我相信你在项目中用了不少]
如果我们把项目根据模块和业务划分的很清楚,那么开发起来完全就跟玩游戏一样过瘾[至少我是这样].
怎么定义模块和组件?以前很多童鞋问我,直接封装组件不是更改,非得增加一个模块的概念,多此一举.但我问他,我们需要组装一个机器人,需要很多零件,但我们也是一步一步来的,先组装四肢再组装身体等,现在我问你给我拿两个胳膊过来,我要给66号机器人换修,而不是让你拿一个零件 。
零件=组件[仅仅实现最底层的功能与业务无关]胳膊=模块[将组件合并实现一个基本的功能]模块和组件的相同点都是划分功能的单位,但有包含的关系,组件可以拼成多个模块,模块一般也由多个组件构成
模块和组件的不同点?组件,以最小单位构成,可重用度高,就像螺丝钉,哪里用哪里钉组件偏向于设计,一般带有独立的功能,就像桌子由木头和螺丝构成组件封装和业务界限划分以上面的用户模块为例,提供用户选择列表,勾选后确认给出选择的数据即可,至于这个数据哪个模块用组件不关心这些.
业务模块由多个组件组成
路由定义路由定义是最简单也是最重要的一个环节语义化定义有助于team快速了解模块层析化定义有助于开发者了解基本功能比如http://localhost/user/edit如果直接写成http://localhost/useredit也无伤大雅,但是对于同级子模块再命名时就不够分明了.
全局对象维护 【浅谈为什么模块化开发备受欢迎?】今天就讲到这里,下期聊下webpack[手动比心]


    推荐阅读