澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-09-16 19:56 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

Jquery源码中的Javascript基础知识,jQuery中创建实例

那是他为了防止频仍的操作jQuery.prototype,所以用jQuery.fn缓存了jQuery.prototype。

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

那篇主要说一下在源码中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对象的习性,那样大家就足以在外表直接利用了。

那篇首要说一下在源码中jquery对象是什么样设计落成的,上面是连锁代码的简化版本: 复制代码 1 (fu...

funtion jQuery( selector, context){
  return new jQuery.fn.init( selector, context );
}

jQuery.fn.init.prototype = jQuery.fn;
那边她有一个如此的处理,把jQuery.fn赋值给了jQuery.fn.init.prototype ,这一步很入眼。作者门看看那些是怎么样。

您大概感兴趣的小说:

  • jQuery学习笔记之jQuery原型属性和方式
  • jQuery 版成分拖拽原型代码
  • combox创新版 页面原型参谋dojo的,比互联网jQuery的这三个combox成效强,代码更加小
  • Javascript学习笔记之 对象篇(一) : 对象的运用和质量
  • jQuery学习笔记之 Ajax操作篇(三) - 进程管理
  • jQuery学习笔记之 Ajax操作篇(二) - 数据传递
  • jQuery学习笔记之 Ajax操作篇(一) - 数据加载
  • Javascript 学习笔记之 对象篇(二) : 原型对象

jQuery.fn是jQuery.prototype

以此管理相当于

那几个的拍卖实在是非常神奇,内处了实例成立不用使用者用new去生成实例,又相当卓越的拍卖了prototype保证多实例分享方法收缩能源开荒。

jQuery.prototype = jQuery.prototype.init.prototype

其它大家注意到这些管理:

此处能够见到jQuery是有构造函数的,也是用了new 成立实例的。那么jQuery.fn是何许呢?前面有个这么的管理:

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:Jquery源码中的Javascript基础知识,jQuery中创建实例

关键词: 澳门威利斯人