jquery构造函数分析

jquery是面向对象的写法也有构造函数,每次调用jquery方法是就会实例化一个jqeury对象,但是jQuery的写法却非常高明值得我们学习。

js虽然不是面向对象的语言,却又很多面向对象的写法,这里推荐大家看一下图灵的《javascript高级程序设计》中的面向对象的程序设计部分。在众多方法中比较常见的写法是构造加原型方式,下面举例:

var Person=function(name,age){
   this.name=name;
   this.age=age;
}
Person.prototype={
  constructor:Person,
  init:function(msg){
    this.say(msg);
  },
  say:function(msg){
  alert(this.name+‘说‘+msg);
  }
};
var tom=new Person(‘tom‘,23); 
tom.init(‘你好‘);// tom说你好

那再来看看jQuery的构造函数吧

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor ‘enhanced‘
return new jQuery.fn.init( selector, context, rootjQuery );
},

可以看到在jQuery真正的函数是init方法,当我们调用jquery时会new init() 而不是 new jQuery() .

jQuery.fn是啥呢,在后面我们会看到这样一句代码
jQuery.fn = jQuery.prototype = {...

这样就很好理解了,其实jQuery.fn就是原型对象也就是说在jQuery原型里面有一个init方法,这个方法是真正的构造函数。这样写的好处就是不需要在写$().init()这样的操作,直接就初始化了,但是还有一个问题就是既然init才是构造函数那我们写在jQuery上面的那么方法实例不是不能调用吗?init的实例化自然只能调用init的方法啦,往后看到这样一句代码

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

之前讲过jQuery.fn=jQuery.protype,这就意味着jQuery的原型对象赋给了init的原型,这样jQuery的原型方法自然init也就都有了,通过这样构造方式S使得使用jQuery方法非常简单既不需要new jQuery()的操作也不需要手动初始化就行调用普通函数一样简单。

时间: 2024-12-22 21:42:19

jquery构造函数分析的相关文章

jQuery构造函数init参数分析(二)

接着上一篇随笔讨论. 如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string" ) {...} 开始分不同的情况处理 // Are we dealing with HTML string or an ID? if ( selector.charAt(0) === "<" && selector.charAt( selector.le

jQuery构造函数init参数分析(三)

分析完了字符串情况剩下的就不多了. 5.参数selector是函数 这个就是很容易想到了,首先说一下dom加载.我们通常在head里面写脚本的时候需要等待文档加载在进行处理,js是这么写的 1 window.onload=function(){ 2 your code... 3 } 但是这样是需要等待所有资源都加载完毕才会执行,如果页面有很多图片的话就会加载的很慢.dom2级呢有一个加载完成事件DOMContentLoad比较好用,这个事件是会在html文档结构加载完毕触发.比如说这个页面有10

jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数

一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,context){ //... }; //工具方法utilities //回调函数 callbacks //异步队列 Defered Object //浏览器功能测试 Support //数据缓存 Data //队列 Queue //属性操作 Attributes //事件系统 Events //选择器

使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta ht

jQuery构造函数init参数分析(一)

在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var

jquery架构分析-core

// jquery的架构分析 var jQuery = function(selector,context){     return new jQuery.fn.init(selector,context); } //  jQuery.fn = jQuery.prototype = {     // 主要写一些内部调用方法     // 类似get.pushStack等等方法 } // 最核心的方法  extend 方法 jQuery.extend = jQuery.fn.extend = fu

jQuery框架分析第一章: 第一个匿名函数

我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码 首先你能看到所有代码被一个 (function(window,undefined){ })(window) 这是个什么东西.. 首先,这是一个匿名函数(不懂?那就先去谷歌下吧): 其次,这是一个自调用匿名函数: 这段代码做了三件事 第一件:创建一个只给jQuery用的空间,我们估且就叫 “私有空间”,与C++的命名空间很相似,为了保证jQuery不与其他JavaScrip

JQuery.index()分析

index()函数用于获取当前jQuery对象中指定DOM元素的索引值. 该函数属于jQuery对象(实例). 语法 jQueryObject.index( [ object ] ) 参数 参数 描述 object 可选/String/Element/jQuery类型表示指定元素的对象. jQuery 1.4新增支持:可以不指定object参数.object参数可以为字符串(选择器). 参数object可以是DOM元素.jQuery对象或字符串.如果参数object是字符串,则将其视作jQuer

匿名内部类构造函数分析

先看看下面的代码能不能编译通过: public static void main(String[] args) { List l1 = new ArrayList(); List l2 = new ArrayList(){}; List l3 = new ArrayList(){{}}; System.out.println(l1.getClass() == l2.getClass() ); System.out.println(l2.getClass() == l3.getClass() );