İyi JavaScript yazmak için beş veya daha az ipucu? [kapalı]


14

JavaScript açık bir şekilde vazgeçilmez hale geldi; Bununla birlikte, hala yeni biriyim ve böyle bir karışıklık gibi hissetmekle mücadele etmenin zor olduğunu gördüm ve şu anda bununla uğraşmak istemiyorum. Diğer dilleri anlama konusunda JavaScript ile olandan çok daha ileriyim, çünkü bu korkuyu ele alamıyorum. JavaScript yazarken Weimaraner yavrularının portresini çizmeye çalıştığımı hissediyorum.

Genellikle yaptığım her hareket için kendime sorabileceğim bir avuç en önemli direktifleri aklımda tutmamda yardımcı olur. (Bana göre bir avuç beş veya daha az.)

JavaScript kodlarken, kendime yaptığım her hareket için kendime sormam gereken beş (veya daha az) soruyu listeleyebilir misiniz? Ne olurdu?

Güncelleme: açıklığa kavuşturmak için JavaScript öğrenirken akılda tutulması gereken beş şey istemiyorum; Her zaman kendime ileriye doğru sormak, herkesin her zaman sorması gereken beş soru soruyorum. "Bunu başka bir yerde tekrarlayabilecek miyim?" Gibi üst düzey sorular. veya "bu değişken / işlev adı yeterince spesifik mi (veya çok spesifik)" <== bu örnek sorular JavaScript'e özgü değildir. JavaScript'e özgü yönergeler arıyorum.


3
İfade edilen soru, her biri eşit derecede geçerli olacak birçok cevabı teşvik etmektir. Bu tür sorular iyi sorular oluşturmaz. Hepsini yeniden ifade edebilir misin? Aksi takdirde kapalı olma şansı yüksektir.
ChrisF

2
"En iyi 5 liste" burada Programcılar'da yaptığımız şey değildir. Yaşadığınız belirli bir sorunun cevabını almakla ilgileniyorsanız, bunu sormaktan çekinmeyin. Aksi takdirde, böyle listeler oluşturmak için Reddit'in r / Programming'i öneririm .

Yanıtlar:


6

Buna iki kısımda cevap vereceğim. Birincisi " İyi JavaScript yazmayı öğrenmek için beş veya daha az ipucu ". Diğeri ise "İyi JavaScript yazma konusunda beş veya daha az ipucu".

Öğrenme:

  1. Sorular sor
  2. dinlemek
  3. Okuma
  4. Malzeme Yap

Yapma:

  1. Globallerden kaçının (modülerleştirin)
  2. Zor işleri döngülerin dışında yapın (DOM seçimi, işlev bildirimleri vb.)
  3. Kapsamın nasıl çalıştığını öğrenin
  4. Kapakların ne zaman ve nasıl kullanılacağını öğrenin
  5. Nesneye Dayalı JS'nin nasıl çalıştığını öğrenin

DÜZENLEME (OP'ye uymak için sorular ekleme):

Hangi kapsamdan bahsediyorum?

Bu, sızan globaller, olay işleyicileri ve ne zaman kapanışların kullanılacağı konusunda yardımcı olmalıdır.

Kendimi tekrarlıyor muyum?

OO tekniklerinin uygun şekilde soyutlanması ve kullanılması önemlidir. Bunları akıllıca kullanın.

Kodum tekrarlanıyor mu?

DOM erişimini bir döngüye yerleştirirken veya bir döngüde işlevler (anonim veya başka bir şekilde) oluştururken kendinizi bulmak oldukça kolaydır. Bunun, geleneksel döngüler kullanan setTimeoutveya setIntervalolduğu gibi kod için geçerli olabileceğini unutmayın .

Bu ne demek istediğimi ifade ediyor mu?

JS'deki doğruluk ve falsi değerleri, özellikle katı olmayan karşılaştırmalar kullanırken ( ==aksine ===) biraz zor olabilir . Dinamik yazım, tür baskısı ve nesnelere veya değişmez nesnelere başvurup başvurmadığınız da ilgili olabilir.


28

İlk olarak, arkasındaki teknolojinin nasıl çalıştığını bilin.

Bunu bilmeniz gerekir, çünkü nasıl çalıştığının ardındaki bilgi, çünkü ağ sorunlarıyla karşılaşacaksınız veya sayısız kez gördüğüm gibi, insanlar gerçekten sunucu tarafı ve istemci tarafının gerçekte ne olduğunu anlamada tamamen başarısız oluyorlar . Gördüğüm en yaygın yeni sorulardan biri "ASP kodumda JS'nin bir değişkeni nasıl değiştirmesini sağlayabilirim ?!"

  • Neler olduğuna dair genel bir fikre sahip olmak için ethernet / wifi ve TCP / IP'yi anlıyor musunuz?
  • Aslında ne kadar HTTP biliyorsunuz?
  • Aslında HTML alıyor musunuz? Elbette, etiketlerin nasıl çalıştığını ve iç içe yerleştirildiğini biliyor olabilirsiniz, ancak aslında doktrin ve tuhaflıklar modunu anlıyor musunuz? Liste öğesinin etrafına paragraf etiketleri koymamanız gerektiğini anlıyor musunuz?
  • JavaScript'i icat edin (ve sunucu tarafında çalıştırılabileceğini açıklayın). ecmascript, livescript, mocascript, jsscript, düğüm ...
  • Pencere API'sini öğrenin, DOM API'sını öğrenin ve XHR API'sını öğrenin. Bu üç şeyi bilmiyorsanız, tarayıcı için iş yazma kodunuz yoktur.

Kodunuzun sizden veya özel durumunuzdan daha büyük olduğunu anlama

  • Elbette, bir şey yazdın, ama herkes onu görebilir. Hepsi "açık" kaynak. Tabii, gizleyebilirsiniz, minifiy, her neyse ... günün sonunda, eğer kodunuzu görmek istersem, koyduğunuz yöntemleri yenmek benim için önemsizdir.
  • Birden fazla tarayıcı farklılığını anlamanız gerekir. En popüler olanları veya pazar demografinizin sahiplerini hedefleyin. Örneğin, ie6, özellikle tablolar için DOM API yöntemleri yerine appendChild uygularsanız DOM tablo hücresi öğelerini oluşturmaz. Daha fazla örnek var, onları öğrenmelisin.
  • Tüm bu sorunların etrafına, tarayıcınızda değil tarayıcılarda nasıl kod yazılacağını anlamanız gerekir. Bir tarayıcıda iyi çalışan şeylerin bir diğerinde yavaş olduğunu hızlı bir şekilde öğreneceksiniz. Tarayıcıların nasıl çalıştığını ve neden farklı olduklarını bulmanız gerekir.
  • Odin'in sakalının aşkı için, kodunuza siteler arası komut dosyası saldırıları yapmama izin veren kod yazmayın. Bir hücreye ajax çağrısı yapar ve benzer cell.innerHTML = "<script>alert("xss")</script>"bir şey yaparsanız ve bir uyarı kutusu görünürse, bunu yanlış yaptınız.
  • Kanlı cehennemi DynamicDrive, w3Schools ve kötü tavsiyeler veren web sitelerinden uzak tutun. İyi tavsiye veren topluluklar bulmalısınız. Stack Overflow'da JavaScript ve Node.JS sohbet odalarımız var ve w3s gibi siteler eski verileri koruduğu ve asla rahatsız etmediği "daha iyi" olanların sınırlarını zorlamaya devam etmek için elimizden geleni yapıyoruz. W3C , Mozilla Geliştirici Ağı (MDN) gibi resmi spesifik sitelere bağlı kalmalısınız . Kodunuzun hakem değerlendirmesini isteyin. Kodunuzla acı verici bir şey yaptığınızı düşünüyorsanız, kodunuzla çok fazla cut + paste + tweak yaparken, derhal bir sohbet odasına gelmeli ve daha iyi kod yazma konusunda yardım istemelisiniz.
  • Rehberlik için geldiğinizde veya yaptığınız o harika şeyi paylaşmak istediğinizde ... lütfen, lütfen. Lütfen, belgelediğinizden emin olun, değişken adlarınızın anlamlı olduğundan emin olun, hepsinin tek satırlı olmadığından emin olun. Temiz kod yazmanız gerekiyor. Eğer bir çöp yığınınız varsa, sadece başarısız olmadınız, size nasıl yardım edeceğinizi bilen kimse istemeyecektir . Size yardım etmemize yardım edin.
  • JavaScript yazmak istiyorsunuz - bu herkesin JavaScript'i desteklemediğine saygı duyuyor. Bunun iki sebebi - 1) Herkes için daha hızlı internet 2) Konsol tabanlı tarayıcılar, komut dosyası olmayan kişiler, cep telefonları için Web'e daha erişilebilir. Söylemeye çalıştığım şey, birisinin JavaScript'i yoksa ve en azından <noscript>bunları bu şekilde uyarmak için etiketleri kullanması durumunda sitenizin zarif bir şekilde bozulması gerekir .
  • JavaScript'in prototip doğası nedeniyle, dilin gerçekte nasıl çalıştığı konusunda değişiklikler yapabilirsiniz - ki bu gerçekten çok tatlı. JavaScript gelişiyor, JS'nin eski sürümü olan "ECMA Script 3'ten" ve "ECMA Script 5" e (aka, es5) geçiyoruz. Prototip nedeniyle, es3 dilini es5 gibi çalışacak şekilde düzeltebiliriz. Yani, yani 6, 10 yaşındaki bir tarayıcı geçen yıl çıkan dil özelliğini alır. Mümkün olan her yerde es5-shims kullanın, gerçekten havalılar ve ona bakmanız gerekiyor.
  • İngilizce konuşan beyaz çocukların batı dünyası interneti kullanan değil. Buna göre kodlayın. Bu, uluslararasılaşmayı ve daha yüksek taleple ilgili kod yazmayı anlamanız gerektiği anlamına gelir. 10 yıl önce çevrimiçi 500 Milyondan az insan vardı, bugün kabaca 2 milyar ve 10 yıl sonra mı? Muhtemelen gezegendeki her insana yakın internet erişimi olacak, yani normal ifadeye uymayan /[a-z ']/i, ancak Hintçe, Arapça, aksanları içeren (bu kısa görüşlü geliştiricilerin mevcut bir problemidir), Çince , ve diğerleri. Karakter kümelerini anlama, Unicode ve UTF-8.

Sen bir programcısın, makarna fabrikası değil. Spagetti yazmayı bırak.

  • Anlamlı olan şeylerden sonra değişkenlerinizi adlandırın.
  • Kodunuzu belgeleyin. Gergedanla güçlendirilmiş JSDoc'u kullanmanız ya da bir sürü karalamanızın olması umrumda değil. Kodunuzu kullanacak kişiye yardımcı olacak belgeler yazın. Kodunuzu geliştirmek veya korumak isteyen biri için belgeler yazın. Yararlı yorumlar ekleyin. Gibi yorumlar "This fizzes the bizz"veya hangilerinin yarı İngilizce yarı Fransızca yararlı değildir. Bir işlevin ne yaptığını açıklayın. Kodun karmaşık bölümlerini açıklar.
  • Kod tekrarının nasıl sınırlanacağını öğrenin. Modüler tasarım veya fonksiyonel desenler arayın. Neleri soyutlayabileceğinize bakın. Aynı şeyi yapmak için büyük kod bölümlerini kesmekten + yapıştırarak + değiştirmemelisiniz.
  • DOM API'sını anlamanız gerekir. DOM ve pencere nesneleri birçok harika şey sağlar. Bu çok iş gibi geliyor ama bunun nedeni büyük bir korkutucu kısaltma. Birçoğunuz JavaScript ninjaları gibi kod yazmaktan hoşlanırsınız <a href="javascript:alert("foo")">. FFS YAPMAYIN. Tam belgenin yüklenmesini bekleyin, JavaScript kodunuzu html belgesinden ayırın. Bu temel OOP uygulamaları 101, sadece JS veya CSS'nizi html belgenize sıraya koymayın. Düzgün nasıl yapılacağını öğrenin veya size nasıl yapılacağını nasıl göstereceğini bilen birini bulun. Yine, sorular sorun.
  • Javascript:foo("buz")Tam olarak desteklenmeyen bir psudeo-protokoldür ve ilk etapta bunu kullanarak olmaz JavaScript sen in-line yoksa. Sizi kalbimin dibinden, bu dünyada veya evrenin herhangi bir yerinde, javascript'inizi bir HTML öğesinin içine koymanız GEREKMEK için hiçbir neden olmadığına söz veriyorum. Hiç. Öyleyse yapma. Artık bunu yapan insanlara bile yardım etmeyeceğim, o kadar kötü.

Kodun her zaman kırılmayacak şekilde nasıl yazılacağını öğrenin.

  • Global değişkenler en büyük sorunlardan biridir. JavaScript'te işlevsel programlamanın nasıl çalıştığını öğrenin. Kaldırma işleminin ne olduğunu bulun. Global değişkenlerden nasıl kaçınılacağını öğrenin.
  • Statik kod analiz araçlarını kullanın. Bunlar, kodunuzu yazarken yaptığınız tüm küçük "hatalar" konusunda sizi hemen uyaracaktır. Bir yerde noktalı virgül unuttun mu? Oh, işte burada. Küresel bir yer var mı? Oh, işte burada. Çalıştırmaya çalıştığınızda bir sürü gizem hatası atabilecek kod? OH! İşte buradalar! Artık sadece bir sözdizimi hatası olan bir şey bulmaya çalışırken saatlerce vidalanmaya ve kod yığınına bakmaya gerek yok. (Neredeyse hiç, yakalayamayacağı bir şey yapmış olabilirsiniz, ancak genellikle harika).
  • Ünite testi. Olmamak için hiçbir sebep yok. Orada tonlarca birim test aracı var. Temelde, birim testi "İşte benim fonksiyonum" ve "Y çıktısını almak istiyorum" "Bazı test girişleri" Ve test "Hepsi işe yaradı mı?" Popüler QUnit gibi birçok JS test çerçevesi var. En sevdiğiniz arama motorunda bir tura çıkın ve neyin hoşunuza gittiğini görün. Ama onları kullan.
  • Sürüm kontrolü olarak da bilinen kaynak kontrolü yönetimi. Git popüler ve iyi bir sebeple. SVN ve diğerleri de öyle. Bunu hemen yapmayı bırakmanız gereken şey üretim kodunu düzenlemektir. Dosyaları yeniden adlandırmayı durdurmanız gerekiyor Öğeleri main_backup_20110911.js.bak.1kaybedersiniz, dizininiz dağınık hale gelir, zaman içinde bir önceki noktaya kolayca "geri dönemezsiniz". Neler olduğunu göremezsiniz, kod düzeltme ekleri yapamazsınız. Yani, sadece GIT öğrenmeye başlayın, bir saat sürecek ve asla geri dönmeyeceksiniz.
  • Akran değerlendirmesi. Sen o kadar iyi değilsin , ben de ben değilim. Elimden geldiğince geri bildirim isteyerek iyileşiyorum. Siz de böyle yapmalısınız.

İnsanların sevdiği JavaScript yazma

  • Kodunuzun neden yavaş olduğunu öğrenin. Jspref kullanın ve testler oluşturun.
  • Etkinlikleri tek bir DOM öğesine bağlamayı durdurun, yavaştır ve çok zaman harcayacak ciddi etkinlik köpürme sorunları oluşturur. JavaScript'te "olay yetkisi" ni araştırın.
  • DOM'yi düzenlemek için innerHTML'yi kullanmayı durdurun. Bu, HTML'nin ne olduğunu ve DOM'un ne olduğunu öğrenmeye geri döner. HTML, tarayıcı oluşturma motorunuzun Belge Nesnesi haline gelecek bir grup programlama nesnesi oluşturmak için kullandığı sunucudan gönderilen verilerdir. İnnerHTML kullandığınızda tarayıcınızdan her şeyi yeniden oluşturmasını istersiniz. Neyse ki, 10 yıl önce olduğu gibi, DOM API'yi oluşturduk ve her şeyi güncellemek zorunda kalmadan "alt öğe ekle" veya "metin düğümü oluşturmanıza" olanak tanıyor. innHTML, Microsoft'un icat ettiği bir utançtır - eğer kullanırsanız, IE6'nın berbat olması için sızlanmak için tüm ayrıcalıklarınızı da kaybedersiniz çünkü sonsuza kadar çöp çubuğuna yardım ediyorsunuz. DOM'yi öğrenin.
  • Mümkün olan her yerde çalışması gerekiyor. Bir şey desteklenmiyorsa, deneyimin kötüye gitmemesi için zarif bir şekilde düşürülmesi gerekir; kullanıcılarınızı sadece yüzünüze çarpıp çökemezsiniz.
  • Telif hakkı ve lisans önemlidir. Başkalarının zor işlerini soyma. Birisi "yeniden satış için değil" diyorsa, satamazsınız. Sarsıntı olma, ya da çalışkan insanları soymak için kodundan nefret edeceğiz.
  • JS sınıflar değil prototiplerdir. Şunu yapmayı kes. Prototipin nasıl çalıştığını anlamıyorsanız, yapmanız gerekir. Google'da Ara. JavaScript sınıf tabanlı değil, sınıf oluşturmaya çalışmayı bırak, çok nadiren iyi çalışıyor. İnsanlar bir prototip dilde klasik kod yazmaya çalışırlar ve bunu “dil neden berbat” için bir durum olarak kullanırlar, aynı örneği Ruby'nin prototipi destekleyememesi için yapabilirdim. Yeni bir şeyler öğrenin ve yanlış yapmayı bırakın.

Daima temellere odaklanın.

  • Yanılıyorsunuz ve bu harika, çünkü şimdi bir şeyler biliyorsunuz. Hiçbir şey yanlış olduğunu itiraf etmeyecek ve bazı dönüm rock yıldızı süper kahraman ninja gibi kapıdan dışarı kötü kod çarpmaya devam eden biri daha kötü değildir. Onlar sadece aptallar. Yanlış olabileceğini itiraf et, yanlış olabileceğini itiraf et, yardım iste.
  • Her zaman jQuery'ye ihtiyacınız yoktur. jQuery çok yavaş kod oluşturur ve JS bilmeyen insanların JS yazmasına yardımcı olur. JS, JS'yi JS yazmak için bilmenizi gerektirmediği için bu da bir sorundur. Git şekil. Yukarıda bahsettiğim olayları öğrenme, DOM'u öğrenme, innerHTML hakkında öğrenme gibi birkaç şeyi anladıktan sonra, jQuery'nin neden kodunuza zararlı olabileceğini göreceksiniz. Bu yerlerde bir sürü doğru kullanılabilir, hatta çoğu zaman daha küçük bir kütüphane kullanabilir veya gasp şeyi başarmak için tarayıcınız ile gelen standart JavaScript. Hiçbir şey yapmak için jQuery'ye ihtiyacınız yoktur, öğreniyorsanız havalı bir kod yazmayı kolaylaştırır, ancak daha iyi yapmaya ve daha fazla öğrenmeye başlamanız gerekir - daha fazlasını öğrendiğinizde, zaten jQuery daha iyi kod yazmak.Diğer bazı JavaScript kitaplıklarına göz atın ve bu kadar yakın düşünmeyi bırakın.
  • Kes + yapıştır + tweak gerekmez, KURU kod yapın. Bundan daha önce bahsetmiştim, ama burada da önemli. Kod tabanınız utanç verici ise kalite kodu yazamazsınız.
  • Dizileri / nesne farklılıklarını kötüye kullanmayın, nasıl döngü yapılacağını öğrenin. Neden bir for (;;)ve neden bir for( in )döngü kullandığınızı öğrenin . While döngüsü ne zaman kullanılır? Yalnızca bir anahtar kutusu kullanabildiğinizde iç içe geçmiş IF'leri durdurun. Nesneler düzeni korumaz, bu nedenle onları dizi olarak kullanmayın; eski Opera / FF, eski MISE, bazen Flash nesnelerinizin sırasına saygı göstermez. Bir şeylerin sırasını korumak istiyorsanız bir dizi kullanın, bir nesne istiyorsanız (öğe sırası olmayan bir şey) bir nesne kullanın.
  • Karar yapıları kendi yararınıza nasıl kullanılabilir, kodunuza karmaşıklık katmaz. IF'leri iç içe yerleştirmeyi durdurun, Boolean mantıksal işleçlerinin nasıl çalıştığını anlayın. Anahtar kasasının nasıl çalıştığını anlayın.
  • KKO. Daha iyi kod hakkında bilgi edinmek için en iyi yer gerçek özellikleri okumaktır. Kullanmaya çalıştığınız kodun RFC özelliklerini okuyun. ECMAScript belgesini okuyun. W3C DOM teknik özelliklerini okuyun. W3C XHTML / HTML / HTML5 teknik özelliklerini okuyun. Teknik özellikleri okuyun, onlar iyi.

Hızlı bir flaş değil, uzun oyuna odaklanın ve ölün.

  • Topluluğa yardım etmelisin, uzun süre etrafta olacak bir kod yazmalısın. Kodunuz ve topluluğunuz hakkında biraz tutkunuz olsun. Kötü bilgiyi bir yerde bıraktıysanız, cehenneme geri dönün ve düzeltin. Kötü bilgileri temizlemek gerçekten zordur ve sonsuza dek yapışır. Rolünü yap. W3schools'un web'i daha da kötüleştirmesine yardım etmeyin.
  • Hiçbir yerden atlamayın ve "Hey, nasıl kullanılacağına dair harika bir fikrim var" demeyin which, kimsenin kullanamayacağı ve yok olmayacağı bir sürü kod bırakın. Hiçbir şey yapmadın. Gibi değişkenleri kullanmayın ave chezburger.
  • Kötü kodu ve iyi kodu bulmayı öğrenin, kendi kodunuzda bulun, kötü kodunuzu iyi koda dönüştürün.
  • Bir şeyler yaratın, bir şeyler öğrenin, bir şeyler öğretin.
  • Ufkunu genişlet. Sadece sonsuza kadar JavaScript yazamazsınız - sizi ilgilendiren başka bir şeye sabbatikal bir şekilde girebilir, geri dönebilir, öğrendiklerinizi paylaşabilir ve toplulukta bir yer bulabilecek misiniz diye görebilirsiniz. Siz dışarıdayken diğer dünyaya JavaScript'in ne kadar değerli olduğunu göstermeye çalışın.
  • Her şeyi bilseniz bile, hala yanılıyorsunuz. Durumunuzu / otoritenizi değil, doğru olmak için bir kanıt kullanın. Asla haklı olamazsınız, ancak kanıtınız her zaman doğrudur. Bazen kaçınmak kadar zor pissing maçlar girmeyin. Ya kanıt var ya da yok. Alevler kimseye yardım etmez.

İlgilenen herkes için, bunların çoğunu hiçbir yerde yazmadığım bir öğreticideki kişisel notlardan aldım .


En tepeye verdiğiniz yanıt, HTTP ve HTML'yi tamamen karıştırdı.
Bryan Boettcher

@insta HTTP'yi anlamanız gerektiğini söylemekle oldukça kasıtlıyım. Dediğim gibi, "Gördüğüm en yaygın yeni sorulardan biri" JS ASP kodumda bir değişkeni nasıl değiştirebilirim ?! "dir. HTTP içeriğini, çerezleri ve başlıkları Ben bir şey katmanları bilmek gerektiğini söylemeye çalışıyorum, bu yüzden onlar bu şeyler tarafından karıştırılmasın.Fonksiyonel olarak ifade etmek için şunu söyleyebilirim: TCPIP(HTTP(ClientServerRelationship(), Cookies(), HTML(JavaScript(Knowledge))))
Gizli

1
"Aslında HTTP alıyor musunuz? Tabii, etiketlerin nasıl çalıştığını ve iç içe yerleştirildiğini biliyor olabilirsiniz, ancak aslında doktipi ve tuhaflıklar modunu anlıyor musunuz? Bir liste öğesinin etrafına paragraf etiketleri koymamanız gerektiğini anlıyor musunuz?" Bu alıntıdaki hiçbir şey, yanlış kullanım durumunun dışında taşıma protokolünü içermez.
Bryan Boettcher

1
@insta Ah üzgünüm, bunu tam olarak görmedim, HTML olarak değiştirdim. Teşekkürler :).
Gizli

1
+1 Bu, kabul edilenden çok daha iyi bir cevap
Tom Squires

7
  1. Douglas Crockford'un Javascript'i: İyi Parçalar . Bu oldukça bir ipucu, ama dürüst olmak gerekirse, iyi javascript yazmak için duyduğum en iyi tavsiye parçası.

  2. İlgili olarak, Douglas Crockford'un Javascript'teki makalelerini okuyun .


9
Ama dini olarak kabul etme. Şuna bak ve senin için anlamlı olduğundan emin ol. Amacı anlamadığınız sorular sorun.
Gizli

3
alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');

+1: Bunu yaptıktan sonra, bir javascript ninjası olacaksınız.
Spoike

2

İşte size JavaScript kullanmaya başlamanız gereken bazı sorular.

  1. JSON nasıl çalışır ve ne işe yarar?

  2. Neden Javascript'te fonksiyon nesneleri var?

  3. Neden eval kullanmamalıyım?

  4. Javascript'te nasıl etkinlik oluşturabilirim?

  5. Javascript'te nasıl algılayabilirim?

Javascript'te yapmanız gereken çoğu şeyi kapsar.


1
  1. Her zaman noktalı virgül kullanın. Örtük noktalı virgüller (JS'de) özellikle ortak kullanımda ilginç sözdiziminin bir kısmı ile korkunç bir fikirdir. Genellikle herhangi bir JS madencisi için de gereklidir.
  2. Eval () işlevinden kaçının . Bu, her türlü soruna neden olur ve uygulamanızı yavaşlatmanın çok hızlı bir yoludur. Çoğu kullanım aslında suistimaldir. Her kullanmanız gerektiğini düşündüğünüzde eval(), başka bir yol için çift ve üçlü kontrol yapın; JavaScript değerinin tamamını yürütmeye çalışmadığınız sürece neredeyse her zaman daha temiz ve kolay bir yol vardır.
  3. (function() {/* stuff */})()bir kod kümesini örtmek ve bunun için yerel bir kapsam oluşturmak için iyi bir yoldur. Nesneleri kullanmak başka, genellikle daha iyi bir yoldur; nesneler bu şekilde kullanıldığında diğer dillerdeki ad alanlarına daha benzerdir. Sadece dikkat et this. Diğer birçok dilden farklı olarak, thisher zaman sezgisel olarak ne düşündüğüne atıfta bulunmaz. Ayrıca, aksi belirtilmedikçe tüm JS değişkenleri, işlevleri ve diğer nesnelerin birden çok .jsdosyada bile genel olduğunu unutmayın .
  4. İyi bir JS kütüphanesi bulun ve öğrenin / kullanın. jQuery en popüler olanlardan biridir. Bunlar, özellik algılama ve DOM manipülasyonunu soyutlama ve farklı tarayıcılara farklı şeylerin uygulandığı çeşitli yollar dahil olmak üzere sizin için çok fazla ağırlık kaldırır.
  5. Her zaman noktalı virgül kullanın. Ciddi anlamda. Unuttuğunuzda sizi uyaran bir IDE alın. Ben ranty ses istemiyorum, ama sadece noktalı virgül eksikliği nedeniyle hatalar tanıtıldı ve tarayıcı bu konuda sizi uyarmaz birkaç kez olmuştur.

Her zaman noktalı virgüllere ihtiyacınız yoktur, ancak bunun iyi bir uygulama olduğunu kabul edeceğim.
rlemon

1
ASI kuralları tüm JS motorlarında aynıdır, bu nedenle bir yerde kodunuz başka bir yerde aynı şekilde davranmalıdır. Noktalı virgülleri tüm doğru yerlerde görmek güzel ama muhtemelen diğer sorunlar gibi sizi öldürmeyecek. Bununla birlikte, ASI'ye dikkat etmelisiniz, gibi şeyler yapmalısınız returnve verilerinizi içeren bir sonraki satır, aslında return ;ASI nedeniyle söyleyeceksiniz . ASI ve boşluk kurallarını anlamanın "her zaman noktalı virgül kullan" dan daha önemli olduğunu söyleyebilirim. Ama kendinizi kurtarmanın harika bir yolu.
Gizli

Değerlendirmeden kaçınmak için +1, noktalı virgül paranoyası için -1. JavaScript'in noktalı virgülün eklenmesi, izlendiğinde çok mantıklı olan belirli kurallara sahiptir. Check it out
Ryan Kinal

@Incognito +1I'd say it's more important to understand ASI and whitespace rules than it is "always use semicolons."
rlemon

Her zaman noktalı virgüllere ihtiyacınız olmadığını söyleyen herkes için; JavaScript'te gerçek tarayıcılar arası geliştirme yaptığınızda bize geri dönün (bkz. IE6, 7 ve 8).
Spoike

0

Sınıfların kodu yapılandırmak için oldukça güçlü bir araç olduğuna inanıyorum. Sınıf tabanlı sistemlerin nasıl tasarlanacağına dair birçok dil agnostik kuralı vardır ve bazı OO ilkeleri sınıfları kullanırken daha açık bir şekilde uygulanmaktadır.
Bu nedenle CoffeeScript'e bakmanızı öneririm .

Oradan, sadece SOLID , DRY , GRASP , KISS ve YAGNI'nin nasıl uygulanacağı ve daha da önemlisi, çatışma gibi göründükleri durumlar hakkında nasıl bilgi edineceğinizi (yalnızca yapmazlar, sadece onları anladığınız veya eldeki sorun). Stackexchange'te bile bulmak oldukça kolaydır.

Bu ilkelerin "ham" JavaScript geliştirme için de geçerli olduğunu lütfen unutmayın. Bununla birlikte, üzerinde bulacağınız birçok içerik, onları sınıf tabanlı dilleri kullanarak gösterecektir ve bu nedenle, bunları anlamak için fazla yükün bulunmadığı bir dilde programlamak için yararlı olabilir.
Kişisel olarak, JavaScript'in son derece güçlü bir dil olduğunu düşünüyorum, ancak aslında bu gerçeği gerçekten takdir etmek için önce diğer dilleri derinlemesine anlamanız gerekecek.


-7

Bir web uygulamasında istemci tarafı kullanıcı arayüzü geliştirme için JavaScript kullandığınızı varsayıyorum.

1) Bu istemci tarafında mı yoksa sunucu tarafında mı olmalı? Gittim ve gerçekten sunucu tarafında olmayı hak eden ciddi kod parçaları yazdım ve tersini biliyorum. Çoğu zaman bir AJAX çağrısı yapmak için gideceğim bir şey için sadece daha iyi sunucu koduna yerleştirilmiş üzerinde olacak şekilde. Özellikle doğada durağan olan ancak düzenli olarak değişen şeyler (örneğin kategori listesi).

2) Bunu zaten yapan bir eklenti var mı? JQuery'i çok kullanıyorum ve cevap neredeyse her zaman EVET! Genellikle birisinin yazdığı eklenti kodunu alıp ihtiyaçlarıma uyarlayacağım (genellikle şeylere ekstra sınıflar ekleyerek vb.) Ama nadiren hiç sıfırdan başlamam gerekiyor.

3) Javascript bunun için doğru yer mi? Akıllı CSS kullanmak çok daha mantıklı olduğunda zaman zaman Javascript aracılığıyla bir şeylere dinamik bir stil ekleyerek kendimi yakalayacağım.

4) Farklı bir araç mı kullanmalıyım? Bu son zamanlarda uğraştığım bir şey. Benim yığın (Rails 3.1) iyi ele kahve komut dosyası gibi bazı javascript alternatifleri vardır ve ben kodumun çoğunu orada taşımak ya da taşımak için düşündüm.

5) Bu Javascript kodu iyi kod mu? Javascript diğer kodlar gibi bir koddur. Bu kod, kodumun geri kalanı kadar iyi mi? Değilse, neden olmasın? Kullanılabilir mi? Tembel miyim?


4
İyi JavaScript yazma hakkındaki ipuçlarınız arasında "JavaScript yazma" ve "İyi JavaScript yazma" sayılabilir. Üzgünüz, -1
Ryan Kinal

1
@RyanKinal "Çoğu zaman jQuery kullan" ı içerir. Bu tek başına büyük bir problem.
Gizli

2
@ f0x Bunu neden söyledin? Neden başkasının yaptığı iş üzerine inşa etmek istemiyorsun?
Drew

2
@Ryan, "kendime sormam gereken beş ya da daha az soruyu listele" cevabına genel olarak iyi bir tavsiye olan "öğren [böyle ve ...] ..." sorular JavaScript kodlarken kendime yaptığım her hareket için kendime sormalıyım. "JavaScript'i anlamak için ne öğrenmeliyim" değil. Drew soruyu sorulduğu gibi cevaplayan tek kişidir.

2
@ f0x Bir anlam ifade edip etmediğine bakılmaksızın körü körüne bir eklenti kullanmanız gerektiğini söylemiyorum ama hepimiz başkalarının bize sağladığı araçları kullanıyoruz, aksi takdirde hepimiz kendi montaj versiyonumuzu kullanırız. Eklentiler (a) sorununuzu açık bir şekilde çözerek veya (b) başkalarının çözmeye çalıştığınız sorunu nasıl çözdüğüne dair size bir fikir vererek size mükemmel bir nokta verebilir.
Drew
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.