模块化编程

模块化的理解

• 什么是模块化？

    将一个复杂的程序依据一定的规则封装成几个块，
    块的内部数据是私有的, 只是向外部暴露一些接口，与外部其它模块通信。
    
    前端模块化开发中：一个js文件就是一个模块，在js文件模块中定义的数据是私有的， 
    可以向外部暴露数据和方法，其它js文件模块可以引入暴露的方法数据进行使用。
  

模块化的进化过程

• 全局function模式 : 将不同的功能封装成不同的全局函数

    编码: 将不同的功能封装成不同的全局函数
  
    问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系
  
    (一个a.js文件定义的m1函数，另一个b.js文件 定义同名m1函数，引用时后面会把前面的m1函数覆盖)
  

• namespace模式 : 简单对象封装

    作用: 减少了全局变量，解决命名冲突
  
    问题: 数据不安全(外部可以直接修改模块内部的数据)
  

• IIFE模式：匿名函数自调用(闭包)

• 引入多个

    - 请求过多
  首先我们要依赖多个模块，那样就会发送多个请求，导致请求过多
    - 依赖模糊
  我们不知道他们的具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
    - 难以维护
  以上两种原因就导致了很难维护，很可能出现牵一发而动全身的情况导致项目出现严重的问题。 
  模块化固然有多个好处，然而一个页面需要引入多个js文件，就会出现以上这些问题。而这些问题可以通过模块化规范来解决，下面介绍开发中最流行的commonjs, 
  AMD, ES6, CMD规范。
  

模块化规范

• CommonJS

    概述
    Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。
    在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
    在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。
    特点
    所有代码都运行在模块作用域，不会污染全局作用域。
    模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。
    要想让模块再次运行，必须清除缓存。
    模块加载的顺序，按照其在代码中出现的顺序。
  

• AMD规范

    浏览器端一般采用AMD规范
    
    require.js
    RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，
    RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
  

• CMD

    CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。
    CMD规范整合了CommonJS和AMD规范的特点。
    在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。
  

• ES6模块化

    ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
    CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
    ES6模块化语法
    
  

• 用到export default命令，为模块指定默认输出

总结