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伪选择器是将特定的效果添加给某些选择器;