jQuery源码--小白入门之extend源码详细解读

jQuery源码—分析常用方法的原理

第一次写文章,有任何问题及时提出来哦!!!_

话不多说,直接进入正题:

一. jQeury如何无new化构建实例

//引入自写的jQuery.js文件
//在html中 console.log($) $: jQuery本身  $(): jQuery实例

(function(root){
   
    var jQuery = function(){
   
        
    }
    root.$ = root.jQuery = jQuery;
})(this) //this指向于window

如果我们要调用$()这个方法,目的就是创建jQuery的实例对象,
接下来问题来了,如何在以上代码去创建jQuery的实例对象呢?

//引入自写的jQuery.js文件
//在html中并输出 console.log($) $: jQuery本身  $(): jQuery实例

(function(root){
   
    var jQuery = function(){
   
     //==> 在这里return 一个jQuery实例?
     	return new jQuery();
    }
    root.$ = root.jQuery = jQuery;
})(this) //this指向于window

其实这样做是不对的,因为每调用一次jQuery实例就会return 并创建jQuery的实例,这样就会陷入死循环,不断的创建并调用…,代码越写越乱,哈哈哈,尴尬了吧!!!

在jQuery中有一个共享原型对象的设计,流程图如下:

prototype

prototype

jQuery

原型对象

jQuery.prototype.init

init

foo

//引入自写的jQuery.js文件
//在html中并调用$()  $: jQuery本身  $(): jQuery实例对象 其实就是调用了jQuery原型对象上面的init方法

(function(root){
   
    var jQuery = function(){
   
     //==> 在这里return 一个jQuery实例?
     	return new jQuery.prototype.init(); //返回
    }
    jQuery.prototype = {
   
    	init : function(){
   
		},
		css : function(){
   
		} //扩展了一个css的方法
    }
    //共享原型对象的目的
    jQuery.prototype.init.prototype = jQuery.prototype;
    root.$ = root.jQuery = jQuery;
})(this) //this指向于window

通过在jQuery原型上创建一个init方法,并且在jQuery原型对象上的init方法,把它当做一个构造函数,设置它的原型对象指向于 jQuery的原型对象,这样就达到共享原型对象的目的

控制台输出结果:

二. jQuery中的extend方法是如何进行扩展的?

基本使用方法如下:

//给对象进行扩展
var obj = $.extend({
   },{
   hobby: 'football'});//输出obj 得到{hobby: 'football'}
//{} 第一个空对象的引用,   扩展了hobby: 'football' 属性
//如果 第一个对象的有hobby属性 则执行替换该属性的值的操作
//如下 
var first = {
   hobby: 'football'};
var second = {
   hobby: 'basketball'}
var obj = $.extend(first,second);//此时obj输出结果为{hobby: 'basketball'}

//如果想给jQuery扩展一个方法
$.extend({
   
	clickMe: