js模块化

js模块化

一、模块化的理解

• 模块化的理解
• 什么是模块?
  • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
  • 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
• 一个模块的组成
  • 数据—>内部的属性
  • 操作数据的行为—>内部的函数
• 模块化
  • 编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目

• 为什么需要模块化
  • 当项目功能越来越多，代码量便也会越来越多，后期的维护难度会增大，此时在JS方面就会考虑使用模块化规范去管理。

二、模块化进化历史

（一）全局function模式

/**
 * 全局函数模式: 将不同的功能封装成不同的全局函数
 * 问题: Global被污染了, 很容易引起命名冲突
 */

（二）namespace模式

/**
 * namespace模式: 简单对象封装
 * 作用: 减少了全局变量
 * 问题: 不安全(数据不是私有的, 外部可以直接修改)
 */

（三）IIFE模式

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

（四）IIFE模式增强

/**
 * IIFE模式增强 : 引入依赖
 * 这就是现代模块实现的基石
 */

（五）页面加载多个js的问题

二、commonjs模块化

（一）commonjs模块化的理解

• Node.js : 服务器端

• Browserify : 浏览器端 也称为js的打包工具

• 引入模块发生在什么时候?

  • 在服务器端（node.js）: 模块的加载是运行时同步加载的
  • 在浏览器端（Browserify)）:在运行前对模块进行编译/转译/打包的处理(已经将依赖的模块包含进来了), 运行的是打包生成的js, 运行时不存在需要再从远程引入依赖模块

• 模板定义

• 模块引用:

（二）commonjs模块化实操

• 创建项目结构

  |-js
    |-dist //打包生成文件的目录
    |-src //源码所在的目录
      |-module1.js
      |-module2.js
      |-module3.js
      |-app.js //应用主源文件
  |-index.html
  

  

• 创建包描述文件

  

• 模块化编码

  

  

  

  

• 安装工具

npm install browserify --save-dev

• 打包

• 页面引入

  

三、ES6模块化

（一）ES6模块化的理解

• ES6内置了模块化的实现

• 问题: 所有浏览器还不能直接识别ES6模块化的语法

• 解决

• 使用Babel将ES6—>ES5(使用了CommonJS) ----浏览器还不能直接运行

• 使用Browserify—>打包处理----浏览器可以运行

• 模块定义

  

• 模块引入

  

（二）E6模块化实操

• 创建文件目录

• 创建包描述文件

• 模块化编码

  

• 安装工具

  npm install babel-cli babel-preset-env browserify --save-dev

  

• 编译

  使用Babel将ES6编译为ES5代码(但包含CommonJS语法)

  npx babel js/src -d js/dist --presets=babel-preset-env

  

  

• 打包

  使用Browserify打包js

  npx browserify js/dist/app.js -o js/dist/bundle.js

  

• 页面引入

  

• 继续编写