前端模块化开发到底是什么？

Whoopsina

已于 2022-03-16 00:23:09 修改

阅读量631

点赞数

分类专栏：前端工程化文章标签：前端 es6

于 2022-03-07 23:35:14 首次发布

本文链接：https://blog.csdn.net/Whoopsina/article/details/123342633

版权

文章目录

前言
模块化演变过程
模块化规范的出现
模块化的最佳实践

前言

前端的模块化开发经过长时间的演变现在已经趋于稳定，但是模块化的演变过程对于前端开发者的学习来说也是十分重要的，所以我总结了模块化的演变过程和当下最流行的模块化方案的基本使用，希望大家能有所收获

模块化演变过程

基于文件的划分模块的方式

<body>
  <script src="module-a.js"></script>
  <script src="module-b.js"></script>
  <script>
    // 命名冲突
    method1()
    // 模块成员可以被修改
    name = 'foo'
  </script>
</body>

// module-a.js
var name = 'module-a'

function method1 () {
     
  console.log(name + '#method1')
}

function method2 () {
     
  console.log(name + '#method2')
}

命名冲突，污染全局作用域，模块成员可以被修改，无法管理模块依赖关系；

命名空间方式

每个模块只暴露一个全局对象，所有模块成员都挂载到这个对象中

<body>
  <script src="module-a.js"></script>
  <script src="module-b.js"></script>
  <script>
    moduleA.method1()
    moduleB.method1()
    // 模块成员可以被修改
    moduleA.name = 'foo'
  </script>
</body>

// module-a.js

var moduleA = {
     
  name: 'module-a',

  method1: function () {
     
    console.log(this.name + '#method1')
  },

  method2: function () {
     
    console.log(this.name + '#method2')
  }
}

通过命名空间的方式会减小命名冲突的可能，但是模块成员仍然可以被修改，仍然无法管理模块依赖关系；

IIFE

具体做法就是将每个模块成员都放在一个函数提供的私有作用域中。

有了私有成员的概念，私有成员只能在模块成员内通过闭包的形式访问。

对于管理模块依赖关系，可以利用自执行函数的参数声明去传入依赖的模块，这样可以很清晰的看见，当前模块依赖了哪些模块。
```
<body>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"&g
```

最低0.47元/天解锁文章

Whoopsina

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端模块化开发到底是什么？

文章目录前言模块化演变过程模块化规范的出现模块化的最佳实践ES Modules基本特性ES Modules 导出ES Modules导入导出的注意事项ES Module导入用法ES Module导入导出对象ES Module浏览器环境 PolyfillES Module在Node.js下支持情况前言前端的模块化开发经过长时间的演变现在已经趋于稳定，但是模块化的演变过程对于前端开发者的学习来说也是十分重要的，所以我总结了模块化的演变过程和当下最流行的模块化方案的基本使用，希望大家能有所收获模块化演变
复制链接

扫一扫