前端问题--事件监听、继承、闭包、跨域、性能，匿名函数、html/css注意事项、css兼容
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 Afalse )
(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。
1、闭包、作用域
闭包就是有权访问另一个函数内部变量的函数。
这些函数定义的自由变量能不被释放。
保护了函数内部变量的安全性，太大会造成内存大量占用。
（1）闭包的第一个用途，其实上面已经提到了，就是产生它意义：可以读取函数内部的变量。
（2）闭包的第二个用途，那就是：可以让这些变量的值始终保持在内存中。
例如:
function f1(){
var n=999;
nAdd=function(){
n+=1
}
function f2(){
alert(n);
}
return f2;
}
var result=f1(); //把f1函数的返回值（而这个返回值是函数f2的形式）给result
result(); // 999 输出这个f2的返回值
nAdd(); //调用nAdd函数
result(); // 1000 这里就是闭包的第二个用途：f2这个闭包会让变量n的值始终保存在内存中
2、 匿名函数是什么，有什么作用
没有名字的函数。
function (){}
new Function(){}
不会造成全局变量的污染
3、 列举一些语义化标签
H5:<article> <section> <header><footer>
<p><ul><table><caption><address>
4、 编写HTML时需要考虑哪些问题
推荐html5声明文档
推荐使用UTF-8编码
img添加alt属性，增加可访问性。
采用栅格化处理。
书写注释
标签正确嵌套，一定要闭合。
用div等布局
代码采用树形结构，提高可读性。
模块之间必须保持独立，区块化布局。
5、 与前端开发关系比较紧密的HTTP状态码
1XX 表示消息
2XX 表示成功
3XX 表示重定向
4XX 表示请求错误
5XX 表示服务器端错误
200 请求正常
400 出现语法错误
404 无法找到指定位置资源
500 服务器遇到了意料不到的情况，不能完成客户的请求
6、写出常用的css hack
_ IE6
* IE6/7
!important IE7/Firefox
*+ IE7
\9 IE6/7/8
\0 IE8
条件hack
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7
<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上
7、IE浏览器下css兼容问题。
(1)、margin加倍：
在IE6下，div设置float时，左（右）margin会加倍。
解决方法：在这个div加上display:inline;
(2)、IE6 3px bug
当浮动元素和非浮动元素相邻时，会出现3px空隙。
解决方法：将非浮动元素添加float属性。
(3)、div包含img时，底部会出现留白。
解决方法：设置img元素为display:block;
8、编写css时需要考虑哪些问题
慎用 !important
建议使用具有语义化的classname或id
:link :visited :hover :active书写顺序
谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
不要用@import
属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”
9、求表达式的值
typeof([]) object
typeof({}) object
typeof(null) object
typeof(NaN) number
typeof((“abcd”)*1) number
typeof((“abcd”)+1) string
NaN == NaN false
! NaN==! NaN true
10、函数表达式：
var fnName= function(){}
11、函数声明
function fnName(){}
函数声明会在代码执行以前加载到作用域中，函数表达式需要等到执行到该行才会加入到作用域中。
浙公网安备 33010602011771号