Her JavaScript programcısı ne bilmeli? [kapalı]

Her JavaScript programcısının "JavaScript biliyorum" diyebilmesi için bilmesi gereken bir dizi şey var mı?

JQuery değil. YUI değil. Yok (vb.)

Çerçeveler yararlı olabilir, ancak genellikle JavaScript ve DOM'un sizden nasıl çalıştığına dair bazen çirkin ayrıntıları gizlerler. Amacınız “JavaScript'i biliyorum” diyebilmekse, bir çerçeveye çok fazla zaman ayırmak buna karşıdır.

Yaptıklarını grok yapmak ve yakalanmamak için bilmeniz gereken, ancak birçok kişi için hemen belirgin olmayan bazı JavaScript dil özellikleri:

• Bu object.propve object['prop']aynı şey (lütfen kullanmayı bırakabilir misin eval, teşekkürler); nesne özellikleri her zaman dizgidir (diziler için bile); Ne for... iniçindir (ve ne değildir ).

• Mülkiyet-koklama; nedir undefined(ve neden kokuyor ); neden görünüşte az bilinen inoperatör ile ilgili faydalı ve farklıdır typeof/ undefinedkontroller; hasOwnProperty; amacı delete.

• Bu Numberveri türü gerçekten şamandıra olduğu; şamandıra kullanmanın dilden bağımsız zorlukları; parseIntsekizli tuzaktan kaçınmak .

• Yuvalanmış fonksiyon kapsam belirleme; varkazara küresellerden kaçınmak istediğiniz kapsamda kullanmanın gerekliliği ; kapsamların kapaklar için nasıl kullanılabileceği; kapatma döngü sorunu .

• Küresel değişkenlerin ve windowözelliklerin nasıl çarpıştığı; küresel değişkenlerin ve belge öğelerinin IE'de nasıl çarpışmaması, nasıl çarpması gerektiği; bundan varkaçınmak için küresel kapsamda da kullanılması gerekliliği .

• İfadeden önce bir tanımdan önce bir tanımı function' kaldırmak ' için nasıl davranır ; işlev ifadeleri ve işlev ifadeleri arasındaki fark; adlandırılmış işlev ifadeleri neden kullanılmamalıdır .

• Yapıcı nasıl çalışır, prototypeözellik ve newoperatör gerçekten çalışır; gerçekte istediğiniz normal sınıf / alt sınıf / örnek sistemini oluşturmak için bundan faydalanma yöntemleri ; prototip oluşturmak yerine kapatma tabanlı nesneleri kullanmak isteyebileceğiniz zaman. (Çoğu JS öğretici materyali bu konuda kesinlikle korkunç; kafamda düz tutmam yıllar aldı.)

• thisArama zamanında nasıl belirlenir, bağlı değil; sonuç olarak yöntem geçişinin diğer dillerden beklediğiniz gibi çalışmadığı ; nasıl kapanır veya Function#bindbunun üstesinden gelmek için kullanılabilir.

• Diğer ECMAScript Beşinci Baskı gibi özellikler indexOf, forEachve işlevsel-programlama yöntemleri üzerindeArray ; eski tarayıcıları kullanabilmeniz için nasıl düzeltileceği; kompakt, okunabilir kod elde etmek için bunları satır içi anonim işlev ifadeleriyle kullanma.

• Tarayıcı ve kullanıcı kodu arasındaki kontrol akışı; eşzamanlı ve eşzamansız çalıştırma; kontrol akışı içinde (örneğin odak) yanan olaylar, kontrol döndüğünde meydana gelen olaylar ve zaman aşımları; sözde senkronize bir yerleşik gibi çağırmanın, alertpotansiyel olarak felaketle sonuçlanan yeniden girişe neden olabilir.

• Çapraz pencere komut dosyası oluşturma instanceof; çapraz pencere komut dosyasının farklı belgelerdeki kontrol akışını nasıl etkilediğini; postMessageumarım bunu nasıl düzeltir.

Son iki maddeyle ilgili bu cevaba bakınız .

En önemlisi, JavaScript'i eleştirel bir şekilde görüntülemeli, tarihsel nedenlerden dolayı kusurlu bir dil (çoğu dilden daha fazla) olduğunu kabul etmeli ve en kötü sorunlardan kaçınmalısınız. Crockford'un bu cephedeki çalışması kesinlikle okumaya değer (her ne kadar% 100 “İyi Parçalar” olduğu konusunda hemfikir değilim).

Devre dışı bırakılabilir.

Crockford'un Javascript: The Good Parts'da yazılan şeyleri anlamak, bir kişinin iyi bir JS programcısı olduğu konusunda oldukça iyi bir varsayımdır.

JQuery gibi iyi bir kütüphanenin nasıl kullanılacağını ve Javascript'in gizli kısımlarını hala bilmediğinizi hemen hemen biliyorsunuz.

Başka bir not, çeşitli tarayıcılarda hata ayıklama araçlarıdır. Bir JS programcısı, kodunu farklı tarayıcılarda nasıl hata ayıklayacağını bilmelidir.

Ah! Ve JSLint bilmek tamamen duygularınızı incitecek !!

Eğer gerçek bir JavaScript ninjası olmak istiyorsanız, Perfection'daki her sorunun cevabını bilmeniz gerekir .

İştahınızı hafifletmek için bir örnek:

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

Bu ifade ne döndürüyor?

• "numara"
• "Tanımsız"
• “İşlev”
• Hata

Bilmiyorsanız JavaScript bilmiyorsunuz:

1. Kapaklar
2. Prototip tabanlı miras
3. Modül düzeni
4. W3C-DOM
5. Etkinlikler nasıl çalışır?

javascript java değil :)

Web sitesi geliştirme ile başlayan birçok kişi, bana javascript sadece basit java olduğunu söyledi!

1. En az bir Javascript kütüphanesi (Jquery, Prototype, vb.)

2. Büyük tarayıcıların (MSIE 7-8, Firefox, Chrome, Safari) hata ayıklama araçlarını nasıl kullanacağınızı öğrenin

3. Endüstride okuyun: Douglas Crockford'un web sitesi bir hazine hazinesi iken, Ajaxian.com Javascript için yeni, ilginç ve garip fikirlere ayak uydurmak için iyi bir blog. Başka kaynaklar da var ama bunlar bana en çok yardımcı olanlar.

Javascript nesneleri ve birinci sınıf vatandaş olarak işlev , geri çağrılar , olayları unutmamak ve sonra JQuery .

Bu Javascript bir saat içinde öğrenilebilecek bir şey değil!

Yerel olduğu bildirilmedikçe değişkenler globaldir !!

Kötü (DoSomething () yalnızca 10 kez çağrılır):

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

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

CountToFive();

İyi (DoSomething () amaçlandığı gibi 50 kez çağrılır):

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

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

CountToFive();

Nasıl iyi parçaları kullanmak ve korkunç parçaları önlemek için nasıl .

Javascript'in başlangıçta LiveScript olarak adlandırıldığını bilmek için ve 'Java' önekinin pazarlama amacıyla eklendiğini için Java ve Javascript ilişkili değillerdir.

Oh ve David Flanagan'ın 'Javascript: The Definitive Guide' programının herhangi bir sürümüne sahip olduğun için ( bu bilgi (sayfa 2'de verilmiştir).

... ve Jquery'den önce Internet Explorer 4'ün document.all [] ve Netscape Navigator 4'ün document.layers [] öğelerini gizlemeye çalışırken daha önce gitmiş olanları takdir ettiğiniz için.

DÜZENLE:

@Kinopiko'nun JavaScript'e aslında Mocha projesi denildiğini belirttiği gibi ( bazı kaynaklar buna LiveWire projesi olarak da adlandırılır), ancak genellikle Java öneki kabul edilmeden önce dilin (Brendan Eich tarafından yazılmıştır) LiveScript olarak yayınlanması planlanmaktadır. 1996 başlarında piyasaya sürüldü.

"JavaScript Biliyorum" demek için aşağıdakilerin farkında olunmalıdır:

1. JavaScript iyi ama DOM acı noktası
2. Çapraz tarayıcı sorunları sizi çıldırtabilir
3. Kod en az 4 farklı iyi tarayıcıda test edilmedikçe, hatasız olduğunu söyleyemezsiniz
4. Kapanış .............. bilmeli
5. Onun prototip tabanlı ........... Güzel bir bunu öğrenmek için eğlenceli
6. debugger anahtar kelime ..... Krize yardımcı olur

Bu JavaScript düşündüğünüzden diğer dillerden çok daha farklı. Bir izlenim edinmek için bu harika Google Tech Talk'u izleyin: http://www.youtube.com/watch?v=hQVTIJBZook

Her javascript kodlayıcısının bilmesi gereken nedir?

Nasıl olursa olsun, 2 tıklama ile çabalarınızı kapatabilirim. Bu yüzden mümkünse bir yedek sağlayın.

Javascript: İyi Parçalar'ı okumanızı şiddetle tavsiye ederim

Array, Number, String, Date ve Object'i etkili bir şekilde kullanabiliyorsanız javascript biliyorsunuz. Matematik ve RegExp için artı puan. İşlevler yazabilmeli ve değişkenleri kullanabilmelisiniz (doğru kapsamda, yani bir nesnenin 'yöntemleri' olarak).

Kapakları bilmek, abartılı fonksiyon sözdizimi, blabla hakkında bazı yorumlar görüyorum. Bütün bunlar bu soru için oldukça alakasız. Bu, 100 metrelik çizgiyi 11 saniyenin altında çalıştırabiliyorsanız koşucu olduğunuzu söylemek gibidir.

Javascript'te yetkin olmanın belki birkaç hafta sürdüğünü söylüyorum. Bundan sonra, uzman, ninja vb.Olarak yıllarca düzinelerce kitap ve binlerce satır programlama gerekir.

Ama soru bu değildi.

Oh, ve DOM javascript bir parçası değildir ve her ikisi de jQuery değildir. Bu yüzden her ikisinin de soru ile aynı derecede alakasız olduğunu düşünüyorum.

JSLint http://www.JSLint.com/

Yukarıdakilerin tümünü okuduktan sonra, jQuery gibi bir çerçeve kullanarak Javascript öğrenmek de gayet iyi . Gerçek şu ki, bir çok millet ilk etapta JS'yi aldı. Bunda utanç yok.

dizi . lengthyöntemi dizi öğelerinin sayısı değil, en yüksek dizintir. öğe olarak ayarlanmış olsa bileundefined

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

bu davranış bir dil tasarım hatasından ayırt edilemez.

jQuery benim en iyi tavsiyem olurdu. Sadece kodun kendisi için değil, deyim, stil, arkasındaki öykünmeye öykünmeye değer.

Bu javascript dünyada en yaygın kullanılan dildir. (Muhtemelen)

Bir dili gerçekten iyi öğrenmek ve çeşitli tuhaflıklarını anlamak (yılların) deneyiminden gelir. Daha iyi bir programcı olmak istiyorsanız, tasarım desenlerini, nasıl ve ne zaman kullanılacağını ve / veya farkında olmadan bile kullandığınızı anlayarak söyleyebilirim; teknik mimari ve kullanıcı deneyimi.

(JavaScript) dilini bilmek, istediğiniz çerçeveyi alabileceğiniz ve istediğiniz zaman kullanabileceğiniz anlamına gelir. Kaçınılmaz olarak kaynak koduna dalmanız gerekecek ve bildiğiniz tek şey sözdizimi bir çerçeve veya 2 veya 3 ise, o zaman ileri gitmeyeceksiniz. Bununla birlikte, birkaç farklı çerçevenin kaynak koduna girmek muhtemelen JavaScript'in nasıl kullanılabileceğini görmenin en iyi yollarından biridir. Firebug veya Web Inspector'daki koda atlayarak, baktığınız şeyi daha iyi anlamak için JavaScript Belgelerini, özellikle Mozilla ve Webkit dokümanlarını kontrol ederek uğraşmak.

Nesneye Dayalı ve Fonksiyonel Programlama arasındaki farkı anlamak, JavaScript'in ikisinin seksi bir karışımıdır ve bir katil kod tabanı ve harika uygulamalar oluşturmak için ne zaman ve nasıl kullanılacağını daha iyi bir JavaScript Programcısı yapar.

Sadece bazı kitapların, özellikle de Crockford'un JavaScript'te neyin iyi olduğuna dair fikirlerini sunan "iyi bölümleri" okumak, JavaScript'in AWESOME bölümlerinin çoğunu atlamak sizi yanlış yere götürecektir.

Öte yandan Thomas Fuchs gibi biri tarafından yazılan kodlara göz atmak, şaşırtıcı ve etkili JavaScript yazmanın gücü hakkında size daha fazla bilgi verecektir.

Birkaç gotcha veya WTF'yi ezberlemeye çalışmak da pek yardımcı olmayacaktır, neden belirli kullandıklarını görmek için bir kütüphane / çerçeve kodunu, özellikle de yararlı bir şekilde yorumlanmış bir kodu kodlamaya ve adım atmaya başlarsanız, özellikleri / değerleri ve diğerlerini değil neden belirli işlenenleri ve işleçleri kullanmanın iyi ve ne zaman iyi olduğu, çerçevenin insanların kullandığı kodda hepsi bu kadar. Örnekle öğrenmekten daha iyi ne olabilir? : ^)

Javascript'te Performans önemlidir.

Kodunuzu optimize etmek için akıllı bir derleyici yok, bu yüzden C #, Java gibi dillerden daha javascript kodu yazarken daha dikkatli olmalısınız ...

nesne değişmezleri çünkü yazmak çok güzel.

Aşağıdaki şeyler de önemlidir:

1) Değişken kaldırma. 2) Kapsam zincirleri ve aktivasyon nesneleri.

ve sonra böyle şeyler: :)

3) wtfjs.com

4) her şey bir nesne http://www.lifeinafolder.com/images/Js.jpg

1. Olan ve olmayan bir yaşam olduğunu bilmek with()Çizgiyi çizecek ve çizecek ve nerede çizecek .
2. throwJavascript çalışma zamanını bilerek durdurmak için ifadeyle özel hatalar oluşturabilirsiniz .

JavaScript, return anahtar sözcüğünü ve return ifadesini aşağıdaki kod gibi yeni satır karakteriyle ayırmayı desteklemez (veya jsFiddle sayfamda deneyin )

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

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

JavaScript'in bu stili neden desteklemediğini anlamıyorum çünkü varsayılan JavaScript stiliyle karşılaştırıldığında çok karmaşık JavaScript kaynak kodunu okumak çok daha kolay.

PS. Yaklaşık 6 yıldır JavaScript yazdım. Ancak aşağıdaki işlevi yürütmeye çalıştığımda bu hatayı kendimle buldum. Her zaman tanımsız döndürür. Hata ayıklayıcı kullandığımda ve bu fonksiyona adım attığımda her şey yolunda gidiyor. Bence hayatımdaki en kötü programlama hatası olmalı.

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

JS işlevsel bir dil olduğundan, iyi bir JS programcısı Y-birleştiriciyi yazabilmeli ve başının üstünden nasıl çalıştığını açıklayabilmelidir.

... hakkında Google Web Toolkit sizin javascript proje muhtemelen çok daha conveniant şekilde geliştirilebilir anlama geldiğini.