模块化

涉及的面试题

什么是模块化?为什么要使用模块化?都有哪几种方式可以实现模块化，各有什么特点?

什么是模块化?

• 模块化就是为了减少系统的耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计
• 让开发者便于维护，同时让逻辑相同的部分可复用
• 模块化开发:针对JS，CSS以功能或业务为单元组织代码。JS方面解决独立作用域，依赖管理,api暴露，按需加载与执行，安全合并等问题，CSS方面解决依赖管理，组件内部样式管理

模块化的历程

• namespace
• sass,less
• AMD&CMD
• html模板
• grunt,gulp,webpack
• FIS YUI KISSY

为什么要使用模块化?

• 解决命名冲突
• 提供复用性
• 提高代码可维护性

立即执行函数和命名空间

在早期，使用立即执行函数实现模块化是常见的方式，还有命名空间,通过函数作用域解决了命名冲突，污染全局作用域的问题

(function(globalVariable){
    globalVariable.tet=function(){
        //...声明各种变量，函数不会污染全局作用域
    }
})(globalVariable)

// 使用namespace之前
var name={};
var name2={};

// 使用namespace之后
var nameSpace={};
nameSpace.branchOne={
    name:{}
};
nameSpace.branchTwo={
    name:{}
};

AMD和CMD

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do()
  b.do()
})
// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a')
  a.doSomething()
})

CommonJS

// a.js
module.exports = {
    a: 1
}
// or 
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

ES Module

ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别

CommonJS 支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案

CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响

CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化

ES Module 会编译成 require/exports 来执行的

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

export就是输出的意思
import就是输入操作(引入)