jQuery使用户能更方便地处理DOM、事件、实现动画效果,并且方便地为网站提供AJAX交互。

2、jQuery的模块依赖网:

jQuery一共13个模块,模块不是单一的,比如jQuery动画,都会依赖异步队列、动画队列、回调队列与数据缓存模块等。

jQuery抽出了所有可复用的特性,分离出单一模块,通过组合的用法,不管在设计思路与实现手法上jQuery都是非常高明的。

五大块:选择器、DOM操作、事件、AJAX与动画

那么为什么有13个模块?因为jQuery的设计中最喜欢的做的一件事,就是抽出共同的特性使之“模块化”,

当然也是更贴近S.O.L.I.D五大原则的“单一职责SRP”了,遵守单一职责的好处是可以让我们很容易地来维护这个对象,

比如,当一个对象封装了很多职责的时候,一旦一个职责需要修改,势必会影响该对象的其它职责代码。

通过解耦可以让每个职责更加有弹性地变化。
我们来看看jQuery文档针对业务层的Ajax的处理提供了一系列的门面接口:

.ajaxComplete()
.ajaxError()
.ajaxSend()
.ajaxStart()
.ajaxStop()
.ajaxSuccess()

底层接口:

jQuery.ajax()
jQuery.ajaxSetup()

快捷方法:

jQuery.get()
jQuery.getJSON()
jQuery.getScript()
jQuery.post()

jQuery接口的设计原理

业务逻辑是复杂多变的,jQuery的高层API数量非常多,而且也非常的细致,这样做可以更友好的便于开发者的操作,

不需要必须在一个接口上重载太多的动作。我们在深入内部看看Ajax的高层方法其实都是统一调用了一个静态的jQuery.ajax方法,

代码见右侧代码编辑器(27-43行)。
在jQuery.ajax的内部实现是非常复杂的,首先ajax要考虑异步的处理与回调的统一性,

所以就引入了异步队列模块(Deferred)与回调模块(Callbacks), 所以要把这些模块方法在ajax方法内部再次封装成、

构建出一个新的jQXHR对象,针对参数的默认处理,数据传输的格式化等等。

二:立即调用表达式

任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题。

jQuery就是利用了JavaScript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题。

jQuery的立即调用函数表达式的写法有三种:

写法1:

(function(window, factory) {factory(window)
}(this, function() {return function() {//jQuery的调用}
}))

可以看出上面的代码中嵌套了2个函数,而且把一个函数作为参数传递到另一个函数中并且执行,这种方法有点复杂,我们简化一下写法:

写法2:

var factory = function(){return function(){//执行方法}
}
var jQuery = factory();

上面的代码效果和方法1是等同的,但是这个factory有点变成了简单的工厂方法模式,需要自己调用,不像是一个单例的jQuery类,所以我们需要改成“自执行”,而不是另外调用。

写法3:

(function(window, undefined) {var jQuery = function() {}// ...window.jQuery = window.$ = jQuery;
})(window);

从上面的代码可看出,自动初始化这个函数,让其只构建一次。详细说一下这种写法的优势:

1、window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后,

在闭包内部使用它的时候,可以把它当成一个局部变量,显然比原先在window scope下查找的时候要快一些。
  2、undefined也是同样的道理,其实这个undefined并不是JavaScript数据类型的undefined,而是一个普普通通的变量名。

只是因为没给它传递值,它的值就是undefined,undefined并不是JavaScript的保留字。

为什么要传递undefined?

Javascript 中的 undefined 并不是作为关键字,因此可以允许用户对其赋值。

var undefined = '孙丽媛' ;(function(window) { alert(undefined);//IE8 '孙丽媛' })(window)

IE8存在这个问题,当然,大部分浏览器都是不能被修改的

如果函数调用不传递,参数默认就是undefined

;(function(window,undefined) {//undefined
})(window)

jQuery为什么要创建这样的一个外层包裹,其原理又是如何?

这里要区分2个概念一个是匿名函数,一个是自执行。顾名思义,匿名函数,就是没有函数名的函数,也就是不存在外部引用。但是是否像下面代码实现呢:

function(){
//代码逻辑
}

上面这种写法是错了,声明了它但是又不给名字又没有使用,所以在语法上错误的,那么怎么去执行一个匿名的函数呢?
要调用一个函数,我们必须要有方法定位它、引用它。所以,我们要取一个名字:

var jQuery = function(){
//代码逻辑
}

jQuery使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表),那么这小括号能把我们的表达式组合分块,

并且每一块(也就是每一对小括号),都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。

所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号返回的,就是一个匿名函数的Function对象。

因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。

所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。

最后,我们回到写法1看看jQuery利用写法3的写法,然后把整个函数作为参数传递给另外一个函数,

主要是为了判断jQuery在不同平台的下的加载逻辑,主流的库一般都有对 AMD 和 CommonJS 的支持代码,看看jQuery的代码:

if (typeof module === "object" && typeof module.exports === "object") {module.exports = global.document ?factory(global, true) :function(w) {if (!w.document) {throw new Error("jQuery requires a window with a document");}return factory(w);};
} else {factory(global);
}

总结:全局变量是魔鬼, 匿名函数可以有效的保证在页面上写入JavaScript,而不会造成全局变量的污染,

通过小括号,让其加载的时候立即初始化,这样就形成了一个单例模式的效果从而只会执行一次。

转载于:https://www.cnblogs.com/sunliyuan/p/6026064.html

JQuery源码解析(一)相关推荐

  1. jquery源码解析:代码结构分析

    本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function() ...

  2. JQuery 源码解析资料

    2019独角兽企业重金招聘Python工程师标准>>> jQuery源码分析系列目录 jQuery源码解读-理解架构 jQuery源码解析(架构与依赖模块) jQuery v1.10 ...

  3. jQuery源码解析(架构与依赖模块)

    jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1. ...

  4. jQuery源码解析(架构与依赖模块)第一章 理解架构

    1-1 jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, F ...

  5. jquery源码解析:jQuery数据缓存机制详解2

    上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...

  6. jQuery 源码解析一:jQuery 类库整体架构设计解析

    如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...

  7. jQuery源码解析之on事件绑定

    本文采用的jQuery源码为jquery-3.2.1.js jquery的on方法用来在选定的元素上绑定一个或多个事件处理函数. 当参数selector存在时,通常会用来对已经存在的元素或将来即将添加 ...

  8. 浅谈jquery源码解析

    本文主要是针对jquery  v3.x版本来描述的,将从以下几个方面谈谈我对jquery的认识, 总体架构 $与$.fn jQuery.fn.init  (重要) jQuery.extend  与jQ ...

  9. jQuery源码解析之position()

    position() 作用: 返回被选元素相对于父元素(parent)的偏移坐标 使用: 直接调用$().position()即可,该方法没有 arguments(参数对象) <body> ...

  10. jQuery源码解析(5)—— Animation动画

    闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减.由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPrefilt ...

最新文章

  1. 盘点类别级物体6D位姿估计
  2. 【Android 逆向】Android 逆向通用工具开发 ( adb forward 网络端口重定向命令 | PC 端逆向程序主函数分析 )
  3. 三层学习------实践篇
  4. 蒸妙集团:大健康产业时代的弄潮儿,中国熏蒸行业的领跑者!
  5. 【杂谈】言有三一门CSDN视频课赚160万?你想的太、太、太多了
  6. 熟读《阿里巴巴java开发手册》(三、单元测试,四、安全规约)
  7. Android中去掉显示标题的方法
  8. [阅读笔记]Modern C++ Programming with Test-Driven Develpment chp2
  9. AllJoyn+Android开发案例-android跨设备调用方法
  10. Lattice Diamond软件使用
  11. 使用Teamviewer实现远程控制安卓设备的实现过程记录
  12. LAN9252采用外部阻容复位的时候,RESET引脚一直为低的原因以及对应解决办法。
  13. 怎样在小方框上打对号 小方框内打对勾 word 方框打对勾
  14. INCA_ProF脚本教程
  15. 关于自己在大学的一些经历
  16. Linux 中去除 vi/vim 和 git diff 中的 ^M 问题解决办法
  17. 计算机软件标杆企业,张军平老师—人工智能专家,复旦大学教授,博士生导师,中国计算机协会人工智能专委会委员,软件学报和自动化学报责任编辑...
  18. 罗斯柴尔德起家的时代背景
  19. 阿piu传-文档批量上传客户端豆丁版使用帮助
  20. 2022年中国移动互联网半年报告

热门文章

  1. Expression Blend 定义RadioButton行为动画
  2. U5398 改数(num)
  3. centos6.5虚拟机安装后,没有iptables配置文件
  4. vs2005 智能感知不正常的解决办法
  5. ORA-00054 资源正忙,但指定以NOWAIT 方式获取资源,或者超时失效
  6. Dynamic Performance Tables not accessible 问题解决
  7. Android面向切面编程框架(AspectJ 讲解)
  8. Failed to install *.apk on device *: timeout
  9. Android线程详解
  10. 数据库性能优化—数据库连接池