理解模块化

在理解模块化的前提，我们要先弄明白什么是模块？

所谓的模块，在变成中直白的说，就是我们要将一个复杂的程序依据一定的规则或者说规范封装成几个快(文件)，并将它们进行组合在一起

快的内部数据/实现     是私有的，我们只是向外暴露一些接口，让其与外部其他的模块进行通信。

那么一个模块的组成由那些部分呢？

首先是数据，我们在组成模块的时候必定要有数据为依据的，数据就是模块的内部属性，我们姑且可以这么认为，而我们是通过什么来操作数据的呢？我们操作数据，也就是它的内部属性时通过它里面的函数来操作的。

在模块化的定义中，我们必须要明白的是，我们将项目模块化之后，整个项目也就是一个模块化的项目，编码的时候就要按照模块化一个一个的进行编码。

那么为什么要使用模块化？也就是说使用模块化的好处有哪些呢？

首先，模块化封装性好，封装的意义我们也知道，其实还有个概念就是，数据的不变性，我们可以让你操作数据，但是不允许随意改变我们原来数据的内容。个人姑且这么认为吧。

第二，复用性好，我们可以在多个场合和情况下继续使用，这样我们就不会写太多一样的代码，造成浪费时间浪费空间。代码不冗余。

第三，扩展性好，也是和上面一样的道理了。

到这里，明白了模块的具体意义之后，那么我们web前端中的模块规范有哪些呢？有好几种，这里我们只需要明白commonJS、ES6这两个。AMD、CMD暂时就不管咯。

commonJS中，主要运用在node.js服务器，浏览器端的打包工具时Browserify。它的暴露模块的方式是exports。export.xxx = value。module.exports = value。引入模块则是利用require ---- > var= module = require('模块名/模块相对路径')

上面的都是基本语法，那么我们其实应该搞清楚，commonjs在暴露和引入模块的时候都发生在什么时候？

在我们node运行的时候，会动态同步的引入我们定义好的需要的模块，这很中要，因为node运行之后，在浏览器端实现的时候会对模块进行编译/转译/打包的处理。这时候是Browseify工作的事情了。在B工作的时候，已经将依赖的模块包含进来，运行的时候生成打包的js文件，我们在运行的时候不需要在从远程引入相关依赖的模块了。

ES6规范中，ES6内置了模块化的实现，基本语法定义的暴露是export，相对于commonjs来说表面上就是少了个S而已。不同的是引入采用的是import。

定义暴露模块分为：默认暴露，一次暴露多个

export default + 对象 ---->为默认暴露

export var xxx  = value1、export let yyy = value2 -----> var xxx = value1 、let yyy = value2  ---->export {xxx,yyy}

利用import 引入 默认模块import xxx from '模块路径/模块名'

利用import引入其他模块import {xxx,yyy} from '模块路径/模块名'，这边{}内采用的是ES6中的解构赋值。这里不详细说了。

在使用ES6的时候在浏览器端运行也需要利用Broeserify来进行打包处理。另外还有一点需要注意的是。在使用ES6的时候需要将其转换为ES5的语法才能运行。因为目前还有些浏览器不能ES6的语法。谷歌浏览器可以支持。先说到这里好了。