js模块化（三大模块化规范）

向右看齐 2021-07-25 19:34 514阅读 0赞

# js模块化 #

#### 模块化的理解 ####

1.  什么是模块？  
    模块是将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。  
    块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。
2.  一个模块的组成  
    一个模块是由数据和操作数据的行为来组成，数据对应内部的属性，操作数据的行为对应内部的函数
3.  模块化  
    编码时是按照模块一个个的编码的，整个项目就是一个模块化的项目
4.  模块化的进化过程  
    全局function模式：问题：污染全局明明空间，容易引起命名冲突或数据不安全  
    namespace模式：问题：数据不安全（外部可以直接修改模块内部的数据）  
    IIFE模式/增强（匿名闭包）：将数据和行为封装到一个函数内部，通过给window添加属性来向外暴露接口，引入依赖：通过函数形参来引入依赖模块，是立即执行函数的书写方式。

# 模块化规范 #

#### commonJs(同步) ####

1.  基本语法  
    定义暴露模块：exports
    
        exports.xxx = value
        module.exports = value
    
    引入模块：require
    
        var module = require('模块名/模块相对路径')

#### AMD(异步模块定义) ####

#### ES6 ####

ES6内置了模块化的实现  
基本语法：  
定义暴露模块：export  
1. 暴露一个对象：export default 对象  
2. 暴露多个对象：export var xxx = value1 export let yyy = value2  
引入使用模块：import  
1. default 模块：import xxx from “模块路径/模块名”  
2. 其他模块：import \{xxx,yyy\} from “模块路径/模块名” import \* as module1 from “模块路径/模块名”

问题：所有的浏览器还不能直接识别ES6模块化的语法  
解决办法：

1.  使用Babel将ES6转化为ES5（使用了CommonJS）
2.  使用Browserify，打包处理，浏览器可以运行