一文彻底搞懂JS前端5大模块化规范及其区别

目录

  • 码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14577243.html
  • CommonJS规范（同步加载模块）
  • AMD（Asynchronous Module Definition）
  • CMD（Common Module Definition）
  • UMD（Universal Module Definition）
  • 问题回归："require"与"import"的区别

在开发以及面试中，总是会遇到有关模块化相关的问题，始终不是很明白，不得要领，例如以下问题，回答起来也是模棱两可，希望通过这篇文章，能够让大家了解十之一二，首先抛出问题：

创新互联致力于网站建设,网站制作设计,营销网页按需策划,外贸网站建设,企业网站建设,微信小程序,网站SEO优化,网站设计制作案例丰富,是成都做网站公司和建站公司,欢迎咨询。

  • 导出模块时使用 module.exports/exports 或者 export/export default ;
  • 有时加载一个模块会使用 require 奇怪的是也可以使用 import ？？它们之间有何区别呢？

于是有了菜鸟解惑的搜喽过程。。。。。。

模块化规范：即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。

Script 标签

其实最原始的 JavaScript 文件加载方式，就是Script 标签，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。

缺点：

  1. 污染全局作用域
  2. 开发人员必须主观解决模块和代码库的依赖关系
  3. 文件只能按照script标签的书写顺序进行加载
  4. 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到  

  •