2014-04-17 19 views
12

Qual è la principale differenza tra

$(this).attr("name") 

e

this.name 

e qual è la spiegazione tecnica?

+2

http://jsperf.com/jquery-this-attr-name-vs-this-name –

risposta

16

Il primo ottiene il valore dell'attributo dall'oggetto jQuery formato dall'elemento DOM. Il secondo ottiene la proprietà direttamente dall'elemento DOM ed è quindi più veloce. Dovresti usare le proprietà native dove possibile.

+1

... eccetto 'href' per i collegamenti, dove' this.href' restituirà sempre l'URL assoluto. – VisioN

+0

ma farà la differenza solo di 2 millisecondi. Quando intendi Quicker, sarà solo 2 millisecondi veloci, non 10 minuti o mezz'ora Più veloce di $ (questo) .attr ("nome"). Questo non dovrebbe fare la differenza . –

+3

@PratikJoshi la differenza è minore, ma perché non si desidera la migliore prestazione e il codice più breve? –

5

Beh, so che devi pensare ... è una questione di prestazioni ... ma no. È una questione di affidabilità.

Quando si accede al DOM tramite javascript, non si ha accesso diretto al DOM, si ottiene un'interfaccia, definita dalla specifica HTML del W3C.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-798055546

L'interfaccia HTMLElement definisce solo questa proprietà.

interface HTMLElement : Element { 
    attribute DOMString  id; 
    attribute DOMString  title; 
    attribute DOMString  lang; 
    attribute DOMString  dir; 
    attribute DOMString  className; 
}; 

modo da essere in grado di chiamare "this.name" solo su quegli elementi la cui interfaccia avere una proprietà "nome" definito (molto probabilmente ingressi).

Questo semplice codice ti darà l'idea di cosa può andare storto.

<a fakeAttr="Hola" id="myAnchor" data-mytext="Anyone?">Link</a> 


$(function(){ 

    /* This gives you undefined */ 
    alert('Direct access: ' + $('#myAnchor')[0].fakeAttr); 

    /* This gets the work done */ 
    alert('jQuery access: ' + $('#myAnchor').attr('fakeAttr')); 

    $('#myAnchor').click(function(){ 

    /* This is of course empty */ 
    alert(this.fakeAttr); 
    }); 
});  

http://jsbin.com/ganihali/1/edit

Come il browser costruisce il DOM JavaScript-oggetto proxy può variare ... IE usato per essere amichevole con gli sviluppatori e analizzare tutto dal DOM e poi dare allo sviluppatore come un ready usare la proprietà dell'oggetto. Ma quella era l'era preistorica, al giorno d'oggi nessun browser ti darà proprietà personalizzate. Neanche attributi dei dati (HTML5 valido).

Quindi vorrei essere molto attento a rendere il mio accesso veloce alle proprietà e soggetto a errori e utilizzare un framework (c'è una ragione per questo).