2024年前端最全JSP的Web监听器（Listener）(1)，2024年哔哩哔哩前端高级面试题及答案

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

监听器的分类

====================================================================

1. 按照监听的对象划分：

按照监听对象的不同可以划分为三种：

ServletContext监控：对应监控application内置对象的创建和销毁。

当web容器开启时，执行contextInitialized方法；当容器关闭或重启时，执行contextDestroyed方法。

实现方式：直接实现ServletContextListener接口：

public class MyServletContextListener implements ServletContextListener{

public void contextDestroyed(ServletContextEvent sce) {

}

public void contextInitialized(ServletContextEvent sce) {

}

}

HttpSession监控：对应监控session内置对象的创建和销毁。

当打开一个新的页面时，开启一个session会话，执行sessionCreated方法；当页面关闭session过期时，或者容器关闭销毁时，执行sessionDestroyed方法。

实现方式：直接实现HttpSessionListener接口：

public class MyHttpSessionListener implements HttpSessionListener{

public void sessionCreated(HttpSessionEvent arg0) {

}

public void sessionDestroyed(HttpSessionEvent arg0) {

}

}

ServletRequest监控：对应监控request内置对象的创建和销毁。

当访问某个页面时，出发一个request请求，执行requestInitialized方法；当页面关闭时，执行requestDestroyed方法。

实现方式，直接实现ServletRequestListener接口：

public class MyServletRequestListener implements ServletRequestListener{

public void requestDestroyed(ServletRequestEvent arg0) {

}

public void requestInitialized(ServletRequestEvent arg0) {

}

}

2. 按照监听事件划分：

监听事件自身的创建和销毁：同上面的按对象划分。

监听属性的新增、删除和修改也是划分成三种，分别针对于ServletContext、HttpSession、ServletRequest对象：

ServletContext，实现ServletContextAttributeListener接口：

通过调用ServletContextAttribtueEvent的getName方法可以得到属性的名称。

public class MyServletContextAttrListener implements ServletContextAttributeListener{

public void attributeAdded(ServletContextAttributeEvent hsbe) {

System.out.println("In servletContext added :name = "+hsbe.getName());

}

public void attributeRemoved(ServletContextAttributeEvent hsbe) {

System.out.println("In servletContext removed :name = "+hsbe.getName());

}

public void attributeReplaced(ServletContextAttributeEvent hsbe) {

System.out.println("In servletContext replaced :name = "+hsbe.getName());

}

}

HttpSession，实现HttpSessionAttributeListener接口：

public class MyHttpSessionAttrListener implements HttpSessionAttributeListener{

public void attributeAdded(HttpSessionBindingEvent hsbe) {

System.out.println("In httpsession added:name = "+hsbe.getName());

}

public void attributeRemoved(HttpSessionBindingEvent hsbe) {

System.out.println("In httpsession removed:name = "+hsbe.getName());

}

public void attributeReplaced(HttpSessionBindingEvent hsbe) {

System.out.println("In httpsession replaced:name = "+hsbe.getName());

}

}

ServletRequest，实现ServletRequestAttributeListener接口：

public class MyServletRequestAttrListener implements ServletRequestAttributeListener{

public void attributeAdded(ServletRequestAttributeEvent hsbe) {

System.out.println("In servletrequest added :name = "+hsbe.getName());

}

public void attributeRemoved(ServletRequestAttributeEvent hsbe) {

System.out.println("In servletrequest removed :name = "+hsbe.getName());

}

public void attributeReplaced(ServletRequestAttributeEvent hsbe) {

System.out.println("In servletrequest replaced :name = "+hsbe.getName());

}

}

3. 监听对象的状态：

针对某些POJO类，可以通过实现HttpSessionBindingListener接口，监听POJO类对象的事件。例如：

public class User implements HttpSessionBindingListener,Serializable{

private String username;

private String password;

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

public void valueBound(HttpSessionBindingEvent hsbe) {

System.out.println("valueBound name: "+hsbe.getName());

}

public void valueUnbound(HttpSessionBindingEvent hsbe) {

System.out.println("valueUnbound name: "+hsbe.getName());

}

}

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。