zoukankan      html  css  js  c++  java
  • 【你的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对象的”原型方法”和“静态方法”

  • 相关阅读:
    常见寻找OEP脱壳的方法
    Windows内核原理系列01
    HDU 1025 Constructing Roads In JGShining's Kingdom
    HDU 1024 Max Sum Plus Plus
    HDU 1003 Max Sum
    HDU 1019 Least Common Multiple
    HDU 1018 Big Number
    HDU 1014 Uniform Generator
    HDU 1012 u Calculate e
    HDU 1005 Number Sequence
  • 原文地址:https://www.cnblogs.com/ccto/p/3076761.html
Copyright © 2011-2022 走看看