jQuery源码解读一

本文分享了作者使用jQuery的心得体会,从初次接触jQuery时的震撼,到深入学习过程中的种种疑惑,再到通过官方资源获得的新认识。文中还提供了一个简单的jQuery代码示例,帮助读者理解jQuery的初始化过程。

           在使用jQuery的过程中,深深体会着jQuery的宗旨:write less, do more. 在解读jQuery书上有句话我特别的喜欢,送给大家:"jQuery说,给你一个方法,你能让互联网炫目富有!",看到这里,我们不禁会想起阿基米德的那句精彩的话:给我一个支点,我可以撬动地球。

        反复的利用jQuery开发了自己的前端页面后,借助jQuery丰富的文档,很快就可以实现自己的几个页面,在感叹其精简的写法,强大的选择器和链式语法后,我几乎会在每个项目中引入jQuery。使用已一段事件后,我有了很多的困惑,怎么理解的它的闭包机制,怎么写出高效的选择器,而不是像刚开始写jQuery时,选择器的用法,我几乎不怎么使用filter()和find(),几乎直接把css中的选择器一股脑的写入到强大的jQuery入口函数里,这样写真的没什么问题?那么jQuery为什么为我们提高大量的匹配和筛选的方法,直到我看到jQuery社区的官方的讲解视频,不愧为jQuery维护者之一,他在短短的视频里,讲解了jQuery入门的知识,却让我看到了新意和差距。大家不妨看看,这里给出中文翻译版http://blog.jobbole.com/37699/

      给出自己的第一个理解:

var $ = jQuery = function(){
	return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
	init: function(){
		this.length = 0;
		this.test = function(){
			return this.length;
		}
		return this;
	},
	jquery: "1.3.2",
	length: 1,
	size: function(){
		return this.length;
	}
}
jQuery.fn.init.prototype = jquery.fn;
console.log($().jquery); //"1.3.2"
console.log($().test()); //0
console.log($().size()); //0

这里需要理解 jQuery.fn.init.prototype = jquery.fn; 使用jQuery的原型对象覆盖了init的原型对象.

new jQuery.fn.init()创建的新对象拥有init的原型对象的方法,通过改变prototype的指针的指向,使其指向jQuery的原型对象,自然就继承了jQuery,length属性和size(),否则,使用init()创建的对象无法访问作用域外的size(),jquery.

关于作用域,张雪锋的博客说的非常详细,大神理解的比较透彻。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值