(function( window, undefined) {

    var jQuery = (function() {
       // 构建jQuery对象
       var jQuery = function( selector, context ) {
           return new jQuery.fn.init( selector, context, rootjQuery );
       }

       // jQuery对象原型
       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init:  function ( selector, context, rootjQuery ) {
           }
       };

       // 合并内容到第一个参数中,后续大部分功能都通过该函数扩展
       // 通过jQuery.fn.extend扩展的函数,大部分都会调用通过jQuery.extend扩展的同名函数
       jQuery.extend = jQuery.fn.extend = **function**() {};

       // 在jQuery上扩展静态方法
       jQuery.extend({

       });

        // 到这里,jQuery对象构造完成,后边的代码都是对jQuery或jQuery对象的扩展
       return jQuery;

    })();

    window.jQuery = window.$ = jQuery;
})(window);

直白在拔取jQuery,也间接想更深层次的就学jQuery,下边就从jQuery的协会说起。并因此一个小例子,完结一个大约的选拔器获取文本内容的作用。

由于undefined可以被重写,被修改为其他的值,因此将undefined作为参数传入,可以保证undefined确实是未定义。
//构造jQuery对象
var jQuery = function(selector,context){
    return new jQuery.fn.init(selector,context,rootjQuery);
}

pic1.png

  • jQuery对象构造函数

那里只兑现了依照id来查找到切实可行的元素,其余拓展的不二法门,如基于类名来贯彻查找
都可以写在init函数中。

jQuery对象不是透过 jQuery,new jQuery 创造的,而是经过 new
jQuery.fn.init
创制的。定义了jQuery对象,实际就是一个函数,这一个函数重返的是new
jQuery.fn.init( selector, context, rootjQuery
);,所以jQuery对象就是*** jQuery.fn.init*** 实例。

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype

这里会有点绕,我也是参考了别人的网站上写的。
所有挂载到jQuery.fn的方法,相当于挂载到了jQuery.prototype,
即挂载到了jQuery 函数上(一开始的 jQuery = function( selector, context ) ),
但是最后都相当于挂载到了jQuery.fn.init.prototype,
即相当于挂载到了一开始的jQuery 函数返回的对象上,即挂载到了我们最终使用的jQuery对象上。
  • 上面大家就来看jQuery.fn.init
    jQuery.fn.init的听从是对传进来的selector参数举办辨析,进行各类不相同的处理,然后生成jQuery对象。

到此基本的知识点就讲到那里,咱们来看jQuery源码的结构

上面是仿照jQuery落成简单的收获元素内容

  • jQuery原型
    jQuery的原型就是jQuery.fn,所以在fn上加上的办法可以在别的jQuery对象中平素调用。
(function(window,undefined){
    var jQuery = ;
    window.jQuery = $.jQuery = jQuery;
})(window);
小心:var rootjQuery = window.document;那句话不要不难。

参照小说:1
2

这个init函数就是原型,jQuery函数构造函数。
这个函数接收三个参数,分别是选择器,上下文和root,
这个root在return new jQuery.fn.init( selector, context, rootjQuery );已经定死了,
就是rootjQuery 就是 document对象,
所以实际上只有两个参数可用,就是selector和context。

其一协会意味着创制一个匿名函数并且立时实施。通过这么些匿名函数,创设了一个“私有”的命名空间,可防止备变量争执污染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <div id="testText">
        测试文本
    </div>
</body>
<script>
    (function(window,undefined){
        var rootjQuery = window.document;
        var jQuery = (function(){
            var jQuery = function(selector,context){
                return new jQuery.fn.init( selector, context, rootjQuery );
            }

            jQuery.fn = jQuery.prototype ={
                construct: jQuery,
                init: function( selector, context, rootjQuery ){
                    var that = this;
                    that.ele = null;
                    that.value = '';
                    if(selector.charAt(0) === '#'){
                        console.log(selector);
                        that.ele = document.getElementById(selector.slice(1));
                    }
                    that.getValue = function(){
                        that.value = that.ele ? that.ele.innerHTML : 'No value';
                        return that;
                    };
                    that.showValue = function(){
                        return that.value;
                    };
                }
            };

            jQuery.fn.init.prototype = jQuery.fn;
            return jQuery;
        })();

        window.jQuery = window.$ = jQuery;
    })(window);


    //测试
    var testText = $('#testText').getValue().showValue(); //
    alert(testText);
</script>
</html>
根据selector和context参数的不同,分情况处理,依次处理了如下几种情况  
 1, selector为空,则直接返回空的jquery对象  
 2,如果selector是字符串,分如下几种情况  
     2.1, selector是 '<xxx>'类型的,则直接创建html片段,
          同时如果context是plainObject则把其中的属性全部赋值给创建出来的html片段  
     2.2,如果selector是一个id选择器,则直接调用getElementById来选择元素  
     2.3, 如果context为空,调用rootjQuery.find(selector),
          如果context是jquery对象,则直接调用context.find(selector)  
     2.4,到这里,说明context也是一个选择器,则直接调用$(context).find(selector)  
 3, 如果selector是一个DOMElement,则直接使用,不用去找了  
 4, 如果selector是一个函数,则在documentready时调用此函数  
 5,兼容另一种写法,即直接传一个对象 {selector:xxx, context:xxx}

  • 在jQuery源码,你会看出上面的布局:

相关文章

网站地图xml地图