2024年Web前端最全Javascript模块化开发基础，2024BAT大厂前端社招面试题

最新推荐文章于 2024-09-15 21:53:26 发布

2401_84436058

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量928

点赞数 12

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84436058/article/details/138691906

版权

程序员专栏收录该内容

167 篇文章 0 订阅

订阅专栏

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

export {a, b, c} from ‘./abc’;

//ES7 提议，在简化先输入后输出的写法。现在不能使用，也不建议使用，可读性不好

export a, b, c from ‘./abc’

使用 import 和 export 需要注意一下几个方面：

export 必须写在所在模块作用于的顶层。如果写在了内部作用于会报错
export 输出的值是动态绑定的，绑定在其所在的模块。

// foo.js

export var foo = ‘foo’;

setTimeout(function() {

foo = ‘foo2’;

}, 500);

// main.js

import * as m from ‘./foo’;

console.log(m.foo); // foo

setTimeout(() => console.log(m.foo), 500); //foo2 500ms 后同样会被修改

import 具有声明提升，而且会提升到整个文件最上面
import 获得的变量都是只读的，修改它们会报错
在 export 输出内容时，如果同时输出多个变量，需要使用大括号{}，同时 import 导入多个变量也需要大括号
import 引入模块的默认后缀是 .js, 所以写的时候可以忽略 js 文件扩展名
import 会执行要所加载的模块。如下写法仅仅执行一个模块，不引入任何值

import ‘./foo’; //执行 foo.js 但不引入任何值

模块整体加载

当然模块可以作为整体加载，使用*关键字，并利用 as 重命名得到一个对象，所有获得的 export 的函数、值和类都是该对象的方法：

// abc.js

export var a = 1;

export var b = 2;

export var c = 3;

// main.js

import * as abc from ‘./abc’;

console.log(abc.a, abc.b, abc.c);

上面 main.js 中的整体加载可以用 module 关键字实现：

//暂时无法实现

module abc from ‘./abc’;

console.log(abc.a, abc.b, abc.c); //1 2 3

注意，以上2种方式获得的接口，不包括 export default 定义的默认接口。

export default

为了使模块的用户可以不看文档，或者少看文档，输出模块的时候利用 export default 指定默认输出的接口。使用 export defalut 输出时，不需要大括号，而 import 输入变量时，也不需要大括号(没有大括号即表示获得默认输出)

// abc.js

var a = 1, b = 2, c = 3;

export {a, b};

export default c; //等价于 export default 3;

// main.js

import {a, b} from ‘./abc’;

import num from ‘./abc’; // 不需要大括号, 而且可以直接改名(如果必须用原名不还得看手册么?)

console.log(a, b, num) // 1 2 3

本质上，export default输出的是一个叫做default的变量或方法，输入这个default变量时不需要大括号。

// abc.js

var a = 20;

export {a as default};

// main.js

import a from ‘./abc’; // 这样也是可以的

console.log(a); // 20

// 这样也是可以的

import {default as aa} from ‘./abc’;

console.log(aa); // 20

如果需要同时输入默认方法和其他变量可以这样写 import:

import customNameAsDefaultExport, {otherMethod}, from ‘./export-default’;

这里需要注意：一个模块只能有一个默认输出，所以 export default 只能用一次

模块的继承

所谓模块的继承，就是一个模块 B 输出了模块 A 全部的接口，就仿佛是 B 继承了 A。利用 export * 实现：

// circleplus.js

export * from ‘circle’; //当然，这里也可以选择只继承其部分接口，甚至可以对接口改名

export var e = 2.71828182846;

export default function(x){ //重新定义了默认输出，如果不想重新定义可以：export customNameAsDefaultExport from ‘circle’;

return Math.exp(x);

}

//main.js

import * from ‘circleplus’; //加载全部接口

import exp from ‘circleplus’; //加载默认接口

//…use module here

上面这个例子 circleplus 继承了 circle。值得一提的是，export * 不会再次输出 circle 中的默认输出(export default)。

在使用和定义模块时，希望可以做到以下几个建议：

Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用 import 取代 require, 使用 export 取代module.exports
如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default
尽量不要 export default 与普通的 export 同时使用
不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出(export default)
如果模块默认输出一个函数，函数名的首字母应该小写；如果模块默认输出一个对象，对象名的首字母应该大写

ES6 模块加载的实质

ES6 模块加载的机制是值的应用，而 CommonJS 是值的拷贝。这意味着， ES6 模块内的值的变换会影响模块外对应的值，而 CommonJS 不会。 ES6 遇到 import 时不会立刻执行这个模块，只生成一个动态引用，需要用的时候再去里面找值。有点像 Unix 中的符号链接。所以说 ES6的模块是动态引用，不会缓存值。之前的这个例子就可以说明问题：

// foo.js

export let counter = 3;

export function inc(){

counter++;

}

// main.js

import {counter, inc} from ‘./foo’;

console.log(counter); //3

inc();

console.log(counter); //4

我们看一个 CommonJS 的情况

// foo.js

let counter = 3;

function inc(){

counter++;

}

module.exports = {

counter: counter,

inc: inc

}

// main.js

let foo = require(‘./foo’)

let counter = foo.counter;

let inc = foo.inc;

console.log(counter); //3

inc();

console.log(counter); //3

循环加载

不知道你们只不知道循环引用，在 js 垃圾回收机制中提到过：如果 A 对象的一个属性值是 B 对象，而 B 对象的一个属性值是 A 对象，就会形成循环引用，无法释放他们的内存。而模块中也会出现循环加载的情况：如果 A 模块的执行依赖 B 模块，而 B 模块的执行依赖 A 模块，就形成了一个循环加载，结果程序不能工作，或者死机。然而，这样的关系很难避免，因为开发者众多，谁都会在开发自己的模块时使用别人的几个模块，久而久之，就行互联网一样，这样的依赖也织成了一个网。

ES6 和 CommonJS 处理循环加载又不一样，从 CommonJS 开始研究