校招面试中积累的前端问题 - Matthewsun

标签: 面试 前端 问题 | 发表时间:2014-09-15 13:04 | 作者:Matthewsun
分享到:
出处:

css问题:

ie6/7下块级元素如何模拟display:inline-block

众所周知,inline-block是一个很好用的属性。它可以将对象呈递为内联对象,但是对象的内容都作为块对象呈递。而旁边的内联对象会被呈递在同一行内,允许空格。
可惜的是,在IE6/7下是不支持这个属性的,这时我们该如何办呢?
这时我们可以考虑让块级元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的hasLayout属性(如zoom:1)。代码如下:

//css
.ib { display:inline-block; *display: inline; *zoom:1; width: 60px; height: 60px; background: red;}
//html
<div class="ib">我是ie6/7下模拟的inline-block元素</div>

延伸上一个问题,实现两栏自适应布局的一个方案

只需要给左侧元素的布局浮动属性,并设置宽度,右侧的元素display:inline-block,ie6/7下使用兼容解决方案即可解决。当然两栏自适应布局的方法不止这一种,这里仅仅是做一个小小的延伸扩展。

css组件的命名规范

class命名一直是网页重构的一个重要的话题,而css组件的命名就更是重中之重。如何防止命名冲突,全站组件和单页面组件的命名怎么从普通class命名中间区分开来,以及全站的组件和单页面的组件之间又如何准确区分?
我这里给出的答案是在class的命名规范上下文章,全站组件的命名加上mod前缀以标示,例如:mod_xx。而单页面组件的命名加上单页的前缀和mod标示,如:xx_mod_xx。

css框架

Bootstrap的流行导致了越来越多的人去研究前端css框架,而在面试的时候面试官更多的是考察你对框架源码的剖析,以及知识的广度。比如说它的栅格布局,响应式布局以及各个css组件之间的联系。还有个css框架是YUI的 pureCss,它可能没有bootstrap那么有名气,但恰恰是在面试的时候能够说出这个框架的名字以及你对于它的理解,相信是可以加分不少的。pure是一组轻量的响应式css模块,pure的所有模块都是在 Normalize.css之上建立的。和传统的reset不同,它提供的是跨浏览器保持HTML元素默认样式的一致性。有兴趣的同学可以深入研究学习一下。

javascript问题:

事件绑定

js事件绑定,主要有三个问题:
1 事件绑定在标准浏览器和IE浏览器下的兼容性写法
2 事件绑定在标准浏览器下函数的第三个参数的含义 
3 事件绑定在ie下,回调函数的this指向会被指向window

先说一下第二个问题,其它的问题可用代码示例。

obj.addEventListener(ev,fn,false);

这个参数的名字叫做useCapture,是一个布尔值,名为冒泡获取,false代表的含义是由里向外,true是由外向里。举个栗子:

<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">请在此点击鼠标。</div>
</div>
</div>
  • 全为 false 时,触发顺序为:inDiv、middleDiv、outDiv;
  • 全为 true 时,触发顺序为:outDiv、middleDiv、inDiv;
  • outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;
  • middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;

使用匿名函数解决attachEvent回调函数的this指向问题:

function bindEvent(elem,type,fn){
if(elem.attachEvent){
elem.attachEvent("on"+type,function(){
fn.apply(elem,arguments);
});
}else{
elem.addEventListener(type,fn,false);
}
}

js阻止默认事件和阻止冒泡的兼容写法

1.停止事件冒泡

//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;

2.阻止浏览器的默认行为

//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;

当然jquery中帮我集成了一个解决方案,那就是return false,已解决了兼容性问题。

js获取元素的位置

这道面试题考察的是,有没有获取父元素的位置,再加上自身的offset值,代码如下:

function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
}  

hr问题:

你对加班的问题怎么看?

这个问题几乎是hr必问,但不要以为hr仅仅想听到你的答案是愿意加班哦。看看我是怎么回答的吧:
我不喜欢经常加班,因为我认为经常加班是工作低效率的一种表现,但是如果公司有紧急的需求需要我去加班,我愿意奉献自己的精力去完成,不会以不加班为借口,拖延紧急项目的进度。

关于面试的问题还有很多很多,比如说前端的性能优化,seaJs的模块化加载,前端MVC模式的应用,nodeJs等等,感兴趣的同学可以深入研究下。


本文链接: 校招面试中积累的前端问题,转载请注明。

相关 [面试 前端 问题] 推荐:

前端工程师面试问题列表

- - 博客 - 伯乐在线
前言:@ darcyclarke 在 GitHub 上分享了一个 repo,其中包括了不少前端面试问题,可用于检验潜在的候选人. 绝不推荐在单个候选人身上用上所用的问题(那样会花费好几个小时滴). 从这个列表选择一些,应该能从候选人身上,检测出你所需要的技能. 请记住,下面的很多问题都是开放式的,无标准答案,并能引发有趣的讨论.

校招面试中积累的前端问题 - Matthewsun

- - 博客园_首页
ie6/7下块级元素如何模拟display:inline-block. 众所周知,inline-block是一个很好用的属性. 它可以将对象呈递为内联对象,但是对象的内容都作为块对象呈递. 而旁边的内联对象会被呈递在同一行内,允许空格. 可惜的是,在IE6/7下是不支持这个属性的,这时我们该如何办呢.

web前端面试笔试题+优化

- - JavaScript - Web前端 - ITeye博客
前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源. 前端优化是复杂的,针对方方面面的资源都有不同的方式. 那么,前端优化的目的是什么. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源.

面试题:火车运煤问题

- Louis - 酷壳 - CoolShell.cn
这个可能是一个比较经典的智力题了,和以前的那个《赛马问题》很相似,其题目如下:. 你是山西的一个煤老板,你在矿区开采了有3000吨煤需要运送到市场上去卖,从你的矿区到市场有1000公里,你手里有一列烧煤的火车,这个火车最多只能装1000吨煤,且其能耗比较大——每一公里需要耗一吨煤. 请问,作为一个懂编程的煤老板的你,你会怎么运送才能运最多的煤到集市.

面试时,你会问面试官哪些问题?

- Walter8529 - 博客园-首页原创精华区
每次面试的时候,面试官都会在最后给面试者一些时间,来问问题. 这是个非常好的机会,能按照自己的思路,来了解职位、技术、企业文化、福利待遇、企业状况和前景等情况,以弥补前面面试过程中没有了解到的情况. 但较早以前面试准备不太充分,虽然也能地问上一些问题,但挂一漏万,每次回来后,总觉得对企业、对职位没有完全了解清楚,不能依此作出很理性的决断.

亲历百度面试有感:技术or前端型产品

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  近日在换工作,先后面试了百度云和百度安全的相关岗位,最后因为非常可惜的原因,跟百度安全失之交臂. 经过总结,自己认为主要的原因就在于 "技术型产品"和"前端型产品"的认知,特写出来跟互联网的各位产品经理做一下分享.   a、毕业四年,互联网工作经验,大于五年.

前端面试想要得高分,看过来~~~

- - JavaScript - Web前端 - ITeye博客
   理论是基础,有些东西还是要温故而知新吧,闲余之时还是要“炒炒现饭”. 下面小编把“Web前端开发面试题”贴出来,大伙看看吧~~. CSS 盒子模型,绝对定位和相对定位.   1)清除浮动,什么前端面试想要得高分,看过来~~~时候需要清除浮动,清除浮动都有哪些方法.   2)如何保持浮层水平垂直居中.

华尔街面试中最激怒人的问题

- Zoe - 每日英语
  想在华尔街工作,或者想见识一下那些顶尖金融公司的面试问题的童鞋,速速过来围观. 下面这12个面试题是亲身参加了面试的人分享的.   现在是华尔街招聘的旺季,同时也是解雇的旺季….   That means it's interview time for the new guys fresh out of college, and for the old guys who didn't make it through the recent round of cuts.

招聘面试抓核心,三个问题试真金

- Aaron Xu - 译言-每日精品译文推荐
作者: Katherine Reynolds Lewis  来源:财富中文网. 版权声明:本文内容版权属于时代公司(Time Inc.),并经过时代公司许可由香港中询有限公司出版和发布. 版权所有,未经书面许可,任何机构不得全部或部分转载.   高管培训师特里•R•培根曾经历过让人痛苦的面试过程. 但有时,表现一塌糊涂的反倒是面试官,而不是求职者.

转:面试中的海量数据处理问题

- friedvan - 丕子
终于找到了一份比较完整的,分享一下. 海量数据处理:十道面试题与十个海量数据处理方法总结. 作者:July、youwang、yanxionglu. 时间:二零一一年三月二十六日. 说明:本文分为俩部分,第一部分为10道海量数据处理的面试题,第二部分为10个海量数据处理的方法总结. 出处:http://blog.csdn.net/v_JULY_v.