本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!