前端程序员面试宝典 摘要

第 8 章 移动端

在移动端，单击穿透是什么？

单击穿透现象有 3 种。

单击穿透问题：单机蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click 事件。
页面羊击穿透问题：如果按钮下面恰好是一个有 href 属性的 a 标签，那么页面 就会发生跳转。
跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转至新页，然后发现新页面中对应位置元素的 click 事件被触发了。

有 4 种解决方案。
（1）只用 touch。
这是最简单的解决方案，完美解决单击穿透，把页面内所有 click 都换成 touch 事件（touchstart,touchend,tap）。
（2）只用 click
因为单击会带来 300ms 的延迟，所以网页内任何一个自定义交互都将增加 300ms 的延迟。
（3）轻触（tap）后延迟 350ms 再隐藏蒙层。
改动最小，缺点是隐藏蒙层变慢了，350ms 还是能感觉到慢的。
（4）添加 pointer-events:none 样式
这比较麻烦且有缺陷，不建议使用，蒙层隐藏后，给按钮下面的元素添上 pointer-events:none 样式，让 click 穿过去，350ms 后去掉这个样式。恢复响应的缺陷是蒙层消失后的 350ms 内，用户单击按钮下面的元素没反应，如果用户单击速度很快，一定会发现。

如何实现自适应布局？

通过以下几种方式实现。
（1）可以使用媒体查询做响应式页面
（2）用 Boostrap 的栅格系统。
（3）使用弹性盒模型

在移动端（ Android 、 iOS ）怎么做好用户体验？

从以下几方面做好用户体验。
（1）清晰的视觉纵线。
（2）信息的分组
（3）极致的减法
（4）利用选择代替输入
（5）标签及文字的排布方式。
（6）依靠明文确认密码。
（7）合理地利用键盘。

如何解决 And「oid 浏览器查看背景图片模糊的问题？

这个问题是 devicePixelRatio 的不同导致的，因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，所以苹果系统当初就把 iPhone 4 的 960×640 像素的分辨率在网页里更改为 480 x 320 像素，这样 devicePixelRatio = 2 而 Android 的 devicePixe!Ratio 比较乱，值有 1.5、2 和 3。为了在手机里更为清晰地显示图片，必须使用 2 倍宽高的背景图末代替 img 标签（一般情况下都使用 2 倍）。 例如一个 div 的宽高是 100px × 100px，背景图必须是 200px × 200px，然后设置 backgroundsize:contain 样式，显示出来的图片就比较清晰了。

如何解决长时间按住页面出现闪退的问题？

通过以下代码设直样式。

element {
  -webkit-touch-callout: none;
}

如何解决 iPhone 及 iPad 下输入框的默认内阴影问题？

通过以下代码设置样式。

element {
  -moz-appearance: none;
  -webkit-appearance: none;
}

在 iOS 和 Android 下，如何实现触摸元素时出现半透明灰色遮罩？

通过以下代码设置样式

element {
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}

在旋转屏幕时，如何解决字体大小自动调整的问题？

通过以下代码设置样式

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6 {
  -webkit-text-size-adjust: 100%;
}

如何解决 Android 手机圆角失效问题？

通过 background-clip: padding-box 为 失效的元素设直样式。

如何解决 iOS 中 input 键盘事件 keyup 失效问题？

通过以下代码设置样式

<input type="text" id="testInput" />
<script type="text/javascript">
  document.getElementById("testInput").addEventListener("input", function(e) {
    var value = e.target.value;
  });
</script>

如何解决 iOS 设置中 input 按钮样式会被默认样式覆盖的问题？

设置默认样式为 none。解决方式如下。

input,textarea{
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

如何解决通过 transform 进行 skew 变形、rotate 旋转会出现锯齿现象 的问题？

通过以下代码设置样式

第 29 章 公司常问问题

1、你觉得前端工程师的价值体现在哪些方面？

体现在以下方面。
（1）为优化用户体验提供技术支持（交互部分）。
（2）为浏览器之间的兼容性提供支持。
（3）为提高用户浏览速度（浏览器性能）提供支持。
（4）为跨平台（多端）、其他基于 webkit 或其他渲染引擎的应用（应用嵌入，如微信小程序）提供支持。
（5）为展示数据提供支持（大数据可视化）。

2、你是如何认识前端界面工程师这个职位的？

前端工程师是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
前端工作可以实现界面交互，提升用户体验。
有了 Node.js ，前端可以实现服务端的一些工作。
前端工程师的职责就是能让产品从 90 分提升到 100 分，甚至更好。
前端工程师的岗位职责包括以下几方面。
（1）参与项目开发，快速，高质量地完成实现效果图，精确到 1px。
（2）与团队成员，UI 设计人员、产品经理沟通。
（3）做好页面结构，页面重构，提升用户体验。
（4）处理 hack、兼容性问题，写出优美的代码。
（5）针对服务器的优化，拥抱最新的前端技术。

3、说说你对前端架构师的理解

前端架构师的职责如下。
（1）负责前端团队的管理以及与其他团队的协调工作，提升团队成员能力和工作效率。
（2）带领团队完成研发工具及平台前端部分的设计、研发和维护。
（3）带领团队进行前端领域前沿技术的研究及新技术的调研，保证团队的技术领先。
（4）负责前端开发规范的指定、功能的模块设计、公共组件的搭建等工作，并组织培训。

4、什么样的前端代码是好的？

好的代码应具备高复用率、低耦合度、易维护性、易扩展性等特点。

5、平时如何管理你的项目？

主要从以下方面进行管理。
（1）前端团队必须确定好全局样式（globe.css）、编码模式（utf-8）等。
（2）编写习惯必须统一（例如 JavaScript 中都采用面向对象式的写法，css 中单样式都写成一行）。
（3）标注样式编写人，各模块都及时标注（标注关键样式调用的地方）。
（4）标注页面（例如页面、模块的开始和结束）。
（5）把 CSS、HTML（模板）和 JavaScript 代码分文件夹进行存放，命名要表达出文件模块的功能，并要统一（如 header.css）。
（6）图片采用优化后的图片，并放在 images 文件夹内。

6、介绍一下最能体现你能力的项目？

我做过一个外卖项目，这个项目是使用 Vue.js 开发的，使用 vue-cli 和 webpack 自动化构建工具构建的项目，通过组件化开发，实现对组件的高度复用。运用 VueX 管理状态，使各个组件间能够共享数据。使用 Vue.js 自带的 transition 动画组件实现过渡动画效果，在项目中运用路由对各组件按需加载，从而提高效率。自定义了很多可以复用到别的项目中的基础组件，例如 modal 提示信息组件、loading 组件、星级评分组件、滚动列表组件、使用 vue-lazyload 实现图片懒加载，使用 vue-scoller 实现下拉刷新、上拉加载更多，使用 axios 实现异步请求，加载数据等。

7、你的项目与同类项目相比有哪些亮点？

同类项的项目是使用传统方式开发的。我们这个项目是使用 Vue.js 开发的。与传统的开发方式相比，Vue.js 开发的优势还是很明显的。因为在传统的开发方式中，DOM 节点操作比较多，对节点进行操作会导致浏览器对页面的重绘。但是 Vue.js 是数据驱动的 MVVM 框架，并且在 Vue.js2.0 中运行了虚拟 DOM 的技术，最大限度地减少了浏览器的重绘，所以运行效率很高。 Vue.js 是基于组件化开发的，代码的可维护性更高，而且在项目中我们运用 VueX 管理状态，使数据交互的实现变得更加简单。另外，在路由中，使用按需加载的方式加载组件，使组件的访问效率更高。

8、你们团队使用的后端语言是什么？如何与后端协同工作？

后端语言是 PHP。我跟他们配合方式一般是，我这边规定各个接口的 JSON 数据结构，后端工程师提供数据接口，他们会给我一个数据接口的文档。拿到文档之后，对于各个数据接口，我首先会用 postman 测试一下，看它们是否正常工作。如果没问题，就用这些数据开发项目。

9、你们这个外卖项目是几个人开发的？是如何分工协作的？在开发过程中 遇到的问题是如何解决的？

是两个人开发的。我主要负责开发首页和购物两个模块。首页主要就是通过接口获取数据，渲染页面。涉及的有几个主要的内容：轮播放果、 搜索功能、滚动加载更多等。 轮播图我用的是 swipper 插件，下拉加载更多使用 vue-scroller 实现，并且运用 vue-lazyload 实现了图片懒加载。搜索模块在后台提供了一个搜索接口，有一个参数是用户输入的关键字 ，通过发送这个请求接口，获取后台数据，并渲染到页面中 。
购物页面有几个地方不太好设计。比如选择商品时，右侧商品列表和左侧商品类目的一个联动效果。单击左侧 ，右侧商品滚动到对应位直，右侧商品滚动，左边类目对应 进行高亮显示。我当时是使用 Better-scroll 实现的。里面有接口可以监听滚动的距离， 然后通过计算距离，从而计算出索引值，将对应索引值的类目高亮显示。
还有一个难点是购物车组件。 购物车组件涉及多组件的通信，开始我是使用组件间的传参方式实现的。父子组件向子组件传递的参数通过 props 接收， 子组件向父组件传递的参 数通过 $emit 进行事件传递，父组件监听事件。 这种方式代码可读性差，不利于后期维护。 后来使用 VueX 管理状态，把需要在多个组件通用的数据放入 store 中，然后通过 muatation 进行统一管理。

10、你感觉你在项目开发中的贡献有多大？

这个项目是我们整个公司同仁共同努力的结果。在项目上线的过程中，产品运营团队、设计团队，以及前后端开发团队都付出了巨大的努力，我只是有幸成为团队的 一员而已。
在开发的过程中，我有意识地让自己承担更多工作，比如我会积极参与那些有挑战的、较为复杂的模块来做。 一方面可以为公司贡献更多价值，另一方面也更有利于自己的成长。

11、你做前端开发多长时间了？

两年了，现在前端技术发展非常快，需要快速学习、持续学习的能力。虽然很累，但是我非常喜欢这个工作，所以在工作之余我一直坚持自学新技术，Vue、Angualr 都是我在工作后业余时间自学的，后来把它们运用到了项目中。

12、你是学什么专业的？都学习了哪些课程？

我是计算机专业的。 主要学习过高数、线性代数、离散数学、 C 语言、数据结构、SQL Server 数据库等。
大学里学的内容比较陈旧，离工作的需求有距离，所以我自学了前端知识，然后进入这个行业，一直做到现在。

13、前端是在大学里学的吗？

是在大学期间自学的，开始看一些视频资料，后来查文档，看 GitHub 上的一些开源项目。如果在开发中遇到问题，通过 Google 或百度搜索寻找解决问题的方案等。

14、你一直在做前端开发吗？

大学毕业后就一直做前端开发。开始使用 HTML、css 、jQuery 做 PC 端页面，做一些动画效果，现在通常用 MVVM 框架做项目。

15、说说你一天的工作内容。

每天 9 点左右到公司，领导会分配任务，然后与 PM （产品经理）确认需求，与 UI（用户界面）设计师确定一些标注不详的样式。明确了之后 ，自己选择一个分支开始开发，做完了让领导审查代码。他觉得合格了就合并，如果不合格，他会给我指出 Bug, 然后我再修改。

16、谈谈你的期望月薪

首先，我上一份工作的月薪是 1.2 万元，并且做了一年多了，这一年多我没有在团队掉队，说明我每个月的工作最起码是值 1.2 万元的。但是，在这一年中我的技术又有了很大的进步，比如学会了使用 WebPack 前端自动化构建工具，使用 Vue、VueX 等 MVVM 框架做项目。
而且我的自主学习能力很强，对新技术有浓厚的兴趣，喜欢钻研新技术，这保证了我在未来的增值能力。所以我的期望月薪是 1.2 万元，因为我的学习能力保证了我的技术会持续增值，会为公司创造更大的价值。

17、你的项目用了 哪些插件？

使用了以下插件。
使用 swipper 制作轮播图。
使用 better-scroll 制作滚动列表。
使用 vue-scroller 实现下拉加载更多。
使用 vue-lazyload 实现图片懒加载。
使用 vue-router 实现路由跳转。
使用 axios 请求后端数据接口。

18、工作中，你是如何与 RD （后端 ）工程师对接的？

我们的后端工程师还是比较照顾我，基本上我需要什么样的数据接口，他就在接口中返回我需要的数据结构，所以，我会把各部分数据结构的要求告诉后端工程师。后端工程师写好接口后会给我一个接口文档，然后我会使用 postman 测一下 。如果没问题，就着手开发；如果有问题，再把问题反馈给他，让他修改。

19、你们公司的前端与后端是完全分离吗？

是完全分离的，在不同的分支上开发。

20、你了解后端的语言吗？

使用 express 和 MySQL 实现过注册登录功能，并且写了一个博客系统。对于基本的增、删 、 改、 查操作有一定经验。并且写过简单的数据接口，对前后端交王有新的认识

21、说说你们团队的项目开发流程。

我们公司是产品经理和运营确定需求，然后 PM （产品经理）会给出原型图 。 之后用户页面设计师会出效果图。在这个过程中经理会根据要求确定技术选型。效果图出来之后，我们开发人员介入开始开发。经理会根据每个人的能力分配工作量。我开发的时候会自己找一个分支，然后自己开发，自己模拟数据。前端页面效果做完之后，会把数据结构告诉 RD （后端）工程师 ，让他们做数据接口。 他们做好之后会给我一个接口文档，我拿到接口文档后，会先用 postman 测试一下，如果通过了，就把测试的数据都换成后台接口的真实数据。我自己测试一下功能，如果没问题，就让我们经理审核代码，审核通过了就会合并分支程序。

22、如果通过这次面试 ，我们单位录用了你，但工作一段时间后发现你根本不适合这个职位，你怎么办？

如果一段时间后发现工作不适合我，我会有两种选择。如果我确实热爱这个职业，那我就要不断学习，虚心向领导和同事学习业务知识与处事经验，了解这个职业的精神内涵和职业要求，力争缩小差距。如果我觉得这个职业可有可无，那还是趁早换个职业，去发现适合自己并且热爱的职业，对自己的发展前途也会大，对单位和个人都有好处。

23、在完成某项工作时，你认为领导要求的方式不是最好的，自己还有更好的方法，你应该怎么做？

原则上，我会尊重和服从领导的工作安排，同时私底下找机会以请教的口吻，婉转地表达自己的想法，看看领导是否能改变想法。如果领导没有采纳我的建议，我也同样会按领导的要求认真地完成这项工作。还有一种情况，假如领导要求的方式违背原则，我会坚决提出反对意见，如领导仍固执己见，我会毫不犹豫地再向上级领导反映。

24、如果你的工作出现失误，给本公司造成经济损失，你认为该怎么办？

首先，我本意是为公司努力工作，如果造成经济损失，我认为首要的问题是想方设法去弥补或挽回经济损失。 如果我无能力负责，希望单位帮助解决。其次，分清责任，各负其责。如果是我的责任，我甘愿受罚；如果是我负责的一个团队中别人的失误，自己也不能幸灾乐祸，作为一个团队，需要互相提携、共同完成工作，安慰同事并且帮助同事查找原因、总结经验。最后，总结经验教训，一个人的一生不可能不犯错误，重要的是，能从自己的或者别人的错误中吸取经验教训，并在今后的工作中避免发生同类的错误。检讨自己的工作方法、 分析问题的深度和力度是否不够，导致出现了本可以避免的错误。

25、如果你做的一项工作受到上级领导的表扬，但你的主管领导说是他做的，你该怎样处理？

我首先不会找那位上级领导说明这件事，我会主动找我的主管领导来沟通，因为沟通是解决人际关系的最好办法，但结果会有两种。如果我的主管领导认识到自己的错误，我想我会视具体情况决定是否原谅他。若他不知悔改，还变本加厉，那我会毫不犹豫地找我的上级领导反映此事，因为他这样做会造成负面影响，对今后的工作不利。

26、谈谈你对跳槽的看法。

正常的 “跳槽”能促进人才合理流动，应该支持。 然而，频繁的跳槽对单位和个人双方都不利，应该反对。

27、工作中如果你难以和同事、上司相处，你该怎么办？

首先，我会服从领导的指挥，配合同事的工作。然后，我会从自身找原因，仔细分析是不是自己的工作做得不好，让领导不满意，让同事看不惯。还要看看是不是为人处世方面做得不好，如果是这样的话我会努力改正。其次，如果我找不到原因，我会找机会跟他们沟通，请他们指出我的不足，有问题就及时改正。最后，作为优秀的员工，应该时刻以大局为重，即使在一段时间内，领导和同事对我不理解，我也会做好本职工作，虚心向他们学习，我相信， 他们会看见我在努力，总有一天会对我微笑的。

28、假设你在某单位工作，成绩比较突出，得到领导的肯定。但同时你发现同事们越来越孤立你，你如何看待这个问题？你准备怎么办？

成绩比较突出，得到领导的肯定是件好事情，以后我会更加努力。关于这个问题，首先，我会检讨一下自己是不是对工作的热心度超过了同事间交往的热心，以后加强同事间的交往。然后，工作中，切勿伤害别人的自尊心。 最后，不在领导前拨弄是非 。

29、最能概括你自己的 3 个词是什么？

适应能力强，有责任心，做事有始终。

30、你通常如何面对别人的批评。

沉默是金，不必说什么，否则情况更糟，不过我会接受建设性的批评。我会等对方冷静下来再讨论。

31、怎样对待自己的失败？

我们生来都不是十全十美的，我相信我有第二次机会改正我的错误。

32、什么会让你有成就感？

为贵公司竭力效劳，尽我所能，出色地完成一个项目。

33、眼下你生活中最重要的是什么？

对我来说，能在这个领域找到工作是最重要的，能在贵公司任职对我说最重要。

34、假如你晚上要送一个出国的同学去机场，可单位临时有事非你办不可，你怎么办？

我觉得工作是第一位的，但朋友间的情谊也是不能偏庭的，这个问题我觉得要按照当时具体的情况来决定。如果我的朋友要搭乘晚上 ll 点钟的飞机，而我加班到 8 点钟就能够完成当天工作，那就最理想了，干完工作去机场，皆大欢喜。如果工作不是很紧急，加班仅仅是为了明天上班的时候能把报告文到办公室，那完全可以跟领导打声招呼，先去机场然后回来加班，晚点下班。如果工作很紧急，两者不可能兼顾的情况下，我觉得可以有两种选择。
如果不是全单位都加班，可以找其他同事来接替自己的工作，自己去机场。
如果找不到合适的人选，那只好忠义不能两全了，打电话向朋友解释一下 ，相信他会理解的。

35、你觉得压力最大的时候是什么时候？

我觉得压力最大的时候是刚刚接受一个任务或者刚刚给自己制订了一个大目标的时候。 之所以这样，是因为我的一个习惯，任务开始的时候，我会逼着自己制订一个完美的计划，并且尽可能把各项工作都提前做好。比方说，当参加一个比赛的时候，我会在刚一确定参加比赛的那个阶段拼命准备，找资料，提前很长时间就模拟练习。这样，越到最后我反而越放松。