2024年Web前端最全Node(11)，前端开发入门学习

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

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

当事件触发时，注册到这个事件的事件监听器被依次调用，事件参数作为回调函数参数传递。

实例

eventb.js:

var events = require(‘events’);

var emitter = new events.EventEmitter();

//someEvent事件监听器1

emitter.on(‘someEvent’, function(arg1, arg2) {

console.log(‘listener1’, arg1, arg2);

});

//someEvent事件监听器2

emitter.on(‘someEvent’, function(arg1, arg2) {

console.log(‘listener2’, arg1, arg2);

});

//触发事件

emitter.emit(‘someEvent’, ‘arg1 参数’, ‘arg2 参数’);

运行：

emitter 为事件 someEvent 注册了两个事件监听器，然后触发了 someEvent 事件。

运行结果中可以看到两个事件监听器回调函数被先后调用。

EventEmitter api

方法

| 序号 | 方法 | 描述 |

| — | — | — |

| 1 | addListener(event, listener) | 为指定事件添加一个监听器到监听器数组的尾部。 |

| 2 | on(event, listener) | 为指定事件注册一个监听器，接受一个字符串 event 和一 个回调函数。 |

| 3 | once(event, listener) | 为指定事件注册一个单次监听器，即 监听器最多只会触发一次，触发后立刻解除该监听器。 |

| 4 | removeListener(event, listener) | 移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。它接受两个参数，第一个是事件名称，第二个是回调函数名称。 |

| 5 | removeAllListeners([event]) | 移除所有事件的所有监听器， 如果指定事件，则移除指定事件的所有监听器。 |

| 6 | setMaxListeners(n) | 默认情况下， EventEmitters 如果你添加的监听器超过 10 个就会输出警告信息。 setMaxListeners 函数用于提高监听器的默认限制的数量。 |

| 7 | listeners(event) | 返回指定事件的监听器数组。 |

| 8 | emit(event, [arg1], [arg2], […]) | 按监听器的顺序执行执行每个监听器，如果事件有注册监听返回 true，否则返回 false。 |

类方法

| 序号 | 方法 | 描述 |

| — | — | — |

| 1 | listenerCount(emitter, event) | 返回指定事件的监听器数量。 |

事件

| 序号 | 事件 | 描述 |

| — | — | — |

| 1 | newListener | event - 字符串，事件名称

listener - 处理事件函数

该事件在添加新监听器时被触发。 |

| 2 | removeListener | event - 字符串，事件名称

listener - 处理事件函数

从指定监听器数组中删除一个监听器。需要注意的是，此操作将会改变处于被删监听器之后的那些监听器的索引。 |

实例

eventmain.js：

var events = require(‘events’);

var eventEmitter = new events.EventEmitter();

// 监听器 #1

var listener1 = function listener1() {

console.log(‘监听器 listener1 执行。’);

}

// 监听器 #2

var listener2 = function listener2() {

console.log(‘监听器 listener2 执行。’);

}

// 绑定 connection 事件，处理函数为 listener1

eventEmitter.addListener(‘connection’, listener1);

// 绑定 connection 事件，处理函数为 listener2

eventEmitter.on(‘connection’, listener2);

var eventListeners = eventEmitter.listenerCount(‘connection’);

console.log(eventListeners + " 个监听器监听连接事件。");

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

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

遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

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

[外链图片转存中…(img-lwEuYtFK-1714829628175)]

[外链图片转存中…(img-PYiWV1Cd-1714829628176)]