Neden Satır İçi Kod Yazma İşleminden Kaçının?

Bilgili bir arkadaş son zamanlarda piyasaya sürülmesine yardım ettiğim bir web sitesine baktı ve "çok güzel bir site, kaynak koddaki satır içi komut dosyası hakkında utanç" gibi bir yorum yaptı.

Kesinlikle, bulunduğu yerde satır içi komut dosyasını kaldıracak konumdayım; Belli ki bunun "kötü bir şey" olduğunun farkındayım. Sorum şu: satır içi komut dosyası oluşturmada asıl sorun nedir? Önemli bir performans sorunu var mı, yoksa çoğunlukla sadece iyi bir stil meselesi mi? Sitede daha bariz bir etkiye sahip olabilecek başka şeyler olduğunda, satır içi komut dosyası önündeki ani işlemleri üstlerime doğrulayabilir miyim? Bir web sitesine çıkıp kaynak koduna bir göz attıysanız, hangi faktörler sizi "hmm, burada profesyonel çalışma" demeye yönlendirir ve açıkçası amatör bir işten geri çekilmenize neden olan şey nedir?

Tamam, bu soru yazılı olarak birden fazla soruya dönüştü. Ama temel olarak, satır içi komut dosyası oluşturma - anlaşma nedir?

Satır içi komut dosyasıyla ilgili asıl sorunlar nelerdir? Önemli bir performans sorunu var mı, yoksa çoğunlukla sadece iyi bir stil meselesi mi?

Avantajları performansa dayalı değildir, (Michael yaptığı açıklamada belirtildiği gibi) görüş ve denetleyicinin ayrılması ile daha fazla ilgilidir. HTML / CSS dosyası, ideal olarak yalnızca sunumu içermeli ve komut dosyaları için ayrı dosyalar kullanılmalıdır. Bu, sizin (ve akranlarınızın) hem görsel hem de işlevsel yönleri okumanızı ve korumanızı kolaylaştırır.

Sitede daha bariz bir etkiye sahip olabilecek başka şeyler olduğunda, satır içi komut dosyası önündeki ani işlemleri üstlerime doğrulayabilir miyim?

Hayır muhtemelen değil. Uzun vadede onları paradan tasarruf edeceğine inansanız bile, saf bakım işi olan güçleri ikna etmek çok zor olabilir. Bu durumda, her şeyi durdurmanız ve satır içi komut dosyalarından kurtulmanızın çok önemli olduğunu düşünmüyorum. Bunun yerine, başka sebeplerle üzerinde çalıştıkları alanları düzeltmek için bilinçli bir çaba gösterdiğinizden emin olun. Yeniden düzenleme kodu, düzenli olarak yaptığınız ancak bir seferde yalnızca bir miktar yapmanız gereken şeyler olmalıdır.

Bir web sitesine çıkıp kaynak koduna bir göz attıysanız, hangi faktörler sizi "hmm, burada profesyonel çalışma" demeye yönlendirir ve açıkçası amatör bir işten geri çekilmenize neden olan şey nedir?

Bana profesyonel olmadığını söyleyen bir numaralı faktör, masaların ya da divlerin aşırı kullanımı. İşte neden fazla kullanılmamasını açıklayan bir makale .

Şeytanın savunucusu olmayacağım, ama amatörce işi ile satır içi JavaScript arasında kesin bir ilişki yok. En bilinen birkaç web sitesinin kaynak kodunu görelim:

• Google,
• Vikipedi,
• Microsoft,
• Adobe,
• Dell,
• IBM.

Giriş sayfalarının her biri satır içi JavaScript kullanır. Tüm bu şirketlerin amatör evlerini ana sayfalarını oluşturmak için işe aldıkları anlamına mı geliyor?

Ben HTML içine JavaScript kodu koyamayan geliştiricilerden biriyim. Üzerinde çalıştığım projeler içinde asla yapmam (muhtemelen <a href="javascript:...">göze çarpmayan JavaScript'in baştan itibaren bir zorunluluk olmadığı projeler için yapılan bazı çağrılar dışında ve bir başkasının kodunu yeniden gözden geçirdiğimde her zaman satır içi JavaScript'i kaldırırım. ? Pek emin değilim.

Performans açısından, JavaScript'i ayrı bir dosyaya yerleştirirken her zaman daha iyi performans elde edemezsiniz. Genellikle, satır içi JavaScript atık bant genişliğini göz önünde bulundurmaya özen gösteririz, çünkü önbelleklenemez (statik önbelleklenebilir HTML ile uğraşmanız hariç). Buna karşılık, harici bir .js dosyası yalnızca bir kez yüklenir.

Gerçekte, bu sadece bir başka erken optimizasyondur : JavaScript'i dışlamanın web sitenizi hızlandıracağını düşünmekte haklı olabilirsiniz, ancak tamamen yanlış da olabilirsiniz:

• Ya kullanıcılarınızın çoğu boş bir önbellekle gelirse?
• Eğer harici bir .js dosyasıyla, web sitesi düzgün bir şekilde yapılandırılmamışsa (ve genellikle değil), her sayfa isteğinde bu dosyaya bir istek yapılacağını düşündünüz mü?
• .Js dosyası gerçekten önbelleğe alınmış mı (IIS ile çok kolay olmayabilir)?

Bu yüzden, önceden optimize etmeden önce, ziyaretçileriniz hakkında istatistikler toplayın ve performansları satır içi JavaScript ile ve onsuz olarak değerlendirin.

Sonra son argüman geliyor: kaynağınızda JavaScript ve HTML'yi karıştırdınız, emiyorsunuz. Ama kim ikinizi karıştırdığını söyledi? Tarayıcı tarafından kullanılan kaynak kodu her zaman yazdığınız kaynak kod değildir. Örneğin, kaynak kodu, sıkıştırılmış minified veya birkaç CSS veya JS dosyaları tek bir dosya haline katılmış olabilir, ama bu gerçekten adında anlamına gelmez olabilir senin değişkenler a, b, c... a1, vb veya Yazdığınız bir boşluk veya yeni satırlar olmadan dev CSS dosyası. Aynı şekilde, derleme sırasında veya daha sonra şablonlar aracılığıyla HTML’ye dış JavaScript kaynak kodunu kolayca enjekte edebilirsiniz.

Sonuç olarak, JavaScript'i ve HTML'yi yazdığınız kaynak kodda karıştırırsanız, gelecekteki projelerinizde yapmamayı düşünmelisiniz. Ancak, tarayıcıya gönderilen kaynak kodu satır içi JavaScript içeriyorsa, bunun her zaman kötü olduğu anlamına gelmez.

• Kötü olabilir.
• Bunun tersine, web sitesinin performansa önem veren, belirli testler yapan ve müşterilerinin JavaScript'in satır içi satırlarına girmesinin daha hızlı olacağına karar veren profesyoneller tarafından yazıldığının bir işareti olabilir.
• Veya hiç bir şey ifade etmiyor olabilir.

bu nedenle, web sitesinin nasıl yapıldığı hakkında hiçbir şey bilmeden, yalnızca tarayıcıya gönderilen kaynağa bakarak "çok güzel bir site, kaynak kodundaki satır içi komut dosyası hakkında utanç" diyen kişiye utanç verin.

HTML ve JS'yi genel olarak ayrı tutmaya çalışmak genellikle iyidir. HTML görünüm içindir, JS uygulama mantığı içindir. Ancak benim deneyimlerime göre, html ve javascript'in (saflık uğruna) aşırı derecede ayrışması daha fazla bakım gerektirmez; aslında daha az bakım gerektirebilir.

Örneğin, olay işleyicilerini ayarlamak için bazen bu deseni (ASP.net'ten ödünç alınmış) kullanıyorum:

<input type="button" id="yourId" onclick="clickYourId()" />

veya

<input type="button" id="yourId" onclick="clickYourId(this)" />

Bir olayı tetikleyen şeyin gizemi yok. Bunun nedeni altı ay sonra öğeyi inceleyebilir (örneğin, Chrome'da) ve hangi javascript olayının tetiklendiğini hemen görebilirsiniz.

Öte yandan, yüz bin satırlık bir başkasının kodunu okuduğunuzu ve bir javascript olayını başlatan sihirli bir unsurla karşılaştığınızı hayal edin:

<input id="yourId"  />

Bunun hangi javascript yönteminin çağırdığını kolayca nasıl söyleyebilirsiniz? Chrome bunu kolaylaştırdı, ancak belki de etkinlik kimliğe bağlı, ya da belki de kabın ilk çocuğuna bağlı. Belki olay ana nesneye eklenmiştir. Kim bilir? Bulmada iyi şanslar. :)

Ayrıca, javascript'i tasarımcıdan tamamen gizlemenin aslında bir güncellemeyi kırma ihtimalini artırabileceğini savunuyorum. Birisi sihirli olarak aktif bir elemanın kodunu düzenlerse, kodda bunun bunun sayfadaki aktif bir unsur olduğunu bilmelerini sağlayacak ne göstergesi var?

Kısacası, en iyi uygulama HTML ve Javascript'i ayırmaktır. Ama aynı zamanda, kuralların aşırıya taşındığında bazen üretken olduğunu da anlayın. Bir orta yol yaklaşımı için tartışırdım. Çok sayıda satır içi j'den kaçının. Satır içi kullanırsanız, işlev imzası aşağıdaki gibi çok basit olmalıdır:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)

Burada kaçırdığım bir argüman, siteler arası komut dosyası çalıştırma saldırılarına karşı korumanın artması olasılığıdır .

İçerik Güvenliği Politikası ile modern tarayıcıda satır içi JavaScriptlerin yürütülmesini devre dışı bırakmak mümkündür . Bu, sitenizin XSS kurbanı olma riskini azaltır. Bu, yönetiminiz için satır içi komut dosyasını kaldırmaya yatırım yapmak için daha inandırıcı bir argüman olabilir.

İşte birkaç neden.

1. Satır içi komut dosyası küçültülemez (sembol azaltma yoluyla daha kısa bir sürüme dönüştürülür). Geniş bantla ilgili bir endişe değil, düşük bant genişliğindeki bir alanda bir mobil cihaz veya küresel veri dolaşımı yapan kullanıcılar sayılabilir - her bayt sayılabilir.

2. Satır içi komut dosyası, sayfanın kendisi önbelleğe alınmadığı sürece (bu çok sıkıcı bir sayfa için) önbelleklenemez. Sayfa içeriği her zaman değişse bile, harici Javascript dosyalarının yalnızca bir kez alınması gerekir. Düşük bant genişliği bağlantılarındaki performansı ciddi şekilde etkileyebilir.

3. Satır içi komut dosyası hata ayıklamak zordur, çünkü herhangi bir hatayla ilişkili satır numarası anlamsızdır.

4. Satır içi komut dosyası erişilebilirlik (508 / WAI) düşünceleriyle etkileşime giriyor, ancak bu satır içi komut dosyasının sorunlara neden olduğu anlamına gelmiyor. Senaryo içeriğini bildiren bir ekran okuyucusuyla bittiğinde, bir problemin var! (Bunu olsa asla görmedim).

5. Satır içi komut dosyası sayfasından bağımsız olarak test edilemez; Harici Javascript dosyaları, otomatik testler dahil olmak üzere bağımsız testlerle çalıştırılabilir.

6. Satır içi komut dosyası, kaygıların zayıf şekilde ayrılmasına yol açabilir (buradaki diğer cevapların çoğu tarafından açıklandığı gibi).

Komut satırını dahil etmemeyi haklı çıkaracak birçok neden var:

• Her şeyden önce, bariz cevap - bu daha temiz, daha özlü, anlaşılması ve okunması kolay kodlar.

• Daha pratik bir bakış açısıyla, sıklıkla komut dosyalarını / CSS / etc'yi yeniden kullanmak istersiniz. Web sitenizin her tarafında - bu bölümleri sıralamak, her küçük değişiklik yaptığınızda her bir sayfayı düzenlemek zorunda kalacağınız anlamına gelir.

• Projeniz için bir SCM kullanıyorsanız, o zaman farklı bileşenlerinizi iyi bir şekilde ayrı tutmak, izleme değişikliklerini kolaylaştıracak ve katılan herkes için daha kolay bir taahhüt sağlayacaktır.

Bildiğim kadarıyla, performans bir endişe olmazdı. Web sitenizin doğası, sunucunuzun özellikleri vb. İle ilgili birçok şeye bağlı olacaktır. Örneğin, web sitenizde çok sayıda javascript kullanılıyorsa, tarayıcınız komut dosyalarını önbelleğe alabilir; kod birden fazla dosyada ayrılmıştır. Öte yandan, bazı sunucuların tek bir büyük dosyaya birden çok küçük dosyadan daha hızlı hizmet verebileceğini söylemek isterdim - bu durumda kod ayrılmamasının daha akıllıca bir performans olduğu söylenebilir.

Bu alanda herhangi bir resmi testin farkında değilim, ancak birileri tarafından yapılmış olabilir.

Sonunda, bunun her şeyden daha iyi bir uygulama meselesi olduğunu ve okunabilirlik ve organizasyon açısından avantajların (özellikle 2. maddeye göre) kodun farklı dosyalarda ayrılmasını çok daha iyi bir seçenek haline getirdiğini söyleyebilirim.

Cevap gerçekten, satır içi kodun (javascript varsayımı) nasıl kullanıldığına bağlıdır.

İstediğimiz efektleri oluşturmak ve onClick olayları için sunucu geri dönüşlerini azaltmak için satır içi kod, SSI'lar (sunucu tarafı dahil), js dosyaları ve css dosyalarının bir kombinasyonunu kullandık.

Bu yüzden birisinin battaniye bildirimi yapması için "satır içi kod" kullanımının nasıl kullanıldığını tam olarak anlamadan kötü olduğu yanıltıcı olabilir.

Söyledikten, her sayfa aynı kopyaya ve bir js dosyası kullanmak yerine javascript kodunu yapıştırdıysa, bunun kötü olduğunu söylüyorum.

Her sayfanın kendine ait bir kopyası varsa ve bir css dosyası kullanmak yerine CCS bölümünü yapıştırdım. Bunun kötü olduğunu söylüyorum.

Ayrıca, her sayfada tüm js kitaplığınızı, özellikle de o sayfadaki işlevlerden hiçbiri kullanılmıyorsa, bu ek yükü de kullanabilirsiniz.

Burada satır içi javascript olduğunu varsayacağım.

Kodu görmeden emin olmak zor. İki şeyden birine atıfta bulunduğundan şüpheleniyorum:

1. Sen gelmiş <script>sayfa dağılmış s
2. JS'nizin tümü harici dosyalarda değil sayfanın başlığında

Birincisi kötü bir tasarım kararıdır. Sayfa bir kaynak dosyası boyunca komut dosyalarını yapar Yayılma çok belirli bir senaryo aramak zorunda çünkü, bakımı zordur. Tüm bu kodları tek bir yerde saklamak çok daha iyi (kaynak dosyanın en üstünde tercih ederim).

İkinci olarak - bu mutlaka kötü bir şey değil. Sayfaya özel kod o sayfada olmalıdır . Sayfalar arasında yinelenen kod varsa, onu kullanarak dışlamanız gerekir <script src>. Ardından, yeni bir sayfa oluşturmaya gittiğinde, sadece bu dosyayı ekleyebilir ve düzelttiğiniz hataları gözden geçirmek zorunda kalmazsınız.

InLine Javascript'in kullanılmamasının bir nedeni (hatta onclick = "DoThis (bu)" düğmeleri) bile, web uygulamanızı bir Chrome Uygulaması yapmak niyetindesinizdir. Bu nedenle, web uygulamanızı bir Native Chrome Uygulaması'na taşımayı planlıyorsanız, HERHANGİ bir satır içi javascript dahil ETMEYİN. Bu, "Chrome-etize" etmeyi düşünüyorsanız, web uygulamanızdan (zorunlu olarak) neleri değiştirmeniz gerekeceğini en başında açıklar.

Satır içi komut dosyasıyla ilgili asıl sorunlar nelerdir?

Satır içi komut dosyası kötüdür ve kodun okunmasını zorlaştırdığından kaçınılmalıdır.

Okunması zor olan kodun korunması zordur. Kolayca okuyamıyorsanız ve neler olup bittiğini anlayamıyorsanız, böcekleri kolayca tespit edemezsiniz. Korunması zorsa, sorun olduğunda daha sonra zamanınızı boşa harcar.

Zorluk genellikle iç içe kodlamalardan gelir. Bir sonraki kod satırında bir sorun var, tespit edebilir misiniz?

<a onclick='alert("What\'s going wrong here?")'>Alert!</a>

İdeal olarak kod, bir hata olduğunda fark etmeyi kolaylaştıracak şekilde yazılmıştır. Joel Spolsky, 2005 yılında bu noktayı vurgulayan harika bir makale yazdı . Kod örnekleri, yaşlarının 9 yaşında olduğunu gösterdikleri için bazı önemli iyileştirmeler yapabilirdi, ancak altta yatan kavram hala güçlü: Kodu yazmayı kolaylaştıracak şekilde yaz.

Önemli bir performans sorunu var mı, yoksa çoğunlukla sadece iyi bir stil meselesi mi?

Satır içi komut dosyası tekrarlamaya neden olur. 100 sayfayı etkilemek için bir kod satırı değiştirmek yerine, büyük olasılıkla 100 sayfayı tek tek değiştirmeniz gerekir. Fakir okunabilirliği ile birlikte bu ciddi performansı etkileyebilir ettiricinin . Programlama süresi, bir işletmenin alt satırını, çoğu kod optimizasyonundan elde edilen birkaç milisaniyeden daha hızlı etkileyen gerçek bir maliyete sahiptir. Darboğazları kesinlikle optimize etmek önemlidir, ancak bu durumda kodun performans farkı önemsizdir.

Sitede daha bariz bir etkiye sahip olabilecek başka şeyler olduğunda, satır içi komut dosyası önündeki ani işlemleri üstlerime doğrulayabilir miyim?

Hayır. Eğer aptalca ve işe yarıyorsa, aptalca değildir.

Bunun için programlama bilgisi şudur: aptal kodsa ve çalışıyorsa, aptal kod değildir. Kırılmayan bir şeyi düzeltmeyi denemeden önce gerçek konulara odaklanın. Satır içi kodu sonunda bir güncellemeye ihtiyaç duyduğunda, ister altı saat, altı ay veya altı yıl içinde, ister ileride bakımı kolaylaştıracak şekilde düzeltin.

Hangi faktörler sizi "hmm, buradaki profesyonel çalışma" demeye yönlendirecek ve açıkça amatörce bir işten geri çekilmenize neden olan ne olabilir?

"Profesyonel" i yalnızca, bir işi yapmak için para ödeyen biri olarak tanımlamayı tercih ediyorum, ne yapmak için para kazandıkları konusunda önemli bir yetenekleri olduğunu varsaymak yerine. Pek çok profesyonel kesinlikle iyi iş yapabilme yeteneğine sahiptir, ancak çoğu zaman kendimi bir amatörün ortaya çıkardığı bir şey yerine, diğer profesyonellerin yaptığı korkunç işte korku içinde geri teperken buluyorum. Bugüne kadar yaptığım işlerin çoğu, ilk geliştiriciler tarafından engellenen kurtarıcı tren kazası projelerini içeriyordu, bu nedenle kilometreniz değişebilir.

Tüm bunlara ek olarak, genellikle kurumsal kalitede programlama yapmak kolaydır