前端面试经验分享

该公司应该是西安比较普遍存在的一类小作坊, 目测公司应该有十几个人. 进去后先是在前台登记了一下, 接下来就是漫长的等待.从登记完,到见到面试官, 足足等了有40分钟. 期间我也有问过前台, 在大概等了有30分钟左右的时候, 她只是敷衍的说, 再等一会, 面试官马上就来.首先是人事面试, 一个三十五到四十左右的女士, 走进来先是冷冷的说了句, 让你久等了. 接下来我做自我介绍, 介绍完, 直接问能接受的薪资底线, 以及现在是否是离职状态.当我回答完后, 直接来了句, 我们公司可能等不了你, 我们很着急.  当然原因我也知道, 我的薪资底线不在他们的范围内, 接下来又问我一个人能不能做一个类似淘宝的网站, 能不能做App.聊着聊着聊到了一些技术相关的东西, 她显然聊不下去了. 接着她说, 技术相关的东西让技术和我聊.接下来的所谓技术面试, 完全在我的意料之中.一上来又是自我介绍,完了在介绍下之前的项目.以下是关于所谓技术面试环节问题整理,(期间我在回答技术问题的时候, 可能有些点回答的不是面试官想要的结果, 面试官只是冷冷的一笑).

 

面试官:商城的购物车是怎么做的?

我: 商城购物车一般会写在本地存储,比如cookie或者localStorage中,会采用数组格式的字符串来存储,主要会存储商品id, 商品名称, 商品价格, 商品数量等信息(当然商品价格等敏感信息后期还是以后端为准, 此处存储只是为了方便在页面展示), 如果过要考虑兼容问题, 建议存储在cookie里(因为localStorage低版本的浏览器不支持).如果不考兼容问题, 使用localStorage性能会更好.购物车可以在用户未登录的状态就可以添加, 也可以在用户登录以后再添加, 这个完全取决于具体业务场景.

 

面试官:如何避免用户重复提交表单?

我: 可以在用户点击一次按钮以后, 对按钮做一个禁用点击的处理,当然处理方式有很多中,可以在用户第一次点击提交按钮的时候,在按钮上添加一个特定的类名或者属性,

后期在点击事件的处理函数中通过判断按钮是否拥有某个类名或者属性再决定是够要执行事件处理函数的逻辑.还要在提交失败以后,重新取消按钮的禁用状态,因为用户需要通过重新点击按钮来提交数据.

 

面试官:商品分类是怎么做的?

我: (当我听到这个问题的时候, 有点蒙, 不知道面试官想问什么?在我的追问下, 我明白了他的意思, 他是想问商品分类是通过数据接口获取的还是在页面写死的, 当时我的心中在想, 商城的分类信息竟然还可以写死)商品分类是通过后台数据接口动态获取的, 并且做了三级分类的处理, 展示效果和主流的商城并无异同.

 

面试官:商品详情是怎么做的?

我:  (当我听到这个问题的时候, 我再一次蒙了, 不知道面试官这次又想问什么?在我的追问下, 我再次明白了他的意思, 他是想问商品的数据是怎么获取的)首先商品详情应该是从商品列表页跳转过来的, 在跳转的时候, 在url中携带了一个商品的唯一标识信息(商品id或者商品编号), 在商品详情页获取该唯一标识后,通过请求后端提供的商品详情数据接口获取商品数据,然后渲染商品详情页面.

 

面试官:有没有一个控制商品上线或下线的状态?

我: 一般正常的商城网站都会有这么一个功能, 动态控制商品的上架(可购买)和下架(不可购买)状态. 实现原理也很简单, 只需在商品数据表中添加一个状态管理字段,

当该状态资管的值为某一个特定值的时候, 表示商品是下架状态. 后期通过后端语言查询数据库的时候, 将该状态控制字段作为查询条件即可, 最简单的状态就是只查询上架的商品.另外一种方案就是, 后端数据接口还是返回所有商品的列表信息, 只不过需要返回每一个商品的上架状态字段, 让前端根据这个状态字段的值控制用户是否可以下单购买.

 

面试官:如何设置一个元素在垂直方向居中?

我: 首先不考虑代码的灵活性, 可以使用margin外边距或者padding内边距来实现元素在垂直方向居中显示.具体可以给父元素设置一个垂直方向的padding内边距; 也可以给需要垂直居中的子元素设置垂直方向的外边距.其次如果这个需要垂直居中的元素是一个单行文本, 则可以使用行高等于标签高度的方式来实现.也可以使用css3中的flex布局, 使用align-items:center设置元素在侧轴(垂直方向)居中对齐.也可以使用绝对定位的方式, 设置元素在相对定位的父元素中垂直对齐.

 

面试官:说说图片懒加载的原理?用过哪些图片懒加载的插件

我: img标签在加载图片的时候, 是通过请求src属性所指向的文件来加载图片的, 那如果img标签本身没有src属性的话, 那么img标签在渲染的时候, 就不会加载图片.所以图片懒加载的原理就是将img标签的src属性给暂时先改成一个自定义的属性, 这样页面已加载就会不去加载图片, 当img标签所在区域进入屏幕可是区域后, 从存放图片路径的自定义属性中获取图片地址,并动态的设置给对应的img标签, 这样浏览器就会自动帮助我们去请求对应的图片资源, 也就实现了所谓的图片懒加载.图片懒加载的插件有很多, 大部分是给予jquery的, 比如jquery.lazyload. 当然vue的中也有实现了图片懒加载的插件, 比如vue-lazyload, vue的组件库中也有图片懒加载的组件.

 

面试官: vue中组件之间如何传参.

我: 父组件向子组件传值:

首先在字组件的的调用标签上通过v-bind动态绑定一个属性, 这个属性的值是父组件data中声明的一个变量, 接着在子组件的定义部分声明一个props属性, props的值是一个数组, 将子组件调用标签上的那个自定义属性的名字添加到props数组中.这样在子组件的模板部分通过插值表达式的方式就可以输出在props中定义过的属性, 这些属性的值, 默认来自父组件, 所以也就相当于完成了父组件向子组件传值的过程.

 

子组件向父组件传值:

在组件的调用标签上注册一个自定义事件, 事件处理函数必须在父组件的methods属性中提前声明.接着在子组件的模板部分绑定一个点击事件,事件处理函数在子组件的methods中提前声明, 在事件处理函数中通过this.$emit('事件名','要传递的数据')触发子组件调用标签上绑定的自定义事件.那么在点击子组件中绑定点击事件的标签时, 就会自动触发子组件调用标签上的自定义事件, 在父组件的自动以事件处理函数中可以通过形参接收子组件传递的数据.

 

面试官: vue中如何封装一个组件

我: 首先定义一个后缀名为.vue的文件.文件内部还是三部分组成, template模板部分, script逻辑部分, style样式部分. 这三部分是组件的核心部分, 组件需要哪些结构, 在模板部分书写, 需要什么样的外观样式, 通过在style部分书写, 有哪些行为在script部分书写.一定要在script部分使用es6模块化的导出语法(export default{}), 进行导出. 然后在需要调用组件的地方使用es6模块化导入语法导入即可, 组件需要哪些参数, 直接在调用的部分进行传递即可.主要逻辑还是在组件中完成.

 

面试官: vue在组件中声明data的时候为什么要通过函数的方式return一个对象?

我: 因为对象是一种引用数据类型, 如果直接把data的值指定成一个对象的话, 后期组件在不同的地方被多次调用, 不同的调用之间会产生影响.因为在操作的data对象在内存中只有一份.而通过函数的方式return一个对象, 可以保证在每次调用组件的时候, 都会在内存中创建一个新的对象, 这样组件的每一次调用, 不会相互产生影响, 不会引起数据的混乱.

 

面试官: 什么是mvvm?

我: mvvm是一种设计思想, vue就是基于这种思想来设计. mvvm由三部分组成, m-w-vm.其中m是model的首字母, 数据模型层的意思, 主要进行一些数据初始化;v是view的首字母, 视图层, 主要进行界面展示, 可以认为是html+css的部分;vm是view-model, 视图模型层, 起到一个连接数据层和视图层的作用, 将数据层的数据交给视图层展示, 将视图层对行为交给数据层处理.

 

面试官: 说说vue的生命周期?

我: vue的生命周期大体分为三个阶段:创建, 运行, 销毁

创建阶段: beforeCreate, created, beforeMount, mounted; 特点:只执行一次

运行阶段:beforeUpdate, updated; 特点: 执行多次

销毁阶段:beforeDestroy,destroyed;  特点: 只执行一次

最常用的就是created和mounted,created是进行一些数据的初始化, 可以在此处请求一些数据接口, 获取默认需要展示的数据, 此时还没有DOM的概念; 执行mounted的时候, 已经完成了对页面的渲染, 可以对DOM进行操作了.

执行顺序也是自上而下, 依次执行.