jQuery 源码分析

whlong 发布于2019-08-21 17:55 / 798人阅读

摘要：这里在函数中有一个的操作，一般构造函数不会这样写，但这样写并不会影响的结果，这参照之前的分解，便可以推出结果的一致只是返回了不同但值相同的变量。

这篇文章可以说是读这篇文章这篇文章后的总结。

jQuery最基本的构成结构：

var jQuery = window.jQuery = window.$ = function(a,b){
  return new jQuery.fn.init(a, b);  // 1
}；

jQuery.fn = jQuery.prototype = {
  init: function (s) {
    this[0] = s;
    this.length = 1;
    this.context = s;
    return this;  // 2
  },
  age: function () {
    return this;
  }
};

jQuery.fn.init.prototype = jQuery.fn;  // 3

jQuery.extend = jQuery.fn.extend = function () {
  // 4
}

这是jQuery源码一个最基本的概要实现，但从这个实现中已经能弄并学到很多东西了。

( 1 ) 首先 $ 也就是 jQuery 本身是一个函数，但它又不是一个普通的构造函数，这从 $("div") 的这种实例直接产生不需要 new 就可以知道，也就是它隐藏了实例 new 的过程， jQuery 自身只是一个工厂函数，它产出由它的原型上定义的 init 方法的实例，因为拥有了 new 的过程，所以实例化中的 this 都是指向了最终产生的实例本身，于是这样便实现了无new构建。

( 2 ) 这里在 init 函数中有一个 return this; 的操作，一般构造函数不会这样写，但这样写并不会影响 new 的结果，这参照之前new 的分解，便可以推出结果的一致（只是返回了不同但值相同的变量）。而jQuery之所以在这里要返回 this 是有用处的，这样最开始实例的 this 便得以保存，$("div").ready() 这样的链式调用便能得到前方的实例对象，也就是说就是 return this; 实现了链式调用。

( 3 ) 那既然是原型上的 init 构造器方法构建的实例，又怎么能获取到 jQuery 的原型方法呢，这就需要将 init 方法的原型用 jQuery 的原型对象覆盖。也就是 3 部分的操作。

( 4 ) 最后 $.extend 与 $.fn.extend 之所以会不一样，只是调用时分别是jQuery对象或jQuery.prototype(jQuery.prototype = jQuery.fn)导致了 this 的不同，实际定义是是用的同一个函数。

海外云主机私有云 jquery插件源码jquery jquery源码源码分析 nginx源码分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90217.html

jQuery源码分析之noConflict()

摘要：将或者的控制权让给第一个实现它的那个库，确保不会与其它库的对象发生冲突。 noConflict() noConflict()将$或者jQuery的控制权让给第一个实现它的那个库，确保jQuery不会与其它库的$对象发生冲突。 jQuery中源码如下： var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict =...

Yuanf 2019-08-20 15:42 评论0 收藏0
体验javascript之美-第十一课-jquery源码分析

摘要：可以直接在这里查看至于的开源就不多说了。官网一个库的官网永远是了解它最新进展和学习资料的首选网站。比如下面我们就拿举例分析下它的源码。不解释，你可以直接拿过去改吧改吧用在你自己的库里。上节课我们说了写一个库的准备，但是这节课并不是写库为什么，有句话叫你没吃过猪肉还没看过猪走。所以我们先看看别人的库是怎么写的。在我们拥有了足够扎实的基础之后我们要做的不是闭门造车，而是去阅读一些知名的库...

王晗 2019-08-20 16:12 评论0 收藏0
jQuery源码分析3-jQuery对象的扩展--extend

摘要：的指向的是对象，所以此时扩展的是对象，可以直接通过的方式调用。写过jquery插件的人都知道可以通过jquery提供的extend可以对jquery对象进行扩展，而且该方法不仅可以对jquery对象扩展，还能给一个对象添加新的属性和方法，这个在后面会介绍。通过不同的方式调用extend扩展的方法也不同：通过 $.extend() 扩展的是静态方法；而通过 $.fn.exten...

MonoLog 2019-08-20 13:53 评论0 收藏0
jquery源码分析

摘要：前言随着前端的不断发展，很多开发人员已经开始使用等框架，但是很少有人去深入分析以及的源码本人也是，至今还停留在使用的层面。最近还在写一些的笔记，有兴趣的小白也可以看下我的博客文章源码分析地址前言随着前端的不断发展，很多开发人员已经开始使用react、vue等web框架，但是很少有人去深入分析vue以及react的源码（本人也是，至今还停留在使用的层面）。框架的使用势必会有更新迭代的...

SHERlocked93 2019-08-22 16:35 评论0 收藏0
jQuery源码分析-整体架构（转）

摘要：文章出处拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。利用下的简单工厂模式，来将所有对于同一个对象的操作指定同一个实例。所以的中提供了以上中扩展函数。文章出处 http://www.cnblogs.com/aaronjs/p/3278578.html 拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，...

voidking 2019-08-21 10:39 评论0 收藏0