Eine Einführung in einige verbesserte Details von jQuery

jquery API“>jQuery 1.5 Beta1 ist verfügbar. Diesmal ist es relativ spät (ich weiß nicht einmal, wann 1.5 als Alpha herauskam, es ist nur eine Betaversion). 🎜>

Das größte Update der Version 1.5 ist die vollständige Neufassung von AJAX, die eine stärkere Skalierbarkeit bietet. Aufgrund von Energie- und Platzbeschränkungen wird die Analyse des neuen AJAX jedoch auf ein anderes Mal verschoben die Details.

jQuery._Deferred und jQuery.Deferred

Zuallererst muss ich über diese beiden neuen Dinge sprechen, weil sie als Infrastruktur existieren und ich diese beiden nicht verstehe Einige Probleme können überhaupt nicht erklärt werden.

Erstens ist

eine erweiterte Version von jQuery.Deferred, daher kann der Beginn mit jQuery._Deferred den größten Teil des Problems erklären ? Im wahrsten Sinne des Wortes ist meine erste Reaktion „Lazy Loading“, der erste Buchstabe in Großbuchstaben sollte die Definition von „Typ“ sein, also ist dies wahrscheinlich ein Typ, der „tatsächlich eine Lazy Loading-Funktion bereitstellt“, obwohl dies eine gewisse Bedeutung hat Etwas „Verzögerung“, dieses Ding wird nicht zum Implementieren von Lazy Loading verwendet. jQuery._Deferred ist einfach eine Funktionswarteschlange und seine Funktionen sind wie folgt:

Mehrere Funktionen speichern jQuery._Deferred

• Führen Sie alle gespeicherten Funktionen zu einem bestimmten Zeitpunkt aus. >
  Nach der Ausführung wird die neu eingegebene Funktion sofort ausgeführt .

• Fühlt es sich ähnlich an? Ja, die Ready-Funktion in jQuery 1.5 wurde tatsächlich darauf aufgepfropft >
stellt die folgende Schnittstelle bereit:

:

Formular, das zum Hinzufügen von Funktionen zur Warteschlange verwendet wird

jQuery._Deferred:

Formular, verwenden Sie

, um
• dieses

  Objekt anzugeben, doneGeben Sie Parameter an und rufen Sie alle Funktionen in der Warteschlange auf. Nachdem function(fn1, fn2, …) aufgerufen wurde, wechselt _Deferred in den Status

  isResolved
. und zukünftige Aufrufe von
• speichern die Funktion nicht, sondern rufen die Funktion

  firefunction(context, args)context auf: Entspricht dem Aufruf von , einer vereinfachten Methode argsfiredone: Wird verwendet, um festzustellen, ob der Status „_Deferred“ vorliegt. Weitere Informationen finden Sie in der Erläuterung der vorherigen Funktion

• resolve: Brechen Sie die gesamte Warteschlange ab, damit die Funktionen in der Warteschlange nicht erneut aufgerufen werden, egal ob sie fire(this, arguments) in der Zukunft ist

  . Schauen wir uns dieses Ding tatsächlich an. Das erste heißt
deferred
• und dient zum Speichern von Funktionen im „normalen“ Zustand namens

  failDeferredisResolved, der zum Speichern von Funktionen im Status „Fehler“ verwendet wird. Gleichzeitig bietet einige neue Schnittstellen: fire

• : Fügen Sie in der Form

  cancel zu fire und

  hinzu
.

jQuery._DeferredjQuery.Deferred: Entspricht der -Funktion von . jQuery.Deferred

• : Entspricht der

  -Funktion von then. function(done, fail)donedeferredfailfailedDeferred: Entspricht der

  -Funktion von
.

• failfailDeferreddone: Entspricht der

  -Funktion von
.

• fireRejectfailDeferredGleichzeitig wurde fire die Funktion

  abgebrochen.
• Wofür wird das also verwendet? Es gibt zwei Zustände: „Normal“ und „Fehler“, und es ist leicht vorstellbar ... Ja, es wird für AJAX verwendet. Ich werde es in der nächsten Analyse ausführlich erläutern.

  rejectÄnderungen in jQuery.readyfailDeferredresolveAufgrund der

  -Sache wird die
-Funktion von der Funktionswarteschlange abhängig. Die spezifischen Änderungen sind:

• Original Die Die isRejected-Variable ist kein Array mehr, sondern wird zu einem failDeferred-Objekt. isResolved

  Ursprünglich wurde die Logik zum Aufrufen aller Funktionen in
, wenn

DOMContentLoaded

verwendet wurde, jetzt auch in jQuery.Deferred verwendet. Der ursprüngliche Code: cancel

ändert sich erledigt:

jQuery.parseXML-Funktion

jQuery._Deferred hat eine statische Funktion jQuery.ready hinzugefügt, um eine browserkompatible Konvertierung von

String

in XML-Dokumentfunktionalität bereitzustellen. readyListjQuery._DeferredEs gibt viele Logiken für diese Funktion und es gibt nichts Besonderes an jQuery. Sie werden grob in die folgenden zwei Typen unterteilt:

Verwenden Sie für Standardbrowser das -Objekt: readListjQuery._DeferredFür IE verwenden Sie das

-Objekt:

while ( (fn = ready[ i++ ]) ) {       fn.call( document, jQuery ); }

var parser = new ActiveXObject('Microsoft.XMLDOM');   parser.async = 'false';   parser.loadXML(text);   var xml = parser.documentElement;

data部分

添加了jQuery.hasData函数，用于判断一个元素是否有jQuery附加上去的数据。

修改了jQuery.expando的实现，在原来单纯地取当前时间的基础上，添加了一个随机数：

expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( //D/g, "" );

这样保证在同一时间，引入多个jQuery副本，这几个副本之间的expando不会相互冲突，导致元素上的data变得错乱。一般来说，是不会引入多个jQuery副本的，但是使用SealJS等的时候，配置不当的话，也是很容易出现此类问题的。

DOM操作部分

原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组，在1.4.4版本中，通过/n或/t进行分隔，在1.5中增加了一个/r，用于对应Windows平台下的换行符（/r/n）。

jQuery.fn.attr函数，1.4.4版本中拒绝从TextNode和CommentNode上获取属性，在1.5版本中添加了一个AttributeNode（noteType == 2）。

在1.4.4版本中，jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件，这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了，不知是出于什么考虑。

对于IE下使用cloneNode复制节点，会将事件也一起复制过来的问题，1.4.4中是采取复制innerHTML的方式给予解决，而在1.5中则采纳了mootools团队提供的方法，使用cloneFixAttribute函数修正该问题。

cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行，处理IE的BUG的原理很简单，当然前端里一些看似简单的东西，都是很难发现的：

• IE中有个叫clearAttributes的函数，会清除到节点上的所有属性，顺便把和事件相关的<a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick</a>之类的属性也去掉了。在复制出来的节点上调用这个函数，就会把属性清得干干净净。

• IE中还有一个叫mergeAttributes的函数，把一个节点的属性复制到另一个节点上，但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes，把属性重新放回复制出来的节点上，这就相当于起到了去除事件相关属性的作用。

另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题，非常值得详细研究。

AJAX部分

AJAX已经完全重写了，只留下一点边边角角保留着1.4.4版本的风采，这里只抽取一部分进行简单的说明。

原来版本中$.get和$.post的实现非常相似，具体来说仅有一个method配置项不同，因此在1.5版本中被合并起来了：

$.each(['get', 'post'], function(i, method) {     $[method] = function() { ... }; });

ajaxSetup函数现在加了一行return this;，可以链式调用了。

serializeArray函数现在统一将value中的换行符替换成Windows的风格（/r/n）。

AJAX的回调函数中，作为参数的对象不再是原生的XMLHTTPRequest，而是jQuery自己封装的称为jXHR的对象，这个对象提供了XMLHTTPRequest的常用接口。

原本对于“请求成功”的浏览器状态码，除200-299以及304外，还有一个1223，来自于IE的一个BUG，会将204的状态码变成1223。现在因为有了jXHR对象，相当于中间多了一层，因此从jXHR对象获取statusCode不会出现1223的情况，已经被变回204了。

jQuery.ajax函数的配置项中多了一个statusCode项，其结构为map，用于指定返回特定状态码时的回调函数，大致形式如下：

jQuery.ajax({       url: 'xxx',     statusCode: {         200: function() { 处理请求成功 },         404: function() { 处理页面未找到 },         503: function() { 处理Service Unavailable }     } });

再添加了这个回调后，jQuery.ajax函数已经有非常多的回调函数，其触发过程如下：

1. 根据返回的状态码，触发success或者error回调。

2. 根据状态码，触发对应的statusCode回调。

3. 触发complete回调。

4. 触发全局ajaxComplete回调。

5. 如果此时没有正在执行的AJAX，触发全局ajaxStop回调。

其他细节

入口函数jQuery.fn.init现在多了一个参数，值始终为rootjQuery，用于加速init函数中对rootjQuery变量的查找速度（减少了一层作用域）：

// jQuery 1.5 beta1 源码23行 jQuery = function( selector, context ) {       // The jQuery object is actually just the init constructor 'enhanced'     return new jQuery.fn.init( selector, context, rootjQuery ); }

jQuery对象支持继承了，具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用：

// 202行：     return this.constructor( context ).find( selector ); // 253行：     var ret = this.constructor(); // 334行： return this.prevObject || this.constructor(null);

同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型，由于不是很常用jQuery，更是从来没有用到过需要继承jQuery的情况，因此也不方便说这个功能的作用有多大。

Das obige ist der detaillierte Inhalt vonEine Einführung in einige verbesserte Details von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!