前端工程化——模块化开发

模块化开发

  • 当下最重要的前端开发范式之一
  • 按照代码实现的功能不同划分成不同的模块实现单独维护,提高开发效率,降低维护成本

模块化的演变过程

  1. Stage1 - 文件划分方式

  • 将不同功能写入到不同文件中

  • 通过script标签在文件中进行引入

前端工程化——模块化开发_第1张图片

  • 存在命名冲突问题,污染全局作用域

  • 依靠约定,且无法管理模块依赖问题

  • 没有私有空间,外部可以对其进行修改

  1. Stage2 - 命名空间方式

  • 暴露一个对象,将每一个模块包裹到一个对象中来实现

前端工程化——模块化开发_第2张图片

  • 减少命名冲突的可能
  • 但仍然没有私有空间,外部可以对其进行修改
  • 没有解决依赖关系
  1. Stage3 - IIFE——立即执行函数

  • 将模块的每一个成员放进一个立即执行函数的私有作用域中

前端工程化——模块化开发_第3张图片

  • 对于需要暴露给外部的成员就直接挂在到window全局中的一个对象上去实现
  • 使用自执行函数的参数进行依赖声明

前端工程化——模块化开发_第4张图片

  • 上述方法的演变,最终也是存在着一些不足,都是依赖于约定

  • 并且都是通过script标签的形式进行的引入,不方便后期维护,所以期待一个规范

  • 不方便代码的移除和引入,不能以代码的形式去操控模块

  • 需要一个模块化的标准和一个模块化加载器

模块化规范的出现

CommonJS规范

  • NodeJS提出的一个标准
  • 一个文件就是一个模块
  • 每个模块都有单独的作用域
  • 通过 module.exports 导出成员
  • 通过require函数在入口模块
  • 但是在浏览器端就会出现一些问题
    • CommonJS是以同步模式来加载模块,NodeJS的执行机制是启动时加载模块,执行过程中直接使用而不加载
    • 但是在浏览器端如果也是这样在启动时加载模块的话,就会导致效率低下,每次页面请求都会请求大量模块
    • 所以AMD(Asynchronous Module Definition 异步模块定义规范)应运而生

AMD规范

  • 提出Require.js,实现了AMD规范,实现了模块加载器的作用

    • 用define定义模块

    • 用require载入模块

  • 目前绝大多数第三方库都支持AMD规范

  • 缺点

    • AMD使用起来相对复杂

    • 模块JS文件请求频繁

CMD规范

  • Sea.js

    • 阿里提出

    • 通过require引入依赖

    • 通过exports或者module.exports 对外暴露成员

  • 类似CommonJS 规范

模块化标准规范

模块化的统一:

  • 浏览器:ES Modules 规范
    • ES Modules in browers
    • ESMAScript 2015(ES6)
  • Node:CommonJS 规范
    • CommonJS in NodeJS

ES Modules 基本特性

  • 通过给 script 添加 type = module 的属性,就可以以 ES Module 的标准执行其中的 JS 代码了
<body>
  
  <script type="module">
    console.log('this is es module')
  script>
body>
  • ESM 自动采用严格模式,忽略 ‘use strict’
<body>
  
  <script type="module">

你可能感兴趣的:(前端工程化,javascript,js)