前言
随着Ajax技术的兴起,前后端分离的开发模式逐渐占领了几乎整个市场,现在的服务器带宽也足够完成大量数据交互,于是很多以前在服务器端的逻辑也可以移植到前端来处理了,从而减轻服务器的压力,当然,这样的话Javascript代码就会越来越复杂。而Javascript作为一门松散的弱类型语言,在一个大型项目面前如果没有合理的拆分与规划,将会变得很难维护,这个时候我们就需要把前端逻辑做一个模块化的处理。
所谓模块化就是把需要重复使用的功能封装成模块,一个页面有一个统筹全局的对象把所有模块引入进来,最终形成一个产品,做成一个完整的项目。
JS本身在ES6以前没有模块化的,ES6有模块化了,但是主流浏览器对于ES6模块化的支持度不足,所以一般不能直接使用,所以我们今天讨论第三方的模块化实现。
模块化的好处
就好比要生产一台挖掘机,是由各个厂商提供的配件组装出来的,而不是由一家公司从头到尾生产,这样的好处是各个零部件各司其职,如果有一个功能坏掉了只需要找到对应的零部件解决问题即可,从而避免将来维修的麻烦。
作为代码也是同样的道理,一个完整的项目可以由很多个模块组成,如果某部分功能需要修改或者升级只需要找到对应模块的代码进行维护即可,大大提高了代码的可读性以及节约了维护成本。
模块化规范
模块的使用一般分为导入和导出,定义一个模块需要导出出去在需要使用的地方导入。所谓模块化规范就是规定了模块的使用方式,不同的规范制定了不同的导入和导出的方式。常见的模块化规范有如下几种:
AMD
依赖前置:提前引入,文件开头把需要的模块一次性全部引入,后面直接使用
前期消耗比较大,后期执行效率很高
代表作是 require.js
CMD
按需加载:在代码执行过程当中需要一个模块了才去加载