zoukankan      html  css  js  c++  java
  • jQuery架构剖析

    对于jQuery的整体架构,经典之处有三:

    1、jQuery的无new构建

    2、jQuery的链式调用

    3、jQuery的插件接口

    想必兄弟姐妹们也觉得这架构不错哈,但有时又畏惧去拜读大量的jQuery源码,只好对它敬而远之了。

    哈哈,今天我就将其jQuery架构提炼出来,和大家一同分析研究下,jQuery是怎么实现这三个经典之处的。

    提炼的代码如下:

     1 <!DOCTYPE html> 
     2     <head>
     3         <title>jQuery</title>
     4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     </head>
     6     <body>
     7         <script>
     8 
     9            (function(window){
    10                 var temp=window.$=function(){
    11                     return new temp.fn.init();
    12                 };
    13                 temp.fn=temp.prototype={
    14                         init:function(){
    15                             return this;
    16                         },
    17                         attr:function(){
    18                             console.log(1);
    19                             return this;
    20                         }
    21                 }
    22                 temp.fn.init.prototype = temp.fn;
    23             })(window);
    24             //执行
    25             console.log( $ );
    26             
    27         </script>
    28     </body>
    29 </html>

    是不是吃惊,怎么会这么少,哈哈哈,不必吃惊,事实就是这样,如果你能理解其中的用意,那么jQuery的整体架构也就差不多了哦。

    下面我们就来一步一步地探其究竟。

    回想一下,当我们调用jQuery方法时,是怎么调用的呢?

    答案:$(‘xx’)

    是通过$来调用的,完全没有new一个对象好不好。

    jQuery是怎么做到的呢。通过$()方法,返回一个实例对象。详情见上代码中的第11行。

    这样它就不用new了撒。

    咦,第15行是什么?return this?

    what?

    聪明的你可能会说,那么11行处,return的this不就应该指向temp.fn吗?因为this指向调用者嘛。

    是的,this是指向它的调用者。

    但是请仔细看看它是通过的new创建的一个实例哦。

    那么this就是指向的temp.fn.init这个构造函数创建出来的实例啦。

    可能,你会问,我靠,为什么new一下就变了呢。哈哈,看来有必要了解一下new的过程哦。

    下面简单阐述下new都做了什么:

    1、创建一个新的对象,这个对象的类型是object;

    2、将这个对象的__proto__隐指针指向构造函数的prototype

    3、执行构造函数,当this关键字被提及的时候,使用新创建的对象的属性;

    4、返回新创建的对象

    所以return new temp.fn.init()就是返回的temp.fn.init创建的对象啦。

    大家注意到22行没,temp.fn.init.prototype = temp.fn,这一句其实就是将init的原型链指向jquery的原型链啦,这样temp.fn.init创建出来的实例就可以访问jquery.prototype里面的东东咯。也就是为什么我们能够通过$.fn扩展实例方法了哈。

    对于链式调用,其实就是在每个调用的方法中return this;嘛。就如上述代码中的19行一样咯。

    好啦,兄弟姐妹们,这下jQuery的架构三大特性被我们一步一步窥探清楚了哦。

    总结:

    jQuery利用匿名函数创建无污染的命名空间,通过window对象,将$符号抛给用户操作,利用原型链的知识构建面向对象。

    晚安everyone~

  • 相关阅读:
    HDU 1698 Just a Hook(线段树区间替换)
    NBOJv2 1034 Salary Inequity(DFS序+线段树区间更新区间(最值)查询)
    NBOJv2 1004 蛤玮打扫教室(线段树区间更新区间最值查询)
    NBOJv2 1050 Just Go(线段树/树状数组区间更新单点查询)
    POJ 3468 A Simple Problem with Integers(线段树区间更新区间查询)
    HDU 1754 I Hate It(线段树单点更新区间最值查询)
    HDU 1166敌兵布阵+NOJv2 1025: Hkhv love spent money(线段树单点更新区间查询)
    GDUT——1169: Krito的讨伐(优先队列BFS)
    HDU——2444The Accomodation of Students(BFS判二分图+最大匹配裸题)
    HDU——1045Fire Net(最大匹配)
  • 原文地址:https://www.cnblogs.com/giggle/p/5309170.html
Copyright © 2011-2022 走看看