其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。
// 使用基础路由配置
import routes from ‘./routes’
// 返回Vue Router实例1
export default () => {
return new Router({
routes
})
}
// 返回Vue Router实例2
// const router = new Router({
// routes
// })
// export default router
定义好Vue Router的入口文件之后,接下来,要在项目的入口文件(index.js)中使用
import Vue from ‘vue’
import App from ‘./app.vue’
import VueRouter from ‘vue-router’
import createRouter from ‘./config/router’
Vue.use(VueRouter)
const router = createRouter()
new Vue({
router,
render: (h) => h(App)
}).$mount(root)
Vue-router之配置
=============
详解Vue Router的入口文件router.js的配置
import Router from ‘vue-router’
import routes from ‘./routes’
export default () => {
return new Router({
routes,
// 链接可以加前缀
base: ‘/base/’,
// 链接访问方式,vue默认为hash模式,可设置为history模式
mode: ‘history’,
// 页面中使用/login设置导航
// 当前激活状态页面的对应跳转链接会有router-link-exact-active,router-link-active两个样式,可以自定义样式名称
linkActiveClass: ‘a’,
linkExactActiveClass: ‘b’,
// 页面路径跳转时,是否进行滚动行为,并且可指定滚动到什么位置
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {x: 0, y: 0}
}
}
// 不是所有浏览器都支持前端路由方式(history模式),设置成true,vue会自动转换成hash转换方式
// 若设置成false,单页应用就变成了多页应用,每次页面跳转都会请求后端返回新的内容,比较耗时
fallback: true
// vue默认已处理了链接上的参数,以下方法可自定义转换方式
parseQuery (query) {
// 将字符串转成obj
},
stringifyQuery (obj) {
// 将obj转成字符串
}
})
}
Vue-router之路由参数传递
=================
动态路由、路由传参、懒加载、命名视图、路由命名、路由元信息、子路由、路由钩子
{
// 动态路由其实又可以叫做路由传参
path: ‘/login/:id’,
// 推荐用法props: true,实现组件中不需要写this. r o u t e . i d , . v u e 文件中写了 route.id,.vue文件中写了 route.id,.vue文件中写了route相当于耦合,避免之后vue-router升级之后写法不一样
// 如果组件中使用了$route,则不能当成一个单独的组建使用,因为会去路由上找id值,使用了props接受参数,其他组件只要通过prop传递
// 尽量使vue和$route解耦,让组件复用性更高
props: true,
// props: {id: ‘111’},
// props: (route) => ({id: route.query.id}),
component: Login,
// 懒加载,页面进入时再去加载组件,避免一开始加载所有组件(非当前组件)的js
// component: () => import(‘…/views/todo/todo.vue’), // 异步路由配置,首屏加载速度更快
// 命名视图
// 有时候想同时(同级)展示多个视图,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。
//
//
//
// components: {
// default: Login,
// a: Sidebar,
// b: Header
// },
// 路由命名。可通过路由名称进行路由跳转/app
name: ‘app’,
// 路由元信息,保存路由中的信息 在写HTML页面时,可以在head标签中定义meta,mate即页面源信息,这些信息有利于seo处理。而在vue组件中很难写这东西
meta: {
title: ‘this is app’,
description: ‘description’
},
// 子路由
children: []
// 路由钩子
// beforeEnter (to, from, next) {
// console.log(‘app route before enter’)
// next()
// }
}
在使用懒加载时,需要安装对应插件
npm i babel-plugin-syntax-dynamic-import -D
安装完成,修改.babelsrc
Vue-router之导航守卫
===============
vue-router中的导航钩子按定义位置不同(执行时机也不同)分为全局钩子、路由级钩子和组件级钩子。
在项目入口文件(index.js)中的路由守卫,全局钩子
import Vue from ‘vue’
import App from ‘./app.vue’
import VueRouter from ‘vue-router’
import createRouter from ‘./config/router’
Vue.use(VueRouter)
const router = createRouter()
// 全局路由钩子
router.beforeEach((to, from, next) => {
// 路由跳转前可做数据校验,例如判断是否登陆
console.log(‘global beforeEach’)
next()
})
router.beforeResolve((to, from, next) => {
console.log(‘global beforeResolve’)
next()
})
router.afterEach((to, from) => {
console.log(‘global afterEach’)
ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别?
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题:
最后
技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。