Apa yang harus diketahui oleh setiap programmer JavaScript? [Tutup]

Apakah ada satu set hal yang harus diketahui oleh setiap programmer JavaScript agar bisa mengatakan "Saya tahu JavaScript"?

Bukan jQuery. Bukan YUI. Tidak (dll. Dll)

Kerangka mungkin berguna, tetapi mereka sering menyembunyikan detail kadang-kadang jelek tentang bagaimana sebenarnya JavaScript dan DOM bekerja dari Anda. Jika tujuan Anda adalah untuk bisa mengatakan "Saya tahu JavaScript", maka menginvestasikan banyak waktu dalam suatu kerangka kerja bertentangan dengan itu.

Berikut adalah beberapa fitur bahasa JavaScript yang harus Anda ketahui untuk memahami apa yang dilakukannya dan tidak ketahuan, tetapi yang tidak segera jelas bagi banyak orang:

• Itu object.propdan itu object['prop']adalah hal yang sama (jadi bisakah kamu berhenti menggunakan eval, terima kasih); bahwa properti objek selalu berupa string (bahkan untuk array); apa for... inadalah untuk (dan apa yang bukan ).

• Properti mengendus; apa undefineditu (dan mengapa baunya ); mengapa inoperator yang tampaknya kurang dikenal itu menguntungkan dan berbeda dari typeof/ undefinedmemeriksa; hasOwnProperty; tujuan dari delete.

• Bahwa Numbertipe data benar-benar pelampung; kesulitan independen menggunakan float; menghindari parseIntperangkap oktal.

• Pelingkupan fungsi bersarang; perlunya menggunakan vardalam lingkup yang Anda inginkan untuk menghindari global yang tidak disengaja; bagaimana ruang lingkup dapat digunakan untuk penutupan; yang masalah penutupan lingkaran .

• Bagaimana variabel dan windowproperti global bertabrakan; bagaimana variabel global dan elemen dokumen tidak boleh bertabrakan tetapi lakukan di IE; perlunya menggunakan vardalam lingkup global juga untuk menghindari ini.

• Bagaimana functionpernyataan tersebut bertindak untuk ' mengangkat ' definisi sebelum kode sebelumnya; perbedaan antara pernyataan fungsi dan ekspresi fungsi; mengapa ekspresi fungsi bernama tidak boleh digunakan .

• Bagaimana fungsi konstruktor, prototypeproperti, dan newoperator benar-benar berfungsi; metode mengeksploitasi ini untuk membuat sistem kelas / subclass / instance normal yang Anda inginkan; ketika Anda mungkin ingin menggunakan objek berbasis penutupan alih-alih prototyping. (Sebagian besar materi tutorial JS benar-benar mengerikan dalam hal ini; butuh bertahun-tahun untuk membuatnya langsung di kepala saya.)

• Bagaimana thisditentukan pada saat panggilan, tidak terikat; bagaimana konsekuensinya metode passing tidak berfungsi seperti yang Anda harapkan dari bahasa lain; bagaimana penutupan atau Function#binddapat digunakan untuk mengatasi itu.

• Fitur ECMAScript Fifth Edition lainnya seperti indexOf, forEachdan metodeArray pemrograman fungsional ; cara memperbaiki browser yang lebih lama untuk memastikan Anda dapat menggunakannya; menggunakannya dengan ekspresi fungsi anonim sebaris untuk mendapatkan kode yang ringkas dan mudah dibaca.

• Aliran kontrol antara browser dan kode pengguna; eksekusi sinkron dan asinkron; peristiwa yang menyala di dalam aliran kontrol (mis. fokus) vs. peristiwa dan batas waktu yang terjadi ketika kontrol kembali; bagaimana memanggil builtin yang seharusnya seperti sinkron alertdapat berakhir menyebabkan berpotensi kembali bencana.

• Bagaimana pengaruh skrip lintas-jendela instanceof; bagaimana skrip lintas-jendela memengaruhi aliran kontrol di berbagai dokumen; bagaimana postMessagemudah-mudahan akan memperbaiki hal ini.

Lihat jawaban ini mengenai dua item terakhir.

Yang terpenting, Anda harus melihat JavaScript secara kritis, mengakui bahwa karena alasan historis bahasa yang tidak sempurna (bahkan lebih dari kebanyakan bahasa), dan menghindari titik kesulitan terburuknya. Karya Crockford di bagian depan ini pasti layak dibaca (meskipun saya tidak 100% setuju dengannya tentang "Bagian Bagus").

Itu bisa dinonaktifkan.

Memahami hal-hal yang ditulis dalam Javascript Crockford : The Good Parts adalah asumsi yang cukup bagus bahwa seseorang adalah programmer JS yang layak.

Anda dapat mengetahui cara menggunakan pustaka yang bagus seperti JQuery dan masih belum tahu bagian-bagian tersembunyi dari Javascript.

Catatan lain adalah alat Debugging di berbagai browser. Seorang programmer JS harus tahu cara men-debug kodenya di browser yang berbeda.

Oh! Dan mengetahui JSLint akan benar-benar melukai perasaan Anda !!

Jika Anda ingin menjadi ninja JavaScript sejati, Anda harus tahu jawaban untuk setiap pertanyaan di Kuis Kesempurnaan membunuh JavaScript .

Contoh untuk membangkitkan selera Anda:

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

Apa yang dikembalikan ungkapan ini?

• "jumlah"
• "tidak terdefinisi"
• "fungsi"
• Kesalahan

Anda tidak tahu JavaScript jika Anda tidak tahu:

1. Penutupan
2. Warisan berbasis prototipe
3. Pola modul
4. W3C-DOM
5. Cara kerja acara

..bahwa javascript bukan java :)

Banyak, banyak orang mulai dengan pengembangan situs web telah mengatakan kepada saya bahwa javascript hanyalah java!

1. Biasakan diri Anda dengan minimal satu perpustakaan Javascript (Jquery, Prototype, dll).

2. Pelajari cara menggunakan alat debugging dari browser utama (MSIE 7-8, Firefox, Chrome, Safari)

3. Baca di industri: situs web Douglas Crockford adalah harta karun sementara Ajaxian.com adalah blog yang bagus untuk mengikuti ide-ide baru, menarik, dan aneh untuk Javascript. Ada sejumlah sumber daya lain tetapi itu adalah yang paling membantu saya.

Objek dan fungsi Javascript sebagai warga negara kelas satu , panggilan balik , untuk tidak melupakan acara dan kemudian JQuery .

Javascript itu bukan sesuatu yang bisa dipelajari dalam satu jam!

Variabel bersifat global kecuali dinyatakan sebagai lokal !!

Buruk (DoSomething () hanya disebut 10 kali):

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

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

CountToFive();

Baik (DoSomething () disebut 50 kali sebagaimana dimaksud):

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

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

CountToFive();

Bagaimana cara menggunakan bagian yang baik, dan bagaimana cara menghindari bagian yang buruk .

Untuk mengetahui bahwa Javascript pada awalnya disebut LiveScript dan awalan 'Java' dilampirkan untuk tujuan pemasaran bukan karena Java dan Javascript terkait (yang tidak).

Oh dan untuk memiliki 'Javascript: The Definitive Guide' versi David Flanagan (informasi ini ada di halaman 2).

... dan untuk menghargai orang-orang yang telah pergi sebelumnya dalam mencoba mengaburkan dokumen Internet Explorer 4.all [] dan dokumen Netscape Navigator 4.pemain [] sebelum orang-orang seperti Jquery menghilangkan rasa sakit.

EDIT:

Seperti @Kinopiko tunjukkan bahwa JavaScript disebut sebagai proyek Mocha awalnya ( beberapa sumber juga menganggap itu disebut proyek LiveWire) tetapi secara umum diterima bahwa bahasa (ditulis oleh Brendan Eich) dijadwalkan akan dirilis sebagai LiveScript sebelum awalan Java diadopsi pada rilis pada awal 1996.

Orang harus menyadari tentang hal berikut untuk mengatakan "Saya Tahu JavaScript":

1. JavaScript bagus tapi DOM adalah titik sakit
2. Masalah lintas browser dapat membuat Anda menjadi gila
3. Kecuali jika kode diuji pada setidaknya 4 browser bagus yang berbeda, Anda tidak bisa mengatakan bebas bug
4. Penutupan .............. Harus tahu
5. Ini berdasarkan prototipe ........... Bagus menyenangkan untuk mempelajari ini
6. kata kunci debugger ..... Membantu dalam krisis

JavaScript itu jauh lebih berbeda dari bahasa lain daripada yang Anda kira. Tonton Google Tech Talk yang hebat ini untuk mendapatkan kesan: http://www.youtube.com/watch?v=hQVTIJBZook

Apa yang harus diketahui oleh setiap pembuat kode javascript?

Bagaimana, saya dapat mematikan upaya Anda dengan 2 klik. Jadi berikan fallback jika memungkinkan.

Saya sangat merekomendasikan untuk membaca Javascript: The Good Parts

Anda tahu javascript jika Anda dapat menggunakan Array, Number, String, Date dan Object secara efektif. Poin plus untuk Matematika dan RegExp. Anda harus dapat menulis fungsi dan menggunakan variabel (dalam ruang lingkup yang benar, yaitu sebagai 'metode' suatu objek).

Saya melihat beberapa komentar tentang mengetahui penutupan, sintaks fungsi boros, blabla. Semua itu tidak relevan untuk pertanyaan ini. Itu seperti mengatakan Anda seorang pelari jika Anda dapat menjalankan tanda hubung 100m dalam waktu 11 detik.

Saya mengatakan mungkin perlu beberapa minggu untuk menjadi mahir dalam javascript. Setelah itu butuh bertahun-tahun dan puluhan buku dan ribuan jalur pemrograman untuk menjadi ahli, seorang ninja, dll.

Tapi itu bukan pertanyaannya.

Oh, dan DOM bukan bagian dari javascript, dan juga bukan jQuery. Jadi saya pikir keduanya sama-sama tidak relevan dengan pertanyaan juga.

JSLint http://www.JSLint.com/

Setelah membaca semua di atas, itu juga baik-baik saja untuk belajar Javascript dengan menggunakan kerangka kerja seperti jQuery. Yang benar adalah ini adalah cara pertama yang dilakukan banyak orang pada JS. Tidak perlu malu.

Array . lengthMetode bukanlah hitungan item array, tetapi indeks tertinggi. bahkan ketika item diatur keundefined

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

perilaku ini sulit dibedakan dari bug desain bahasa ..

jQuery akan menjadi rekomendasi terbaik saya. Bukan hanya untuk kode itu sendiri, itu adalah idiom, gaya, pemikiran di baliknya yang paling layak ditiru.

Javascript itu adalah bahasa yang paling banyak digunakan di dunia. (Mungkin)

Belajar bahasa dengan sangat baik dan memahami berbagai keanehannya berasal dari pengalaman bertahun-tahun. Jika Anda ingin menjadi programmer yang lebih baik, saya akan mengatakan, memahami pola desain, bagaimana dan kapan menggunakannya dan / atau bahkan ketika Anda menggunakannya tanpa menyadarinya; arsitektur teknis & pengalaman pengguna.

Mengetahui bahasa (JavaScript) berarti Anda dapat mengambil kerangka kerja apa pun dan menggunakannya sesuka hati. Anda pasti harus menyelami kode sumber, dan jika semua yang Anda tahu adalah sintaks kerangka kerja atau 2 atau 3, maka Anda tidak akan melangkah jauh. Dengan mengatakan itu, masuk ke beberapa kode sumber kerangka kerja yang berbeda mungkin merupakan salah satu cara terbaik untuk melihat bagaimana JavaScript dapat digunakan. Bercakap-cakap dengan melangkah melalui kode di Firebug atau Inspektur Web, kemudian memeriksa Dokumentasi JavaScript, terutama dokumen Mozilla dan Webkit, untuk mendapatkan pemahaman lebih lanjut tentang apa yang Anda lihat.

Memahami perbedaan antara Pemrograman Berorientasi Objek dan Fungsional, bahwa JavaScript adalah campuran yang seksi dari keduanya dan kapan serta bagaimana menggunakan keduanya untuk membuat basis kode pembunuh dan aplikasi yang mengagumkan akan membuat Anda menjadi Programmer JavaScript yang lebih baik.

Cukup membaca beberapa buku, terutama "bagian bagus" Crockford yang hanya menyajikan pendapatnya tentang apa yang baik dalam JavaScript, sementara melewatkan sebagian besar bagian yang mengagumkan dari JavaScript akan membuat Anda salah langkah.

Memeriksa kode yang ditulis oleh seseorang seperti Thomas Fuchs di sisi lain akan memberi Anda lebih banyak wawasan tentang kekuatan menulis JavaScript yang luar biasa dan efisien.

Mencoba untuk menghafal beberapa gotchas atau WTF tidak akan banyak membantu, Anda akan mengambilnya jika Anda mulai mengkodekan dan melangkah melalui kode perpustakaan / kerangka kerja, terutama yang berkomentar bermanfaat, untuk melihat mengapa mereka telah menggunakan tertentu properti / nilai dan bukan yang lain mengapa dan kapan sebaiknya menggunakan operan dan operator tertentu, ini semua ada dalam kode kerangka yang digunakan orang. Bagaimana lebih baik daripada belajar dengan contoh? : ^)

Dalam Javascript, Kinerja penting.

Tidak ada kompiler yang cerdas untuk mengoptimalkan kode Anda sehingga Anda harus lebih berhati-hati saat menulis kode javascript daripada bahasa seperti C #, Java ...

objek literal karena mereka sangat bagus untuk menulis.

Hal-hal berikut juga penting:

1) Pengangkat variabel. 2) Lingkup rantai dan objek aktivasi.

dan kemudian hal-hal seperti ini: :)

3) wtfjs.com

4) semuanya adalah objek http://www.lifeinafolder.com/images/Js.jpg

1. Mengetahui bahwa ada kehidupan dengan dan tanpa with()dan di mana harus menarik garis.
2. Anda dapat membuat kesalahan khusus dengan throwpernyataan untuk menghentikan runtime javascript secara sengaja.

JavaScript tidak mendukung pemisahan kata kunci kembali dan pernyataan kembali dengan karakter baris baru seperti kode berikut (atau coba di halaman jsFiddle saya )

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

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

Saya tidak mengerti mengapa JavaScript tidak mendukung gaya ini karena jauh lebih mudah untuk membaca kode sumber JavaScript yang sangat kompleks bila dibandingkan dengan gaya default JavaScript.

PS. Saya telah menulis JavaScript hampir 6 tahun. Tetapi saya baru saja menemukan bug ini pada diri saya ketika saya mencoba menjalankan fungsi berikut. Itu selalu mengembalikan tidak terdefinisi. Ketika saya menggunakan debugger dan masuk ke fungsi ini semuanya berfungsi dengan baik. Saya pikir itu harus menjadi bug pemrograman terburuk dalam hidup saya.

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') : '');
}

Karena JS adalah bahasa fungsional, seorang programmer JS yang baik harus mampu menulis Y-combinator dan menjelaskan cara kerjanya dari atas kepala.

... tentang Google Web Toolkit , yang berarti proyek javascript Anda mungkin dapat dikembangkan dengan cara yang jauh lebih nyaman.