JQuery源码 1 / 整体结构

warkiz 发布于2019-08-26 12:00 / 3461人阅读

摘要：本文分析的版本内部实现原理，版本已经去除了大量的对于旧版本浏览器的兼容性的处理，但是还是有部分源码是对不常见的或者老版本的浏览器进行处理，在看到这部分的时候如果感兴趣可以看一下，也可以直接跳过，个人一直认为学习旧版本浏览器的兼容是最没有收益

本文分析的JQuery2.0.3版本内部实现原理，2.0.3版本已经去除了大量的对于旧版本浏览器的兼容性的处理，但是还是有部分源码是对不常见的或者老版本的ie浏览器进行处理，在看到这部分的时候如果感兴趣可以看一下，也可以直接跳过，个人一直认为学习旧版本浏览器的兼容是最没有收益的，不要在必然要被淘汰技术上浪费太多时间

JQuery整体结构

(function(window,undefined){
  //代码
}(window))

JQuery最外层使用的匿名函数自执行结构，为了最大程度避免代码污染，防止冲突

传入参数window的主要目的有两点

在尾端传入的参数是实参，表明在函数执行时第一个参数是window，这样就避免了在内部使用window时再次去外层查找，在js中window属于最顶层的变量，而根据js原型链的查找原则，函数会优先查找本身的变量，在查找不到的情况下逐步向上查找，所以如果在window没有作为参数传入到函数内部的情况下，会从底层一直查找到最顶层，浪费大量性能，在形参中传入第二个参数undefined，主要是考虑到在低版本浏览器中undefined的值是可以改变的

//IE7
undefined=10;
console.log(undefined); //10

在代码中我们可能会需要判断变量值===undefined的情况，为了避免我们获取的undefined的值是被改变过的值，我们在形参中传入一个参数，由于在实参中没有传入对应的值，那么这个值本身就是undefined，所以我们在使用undefined时就可以直接使用该值，而不用担心是否在操作改变过的undefined

为压缩代码做考虑，如果window不是参数而只是一个变量，那么window字段将无法被压缩，但如果只是作为形参的情况下可以被压缩为单字符，实际上我们看压缩后的代码。window被压缩成了e

JQuery返回的是一个对象，JQuery采用的是面向对象的写法，在我们平常使用面向对象的写法大概如下

function A(){}
A.prototype.init=function(){ }

var a=new A();
a.init();

而在使用JQuery时我们不需要new $()的形式来调用是因为JQuery采用了工厂模式，使我们可以采用无"new"的形式来创建对象，大概写法如下

function JQuery(){
  return new Jquery.fn.init();
}

这样的好处在于

我们直接执行了init的初始化方法

直接返回一个JQuery的对象，用户不需要调用new JQuery( )后再来调用JQuery的方法

但我们会发现在JQuery中返回的是JQuery原型上的init方法，但是JQuery中的其他方法是写在JQuery的prototype上的，那么是如何在init上调用其它方法的呢，主要是通过下面代码

//96行
JQuery.fn=JQuery.prototype={
  constructor:JQuery,
  //...
}
//指定JQuery的fn就是JQuery的原型对象

//283行
JQuery.fn.init.prototype=JQuery.fn；

JQuery通过将init的原型赋值为JQuery的原型，所以通过new JQuery.fn.init()出的对象可以直接使用JQuery原型上的方法

在8826行将JQuery对象挂载到window下

window.JQuery=window.$=JQuery;

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

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

jQuery源码分析-整体架构（转）

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

voidking 2019-08-21 10:39 评论0 收藏0
jQuery3.3.1源码阅读（一）

摘要：入口结构具体代码抽离结构如下涉及到的知识解析函数时的规则函数定义和函数表达式闭包解析函数的规则解析器会在遇到时将其认为是函数定义而非函数表达式函数定义和函数表达式函数定义函数表达式闭包闭包函数中的函数，本质是指作用域内的作用域闭包举例综合以 1.入口结构 ( function( global, factory ) { use strict; if ( t...

王晗 2019-08-23 16:52 评论0 收藏0
浅析jQuery整体框架与实现（上）

摘要：通常的做法是，为它们指定回调函数。请求返回请求返回请求返回异步队列解耦异步任务和回调函数为模块队列模块事件提供基础功能。前言 jQuery整体框架甚是复杂，也不易读懂，这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以jquery-1.7.1为例进行分析。 jquery的总体架构 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 评论0 收藏0
学习 underscore 源码整体架构，打造属于自己的函数式编程类库

摘要：译立即执行函数表达式处理支持浏览器环境微信小程序。学习整体架构，利于打造属于自己的函数式编程类库。下一篇文章可能是学习的源码整体架构。也可以加微信，注明来源，拉您进前端视野交流群。前言上一篇文章写了jQuery整体架构，学习 jQuery 源码整体架构，打造属于自己的 js 类库虽然看过挺多underscore.js分析类的文章，但总感觉少点什么。这也许就是纸上得来终觉浅，绝知此...

junnplus 2019-08-26 10:40 评论0 收藏0
学习 jQuery 源码整体架构，打造属于自己的 js 类库

摘要：匿名函数将代码包裹在里面，防止与其他代码冲突和污染全局环境。学习整体架构，打造属于自己的函数式编程类库读者发现有不妥或可改善之处，欢迎评论指出。虽然现在基本不怎么使用jQuery了，但jQuery流行10多年的JS库，还是有必要学习它的源码的。也可以学着打造属于自己的js类库，求职面试时可以增色不少。本文章学习的是v3.4.1 版本。unpkg.com源码地址：https://un...

Gilbertat 2019-08-26 10:25 评论0 收藏0