魅族前端面試題 - 嘗試作

在網上看到的魅族前端面試題，在珠海也挺想去魅族的。惋惜各方面都很菜（捂臉。整套題難度就在後面的正則了，畢竟正則沒有專門去記憶和學習，用到時候都是google過來的，作起來就有些乏力了。下面是本身作的，答案有些參考了網上的答案。

題目出處：分享魅族前端面試題

一、列舉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種方式，實現某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';

三、用css分別實現某個DIV元素上下居中和左右居中。

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

四、用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;
}

五、按順序寫出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

六、列出三個常見的不一樣瀏覽器JS的兼容性問題。

1. Dom Leval 2事件綁定兼容性問題：
   ie8如下的瀏覽器不支持addEventListener來綁定事件，經過attachevent能夠解決。

2. stopPropagation兼容性問題：
   ie8如下的瀏覽器不支持e.stopPropagation()來阻止事件傳播，經過e.returnValue = false能夠解決。

3. 關於鼠標滾輪事件兼容性問題：

來自：JS滾輪事件(mousewheel/DOMMouseScroll)瞭解

七、用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;
    }
});

八、用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如何合併多個數組

九、使用正則表達式給全部string對象添加trim方法。

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

十、用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));

來自：電話號碼提取

十一、哪些方法能夠提高網站前端性能？

• 合併雪碧圖，減小http請求。

• 壓縮html、css、js文件。

• 使用cdn加載。

• 使用localstorage緩存和mainfest應用緩存。

• css選擇器的優化。

參考網址：

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

• 前端工程與性能優化

十二、列舉你常常訪問的前端技術網站，並簡單描述一下本身的職業規劃。

常常上的前端技術網站：

• w3cplus

• w3ctech

• w3cfuns

• 前端亂燉

• div.io

• css-tricks

本身的職業規劃就不寫了。。。