什么是模块化?模块化开发的好处
模块化开发简述
什么是模块化:指⽂件的组织、管理、使⽤的⽅式。即把⼀个⼤的⽂件拆分成⼏个⼩的⽂件,他们之间相互引⽤、依赖。
都说模块化开发为前端发展带来了巨⼤的进步,然⽽不熟悉的⼈看着也是两眼⼀懵,那其实这到底是什么?好处在哪?我来说说⾃⼰的见解吧。
1. 模块化和传统开发的区别
实话讲,其实在我看来,两者的开发是⼀样的,除了⽅式不⼀样,达到的效果并没两样。
nodejs到底是干嘛用的呢看着扯淡,但实际可以想⼀下,现流⾏的模块化开发主要有两种⽅式:
依赖加载。这种⽅式是最⼴泛的,像requirejs,sea.js等,除了编写规范不⼀样,实际都是通过相关require api把模块chunk⽂件拿回来,当加载完成之后再运⾏逻辑代码。
依赖打包。经典代表就是webpack,其实就是写代码的时候分开模块,但打包的时候按依赖关系到各个
模块,最后打包到同⼀个⽂件上,并给每个chunk标识id,运⾏逻辑代码时将模块引⽤指向该id,从⽽实现模块化。
⽽传统的开发⽅式是在页⾯上通过脚本标签引⼊,等所有脚本资源加载完成后再运⾏逻辑代码。这样⼀对⽐,是不是发现效果其实是⼀样的,我把不同脚本分开写,也是可以做到类似模块化的效果?
那么重点来了,模块化的优势在哪?
别急着回答,先思考⼀下,然后带着你的想法继续看下去。
先回想⼀下,传统开发的痛点在哪。
⾸先,如上所述,传统的开发⽅式需要等待所有脚本资源加载完成。这个问题最⼤的弊端就是页⾯要等待,因为资源加载是同步的。你的页⾯会出现短暂的空⽩期,引⼊的脚本越多,时间越长,如果某⼀脚本加载失败,也可能直接挂掉。
模块化的代码则可以很好的处理这个问题。除了模块化⽀持的脚本必须加载进来以外,其他脚本都可以异步请求,不需要页⾯等待,可以加速渲染出页⾯。requirejs,sea.js等也会做好加载重试和模块缓存的处理,确保所有模块运⾏良好。
所有资源加载的时间不会因为模块化⽽加速,但是模块化能加速渲染,这是优势1。
当然webpack是特例,它和nodejs⼀样⽤ commonjs 规范,为了达到⽬的,全部脚本打包到⼀起再运⾏,看着和上⾯观点相悖,不过现在带宽⾜够,相对⽽⾔还是⾜够快的,也能减少多脚本加载出错的风险。
接着上⾯的观点讲,抛开带宽速度来讲,既然⽹速够快,那模块化还有什么?不妨回想⼀下,传统开发时最烦的是什么?⽆⾮3点
命名空间。早期为了避免命名冲突,⼤众做法是⽤⼀个变量作为命名空间做隔离,长期开发过程中没⼈能记住这个变量是否冲突,它的命名规范是什么,治标不治本。
⽽模块化的出现消除了这点。⼀个模块内的命名随⾃⼰起,和外界不会冲突,对外的永远是你exports出来的内容。如果模块内出现命名冲突,这说明了你的命名⽔平太低…..
好吧,是模块颗粒不够⼩,还可以继续分割出模块~
代码重⽤。其实这点和传统开发并⽆两样,都是把可复⽤代码抽取出function(再通⽤点会抽象出类,也就是构造函数),独⽴⽂件。但模块化的好处同样可以规避命名空间的问题,不必设置变量污染到全局。⼀般模块化都有缓存机制,在⼆次调⽤时⽆需再解析,直接获取到缓存模块内容。
按传统开发来处理,忽略以上问题,但也耐不住⽂件太多,引⼊和管理⿇烦。除了amd规范需要依赖前
置,我们还可以⽤cmd规范来写模块依赖,想⽤什么require什么,不⽤再⼀个个引⼊js,看着也舒服。⽽且现在的模块化⼯具基本都实现了多规范混搭,想怎么写就怎么写,只要注意组内规范就⾏。
此外就是管理问题。
⼩公司或个⼈开发,模块化能让⾃⼰思路更为清晰,降低代码耦合,优秀的模块能带来代码质量质的飞跃,标准的模块应该是 “分⼯明细,职责单⼀,不牵扯需求逻辑” ,它就应该是个万能的螺丝,不需要可以修改,哪⾥需要⽤哪⾥。
⽽中型企业和⼤团队则很经常会遇到团队协作开发,除了会⽤svn/git等⼯具管理,各种需求有不同的⼈负责处理。模块化对团队开发会起到协同作⽤,公共模块除了避免重复造轮⼦的痛苦外,也避免了逻辑混淆。