持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

随着前端的发展，从最初的HTML、CSS、JavaScript实现一些简单的网页效果即可，到现在各种MVVC框架开发web应用，RN、Flutter、uniapp跨端框架开发App、electron桌面应用、微信小程序等等，前端已经越来越复杂,所能做的事情范围也越来越广，不再仅限与web应用。

模块化也就是因为前端的业务越来越复杂而产生的，目的就是让我们更好的维护及更高的复用业务逻辑。

什么是模块化

生活中的例子

手机是我们生活中不可或缺的工具，以手机为例。处理器、存储器、屏幕、电池这些都是组成手机的小模块，这也是模块化的思想，将一个复杂的程序依据一定的规则(规范)拆分成几个块(文件), 并进行组合在一起。

模块化的进化史

最早我们是这样写代码的：

function foo(){
    ...
}
function bar(){
    ...
}

这样全局会被污染，当业务一复杂起来，很容易就会命名冲突。

到后来的IIFE模式：

var Module = (function (){
    var _private ="safe now";
    var foo = function (){
        console. log(private);
     }
    return {
        foo: foo
    }undefined
})()

Module.foo(); //safe now
Module. _private; // undefined

在到后面的引入了依赖：

var Module = (function($)){
    var _$body = $("body");
    var foo = function(){
         console.log(_$body);
     }
     return {
         foo: foo
     }
})(JQuery)

Module.foo();

这就是模块模式，也是现代模块实现的基石。

模块化的好处

1. 当我们以模块化开发时，可以减少因多人开发而带来的命名冲突(减少命名空间污染)。
2. 更好的分离，按需加载。减少页面的script请求，同时也有助于我们理清各个模块之间的依赖关系。
3. 更高的复用性和高维护性。当业务中一个功能被重复使用时，我们就可以将其单独提取出来，作为一个小模块，在需要使用的地方引入即可，减少重复的逻辑代码。

引入多个<script>后出现出现问题

1.请求过多

2.依赖模糊。我们不知道具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。

3.难以维护。以上两种原因就导致了很难维护，很可能出现牵一发而动全身的情况导致项目出现严重的问题。 模块化固然有多个好处，然而一个页面需要引入多个js文件，就会出现以上这些问题。而这些问题可以通过模块化规范来解决，下篇文章则会介绍开发中最流行的commonjs, AMD, ES6, CMD规范。