www.qjdy.com-奇迹赌场 > 佳美特设计 > each()方法是对这个对象中的DOM元素进行遍历

原标题:each()方法是对这个对象中的DOM元素进行遍历

浏览次数:156 时间:2019-07-11

jQuery对于豪门来说并不目生,因而关于它是怎么样以及它的效果,在那边作者就比相当少言了,而本篇小说的指标是想透过对源码轻便的深入分析来谈谈 jQuery 的中央架构设计,以及jQuery 是怎么选拔javascript中的高端天性来营造这样伟大的javascript库。

1 初识jQuery

从基本成效来看,jQuery仅仅做了一件简单而又平凡的事:查询。它的语法如此简单,以至于很几人在不知晓javascript是怎么着的时候就已经会用jQuery了,用一个词形容正是:大道至简。 从希图规模来看,我们能够将jQuery提供方式分为两大类:静态方法和实例方法。静态方法便是一贯通过$访问的诀要,那几个办法一般不对dom元素操作,而是提供了一些常用的工具,比如ajax恳求、以及对字符串的一对常用操作,除却,jQuery还提供了对自己的增加长沙制,你能够通过extend方法来编排你供给的零件。而实例方法和静态方法差异,它是用来对jQuery查询的DOM成分实行操作,jQuery试行$()会营造一个jQuery对象,这些指标以数组的办法囤积查询出的保有DOM元素,然后在那些目的的原型链上达成了对这一个DOM操作的主意,比方each()方法就是用来遍历每三个DOM成分的。你只怕会小心到,作者刚说那个目的“以数组的措施”存款和储蓄,这正是说,jQuery构建的这一个目的不是数组,这那么些指标到底是何许? 其实那几个指标正是jQuery的骨干,也被称作“jQuery对象”。因而,本文的根本便是对jQuery对象实行深入分析和研讨。

2 jQuery对象

一般情状下,大家会这么使用jQuery:

$('div').each(function(index){
  //this ...
});

$('div')实行完后回重临三个jQuery对象,each()方法是对那么些指标中的DOM成分举行遍历,咱们先看看$('div')的试行进度(本文源码摘自jQuery 3.0):

jQuery = function( selector, context ) {

 return new jQuery.fn.init( selector, context );

}

本条点子正是$('div')的进口方法,$是jQuery的简写,就约等于jQuery('div') ,能够阅览,这些措施只做了一件事,那正是回去jQuery.fn.init()函数的实例对象,那jQuery.fn.init 又是什么啊,大家再看下边包车型大巴代码:

init = jQuery.fn.init = function( selector, context, root ) {
 //... 
 return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init和init援引了同叁个方式,那一个措施遵照selector查询出符合条件的DOM成分,并再次回到,可您会开采,重临的是this,这么些this是什么吗?大家待会深入分析,先看下边包车型地铁那句话:

init.prototype = jQuery.fn;
那句话是怎么看头吧,那句话是让init方法的prototype对象指向了jQuery.fn对象,那jQuery.fn又是何等鬼? 我们后续看代码:

jQuery.fn = jQuery.prototype = {

 // The current version of jQuery being used
 jquery: version,

 constructor: jQuery,

 // The default length of a jQuery object is 0
 length: 0,

 // Execute a callback for every element in the matched set.
 each: function( callback ) {
  return jQuery.each( this, callback );
 },

 splice: arr.splice
};

为了节省篇幅,作者回顾了里面一些代码,从此间能够看看,jQuery.fn 其实正是jQuery的原型对象,那些原型对象中定义了有个别对this对象开展操作的艺术。到那边,你是或不是感觉到有一点点绕,不要焦心,大家来梳理一下思路:jQuery首先定义了贰个init方法,然后在init的原型对象prototype上定义了一雨后春笋操作方法。最终将init方法的实例对象回来。所以地点的经过能够简化如下(伪代码表示):

var init = function(selector,context,root){
 //...
 return this;
}

init.prototype = {
 length:0,
 each:function(callback){
  //...
 },
 splice:[].splice
}

jQuery = function(selector,context,root){

 return new init(selector,context,root);
}

那么难题来了,jQuery.fn中的方法为何不间接定义在init的prototype上,而要定义在jQuery的原型对象上?

实际上,那样做的目标是为了抓实jQuery的询问效用,假设一向定义在init的prototype对象上,那么每推行一次询问,就能够在内部存款和储蓄器中创造那样一个巨大的prototype对象,而假诺把这几个指标定义在jQuery的prototype上,在jQuery加载时,那一个目的就可以被开端化并直接留存于内部存款和储蓄器中,未来每回实践$()时,只须要将init中的prototype指向这几个指标就足以了,而不用每便都去创立贰次一律的对象。

大家再来看看 init 函数中回到的 this 到底是什么,小编在事先的博客中讲过,函数中的this总是指向运营期的调用者,这init的调用者是何人吗?在上头代码中犹如找不到调用者,这时我们就需求长远的明亮new运算符的运行机制了,借用本人前边在博客中对new运算符的描述,我们对new init()的实践进度进行如下解释:

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}

假定对new的运营机制不知道的请参谋博文: javascript new 的运转搭飞机制

从上述解释进程能够看来,javascript在经过 new 来成立三个实例对象的时候,会先创设了三个不以为奇对象obj,然后将obj的中间属性__proto__针对了init的原型对象,由此obj的原型链将被转移,而第3步使用call方法调用init(),所以init中的this指的便是此处的obj对象。

init()推行现在,会将合营到的装有DOM对象以数组的法子存储到this对象中并回到,也便是再次回到了obj对象,而new运算符最终也会将以此 obj 对象回来以作为新的实例对象。所以new运算符重临的这么些实例对象具有五个特点:一是富含了DOM查询结果集,二是其原型链承继了init的prototype,而 init 的 prototype 又针对了jQuery.fn对象,因而实例对象也会有着了这一个操作方法。

jQuery每施行三遍询问就能创立多个jQuery对象,而在同一个应用程序中,全部jQuery对象都会共享同叁个jQuery原型对象。因而,jQuery对象不仅仅包涵了DOM查询结果集,还一连了jQuery原型对象上的操作方法。那样,你就能够在查询后直接调用方法来操作那个DOM成分了。那正是jQuery的着力架构划虚拟计,简单、方便、实用!

假设你还不知道地点的执教,不要忧虑,小编按照jQuery的规划思路写了三个完完全全的小项目jDate,你能够对照着明亮!jDate项目已上传至GitHub,你能够点击这里查看完整代码:jDate ,如有差异思想,应接商讨!

3 jQuery 的缺陷

经过对jQuery的为主架构剖析,大家会发觉,每实施贰次查询,jQuery就要在内部存款和储蓄器中构建叁个繁杂的jQuery对象,即使说每一个jQuery对象都分享同八个jQuery原型,但jQuery的询问进度远比你想像的要复杂,它既要思量各个不相同的合作标志,同一时间又要思虑不一致浏览器的包容性。因而,假诺你只是对DOM做一些大约的操作,建议利用原生方法 querySelector 替代jQuery,可是在利用原生方法时,对于区别的选用场景你恐怕要做一些包容性的劳作,你要学会取舍,不要过于信赖jQuery!

如上正是本文的全体内容,希望对大家学习jquery有所启发。

你也许感兴趣的稿子:

  • 依照jQuery架构javascript基础类别
  • jQuery总体架构的明亮解析
  • jQuery源码深入分析-01整机架构深入分析
  • jQuery 2.0.3 源码深入分析之core(一)全体架构
  • jQuery学习笔记之完全架构
  • jquery的一体化架构深入分析及贯彻示例详解

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:each()方法是对这个对象中的DOM元素进行遍历

关键词: bbin电子游戏

上一篇:是一种在React组件内部构建标签的类XML语法

下一篇:没有了