2024年最新项目总结：vue(1)，46道面试题带你了解高级前端面试

最新推荐文章于 2024-09-01 02:07:48 发布
最新推荐文章于 2024-09-01 02:07:48 发布
阅读量284 收藏 7
点赞数 5
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82244509/article/details/138913507
版权

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代码调试

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

6. 什么是****vue.js

（1）它是一个轻量级MVVM框架；

（2）数据驱动+组件化的前端开发

（3）GitHub超过25k star，社区完善

对比****Angular 和React

vue.js更加轻量，gzip后大小之后20K+，因此对于移动端来说vue更加适合；

vue.js容易上手，学习曲线平稳；（angular入手较难）

吸收两家之长，借鉴angular的指令和react的组件化；

Vue.js****的核心思想

**（1）数据驱动：**DOM是数据的一种自然映射

如果没有Viewmodel是如何交互的？视图改变会手动触发DOM改变。

使用了Vue.js之后，就省去了手动操作DOM的步骤，在vue.js中只用改变数据，vue.js通过Directive指令，对DOM进行封装，当数据发生变化，会通知指令修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射。Vue.js还会对操作做一些监听，当我们修改视图的时候，vue.js监听到这些变换，从而改变数据，这样就形成了数据的双向绑定。

数据响应原理：数据改变驱动视图更新。

有一份数据a.b，在一个vue对象实例化的过程中，会给b通过object。Defineproperty属性添加了getter和setter，同时vue.js会对模板进行编译，解析生成一个指令对象v-text指令，每个指令对象都会关联一个watcher，当我们对对应的表达式a.b求值的时候，就会触发getter，把依赖收集到watcher里面。当再次改变a.b的值的时候，会触发setter，会通知到对应的watcher，watcher会再次对a.b求值，计算对比新旧值，当发现值改变，watcher会通知到指令，使用指令的update方法，由于指令是对DOM的封装，所以就会调用原生DOM的方法更新视图，这样就完成了数据改变到数据更新的一个自动化的过程。

**（2）组件的设计原则：**页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件需要的各种资源在这个目录下就近维护（前端工程化和分治思想）；页面不过是组件容器，组件可以嵌套自由组合形成完整页面。

7. cube-ui组件库

  • Popup 弹层：底层弹层组件，主要用于基于此组件实现上层组件封装，只提供了基础功能：指定类型、是否有背景层、显示内容（HTML）以及是否居中。

  • 内置所有的弹层类组件都是基于此组件实现，包括：Toast、Picker、TimePicker、Dialog、ActionSheet。

  • Scroll 滚动：滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。

  • Slide 幻灯片：轮播图，提供了常见的轮播及swipe的功能，也是一个基于better-scroll进行封装的组件。

  • IndexList 索引列表：索引列表，提供了列表索引的功能，也是一个基于better-scroll进行封装的组件。

  • create-api：有些时候，开发者可能也需要自己封装的组件支持 API 式调用，此时可以通过引入 create-api 模块或者通过全局的 Cube.createAPI 接口来达到封装目的。

  • Dialog：Dialog模态框组件，提供了多种样式及交互形式。

二、项目准备

==========

1. 需求分析

1）区块划分

6张设计稿；区块划分为：头部区、内容区（商品页、评论页、商家详情页）

点击导航栏会进行切换，由于是SPA单页面应用–切换页面时不会刷新整个页面；

（1）头部区：包括商家描述，当点击公告和数字的时候会展示黑色的浮层，点击按钮浮层关闭；

（2）内容区

**商品页：**可以拆分为左右两栏，左侧是商品的分类，右侧是实际商品的列表。当商品区块对应某个分类时，左边导航栏相应分类会高亮，当列表内容超过页面可视区块时，可以进行滚动，在滚动右侧时，左侧的高亮区也会保持联动的效果。商品页底部是一个购物车，当点击加号购买商品的时候，购物车会联动购买的商品总数和金额，当金额超过最小配送费时，显示“去结算”按钮，点击按钮可以进行结算；当购物车商品部位0 时，点击购物车是没有反应的；点击购物车会弹出购物车列表，列表也有最大高度，当超过最大高度，内部可以滚动，在购物车内部也可以进行添加和删除操作，并且和主页面保持联动。当我们点击具体的商品，会展示具体商品页浮层，有商品图片、介绍，可以点击加入购物车，一样可以完成一次购买流程，底部是一个评论区，我们可以条件查看，比如根基评级类型（有无内容）进行勾选，评论区的显示会相应做出变化，当浮层页面超过手机高度时，页面可以滚动，页面左上角有一个返回按钮，点击按钮浮层会关闭。

**商品评论页：**上面是一个评星级别，下面是具体的评论区。

**商家详情页：**主要是商家信息的展示，商家实景图是当图片官渡超过页面宽度时可以左右滚动，当整个页面超过手机高度，可以上下滚动，有一个收藏区块，可以点击收藏关注商家。

2）组件拆分

由于是组件化的开发，整个页面可以看成App.vue一个大组件。

大组件包含头部（header），导航区（主要控制下面内容部分的切换），内容部分包含商品（goods），评价（ratings），商家（seller）三个组件。

2. 图片素材

1）设备像素比

移动端一张图片需要2x和3x,来适应不同dpr（device picture ratio设备像素比）推荐文章：张鑫旭-设备像素比简单介绍

https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

参考链接：https://www.cnblogs.com/samwu/p/5341056.html

2）SVG图片

SVG是一种矢量图片，它的特点就是当我们把它放大之后图片质量不会下降，在移动端开发过程中，通常会把一些色彩单一的图片做成SVG图片，在CSS中引入图标字体文件。

推荐IcoMoon工具: https://icomoon.io/

网站具体使用方法：点击Icomoon app按钮，会跳转到如下页面，点击Icomoon icon按钮，之后选中所有的SVG文件；选中自己想要的图标后，点击右下角的generate font，可以查看代码。点击preference可以修改字体名称等；点击download按钮，解压后fonts里面就是所有的图标字体文件以及style.css。

3）support-ico组件对图标处理

由于项目中的图标（icon）多次使用，并且尺寸（1，2，3，4，四种尺寸）和类型（减、折、特、票），基于此，就不同把这些图标做成一个组件support-ico。

含有一个动态绑定的class，可以根据传入的props(size,type)改变绑定的class。

Computed计算属性icon Cls()，定义一个数组，数组保存了{‘decrease’, ‘discount’, ‘special’, ‘invoice’, ‘guarantee’}，可以根据传入的type和size动态拼接icon的样式。

computed: {

iconCls() {

const classMap = [‘decrease’, ‘discount’, ‘special’, ‘invoice’, ‘guarantee’]

return icon-${this.size} ${classMap[this.type]}

}

}

实现对于不同的类型和大小引入不同的图片。

3. mock数据

准备了一个data.json里面是我们模拟的数据。包含三个部分：seller，goods，ratings

在vue.config.js中写入devServer字段，并且有一个before函数，可以通过app.get来模拟get接口，返回json字段，其中goods,ratings,seller都是通过data.json字段拿到的。

测试：启动服务之后输入localhost:8080/api/seller会返回json数据。表示mock服务成功了。

4. 使用vue-cli搭建项目框架

安装并创建项目，参考链接： https://cli.vuejs.org/zh/guide/installation.html

项目入口html在public目录下的index.html,  index.html编译之后会引用main.js（入口js是src目录下的main.js）

.browserslistrc 浏览器，用CSS在不同浏览器可能存在兼容性问题，因此需要对其加前缀—针对于postcss.config.js中的autoprefixer插件（）

Eslintrc.js就是eslint的配置

Package.json就是需要的依赖，项目描述

5. 安装cube-ui

移动端比较好用的组件库https://didi.github.io/cube-ui/#/zh-CN

Theme.styl 列出所有组件的颜色，可以进行修改

Package.json中添加了一个transormModules字段，引用cube-ui组件

Vue.config.js 可以进行额外配置

6. 项目common目录

1）fonts

存放SVG相关图片的信息

2）stylus

Index.styl 入口文件，里面import icon和base（在main.js需要引入index.styl）

Icon.styl是字体图标的样式（引用了font下面的文件，制作的图标可以通过类名可以访问到icon）

Base.styl定义了基础样式（html和body）

mixin.styl导入了cube-ui的stylus（@import “~cube-ui/src/common/stylus/mixin.styl”）

Variable.styl导入cube-ui的一些变量（@import “~cube-ui/src/common/stylus/variable.styl”），同时自己定义了项目的颜色

7. axios封装和数据获取

Axios第三方库获取数据：https://github.com/axios/axios

npm i axios --save

在目录下创建api-helper.js和index.js,对于所有的get方法进行封装

/helper.js/

import axios from ‘axios’

const ERR_OK = 0

export function get(url) {

return function(params) {

return axios.get(url, {

params

}).then((res) => {

const { errno, data } = res.data

if (errno === ERR_OK) { // 成功

return data

}

}).catch(() => {

})

}

}

/index.js/

import { get } from ‘./helpers’

const getSeller = get(‘/api/seller’)

const getGoods = get(‘/api/goods’)

const getRatings = get(‘/api/ratings’)

export {

getSeller,

getGoods,

getRatings

}

8. 1像素border实现

border-bottom: 1px solid rgba(7, 17, 27, 0.1)

在PC端是１像素边框，但是在手机端有设备像素比，所以可能看上去会有不同

设计一个mixin.styl

border-1px($color)

position: elative

&:after

diaplay: block

position: absolute

left: 0

bottom: 0

width: 100%

border-top: 1px solid $color

content: ’ ’

对于需要添加1像素边框的标签加上border-1px类，然后对伪类进行缩放

@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)

.border-1px

&::after

-webkit-transform: scaleY(0.7)

transform: scaleY(0.7)

@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)

.border-1px

&::after

-webkit-transform: scaleY(0.5)

transform: scaleY(0.5)

1像素border实现：伪类（绝对定位）+ 缩放（对伪类Y轴缩放），
最后

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

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

2301_82244509
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024年前端VUE必看面试题
01-24
本资源“2024年前端VUE必看面试题”旨在帮助开发者准备Vue.js相关的面试，确保他们在技术面试中表现出色。以下是根据这个主题可能会涉及到的一些关键知识点，这些内容对于理解和掌握Vue.js至关重要。 1. **Vue基础...
总结vue前端面试题
10-27
Vue.js 是一款流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。在面试中，Vue 的基础知识、高级特性及组件化开发是常见的考察点。以下是对这些知识点的详细阐述： 1. **Vue基础**： - **安装与初始化*...
前端面试题: 精选Vue面试题及答案.pdf
12-14
Vue面试题总结 本资源总结了 Vue 面试题的知识点，涵盖了 Vue 的基本原理、双向数据绑定的原理、MVVM、MVC、MVP 等架构设计模式的区别等内容。 1. Vue 的基本原理 Vue 的基本原理是通过 Object.defineProperty() ...
2022最新前端vue面试题2022最新前端vue面试题
02-06
2022最新前端vue面试题2022最新前端vue面试题
非常全的vue面试题最新前端vue面试题合集适合各阶段开发同学
05-06
本文将深入探讨Vue.js的核心概念和技术，帮助前端开发者，无论初阶还是高阶，都能在面试中展现出扎实的Vue知识。 1. **Vue基本概念** - **虚拟DOM**：Vue使用虚拟DOM来提高性能，它通过计算差异并只更新必要的部分...
Window Performance API
Bruce__taotao的博客
08-28 1607
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 670
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
vue ref和reactive区别
灰海
08-25 6454
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1578
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
最新发布
cdcdhj的博客
09-01 269
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1053
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
JavaWeb——前端工程化
m0_50460160的博客
08-30 763
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
KEYSIGHT是德 Infiniium EXR系列 示波器
XLTYQYB的博客
08-29 1337
该系列的所有型号都集成了一个 10 位 ADC，并且在所有通道上同时提供 16 GSa/s 的采样率。高分辨率 ADC 的效用取决于示波器的前端底噪是否足够低以提供与之匹配的额外的量化电平空间。我们的低噪声前 端包含定制 IC，例如 130 纳米 BiCMOS IC（其中集成了用户可选的模拟滤波器），并且带宽可通过软件 许可证升级。使用硬件滤波时，噪声低至 43 μV，系统 ENOB 达到 9.0 位。Infiniium EXR系列 示波器 型号比较。垂直分辨率是 8 位示波器的 4 倍。
前端学习Day36
2401_83657100的博客
08-31 270
同样的将变量和函数组合到了一起并能通过this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。我们可以把那些不变的方法，直接定义在 prototype对象上，这样所有对象的实例就可以共享这些方法。构造函数和原型对象中的this 指向构造函数和原型对象中的this都指向实例化的对象。构造函数和原型对象中的this 都指向实例化的对象。构造函数体现了面向对象的封装特性；
Vue动态表头数据
lplovewjm的博客
08-27 639
本文主要解决场景：表头不固定、从后端数据中拿取表头并渲染到页面中。
滴滴前端日常实习一面
weixin_46714216的博客
08-31 451
滴滴前端面经
Java Web实战教程：如何一步步开发美容美发管理系统
WEIXIN_JSJBCZDS的博客
08-28 706
Java Web实战教程：如何一步步开发美容美发管理系统 本文详细介绍了如何利用Java Web技术一步步开发美容美发管理系统，重点解析了系统核心业务功能，包括客户预约、服务管理、员工调度等。文章通过实际案例和代码演示，帮助读者掌握Java Spring Boot和Vue.js等现代Web开发技术，为计算机专业学生和开发者提供了一个实践性强、易于上手的开发教程。
小程序页面跳转传url参数被截取问题
Xiang_Gong_Ya_的博客
08-30 296
{${${
SprinBoot+Vue家政公司服务平台的设计与实现
赵广陆
08-29 725
目录 1 项目介绍 2 项目截图 3 核心代码 3.1 Controller 3.2 Service 3.3 Dao 3.4 application.yml 3.5 SpringbootApplication 3.5 Vue 4 数据库表设计 5 文档参考 6 计算机毕设选题推荐 7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和毕业答疑辅导，对于专业性数据证明一切！
前端面试必备：Vue.js面试题深度解析
"本文主要探讨了前端开发中的高频面试题，包括对SPA（单页应用）的深入理解及其优缺点，以及SPA的实现方式。同时，提到了Vue.js中的SSR（服务端渲染）概念及其优缺点。" 前端大厂在面试过程中经常考察应聘者对SPA...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值