1.你觉得jQuery或zepto源码有哪些写的好的地⽅
jquery源码封装在⼀个匿名函数的⾃执⾏环境中,有助于防⽌变量的全局污染,然后通过传⼊window对象参数,可以使window对象作为局部变量使⽤,好处是当jquery中访问window对象的时候,就不⽤将作⽤域链退回到顶层作⽤域了,从⽽可以更快的访问window对象。同样,传⼊undefined参数,可以缩短查找undefined时的作⽤域链
( function ( window, undefined ) {
window. jQuery = window. $ = jQuery;
} ) ( window ) ;
jquery将⼀些原型属性和⽅法封装在了jquery.prototype中,为了缩短名称,⼜赋值给了jquery.fn,这是很形象的写法 有⼀些数组或对象的⽅法经常能使⽤到,jQuery将其保存为局部变量以提⾼访问速度 jquery实现的链式调⽤可以节约代码,所返回的都是同⼀个对象,可以提⾼代码效率
2 jQuery 的实现原理
(function(window, undefined) {})(window); jQuery 利⽤ JS 函数作⽤域的特性,采⽤⽴即调⽤表达式包裹了⾃身,解决命名空间和变量污染问题 window.jQuery = window.$ = jQuery; 在闭包当中将 jQuery 和 $ 绑定到 window 上,从⽽将 jQuery 和 $ 暴露为全局变量
3 jQuery.fn 的 init ⽅法返回的 this 指的是什么对象
jQuery.fn 的 init ⽅法 返回的 this 就是 jQuery 对象 ⽤户使⽤ jQuery() 或 $() 即可初始化 jQuery 对象,不需要动态的去调⽤ init ⽅法
4 jQuery.extend 与 jQuery.fn.extend 的区别
$.fn.extend() 和 $.extend() 是 jQuery 为扩展插件提拱了两个⽅法 $.extend(object) ; // 为jQuery添加“静态⽅法”(⼯具⽅法)
$. extend ( {
min : function ( a, b ) { return a < b ? a : b; } ,
max : function ( a, b ) { return a > b ? a : b; }
} ) ;
$. min ( 2 , 3 ) ;
$. max ( 4 , 5 ) ;
$.extend([true,] targetObject, object1[, object2]); // 对targt对象进⾏扩展
var settings = { validate : false , limit : 5 } ;
var options = { validate : true , name : "bar" } ;
$. extend ( settings, options) ;
$.fn.extend(json) ; // 为jQuery添加“成员函数”(实例⽅法)
$. fn. extend ( {
alertValue : function ( ) {
$ ( this ) . click ( function ( ) {
alert ( $ ( this ) . val ( ) ) ;
} ) ;
$ ( "#email" ) . alertValue ( ) ;
5 jQuery 的属性拷⻉(extend)的实现原理是什么,如何实现深拷⻉
浅拷⻉(只复制⼀份原始对象的引⽤) var newObject = $.extend({}, oldObject); 深拷⻉(对原始对象属性所引⽤的对象进⾏进⾏递归拷⻉) var newObject =$.extend(true, {}, oldObject);
6 jQuery 的队列是如何实现的
jQuery 核⼼中有⼀组队列控制⽅法,由 queue()/dequeue()/clearQueue() 三个⽅法组成。 主要应⽤于 animate() , ajax ,其他要按时间顺序执⾏的事件中
var func1 = function ( ) { alert ( '事件1' ) ; }
var func2 = function ( ) { alert ( '事件2' ) ; }
var func3 = function ( ) { alert ( '事件3' ) ; }
var func4 = function ( ) { alert ( '事件4' ) ; }
$ ( '#box' ) . queue ( "queue1" , func1) ;
$ ( '#box' ) . queue ( "queue1" , func2) ;
$ ( '#box' ) . queue ( "queue1" , [ ] ) ;
$ ( '#box' ) . queue ( "queue1" , [ func3, func4] ) ;
$ ( '#box' ) . queue ( "queue1" ) ;
$ ( '#box' ) . dequeue ( "queue1" ) ;
$ ( '#box' ) . dequeue ( "queue1" ) ;
$ ( '#box' ) . clearQueue ( "queue1" ) ;
7 jQuery 中的 bind(), live(), delegate(), on()的区别
bind() 直接绑定在⽬标元素上 live() 通过冒泡传播事件,默认 document 上,⽀持动态数据 delegate() 更精确的⼩范围使⽤事件代理,性能优于 live on() 是最新的 1.9 版本整合了之前的三种⽅式的新事件绑定机制
8 是否知道⾃定义事件
事件即“发布/订阅”模式,⾃定义事件即“消息发布”,事件的监听即“订阅订阅” JS 原⽣⽀持⾃定义事件,示例:
document. createEvent ( type) ;
event. initEvent ( eventType, canBubble, prevent) ;
target. addEventListener ( 'dataavailable' , handler, false ) ;
target. dispatchEvent ( e) ;
jQuery ⾥的 fire 函数⽤于调⽤ jQuery ⾃定义事件列表中的事件
9 jQuery 通过哪个⽅法和 Sizzle 选择器结合的
Sizzle 选择器采取 Right To Left 的匹配模式,先搜寻所有匹配标签,再判断它的⽗节点 jQuery 通过 $(selecter).find(selecter); 和 Sizzle 选择器结合
10 jQuery 中如何将数组转化为 JSON 字符串,然后再转化回来
$. array2json = function ( array ) {
return JSON . stringify ( array) ;
}
$. json2array = function ( array ) {
return JSON . parse ( array) ;
}
var json = $. array2json ( [ 'a' , 'b' , 'c' ] ) ;
var array = $. json2array ( json) ;
11 jQuery ⼀个对象可以同时绑定多个事件,这是如何实现的
$ ( "#btn" ) . on ( "mouseover mouseout" , func) ;
$ ( "#btn" ) . on ( {
mouseover : func1,
mouseout : func2,
click : func3
} ) ;
12 针对 jQuery 的优化⽅法
缓存频繁操作 DOM 对象 尽量使⽤ id 选择器代替 class 选择器 总是从 #id 选择器来继承 尽量使⽤链式操作 使⽤时间委托 on 绑定事件 采⽤ jQuery 的内部函数 data() 来存储数据 使⽤最新版本的 jQuery
13 jQuery 的 slideUp 动画,当⿏标快速连续触发, 动画会滞后反复执⾏,该如何处理呢
在触发元素上的事件设置为延迟处理:使⽤ JS 原⽣ setTimeout ⽅法 在触发元素的事件时预先停⽌所有的动画,再执⾏相应的动画事件: $(‘.tab’).stop().slideUp();
14 jQuery UI 如何⾃定义组件
通过向 $.widget() 传递组件名称和⼀个原型对象来完成 $.widget(“ns.widgetName”, [baseWidget], widgetPrototype);
15 jQuery 与 jQuery UI、jQuery Mobile 区别
jQuery 是 JS 库,兼容各种PC浏览器,主要⽤作更⽅便地处理 DOM 、事件、动画、 AJAX jQuery UI 是建⽴在 jQuery 库上的⼀组⽤户界⾯交互、特效、⼩部件及主题 jQuery Mobile 以 jQuery 为基础,⽤于创建“移动Web应⽤”的框架
16 jQuery 和 Zepto 的区别? 各⾃的使⽤场景
jQuery 主要⽬标是 PC 的⽹⻚中,兼容全部主流浏览器。在移动设备⽅⾯,单独推出 `jQuery Mobile Zepto 从⼀开始就定 位移动设备,相对更轻量级。它的 API 基本兼容 jQuery`,但对PC浏览器兼容不理想
17 jQuery对象的特点
只有 JQuery 对象才能使⽤ JQuery ⽅法 JQuery 对象是⼀个数组对象