javascript模块化

目的：知道amd，cmd，commonjs，ES6分别是什么。

模块化

模块化是什么？

含义：将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起的内部数据/实现是私有的，只是想外部暴露一些接口（方法）与外部的模块通信

进化史

• 简单封装：Namespace 模式

• 匿名函数：IIFE 模式（立即执行函数）

• 模块模式：引入依赖

  • 现代模块化的基石

为什么要模块化？

• web 的发展飞速，不仅仅局限于静态页面，而向着应用发展，功能越来越丰富
• 代码复杂度越来越高
• 对代码进行解耦的需要
• 减少文件大小，按需加载，节约 Http 请求时间

模块化的好处

• 模块里面的属性都是私有的，避免命名冲突（减少命名空间污染）
• 更好的分离，按需加载
• 更高复用性
• 高可维护性

实现方式

页面引入<script>加载资源

进而引发的问题

• 请求过多
• 依赖模糊
• 难以维护

模块化规范

CommonJS

规范

说明

• 每个文件都可当做一个模块
• 在服务器：模块的加载是运行时同步加载的（等待阻塞）
• 在浏览器：模块需要提前编译打包处理（等待阻塞，屏幕发白）
• javascript.ruanyifeng.com/nodejs/modu…

基本语法

• 暴露模块

  • module.exports = value
  • exports.xxx = value
  • 问题：暴露的模块到底是什么？
    • 上面都是暴露的都是exports对象 ，把exports当成一个对象，只是一个改变的是指针一个是给exports添加属性
    • exports是commonjs中专门暴露数据的一个对象

• 引入模块

  • var xxx = require(xxx)

    • 第三方模块：xxx 为模块名
    • 自定义模块：xxx 为模块文件路径

。。。未完待续