前端开发面试小结

场景：

　　6月1号到6月5号这一周，面试了差不多10家公司，职位都是"前端开发"。

　　下面简单介绍面试中遇到的一些题。

题目：

　　HTML & CSS 相关：

- 如何在 body 中水平垂直居中一个 div (宽100px，高100px)？
- inline-block 造成的水平间隙该如何解决？列出你能想到的所有办法。
- 如何用 css 创建一个三角形？写出 css 代码并说明它的实现原理。
- position 有哪几种？它们的定位原点分别是什么？是否脱离文档流？
- css 中有哪几种选择器？它们的优先级是什么？
- css3 中添加了哪些新的属性？它们分别是用来做什么的？它们的兼容性如何？
- box-sizing 的作用是什么？列出它可能的几个值。

　　JavaScript 相关：

函数声明的两种方式 function func(){} 和 var func = function(){} 有什么区别？
constructor、prototype、__proto__ 有什么区别？
null、undefined、undeclared 的区别，如何检测它们？
如何 copy 一个 Array？如何检测一个 Array？
如何用原生 JS 创建一个 div 并添加到 body 中？
如何扩展 JavaScript 的内置对象，这样做有什么问题？
列出 addEventListener 的几个参数，第三个参数的作用是什么？
写一个通用的正则表达式，并从变量 text 中匹配出所有的数字。
实现 parseInteger(x) 函数，parseInteger(x) = parseInt(x, 10)。
JS 如何实现面向对象和继承？请写一个简单的实例代码。
用原生 JS 实现函数 insertBefore(element, sourceNode)，把一个元素（节点）插入一个节点之前。
一个数组 var array = [1, [2, [3, 4], [5, 6]], 7, 8]，请写一个方法 flatArray()，得到数组 [1, 2, 3, 4, 5, 6, 7, 8]。（答案见前一篇随笔）
说出以下代码的执行结果并说明原因，如何修改代码可以得到预想的结果？

<div id="test">
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
    <div>Item4</div>
</div>
<script>
    function test() {
        var els = document.getElementById('test').getElementsByTagName('div');
        for(var i = 0, len = els.length; i < len; i++) {
            var item = els[i];
            item.onclick = function() {
                alert(item.innerHTML);
                return false;
            }
        }
    }
    test();
</script>

以下代码执行后，console 中会打印出什么？

var scope = 'global';
function log() {
    var args = Array.prototype.join.call(arguments, ', ');
    console.log(this.scope + ':' + args);
}
var dog = {
    scope: 'dog',
    yelp: function() {
        var scope = 'dog.yelp';
        log('wow');
    }
}
dog.yelp();
dog.yelp.call(dog);
log.call(dog, 'created');

　　Ajax相关：

- 介绍 ajax 请求跨域的解决方法
- 简单说明 ajax 的实现原理
- get 请求可能因为数据缓存而导致新数据无法加载，如何解决？ post 请求是否有这样的问题？
- 请用 promise 改写以下代码
- ```
$(function(){
    $.get('/get/user/info', function(result){
        $.get('/get/city?city=' + result.user.city, function(city){
            // show city info
        })
    })
})
```

　　其他：

- Angularjs 是什么？有什么优缺点？它的双向数据绑定的实现原理是什么？
- Angularjs 和 jQuery 有什么区别？和 React.js、Backbone.js 有什么区别？
- grunt 和 gulp 是用来做什么的？它们有什么异同？
- CommonJS、CMD、AMD 是什么？为何要用它们？
- 请说出 3-4 个你遇到的浏览器兼容性问题并说明是如何解决的。
- Java中，abstract 类和接口有什么异同？final 关键字的作用是什么？
- 数据库，left join 和 join 有什么区别？