JS模块化开发

1.什么是模块化开发？

模块化开发有点像分工合作，比方说一个手机，它是由一系列的功能模块组合在一起的，比如摄像头，屏幕，cpu，操作系统，而每个功能模块可能是由不同公司生产的，比如从A公司买的处理器，B公司做的摄像头，C公司加工的屏幕。

网页也是这样，当代码量越来越大，功能越来越复杂的时候，我们就很难一个代码中完成所有的工作，所以需要将不同的功能模块封装外包出去，或者直接使用别人写好的模块。

而像这种通过特定的方式实现所需模块的划分，管理和加载的机制就叫做模块化开发。

所以模块化开发的最大的好处就是协同和代码复用。如果说这两个好处对你而言没有太大的感受，那么下面这些问题可能就是你的亲身经历。1.大量的文件引入；2.代码写的多了，经常会有命名冲突；3.类似的功能写了不下800遍；4.经常搞乱文件依赖

2.如何使用模块化开发

1.全局函数

在最早的时候，我们将一些重复使用的代码封装成函数，所以一个函数就是一个模块。比如最简单的一个加法运算函数。

function add(a,b) {
  return a+b;
}

这是一种约定形式的模块，存在命名冲突，可维护性不高等问题。仅仅从代码角度而言，没有任何模块的概念。

2.对象

为了解决全局函数的这些问题，可以把函数封装成对象的属性，把这个对象当成一个模块。

var calculator = {
  add:function(a,b) {
    return a+b;
  }
}

从代码层面来说，已经有个模块的感觉。但是也有缺点，还是会污染全局（但因为一个模块只会暴露一个变量，所以是可以接受的），另一个缺点就是这样的写法会暴露所有模块成员，没有私有空间，内部状态可以被外部改写。

比如我写了一个管理员的模块，模块内部需要对密码进行加密，那我这个加密算法肯定不希望被别人知道。

3.自执行函数

js中没有块级作用域，它的作用域是基于函数的，所以我们可以把模块封装在一个自执行函数里面，如果需要暴露就直接return出去，没有return的均为私有方法。

var calculator = (function() {
    // 私有函数
    function parse(str) {
        return parseFloat(str);
    }

    function add(a,b) {
        return parse(a)+parse(b);
    }

    // 暴露函数
    return {
        add:add
    }
})

相比与之前的方法，自执行函数有了很大的进步，但是当我们想要维护这个模块的时候却不是那么方便。比如我想添加一个计算变量相乘的方法，就只能去修改原来的模块。

4.自执行函数进阶版

(function(calculator) {
    // 私有函数
    function parse(str) {
        return parseFloat(str);
    }

    calculator.add = function(a,b) {
        return parse(a)+parse(b);
    }
    // 重新挂载
    window.calculator = calculator;

})(window.calculator || {})

现在我们需要新增一个方法就很很简单，而且不用修改以前的模块。

(function(calculator) {
  //如果calculator存在就扩展，如果不存在就创建

})(window.calculator || {})

这种写法已经比较完善了，但是如果有全局变量，而模块内又想用怎么办？比如说jquery。当然直接使用也是可以的，但是一个模块最好是一个高内聚低耦合的一个状态。也就是说，模块内部高度关联，模块与外部函数尽量避免直接交互。

所以，我们还有一个终极版本来解决全局依赖，我们把全局变量也通过参数传递进去。

(function(calculator,$) {
    // 私有函数
    function parse(str) {
        return parseFloat(str);
    }

    calculator.add = function(a,b) {
        return parse(a)+parse(b);
    }
    // 重新挂载
    window.calculator = calculator;

})(window.calculator || {}, jQuery)

以上是传统的JS模块化的方法，但其实ES6已经提供了模块的方法。

---

简单介绍一下，ES6模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

function add(a,b) {
    return a + b;
}

export {
    add
}

import {add} from './calculator.js';

大家有兴趣可以看一下阮一峰的免费电子书，里面有详细的介绍（http://es6.ruanyifeng.com/#docs/module）

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单。如果代码支持ES6那么完全可以用ES6的模块语法就行，
但是如果代码不支持，那么我们可能就得寻求一些第三方软件的支持。