前端面试题集锦一
来源:互联网 发布:淘宝网虚假交易处罚 编辑:程序博客网 时间:2024/05/21 22:40
1. prototype与_ proto _的关系是什么
创建的对象都具有_ proto _属性,可以成为隐式原型,这个连接存在于实例与构造函数的原型之间。虽然无法访问到该属性,但是可以通过isPrototypeOf()来确定对象之间是否存在这种关系。 同时只要创建一个新函数,就会自动得到一个prototype属性,这个属性指向函数的原型对象。同时也会得到一个constructor属性,包含一个指针指向原构造函数。同时也会有[[prototype]]属性,指向function.
2. meta viewport原理
viewport< meta>标记用来指定用户是否可以缩放Web页面,主要是针对于移动端。
例子:
<meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale=1">
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备 的 宽度(单位为缩放为 100% 时的 CSS 的像素)。height:和 width 相对应,指定高度。initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。maximum-scale:允许用户缩放到的最大比例。minimum-scale:允许用户缩放到的最小比例。user-scalable:用户是否可以手动缩放
3. ajax如何实现?readyState的五种状态?
ajax是一种异步获取数据的请求方式,可以不用刷新页面即从服务器获取数据,核心是XMLHttpRequest.
关于XMLHttpRequest的封装
function createXHR(){ if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ if(typeof arguments.callee.activeXString !="string"){ var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len; for(i = 0,len=versions.length;i<len;i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; }catch(ex){ } } } return new ActiveXObject(arguments.callee.activeString); }else{ throw new Error("no XHR object available"); }}
ajax实现模板
var xhr=new createXHR();xhr.onreadystatechange=function () { if(xhr.readyState==4) { if (xhr.status == 200) { console.log(xhr.responseText); } }};xhr.open('GET',url,true);xhr.send(null);
同时可以通过检测XHR对象的readyState的属性,可知道响应过程的当前活动阶段。
0:尚未初始化,未调用open()方法;
1:启动,已经调用open()方法,但尚未调用send方法;
2:发送。已经调用send()方法,但尚未接收到响应;
3:接收,已经接收到部分响应数据;
4:完成,已经接收到全部响应数据,而且已经在客户端调用。
4.jsonp如何实现
jsonp是一种跨越解决方案,一般是通过动态创建script标签来使用的,通知指定src属性指定跨域url.
5.get和post的区别
get一般用于请求服务器资源,Post请求一般用于提交资源到服务器,且get请求的请求字段会包含再请求头中明文传送,不适合用GET请求登录界面。
6. 编写web端cookie的设置和获取方法
cookies的构成:名称,值,域(指定哪个域是否有效),路径(指定域的路径,应该向服务器发送cookies),失效时间(cookie应该被删除的时间),安全标志(secure指定后,只能在SSL连接的时候发送cookie)。
cookie的格式name=value;expires=;domain=;path=/;secure;
var CookieUtil={ get:function (name) {//获取cookie var cookieName = encodeURIComponent(name)+'=', cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if(cookieStart>-1){ var cookieEnd = document.cookie.indexOf(';',cookieStart); if(cookieEnd==-1){ cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd)); } return cookieValue; }, set:function (name,value,expires,path,domain,secure) {//设置cookies var cookieText = encodeURIComponent(name)+'='+encodeURIComponent(value); if(expires instanceof Date){ cookieText += "; expires="+expires.toGMTString(); } if(path){ cookieText += "; path"+path; } if(domain){ cookieText += "; domain="+ domain; } if(secure){ cookieText +="; domain="+ secure; } document.cookie = cookieText; }, unset:function (name,path,domain,secure) {//删除cookies this.set(name,"",new Date(0),path,domain,secure); }};
7. 兼容IE的事件封装
function addHandle(element,type,handler) { if(element.addEventListener){ element.addEventListener(type,handler,false);//dom2级事件 }else if(element.attachEvent){ element.attachEvent("on"+type,handler);//ie8之前版本 }else{ element["on"+type]=handler;//DOM 0级事件 }}
8. delegate如何实现
事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一种类型的事件。最适合采用该技术的是click,mousedown,mouseup,keydown,keyup,keypress.
9. this的应用场景
this基于函数的运行环境绑定的。
1.指向全局变量;2.构造函数的this; 3.闭包函数中的this;4.作用域的绑定;
10. 伪类和伪元素的区别
css伪类是指给某些选择器添加特殊的效果;css伪选择器是将特定的效果添加给某些选择器;
- 前端面试题集锦一
- 前端开发面试题集锦(一)
- 前端开发面试题集锦(一)
- 前端面试题集锦
- 前端面试题集锦
- 前端面试题集锦
- 前端面试题集锦
- web前端面试题集锦
- WEB前端面试题集锦
- Web前端面试题 -- 集锦
- Web前端面试题集锦
- web前端面试题集锦
- 前端开发面试题集锦
- 前端面试题集锦二
- 前端面试题集锦三
- 腾讯前端面试题集锦
- 前端面试题一
- 前端面试题一
- linux 应用编程——多进程
- ios 分离出字符串中的数字
- (转载)JAVA设计模式之单例模式
- 大商创短信宝短信插件
- AppCompatActivity的魔术——如何做到适配新控件
- 前端面试题集锦一
- 百练_2736大整数减法(大数相减)
- hdu 1074 Doing Homework (状压dp)
- 页面显示部分文字,title再显示一个提示
- struts2配置文件中的method={1}详解
- python中向列表中添加字典时,出现前面的覆盖了后面的
- 图文详解远程部署ASP.NET MVC 5项目
- Netty ByteBuf 零拷贝
- javaweb时间动态显示