jQuery工厂函数$()

jQuery中最常用的工厂函数就是$(),它本质上就是一个DOM对象,但是它所使用的方法都封装在了jQuery上,所以我们不能通过$()使用JavaScript的方法,同样DOM对象也不能使用jQuery上的方法

我们以$为开始,引出整个jQuery的架构
以jQuery的1.11.3版本举例,$作为一个函数名出现的地方是在源码的最后:

	window.jQuery = window.$ = jQuery;

其中的jQuery是前面定义的一个函数,在源码第70行中出现

	jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.fn.init( selector, context );
	}

这个函数相当于一个工厂函数,它内部返回了一个对象,这样就可以不用new的方式创建jQuery对象了
所以new $().xxx 和 $().xxx 就没有区别了,这也符合jQuery的设计理念“write less, do more”

在源码第2882行中:

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

init的原型对象替换为jQuery.fn,其实就是替换成了jQuery这个函数自己的原型对象jQuery.prototype
在源码89行中:

	jQuery.fn = jQuery.prototype

这样做我们可以很方便的写jQuery的扩展方法
举个例子:

	jQuery.fn.alertMsg = function(msg){
		alert('msg');
	}

使用:

	$().alertMsg('Hello World!');

jQuery的整体架构到这里就差不多了
下面是一个简化版的jQuery架构,便于理解

	(function () {
	    function jQuery(selector) {
	        return new jQuery.prototype.init(selector);
	    }
	    // jQuery对象的构造函数
	    jQuery.prototype.init = function (selector) {
	       
	    }
	    // jQuery原型上的css方法
	    jQuery.prototype.css = function (config) {
	        
	    }
	    // 将jQuery原型上的方法都放到init的原型链上
	    jQuery.prototype.init.prototype = jQuery.prototype;
	    window.$ = window.jQuery = jQuery;
	})();

关系图解:
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值