前端面试题准备 1
亲戚推荐的前端面试还没消息,还是要准备一下,万一下周某一天突然要去面试,好歹不要露怯。这几天看前端面试题,大概有几个是必考的
一、原生js写ajax,平时用jquery的ajax习惯了,原生的没写过,网上找了一篇比较精练的
function CreateAjaxObj(){ var xmlHttpRequest = null; if(window.XMLHttpRequest) xmlHttpRequest = new XMLHttpRequest(); else if(window.ActiveXObject) xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); return xmlHttpRequest; } function Ajax(url,postStr,callback){ var xmlHttpRequest = CreateAjaxObj(); if(xmlHttpRequest != null){ xmlHttpRequest.open("POST",url,true); xmlHttpRequest.onreadystatechange = function(){ if(xmlHttpRequest.readystate == 4 && xmlHttpRequest.status == 200){ callback(xmlHttpRequest.responseText); } }; xmlHttpRequest.send(postStr); } }
试着手敲了几遍,大概记着了。
二、深复制(克隆),项目里正在用的好像没什么问题,没怎么测过,也是网上复制来的
function clone(myObj){ if(typeof(myObj) != 'object') return myObj; if(myObj == null) return myObj; var myNewObj = new Object(); for(var i in myObj) myNewObj[i] = clone(myObj[i]); return myNewObj; }
不知是否严谨,今天在网上又找了一篇:
Object.prototype.Clone=function(){ var objClone; if(this.constructor==Object){ objClone=new this.constructor(); } else{ objClone=new this.constructor(this.valueOf()); } for(var key in this){ if(objClone[key]!=this[key]){ if(objClone(this[key])=="object"){ objClone[key]=this[key].clone(); } else{ objClone[key]=this[key]; } } } objClone.toString=this.toString; objClone.valueOf=this.valueOf; return objClone; }
能记住复杂的最好,记不住的话简略版的也要能手写的出来。
三、垂直居中,这也在项目中被坑过几次,今天试了一下,大概有几种方法,凭印象写个大概,具体还要调试:
1、一般用于图片在DIV中垂直居中,在图片旁边放个空元素,display:inline-block;width:0;height:100%,vertical-align:middle;
2、一般用于文字居中,把line-height设成父DIV的height一样。
3、DIV嵌DIV,父DIV display:table,子DIV display:table-cell,vertical-align:middle
4、知道宽高后直接偏移值,有时在项目中这样也很省事。。。
四、DIV页面固定位置(右下角广告位或居中),主要是要记得减去DIV本身的一半宽和高,(语法是个大概,具体怎么写还要试下)
1、CSS的position:fixed
2、如果页面不滚动的话position:abosulte也可以
3、用JS方法,$(window.height())-自身高度一半,(或是document?不记得了,可以试下)
五、CSS选择符优先级
!important 最高
html直接定义 1000
ID选择器 100
标签名选择器 1
类选择器 10
六、ajax跨域
1、jquery的getJSON,或ajax的dataType设为'jsonp',或getScript。总之是利用JSONP
2、原生JS,可以生成标签,利用<script src="">后带参数来跨域
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("get", "script.js", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { var script = document.createElement ("script"); script.type = "text/javascript"; script.text = xhr.responseText; document.body.appendChild(script); } } }; xhr.send(null);
利用ajax动态加载js
七、清除浮动
1.增加个空标签 clear:both
2.overflow:auto
3. :afert伪类(非IE)