`
AngelAndAngel
  • 浏览: 234804 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 源码初探,一步步实现自己的jquery(一)

阅读更多
  最近稍微看了一下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库的核心概念,并尝试逐步构建一个简易版的jQuery,以帮助理解其内部机制。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作...

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码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源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。深入理解其源码对于...同时,理解源码也能帮助我们更好地利用jQuery,甚至定制自己的工具库。

    jQuery源码分析系列.pdf

    - **源码结构和核心函数**:详细介绍jQuery对象的创建过程,包括`$`或`jQuery`函数的内部实现,以及如何利用这些核心函数来构建和操作DOM元素。 - **工具函数**:剖析jQuery中用于辅助开发的核心工具函数,如选择器...

    Head First jQuery源码

    通过源码,我们可以学习如何构建自己的jQuery插件,以及如何利用`$.fn.extend()`方法。 在学习《Head First jQuery》的源码时,你可以逐个研究这些关键功能的实现,同时结合书中的解释,深入理解jQuery的工作原理。...

    jquery源码,3.7.0版本

    jquery源码,3.7.0版本

    jQuery源码+中文详细注解

    这部分使用了一个立即执行的匿名函数来包裹整个jQuery源码,这样做的目的是形成一个闭包,保护内部的变量不被外部干扰,同时也避免了命名冲突的问题。 ##### 4. 关键字保护 ```javascript var _jQuery = window....

    Head First jquery源码

    《Head First jQuery源码》是一本深入解析jQuery库的书籍,其内容主要涵盖了jQuery的核心功能、设计理念以及实现机制。jQuery是JavaScript的一个库,它极大地简化了网页中的DOM操作、事件处理、动画效果以及Ajax交互...

    jquery源码框架解读

    在前端开发领域,jQuery是一个不可或缺的库,它极大地简化了JavaScript操作DOM、处理事件、创建动画以及实现Ajax交互。这份资料深入解析了jQuery的源码,旨在帮助开发者理解其内部机制,提升技能水平。 jQuery的...

    jquery源码分析

    jquery源码分析,包括入口技术,选择器入口,以及在选择器使用的时候需要注意的优化思路

    jquery api, jquery ui api, jquery源码分析

    jQuery 是一款广泛使用的 JavaScript 库,它的出现极大地简化了网页的 DOM 操作、事件处理、动画效果和Ajax交互。标题中提到的"jQuery API"指的是jQuery提供的各种函数和方法,这些API允许开发者高效地操控网页元素...

    jQuery源码解读

    理解 jQuery 源码有助于我们更好地利用这个库,解决实际问题,甚至定制自己的版本。通过学习源码,你可以了解到如何高效地操作 DOM,如何优雅地处理事件,以及如何编写高性能的 JavaScript 代码。这将极大地提升你的...

    jQuery源码分析视频教程

    jQuery源码分析视频教程总计116课,按照jquery每个区段实现的内容,精确地讲解源码中是怎么实现我们开发中用到的jquery得方法的

    jquery 源码分析

    《jQuery源码分析详解》 ...通过对源码的阅读和理解,我们可以更好地运用jQuery,甚至可以为自己的项目编写高性能的插件。无论你是前端开发者还是JavaScript爱好者,理解jQuery源码都将对你的技能提升大有裨益。

    JQuery源码的奥秘逐行分析视频教程

    ### JQuery源码的奥秘逐行...无论是对于初学者还是有一定经验的开发者而言,这都是一次宝贵的学习机会,不仅能够提升自己对 JavaScript 的理解层次,还能在未来的工作中更好地运用 JQuery 或其他类似库解决实际问题。

    jQuery源码详细分析中文注释

    《jQuery源码详细分析中文注释》是一份深入解析jQuery库源码的宝贵资源,它为开发者提供了理解这个广泛使用的JavaScript库内部工作机制的机会。jQuery以其简洁的API和强大的功能深受前端开发者的喜爱,但其背后的...

    jquery源码(1.4)

    jquery最新源码jquery最新源码jquery最新源码

    jquery源码好不容易找到的与大家分享

    总结,jQuery源码的深度探索是一次宝贵的编程之旅,它让我们看到了一个优秀JavaScript库的设计思想和实现技巧。无论你是初学者还是经验丰富的开发者,深入理解jQuery,都将对你的职业生涯产生深远影响。

Global site tag (gtag.js) - Google Analytics