20170621-jQuery总体结构分析

dinfer 发布于2019-08-21 15:55 / 2098人阅读

摘要：利用了这一特性，通过在构造函数内部用运算符创建并返回另一个构造函数的实例，因此当我们创建对象的时候，可以使用的形式，也可以省略运算符，直接通过的形式得到对象。

jQuery总体结构

1    (function(window, undefined){
2    
3        var jQuery = (function(){
4            var jQuery = function(selector, context){
5                return new jQuery.fn.init(selector, context, rootjQuery);
6            },
7        
8            jQuery.fn = jQuery.prototype = {
9                constructor: jQuery,
10               init: function(selector, context, rootjQuery){ ... },
11               // 一些原型属性和方法
12           };
13           jQuery.fn.init.prototype = jQuery.fn;
14           jQuery.extend = jQuery.fn.textend = function() {...};
15           jQuery.extend({
16               // 一堆静态属性和方法
17           });
18       
19           return jQuery;
20       })();
21    
22       window.jQuery = window.$ = jQuery;
23   })(window)

具体分析

为什么要在构造函数jQuery内部(第4行)内部用运算符new创建并返回另一个构造函数的实例？

通常我们创建一个对象或实例的方式是在运算符new后紧跟一个构造函数，但是如果构造函数有返回值，运算符new所创建的对象就会被丢弃，返回值将作为new表达式的值。

jQuery利用了这一特性，通过在构造函数jQuery内部用运算符new创建并返回另一个构造函数的实例，因此当我们创建jQuery对象的时候，可以使用new jQuery(selector)的形式，也可以省略运算符，直接通过jQuery(selector)的形式得到jQuery对象。

为什么通过jQuery方法创建出来的对象(实际上并不是jQuery方法创建的，是有jQuery原型对象中的init方法创建的)，能够访问jQuery原型对象上的方法和属性？

在代码的第8行，我们可以看到jQuery的原型中包含init方法，该方法是创建jQuery对象时真正调用的方法。在代码的第13行，将init方法的原型对象重写为jQuery的原型对象，因此由init创建出来的对象能够访问jQuery原型对象上的属性和方法

为什么在第8行执行jQuery.fn = jQuery.prototype?

jQuery.fn是jQuery.prototype的简写，可以少些7个字母，方便拼写

jQuery.extend和jQuery.fn.textend方法有什么作用？

jQuery.extend = jQuery.fn.extend = function([deep,] target, object1 [,objectN]){
    ....
}

jQuery.extend和jQuery.fn.textend方法用于合并两个或多个对象的属性到第一个对象，其中，参数deep是可选的布尔值，表示是否进行深度合并(即递归合并)，合并行为默认是不递归的。参数target是目标对象，参数object1和objectN是源对象；如果仅提供了一个对象，则意味着参数target被忽略，此时jQuery或jQuery.fn被当做目标对象。通过这种方式可以在jQuery或jQuery.fn上添加新的属性和方法，jQuery的其他模块大都是这么实现的。

jQuery.fn和jQuery上的方法有什么不同

jQuery.fn和jQuery上的方法是不同的，jQuery.fn上的方法指的是jQuery原型对象中定义的方法，jQuery上的方法指的是jQuery作为一个Function类型的对象，它的方法属性。

例如调用$(document).ready(.....)时，ready是定义在jQuery.fn上的方法

例如调用jQuery.ajax(...)时，ajax是定义在jQuery上的方法

jQuery是如何实现链式调用的

在一些方法中，在最后会返回处理的结果，如果这个结果是jQuery对象，就可以在调用该方法时，在该方法的后面直接调用其他jQuery相关的方法，实现链式调用。

GPU云服务器云服务器数据分析总体分析总体数据分析结构体系分析数据分析结构

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

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

【Nginx源码分析】Nginx的listen处理流程分析

摘要：四监听套接字的使用假设此处我们使用作为事件处理模块在增加事件时用户可以使用中的字段当事件发生时该字段也会带回。在创建监听套接字时将结构分为级监听套接字地址各级都是一对多的关系。施洪宝一. 基础 nginx源码采用1.15.5 后续部分仅讨论http中的listen配置解析以及优化流程 1.1 概述假设nginx http模块的配置如下 http{ server { ...

yuanzhanghu 2019-07-25 14:31 评论0 收藏0
CNN--结构上的思考

摘要：前面我们通过几个数值展示了几个比较经典的网络的一些特性，下面我们就花一点时间来仔细观察网络的变化，首先是在网络结构上的一些思考，其次是对于单层网络内部的扩展，最后我们再来看看对于网络计算的改变。和这类结构主要看中的是模型在局部的拟合能力。前面我们通过几个数值展示了几个比较经典的网络的一些特性，下面我们就花一点时间来仔细观察CNN网络的变化，首先是VGG在网络结构上的一些思考，其次是Ince...

myshell 2019-04-25 18:05 评论0 收藏0
BiuJS[v1.0]说明文档(1)：总体结构

摘要：是一个轻巧的框架它实现了数据的双向绑定并提供一些基本的指令帮助你提升效率，比如，，，，是的，如你所见，以开头的指令是它的独特标识行左右的代码量，让应用的开发和加载的一瞬完成仓库启动首先我们来看一下是如何启动的是的挂载点，它决定在多大范围的树 showImg(https://segmentfault.com/img/remote/1460000012478667?w=1920&h=926...

崔晓明 2019-08-22 11:21 评论0 收藏0