在网上看到的魅族前端面试题,在珠海也挺想去魅族的。惋惜各方面都很菜(捂脸。整套题难度就在后面的正则了,毕竟正则没有专门去记忆和学习,用到时候都是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
选择器的优化。
参考网址:
常常上的前端技术网站:
本身的职业规划就不写了。。。