1. web前端逻辑思维
《简单逻辑学》一本简单 有点枯燥 但认可度非常高的书 或许对你有帮助~
2. 你遇到过哪些比较有水准的前端面试题
我原来面试工作时候,面试官出了一个这样的题,题目是:我儿子叫你的儿子叫爸爸。当时我对于这个问题思考了很久。这个题目答案:是男问女的就是公公,女问女就是婆婆,男问男就是爸爸,女问男就是妈妈。这个题很好的考验了面试者的逻辑思考能力,还有看待事物的全面性,非常不错。
3. 逻辑不好适合学习web前端吗
其实没有必要担心逻辑的问题,学习web前端并没有想象中那么难。
Web前端在开发领域来说,是属于门槛比较低的,打个比方,我们的服务器语言的学习是先慢后快,而Web端相反,先快后慢,也就是说,入门快,切入快,但后期要成为大佬则需要不断的积累。
如果实在是担心逻辑的问题,在学习web前端的过程中也是可以锻炼的。比如,常见的逻辑思维能力的提高方法有:
通过思维导图的方式来养成结构化的思维:
在构思程序业务流程或者准备做某件事的时候,养成习惯做思维导图,逐渐养成结构化的思维。无论是用笔直接在本子上画出来,还是使用电脑的思维导图来列举,都是一样的。当你把需要做的事情都列举出来,慢慢清晰流程,逻辑思维就逐渐有了!
通过平时练习,逼迫自己学会逻辑表述:除了平时写代码来练习业务逻辑思维之外,还可以利用逻辑题目练习自己的逻辑思维,通过分析问题,并学会回答表述,把逻辑思维能自然的表现出来。
4. 求web前端开发笔试题
腾讯WEB前端开发三轮面试经历及面试题
【一面】~=110分钟 2013/04/24 11:20 星期三
进门静坐30分钟做题。
填空题+大题+问答题
>>填空题
何时接触电脑 何时接触前端
运算符 字符串处理 延时 display position XMLHttpRequest 正则
Jquery绑定事件 cookie
>>大题
BOM浏览器信息
浏览器兼容性举例
闭包作用与举例
新闻ul列表,插入3个,获取index
全文单词首字母大写
ajax过程
>>逻辑题
任何时间分针和时针夹角
文章单词(字母)频率出现最高
30分钟等到车概率是70%,那10分钟呢?
一个班学舞蹈的有75%,学唱歌的有85%,问同时学习舞蹈和唱歌的最多多少,最少多少?
两个很大数的加法运算
>>我的提问
为什么不问我框架
你觉得我哪些方面还有欠缺,觉得我如何
如果有望进入二面,什么时候可以得到通知
>>完了之后一起下楼时
我说其他几家公司的问题和腾讯的有比较大的区别,
区别是XXXXXX
然后他问我家在哪里
然后说深圳还是比较适合我
我说但愿还能见到你
他笑了笑
【二面】~=40分钟 2013/04/25 14:00 星期四
面试时间是两点钟,两点过几分进入了面试官所在的包间。
进去之前楼下签到的hr要我把一摞草稿纸带到621房间的面试官,进门给他之后,他说那把大椅子是坏的,
要我往后坐一点(防止向前倾倒)。
开始的时候他没怎么说话,埋头看着我的简历,于是我主动开始扯了几句关于自己的介绍。也不知他听到没
有,等我说完,马上又说:好吧,你先自我介绍下。(一脸黑线...)
期间问了我为什么不打算考研,为什么选择前端,我做的最自豪的事情是什么。
叽哩吧啦一阵子后,他要我说说我的人生规划和职业规划(颇为蛋疼,这些问题不是应该HR面才会问的么
),我顺着他的来,也比较xx的说了一番。
反向代理
输入网址到出现页面的过程(IP解析,DNS解析等)
页面流量
堆栈
接着,问了我-1在计算机中怎么表示,如何判断数组A是否为数组B的子集。
然后是一个概率问题,假设长江以北有80W人,长江以南有20W人,A向B打电话算一个电话,如果打了
10W个电话,那么长江以北打向长江以南的电话有多少个?
没问太多问题,都是些基础的,最后他问我有什么问题。
>>我问了问
为什么不问我前端的问题
如果通过二面,什么时候可以给我回复
对我有什么学习上的建议
面试官留言:“一把刀有刀锋和刀背,刀锋要磨锐利,但是刀背的锻炼也要加强。”
【HR面】~=30分钟 2013/04/27 20:00 星期六
进去先看上几位面试官对我的评价,安静时刻我跟她扯淡了几句,缓和了下尴尬的气氛。
然后她瞄了瞄我的简历,接着就问我考不考研,很明显我的答案是不。然后她又问为什么~
接着让我说说自己最满意的一件事和最不满意的一件事,自己最大的缺点和最大的优点
扯了半天之后(此处略去20分钟扯淡),又开始看我的简历,问了我项目中遇到哪些困难,我说了一个还未
解决的bug,她反问为什么不解决,然后叽哩吧啦了一阵子。
最后问我有没有什么问题。按惯例,问了问最早什么时候给通知,然后问了问期间如果有不明白问题可以通过
什么方式联系她之类的。
整个过程还算顺利。
HR告诉我五一之后可以查询录取状态,求人品吧~
顺便把在搜狐和网易的面试笔试经历也说说吧~
>>搜狐
搜狐的太久了,记不太清楚了
那次只为攒经验,是俺平生第一次参加公司面试。不过收获还是有的~
时间太久了,也记不清了,没有提交笔试题,但是还是要我去面试了。
问他有几轮面试,告诉我因时间匆忙,只给一轮技术面,如果满意直接HR。
大概问题记不太清。
虽然感觉答的还不错,但是最后还是被刷了。
【技术面】~=60分钟
-问了下我在团队学了些什么。
-然后就是很多“你是怎么理解XX”。。
-XX中有 闭包,原型链, 框架结构等
>>网易
今天4.27,好像是3.26参加的面试,时间太久,也记得不是很清楚了。
我没有把任何面试官当做正经的面试官,男的就是我的学长,女的就是我的学姐,仅此而已,所以每次交流都是平和的心态。
学长们(每次面我的都是个男的)时不时露出笑意,现场气氛没有那么紧张。
【一面】 ~=30分钟
闭包
IE6趋势
框架
【二面】 ~=90分钟
框架比较 jQuery prototype YUI
框架特点
css兼容性 IE6 bug
seaJS AMD CMD kissy
JS原型链 闭包
JS基础细节
不让谈网络框架
【HR面】~=25分钟
自我介绍
身边人的评价
最不满意的一件事情
规划
为什么不想考研
有什么困难
薪资待遇
何时通知
5. 去面试前端开发时。遇到一个面试题,如图,问,当鼠标移入ul时,如何让li不触发事件
可以判断event对象中的target属性的nodeName是否为UL或者是其他逻辑判断,再做相应处理,如果DOM结构并不是ul嵌套二级的ul的吧,那可以在一级菜单ul上监听mouseleave事件,这个事件子元素并不触发。如果还不行的话,建议贴一下DOM结构
6. 前端面试官常问的问题有哪些
1、重绘和重排的关系:
重绘不会引起重排,但重排一定会引起重绘,一个元素的重排通常会带来一系列的反应,甚至触发整个文档的重排和重绘,性能代价是高昂的。
2、重绘的概念:
重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。
但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多花两倍时间,这就是我们尽量避免使用table布局页面的原因之一。
3、触发重排的情况:
页面渲染初始化时;浏览器窗口改变尺寸;元素尺寸改变时;元素位置改变时;元素内容改变时;添加或删除可见的DOM元素时。
4、rex的缺点:
(1)一个组件所需要的数据,必须甶父组件传过来,而不能像flux中直接从store取。
(2)当一个组件相关数据更新吋,即使父组件不需要用到这个组件,父组件还是会重新render,可能会有效率影响,或者需要写复杂的shouldComponentUpdate进行判断。
5、对MVC和MVVM的理解:
(1)mvc:View传送指令到Controller Controller完成业务逻辑后,要求Model改变状态Model将新的数据发送到View,用户得到反馈所有通信都是单向的。Angular它采用双向绑定(data-binding):View的变动,自动反映在ViewModel,反之亦然。组成部分Model、View、ViewModel
(2)View:UI界面ViewModel:它是View的抽象,负责View与Model之间信息转换,将View的Command传送到Model;Model:数据访问层。
7. 前端面试题目难吗 如何轻松面对前端面试
从以下五个方面做,可以轻松面对前端面试:
一、基本知识
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
盒模型——外边距、内边距和边框之间的关系,IE8以下版本的浏览器中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。
二、少量提问
现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮,你可以单击它来刷新价格,但不会重新加载页面。请你描述一下实现这个功能的过程,假设服务器会负责准备好正确的股票价格数据。
这个问题牵扯到一组我想要考察的基本知识点:DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式,或者 让你在页面中显示其他信息,就可以把更多的知识点包括进来。对于经验比较丰富应聘者,我也可以自如地扩展要考察的知识范围,最简单像JOSN与XML的区别、安全问题、容量问题等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码,你就当页面中没有包含任何库。你说你对哪个库了解多少多少,但我不能把关于库的知识作为评判能力的因素,因为库是会随时间变化的。
三、解决问题
做为一名前端工程师,最值得高兴的事莫过于解决同一个问题会有很多种不同的方法,而你要做的就是找出最合适的方法来。我在提问的时候,经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说,假设你的这个方法由于种种原因被否决了,那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先,可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认,某些人确实有过目不忘的天赋,听他们在那里滔滔不绝地讲,你会觉得他们什么都明白。可是,只要一跟这些人谈到怎么查找方案无效的原因,以及能否拿出一个新方案来,他们往往就傻眼了。这时候,如果我听到“我不明白这个方案为什么不够 好”之类的反问,心里立刻就明白我的问题已经超出了他们的能力范围,而他们只是想拿自己死记硬背的结论来蒙混过关。
其次,可以测试出他们已经掌握的(还是那句话,“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解,想出解决同一问题的不同方案根本没有那么难。
注意:所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题,就能够考出某人解决Web技术问题的能力。在我看来,这无异于让素描大师画肖像,没有意义,也得不到任何有价值的信息。
四、有激情
要成为一名优秀的前端工程师,最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的,因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异,所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习,但想应聘前端工程师的人恐怕还是必须这么做的。
你怎么知道谁对这种工作有没有激情?实际上非常简单。我只问一个简单的问题:“目前你对什么Web技术最感兴趣?”这个问题永远不会过期,而且也几乎不可能出错……除非你答不上来。就眼下来说,我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库,等等。只有 对Web开发充满激情的人,才会坚持不懈地学习新知识、掌握新技能;
五、最后一点
计算机科学或者Web设计方面的知识当然也有用,但那都是基本知识之外的东西。只要基本知识在那儿了,一切就都有了基础,想扩充知识面也不难。可是,如果等到正式上班以后,还得从头学习基本技能,那种难度是不可同日而语的。
8. vue前端面试题有哪些呢
文章中给你列举了部分的面试题,这些都是公司面试常遇到的,还有需要的还可以自己去查阅一下资料
1、active-class是哪个组件的属性?嵌套路由怎么定义?
答:vue-router模块的router-link组件。
2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id
3、vue-router有哪几种导航钩子?
答:三种,一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。第二种:组件内的钩子;第三种:单独路由独享组件
4、scss是什么?安装使用的步骤是?有哪几大特性?
答:预处理css,把css当前函数编写,定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块,在webpack-base.config.js配置文件中加多一个拓展:extenstion,再加多一个模块:mole里面test、loader
4.1、scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
答:css的预编译。
使用步骤:
第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)
第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss
第三步:还是在同一个文件,配置一个mole属性
第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”
有哪几大特性:
1、可以用变量,例如($变量名称=值);
2、可以用混合器,例如()
3、可以嵌套
5、mint-ui是什么?怎么使用?说出至少三个组件使用方法?
答:基于vue的前端组件库。npm安装,然后import样式和js,vue.use(mintUi)全局引入。在单个组件局部引入:import {Toast} from ‘mint-ui’。组件一:Toast(‘登录成功’);组件二:mint-header;组件三:mint-swiper
6、v-model是什么?怎么使用? vue中标签怎么绑定事件?
答:可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog() />
7、axios是什么?怎么使用?描述使用它实现登录功能的流程?
答:请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中
8、axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?
答:跨域,添加用户操作,更新操作。
9、什么是RESTful API?怎么使用?
答:是一个api的标准,无状态请求。请求的路由地址是固定的,如果是tp5则先路由配置中把资源路由配置好。标准有:.post .put .delete
10、vuex是什么?怎么使用?哪种功能场景使用它?
答:vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
11、mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
答:一个model+view+viewModel框架,数据模型model,viewModel连接两个
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷
12、自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
答:全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding
13、说出至少4种vue当中的指令和它的用法?
答:v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定
14、vue-router是什么?它有哪些组件?
答:vue用来写路由一个插件。router-link、router-view
15、导航钩子有哪些?它们有哪些参数?
答:导航钩子有:a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数:有to(去的那个路由)、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)最常用就这几种
16、Vue的双向数据绑定原理是什么?
答:vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
ps:16题答案同样适合”vue data是怎么实现的?”此面试题。
17、请详细说下你对vue生命周期的理解?
答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
18、请说下封装 vue 组件的过程?
答:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。
19、你是怎么认识vuex的?
答:vuex可以理解为一种开发模式或框架。比如PHP有thinkphp,java有spring等。
通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)。
应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。
20、vue-loader是什么?使用它的用途有哪些?
答:解析.vue文件的一个加载器,跟template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等
21、请说出vue.cli项目中src目录每个文件夹和文件的用法?
答:assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件
22、vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
答:第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default {
第二步:在需要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue’
第三步:注入到vue的子组件的components属性上面,components:{smithButton}
第四步:在template视图view中使用,<smith-button> </smith-button>
问题有:smithButton命名,使用的时候则smith-button。
23、聊聊你对Vue.js的template编译的理解?
答:简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)
详情步骤:
首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。
然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)
9. hr如何面试web前端工程师,该问哪些技术问题
近来几个月,一直在努力寻找前端战友,未果,一路的招聘经历下来,心生不少感慨, 一直都很小心翼翼的,怕错失了高人,又更加怕失误把关不够招到不合格的同学进来公司,对公司对项目造成某些影响。
面试前端工程师对我来说是一件非常有意思的事,因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司,之所以在如何招聘到真正有能力的 前端工程师方面会遇到同样的问题,就是因为负责招聘的那些人不知道自己公司需要什么样的人,结果问问题时也问不到点子上。经过这几年在行业里的摸索,我总 结出了自己的一套很有效的面试前端工程的方法。
有的应聘者说我不好对付,但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付,主要是因为我问他们问题时问得太细了。以前我曾专门写过一些 东西,告诉应聘者怎么才能通过我的面试(Surviving an interview with me)以及优秀的前面工程师应该具备什么样的素质(What makes a good front end engineer?),而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题,也不认为出几道逻辑题就能考出人的真实水平。我 唯一的想法就是确定你能否胜任我们要招的这个职位。为此,我需要简单地考察如下几个方面。
基本知识
我们生活在互联网时代,你想知道的任何事情几乎都能在15分钟内找到相关信息。可是,能找到信息并不等于你会使用它。我认为所有前端工程师至少都应 该掌握某些基本的知识,才能有效地完成自己的工作。如果一遇到问题,就停下工作上网四处搜索解决方案,怎么可能保证按期完成工作呢?听听,还有谁在说“我 不知道,但我可以上网搜到。”请这些同学把手举起来,让大家认识一下(immediately raises a flag for me.)。下面我列出一些基本的知识点,这些都是我认为一名前端工程师(无论工作年头长短)在没有任何外来帮助的情况应该知道的。
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
盒模型——外边距、内边距和边框之间的关系,IE 8以下版本的浏览器中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。
重申一下,上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到,但我觉得你至少应该掌握这些,才有可能跟我坐到一间办公室里来。
少量提问
我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平,也很无聊。我在任何一次面试中,通常只问三个大问题,但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤,这样我就可以在每个步骤中穿插着问一些小问题。比如说:
现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮,你可以单击它来刷新价格,但不会重新加载页面。请你描述一下实现这个功能的过程,假设服务器会负责准备好正确的股票价格数据。
这个问题牵扯到一组我想要考察的基本知识点:DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式,或者 让你在页面中显示其他信息,就可以把更多的知识点包括进来。对于经验比较丰富应聘者,我也可以自如地扩展要考察的知识范围,最简单像JOSN与XML的区 别、安全问题、容量问题,等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码,你就当页面中没有包含任何库。你说你对哪个库了解多少多少,但我不能把 关于库的知识作为评判能力的因素,因为库是会随时间变化的。我需要的是真正理解库背后的机制,特别是能够徒手写出一个自己的库的人。
解决问题
做为一名前端工程师,最值得高兴的事莫过于解决同一个问题会有很多种不同的方法,而你要做的就是找出最合适的方法来。我在提问的时候,经常会在应聘 者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说,假设你的这个方法由于种种原因被否决了,那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先,可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认,某些人确实有过目不忘的天赋,听他们在那里滔滔不绝地讲,你会觉得他们什么都 明白。可是,只要一跟这些人谈到怎么查找方案无效的原因,以及能否拿出一个新方案来,他们往往就傻眼了。这时候,如果我听到“我不明白这个方案为什么不够 好”之类的反问,心里立刻就明白我的问题已经超出了他们的能力范围,而他们只是想拿自己死记硬背的结论来蒙混过关。
其次,可以测试出他们已经掌握的(还是那句话,“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解,想出解决同一问题的不同方案根本没有那么难。
对一名前端工程师来说,这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题(说你啦,IE6),应该说是一件很平常的事。一个方案无效就无计可施的人,做不了前端工程师。
考核应聘者解决问题能力的另一层原因,与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后,我就会想着问一个他们知识领域之外的问题。这样 做的目的,就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步,我也准备了一些提示,以防有人会卡壳打艮(在我面前15分钟一言不发,对我 评价这个人毫无帮助)。我真正感兴趣的,是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。
注意:所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题,就能够考出某人解决Web技术问题的能力。在我看来,这无异于让素描大师画肖像(或者让刘翔跟博尔特同场竞技),没有意义,也得不到任何有价值的信息。
有激情
要成为一名优秀的前端工程师,最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的,因此前端工程师必须具备自学能 力。浏览器技术的变化可谓日新月异,所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习,但想应聘前端工程师的人恐 怕还是必须这么做的。
你怎么知道谁对这种工作有没有激情?实际上非常简单。我只问一个简单的问题:“目前你对什么Web技术最感兴趣?”这个问题永远不会过期,而且也几 乎不可能出错……除非你答不上来。就眼下来说,我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库,等等。只有 对Web开发充满激情的人,才会坚持不懈地学习新知识、掌握新技能;这些人才是我真正想要的。当然,我会让他们详细解释自己提到的技术,以保证他们不是随 口说了几个时髦的新词汇。
最后一点
计算机科学或者Web设计方面的知识当然也有用,但那都是基本知识之外的东西。只要基本知识在那儿了,一切就都有了基础,想扩充知识面也不难。可 是,如果等到正式上班以后,还得从头学习基本技能,那种难度是不可同日而语的。另外,高级前端工程师与一般工程师相比,肯定需要掌握更多的技能。而面试几 乎没有经验大学毕业生,同样也会有一套完全不同的程序。我在这篇文章里列出来的都是一些最基本的东西。
对于那些还没有多少面试经验的人,我总是喜欢告诉他们,面试完了只要问自己一个问题就行:你想以后跟这个人在一起共事吗?如果不管为什么,回答是不,那就是不。
10. 各位大湿,请问有什么题目或者是软件可以测试思维逻辑的,我想测试以下自己适合做前端开发吗
【1】假设有一个池塘,里面有无穷多的水。现有2个空水壶,容积分别为5升和6升。问题是如何只用这2个水壶从池塘里取得3升的水。
答案:6升水壶a,5升水壶b
将a装满,倒入b中,然后倒空b,a中的水倒入b中,这样两次,然后b中有水2升,这时灌满a,将a中水倒入b中,a中就有水3升
【2】 周雯的妈妈是水泥厂的化验员。一天,周雯来到化验室做作业。做完后想出去玩。“等等,妈妈还要考你一个题目。”她接着说,“你看这6只做化验用的玻璃杯, 前面3只盛满了水,后面3只是空的。你能只移动1只玻璃杯,就把盛满水的杯子和空杯子间隔起来吗?”爱动脑筋的周雯是学校里有名的“小机灵”,她只想了一 会儿就做到了。请你想想看,“小机灵”是怎样做的?
答案:将第二个杯子里的水倒入第五个杯子
【3】三个小伙子同时爱上了一个姑娘,为了决定他们谁能娶这个姑娘,他们决定用手枪进 行一次决斗。小李的命中率是30%,小黄比他好些,命中率是 50%,最出色的枪手是小林,他从不失误,命中率是100%。由于这个显而易见的事实,为公平起见,他们决定按这样的顺序:小李先开枪,小黄第二,小林最 后。然后这样循环,直到他们只剩下一个人。那么这三个人中谁活下来的机会最大呢?他们都应该采取什么样的策略?
【4】一间囚房里关押着两个犯人。每天监狱都会为这间囚房提供一罐汤,让这两个犯人自己来分。起初,这两个人经常会发生争执,因为他们总是有人认为对方的汤比自己的多。后来他们找 到了一个两全其美的办法:一个人分汤,让另一个人先选。于是争端就这么解决了。可是,现在这间囚房里又进来一个新犯人,现在是三个人来分汤。必须寻找一个 新的方法来维持他们之间的和平。该怎么办呢?
按:心理问题,不是逻辑问题
【5】在一张长方形的桌面上放了n个一样大小的圆形硬币。这些硬币中可能有一些不完全在桌面内,也可能有一些彼此重叠;当再多放一个硬币而它的圆心在桌面内时,新放的硬币便必定与原先某些硬币重叠。请证明整个桌面可以用4n个硬币完全覆盖。
【6】一个球、一把长度大约是球的直径2/3长度的直尺,你怎样测出球的半径?方法很多,看看谁的比较巧妙。
【7】五个大小相同的一元人民币硬币。要求两两相接触,应该怎么摆?
【8】猜牌问题
S 先生、P先生、Q先生他们知道桌子的抽屉里有16张扑克牌:红桃A、Q、4,黑桃J、8、 4、2、7、3,草花K、Q、5、4、6,方块A、5。约翰教授从这16张牌中挑出一张牌来,并把这张牌的点数告诉P先生,把这张牌的花色告诉Q先生。这 时,约翰教授问P先生和Q先生:你们能从已知的点数或花色中推知这张牌是什么牌吗?于是,S先生听到如下的对话:
P先生:我不知道这张牌。
Q先生:我知道你不知道这张牌。
P先生:现在我知道这张牌了。
Q先生:我也知道了。
听罢以上的对话,S先生想了一想之后,就正确地推出这张牌是什么牌。
请问:这张牌是什么牌?
【9】一个教授逻辑学的教授,有三个学生,而且三个学生均非常聪明!
一天教授给他们出了一个题,教授在每个人脑门上贴了一张纸条并告诉他们,每个人的纸条上都写了一个正整数,且某两个数的和等于第三个!(每个人可以看见另两个数,但看不见自己的)
教授问第一个学生:你能猜出自己的数吗?回答:不能,问第二个,不能,第三个,不能,再问第一个,不能,第二个,不能,第三个:我猜出来了,是144!教授很满意的笑了。请问您能猜出另外两个人的数吗?
【10】某城市发生了一起汽车撞人逃跑事件
该城市只有两种颜色的车,蓝色15%,绿色85%。
事发时有一个人在现场看见了
他指证是蓝车
但是根据专家在现场分析,当时那种条件能看正确的可能性是80%
那么,肇事的车是蓝车的概率到底是多少?
【11】 有一人有240公斤水,他想运往干旱地区赚钱。他每次最多携带60公斤,并且每前进一公里须耗水1公斤(均匀耗水)。假设水的价格在出发地为0,以后,与 运输路程成正比, (即在10公里处为10元/公斤,在20公里处为20元/公斤......),又假设他必须安全返回,请问,他最多可赚多少钱?
【12】现在共有100匹马跟100块石头,马分3种,大型马,中型马跟小型马。其中一匹大马一次可以驮3块石头,中型马可以驮2块,而小型马2头可以驮一块石头。问需要多少匹大马,中型马跟小型马?(问题的关键是刚好必须是用完100匹马)
【13】1=5 2=15 3=215 4=2145 那么5=?
答案:1
【14】有2n个人排队进电影院,票价是50美分。在这2n个人当中,其中n个人只有50美分,另外n个人有1美元(纸票子)。愚蠢的电影院开始卖票时1分钱也没有。
问:有多少种排队方法使得每当一个拥有1美元的人买票时,电影院都有50美分找钱
注:1美元=100美分
拥有1美元的人,拥有的是纸币,没法破成2个50美分
【15】一个人花8块钱买了一只鸡,9块钱卖掉了,然后他觉得不划算,花10块钱又买回来了,11块卖给另外一个人。问他赚了多少?
答案:2元
【16】有一种体育竞赛共含M个项目,有运动员A,B,C参加,在每一项目中,第一,第二,第三名分别得X,Y,Z分,其中X,Y,Z为正整数且X>Y>Z。最后A得22分,B与C均得9分,B在百米赛中取得第一。求M的值,并问在跳高中谁得第二名。
【17】前提:
1、有五栋五种颜色的房子
2、每一位房子的主人国籍都不同
3、这五个人每人只喝一种饮料,只抽一种牌子的香烟,只养一种宠物
4、没有人有相同的宠物,抽相同牌子的香烟,喝相同的饮料
提示:
1、英国人住在红房子里
2、瑞典人养了一条狗
3、丹麦人喝茶
4、绿房子在白房子左边
5、绿房子主人喝咖啡
6、抽PALL MALL烟的人养了一只鸟
7、黄房子主人抽DUNHILL烟
8、住在中间那间房子的人喝牛奶
9、挪威人住第一间房子
10、抽混合烟的人住在养猫人的旁边
11、养马人住在抽DUNHILL烟的人旁边
12、抽BLUEMASTER烟的人喝啤酒
13、德国人抽PRINCE烟
14、挪威人住在蓝房子旁边
15、抽混合烟的人的邻居喝矿泉水
问题是:谁养鱼?
答案:德国人养鱼
【18】5个人来自不同地方,住不同房子,养不同动物,吸不同牌子香烟,喝不同饮料,喜欢不同食物。根据以下线索确定谁是养猫的人。
1.红房子在蓝房子的右边,白房子的左边(不一定紧邻)
2.黄房子的主人来自香港,而且他的房子不在最左边。
3.爱吃比萨的人住在爱喝矿泉水的人的隔壁。
4.来自北京的人爱喝茅台,住在来自上海的人的隔壁。
5.吸希尔顿香烟的人住在养马人的右边隔壁。
6.爱喝啤酒的人也爱吃鸡。
7.绿房子的人养狗。
8.爱吃面条的人住在养蛇人的隔壁。
9.来自天津的人的邻居(紧邻)一个爱吃牛肉,另一个来自成都。
10.养鱼的人住在最右边的房子里。
11.吸万宝路香烟的人住在吸希尔顿香烟的人和吸“555”香烟的人的中间(紧邻)
12.红房子的人爱喝茶。
13.爱喝葡萄酒的人住在爱吃豆腐的人的右边隔壁。
14.吸红塔山香烟的人既不住在吸健牌香烟的人的隔壁,也不与来自上海的人相邻。
15.来自上海的人住在左数第二间房子里。
16.爱喝矿泉水的人住在最中间的房子里。
17.爱吃面条的人也爱喝葡萄酒。
18.吸“555”香烟的人比吸希尔顿香烟的人住的靠右
答案:红房子养猫