jQuery源码的简单理解及其引申的相关问题的解答

1.jQuery运用了沙箱模型,使用闭包来隔离变量,制造出块级作用域,防止全局变量污染。

    (function(window,undefined){
        /*源码*/
    })(window)

2.jQuery在闭包内导出局部变量为window的全局变量,对外暴露出$和jQuery两个关键字。

    window.jQuery = window.$ = jQuery;

3.jQuery选择器的实现原理及其原型对象。

jQuery最核心的功能就是选择器。选择器简单来说就是找到DOM对象的工具。
在jQuery源码中,可以发现,jQuery对象其实就是init对象

    jQuery = function(selector,context){
        return new jQuery.fn.init(selector,context);
    }

在源码中可以发现,jQuery.fn就是jQuery对象的原型

    jQuery.fn = jQuery.prototype;
    jQuery.fn.init.prototypt = jQuery.fn;

由上可知,init对象和jQuery对象有相同的原型,所以在上面return init,就与jQuery对象有相同的属性和方法了。

引申问题:

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

    init: function( selector, context, rootjQuery ) {
        var match, elem, ret, doc;

        // Handle $(""), $(null), or $(undefined)
        if ( !selector ) {
      
            console.log(this);    // this是个空的类数组对象,这是为什么?
        
            return this;
        }

这里返回的this就是jQuery.fn(=jQuery.prototype),也就是一个jQuery原型的实例。
返回this是因为要生成对于对象的操作,所以需要生成这个DOM元素的jQuery实例。

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

1.原生JSON方法:

    var arr = [1,2,3,4,5,6];
    var jsonStr = JSON.stringify(arr);
    console.log(jsonStr);//"[1,2,3,4,5,6]"
    var arr_ = JSON.parse(jsonStr);
    console.log(arr_);//obj:[1, 2, 3, 4, 5, 6]
    console.log("arr = ? arr_:");
    console.log(arr == arr_);//false

2.jQuery定义了parseJSON()方法,但没有定义stringify()方法,所以后者要自己添加

    jQuery.parseJSON = function( data ) {
        return JSON.parse( data + "" );
    };

自己添加stringify

    $.fn.stringify = function() {
    return JSON.stringify(this);
    }

    var jsonStr = $([1,2,3]).stringify();
    alert(jsonStr);//"{"0":1,"1":2,"2":3,"length":3}"

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

复制属性或者方法要区分是基本类型(复制)还是引用类型(复制了指针)。

深复制就是要把对象类型或者数组类型的属性依次遍历,重新赋给新生成的对象,

基本类型:Number、String、Boolean、null、Undefined不存在深浅复制的问题,复制都是深复制。

引用类型:Object(一般的对象、Array)这个区分浅复制(复制指针,修改会改变原来的),深复制(从新生成一个对象或者数组,依次复制每个元素,或者JSON对象方法,转成字符串,再转回来就回程一个新的对象)

4.针对 jQuery 的优化方法?

1、总是使用#id去寻找element.

在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。

2、在Classes前面使用Tags

在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

注意:在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面 加Tags。

3、缓存jQuery对象,对于同一个dom的多个操作的时候,最好缓存到一个变量上,就像len = arr.length; 避免多次超找或者计算。

提示:使用$前辍表示我们的本地变量是一个jQuery包集。记住,不要在你的应该程序里出现一次以上的jQuery重复的选择操作。 额外提示:延迟存储jQuery对象结果。

4、更好的利用链,连式操作,避免多写代码,或者查询。

5、使用子查询

jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

主要使用find实现:

var $traffic_light = $('#traffic_light'), 
 
$active_light = $traffic_light.find('input.on'), 
 
$inactive_lights = $traffic_light.find('input.off');

提示:可以用逗号隔开一次定义多个本地变量,这样可以节省一些字节。

6、限制直接对DOM操作

7、事件委托(又名:冒泡事件)

除非特别说明,每一个JavaScript事件(如click, mouseover 等)在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。

8、消除查询浪费

9、遵从$(windows).load

10、压缩JS

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

jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它可以控制需要连续按序执行的函数,

主要应用于animate()方法, ajax以及其他要按时间顺序执行的事件中.

了解部分:
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);

当有两个参数传入时, 第一个参数还是默认为fx的的队列名,

第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.移除然后执行,知道全部执行完成。
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容