jQuery源码分析(一)
jQuery源码分析(一)
spilledyear 发表于4个月前
jQuery源码分析(一)
  • 发表于 4个月前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 对于学习,我觉得在学校和在工作中最大的区别就是驱动方式,而这个驱动方式就是需求。在学校的时候,可能就是为了某个知识点去学习,或者是在网上看到大家都说这个东西很好,所以也去学习。对于一个实习半年的小菜鸟,我有时候觉得那些提需求的人很无理取闹。比如说当我引用了某个框架,而框架只提供了这么一些功能,他却非要我做一些其他的功能,那我该怎么办呢?我们的经理直接说:那你去把源码改一下。什么?改源码?你不是在逗我?我源码都看不懂,你叫我改源码?而这种情况好像在工作中经常会出现,是这样吗?郁闷是郁闷,可工作还是工作。最终我是没有改成源码,可却慢慢觉得了解源码是非常重要的。不说改,至少要会读。所以,我开始尝试。

jQuery.fn.init.prototype = jQuery.fn

网上搜了很多的JQuery源码分析之类的文章,下面这段代码应该是出现次数最多的一段,也是非常重要的一段。一开始看源码的时候,完全一脸懵逼,本来js的很多高级语法就不会。但也没什么,不会就去学,这可能和每个人的学习方式不一样有关。每天有一些收获就好了,不会的少了,会的就多了。 在普通情况下我们要用原生类、或者自定义类创建实例要用new运算符,但是我们在使用jQuery时从来没有使用过new,他是不是用其他方法来生成实例呢?是不是没有使用prototype属性呢?事实上他都有使用,只是内部处理的非常巧妙。先看一下源码,这里引用的js版本是3.1.1

// Define a local copy of jQuery  (第 93 行)
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 );
	},


//(第 114 行)
jQuery.fn = jQuery.prototype = {

	// The current version of jQuery being used
	jquery: version,


// A central reference to the root jQuery(document)  (第 2950 行)
var rootjQuery,

	// A simple way to check for HTML strings
	// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
	// Strict HTML recognition (#11290: must start with <)
	// Shortcut simple #id case for speed
	rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,

	init = jQuery.fn.init = function( selector, context, root ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
			return this;
		}

// Give the init function the jQuery prototype for later instantiation  (第 3095 行)
init.prototype = jQuery.fn;

把几行关键的代码提取出来再进行分析:

  • return new jQuery.fn.init( selector, context );
  • jQuery.fn = jQuery.prototype
  • init = jQuery.fn.init
  • init.prototype = jQuery.fn;

就这样讲,prototype是为了实现继承。 由 jQuery.fn = jQuery.prototype 、init.prototype = jQuery.fn; 可以得到,init.prototype = jQuery.prototype,也就是说,init继承了jQuery的所有方法。也就是说,假如这时候我们要创建一个jQuery对象,直接new一个init对象就可以,是这样吗?然后又因为 init = jQuery.fn.init ,所以我们如果要创建一个jQuery对象,可以直接这样写 new jQuery.fn.init( );,这样有问题吗?好吧,其实这个地方我有些不解,init是jQuery的孩子,将父亲(jQuery)所有的功能都赋值给孩子(init),那这个时候呢?孩子是不是就类似父亲了?那是不是可以这样写 jQuery.fn.init = init.fn.init ? 好吧,我不明白,我还要好好学习。

$(function() {})、$(document).ready(function(){ }) 与 (function($) {})(jQuery) 的区别

$(function() {}) 是$(document).ready(function(){ }) 的简写,在页面内容都加载完后执行,而(function($) {})(jQuery)是一个匿名函数,也就是函数定义完之后,立即执行。就相当于function A(jQuery){} A(jQuery);,我还是觉得这样说比较通俗易懂一些。对于$(function() {})、$(document).ready(function(){ }) 这个地方,我其实有很多疑惑,为什么是这样呢?这个简写是怎么来的呢?而我的疑问好像并不是大多数人的疑问,我在网上找了很多文章,可大部分都没有提到这个我问题。要了解这个问题,你必须对jQuery有一定的了解,比如jQuery方法有哪些、每个方法实现的方式有什么不一样的地方。当然以我目前的的水平,是解释不清这些问题,很多东西都不知道怎么说清楚,我自己也不明白,好好学习。

标签: Javascript jQuery
共有 人打赏支持
粉丝 0
博文 8
码字总数 4806
×
spilledyear
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: