魅族前端面试题 - 尝试做

在网上看到的魅族前端面试题，在珠海也挺想去魅族的。可惜各方面都很菜（捂脸。整套题难度就在后面的正则了，毕竟正则没有专门去记忆和学习，用到时候都是google过来的，做起来就有些乏力了。下面是自己做的，答案有些参考了网上的答案。

题目出处：分享魅族前端面试题

1、列举3个HTML5标签，3个CSS3新特性，3个ECMAScript 5新API。

• 3个HTML5标签

  • <header>

  • <main>

  • <footer>

• 3个CSS3新特性

  • border-radius

  • @keyframes

  • media query

• 3个ECMAScript 5新API

  • String.prototype.trim()

  • Array.prototype.foEach()

  • Array.prototype.isArray()

2、2种方式，实现某DIV元素以50px每秒的速度左移100px。

方法一 使用 jQuery

$('div').animate({'left': 100}, 2000);

方法二 js + css3

// css
div {
    transition: all 2s linear; // linear 规定以相同速度开始至结束的过渡效果
}

// js
div.style.left = (div.offsetLeft + 100) + 'px';

3、用css分别实现某个DIV元素上下居中和左右居中。

div {
    postion: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: red;
}

4、用DIV+CSS实现三栏布局（左右固定200px，中间自适应）。

HTML

<div class="container">
  <div class="main">
    <h2>这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊这是主要内容啊啊</h2>
  </div>
  <div class="left">
    左边
  </div>
  <div class="right">
    右边
  </div>
</div>

CSS

.container > div {
  height: 200px;
}
.container {
  padding: 0 200px;
}
.main,
.left,
.right {
  position: relative;
  float: left;
}
.left,
.right {
  width: 200px;
}
.main {
  width: 100%;
  background-color: yellow;
}
.left {
  background-color: blue;
  margin-left: -100%;
  left: -200px;
}
.right {
  background-color: green;
  margin-left: -200px;
  left: 200px;
}

5、按顺序写出alert弹出窗口的内容。

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        alert('1.' + this.name);
        return function(){
            return this.name;
        };
    }
};
var func = object.getNameFunc();
alert('2.' + func());
alert('3.' + func.call(object));
alert('4.' + func.apply(object));

结果：

• var func = object.getNameFunc() => 1.My Object

• alert('2.' + func()) => 2.The Window

• alert('3.' + func.call(object)) => 3.My Object

• alert('4.' + func.apply(object)) => 4.My Object

6、列出三个常见的不同浏览器JS的兼容性问题。

1. Dom Leval 2事件绑定兼容性问题：
   ie8以下的浏览器不支持addEventListener来绑定事件，通过attachevent可以解决。

2. stopPropagation兼容性问题：
   ie8以下的浏览器不支持e.stopPropagation()来阻止事件传播，通过e.returnValue = false可以解决。

3. 关于鼠标滚轮事件兼容性问题：

来自：JS滚轮事件(mousewheel/DOMMouseScroll)了解

7、用JS写一个实现继承的方法。

临时构造器继承

var inherit = (function() {
    var F = function () {};
    return function (C, P) {
        F.prototype = P.prototype;
        C.prototype = new F();
        C.uber = P.prototype;
        C.prototype.constructor = C;
    }
});

8、用JS实现一个数组合并的方法（要求去重）。

var arr1 = ['a'];
var arr2 = ['b', 'c'];
var arr3 = ['c', ['d'], 'e', undefined, null];

var concat = (function(){
  // concat arr1 and arr2 without duplication.
  var concat_ = function(arr1, arr2) {
    for (var i=arr2.length-1;i>=0;i--) {
      arr1.indexOf(arr2[i]) === -1 ? arr1.push(arr2[i]) : 0;
    }
  };
  // concat arbitrary arrays.
  // Instead of alter supplied arrays, return a new one.
  return function(arr) {
    var result = arr.slice();
    for (var i=arguments.length-1;i>=1;i--) {
      concat_(result, arguments[i]);
    }
    return result;
  };
}());

执行：concat(arr1, arr2, arr3)
返回：[ 'a', null, undefined, 'e', [ 'd' ], 'c', 'b' ]

来源：javascript如何合并多个数组

9、使用正则表达式给所有string对象添加trim方法。

String.prototype.trim = function () {
    return this.replace(/(^\s*)|(\s*$)/g, "");
};

10、用js实现一个电话号码提取的方法。

例如：” 1852145998 020-888-999845 测试 021 – 85421987, 19865754″
得到的结果应该是[1852145998, 020-888-999845 , 021 – 85421987, 19865754]

var str=" 1852145998 020-888-999845 测试 021  -  85421987, 19865754";
var reg=/(1\d+)|(0[0-9\s\-]+)/g;
alert(str.match(reg));

来自：电话号码提取

11、哪些方法可以提升网站前端性能？

• 合并雪碧图，减少http请求。

• 压缩html、css、js文件。

• 使用cdn加载。

• 使用localstorage缓存和mainfest应用缓存。

• css选择器的优化。

参考网址：

• 前端优化的手段都有哪些？

• 前端工程与性能优化

12、列举你经常访问的前端技术网站，并简单描述一下自己的职业规划。

经常上的前端技术网站：

• w3cplus

• w3ctech

• w3cfuns

• 前端乱炖

• div.io

• css-tricks

自己的职业规划就不写了。。。