jquery 实现原理二:core.js

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lihongxun945/article/details/10304285
这个文件是jquery的核心文件,核心之处在于它定义了如果构造jquery对象,以及如何通过extend来拓展jquery对象(或者叫添加插件),还有一些非常基本的工具方法。

下面是重要代码分析:

一 jQuery对象构造函数

jQuery = function( selector, context ) {
          // The jQuery object is actually just the init constructor 'enhanced'
          return new jQuery.fn.init( selector, context, rootjQuery );
     },

定义了jQuery对象,实际就是一个函数,这个函数返回的是new jQuery.fn.init( selector, context, rootjQuery );,所以jQuery对象就是 jQuery.fn.init实例

二 原型

jquery的原型就是jQuery.fn,所以在fn上添加的方法可以在任何jquery对象中直接调用,extend添加插件也是这个原理
注意其中的关系
jQuery.fn = jQuery.prototype = jQuery.fn.init.prototype
jQuery.constructor = jQuery
jquery对象就是jQuery.fn.init的实例
jQuery.fn = jQuery.prototype = {    //
     // The current version of jQuery being used
     jquery: version,
     constructor: jQuery,      //构造函数
     init: function( selector, context, rootjQuery ) {
     //这里进入重点,这个init函数就是原型,jQuery函数构造函数。这个函数接收三个参数,分别是选择器,上下文和root,这个root在return new jQuery.fn.init( selector, context, rootjQuery );已经定死了,就是rootjQuery = jQuery( document );,所以实际上只有两个参数可用,就是selector和context。为毛要有rootjQuery呢?应该是防止有多个window时弄错了document,所以在这里要记录下来
     //下面就是根据selector和context参数的不同,分情况处理,依次处理了如下几种情况
     //1, selector为空,则直接返回空的jquery对象
     //2,如果selector是字符串,分如下几种情况
     //2.1, selector是 '<xxx>'类型的,则直接创建html片段,同时如果context是plainObject则把其中的属性全部赋值给创建出来的html片段
     //2.2,如果selector是一个id选择器,则直接调用getElementById来选择元素
     //2.3, 如果context为空,调用rootjQuery.find(selector),如果context是jquery对象,则直接调用context.find(selector)
     //2.4,到这里,说明context也是一个选择器,则直接调用$(context).find(selector)
     //3, 如果selector是一个DOMElement,则直接使用,不用去找了
     //4, 如果selector是一个函数,则在documentready时调用此函数
     //5,兼容另一种写法,即直接传一个对象 {selector:xxx, context:xxx},至此,init结束使命
     }
     //然后是两个重要属性selector和length
     //然后是数组操作相关的方法get, each, push什么的
     //fn方法结束
}


三 extend方法

这个方法的声明实际是 function extend([boolean deep], target, [obj1], [obj2] …)
第一个参数是可选的,表示是否deepcopy
如果有多个对象,则把第二个以及之后的所有对象的属性添加到第一个对象上,如果只有一个对象,则把这个对象的属性添加到jQuery.fn上,通常我们写插件就是用这个方法。

此方法实现比较简单,不多讲

四 用extend拓展了一堆工具方法

包括
noconfilict:解决冲突
isXXX: 变量类型判断
parseHTML:创建html片段
等等


五 

最后返回new出来的jQuery对象

没有更多推荐了,返回首页