前端常见问题 一定要搞懂(1)

• 导航守卫 router.beforeEach 全局前置守卫

• to: Route: 即将要进入的目标（路由对象）

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。（一定要用这个函数才能去到下一个路由，如果不用就拦截）

• 执行效果依赖 next 方法的调用参数。

• next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

• next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。

// main.js 入口文件

import router from ‘./router’; // 引入路由

router.beforeEach((to, from, next) => {

next();

});

router.beforeResolve((to, from, next) => {

next();

});

router.afterEach((to, from) => {

console.log(‘afterEach 全局后置钩子’);

});

路由独享的守卫 你可以在路由配置上直接定义 beforeEnter 守卫

const router = new VueRouter({

routes: [

{

path: ‘/foo’,

component: Foo,

beforeEnter: (to, from, next) => {

// …

}

}

]

})

组件内的守卫 : 你可以在路由组件内直接定义以下路由导航守卫

const Foo = {

template: ...,

beforeRouteEnter (to, from, next) {

// 在渲染该组件的对应路由被 confirm 前调用

// 不！能！获取组件实例 this

// 因为当守卫执行前，组件实例还没被创建

},

beforeRouteUpdate (to, from, next) {

// 在当前路由改变，但是该组件被复用时调用

// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

// 可以访问组件实例 this

},

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用，我们用它来禁止用户离开

// 可以访问组件实例 this

// 比如还未保存草稿，或者在用户离开前，

将setInterval销毁，防止离开之后，定时器还在调用。

}

}

40.事件如何先冒泡后捕获？

根据w3c标准，应先捕获再冒泡。 若要实现先冒泡后捕获，给一个元素绑定两个 addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

参考文章：DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

41.哪些事件不支持冒泡事件？

鼠标事件：mouserleave mouseenter

焦点事件：blur focus

UI事件：scroll resize

42.如何判断一个变量是对象还是数组

使用：prototype.toString.call()

1.typeof判断数据类型（判断数组跟对象都返回object）

console.log(typeof null); // “object”

console.log(typeof function () { return 1 }); // “function”

console.log(typeof ‘梦龙小站’); // “string”

console.log(typeof 1); // “number”

console.log(typeof a); // “undefined”

console.log(typeof undefined); // “undefined”

console.log(typeof []); // “object”

console.log(typeof NaN); // “number”

console.log(typeof {}); // “object”

2.instanceof判断对象的原型链是否是指向构造函数的prototype

var arr = [1,2,3,1];

console.log(arr instanceof Array)//true

3.对象的constructor属性

var arr = [1,2,3,1];

console.log(arr.constructor === Array)//true

4.Object.prototype.toString.call(arr)

利用对象的toString可以准确判断是什么类型，call()改变this指向，这里是借用Object的方法，然后有人可能会问为什么不直接用arr.toString而要借用Object的方法

console.log(Object.prototype.toString.call(“jerry”));//[object String]

console.log(Object.prototype.toString.call(12));//[object Number]

console.log(Object.prototype.toString.call(true));//[object Boolean]

console.log(Object.prototype.toString.call(undefined));//[object Undefined]

console.log(Object.prototype.toString.call(null));//[object Null]

console.log(Object.prototype.toString.call({name: “jerry”}));//[object Object]

console.log(Object.prototype.toString.call(function(){}));//[object Function]

console.log(Object.prototype.toString.call([]));//[object Array]

console.log(Object.prototype.toString.call(new Date));//[object Date]

console.log(Object.prototype.toString.call(/\d/));//[object RegExp]

console.log(Object.prototype.toString.call(new Person));//[object Object]

直接用toString

console.log(“jerry”.toString());//jerry

console.log((1).toString());//1

console.log([1,2].toString());//1,2

console.log(new Date().toString());//Wed Dec 21 2016 20:35:48 GMT+0800 (中国标准时间)

console.log(function(){}.toString());//function (){}

console.log(null.toString());//error

console.log(undefined.toString());//error

因为toString为Object原型上的方法，而Array、Function都是Object的实例，实例重新改写了原型上的toString方法，不同的对象调用toString方法，调用的是改写之后的方法（转成各种类型的字符串），而不会调用Object原型上的toString()方法，因此直接调用不能判断对象类型

var arr=[1,2,3];

console.log(Array.prototype.hasOwnProperty(“toString”));//true

console.log(arr.toString());//1,2,3

delete Array.prototype.toString;//delete操作符可以删除实例属性

console.log(Array.prototype.hasOwnProperty(“toString”));//false

console.log(arr.toString());//“[object Array]”

我们可以看到，删除实例上的toString方法后调用的是Object原型上的toString()方法，返回对象类型

43.setTimeout 和 setInterval的机制

因为js是单线程的。浏览器遇到setTimeout 和 setInterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的待执行时间队列里面，等到浏览器执行完当前代码之后会看下事件队列里有没有任务，有的话才执行定时器里的代码

Ajax

• 4个步骤

• JSONP的实现原理

• 怎么解决跨域问题

• CORS跨域的原理

• token一般可以存放在哪里的？分别有什么好处

axios

• axios是什么？怎么使用？描述使用它实现登录功能的流程？

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

axios是一个基于promise的Http库。可以发送get，post请求，正由于Vue，React的出现，促使了axios轻量级库的出现

Axios特性

1、可以在浏览器中发送 XMLHttpRequests

2、可以在 node.js 发送 http 请求

3、支持 Promise API

4、拦截请求和响应

5、转换请求数据和响应数据

6、能够取消请求

7、自动转换 JSON 数据

8、客户端支持保护安全免受 XSRF 攻击

ES6

• promise 表达的

• 导入导出 有哪些方式 优缺点

• 说下 es6 的 class

• CommonJS和ES6模块的区别

• 平常工作中ES6+主要用到了哪些？

Node

• nodejs Buffer缓冲区

• node原理 6步

Vue

• vue的生命周期

• 哪个生命周期可以获取到DOM元素

• vue3 和vue2有什么不同 ？优缺点试什么 ？

• MVVM 表达

• Vue的响应式原理

• virtual dom 原理实现

• Proxy 相比于 defineProperty 的优势

• 自定义写个v-loading 怎么写？

• this.$nextTick原理

• watch跟computed的区别

• $map

• $set

• diff算法

• Object.definedProperty 和 Proxy

• keep-alive 有啥用

• vue组件之间的通信方式有哪些

• Vue中computed和methods的区别

• 不使用框架如何实现组件按需加载以及原理

• vue修饰符

• vue.extend和vue.component

• 为什么虚拟DOM会提高性能

webpack

• webpack 原理

• webpack打包机制

• 热更新的理解

• Plugin和 loader 相同和不同点

• vite原理

• 反向代理知道吗？

正则表达式

• 正则里的非如何实现的

算法

• 冒泡排序算法和数组去重

• 二叉树

小程序

• 登录流程 ？

• 支付流程 ？

• 购物车怎么做的 ？

• 白名单怎么做的！

• 静默登录怎么做的！

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
，自己不成体系的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-6pGEUgC0-1715884759600)]

[外链图片转存中…(img-YcQNveCi-1715884759600)]

[外链图片转存中…(img-WqycK6bW-1715884759601)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！