本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> web前端技术
立即购买视频教程 前端面试题-事件监听、继承、闭包、跨域、性能
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-19 23:29:11
前端面试题-事件监听、继承、闭包、跨域、性能

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



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。


1、闭包、作用域
闭包就是有权访问另一个函数内部变量的函数。
这些函数定义的自由变量能不被释放。
保护了函数内部变量的安全性,太大会造成内存大量占用。

(1)闭包的第一个用途,其实上面已经提到了,就是产生它意义:可以读取函数内部的变量。
(2)闭包的第二个用途,那就是:可以让这些变量的值始终保持在内存中。
例如:

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片

  1. function f1(){    

  2.        var n=999;    

  3.        nAdd=function(){    

  4.            n+=1    

  5.        }    

  6.        function f2(){    

  7.      alert(n);    

  8.    }    

  9.        return f2;    

  10.   }    

  11.    var result=f1();   //把f1函数的返回值(而这个返回值是函数f2的形式)给result    

  12.    result();          // 999   输出这个f2的返回值    

  13.    nAdd();            //调用nAdd函数    

  14.    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(){}
函数声明
function fnName(){}
函数声明会在代码执行以前加载到作用域中,函数表达式需要等到执行到该行才会加入到作用域中。


复制链接 网友评论 收藏本文 关闭此页
上一条: 微信小程序第一批吃螃蟹的人  下一条: HTML5 Canvas学习笔记-处理鼠标事件
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
金三银四跳槽季—前端面试汇总
Sublime常用插件汇总(全)
大前端学习路线
如何克服前端学习进步慢的问题
web前端常见基础问题
阿里前端面试经历(转载)
Web前端需要掌握技术汇总(转)
ESLint详解-让你的代码更加规范
通过userAgent适配 PC端和移动端网…
js操作DOM中需要注意的问题
Promise编程简介
Emmet语法和实例
新手所必须掌握的前端知识汇总
移动端视口的相关概念及其适配方案…
上传图片立即预览
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3