jQuery粗略源码解析1 构造jQuery对象

2020-02-17 本文已影响0人波拉拉

1 整个jQuery的结构

(function (window,undefined) {
//        构造jQuery对象
        var jQuery=function () {
            var jQuery=function (select,context) {
                return new jQuery.fn.init(select,context,rootjQuery);
            };
            return jQuery;
        }();
//        工具方法
//        回调函数列表
//        异步对象
//        功能测试
//        数据缓存
//        队列
//        属性操作
//        事件系统
//        选择器
//        DOM遍历  过滤查找
//        DOM操作
//        样式操作
//        Ajax异步请求
//        动画
//        坐标尺寸等
        window.jQuery=window.$=jQuery;
    })(window);

2 构造函数的7种用法

2.1 jQuery(selector [,context])

当选择器是#id时，内部调用document.getElementById()，其他是调用.find()方法。

$(".my").click(function () {
        $("span",this).text("bolala");
    })

2.2 jQuery(html[,ownerDocument])

当传入的是单独标签时，会调用原生的createElement，当是复杂html时调用$.buildFragment()创建。
第二个可选参数ownerDocument指定文档对象，默认是当前的document。

$("<p>BBQ</p>").appendTo($(".my"));

2.3 jQuery(element)

常用于事件监听中，将DOM元素封装成jq对象。

  $(".my").click(function () {
        $(this).slideToggle();//封装DOM元素
    })

2.4 jQuery(object)

将js对象封装成jq对象。

2.5 jQuery(callback)

相当于在document上绑定ready事件。

$(function () {
        console.log("触发事件")
    });
    $("document").ready(function () {
        console.log("触发ready事件")
    })//两个效果相同

2.6 jQuery(jQuery object)

传入jq对象，创建jq对象副本引用相同的DOM元素。

2.7 jQuery()

不传入参数，返回空jq对象。

3 jQuery构造函数的结构

(function (window,undefined) {
//        构造jQuery对象
        var jQuery=(function () {
            var jQuery=function (select,context) {
                return new jQuery.fn.init(select,context,rootjQuery);
            };//3
//            jQuery构造函数的原型
            jQuery.fn=jQuery.prototype={
                constructor:jQuery,
                init:function (select,context,rootjQuery) { }
//                其他原型属性和方法
            };//5
            jQuery.fn.init.prototype=jQuery.fn;//6
            jQuery.extend=jQuery.fn.extend=function () { };//7
            jQuery.extend({
//                jQuery上扩展的静态属性和方法
            });//8
            return jQuery;//4
        })();//2
        window.jQuery=window.$=jQuery;
    })(window);//1

1处执行自调用匿名函数，执行所有代码。
2处返回jQuery，后面暴露给window,并且定义$简写。
3+4处又定义一个jQuery并返回给外层jQuery，3处的函数就是一个构造函数。

 console.log($);
    /*
     * ƒ ( selector, context ) {
     *   return new jQuery.fn.init( selector, context, rootjQuery );
     * } 这就是jQuery构造函数
     */

5处覆盖构造函数的原型对象，也定义了原型方法jQuery.fn.init方法，实际上当调用构造函数时，返回的是init的实例，
另外还有一些其他的原型属性和方法。
6处用jQuery.fn覆盖jQuery.fn.init的原型。
7处定义extend方法合并多个对象到第一个对象。
8处定义构造函数上的静态属性和方法。

tips1:

return new jQuery.fn.init(select,context,rootjQuery);

这样写当我们创建jQuery对象时，可以省略new直接写jQuery()。

tips2:

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

jQuery构造函数实际上是init的实例，用jQuery的原型覆盖init的原型可以使init()的实例访问到jQuery构造函数的原型属性和方法。

4 .extend([deep,] target,object1 [,objectN])

jQuery.extend()是扩展静态属性和方法，jQuery.fn.extend()是扩展原型属性和方法。
用法：如果有两个或更多的对象，会合并到第一个对象，如果只用一个对象，jQuery和jQuery.fn会被当成目标对象，通过这种方式可以添加属性和方法，常常用于编写插件和处理函数的参数。

var obj=$.extend({1:"bolala",2:"hashqi"},{2:"bbq"});
    console.log(JSON.stringify(obj));//{"1":"bolala","2":"bbq"}

5 原型属性和方法

selector 选择器表达式
jquery 版本号
length 元素个数
size() 元素个数

 $content=$("ul li");
    console.log( $content.selector);//ul li
    console.log( $content.jquery);//1.7.1
    console.log( $content.length);//5
    console.log( $content.size());//5

toArray() 将jQuery对象这种类数组转换为真正的数组
（类数组：具有length，并且有数组下标，例如函数参数argument）
get() 有参数时返回指定位置的DOM元素，没有参数时调用toArrary()

$content=$("ul li");
    console.log( $content.toArray());//所有DOM的数组
    console.log( $content.get());//所有DOM的数组
    console.log( $content.get(2));//第三个li DOM元素

$.each()静态遍历方法，对于数组和类数组通过下标遍历，其他对象通过属性名(for-in)遍历。
each()遍历jq对象并执行函数，直接用$.each()实现,所以一定是数字下标。

 $content=$("ul li");
    $content.each(function (i,item) {
        console.log(i+":"+item);
//        0:[object HTMLLIElement]等
    });
    var obj={name:"bolala",age:25,msg:"hello"} ;
    $.each(obj,function (i,item) {
        console.log(i+":"+item);
        //name:bolala等
    })

$.map()遍历数组或对象处理执行函数，结果放入新数组中。
map()遍历jq对象处理执行函数，结果放入新jq对象中。

  $content=$("ul li");
    console.log($content.map(function (i, item) {
        return $(this).text();
    }).get().join(","));//1,2,3,4,5

    console.log($.map([3,6,2,5],function (n,i) {
        return n+2;
    })); //[5, 8, 4, 7]

.pushStack() 入栈
.end() 出栈返回上一个筛选结果

$("ul").css({"background": "red"})
        .find("li").height("50px")
        .end().css({"color": "white"})

.eq() 指定位置的元素
.first() 第一个元素
.last() 最后一个元素
.slice() 一个范围内的元素

console.log($("ul li").slice(0, 2));//前两个元素

.push() 末尾添加
.sort() 排序
.splice() 插入，删除，替换等

6 静态属性和方法

jquery.noConflict() 解除$的引用
jQuery.parseJSON() 解析成js数据

    var obj={name1:[{item1:"1",item2:"2",item3:"3"}],name2:[{item1:"1",item2:"2",item3:"3"}]};
    var str = '[{"name": "bolala", "age": "24"},{"name": "bolala", "age": "24"}]';//json数组
    console.log($.parseJSON(str));
    console.log(JSON.parse(str));
    console.log(JSON.stringify(obj));
    //{"name1":[{"item1":"1","item2":"2","item3":"3"}],"name2":[{"item1":"1","item2":"2","item3":"3"}]}

jQuery.now() 当前时间的毫秒表示

    console.log($.now());//1582010627439