在網上看到的魅族前端面試題,在珠海也挺想去魅族的。惋惜各方面都很菜(捂臉。整套題難度就在後面的正則了,畢竟正則沒有專門去記憶和學習,用到時候都是google
過來的,作起來就有些乏力了。下面是本身作的,答案有些參考了網上的答案。javascript
題目出處:分享魅族前端面試題css
3個HTML5標籤html
<header>
前端
<main>
java
<footer>
css3
3個CSS3新特性git
border-radius
github
@keyframes
面試
media query
正則表達式
3個ECMAScript 5新API
String.prototype.trim()
Array.prototype.foEach()
Array.prototype.isArray()
方法一 使用 jQuery
$('div').animate({'left': 100}, 2000);
方法二 js + css3
// css div { transition: all 2s linear; // linear 規定以相同速度開始至結束的過渡效果 } // js div.style.left = (div.offsetLeft + 100) + 'px';
div { postion: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; margin: auto; background-color: red; }
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; }
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
Dom Leval 2
事件綁定兼容性問題:ie8
如下的瀏覽器不支持addEventListener
來綁定事件,經過attachevent
能夠解決。
stopPropagation
兼容性問題:ie8
如下的瀏覽器不支持e.stopPropagation()
來阻止事件傳播,經過e.returnValue = false
能夠解決。
關於鼠標滾輪事件兼容性問題:
來自:JS滾輪事件(mousewheel/DOMMouseScroll)瞭解
臨時構造器繼承
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; } });
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' ]
String.prototype.trim = function () { return this.replace(/(^\s*)|(\s*$)/g, ""); };
例如:」 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
選擇器的優化。
參考網址:
常常上的前端技術網站:
本身的職業規劃就不寫了。。。