JS 模块化学习笔记（未完整）

JS 模块化学习笔记

一、模块化理解

0. 模块理解

简单理解，具有特定功能的 js 文件，就是 js 模块

• 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
• 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

1. 模块化理解

1.1 什么是模块化?(what)

编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目

模块化进化历史(在文尾，有兴趣可查看)

1.2 模块化好处?(why)

• 避免命名冲突（减少命名空间污染）
• 减少耦合度
• 复用性更高
• 可维护性更高

1.3 页面加载多个 js 的问题

页面:

<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript" src="module2.js"></script>
<script type="text/javascript" src="module3.js"></script>
<script type="text/javascript" src="module4.js"></script>

说明

• 一个页面需要引入多个 js 文件
• 问题:
  • 请求过多
  • 依赖模糊
  • 难以维护
• 这些问题可以通过现代模块化编码和项目构建来解决

二、模块化规范

4种模块化规范分别是 CommonJS、AMD、CMD、ES6

2.1 CommonJS

2.2 AMD

2.3 CMD(了解)

2.4 ES6

模块化进化历史

1. 全局function模式

   /**
    * 全局函数模式: 将不同的功能封装成不同的全局函数
    * 问题: Global被污染了, 很容易引起命名冲突
    */
   let msg = 'module1'
   function foo () {
     console.log('foo()', msg)
   }
   
   function bar () {
     console.log('bar()', msg)
   }
   

2. namespace模式

   /**
    * namespace模式: 简单对象封装
    * 作用: 减少了全局变量
    * 问题: 不安全(数据不是私有的, 外部可以直接修改)
    */
   let obj = {
     msg: 'module2',
     foo: function () {
       console.log('foo()', this.msg)
     }
   }
   

3. IIFE模式

   /**
    * IIFE模式: 匿名函数自调用(闭包)
    * IIFE : immediately-invoked function expression(立即调用函数表达式)
    * 作用: 数据是私有的, 外部只能通过暴露的方法操作
    * 问题: 如果当前这个模块依赖另一个模块怎么办?
    */
   (function (window) {
     let msg = 'module3'
     function foo () {
       console.log('foo()', msg)
     }
     window.module3 = {
       // foo
       foo: foo
     }
   })(window)
   

4. IIFE模式增强

   /**
    * IIFE模式增强 : 引入依赖(jQuery)
    * 这就是现代模块实现的基石
    */
   
   // 给页面加红色背景
   (function (window, $) {
     let msg = 'module4'
     function foo () {
       console.log('foo()', msg)
     }
     // foo()
     window.module4 = foo
     $('body').css('background', 'red')
   })(window, jQuery)