DOM ile ilgili bu kadar kötü olan ne?


42

DOM'nin korkunç bir API olduğunu söyleyen insanları (özellikle Crockford) duymaya devam ediyorum, ancak bu ifadeyi gerçekten haklı göstermiyor. Çapraz tarayıcı tutarsızlıklarının yanı sıra, DOM’in bu kadar kötü kabul edilmesinin nedenleri nelerdir?


31
Apart from cross-browser inconsistenciesBu yeterli değil mi?
yannis

3
Aynı soru (Crockford'a atıfta bulunmak dahil), SO'da yapıcı olmadığı istendi ve kapatıldı: DOM'da yanlış olan ne?
gnat


Olay yayma modeli yanlış: ana düğümlerin alt olay işleyicilerini özel davranış eklemek için geçersiz kılmalarına izin vermiyor. OOP'de sanal fonksiyonlar, polimorfizm ve delegasyon (kompozisyon yoluyla kalıtım) olarak adlandırılmıştır. Olaylar önce yukarıdan aşağıya doğru yakalanır, sonra köpürür. Elm'de, olayların önce "yakalanmasından" sonra (ebeveynlerden çocuklara yayılan) çok iyi bir gübrelenebilir model uyguladılar. Olayları iptal etmeyi sağlar ("pencereyi kapat?") Ve alt bileşenlerin davranışlarını geçersiz kıl / süsle.
Brian Haak

Yanıtlar:


33

Crockford, "Uygunsuz API: Dom Teorisi" başlıklı geniş bir sunum yaptı ve burada DOM ile ilgili görüşlerini az ya da çok açıklıyor. Uzunca bir süredir (1h 18m), ancak çoğu Crockford'un sunumları gibi oldukça zevkli ve eğiticidir.

Çapraz tarayıcı tutarsızlıkları onun temel endişesi gibi görünüyor ve DOM ile ilgili en can sıkıcı şey olduğuna katılıyorum. O tanımlar:

  • Özel tuzaklar (tarayıcı ve sunucu tuzakları),
  • Kural çiğnemek,
  • Kurumsal savaş
  • Aşırı zaman basıncı

Çeşitli tutarsızlıkların ardındaki temel meseleler olarak, bu sunumun, oturumun veya etkileşimin eklenmesi, web'in orijinal vizyonunda asla beklenmiyordu. Bazı tutarsızlık örnekleri şunlardır:

  • document.all, yalnızca Microsoft özelliği,
  • Bu nameve eski olduğu gerçeği iddeğiştirilebilir.
  • düğüm almadaki farklı işlevler:
    • document.getElementById(id),
    • document.getElementsByName(name),
    • *node*.getElementsByTagName(tagName))

ve çoğunlukla DOM'u gezdirmeyi, bellek sızıntılarını ve olayları kandırma ve köpürmeyi hedef alan birkaç örnekle devam eder. Özetleyen "DOM Çatlakları" başlıklı bir özet slayt vardır:

  • DOM hata listesi tarayıcıdaki tüm hataları içerir.
  • DOM hata listesi, desteklenen tüm tarayıcılardaki tüm hataları içerir.
  • Hiçbir DOM tamamen standartları uygulamaz.
  • DOM'un çoğu herhangi bir standartta tanımlanmamıştır.

Kısacası, dağınık, dağınık bir API. Nitpicking gibi görünebilir, ancak web için geliştirirken, müşterilerinizin kullanacağı tarayıcıyı nadiren seçeceğinizi aklınızda bulundurmanız gerekir. Büyük tarayıcıların her birinin en az iki sürümünde her şeyi test etmek çok yakında eski hale gelir. Bir API'nin tutarlı olması gerekiyordu ve DOM, tarayıcı savaşlarının kurbanıydı , ancak daha iyi hale geliyor. Hala W3C'nin (ve hepimizin sanırım) olmasını istediği kadar tarafsız değil , ancak tarayıcı satıcıları beş ya da on yıl önce olduğundan çok daha fazla istekli görünüyorlar.


18
tarayıcılar arası tutarsızlığın DOM ile ilgisi yok. Biz buna "eski tarayıcılar" diyoruz. Eski tarayıcıların varlığı için DOM’u suçlamayın. Bu "linux berbat çünkü eskiden beri rahatsızlık ve m biliyorum ve onlar emmek" demek gibi bir şey.
Raynos,

document.allstandartlarda
Raynos

@Raynos Evet ve hayır. Tarayıcı satıcıları web standartlarının çok uzun süredir evrim geçirmesinin arkasındaki ana güç olmuştur, her şeyi mahvetmişlerdir, linux ile yapılan analoji fazla durmaz. Vurgulamaya çalıştığım, DOM’un kendisinin hatalı olmadığı, hatalı olan uygulamalar ve standardın geliştiği anlamsız yol. Al document.allörneğin, standartlarda ancak olarak var kasten ihlal .
yannis

1
Eski tarayıcıları ve DOM’u kafa karıştırıcı insanlar hakkında öfke duymaktan rahatsız olamam. Bir yorum bıraktım. Eski tarayıcılara gelince, onlara destek vermek önemsizdir, sadece yapın. Bunu yapmak için topları var. Ya geliştirme hayatınızı kontrol edersiniz ya da IE8 kontrol eder. Benimkini kontrol ediyorum.
Raynos

3
Mükemmel cevap; Bahsetmediğiniz bir başka sıkıntı DOM API’nin aşırı derecede ayrıntılı olmasıdır - sadece tipik jQuery kodunu karşılaştırın; örneğin, belirli bir düğümde birkaç niteliği olan ve aynı şeyi yapan düz DOM sürümüyle bir öğe ekleyin.
tdammers

15

DOM’da yanlış olan ne? Java'dan esinlenen sözdiziminin (Crockford'un üzerinde durduğu) bir yana, hiçbir şey.

"Yanlış" olan şey kısmen tarayıcı satıcılarına uygulanır; geliştiriciler için "yanlış" olan nedir; "yanlış" olan şey cehalete uygulanır.

Peki nereden başlamalı?

Tavşan deliğinden aşağı…

Tarayıcı Satıcıları

Öncelikle, tarayıcı satıcıları "en iyi", "en hızlı", "en kolay", vb. Olmak için on yıllardır rekabetçi bir şekilde savaştılar. Internet Explorer, aşağıdakiler gibi yenilikçi fikirler getirmiştir:

  • tarayıcının HTML ayrıştırma motorunu innerHTMLve outerHTML;
  • innerTextve ile kolay metinsel manipülasyon outerText;
  • *tachEventDOM Level 2 Events ( *EventListener) için plan olan bir olay modeli ( ).

Her biri günümüzün web geliştirme yığınına (daha iyi ve daha kötüsü için) önemli katkılarda bulunmuştur. Opera, sürüm 7'deki (2003) her üçünü de uygulayabildi.

Ancak, Netscape'in kendi DOM olay modeli ( *EventListener) vardı. 2000 yılında DOM Seviye 2 Olayları spesifikasyonu oldu. Safari 1 (2003) bu modeli uyguladı; Opera 7 (2003) de bu modeli uyguladı. Netscape'in kalıntıları Mozilla olurken, Firefox 1 (2004) modeli devraldı.

İkinci on yılın ilk bölümünde (2000-2004), Microsoft yüce hüküm sürdü. Internet Explorer 6 (2001), o sırada en iyi tarayıcıydı. Rakiplerinden biri olan Opera 6 (2001) henüz DOM Seviye 1 Çekirdeğini ( createElementve diğerleri) uygulamadı. Microsoft, spesifikasyon bir öneri (1998) olmadan önce Internet Explorer 4'te (1997) uyguladı.

Ancak, ikinci on yılın ikinci kısmı (2004-2010) Microsoft için felaket olur. 2003 yılında, Apple, Safari 1.0'ı piyasaya sürdü; 2004 yılında Mozilla Firefox 1.0'ı tamamladı. Microsoft, görünüşte tarayıcı dağın tepesindeki tahtında uyuyordu. Internet Explorer 7 2006’ya kadar piyasaya sürülmedi: Internet Explorer 6’nın çıkış tarihine dayanan beş yıllık bir boşluk. Internet Explorer'ın 4'ten 6'ya kadar olan sürümlerinden farklı olarak, 7. sürüm çok az yenilikle; DOM değişiklikleri dakika idi. Yaklaşık iki buçuk yıl sonra, Internet Explorer 8 piyasaya sürüldü. Microsoft, uykusundan uyandı ve diğer tarayıcı satıcılarının sayısız web standardı çevresinde oluşturduğu birleşmeyi fark etti. Ne yazık ki, Microsoft'un son gerçek yenilikçiliğinden bu yana çok zaman geçti. Tarayıcı satıcıları arasında bir hareket yaratılmıştı. W3C'ye şartname biçiminde yeni DOM özellikleri eklenecekti; Microsoft'un fikirleri geçmişte kaldı. Microsoft’un etkinlik modeli (*tachEvent), DOM Level 2 Events modeli için kullanıldı. Internet Explorer önceki modeli, DOM Düzey 3 Etkinlik modeli olan 9 (2011) sürümüne kadar uygulamamıştır.

Microsoft'un (DOM) follyleri aşağıdaki puanlarla toplanabilir:

  • Windows'un temel bir özelliği olarak varlığı ve ortaya çıkan işletim sistemi düzeyinde güvenlik gereksinimleri;

  • istemci tarafı kodu için ActiveX'e güvenme;

  • 6. versiyondan sonra merakla azaltılan yenilik (2001).


(Web geliştiricileri

İkincisi, geliştiriciler belli miktarda suçludur. Web çıkarmaya devam ettikçe, web geliştirmede gittikçe daha fazla insan "göz kamaştırıyor". Bu, yetenek ve iş ahlakında bir sulandırmaya yol açmıştı. Bununla birlikte, sorun esas olarak tutumda yatmaktadır. "Hemen hallet", "Doğru hallet" e göre öncelik kazanmıştır. Sonuç olarak, sayısız web sayfası çeşitli tarayıcılarla uyumlu değildir. Bu uyumsuzluğun önde gelen nedenlerinden biri “user agent sniffing” adı verilen bir uygulamadır. Uygulama bugün hala kullanılsa da, hem hatalı hem de zararlı olduğu kanıtlanmıştır. Opera, kullanıcı aracı sürümünü "9.80" sürümündeki sürüm 10 (2009) ve sonrasında "dondurmak" için bile çok ileri gitti. Bu, hatalı komut dosyalarının kırılmasını önlemek için tasarlanmıştır. Çok daha iyi bir uygulama denir


cehalet

Üçüncüsü, tercih ettiğim suçlama noktası cehalettir; tarayıcı üreticilerinin birleşik özellikler oluşturacak kadar neredeyse birlikte çalışmadıklarına dair cehalet; Microsoft'un diğer tarayıcı kullanıcılarını daralttığına dair cehalet; Geliştiricilerin, tarayıcıları (özellikle moda olmayanlar) rahatsız etmek için fazla tembel veya miyop olduğu gerçeğine ilişkin cehalet API'lerde ve uygulamalarda birçok farklılıklar vardır. Çoğunlukla, hem araştırma hem de testlerin bol miktarda basitleştirilmesine rağmen henüz savunmasız bir yaklaşımla (DOM 0'a güvenerek) kaçınılabilir. Cehalet, Internet Explorer 6'nın Dünya üzerinde bir yanık olduğu fikrine yol açtı (daha önce bahsedilen tarayıcı tahtındaki noktasını hatırlayın).


yansıma

Ne yazık ki, DOM sadece yanlış anlaşılan bir API. Birçoğu taş atma arzusu (FUD aracılığıyla), ancak karmaşıklıklarını öğrenmek için pek az arzu. Bu cehaletin bir sonucu DOM "seçicileri" nin tanıtılmasıdır. Kalbindeki DOM, belge ağaçlarını işlemek için kullanılan bir API'dir. Ağaç geçişi, ayrıştırılmış belge şeklinde verilen karmaşık problemlerde kullanılmalıdır. DOM Selectors API'sinin tanıtımıyla bir geliştirici artık tarayıcının CSS çaprazlama motorundan yararlanabilir. Bu oldukça kullanışlıdır, ancak belge ağacının gerçek halini gizler. "Seçiciler" ile, eleman düğümü alımı temeldir. Ancak, DOM belirtilen diğer on düğüm türüne sahiptir. Metin düğümlerinden ne haber? Yorum düğümleri? Belge düğümleri? Bunlar aynı zamanda DOM ile etkileşime girerken sıklıkla istenen düğümlerdir.


Sonuç

Kısacası, zaman ayırın ve çeşitli DOM özelliklerini okuyun. Kodu mümkün olduğunca çok sayıda tarayıcıda test edin. Internet Explorer'ın garip davrandığı algılanıyorsa, MSDN'ye danışın. Çoğu zaman, davranış belgelenir.

(Tarihsel fıkralar yanlış olabilir ve olabilir; yanlışlıklar ortaya çıkarılabilir.)

-Mat


Opera "dondurmak" için bile çok ileri gitti - bu tür yaklaşımlardan nefretle görüldüğü için nefret ediyorum (bazı geliştiriciler kodlayamıyor, bu yüzden kendilerine yardımcı olması için API'yi değiştirmelerine izin veriyor). Bu tarayıcıda, müşterinizin tamir etmekte ısrar ettiği belirli bir hata olduğunda genellikle tarayıcı türünü ve sürümünü edinmeniz gerekir. Belirli bir tarayıcı için düzeltme bazı "hata bulma" (yani "özellik algılama" nın tersi) uygulamasından çok daha kolaydır.
Pavel Horal,

3

DOM, korkunç bir API

Bu YANLIŞ . DOM, korkunç bir API değil.

  • Öncelikle, DOM'un dille agnostik olduğunu unutmayın. Tüm ana diller API'yi uyguladı. Bunun nedeni tarayıcıda kullanmamanız, ancak XML ile baş etmeniz gereken her yerde.

  • İkincisi, DOM'un sınıfları değil arayüzleri tanımladığını unutmayın. Bunun çok önemli bir etkisi var: diller bunu kendi yapılarına ve felsefelerine uygun şekilde uygulayabilir. Bu, tüm dilleri başkalarıyla uygulamada tutarlı olmaktan kurtarır.

  • Üçüncüsü, DOM, XML'i (diğer SAX olan) ayrıştırmanın iki ana yolundan biridir ve içeriğinize bağlı olarak DOM çok verimli olabilir.

Bahsettiğiniz şey tarayıcı DOM. Ve DOM’in tarayıcıda “kötü hissettiğini” kabul ediyorum. Bunun bir nedeni tarayıcı uyumsuzluklarıdır. Ancak, DOM'nin tarayıcıdaki kötü şöhretinin tek nedeni oldukları konusunda aynı fikirde değilim.

  • Birincisi, bunun hakkında düşünürseniz, DOM bu uyumsuzlukların üstesinden gelinmesi daha kolay olan alanlardan biridir. Buna karşılık, örneğin olaylar çok kandırıcı ve normalleştirmek için can sıkıcı.

  • İkincisi, DOM özellikleri için özellik algılama, diğer alanlardan daha basittir.

  • Üçüncüsü, DOM 3 daha iyi - ve bugün tüm tarayıcılar çoğunu destekliyor.

Kuşkusuz, uyumsuzluklar can sıkıcıdır, ancak bunlara düştüğünüzde DOM çok daha az rahatsız edicidir.

Ayrıca, Özel tuzaklar, Kurumsal savaş, vb. Gibi sebeplere de katılmıyorum.

  • JavaScript'in hafif bir dil olduğu felsefesi ile Java'dan ilham alan DOM uygulaması - bunun hayal kırıklığına uğramasına neden olan bağlantı kopukluğu olduğunu düşünüyorum.

  • İkincisi, DOM, XML için tasarlanmış ve HTML için uyarlanmıştır. Dolayısıyla tarayıcıda, tam olarak iki DOM'umuz var - HTML DOM ve XML DOM - ve bunlar birbiriyle uyumlu değil.

  • Üçüncüsü, tarayıcıdaki DOM geçişi iyi değil. HTML DOM için XPath'a sahip değiliz, bu yüzden CSS seçici motorlarından önce geçiş yapmak gerçekten sıkıcıydı.

Son olarak, bugün modern tarayıcılarda (ve eski tarayıcılarda yavaşça kaybolup dururken) DOM’un kötü olarak adlandırılması gerekmediğini düşünüyorum. Hem API hem de uygulamada kesinlikle tarayıcıda daha iyi olacak.


olaylar normalleştirmek için çok
önemlidir

Bir düşünün - currentTargetolay nesnesinin mülkünü desteklemeniz gerekirse - önemsiz olur mu?
treecoder


currentTargetsadece olay köpürenliği değil - ve kendi olay köpürenliğinizi uygulamak gerçekten akıllıca mı?
treecoder

1
Ve ile dataManagerdışını oturan, kod Önemsiz olduğunu söylemek? :)
treecoder
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.