模块化开发规范

模块化

webpack是以模块化的方式来打包项目的.

模块化

​ 模块化是现代前端开发不可缺少的一部分.

​ 功能:

• 把复杂的问题分解成相对独立的模块,
• 降低程序复杂性,
• 提高代码的重用.
• 利于团队协作开发与后期的维护和扩展

​ 核心:

• 独立的作用域
• 如何导出模块内部数据
• 如何导入外部模块数据

---

ESM

​ es5开始引入的模块化

独立的模块作用域

​ 一个文件就是模块,模块拥有独立的作用域,且导出的模块都自动处于严格模式下, 即 user strice(模块中,默认为严格模式)

• 严格模式下,不允许使用with.

• 严格模式下,不允许给未声明的变量赋值.

• 严格模式下,arguments与参数不存在映射关系.

• 严格模式下,删除参数名,函数名报错.

  非严格模式下返回false,不报错也没有任何效果.

• 严格模式下,函数参数名重复报错.

  非严格模式最后一个重名参数会覆盖之前的重名参数.

• 严格模式下,删除不可配置的属性报错.

  非严格模式返回false,不报错也没有任何效果.

• 严格模式下,修改不可写的属性报错.

• 严格模式下,一般函数调用,this指向undefined,而不是全局对象.

• 严格模式下,不支持qrguments.caller

导出模块内部数据

​ 用export语句导出模块内部数据

​ eg:

export let name1,name2;
export let name1='zhangsan',name2='lisi';

导入外部模块数据

​ 导入分为静态导入和动态导入两种模式

​ 静态导入:

​ 在浏览器中, import语句只能在声明了type='module'的script标签中使用

<script type="module" src="./js/a.js"></script>

// import 语句 必须放在模块化代码的最顶层
import b from './b.js'
console.log(b);

// 不支持延迟加载
// document.onclick = function(){
//     import b from './b.js'
//     console.log(b);
// }

​ 动态导入:

​ 使用 import 函数来完成动态导入,不需要依赖type='module'的script标签.

document.onclick = async function(){
    // 使用 import 函数来完成动态导入 返回的数据会被包装在一个对象中
    let b = await import ('./b.js'); //异步
    console.log(b.default);
}

---

模块化的向下兼容

• commonJS(模块化在后端服务器的一种写法规范, 是基于文件系统,同步加载,并不适用于浏览器端)

  模块化的引入: 在node中require; 在vue中import

  独立模块作用域: 一个文件就是模块，拥有独立的作用域

  导出模块内部数据: 通过module.exports或exports对象导出模块内部数据

  // a.js
  let a = 1;
  let b = require('./b');
  console.log(b); //{ val: '这是b模块导出的数据' }
  
  // b.js
  module.exports = {
      val:'这是b模块导出的数据',
      x : a
  }
  //or
  exports.x = a;
  // 运行时直接在终端输入node a就可以出现结果{ val: '这是b模块导出的数据' }
  

  导入外部模块数据：通过 require 函数导入外部模块数据

  let b = require('./b');
  console.log(b.val); //这是b模块导出的数据
  

• AMD(适用于浏览器端的规范)

  浏览器没有具体实现规范的代码,通过第三方库(requireJS)来解决

  requireJS:

  <!-- data-main 优先读取的文件 -->
  <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js" data-main="./js/a.js"></script>
  

  独立模块作用域: 通过一个define方法来定义一个模块,并通过该方法的第二个回调函数参数来产生独立作用域

  define(function() {
    // 模块内部代码
  })
  

  导出模块内部数据: 通过return导出

  // b.js// 使用defined导出时, 需要返回值, 不需要参数define(function(){    let val = '这是amd规范下的数据';    return val;})
  

  导入外部模块数据:

  // a.js// 使用defined方法导入时, 需要参数, 不需要返回值// 参数一  导入的路径,(数组,因为可以导入多个)define(['./js/b.js'],function(b){    console.log(b); //这是amd规范下的数据})
  

• UMD(不属于一套模块规范,主要用来处理CommonJS、AMD、CMD 的差异兼容,是模块代码能在前面不同的模块环境下都能正常运行)

• ESM

---

注意点:

• ESM中的独立模块的作用域 都自动处于严格模式下
• 静态导入时,import语句放在模块化代码的最顶层,script标签要有type=‘module’
• commonJS是模块化在后端服务器的一种写法规范, 是基于文件系统,同步加载,不适用于浏览器端
• AMD是适用于浏览器端的规范

---

模块化总结:

​ 在es6, vue, node.js中都可以使用到模块化.

​ 把复杂的问题分成相对独立的模块.

​ 功能:

• 把复杂的问题分解成相对独立的模块,
• 降低程序复杂性,
• 提高代码的重用.
• 利于团队协作开发与后期的维护和扩展

​ 核心: 独立的作用域; 导出模块内部数据; 导入外部模块数据

​ 独立的模块作用域: 一个文件就是模块,它拥有独立的作用域.

​ 导出模块内部数据:

• 用export语句导出;
• commonJS中 用module.exports或exports对象导出;
• AMD中的第三方库requireJS中 用defined方法,需要return;

​ 导入外部模块数据:

• 静态导入

  • import语句放在模块化代码的最顶层,script标签要有type=‘module’;

  • 不支持延时加载

• 动态导入: 用 import 函数

• commonJS中导入: require函数

• AMD中的第三方库requireJS中导入: 用defined方法,需要参数