总结分享一些基于jQuery的前端面试(含移动端常见问题)

本篇文章整理总结了一些基于jQuery的前端面试来分享给大家,里面jQuery的常见面试问题,以及移动端常见问题,希望对大家有所帮助! jQuery前端面试——含移动端常见问题 1...

本篇文章整理总结了一些基于jQuery的前端面试来分享给大家,里面jQuery的常见面试问题,以及移动端常见问题,希望对大家有所帮助!

总结分享一些基于jQuery的前端面试(含移动端常见问题)插图1

jQuery前端面试——含移动端常见问题

1、JQuery的源码看过吗?能不能简单概况一下它的实现原理?

jquery源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window对象参数,可以使window对象作为局部变量使用,好处是当jquery中访问window对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快的访问window对象。同样,传入undefined参数,可以缩短查找undefined时的作用域链。

(function(window,undefined){//用一个函数域包起来,就是所谓的沙箱//在这里边var定义的变量,属于这个函数域内的局部变量,避免污染全局//把当前沙箱需要的外部变量通过函数参数引入进来//只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数window.jQuery=window.$=jQuery;})(window);

jquery将一些原型属性和方法封装在了jquery.prototype中,为了缩短名称,又赋值给了jquery.fn,这是很形象的写法。

有一些数组或对象的方法经常能使用到,jQuery将其保存为局部变量以提高访问速度。

jquery实现的链式调用可以节约代码,所返回的都是同一个对象,可以提高代码效率。

jquery的优势就是链式操作,隐式迭代

2、jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?

返回的this指的就是当前操作后的jquery对象,为了实现jquery的链式操作

3、jquery中如何将数组转化为json字符串,然后再转化回来?

使用jquery全局方法$.parseJSON这个方法

4、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

①、jQuery中的$.extend浅拷贝

jQuery中的$.extend浅拷贝,拷贝对象A时,对象B将拷贝A的所有字段,如果字段是内存地址,B将拷贝地址,若果字段是基元类型,B将复制其值。它的缺点是如果你改变了对象B所指向的内存地址,你同时也改变了对象A指向这个地址的字段。

$.extend(a,b)

②、jQuery中的$.extend深拷贝

jQuery中的$.extend深拷贝,这种方式会完全拷贝所有数据,优点是B与A不会相互依赖(A,B完全脱离关联),缺点是拷贝的速度更慢,代价更大。

$.extend(true,a,b)

5、jquery.extend 与jquery.fn.extend的区别?

①、jQuery.extend(object);

它是为jQuery类添加类方法,可以理解为添加静态方法。如:

jQuery.extend({  min:function(a,b){returna<b?a:b;},  max:function(a,b){returna>b?a:b;});jQuery.min(2,3);//2jQuery.max(4,5);//5

jQuery.extend(target, object1, [objectN])用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

varsettings={validate:false,limit:5,name:"foo"};varoptions={validate:true,name:"bar"};jQuery.extend(settings,options);

结果:

settings=={validate:true,limit:5,name:“bar”}

②、jQuery.fn.extend(object);

$.fn是什么?

$.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。

查看jQuery代码,就不难发现。

jQuery.fn=jQuery.prototype={   init:function(selector,context){//.... };

原来jQuery.fn = jQuery.prototype

所以,它是对jQuery.prototype进行扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

③、区别

jQuery.fn.extend(object);扩展jQuery对象方法

jQuery.extend扩展jQuery全局方法

6、jQuery 的队列是如何实现的?队列可以用在哪些地方?

jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.

var_slideFun=[function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);}];$('#demo').queue('slideList',_slideFun);var_takeOne=function(){$('#demo').dequeue('slideList');};_takeOne();

7、谈一下Jquery中的bind(),live(),delegate(),on()的区别?

jquery中bind(),live(),delegate()都是基于on实现的

方法说明on是封装了一个兼容的事件绑定方法,在选择元素上绑定一个或多个事件的事件处理函数bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数live(type,[data],fn)给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的delegate(selector,[type],[data],fn)指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

差别:

.bind()是直接绑定在元素上

方法说明.bind()是直接绑定在元素上.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据.delegate()则是更精确的小范围使用事件代理,性能优于.live().on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

8、JQuery一个对象可以同时绑定多个事件,这是如何实现的?

jquery中事件绑定的函数中传递多个事件参数,执行事件的时候判断执行事件的类型

9、针对jQuery性能的优化方法?

基于Class的选择性的性能相对于Id选择器开销很大,因为需遍历所有DOM元素。

频繁操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。

比如:

varstr=$("a").attr("href");for(vari=size;i<arr.length;i++){}

for 循环每一次循环都查找了数组(arr) 的.length 属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快:

for(vari=size,length=arr.length;i<length;i++){}

10、Jquery与jQuery UI 有啥区别?

jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。

jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。

jQuery本身注重于后台,没有漂亮的界面,而jQuery UI则补充了前者的不足,他提供了华丽的展示界面,使人更容易接受。既有强大的后台,又有华丽的前台。jQuery UI是jQuery插件,只不过专指由jQuery官方维护的UI方向的插件。

11、jQuery和Zepto的区别?各自的使用场景?

zepto主要用在移动设备上,只支持较新的浏览器,好处是代码量比较小,性能也较好。

jquery主要是兼容性好,可以跑在各种pc,移动上,好处是兼容各种浏览器,缺点是代码量大,同时考虑兼容,性能也不够好。

zepto和jQuery选择器实现方法不一样,jQuery使用正则,zepto是使用querySelectAll

zepto针对移动端程序,Zepto还有一些基本的触摸事件可以用来做触摸屏交互,如:

①、tap事件

tap,singleTap,doubleTap,longTap

②、Swipe事件

swipe,swipeLeft,swipeRight,swipeUp,swipeDown

12、Zepto的点透问题如何解决?

①、“点透”是什么

你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接)。这个被定义为这是一个“点透”现象。

②、点透的解决方法:

方案一:来得很直接github上有个fastclick可以完美解决

https://github.com/ftlabs/fastclick,引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

window.addEventListener("load",function(){FastClick.attach(document.body);},false);

方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

方案三:延迟一定的时间(300ms+)来处理事件

13、移动端最小触控区域是多大?

移动端最小触控区域44*44px ,再小就容易点击不到或者误点

14、jQuery 的slideUp动画,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?

每次动画开始的时候先使用stop()函数停止当前未动完的动画

15、移动端的点击事件的有延迟,时间是多久,为什么会有?怎么解决这个延时?

click 有300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。

16、你从jQuery学到了什么?

首先明白了封装的好处,链式操作的原理,闭包的好处

17、请指出.get(),[],eq() 的区别。

方法说明.get是jquery中将jquery对象转换为原生对象的方法[]是采用了获取数组值的方式将jquery对象转换为原生对象的方法eq()是获取对象列表中的某一个jquery dom对象

18、请指出$ 和$.fn 的区别,或者说出$.fn 的用途。

$代表的是jquery对象

$.fn是代表的jQuery.prototype

$.fn是用来给jquery对象扩展方法的

19、jQuery取到的元素和原生Js取到的元素有什么区别

jQuery取到的元素是包含原生dom对象,和jQuery扩展的方法

20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

①、window.onload()

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

②、$(document).ready()

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

functionready(fn){if(document.addEventListener){//标准浏览器document.addEventListener('DOMContentLoaded',function(){//注销事件,避免反复触发document.removeEventListener('DOMContentLoaded',arguments.callee,false);fn();//执行函数},false);}elseif(document.attachEvent){//IEdocument.attachEvent('onreadystatechange',function(){if(document.readyState=='complete'){document.detachEvent('onreadystatechange',arguments.callee);fn();//函数执行}});}};

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/34283.html;
(0)
上一篇 2023年1月25日 下午4:17
下一篇 2023年1月25日 下午4:17

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部