Cosa dovrebbe sapere ogni programmatore JavaScript? [chiuso]

C'è una serie di cose che ogni programmatore JavaScript dovrebbe sapere per poter dire "Conosco JavaScript"?

Non jQuery. Non YUI. Non (ecc. Ecc.)

I frame possono essere utili, ma spesso nascondono i dettagli a volte brutti di come JavaScript e DOM funzionino davvero da te. Se il tuo obiettivo è quello di poter dire "Conosco JavaScript", allora investire molto tempo in un framework è contrario.

Ecco alcune funzionalità del linguaggio JavaScript che dovresti sapere per capire cosa sta facendo e non lasciarti sorprendere, ma che non sono immediatamente ovvie per molte persone:

• Quello object.prope object['prop']sono la stessa cosa (quindi puoi smettere di usare eval, grazie); che le proprietà dell'oggetto sono sempre stringhe (anche per le matrici); cosa for... inè per (e che cosa non lo è ).

• Proprietà-sniffing; cos'è undefined(e perché ha un odore ); perché l' inoperatore apparentemente poco noto è vantaggioso e diverso da typeof/ undefinedcontrolli; hasOwnProperty; lo scopo di delete.

• Che il Numbertipo di dati sia veramente un float; le difficoltà indipendenti dalla lingua nell'uso dei float; evitando la parseInttrappola ottale.

• Scoping di funzioni nidificate; la necessità di utilizzare varnell'ambito che si desidera evitare globali accidentali; come gli ambiti possono essere usati per le chiusure; il problema del circuito di chiusura .

• Come si windowscontrano le variabili e le proprietà globali ; come le variabili globali e gli elementi del documento non dovrebbero scontrarsi ma fare in IE; la necessità di utilizzare anche varnell'ambito globale per evitarlo.

• Come la functiondichiarazione agisce per " sollevare " una definizione prima del codice che la precede; la differenza tra dichiarazioni di funzioni ed espressioni di funzioni; perché le espressioni di funzioni con nome non devono essere utilizzate .

• Come funzionano veramente il costruttore, la prototypeproprietà e l' newoperatore; metodi per sfruttarlo per creare il normale sistema di classe / sottoclasse / istanza che si voleva effettivamente; quando si desidera utilizzare oggetti basati sulla chiusura anziché la prototipazione. (La maggior parte del materiale tutorial di JS è assolutamente terribile in questo; mi ci sono voluti anni per farlo capire bene.)

• Come thisviene determinato al momento della chiamata, non associato; come di conseguenza il passaggio del metodo non funziona come ti aspetti da altre lingue; come chiusure o Function#bindpossono essere utilizzate per aggirare questo.

• Altre caratteristiche di ECMAScript Fifth Edition come indexOf, forEache i metodi diArray programmazione funzionale su ; come riparare i browser più vecchi per essere sicuri di poterli usare; usandoli con espressioni di funzioni anonime incorporate per ottenere codice compatto e leggibile.

• Il flusso di controllo tra il browser e il codice utente; esecuzione sincrona e asincrona; eventi che si attivano all'interno del flusso di controllo (ad es. focus) rispetto a eventi e timeout che si verificano quando il controllo ritorna; come chiamare un builtin apparentemente sincrono come alertpuò finire per provocare un rientro potenzialmente disastroso.

• Come influenza lo scripting cross-window instanceof; come lo scripting cross-window influisce sul flusso di controllo tra diversi documenti; come postMessagesi spera risolverà questo.

Vedi questa risposta per quanto riguarda gli ultimi due elementi.

Soprattutto, dovresti visualizzare JavaScript in modo critico, riconoscendo che per ragioni storiche è un linguaggio imperfetto (anche più della maggior parte delle lingue) ed evita i suoi peggiori problemi. Il lavoro di Crockford su questo fronte merita sicuramente una lettura (anche se non sono d'accordo al 100% con lui su quali siano le "Parti buone").

Che può essere disabilitato.

Comprendere le cose scritte nel Javascript di Crockford : The Good Parts è una buona ipotesi che una persona sia un programmatore JS decente.

Puoi praticamente sapere come usare una buona libreria come JQuery e ancora non conoscere le parti nascoste di Javascript.

Un'altra nota sono gli strumenti di debug su vari browser. Un programmatore JS dovrebbe sapere come eseguire il debug del suo codice in diversi browser.

Oh! E sapere che JSLint danneggerà totalmente i tuoi sentimenti !!

Se vuoi essere un vero ninja JavaScript, dovresti conoscere le risposte a ogni domanda del Perfection uccide JavaScript Quiz .

Un esempio per stimolare l'appetito:

(function f(f){ 
  return typeof f(); 
})(function(){ return 1; });

Cosa restituisce questa espressione?

• "numero"
• "non definito"
• "funzione"
• Errore

Non conosci JavaScript se non conosci:

1. chiusure
2. Eredità basata sul prototipo
3. Il modello del modulo
4. Il W3C-DOM
5. Come funzionano gli eventi

..che javascript non è java :)

Molte, molte persone che iniziano con lo sviluppo di siti Web mi hanno detto che JavaScript è semplicemente Java!

1. Familiarizzare con almeno una libreria Javascript (Jquery, Prototype, ecc.).

2. Scopri come utilizzare gli strumenti di debug dei principali browser (MSIE 7-8, Firefox, Chrome, Safari)

3. Leggi sul settore: il sito Web di Douglas Crockford è un vero tesoro, mentre Ajaxian.com è un buon blog per tenere il passo con idee nuove, interessanti e o strane per Javascript. Ci sono molte altre risorse, ma quelle sono quelle che mi hanno aiutato di più.

Gli oggetti Javascript e funzionano come cittadini di prima classe , richiamate , per non dimenticare gli eventi e quindi JQuery .

Quel Javascript non è qualcosa che può essere appreso in un'ora!

Le variabili sono globali se non dichiarate locali !!

Bad (DoSomething () viene chiamato solo 10 volte):

function CountToTen()
{
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();

Buono (DoSomething () viene chiamato 50 volte come previsto):

function CountToTen()
{
  var i;
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  var i;
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();

Come usare le parti buone e come evitare le parti terribili .

Per sapere che Javascript era originariamente chiamato LiveScript e che il prefisso "Java" era associato a scopi di marketing non perché Java e Javascript fossero correlati (cosa che non lo sono).

Oh, e per possedere qualsiasi versione di "Javascript: The Definitive Guide" di David Flanagan (questa informazione è a pagina 2).

... e per apprezzare quelli che erano già passati nel tentativo di offuscare il documento.all [] di Internet Explorer 4 e il documento.layers [] di Netscape Navigator 4 prima che artisti del calibro di Jquery togliessero il dolore.

MODIFICARE:

Come sottolinea @Kinopiko JavaScript originariamente era chiamato progetto Mocha ( alcune fonti ritengono anche che fosse chiamato progetto LiveWire) ma è generalmente accettato che il linguaggio (scritto da Brendan Eich) fosse previsto per essere rilasciato come LiveScript prima che il prefisso Java fosse adottato uscita all'inizio del 1996.

Bisogna essere consapevoli di quanto segue per dire "Conosco JavaScript":

1. JavaScript è buono ma DOM è un punto dolente
2. I problemi del browser incrociato possono farti impazzire
3. A meno che il codice non sia testato su almeno 4 diversi buoni browser , non si può dire che sia privo di bug
4. Chiusura .............. Deve sapere
5. Basato sul suo prototipo ........... Bello è divertente imparare questo
6. parola chiave debugger ..... Aiuta in crisi

Quel JavaScript è molto più diverso rispetto ad altre lingue di quanto si pensi. Guarda questo fantastico Google Tech Talk per avere un'impressione: http://www.youtube.com/watch?v=hQVTIJBZook

Cosa dovrebbe sapere ogni programmatore javascript?

Che ne dici, posso disattivare i tuoi sforzi con 2 clic. Quindi, se possibile, fornire un fallback.

Consiglio vivamente di leggere Javascript: le parti buone

Conosci javascript se puoi usare Array, Number, String, Date e Object in modo efficace. Punti positivi per Math e RegExp. Dovresti essere in grado di scrivere funzioni e utilizzare variabili (nell'ambito corretto, cioè come "metodi" di un oggetto).

Vedo alcuni commenti sulla conoscenza di chiusure, sintassi di funzioni stravaganti, blabla. Tutto ciò è del tutto irrilevante per questa domanda. È come dire che sei un corridore se riesci a correre il trattino da 100m in 11 secondi.

Dico che ci vogliono forse un paio di settimane per diventare esperti in JavaScript. Dopodiché ci vogliono anni e dozzine di libri e migliaia di linee di programmazione per diventare un esperto, un ninja, ecc.

Ma non era questa la domanda.

Oh, e il DOM non fa parte di JavaScript, e nemmeno jQuery. Quindi penso che entrambi siano ugualmente irrilevanti anche per la domanda.

JSLint http://www.JSLint.com/

Dopo aver letto tutto quanto sopra, è anche perfettamente corretto imparare Javascript usando un framework come jQuery. La verità è che è il primo modo in cui molte persone hanno scelto JS in primo luogo. Nessuna vergogna.

matrice . lengthIl metodo non è un conteggio degli elementi dell'array, ma l'indice più alto. anche quando l'elemento è stato impostato suundefined

var a = [];
a.length;   // === 0
a[10];      // === undefined
a[10] = undefined;
a.length;   // === 11
a.pop();    // === undefined
a.length;   // === 10

questo comportamento è difficilmente distinguibile da un bug di progettazione del linguaggio.

jQuery sarebbe la mia migliore raccomandazione. Non solo per il codice stesso, è il linguaggio, lo stile, il pensiero dietro di esso che è più degno di emulazione.

Quel javascript è la lingua più diffusa al mondo. (Probabilmente)

Imparare una lingua davvero bene e comprenderne le varie stranezze deriva da (anni di) esperienza. Se vuoi essere un programmatore migliore, direi, comprendendo i modelli di progettazione, come e quando usarli e / o anche quando li stai usando senza accorgertene; architettura tecnica ed esperienza utente.

Conoscere la lingua (JavaScript) significa che puoi prendere qualsiasi framework e usarlo a piacimento. Dovrai inevitabilmente immergerti nel codice sorgente e se tutto ciò che sai è la sintassi un framework o 2 o 3, non andrai lontano. Nel dire questo, entrare nel codice sorgente di alcuni framework è probabilmente uno dei modi migliori per vedere come usare JavaScript. Fare casino scorrendo il codice in Firebug o Web Inspector, quindi controllando la documentazione JavaScript, in particolare i documenti Mozilla e Webkit, per capire meglio cosa stai guardando.

Comprendere la differenza tra programmazione orientata agli oggetti e funzionale, che JavaScript è un mix sexy tra i due e quando e come utilizzare entrambi per creare una base di codice killer e applicazioni fantastiche ti renderanno un programmatore JavaScript migliore.

Semplicemente leggendo alcuni libri, in particolare le "parti buone" di Crockford che presentano semplicemente le sue opinioni su ciò che è buono in JavaScript, mentre saltare la maggior parte delle parti INCREDIBILI di JavaScript ti farà iniziare con il piede sbagliato.

D'altra parte, controllare il codice scritto da qualcuno come Thomas Fuchs ti darà molte più informazioni sul potere di scrivere JavaScript sorprendenti ed efficienti.

Cercare di memorizzare alcuni gotcha o WTF non è di grande aiuto, lo prenderai se inizi a scrivere codice e ad analizzare un codice di libreria / framework, in particolare un commento utile, per capire perché ne hanno usati alcuni proprietà / valori e non altri perché e quando è bene usare operandi e operatori specifici, questo è tutto lì nel codice di utilizzo del framework. Quanto è meglio che imparare dall'esempio? : ^)

In Javascript, le prestazioni contano.

Non esiste un compilatore intelligente per ottimizzare il tuo codice, quindi dovresti stare più attento mentre scrivi il codice javascript rispetto a lingue come C #, Java ...

oggetti letterali perché sono così belli da scrivere.

Anche le seguenti cose sono importanti:

1) sollevamento variabile. 2) Scope catene e oggetti di attivazione.

e poi cose come queste: :)

3) wtfjs.com

4) tutto è un oggetto http://www.lifeinafolder.com/images/Js.jpg

1. Sapere che esiste una vita con e senza with()e dove tracciare la linea.
2. È possibile creare errori personalizzati con l' throwistruzione per arrestare intenzionalmente il runtime javascript.

JavaScript non supporta la separazione della parola chiave return e dell'istruzione return con carattere newline come il seguente codice (o provalo nella mia pagina jsFiddle )

function foo()
{
    return
    {
        bar: 'something'
    };
}

$(function()
{
    document.write(foo());
});

Non capisco perché JavaScript non supporti questo stile perché è molto più semplice leggere un codice sorgente JavaScript molto complesso se confrontato con lo stile predefinito di JavaScript.

PS. Ho scritto JavaScript per quasi 6 anni. Ma ho appena trovato questo bug con me stesso quando provo ad eseguire la seguente funzione. Restituisce sempre indefinito. Quando uso il debugger e passo in questa funzione, tutto funziona perfettamente. Penso che dovrebbe essere il peggior bug di programmazione della mia vita.

function JqGridInlineEditor_GenerateTool(cellvalue, options, rowObject, disableEdit, disableDelete)
{
    return 
        (!disableEdit ? '<a class="button edit" href="javascript: void(0);" onclick="JqGridInlineEditor_EditRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Edit.gif'), 'Click here to Edit or \nDouble-click row to edit.') : '') +
        (!disableDelete ? '<a class="button delete" href="javascript: void(0);" onclick="JqGridInlineEditor_DeleteRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Delete.png'), 'Click here to Delete or \nSelect row and then press Delete') : '') +
        (!disableEdit ? '<a class="button save" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_SaveRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Save.png'), 'Click here to Save or \nPress Enter') : '') +
        (!disableEdit ? '<a class="button cancel" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_RestoreRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Cancel.png'), 'Click here to Cancel or \nPress Esc') : '');
}

Poiché JS è un linguaggio funzionale, un programmatore JS decente deve essere in grado di scrivere Y-combinatore e spiegare come funziona al di sopra della testa.

... su Google Web Toolkit , il che significa che il tuo progetto javascript probabilmente potrebbe essere sviluppato in un modo molto più conveniente.