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

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等等，感兴趣的同窗能够深刻研究下。