Javascript, HTML ve CSS Arasında Sıkı Birleşme: Daha Modern Bir Yaklaşım?

Javascript'i, öğeleri bulmak, veri depolamak ve olayları dinlemek için belirli seçicilere bağlı görmek çok yaygındır. Bu aynı seçicilerin stil için kullanıldıklarını görmek de yaygındır.

jQuery (ve seçim motoru Sizzle), CSS tipi sözdizimine sahip öğelere referans vererek bunu destekler ve teşvik eder. Bu nedenle, bu tekniğin projeler inşa ederken 'öğrenilmemesi' (veya yeniden yapılandırıcı) özellikle zordur.

Bunun HTML ve Javascript geliştirme tarihinin bir sonucu olduğunu ve tarayıcıların bu tür eşleşmeleri etkin bir şekilde tüketmek / ayrıştırmak ve işlemek için oluşturulduğunu anladım. Ancak web siteleri giderek daha karmaşık hale geldikçe, bu gerçeklik bu ayrı katmanların düzenlenmesi ve korunmasında zorluklar doğurabilir.

Sorum şu: Modern web sitelerinde bundan kaçınılabilir mi ve kaçınılmalı mı?

Ön uç gelişmede yeniysem ve “doğru yol” gibi şeyleri öğrenmek istiyorsam, bu tür bağımlılıkları baştan ayırmayı ve bunlardan kaçınmayı öğrenmeye değer mi? Bu, jQuery'den daha ayrık bir yapıyı destekleyen bir kütüphane lehine kaçınmak anlamına mı geliyor?

Bundan kaçınmanın bir yolu yok. Birleştiler çünkü birbirleriyle etkileşime giriyorlar. Javascript'iniz herhangi bir DOM manipülasyonu yapmak istiyorsa, DOM'a başvurması için bir yola ihtiyaç duyar.

Bunun için çeşitli sözleşmeler var.

Level 2 DOM API, getElementById, getElementByTagName ve getElementsByName yöntemlerini sağlar. Bu güne kadar bunlar herhangi bir DOM geçişi iş gücüdür. Diğer tüm meraklısı jQuery seçicileri, bunların sonunda ve / veya her bir DOM düğümünün düz yukarı geçişini bir arada çözer (bu, getByClassName işlevinin gerçekleştirildiği yoldur).

Başka bir kısayol yok. Javascript ne yapacağını ve nerede olduğunu bilmeli. Genellikle, bir öğenin yalnızca komut dosyasıyla ilgili bir kimliği veya sınıfı varsa, birçok kişi onu js-veya başka bir belirgin bayrağı öneklendirir.

Daha yeni bir kural, veri özniteliği seçimidir.

<ul data-myapp-sortable="true">

jQuery('[data-myapp-sortable]').makeSortable();

Data-niteliği genellikle kodlama amaçları için kullanılır ve bunun kullanımı mantıklıdır. Dezavantajı, bunun getElementById () işlevinden daha yavaş olmasıdır.

Bir başka yaklaşım ise, bir görüş modeli oluşturan açısal JS tarafından kullanılan yaklaşımdır. Bu sözleşmede, her türlü kodlama işlevi, ng-disabled ng-hrefve daha fazlası gibi özel olarak belirlenmiş özelliklerle belirtilir . Javascript'ine seçici eklemiyorsun. HTML belgesi, neyin yazıldığına ve nasıl yazıldığına dair ana otorite haline gelir ve javascript soyut olarak çalışır. Bu iyi bir yaklaşım, fakat açıkça önceki yöntemlerden daha yüksek bir öğrenme eğrisi ile. Ve yine, performans dikkate alınmalıdır.

Ancak hiçbir zaman etkileşimli HTML ve javascript yazabileceğinizi düşünmeyin ve bir şekilde diğeriyle ilgili olmayan her iki bölüm de var. Referansları bağımlılıklar ile nasıl sınırlandırabileceğinizle ilgili daha fazla.

Alacağınız etkileşimin önüne geçmek istiyorsan Javascript'i tamamen önleyebilirsin. ASP.NET MVC gibi çerçeveler, yalnızca HTML, CSS ve bir SUBMIT düğmesi içeren sayfalar sunmakta çok iyidir.

TAMAM. Belki bu biraz aşırıdır.

Bir web uygulamasında decoupling zaten birçok düzeyde gerçekleşir. REST uygulamaları, başvurunuzu bir URL ile ilişkili "web kaynakları" olarak tanımlamanıza izin verir. Görünüm Modelleri, verileri etki alanı modelinden ayrıştırılan UI'ye sunmanıza olanak tanır, ancak bunları doğru şekilde görüntülemeniz için gereken şekle sahiptir. Servis katmanları bir UI'nın bir başkasıyla değiştirilmesine izin verir.

Tarihsel olarak, etkileşim ve eşleşme arasında her zaman bir sapma olmuştur. Web sayfanız ne kadar etkileşimli ise, olacağı uygulamaya o kadar sıkı bağlı. Ancak, web sayfasındaki etkileşim mantığı web sayfasının kendisiyle sınırlıdır; Sunucuyla herhangi bir bağlantı POST veya AJAX aracılığıyla gerçekleşir. Bu yüzden, veri paketlerinin tarayıcı ile sunucu arasında nasıl aktarıldığına dikkat etmekten başka Javascript seviyesindeki kuplaj ile fazla ilgilenmeniz gerektiğinden emin değilim.

En "modern" yaklaşım (yani haftanın tadı) SPA uygulamaları olabilir .

Martin Fowler buna bir yaklaşım olarak DOM JavaScript'inizi sayfa mantık JavaScript'inizden ayırdığınız Ayrılmış DOM olarak açıklar .

Application Logic <----> DOM Manipulation <----> DOM / HTML

Hayır, sınıf, öğe ve kimlik seçicilerin istemci tarafını kullanmaktan kaçınılmamalıdır. Sözdizimi, CSS seçicilerin çok olgun ve köklü bir etki alanı dili olması ve ortak bir tasarıma sahip olması, çok iyi bir şey olan program ve tasarım arasında bir sayfanın ortak bir mantıksal modelini paylaşmayı çok daha kolaylaştırdığı için kullanılır.

Bu sözdizimini yanlış kullanmak ve korkunç ve sürdürülemez bir uygulama oluşturmak mümkün olsa da, dil veya araç setinizden bağımsız olarak bu mümkündür.

Birisinin dom'a bir dolaylı ve önbellek katmanı için bir jQuery path manager arayüzü oluşturması gerekir.

pathMgr.register(name,selector [,isDynamic=false]);
pathMgr.get(name [,refresh]);

Sonra,

String.prototype.reg([isDynamic=false]);
String.prototype.get(name [,refresh]);

Yani,

// at init....
var pathMgr=new PathMgr();
'sidebar-links #sidebar a'.reg();// new registery of selector '#sidebar a' under name 'sidebar-links'
// more, more


// in code
'sidebar-links'.get().css(etc...);
//or
'sidebar-links'.addStyleRule({});