Jquery源码中的Javascript基础知识(三)

页面导航:首页 > 网络编程 > JavaScript > Jquery源码中的Javascript基础知识(三)

Jquery源码中的Javascript基础知识(三)

来源: 作者: 时间:2016-02-05 11:06 【

这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本:复制代码1 (function( window, undefined ) {2 code 定义变量3 jQuery = function( selector, context
这篇主要说一下在中jquery对象是怎样设计实现的,下面是相关代码的简化版本:
 
复制代码
 1 (function( window, undefined ) {
 2     // code 定义变量
 3     jQuery = function( selector, context ) {
 4         return new jQuery.fn.init( selector, context, rootjQuery );
 5     },
 6     // code 定义变量
 7     jQuery.fn = jQuery.prototype = {
 8         jquery: core_version,
 9         constructor: jQuery,
10         init: function( selector, context, rootjQuery ) {
11             // code 初始化、参数处理
12         }
13         // code 一些方法(each、ready、first、eq等)
14     }
15     jQuery.fn.init.prototype = jQuery.fn;
16     // code 其他
17     if ( typeof window === "object" && typeof window.document === "object" ) {
18         window.jQuery = window.$ = jQuery;
19     }
20 })( window );
复制代码
首先,回顾一下javascript中相关知识。
 
在javascript中特定类型的对象是通过构造函数来创建的,例如:
 
复制代码
 1 function Person(name){
 2     this.name = name;
 3     this.sayName = function(){
 4         alert(this.name);
 5     }
 6 }
 7 // 作为普通函数使用
 8 Person('Yanger90');
 9 window.sayName();
10 
11 // 作为构造函数使用
12 var person = new Person('Yanger90');
13 person.sayName();
复制代码
更好的方式-原型模式
 
复制代码
function Person(){}
Person.prototype = {
    name: "Yanger90",
    syaName: function(){
        console.log(this.name);
    }
};
var  person = new Person();
复制代码
每一个函数都有一个prototype(原型)属性,里面包含的属性和方法,是所有通过该构造函数创建的实例对象所共享的。对于一些公用的方法,像例子中的sayName方法,就可以放在原型中共享而不用像第一种方式那样,每个实例对象都要重新创建一遍。
 
 
 
好了,基础知识就简单介绍到这,详细可参阅《javascript高级程序设计》这本书。
 
回到jquery中,我们一般使用jquery语法类似这样:
 
$(element).css();
选择元素然后执行相应方法,那么前面的$(element)就应该是一个实例对象,再调用其方法。
 
我们看到在源码开始的部分就定义了jQuery变量:
 
jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
}
它确实返回了一个实例对象,构造函数是init,接着往下看。
 
复制代码
jQuery.fn = jQuery.prototype = {
    jquery: core_version,
    constructor: jQuery, // 修正以字面量方式重写原型对象造成的指向问题
    init: function( selector, context, rootjQuery ) {
        // code 初始化、参数处理
    }
    // code 一些方法(each、ready、first、eq等)
}
复制代码
找到init发现它是jQuery原型(prototype)中的一个方法。
 
 
 
问题来了,init方法中只是对参数进行了处理,并没有我们常用的each、ready、first、eq等方法,它们都在jQuery原型(prototype)中,所以还无法调用这些方法,那么继续往后看。
 
jQuery.fn.init.prototype = jQuery.fn;
这句话把init的原型指向了jQuery.fn,也就是jQuery.prototype,这样一来,jQuery原型(prototype)中的属性和方法就共享给了通过init构造函数创建的实例对象,也就实现了继承。
 
 
 
最后,在jquery源码的末尾有一句
 
window.jQuery = window.$ = jQuery;
jQuery是在匿名函数中定义的,所以外部是无法访问的,这里将它赋值给window对象的属性,这样我们就可以在外部直接使用了。
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<