不得不了解的前端问题01(面试大典)--事件监听、继承、闭包、跨域、性能

1、PC端和app开发区别。
app要跨安卓和ios平台,pc是操作系统。
app暂且常用浏览器内核为webkit,pc有IE,chrome,firefox浏览器对应不同内核,需要兼容。


2、jq事件监听有几种,有什么优缺点。

on(jq1.9后推荐使用)\bind\live(jq1.7已经去掉)\delegate(jq1.7已经去掉) ,自1.7以后on为bind\live\delegate的替代品


.on( event , childSelecter, data, function, map)


例如 

$(“p”).on(“click”,”input”,{num:1},function(e){

alert( e.data.num );

})


移除:off\unbind


一次事件 .one()


3、jq事件委托机制
事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素。
例如:
$(“#ulA”).on(“click”,”li”,function(){
if( !$(this).attr(“name”)  ){
//处理一个ul下一条li的属性
}
})

将每个li点击监听委托给ul。

好处

性能好,不必每次遍历li。

针对新创建的元素也可以拥有事件。


4、继承有几种,有什么优缺点
(1)、prototype方式
例子:
function A(){.....}
function B(){...}

B.prototype = new A();//B继承A的属性


(2)、apply方式
例子:
function A(){.....}
function B(){ A.apply(this,[]) }
var one = B();


(3)、call+prototype方式
例子:
function A(){.....}
function B(){ A.call(this); }
B.prototype  = new A();
优缺点:如果父函数有参数(1)就不适用了
(2)的问题是apply后,实例one不属于A类型(one instanceof Afalse )
(3)的问题是new时要传一遍父类参数,会重现父类的属性和方法。


5、闭包概念,举例
官方解释:一个拥有很多变量并绑定这些变量的环境的表达式。
通俗来讲:定义在函数内部的函数,内部函数绑定了函数的变量。
举例:
 function  a(){
var num = 1;
function b(){
   console.log(  num++ );
}
return b;
}
var c = a();
c();

优点:包含变量num的安全,只有通过b函数才能访问,其他途径无法访问到。
缺点:会使变量一直保持在内存中,使内存消耗大。解决方法是在退出函数之前,将不使用的局部变量全部删除。


6、跨域请求,POST并跨域怎么办
只要协议、域名、端口有任何不同,都是不同域。
(1)、jq的$.ajax,datatype为jsonp,缺点是:只能为get方式请求,不重要参数只能跟随url发送。
(2)、CORS请求:xmlHttpRequest2,支持IE10+\chrome\FF
需要服务器加上header允许请求,支持get/post
创建举例:
function createCORSRequest( method, url){
var xhr = new XMLHttpRequest();
if( "withCredentials" in xhr ){
//withCredentials 是XMLHttpRequest2独有的
xhr.open( method, url, true );
}else if( typeof XDomainRequest != "undefined"){
//检测是否XDomainRequest可用,针对IE
xhr = new XDomainRequest();
xhr.open( method, url);
}else{
//CORS不被支持
xhr = null;
}
return xhr;
}
function makeCorsRequest(){
var url = "http://abcd.org";//前提是支持CORS的
var xhr = createCORSRequest( "GET", url);
if( !xhr ){
throw new Error("CORS不被支持");
return;
}
xhr.onload = function(){
var responseText = xhr.responseText;
var title = getTitle(responseText);
console.log(responseText);//继续其他代码
}
xhr.onerror = function(){
console.log("请求失败");
}
xhr.send();//发送数据
}


7、多个ajax异步请求如何判断都返回完成数据。
为每个请求添加唯一的flag标识,初始为false,当对应ajax成功进入success回调后将标识,改为true,当所有标识为true,执行后续操作。
轮询去请求参数遍历标识。


8、性能优化。
(1)、减少http请求:将图片合并为一个副图。
(2)、压缩传输文件。
(3)、将样式表放到head中,link代替@import,加快加载速度。
将js文件放到</body>之前。
使用外链。
(4)、精简js和css,js模块化。
(5)、js减少访问dom的次数,尽量缓存dom。

猜你喜欢

转载自blog.csdn.net/u013938465/article/details/50781651
今日推荐