前端模块化

阅读目录

1. 什么是前端模块化？
2. 模块化规范
   • CommonJS
   • ES6module

 

---

回到顶部

什么是前端模块化？

　　模块化就是将实现某个特定功能的代码逻辑封装到一个文件中去，提供对外暴露的接口与其他外部模块进行通信。由于每个模块中定义的变量或函数都是私有的，在代码合并时多个模块之间不会造成命名空间冲突。另外，使用模块化规范可以清楚地知道各个模块的依赖关系，解决文件依赖管理的问题。

　　在早期，我们可以通过 立即调用函数+闭包 的方式来实现模块化，将数据和行为封装到一个函数内部，通过给window对象添加属性的方式来向外暴露接口。但当引入依赖时，有时候我们由于不清楚依赖关系会导致引入文件的顺序出错，导致程序不能正确运行。比如下面这个模块要想正确运行，index,html文件必须按一定的顺序加载文件。

// module.js文件
//在这个模块中引入了jQuery这个依赖，因此需要在html中先加载jQuery库才能将它作为参数引入进来
(function(window, $) { 
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
    $('body').css('background', 'red') //通过jquery方法将页面的背景颜色改成红色
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
  }
  function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar }
})(window, jQuery)

 // index.html文件
  <!-- 引入的js必须有一定顺序 -->
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript" src="module.js"></script>
  <script type="text/javascript">
    myModule.foo()
  </script>

 

回到顶部

模块化规范

　　常见的模块化规范有CommonJS、ES6module、AMD和CMD。我了解比较多的是CommonJS和ES6module。

CommonJS

　　Node.js的模块系统默认采用的是CommonJS规范，它将.js文件中的代码逻辑封装到一个函数中，它对外暴露一个module.exports对象，外部通过require来导入。CommonJS模块的加载是运行时同步加载的，因此适合用在服务器端。而通过require导入的值是模块中暴露出去的值的拷贝，因此一旦这个值被导出到其他地方后，模块内部的变化是不会影响其他地方的这个值的。

　　注意，Node.js实际上也支持ES6模块系统，有以下两种切换方式：

1. 将模块的文件扩展名修改为.mjs；
2. 修改package.json文件的type属性为module

ES6module

　　ES6模块是在编译时输出接口的，通过export对外暴露的是模块内部某些变量或函数的引用，外部通过import导入拿到的是值的引用，因此模块内部的变化会影响外部导入的地方。使用ES6模块，需要使用Babel将其编译成ES5代码。