最近稍微看了一下jquery的源码(1.4.2),大致上看,源码都包含在下面的代码中
(function(){})()
第一个括号是个匿名函数,第二个表示马上执行第一个括号里面的代码,因为js里面没有命名空间,对于框架性的东西,函数,对象等于其他不重复是很关键的,在匿名函数里,确保了所定义的函数,对象的有效范围,起到了命名空间的作用。既然作用范围在这个匿名函数里,那么怎样让别人使用了,看下面
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
_jQuery = window.jQuery,
_$ = window.$,
先是创建了jQuery这个对象,里面返回的是自己的一个实例(下面会详细讲),然后分别给_jQuery和_$赋值,当然了,后面会有扩展,把值赋回来,如
window.$ = _$;
window.jQuery = _jQuery;
在前面版本中记得是直接赋值的 如:(估计是为了扩展需要吧)
var jQuery = window.jQuery = function(selector, context) {
//……
};
反正呢,原理就是让jQuery成为window对象的一个属性,这样就可以在其他地方像使用document一样使用jQuery对象了(document也是window对象的一个属性),并且呢,在源码底部还有一行代码:
window.jQuery = window.$ = jQuery;
这样的话我们就用$来代替jQuery(还是美元值钱啊)
一般情况下,js创建类也需要定义属性和方法(可以不定义),创建模式如下:
// 定义一个构造函数;
testClass(param1, param2) {
this.attr1 = param1;
this.attr2 = param2;
...
}
// 在prototype对象上扩展,加上相应的方法;
testClass.prototype = {
Method1: function() {...},
Method2: function() {...},
...
}
// 定义一个实例;
var test = new testClass();
test.Method1();
test.Method2();
其实jquery也差不多,不过更复杂一些,如源代码所示:
jQuery.fn = jQuery.prototype={
// Start with an empty selector
selector: "",
// The current version of jQuery being used
jquery: "1.4.2",
// The default length of a jQuery object is 0
length: 0,
// The number of elements contained in the matched element set
size: function() {
return this.length;
},
toArray: function() {
return slice.call( this, 0 );
},……
}
以上是一些基本的简单的介绍,下篇开始实现自己的jquery。对于扩展jQuery,另外发文。
分享到:
相关推荐
在本篇《jquery 源码初探,一步步实现自己的jquery(四)》中,我们将深入探讨jQuery库的核心概念,并尝试逐步构建一个简易版的jQuery,以帮助理解其内部机制。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作...
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
1. 选择器:jQuery的核心之一是它的CSS选择器,如$("#id")、$(".class")等,这些选择器基于Sizzle引擎实现,能够高效地定位DOM元素。 2. 链式调用:jQuery对象返回的是一个包含多个DOM元素的集合,可以连续调用方法...
《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。深入理解其源码对于...同时,理解源码也能帮助我们更好地利用jQuery,甚至定制自己的工具库。
- **源码结构和核心函数**:详细介绍jQuery对象的创建过程,包括`$`或`jQuery`函数的内部实现,以及如何利用这些核心函数来构建和操作DOM元素。 - **工具函数**:剖析jQuery中用于辅助开发的核心工具函数,如选择器...
通过源码,我们可以学习如何构建自己的jQuery插件,以及如何利用`$.fn.extend()`方法。 在学习《Head First jQuery》的源码时,你可以逐个研究这些关键功能的实现,同时结合书中的解释,深入理解jQuery的工作原理。...
jquery源码,3.7.0版本
这部分使用了一个立即执行的匿名函数来包裹整个jQuery源码,这样做的目的是形成一个闭包,保护内部的变量不被外部干扰,同时也避免了命名冲突的问题。 ##### 4. 关键字保护 ```javascript var _jQuery = window....
《Head First jQuery源码》是一本深入解析jQuery库的书籍,其内容主要涵盖了jQuery的核心功能、设计理念以及实现机制。jQuery是JavaScript的一个库,它极大地简化了网页中的DOM操作、事件处理、动画效果以及Ajax交互...
在前端开发领域,jQuery是一个不可或缺的库,它极大地简化了JavaScript操作DOM、处理事件、创建动画以及实现Ajax交互。这份资料深入解析了jQuery的源码,旨在帮助开发者理解其内部机制,提升技能水平。 jQuery的...
jquery源码分析,包括入口技术,选择器入口,以及在选择器使用的时候需要注意的优化思路
jQuery 是一款广泛使用的 JavaScript 库,它的出现极大地简化了网页的 DOM 操作、事件处理、动画效果和Ajax交互。标题中提到的"jQuery API"指的是jQuery提供的各种函数和方法,这些API允许开发者高效地操控网页元素...
理解 jQuery 源码有助于我们更好地利用这个库,解决实际问题,甚至定制自己的版本。通过学习源码,你可以了解到如何高效地操作 DOM,如何优雅地处理事件,以及如何编写高性能的 JavaScript 代码。这将极大地提升你的...
jQuery源码分析视频教程总计116课,按照jquery每个区段实现的内容,精确地讲解源码中是怎么实现我们开发中用到的jquery得方法的
《jQuery源码分析详解》 ...通过对源码的阅读和理解,我们可以更好地运用jQuery,甚至可以为自己的项目编写高性能的插件。无论你是前端开发者还是JavaScript爱好者,理解jQuery源码都将对你的技能提升大有裨益。
### JQuery源码的奥秘逐行...无论是对于初学者还是有一定经验的开发者而言,这都是一次宝贵的学习机会,不仅能够提升自己对 JavaScript 的理解层次,还能在未来的工作中更好地运用 JQuery 或其他类似库解决实际问题。
《jQuery源码详细分析中文注释》是一份深入解析jQuery库源码的宝贵资源,它为开发者提供了理解这个广泛使用的JavaScript库内部工作机制的机会。jQuery以其简洁的API和强大的功能深受前端开发者的喜爱,但其背后的...
jquery最新源码jquery最新源码jquery最新源码
总结,jQuery源码的深度探索是一次宝贵的编程之旅,它让我们看到了一个优秀JavaScript库的设计思想和实现技巧。无论你是初学者还是经验丰富的开发者,深入理解jQuery,都将对你的职业生涯产生深远影响。