本文共 2584 字，大约阅读时间需要 8 分钟。

模块化

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标签中使用

// 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.jslet a = 1;let b = require('./b');console.log(b); //{ val: '这是b模块导出的数据' }// b.jsmodule.exports = {
           val:'这是b模块导出的数据',    x : a}//orexports.x = a;// 运行时直接在终端输入node a就可以出现结果{ val: '这是b模块导出的数据' }

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

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

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

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

  requireJS:

  独立模块作用域: 通过一个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方法,需要参数

转载地址：https://blog.csdn.net/ZZZ___jh/article/details/117673040 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！