Atribut khusus - Ya atau tidak?

Baru-baru ini saya telah membaca semakin banyak tentang orang-orang yang menggunakan atribut khusus dalam tag HTML mereka, terutama untuk tujuan menanamkan beberapa bit data tambahan untuk digunakan dalam kode javascript.

Saya berharap dapat mengumpulkan umpan balik tentang apakah menggunakan atribut khusus atau tidak adalah praktik yang baik, dan juga apa beberapa alternatifnya.

Sepertinya itu benar-benar dapat menyederhanakan baik sisi server dan kode sisi klien, tetapi juga tidak sesuai W3C.

Haruskah kita memanfaatkan atribut HTML khusus di aplikasi web kita? Mengapa atau mengapa tidak?

Bagi mereka yang menganggap atribut khusus adalah hal yang baik: apa sajakah hal yang perlu diingat ketika menggunakannya?

Bagi mereka yang menganggap atribut khusus adalah hal yang buruk: alternatif apa yang Anda gunakan untuk mencapai sesuatu yang serupa?

Pembaruan: Saya lebih tertarik pada alasan di balik berbagai metode, serta poin mengapa satu metode lebih baik dari yang lain. Saya pikir kita semua dapat menemukan 4-5 cara berbeda untuk mencapai hal yang sama. (elemen tersembunyi, skrip sebaris, kelas tambahan, parsing info dari id, dll).

Pembaruan 2: Tampaknya data-fitur atribut HTML 5 memiliki banyak dukungan di sini (dan saya cenderung setuju, sepertinya opsi yang solid). Sejauh ini saya belum melihat banyak cara bantahan untuk saran ini. Apakah ada masalah / jebakan yang perlu dikhawatirkan dalam menggunakan pendekatan ini? Atau itu hanya validasi 'tidak berbahaya' dari spesifikasi W3C saat ini?

HTML 5 secara eksplisit memungkinkan atribut khusus yang dimulai dengan data. Jadi, misalnya, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>valid. Karena secara resmi didukung oleh standar, saya pikir ini adalah opsi terbaik untuk atribut khusus. Dan itu tidak mengharuskan Anda untuk membebani atribut lainnya dengan peretasan, sehingga HTML Anda dapat tetap semantik.

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

Inilah teknik yang saya gunakan baru-baru ini:

<div id="someelement">

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

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

Objek komentar terkait dengan elemen induk (mis. #Someelement).

Inilah pengurai: http://pastie.org/511358

Untuk mendapatkan data untuk elemen tertentu, cukup panggil parseDatadengan referensi ke elemen yang diteruskan sebagai satu-satunya argumen:

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

var data = parseData( myElem );

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

Itu bisa lebih ringkas dari itu:

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

Akses:

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

Satu-satunya kelemahan menggunakan ini adalah tidak dapat digunakan dengan elemen self-closing (mis. <img/>), Karena komentar harus berada dalam elemen untuk dipertimbangkan sebagai data elemen itu.

EDIT :

Manfaat penting dari teknik ini:

• Mudah diimplementasikan
• Apakah tidak invalidate HTML / XHTML
• Mudah digunakan / dimengerti (notasi JSON dasar)
• Tidak mengganggu dan lebih bersih daripada kebanyakan alternatif

Berikut kode parser (disalin dari tautan http://pastie.org/511358 di atas, kalau-kalau kode tersebut tidak tersedia di pastie.org):

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;

    };

})();

Anda dapat membuat atribut apa pun jika Anda menentukan skema untuk halaman Anda.

Sebagai contoh:

Tambahkan ini

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

Facebook (bahkan tag)

<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"/>

Cara termudah untuk menghindari penggunaan atribut khusus adalah dengan menggunakan atribut yang ada.

menggunakan nama kelas yang bermakna dan relevan.
Misalnya, lakukan sesuatu seperti: type='book'dan type='cd', untuk mewakili buku dan CD. Kelas jauh lebih baik untuk mewakili apa sesuatu IS .

misalnya class='book'

Saya telah menggunakan atribut khusus di masa lalu, tetapi jujur, sebenarnya tidak ada kebutuhan untuk itu jika Anda menggunakan atribut yang ada dengan cara yang secara semantik bermakna.

Untuk memberikan contoh yang lebih konkret, katakanlah Anda memiliki situs yang memberikan tautan ke berbagai jenis toko. Anda dapat menggunakan yang berikut ini:

<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>

styling css dapat menggunakan kelas-kelas seperti:

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

Dalam contoh di atas kita melihat bahwa keduanya adalah tautan ke toko (berbeda dengan tautan lain yang tidak terkait di situs) dan satu adalah toko cd, dan yang lainnya adalah toko buku.

Sematkan data dalam dom dan gunakan metadata untuk jQuery .

Semua plug-in yang baik mendukung plugin metadata (memungkinkan per opsi tag).

Ini juga memungkinkan struktur data / data yang sangat rumit, serta pasangan nilai kunci.

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

ATAU

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

ATAU

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

Kemudian dapatkan data seperti:

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

Saya melihat tidak ada masalah dalam menggunakan fitur XHTML yang ada tanpa merusak apa pun atau memperluas namespace Anda. Mari kita lihat contoh kecil:

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

Bagaimana cara menambahkan informasi tambahan ke some_content tanpa atribut tambahan? Bagaimana dengan menambahkan tag lain seperti yang berikut ini?

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

Itu membuat hubungan melalui id / ekstensi "_extended" yang ditentukan dengan baik dari pilihan Anda dan dengan posisinya dalam hierarki. Saya sering menggunakan pendekatan ini bersama dengan jQuery dan tanpa benar-benar menggunakan teknik seperti Ajax.

Bahkan. Coba sesuatu seperti ini sebagai gantinya:

<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>

Saya tidak melakukan menggunakan atribut khusus, karena saya mengeluarkan XHTML, karena saya ingin data dapat dibaca oleh perangkat lunak pihak ke-3 (walaupun, saya bisa memperpanjang skema XHTML jika saya mau).

Sebagai alternatif untuk atribut khusus, sebagian besar saya menemukan atribut id dan kelas (misalnya seperti yang disebutkan dalam jawaban lain) cukup.

Juga pertimbangkan ini:

• Jika data tambahan harus dapat dibaca oleh manusia dan juga dapat dibaca oleh mesin, maka data tersebut harus disandikan menggunakan tag dan teks HTML (terlihat) alih-alih sebagai atribut khusus.

• Jika tidak perlu dibaca manusia, maka mungkin dapat dikodekan menggunakan tag dan teks HTML yang tidak terlihat .

Beberapa orang membuat pengecualian: mereka mengizinkan atribut khusus, ditambahkan ke DOM oleh Javascript di sisi klien saat run-time. Mereka menganggap ini OK: karena atribut khusus hanya ditambahkan ke DOM pada saat run-time, HTML tidak mengandung atribut khusus.

Kami telah membuat editor berbasis web yang memahami subset HTML - subset yang sangat ketat (yang dipahami hampir secara universal oleh klien surat). Kita perlu mengekspresikan hal-hal seperti <td width="@INSWIDTH_42@">dalam database, tetapi kita tidak dapat memilikinya di DOM, jika tidak browser tempat editor berjalan, panik (atau lebih cenderung panik daripada cenderung panik pada atribut khusus) . Kami ingin drag-and-drop, jadi memasukkannya murni di DOM sudah keluar, seperti jquery .data()(data tambahan tidak disalin dengan benar). Kami mungkin juga membutuhkan data tambahan untuk ikut dalam perjalanan .html(). Pada akhirnya kami memutuskan untuk menggunakan <td width="1234" rs-width="@INSWIDTH_42@">selama proses pengeditan, dan kemudian ketika kami POST semuanya, kami menghapus widthdan melakukan pencarian dan penghancuran regex s/rs-width=/width=/g.

Pada awalnya orang yang menulis sebagian besar ini adalah validasi-nazi pada masalah ini dan mencoba segalanya untuk menghindari atribut khusus kami, tetapi pada akhirnya menyetujui ketika tidak ada hal lain yang tampaknya berfungsi untuk SEMUA persyaratan kami. Itu membantu ketika dia menyadari bahwa atribut khusus tidak akan pernah muncul dalam email. Kami memang mempertimbangkan untuk menyandikan data tambahan kami class, tetapi memutuskan bahwa itu akan menjadi yang terbesar dari dua kejahatan.

Secara pribadi, saya lebih suka memiliki hal-hal yang bersih dan melewati validator dll, tetapi sebagai karyawan perusahaan saya harus ingat bahwa tanggung jawab utama saya adalah memajukan tujuan perusahaan (menghasilkan uang secepat mungkin), bukan keinginan egois saya untuk kemurnian teknis. Alat harus bekerja untuk kita; bukan kita untuk mereka.

Saya tahu orang-orang menentangnya, tetapi saya datang dengan solusi super singkat untuk ini. Jika Anda ingin menggunakan atribut khusus seperti "milikku", misalnya:

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

Kemudian Anda dapat menjalankan kode ini untuk mendapatkan objek kembali seperti halnya jquery.data ().

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: Buat kontrol ASP.NET TextBox yang secara otomatis memformat teksnya sebagai angka, sesuai dengan properti "DecimalSeparator" dan "ThousandsSeparator", menggunakan JavaScript.


Salah satu cara untuk mentransfer properti ini dari kontrol ke JavaScript adalah dengan membuat kontrol membuat properti khusus:

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

Properti khusus mudah diakses oleh JavaScript. Dan sementara halaman menggunakan elemen dengan properti khusus tidak akan divalidasi , rendering halaman itu tidak akan terpengaruh.


Saya hanya menggunakan pendekatan ini ketika saya ingin mengaitkan tipe sederhana seperti string dan integer ke elemen HTML untuk digunakan dengan JavaScript. Jika saya ingin membuat elemen HTML lebih mudah diidentifikasi, saya akan menggunakan properti class dan id .

Untuk aplikasi web yang kompleks, saya menjatuhkan atribut khusus di semua tempat.

Untuk halaman yang menghadap publik lainnya, saya menggunakan atribut "rel" dan membuang semua data saya di JSON dan mendekode dengan MooTools atau jQuery:

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

Saya mencoba untuk tetap menggunakan atribut data HTML 5 belakangan ini hanya untuk "mempersiapkan", tetapi belum datang secara alami.

Saya menggunakan bidang khusus sepanjang waktu misalnya <ai = "" .... Lalu referensi ke i dengan jquery. Html tidak valid, ya. Itu bekerja dengan baik, ya.

Atribut khusus, menurut pendapat saya, tidak boleh digunakan karena tidak valid. Alternatif untuk itu, Anda dapat mendefinisikan banyak kelas untuk elemen tunggal seperti:

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