zoukankan      html  css  js  c++  java
  • jQuery 1.6 源码学习(一)——core.js[1]之基本架构

    在网上下了一个jQuery 1.2.6的源码分析教程,看得似懂非懂,于是还是去github上下载源码,然后慢慢看源代码学习,首先来说说core.js这个核心文件吧。

    jQuery整体的基本架构说起来也并不复杂,但是要看明白还是要花一点功夫,core.js这个文件搭建起了jQuery的整个框架,该文件的基本内容我大致总结如下:

    //将整个jQuery 对象作为一个外部接口
    var jQuery = (function(){
    
    var jQuery = function( selector, context ) {
    		//当执行形如$("p")的代码时会new一个jQuery.fn.init的对象,此对象一般我们称之为jQuery对象,下文中我将称其为jQuery实例对象,以与jQuery对象本身区分开来
    		return new jQuery.fn.init( selector, context, rootjQuery );
    	},/*
    	...
    	此处包含一些其他的变量,如正则表达式,useragent等
    	...
    	*/
    //此处之所以把jQuery的原型与jQuery.fn绑定是因为fn可以作为其短名称出现
    jQuery.fn = jQuery.prototype = {
    //jQuery对象的原型所在,其中的方法和属性可由jQuery实例对象访问
    	init :function(){
    		//用以构建jQuery实例对象,最后返回一个类数组对象
    	},
    	/*
    	...
    
    	其他属性和方法,例如length,jquery版本,以及许多访问jquery数组元素的方法
    	如:eq,get 等。
    
    	...
    	*/
    }
    //绑定jQuery对象的原型链
    jQuery.fn.init.prototype = jQuery.fn;
    
    //extend 可由 jQuery对象(静态方法)以及实例对象(实例方法)访问
    jQuery.extend = jQuery.fn.extend =  function(){
    	/*
    	...
    	jQuery本身的所有内容几乎都是由extend方法所扩展的,包括jQuery插件机制也建立在此方法之上
    	该方法,
    	...
    	*/
    
    };
    
    jQuery.extend({
    	/*
    	jQuery自身核心的一些方法和属性,
    	包括 noConflict,isReady等
    	*/
    });
    
    /*
    ...
    此处是一些其他操作,例如浏览器检测,处理ready事件等
    ...
    */
    //最后返回jQuery供外部使用(作为全局对象)
    return jQuery;
    })();

    可以看出jQuery大致分为两个部分,一个是静态方法部分,一个是实例对象部分,而这两者都是通过同一个函数extend来进行扩展的,也许上面代码看起来还比较抽象,下图则描述了整个框架的关系:

    image

    这样整个结构就显得清晰多了。其中最右边的jQuery实例是通过new jQuery.fn.init得到的。这样,扩展到jQuery.fn上的方法即可以作为实例方法供jQuery实例访问,而扩展到jQuery对象本身上的方法则作为静态方法。

    在core.js中调用了extend来扩展绝大部分核心方法,首先来分析一下extend方法:

    jQuery.extend = jQuery.fn.extend = function() {
    	var options, name, src, copy, copyIsArray, clone,
    		target = arguments[0] || {}, //将第一个参数作为扩展的目标对象
    		i = 1,
    		length = arguments.length,
    		deep = false;
    
    	// Handle a deep copy situation
    	//可以传递一个bool值进来用于表示扩展对象时是否是深拷贝
    	if ( typeof target === "boolean" ) {
    		deep = target;
    		target = arguments[1] || {};
    		// skip the boolean and the target
    		i = 2;
    	}
    
    	// Handle case when target is a string or something (possible in deep copy)
    	// 当扩展对象是字符串时
    	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    		target = {};
    	}
    
    	// extend jQuery itself if only one argument is passed
    	if ( length === i ) {
    	// 关键!!当调用$.extend时,this将绑定到jQuery对象上,此时扩展的方法或者属性将是静态的,
    	// 而调用$.fn.extend时则绑定到jQuery.fn上,此时扩展的均是实例方法,我们在撰写插件时可以在方法内部使用this,此时的this指向的是jQuery的实例对象
    		target = this;
    		--i;//修正i,以便后面正确遍历对象
    	}
    	//以下便是扩展代码,既可以用于扩展jQuery,也可以用来扩展自定义的对象,此方法是公开的,更多可以参考jQuery文档
    	for ( ; i < length; i++ ) {
    		// Only deal with non-null/undefined values
    		if ( (options = arguments[ i ]) != null ) {
    			// Extend the base object
    			for ( name in options ) {
    				src = target[ name ];
    				copy = options[ name ];
    
    				// Prevent never-ending loop
    				if ( target === copy ) {
    					continue;
    				}
    
    				// Recurse if we're merging plain objects or arrays
    				// 如果是合并普通对象或者数组时,采用递归方式进行深拷贝(比如当数组中嵌套数组或者对象嵌套对象时)
    				// 在jQuery内部核心扩展方法时并没有用到此段代码,比如下面的isPlainObject,isArray方法都是用extend扩展到jQuery中的。
    				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
    					if ( copyIsArray ) {
    						copyIsArray = false;
    						clone = src && jQuery.isArray(src) ? src : []; //
    
    					} else {
    						clone = src && jQuery.isPlainObject(src) ? src : {};
    					}
    
    					// Never move original objects, clone them
    					target[ name ] = jQuery.extend( deep, clone, copy );
    
    				// Don't bring in undefined values
    				} else if ( copy !== undefined ) {
    					target[ name ] = copy;
    				}
    			}
    		}
    	}
    
    	// Return the modified object
    	return target;
    };
    

    基本上extend方法就是这样啦~

    好吧,鉴于我人比较懒,今天就分析到这里,每天学习一点点,每天进步一点点~

  • 相关阅读:
    Java中的基本数据类型以及自增特性总结
    mysql菜鸟
    Typora使用教程
    net core下链路追踪skywalking安装和简单使用
    netcore5下ocelot网关简单使用
    netcore热插拔dll
    快速排序
    netcore5下js请求跨域
    SpringBoot接口防刷
    EL 表达式
  • 原文地址:https://www.cnblogs.com/firstdream/p/2342677.html
Copyright © 2011-2022 走看看