模块化的理解和规范

Posted 2023-05-10

参考技术A 把相同功能的封装为一个模块，提供向外的接口，以供使用，使得开发的时候，彼此互不影响！
ESModule

es6模块化规范
采用的是
import 导入
export 导出
特点：

1：一个文件为一个模块，每一个模块只会加载一次，即使多次调用，还是加载一次，多次引入的时候，是从内存中获取
2：导出和导入
import导入 import
export导出 export defalut
3：import为静态的导入
导出

let a = 10;
let b = 20;

function add(a, b)
return a + b;

let c = 30;

function sub(a, b)
return a - b;


export
a,
b,
c,
add

let d = 100;
let e = 22;

export default
d,
e
; //注意点：就是export default 导出的只能是一个变量或者对象等等！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
导入
import XXX form “路径” => 这是对应 export let XXX 的格式
import form “路径” => 这是对应 export 的格式
import XX from “路径” => 这是对应 export default 的格式
注意点：就是export 导入的必须按照导出的名称来接受，如果重名了，那么使用 as 来修改别名
eg: import d as dd from "路径" 当d变量重名的时候，就把个导出为dd
import
a,
b,
c,
add
from "./js/01.es6的导入和导出.js";
1
2
3
4
5
6
AMD

sea.js
CMD

require.js
commom.js

node语言的模块化规范
导出

var flag = true;
function getSum(num, num2)
return num + num2;

if (flag)
console.log('小明');

//这是common.js方式 导出 对象
module.exports =
flag,
getSum

1
2
3
4
5
6
7
8
9
10
11
12
导入
语法：let flag,getSum = require 路径"
//这是commom.js导入的语法
let aaa = require('./aaa'); // 从 aaa文件导入
let flag = aaa.flag;
let getSum = aaa.getSum;
// getSum(2, 90);
console.log(getSum(2, 90));

[ECMAScript] 谈谈你对es6的module体系的理解

[ECMAScript] 谈谈你对es6的module体系的理解

es5的模块规范出来之前，前端也实现了比如AMD CMD模块规范，对前端模块进行管理。
es6的模块规范在语言层面实现了模块功能

为什么需要模块化，没有模块化之前，开发者如果想封装代码，需要创建多个文件，并将这些文件作为单独脚本

项目复杂度大的话，链接的文件就多。而且还存在污染全局命名空间的问题，因为这些js脚本中的变量都挂载到全局window对象上，可能产生覆盖，而且你也不知道你用的xx变量是在哪个文件定义的。

要想办法将变量放在函数作用域中，实现私有化

而且，你还必须按顺序依次加载script，才能确保变量可用

也就是说，多文件方案问题很多，es2015就开始支持js模块了

一个模块是一段可以为其他模块提供函数功能的代码块，简单来说就是一个文件，同时它自己可以依赖别的模块里的功能。

这样允许了开发者复用代码，提供了稳定一致的接口，还不会污染全局命名空间，不会向全局对象添加任何内容，而且处于严格模式，多次引入同一模块无效，只会执行一次。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题