2024年Web前端最新去哪儿项目开发过程，面试四轮

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

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

  

}

/* 3倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {

.border-bottom::after {

-webkit-transform: scaleY(0.33);

transform: scaleY(0.33);

}

}

---

// main.js

import ‘./aseets/css/border.css’

3. 路由

• 3.1路由嵌套

• 3.2 路由传参

• 3.3 路由守卫

• 3.3 keep-alive

4. 组件化开发

4.1 组件拆分合理 （公共组件，页面级别组件、功能性组件）

4.2 组件开发

组件传值 （父传子，子传父，兄弟组件，vuex）

5.webpack配置打包优化 （vue.config.js）

一系列配置。

1. 新建vue.config.js,设置静态资源路径为’./’,否则打包后项目无法运行

module.exports = {

publicPath: “./”

}

2. 关闭生产环境下的SourceMap映射文件,包的大小减少80%；

module.exports = {

productionSourceMap: false,

}

3. 跨域配置

module.exports = {

devServer: {

open: false, // 自动启动浏览器

host: ‘0.0.0.0’, // localhost

port: 6060, // 端口号

hotOnly: false, // 热更新

overlay: {

// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层

warnings: false,

errors: true

},

proxy: {

//配置跨域

‘/api’: {

target: ‘https://www.test.com’, // 接口的域名

// ws: true, // 是否启用websockets

changOrigin: true, // 开启代理，在本地创建一个虚拟服务端

pathRewrite: {

‘^/api’: ‘/’

}

}

}

}

}

4. 配置 alias 别名

//加载path模块

const path = require(‘path’)

//定义resolve方法，把相对路径转换成绝对路径

const resolve = dir => path.join(__dirname, dir)

module.exports = {

chainWebpack: config => {

// 添加别名

config.resolve.alias

.set(‘@’, resolve(‘src’))

.set(‘assets’, resolve(‘src/assets’))

.set(‘api’, resolve(‘src/api’))

.set(‘views’, resolve(‘src/views’))

.set(‘components’, resolve(‘src/components’))

}

}

配置完成后，我们在项目中可以这样写路径

//之前这么写

import Home from ‘…/views/Home.vue’

//配置alias别名后

import Home from ‘views/Home.vue’

//也可以这么写

import Home from ‘@/views/Home.vue’

5.使用CDN 加速优化

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：

const isProduction = process.env.NODE_ENV === ‘production’;

// externals

const externals = {

vue: ‘Vue’,

‘vue-router’: ‘VueRouter’,

vuex: ‘Vuex’,

vant: ‘vant’,

axios: ‘axios’

}

// CDN外链，会插入到index.html中

const cdn = {

// 开发环境

dev: {

css: [],

js: []

},

// 生产环境

build: {

css: [‘https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css’],

js: [

‘https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js’,

‘https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js’,

‘https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js’,

‘https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js’,

‘https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js’

]

}

}

module.exports = {

configureWebpack: config => {

// 为生产环境修改配置…

if (isProduction) {

// externals

config.externals = externals

}

},

chainWebpack: config => {

/**

• 添加CDN参数到htmlWebpackPlugin配置中

*/

config.plugin(‘html’).tap(args => {

if (isProduction) {

args[0].cdn = cdn.build

} else {

args[0].cdn = cdn.dev

}

return args

})

}

}

在 public/index.html 中添加

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

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

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。