• 【你的jQuery?是你的jQuery】(一)——jQuery的架子


    目的:

    了解jQuery整体结构,自己构造出$(oo).xx这种东西

    解析:

    在jQuery中,你会发现整篇满眼的“$(xx)”、“$(oo).css(xx)”这种,是的,它就是构造jQuery对象的构造函数简称,你可以这样理解:$==window.$==window.jQuery

    也就是说我们常用的$为widow对象下的一个属性,那么这个属性是怎么跑到window上的呢?

    我们先把源码中多余的代码去掉会看到:

    一:

    1 (function(window,undefined){
    2 
    3     //code
    4 
    5 })(window)

    说明:

    1、通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间下,你可以玩命定义你的var变量而不会破坏全局的命名空间。

    2、通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化

    3、参数列表中增加undefined,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。(undefined = "123";)这样。

    二:

    我们将代码扩充一下

     1 (function (window, undefined) {
     2   var jQuery = window.jQuery = window.$ = function (selector, context) {
     3    return new jQuery.fn.init(selector, context);
     4   }
     5   jQuery.fn = jQuery.prototype = {
     6     init: function (selector, context) {
     7        },
     8        jquery: "xxx"
     9     }
    10 jQuery.fn.init.prototype = jQuery.fn;
    11 })(window)
    12 alert($().jquery)    //成功构造出$(oo).xx这种东西

    说明:

    1、selector:也就是你传入$()内的参数,形如$("#id")、$(".class")、$("div p span")

    2、context:可选参数,会默认成当前节点的上下文

    3、new jQuery.fn.init:jQuery真正的入口,创建出各种jQuery对象

    4、jQuery.fn.init.prototype = jQuery.fn;此句为关键代码,将上一条说明中创建的jQuery实例对象的原型链连上jQuery的原型方法,原型链不太懂的同学可以看下这个【javascript继承】之——原型链继承和类式继承

    (本篇至此,其他内容未完,待续……)

    下一节提示:

    介绍jQuery的基本组成,了解到底什么是jQuery对象,以及常说的jQuery对象的”原型方法”和“静态方法”

  • 相关阅读:
    笔记
    作用域及this指向案例总结
    笔记
    JS 事件(捕获和冒泡 兼容性写法)
    tab标签
    笔记
    JS入门(10.16)
    JS入门(10.15)
    关键渲染路径
    Practice1小学四则运算(改进)
  • 原文地址:https://www.cnblogs.com/ccto/p/3076761.html
Copyright © 2020-2023  润新知