แอตทริบิวต์ที่กำหนดเอง - ใช่หรือไม่?

เมื่อเร็ว ๆ นี้ฉันได้อ่านคนมากขึ้นเรื่อย ๆ เกี่ยวกับการใช้แอตทริบิวต์ที่กำหนดเองในแท็ก HTML ของพวกเขาส่วนใหญ่เพื่อจุดประสงค์ในการฝังบิตพิเศษของข้อมูลบางอย่างเพื่อใช้ในโค้ดจาวาสคริปต์

ฉันหวังว่าจะรวบรวมความคิดเห็นเกี่ยวกับการใช้แอตทริบิวต์ที่กำหนดเองว่าเป็นวิธีปฏิบัติที่ดีหรือไม่และมีทางเลือกอะไรบ้าง

ดูเหมือนว่าสามารถทำให้ทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ไคลเอนต์ได้ง่ายขึ้นแต่ก็ไม่ได้เป็นไปตามมาตรฐาน W3C

เราควรจะใช้ประโยชน์จากคุณสมบัติ HTML ที่กำหนดเองในเว็บแอปของเราหรือไม่? ทำไมหรือทำไมไม่?

สำหรับผู้ที่คิดว่าคุณสมบัติที่กำหนดเองเป็นสิ่งที่ดี: อะไรคือสิ่งที่คุณควรคำนึงถึงเมื่อใช้งาน

สำหรับผู้ที่คิดว่าคุณสมบัติที่กำหนดเองนั้นเป็นสิ่งที่ไม่ดี: คุณมีทางเลือกอะไรในการทำสิ่งที่คล้ายกัน

อัปเดต: ฉันส่วนใหญ่สนใจในการให้เหตุผลเบื้องหลังวิธีการต่าง ๆ รวมทั้งชี้ให้เห็นว่าทำไมวิธีหนึ่งดีกว่าวิธีอื่น ฉันคิดว่าเราทุกคนสามารถค้นพบวิธีที่แตกต่างกัน 4-5 วิธีเพื่อให้ได้สิ่งเดียวกัน (องค์ประกอบที่ซ่อนอยู่สคริปต์แบบอินไลน์คลาสพิเศษข้อมูลการแยกวิเคราะห์จากรหัส ฯลฯ )

อัปเดต 2: ดูเหมือนว่าdata-คุณลักษณะคุณลักษณะHTML 5 มีการสนับสนุนมากมายที่นี่ (และฉันมักจะเห็นด้วยดูเหมือนว่าเป็นตัวเลือกที่ดี) จนถึงตอนนี้ฉันไม่ได้เห็นข้อเสนอแนะนี้มากนัก มีปัญหา / ข้อผิดพลาดใด ๆ ที่ต้องกังวลเกี่ยวกับการใช้วิธีการนี้หรือไม่? หรือเป็นเพียงแค่การทำให้เป็นโมฆะของข้อกำหนด W3C ปัจจุบัน 'ไม่เป็นอันตราย'?

HTML 5 อนุญาตให้ใช้แอตทริบิวต์ที่กำหนดเองที่ขึ้นต้นด้วยdataอย่างชัดเจน ตัวอย่างเช่น<p data-date-changed="Jan 24 5:23 p.m.">Hello</p>ถูกต้อง เนื่องจากมาตรฐานรองรับอย่างเป็นทางการฉันจึงคิดว่านี่เป็นตัวเลือกที่ดีที่สุดสำหรับแอตทริบิวต์ที่กำหนดเอง และไม่ต้องการให้คุณโอเวอร์โหลดแอตทริบิวต์อื่น ๆ ด้วยแฮ็กดังนั้น HTML ของคุณจึงยังคงความหมาย

ที่มา: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

นี่เป็นเทคนิคที่ฉันใช้เมื่อไม่นานมานี้:

<div id="someelement">

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

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

ความคิดเห็น - วัตถุผูกกับองค์ประกอบผู้ปกครอง (เช่น #someelement)

นี่คือเครื่องมือแยกวิเคราะห์: http://pastie.org/511358

ในการรับข้อมูลสำหรับองค์ประกอบเฉพาะใด ๆ เพียงแค่เรียกparseDataด้วยการอ้างอิงถึงองค์ประกอบนั้นผ่านเป็นอาร์กิวเมนต์เท่านั้น:

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

var data = parseData( myElem );

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

มันสามารถรวบรัดได้มากกว่านั้น:

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

เข้าถึงได้ที่:

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

ข้อเสียเปรียบเพียงอย่างเดียวของการใช้สิ่งนี้คือมันไม่สามารถใช้กับองค์ประกอบการปิดตัวเอง (เช่น<img/>) เนื่องจากความคิดเห็นจะต้องอยู่ในองค์ประกอบที่จะถือเป็นข้อมูลขององค์ประกอบนั้น

แก้ไข :

ประโยชน์ที่โดดเด่นของเทคนิคนี้:

• ใช้งานง่าย
• ไม่ไม่โมฆะ HTML / XHTML
• ใช้งานง่าย / เข้าใจ (สัญลักษณ์ JSON พื้นฐาน)
• ไม่สร้างความรำคาญและความหมายที่สะอาดกว่าทางเลือกส่วนใหญ่

นี่คือรหัส parser (คัดลอกมาจากhttp://pastie.org/511358ไฮเปอร์ลิงก์ด้านบนในกรณีที่ไม่สามารถใช้งานได้ใน 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;

    };

})();

คุณสามารถสร้างแอททริบิวใด ๆ หากคุณระบุสคีมาสำหรับหน้าของคุณ

ตัวอย่างเช่น:

เพิ่มสิ่งนี้

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

Facebook (แม้กระทั่งแท็ก)

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

วิธีที่ง่ายที่สุดในการหลีกเลี่ยงการใช้คุณสมบัติที่กำหนดเองคือใช้แอตทริบิวต์ที่มีอยู่

ใช้ชื่อคลาสที่มีความหมายและเกี่ยวข้อง
ตัวอย่างเช่นทำสิ่งที่ต้องการ: type='book'และtype='cd'เพื่อเป็นตัวแทนหนังสือและซีดี การเรียนการสอนที่ดีมากสำหรับการเป็นตัวแทนสิ่งบางอย่างที่เป็น

เช่น class='book'

ฉันเคยใช้คุณสมบัติที่กำหนดเองในอดีต แต่จริงๆแล้วมันไม่จำเป็นสำหรับพวกเขาหากคุณใช้คุณลักษณะที่มีอยู่ในวิธีที่มีความหมาย

เพื่อให้เป็นตัวอย่างที่ชัดเจนยิ่งขึ้นสมมติว่าคุณมีเว็บไซต์ที่ให้ลิงก์ไปยังร้านค้าประเภทต่างๆ คุณสามารถใช้สิ่งต่อไปนี้:

<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 ใส่สไตล์สามารถใช้คลาสเช่น:

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

ในตัวอย่างด้านบนเราจะเห็นว่าทั้งคู่เป็นลิงค์ไปยังร้านค้า (ตรงข้ามกับลิงค์ที่ไม่เกี่ยวข้องอื่น ๆ บนเว็บไซต์) และอีกร้านหนึ่งเป็นร้านซีดีและอีกร้านเป็นร้านหนังสือ

ฝังข้อมูลใน Dom และการใช้ข้อมูลเมตาสำหรับjQuery

ปลั๊กอินที่ดีทั้งหมดสนับสนุนปลั๊กอินเมทาดาทา (การอนุญาตต่อตัวเลือกแท็ก)

นอกจากนี้ยังช่วยให้โครงสร้างข้อมูล / ข้อมูลที่ซับซ้อนอย่างไม่มีที่สิ้นสุดเช่นเดียวกับคู่ของคีย์ - ค่า

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

หรือ

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

หรือ

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

จากนั้นรับข้อมูลดังนี้:

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

ฉันเห็นว่าไม่มีปัญหาในการใช้คุณสมบัติ XHTML ที่มีอยู่โดยไม่ทำให้อะไรแตกออกหรือขยายพื้นที่ทำงานของคุณ ลองมาดูตัวอย่างเล็ก ๆ :

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

จะเพิ่มข้อมูลเพิ่มเติมใน some_content โดยไม่มีแอตทริบิวต์เพิ่มเติมได้อย่างไร สิ่งที่เกี่ยวกับการเพิ่มแท็กดังต่อไปนี้?

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

มันทำให้ความสัมพันธ์ผ่าน id / นามสกุลที่กำหนดไว้อย่างดี "_extended" ที่คุณเลือกและตามตำแหน่งในลำดับชั้น ฉันมักจะใช้วิธีนี้ร่วมกับ jQuery และไม่ใช้ Ajax อย่างเทคนิคจริงๆ

เปล่า ลองทำสิ่งนี้แทน:

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

ฉันไม่ได้ใช้คุณสมบัติที่กำหนดเองเพราะฉันแสดงผล XHTML เพราะฉันต้องการข้อมูลที่สามารถอ่านได้ด้วยเครื่องโดยซอฟต์แวร์บุคคลที่สาม (แม้ว่าฉันจะสามารถขยาย schema XHTML ได้หากต้องการ)

เป็นทางเลือกแทนแอตทริบิวต์ที่กำหนดเองส่วนใหญ่ฉันค้นหาคุณลักษณะ id และคลาส (เช่นที่กล่าวถึงในคำตอบอื่น ๆ ) เพียงพอ

นอกจากนี้ให้พิจารณาสิ่งนี้:

• หากข้อมูลเพิ่มเติมจะต้องสามารถอ่านได้โดยมนุษย์และสามารถอ่านได้เครื่องจะต้องมีการเข้ารหัสโดยใช้แท็ก HTML (ที่มองเห็นได้) และข้อความแทนที่จะเป็นแอตทริบิวต์ที่กำหนดเอง

• หากมันไม่จำเป็นต้องเป็นมนุษย์ที่สามารถอ่านได้บางทีมันอาจถูกเข้ารหัสโดยใช้แท็กและข้อความ HTML ที่มองไม่เห็น

บางคนทำข้อยกเว้น: พวกเขาอนุญาตให้มีแอตทริบิวต์ที่กำหนดเองเพิ่มไปยัง DOM โดย Javascript ทางฝั่งไคลเอ็นต์ในเวลาทำงาน พวกเขาคิดว่านี่เป็น OK: เนื่องจากแอตทริบิวต์ที่กำหนดเองจะถูกเพิ่มไปยัง DOM ในเวลาทำงานเท่านั้น HTML ไม่มีแอตทริบิวต์ที่กำหนดเอง

เราได้สร้างโปรแกรมแก้ไขทางเว็บที่เข้าใจชุดย่อยของ HTML ซึ่งเป็นชุดย่อยที่เข้มงวดมาก (ซึ่งเข้าใจได้โดยทั่วไปในไคลเอนต์อีเมล) เราจำเป็นต้องแสดงสิ่งต่าง ๆ เช่น<td width="@INSWIDTH_42@">ในฐานข้อมูล แต่เราไม่สามารถมีได้ใน DOM มิฉะนั้นเบราว์เซอร์ที่ตัวแก้ไขรันออกนอกลู่นอกทาง . เราต้องการลากแล้วปล่อยดังนั้นวางไว้ใน DOM หมดจดเหมือนของ jquery .data()(ข้อมูลเพิ่มเติมไม่ได้รับการคัดลอกอย่างถูกต้อง) เราอาจต้องการข้อมูลเพิ่มเติมเพื่อมานั่ง.html()ด้วย ในที่สุดเราตัดสินเกี่ยวกับการใช้<td width="1234" rs-width="@INSWIDTH_42@">ในระหว่างขั้นตอนการแก้ไขและจากนั้นเมื่อเราโพสต์มันทั้งหมดเราจะลบwidthและทำ regex s/rs-width=/width=/gการค้นหาและทำลาย

ตอนแรกคนที่แต่งตัวประหลาดส่วนใหญ่เขียนนี้เป็นการตรวจสอบ - นาซีในเรื่องนี้และพยายามทุกอย่างเพื่อหลีกเลี่ยงคุณลักษณะที่กำหนดเองของเรา แต่ในที่สุดก็ยอมรับว่าเมื่อไม่มีสิ่งใดที่ดูเหมือนจะทำงานได้สำหรับทุกความต้องการของเรา มันช่วยได้เมื่อเขาตระหนักว่าแอตทริบิวต์ที่กำหนดเองจะไม่ปรากฏในอีเมลเราได้พิจารณาการเข้ารหัสข้อมูลพิเศษของเราclassแต่ตัดสินใจว่าจะยิ่งใหญ่กว่าสองสิ่งชั่ว

โดยส่วนตัวแล้วฉันชอบที่จะมีสิ่งที่สะอาดและผ่านการตรวจสอบความถูกต้องเป็นต้น แต่ในฐานะพนักงาน บริษัท ฉันต้องจำไว้ว่าความรับผิดชอบหลักของฉันคือการก้าวไปสู่สาเหตุของ บริษัท (ทำเงินให้มากที่สุดโดยเร็วที่สุด) ความบริสุทธิ์ทางเทคนิค เครื่องมือควรใช้งานได้สำหรับเรา ไม่ใช่เราสำหรับพวกเขา

ฉันรู้ว่าผู้คนไม่เห็นด้วย แต่ฉันคิดวิธีแก้ปัญหาสั้น ๆ นี้ หากคุณต้องการใช้แอตทริบิวต์ที่กำหนดเองเช่น "mine" เช่น:

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

จากนั้นคุณสามารถเรียกใช้รหัสนี้เพื่อให้วัตถุกลับมาเหมือน 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;
});

ข้อมูลจำเพาะ: สร้างตัวควบคุมกล่องข้อความ ASP.NET ซึ่งจัดรูปแบบข้อความโดยอัตโนมัติแบบไดนามิกตามคุณสมบัติ "DecimalSeparator" และ "ThousandsSeparator" โดยใช้ JavaScript


วิธีหนึ่งในการถ่ายโอนคุณสมบัติเหล่านี้จากตัวควบคุมไปยัง JavaScript คือให้ตัวควบคุมแสดงผลคุณสมบัติที่กำหนดเอง:

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

คุณสมบัติที่กำหนดเองนั้นสามารถเข้าถึงได้ง่ายโดย JavaScript และในขณะที่หน้าใช้องค์ประกอบที่มีคุณสมบัติที่กำหนดเองจะไม่ตรวจสอบความถูกต้องของการแสดงผลของหน้านั้นจะไม่ได้รับผลกระทบ


ฉันใช้วิธีการนี้เฉพาะเมื่อฉันต้องการเชื่อมโยงประเภทอย่างง่ายเช่นสตริงและจำนวนเต็มกับองค์ประกอบ HTML เพื่อใช้กับ JavaScript หากฉันต้องการทำให้องค์ประกอบ HTML ง่ายต่อการระบุฉันจะใช้ประโยชน์จากคุณสมบัติคลาสและรหัส

สำหรับแอปพลิเคชันเว็บที่ซับซ้อนฉันปล่อยแอตทริบิวต์ที่กำหนดเองไปทั่ว

สำหรับหน้าสาธารณะที่มากขึ้นฉันใช้แอตทริบิวต์ "rel" และถ่ายโอนข้อมูลทั้งหมดของฉันที่นั่นใน JSON แล้วถอดรหัสด้วย MooTools หรือ jQuery:

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

ฉันพยายามที่จะยึดติดกับแอตทริบิวต์ข้อมูล HTML 5 เมื่อเร็ว ๆ นี้เพียงเพื่อ "เตรียม" แต่มันยังไม่เกิดขึ้นตามธรรมชาติ

ฉันใช้ฟิลด์ที่กำหนดเองตลอดเวลาเช่น <ai = "" .... จากนั้นอ้างอิง i ด้วย jquery html ไม่ถูกต้องใช่ มันใช้งานได้ดีใช่

แอตทริบิวต์ที่กำหนดเองในความเห็นต่ำต้อยของฉันไม่ควรใช้เนื่องจากไม่ได้ตรวจสอบ คุณสามารถกำหนดคลาสจำนวนมากสำหรับองค์ประกอบเดียวเช่น:

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