Özel özellikler - Evet veya nay?

Son zamanlarda, özellikle javascript kodunda kullanmak için bazı ekstra veri bitleri gömmek amacıyla, HTML etiketlerinde özel nitelikleri kullanan kişiler hakkında giderek daha fazla okuyorum.

Özel özellikleri kullanmanın iyi olup olmadığı ve bazı alternatiflerin neler olduğu konusunda bazı geri bildirimler toplamayı umuyordum.

Hem sunucu tarafı hem de istemci tarafı kodunu gerçekten basitleştirebilir gibi görünüyor , ancak aynı zamanda W3C uyumlu değil.

Web uygulamalarımızdaki özel HTML özelliklerini mi kullanmalıyız? Neden ya da neden olmasın?

Özel niteliklerin iyi bir şey olduğunu düşünenler için: bunları kullanırken akılda tutulması gereken şeyler nelerdir?

Özel özelliklerin kötü bir şey olduğunu düşünenler için: benzer bir şeyi başarmak için hangi alternatifleri kullanıyorsunuz?

Güncelleme: Çoğunlukla çeşitli yöntemlerin ardındaki akıl yürütme ve bir yöntemin neden diğerinden daha iyi olduğu ile ilgileniyorum . Sanırım hepimiz aynı şeyi başarmak için 4-5 farklı yol bulabiliriz. (gizli öğeler, satır içi komut dosyaları, ekstra sınıflar, kimliklerden bilgi ayrıştırma vb.).

Güncelleme 2: HTML 5 data-özellik özelliğinin burada çok fazla desteği var gibi görünüyor (ve katılıyorum, sağlam bir seçenek gibi görünüyor). Şimdiye kadar bu öneri için çürütme yolunda çok fazla şey görmedim. Bu yaklaşımı kullanma konusunda endişelenecek herhangi bir sorun / tuzak var mı? Yoksa sadece mevcut W3C spesifikasyonlarının 'zararsız' bir geçersiz kılınması mı?

HTML 5, ile başlayan özel özelliklere açıkça izin verir data. Örneğin, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>geçerlidir. Resmi olarak bir standart tarafından desteklendiğinden, bunun özel özellikler için en iyi seçenek olduğunu düşünüyorum. Ayrıca, diğer özellikleri hack'lerle aşırı yüklemenizi gerektirmez, böylece HTML'niz semantik kalabilir.

Kaynak: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

İşte son zamanlarda kullandığım bir teknik:

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

Yorum nesnesi üst öğeye bağlanır (yani #someelement).

Ayrıştırıcı İşte: http://pastie.org/511358

Belirli bir öğenin verilerini almak parseDataiçin tek argüman olarak iletilen öğeye bir başvuru ile çağrı yapmanız yeterlidir :

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

Bundan daha özlü olabilir:

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

Ona eriş:

parseData( document.getElementById('foo') ).specialID; // <= 245

Bunu kullanmanın tek dezavantajı, kendiliğinden kapanan elemanlarla (örneğin <img/>) kullanılamamasıdır, çünkü yorumlar o elemanın verileri olarak düşünülecek elemanın içinde olmalıdır .

DÜZENLE :

Bu tekniğin dikkate değer faydaları:

• Uygulaması kolay
• Does not invalidate HTML / XHTML
• Kullanımı / anlaşılması kolay (temel JSON gösterimi)
• Göze batmayan ve anlamsal olarak çoğu alternatiften daha temiz

Ayrıştırıcı kodu ( pastie.org'da hiç kullanılamaması durumunda yukarıdaki http://pastie.org/511358 köprüsünden kopyalanmıştır ):

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();

Sayfanız için bir şema belirtirseniz, herhangi bir özellik oluşturabilirsiniz.

Örneğin:

Bunu ekle

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

Facebook (çift etiketler)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

Özel özelliklerin kullanılmasından kaçınmanın en kolay yolu mevcut özellikleri kullanmaktır.

anlamlı, alakalı sınıf isimleri kullanın.
Örneğin, şöyle bir şey yapın: type='book've type='cd'kitapları ve cd'leri temsil etmek. Sınıflar şey nedir temsil için daha iyi IS .

Örneğin class='book'

Geçmişte özel nitelikler kullandım, ancak dürüst olmak gerekirse, mevcut nitelikleri anlamsal olarak anlamlı bir şekilde kullanırsanız, bunlara gerçekten ihtiyaç duyulmaz.

Daha somut bir örnek vermek gerekirse, farklı mağaza türlerine bağlantı veren bir siteniz olduğunu varsayalım. Aşağıdakileri kullanabilirsiniz:

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

css stil aşağıdaki gibi sınıfları kullanabilirsiniz:

.store { }
.cd.store { }
.book.store { }

Yukarıdaki örnekte, her ikisinin de mağazalara bağlantılar olduğunu (sitedeki ilgisiz diğer bağlantıların aksine), birinin CD deposunu, diğerinin ise kitapçı olduğunu görüyoruz.

Dom'daki verileri gömün ve jQuery için meta verileri kullanın .

Tüm iyi eklentiler meta veri eklentisini destekler (etiket seçeneklerine izin verir).

Ayrıca, son derece karmaşık veri / veri yapılarının yanı sıra anahtar / değer çiftlerine de izin verir.

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

VEYA

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

VEYA

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

Sonra şu şekilde veri alın:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');

Hiçbir şey kırmadan veya ad alanınızı genişletmeden mevcut XHTML özelliklerini kullanırken sorun görmüyorum. Küçük bir örneğe bakalım:

<div id="some_content">
 <p>Hi!</p>
</div>

Ek özellikler olmadan some_content'e nasıl ek bilgi ekleyebilirim? Aşağıdaki gibi başka bir etiket eklemeye ne dersiniz?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

İlişkinizi, seçtiğiniz "_extended" kimliği / uzantısıyla ve hiyerarşideki konumuna göre tutar. Genellikle bu yaklaşımı jQuery ile birlikte ve aslında Ajax benzeri teknikleri kullanmadan kullanıyorum.

Hayır. Bunun yerine böyle bir şey deneyin:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>

Verileri 3. taraf yazılım tarafından makine tarafından okunabilir olmasını istediğim için XHTML çıktısını aldığım için özel öznitelikler kullanmıyorum (her ne kadar istersem XHTML şemasını genişletebilirim).

Özel özniteliklere alternatif olarak, çoğunlukla kimlik ve sınıf özniteliklerini (örneğin diğer yanıtlarda belirtildiği gibi) yeterli buluyorum.

Ayrıca şunu da düşünün:

• Ek veriler insan tarafından okunabilir ve makine tarafından okunabilirse, özel özellikler yerine (görünür) HTML etiketleri ve metin kullanılarak kodlanması gerekir.

• İnsan tarafından okunabilir olması gerekmiyorsa, görünmez HTML etiketleri ve metin kullanılarak kodlanabilir .

Bazı insanlar bir istisna yapar: çalışma zamanında istemci tarafında Javascript ile DOM'a eklenen özel niteliklere izin verir. Bunun iyi olduğunu düşünüyorlar: özel özellikler yalnızca DOM'a çalışma zamanında eklendiğinden, HTML hiçbir özel özellik içermiyor.

HTML'nin bir alt kümesini anlayan web tabanlı bir editör yaptık - çok katı bir alt küme (posta istemcileri tarafından neredeyse evrensel olarak anlaşılan). <td width="@INSWIDTH_42@">Veritabanındaki gibi şeyleri ifade etmeliyiz, ancak bunu DOM'da yapamayız, aksi takdirde düzenleyicinin çalıştığı, çıldırdığı (veya özel nitelikler üzerinde korkma olasılığından daha fazla korkma olasılığı olan) . Sürükle ve bırak istedik, bu yüzden jquery'nin olduğu gibi tamamen DOM içine koymak .data()(ekstra veri düzgün kopyalanmadı). Muhtemelen binmek için gelmek için ekstra veri gerekiyordu .html(). Sonunda, <td width="1234" rs-width="@INSWIDTH_42@">düzenleme işlemi sırasında kullanmaya karar verdik ve sonra her şeyi POST ettiğimizde, widthbir normal ifade arama ve yok etme işlemini gerçekleştiririz s/rs-width=/width=/g.

İlk başta, bu konunun çoğunu yazan kişi bu konuda doğrulama-nazi idi ve özel özelliğimizden kaçınmak için her şeyi denedi, ancak sonunda hiçbir şey TÜM gereksinimlerimiz için işe yaramadığında ortaya çıktı. Özel özelliğin hiçbir zaman bir e-postada görünmeyeceğini fark ettiğinde yardımcı oldu. Ek verilerimizi kodlamayı düşündük class, ancak iki kötülükten daha büyük olacağına karar verdik.

Şahsen, temiz ve geçerlilik doğrulayıcıları vb. Tercih etmeyi tercih ediyorum , ancak bir şirket çalışanı olarak, birincil sorumluluğumun, bencil arzumun değil, şirketin nedenini (olabildiğince çabuk para kazanmak) ilerlettiğini hatırlamalıyım. teknik saflık. Araçlar bizim için çalışmalı; onlar için değil.

İnsanların buna karşı olduğunu biliyorum, ama bunun için süper kısa bir çözüm buldum. "Benimki" gibi bir özel özellik kullanmak istiyorsanız, örneğin:

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

Daha sonra jquery.data () gibi bir nesneyi geri almak için bu kodu çalıştırabilirsiniz.

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});

Spec: JavaScript kullanarak "DecimalSeparator" ve "ThousandsSeparator" özelliklerine göre metnini dinamik olarak otomatik olarak formatlayan bir ASP.NET TextBox denetimi oluşturun.


Bu özellikleri denetimden JavaScript'e aktarmanın bir yolu, denetimin özel özellikleri oluşturmasını sağlamaktır:

<input type="text" id="" decimalseparator="." thousandsseparator="," />

Özel özelliklere JavaScript ile kolayca erişilebilir. Özel özelliklere sahip öğeleri kullanan bir sayfa doğrulanmayacak olsa da , bu sayfanın oluşturulması etkilenmeyecektir.


Ben sadece ben JavaScript ile kullanmak için HTML öğelerine dizeleri ve tamsayılar gibi basit türlerini ilişkilendirmek istediğinizde bu yaklaşımı kullanın. HTML öğelerinin tanımlanmasını kolaylaştırmak istersem sınıf ve kimlik özelliklerini kullanacağım .

Karmaşık web uygulamaları için, her yere özel özellikler bırakıyorum.

Halka açık daha fazla sayfa için "rel" özniteliğini kullanın ve tüm verilerimi JSON orada dökümü ve sonra MooTools veya jQuery ile kodunu çözmek:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

Son zamanlarda sadece "hazırlamak" için HTML 5 veri özniteliği ile sopa çalışıyorum, ama henüz doğal olarak gelmedi.

Her zaman özel alanlar kullanıyorum, örneğin <ai = "" .... Sonra jquery ile i başvurusu. Geçersiz html, evet. İyi çalışıyor, evet.

Özel düşünceler, benim düşünceme göre, onaylamadıkları için kullanılmamalıdır. Buna alternatif olarak, aşağıdaki gibi tek bir öğe için birçok sınıf tanımlayabilirsiniz:

<div class='class1 class2 class3'>
    Lorem ipsum
</div>