কাস্টম বৈশিষ্ট্য - হ্যাঁ বা না?

Question

মূলত জাভাস্ক্রিপ্ট কোড ব্যবহারের জন্য কিছু অতিরিক্ত বিট ডেটা এম্বেড করার উদ্দেশ্যে, আমি এইচটিএমএল ট্যাগগুলিতে কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করে এমন লোকদের সম্পর্কে আমি আরও বেশি করে পড়ছি।

আমি কাস্টম অ্যাট্রিবিউটগুলি ব্যবহার করা একটি ভাল অনুশীলন এবং কিছু বিকল্প কী তা নিয়েও কিছু প্রতিক্রিয়া সংগ্রহ করার আশা করছিলাম।

দেখে মনে হচ্ছে এটি সত্যই সার্ভারের পাশ এবং ক্লায়েন্টের সাইড কোড উভয়ই সহজ করতে পারে তবে এটি ডাব্লু 3 সি অনুসারেও নয়।

আমাদের ওয়েব অ্যাপ্লিকেশনগুলিতে কি কাস্টম এইচটিএমএল বৈশিষ্ট্যগুলি ব্যবহার করা উচিত? কেন অথবা কেন নয়?

যারা কাস্টম বৈশিষ্ট্যগুলি একটি ভাল জিনিস বলে মনে করেন: তাদের ব্যবহার করার সময় কিছু জিনিস কী মনে রাখা উচিত?

যারা কাস্টম বৈশিষ্ট্যগুলি খারাপ জিনিস বলে মনে করেন: অনুরূপ কিছু অর্জন করতে আপনি কোন বিকল্প ব্যবহার করেন?

আপডেট: আমি বেশিরভাগই বিভিন্ন পদ্ধতির পিছনে যুক্তিতে আগ্রহী , পাশাপাশি কেন একটি পদ্ধতি অন্যর চেয়ে ভাল তাও উল্লেখ করি। আমি মনে করি আমরা সকলেই একই জিনিসটি সম্পাদন করতে 4-5 টি বিভিন্ন উপায়ে আসতে পারি। (লুকানো উপাদান, ইনলাইন স্ক্রিপ্ট, অতিরিক্ত ক্লাস, আইডির তথ্য পার্সিং ইত্যাদি)।

আপডেট 2: দেখে মনে হচ্ছে এইচটিএমএল 5 data-বৈশিষ্ট্যটির বৈশিষ্ট্যটির এখানে প্রচুর সমর্থন রয়েছে (এবং আমি সম্মত হতে চাইছি, এটি একটি দৃ solid় বিকল্পের মতো দেখাচ্ছে)। এখনও পর্যন্ত আমি এই পরামর্শের জন্য খণ্ডনের পথে তেমন কিছু দেখিনি। এই পদ্ধতির ব্যবহার সম্পর্কে চিন্তা করার কোনও সমস্যা / সমস্যা আছে কি? অথবা এটি কেবলমাত্র বর্তমান ডাব্লু 3 সি চশমার একটি 'ক্ষতিহীন' অবৈধতা?

Comments

সত্যি বলতে, আমার প্রাথমিক ভঙ্গি যে, তারা হন না যেমন একটি খারাপ জিনিস, যা বরং purists সঙ্গে বিতর্কিত হতে পারে। আমার মনে হচ্ছে এটিকে সঠিকভাবে ব্যাক আপ করার জন্য উপলভ্য সমস্ত বিকল্পের মূল্যায়ণ করা দরকার।

— পাওলো বার্গান্টিনো

এটি করার জন্য আপনার কেবলমাত্র কিছু পাল্টা উদাহরণ [গুলি] দরকার হতে পারে: আপনি কী প্রয়োগ করতে চাইছেন, কাস্টম বৈশিষ্ট্যের সাথে এটি করা কীভাবে সুবিধাজনক এবং কেন সেই সমাধানটি কাস্টম বৈশিষ্ট্য ছাড়াই অন্য সমাধানগুলির চেয়ে আরও ভাল এবং খারাপ নয়।

— ChrisW

@ ক্রিসডব্লিউ আমি বেশিরভাগ আগ্রহের চেয়ে জিজ্ঞাসা করছি, কোনও নির্দিষ্ট প্রয়োগের বাইরে নয়।

— টিএম

ওয়েল, ক্লায়েন্টের পক্ষের ডেটা পাওয়ার জন্য প্রচুর বিকল্প রয়েছে: লুকানো ইনপুট ক্ষেত্র, গোপন সংজ্ঞা তালিকাগুলি, ক্লাস, মেটাডেটা প্লাগইনস, সমস্ত ডেটা ম্যাপিং পৃথকভাবে একটি বিশাল জাভাস্ক্রিপ্ট অভিধান (অবজেক্ট) থাকা, কাস্টম বৈশিষ্ট্য, ডেটা অ্যাট্রিবিউটস ( এইচটিএমএল 5) ইত্যাদি I এই পোস্টটি শেষ পর্যন্ত আমাকে এই লেখা শুরু করতে পেলেন । :) 2010 এর আগে কিছু সময় করা উচিত

— পাওলো বার্গান্টিনো

@ পাওলো আপনি কেবল এটি বলতে পারবেন না যে আপনি আমাদের লিঙ্কটি না দিয়ে এই প্রশ্নের উত্তর দিয়ে একটি প্রবন্ধ লিখেছিলেন। ভালো না.

— কনেল

Answer 1

এইচটিএমএল 5 স্পষ্টভাবে কাস্টম চারিত্রিক বৈশিষ্ট্য আছে যেগুলো দিয়ে শুরু পারবেন data। সুতরাং, উদাহরণস্বরূপ, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>বৈধ। যেহেতু এটি আনুষ্ঠানিকভাবে একটি স্ট্যান্ডার্ড দ্বারা সমর্থিত, তাই আমি মনে করি এটি কাস্টম বৈশিষ্ট্যের জন্য সেরা বিকল্প। এবং হ্যাকগুলির সাথে আপনাকে অন্যান্য বৈশিষ্ট্যগুলি ওভারলোড করার প্রয়োজন হয় না, যাতে আপনার এইচটিএমএল অর্থপূর্ণ থাকতে পারে।

সূত্র: http://www.w3.org/TR/html5/dom.html#e এম্বেডিং- কাস্টম- নন -ভিজিবল- ডেটা- উইথ- ডেটা- * - অংশীদারি

Comments

এটি একটি ভাল পদ্ধতির .. তবে আমার সন্দেহ হয় এটি আপনার কাজ করবে আইই 6 এবং অন্যান্য পুরানো ব্রাউজারগুলিকে সমর্থন করতে।

— cllpse

আমি নিশ্চিত যে এটি পুরানো ব্রাউজারগুলির সাথে কাজ করে; বৈশিষ্ট্যগুলি ডিওমে যুক্ত করা হয়, যেখানে আপনি এগুলি অ্যাক্সেস করতে পারেন।

— Ms2ger

এটি এইচটিএমলেমেটনে getAttribute () পদ্ধতি ব্যবহার করে সমস্ত ব্রাউজারের সাথে পুরোপুরি ভাল কাজ করে। । প্লাস, যেমন HTML5 এর ডেটা সেটটি সমর্থন বৃদ্ধি আপনি সহজেই যে যোগ করতে পারেন

— আ জ ম

@ চাক আপাতদৃষ্টিতে আপনি ডক্টইপিই : রডসডট.com / html/ … এ বৈশিষ্ট্য যুক্ত করতে পারেন - আমি মনে করি এটি ভাল ধারণা নয় তবে এটি মানসম্মত বলে মনে হয়।

— মাইকেল স্টাম

@ ওয়াহনফ্রিডেন: w3.org/TR/REC-html40/intro/sgmltut.html#idx-attribute-8 যা অনুমোদিত, মান সম্মত পদ্ধতি। যা এখানে বর্ণিত এবং প্রদর্শিত হয়েছে: রডসডট ডটকম / html/… যেমনটি অন্যরা পোস্ট করেছেন As

— rdivalbiss

Answer 2

এখানে এমন একটি কৌশল যা আমি সম্প্রতি ব্যবহার করছি:

<div id="someelement">

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

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

মন্তব্য-অবজেক্টটি প্যারেন্ট এলিমেন্টের সাথে সম্পর্কযুক্ত (যেমন # সামোলেট)।

এখানে পার্সারটি দেওয়া হয়েছে: 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/>), যেহেতু মন্তব্যগুলি অবশ্যই উপাদানটির ডেটা হিসাবে বিবেচনা করার জন্য উপাদানটির মধ্যে থাকা উচিত ।

---

সম্পাদনা :

এই কৌশলটির উল্লেখযোগ্য সুবিধা:

• কার্যকর করা সহজ
• কি না বাতিল এইচটিএমএল / এক্সএইচটিএমএল
• ব্যবহার / বুঝতে সহজ (বেসিক JSON স্বরলিপি)
• বিবাদী এবং বেশিরভাগ বিকল্পের তুলনায় শব্দার্থগতভাবে ক্লিনার

---

পার্সার কোডটি এখানে ( উপরের 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;

    };

})();

Comments

কৌতূহলের বাইরে আপনি স্ব-সমাপনী ট্যাগগুলির জন্য কোন পদ্ধতিটি ব্যবহার করেন? আমার সাধারণত <ইনপুট> উপাদানগুলিতে (ক্লায়েন্ট-সাইড বৈধকরণের নিয়মে সহায়তা করার জন্য) এর মতো কিছু ব্যবহার করতে হবে। এই পরিস্থিতিতে আপনি কোন বিকল্প গ্রহণ করবেন?

— টিএম

আমি সম্ভবত একটি অনুরূপ কৌশল ব্যবহার করব, "প্যারেন্টনোড" -তে মন্তব্য করা ডেটার পরিবর্তে এটি মন্তব্যের "পূর্ববর্তী শিবলিং" এর সাথে টাই করতে পারে ... তারপরে আপনি <ইনপুট /> এর পরে অবিলম্বে মন্তব্য করতে পারেন এবং এটি হবে কাজ: <ইনপুট /> <! - {তথ্য: 123} ->

— জেমস

কারও এটিকে একটি jquery প্লাগইন তৈরি করা উচিত

— সানডাউনে

মন্তব্যগুলি কিছু না ভেঙে পরিবর্তন / মুছতে সক্ষম হওয়া উচিত। এই হল ব্যপার. তাই মার্কআপ বা কোডকে গুরুত্বপূর্ণ কোনও কিছু মন্তব্যে রাখাই বাজে ধারণা। ভবিষ্যতের বিকাশকারীরা সহজেই ভাবতে পারে যে তারা মন্তব্য এবং সেগুলি মুছে ফেলে। আমাদের কাছে ইতিমধ্যে এই প্রশ্নের আসল সমাধান রয়েছে: "ডেটা-" দিয়ে কাস্টম বৈশিষ্ট্যগুলি উপসর্গযুক্ত। এই পদ্ধতির কখনও ব্যবহার করা উচিত নয়।

— এমজিউইউইন

আমাকে @ এমজিওউয়েনের বক্তব্যটি শক্তিশালী করতে দিন: কার্যকারিতা যুক্ত করার জন্য মন্তব্যগুলি ব্যবহার করবেন না। বিশেষত এইচটিএমএলে। আপনি কি মিনিফায়ার ব্যবহার করছেন না? আপনি আপনার কোডটি ভঙ্গ না করে মন্তব্যগুলি সরাতে পারবেন না। এর অর্থ হ'ল আপনি আর মন্তব্য যুক্ত করতে পারবেন না।

— অলিভিক্টর

Answer 3

আপনি যদি আপনার পৃষ্ঠার জন্য কোনও স্কিমা নির্দিষ্ট করে থাকেন তবে আপনি কোনও বৈশিষ্ট্য তৈরি করতে পারেন।

উদাহরণ স্বরূপ:

AddThis

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

ফেসবুক (এমনকি ট্যাগ)

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

Answer 4

কাস্টম বৈশিষ্ট্যগুলির ব্যবহার এড়ানোর সহজ উপায় হ'ল বিদ্যমান বৈশিষ্ট্যগুলি ব্যবহার করা।

অর্থবহ, প্রাসঙ্গিক শ্রেণীর নাম ব্যবহার করুন।
উদাহরণস্বরূপ, বই এবং সিডির প্রতিনিধিত্ব করার জন্য : type='book'এবং এর মতো কিছু করুন type='cd'। ক্লাস অনেক প্রতিনিধিত্বমূলক কি কিছু ভাল হয় IS ।

যেমন class='book'

আমি অতীতে কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করেছি, তবে সত্যি বলতে কী, যদি আপনি বিদ্যমান বৈশিষ্ট্যগুলি শব্দার্থগতভাবে অর্থবহ উপায়ে ব্যবহার করেন তবে তাদের জন্য সত্যই দরকার নেই।

আরও দৃ concrete় উদাহরণ দেওয়ার জন্য, ধরুন আপনার কাছে একটি সাইট রয়েছে যা বিভিন্ন ধরণের স্টোরগুলিতে লিঙ্ক দেয়। আপনি নিম্নলিখিত ব্যবহার করতে পারেন:

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

সিএসএস স্টাইলিং ক্লাস ব্যবহার করতে পারে যেমন:

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

উপরের উদাহরণে আমরা দেখতে পাচ্ছি যে উভয়ই স্টোরের লিঙ্ক (সাইটের অন্য সম্পর্কিত সম্পর্কিত লিঙ্কগুলির বিপরীতে) এবং একটি সিডি স্টোর এবং অন্যটি একটি বইয়ের দোকান।

Comments

ভাল কথা, তবে ন্যায়বিচারের জন্য, "টাইপ" কেবলমাত্র নির্দিষ্ট ট্যাগগুলিতে বৈধ হয় এবং যখন এটি একটি বৈধ বৈশিষ্ট্য হয় তবে এর মধ্যে বৈধ মানগুলির একটি তালিকা থাকে, সুতরাং আপনি এখনও সত্যই ডাব্লু 3 সি অনুগত নন।

— টিএম

আমার বক্তব্যটি এটির জন্য আপনার টাইপ ট্যাগ ব্যবহার করা উচিত নয়। অতএব আপনি যদি ছিলেন ... তবে আপনার উচিত ... আমি আরও পরিষ্কার করার জন্য সম্পাদনা করব

— জোনাথন ফিঙ্গল্যান্ড

আমি কিছু "কোয়ালিফায়ার-" এর সাথে কিছু সংযুক্ত করে স্বাদের সাথে আমার "শ্রেণি" বৈশিষ্ট্যগুলি তৈরি করার প্রবণতা রাখি। কেবলমাত্র লেআউট সম্পর্কিত ডিভগুলির জন্য, আমি এটির শ্রেণিটি "লেআউট-এক্সএক্সএক্সএক্স", বা একটি গুরুত্বপূর্ণ অংশকে ঘিরে এমন কোনও অভ্যন্তরীণ ডিভের জন্য চাই যেমন বই বা স্টোরের মতো আমার কাছে একটি সামগ্রী-পুস্তক, বা সামগ্রী-স্টোর থাকত । তারপরে আমার জাভাস্ক্রিপ্টে আমার একটি ফাংশন রয়েছে যা আমি যা খুঁজছি তার উপর ভিত্তি করে ট্যাগগুলিতে এই জিনিসগুলিকে প্রিপেন্ড করে। এটি আমার জন্য জিনিসগুলি পরিষ্কার এবং সংগঠিত রাখতে সহায়তা করে তবে একটি নির্দিষ্ট স্তরের শৃঙ্খলা এবং প্রাক-সংগঠনের প্রয়োজন।

— এপি-ইনগো

@ জোনাথন ডাবল ক্লাসের জিনিসটি 'মান' না জানা ক্ষেত্রে বাদ দিয়ে দুর্দান্ত কাজ করে। উদাহরণস্বরূপ, যদি এটি কোনও ধরণের পূর্ণসংখ্যা আইডি হয় তবে আমরা প্রতিটি সম্ভাব্য মামলার জন্য খুব ভালভাবে নির্বাচন করতে পারি না। তারপরে আমরা শ্রেণিবদ্ধ বৈশিষ্ট্যটিকে ম্যানুয়ালি পার্স করতে চলেছি যা অবশ্যই কার্যকরভাবে কার্যকর, তবে কোডে যেমন পরিষ্কার নয়, এবং কিছু ক্ষেত্রে এটি খুব ধীর হতে পারে (পার্স করার জন্য অনেক প্রার্থীর উপাদান থাকলে)।

— টিএম

দুঃখের বিষয়, একই সাথে দুটি ক্লাসের জন্য সিএসএস নির্বাচক লেখা (। অনুপস্থিত ফাঁকা লক্ষ্য করুন) আইই তে কাজ করে না। এটি যদিও ফায়ারফক্স এবং অন্যান্য ব্রাউজারগুলিতে কাজ করে। তবুও, ক্লাস ব্যবহার করা আপনার মার্কআপে অতিরিক্ত শব্দার্থক অর্থ এম্বেড করার দুর্দান্ত উপায়

— নিটল

Answer 5

ডোমে ডেটা এম্বেড করুন এবং 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!');

Comments

কাস্টম অ্যাট্রিবিউটগুলি নির্দিষ্ট করার কোনও W3C অনুমোদিত উপায় থাকলে শ্রেণি বৈশিষ্ট্যটিকে দূষিত করা সম্ভবত আপনি কেন ভোটে নামলেন।

— rdivalbiss

ক্লাসটি corrupting শুধুমাত্র এক উপায়ে প্লাগইন ব্যবহার করতে; এটি একমাত্র উপায় নয়।

— antony.trupe

আপনার কেন ভোট পড়েছে তার আরেকটি কারণ হ'ল এমন প্লাগইন প্রস্তাব করা হচ্ছে যেখানে কোনও প্লাগইন লাগবে না।

— meandre

Answer 6

আমি কোনও কিছু ভাঙ্গা বা আপনার নাম স্থান বাড়ানো ছাড়া বিদ্যমান এক্সএইচটিএমএল বৈশিষ্ট্যগুলি ব্যবহার করতে কোনও সমস্যা দেখছি না। আসুন একটি ছোট উদাহরণ দেখুন:

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

অতিরিক্ত বৈশিষ্ট্য ছাড়াই কীভাবে কিছু তথ্যতে অতিরিক্ত তথ্য যুক্ত করবেন? নীচের মত অন্য ট্যাগ যুক্ত সম্পর্কে কি?

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

এটি আপনার পছন্দের একটি ভাল সংজ্ঞায়িত আইডি / এক্সটেনশান "_ এক্সটেন্ডেড" এর মাধ্যমে এবং শ্রেণিবিন্যাসের অবস্থানের দ্বারা সম্পর্কটিকে রাখে। আমি প্রায়শই jQuery এর সাথে এবং প্রকৃতপক্ষে কৌশলগুলির মতো Ajax ব্যবহার না করে এই পদ্ধতিকে ব্যবহার করি।

Comments

এর মতো নেস্টেড ট্যাগ যুক্ত করার সমস্যাটি হ'ল এটি খুব জটিল এবং কুরুচিপূর্ণ সার্ভারসাইড কোড (জেএসপি / এএসপি / ডিটিএল ইত্যাদি)

— টিএম তৈরি করে।

Answer 7

বরং। পরিবর্তে এই জাতীয় কিছু চেষ্টা করুন:

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

Comments

তাই আপনি ডায়নামিক পৃষ্ঠাগুলির জন্য আপনার ডকুমেন্ট জুড়ে অনেকগুলি অতিরিক্ত স্ক্রিপ্ট ট্যাগ লিখতে পছন্দ করেন? ক্লায়েন্টের পাশে তথ্য যুক্ত হওয়ার সময় আমি ম্যানুয়াল জাভাস্ক্রিপ্ট অ্যাসাইনমেন্টগুলি ব্যবহার করব, তবে এই সমস্যাটি মূলত সার্ভারে কী রেন্ডার করতে হয় তা নিয়ে। এছাড়াও, jQuery.data () আপনার পদ্ধতির চেয়ে অনেক ভাল।

— টিএম

কার্যকারিতা প্রদর্শনের জন্য উপরের উত্তরটি একটি কাঠামো-স্বতন্ত্র, বেলার্ড উদাহরণ। কোডটি বেশ বিছিন্ন করার জন্য আপনি এর সংক্ষেপে সহজেই প্রসারিত করতে পারেন। যেমন, <div id = "foo" /> <div id = "bar" /> <div id = "baz" /> <স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> xtrnlFnc ({foo: 'w00 h00', বার : 'ইত্যাদি', বাজ: 3.14159}); </script> আপনি যদি jQuery ব্যবহার করেন (তবে এটি যে আপনার মূল প্রশ্নে এটি উল্লেখ করেছেন তা নয়), ডেটা পদ্ধতিটি ব্যবহার করুন - এটি তার জন্য - যদি তা না হয় তবে আর্কিটেকচারাল স্তরগুলির মধ্যে ডেটা পাস করা ইনলাইন স্ক্রিপ্ট ট্যাগগুলির একদম বৈধ ব্যবহার।

— আনন

এটি অবশ্যই একটি সুস্পষ্ট, বৈধ বিকল্প। আমার মতে এটি কাস্টম অ্যাট্রিবিউট ব্যবহার করে না এমন প্রচুর বিকল্পের তুলনায় কোডকে আরও বিশৃঙ্খলাবদ্ধ করে। এবং কেবল স্পষ্ট করে বলার জন্য, আমি ঝগড়া বা অভদ্র হওয়ার চেষ্টা করছি না, আপনি কেন এই পদ্ধতিটিকে পছন্দ করেন সেজন্য আমি আপনার কিছু যুক্তি বের করার চেষ্টা করছি। আপনি একটি বিকল্প সরবরাহ করেছেন তবে প্রশ্নটি আসলে এটি নয়।

— টিএম

আমি মনে করি না এই ব্রাউজারগুলির ব্রেকিং ব্রাউজারগুলিতে কোনও সমস্যা আছে। মাইক্রোসফ্ট এএসপি.এনইটি পৃষ্ঠাগুলিতে পছন্দসই পদ্ধতি হিসাবে এই সঠিক প্রক্রিয়াটি ব্যবহার করে। (সার্ভারের দিকে RegisterExpandoAtribute কল করে)। প্রশ্নটি ক্লায়েন্ট এবং সার্ভারের দিকে নয় বলে মনে হচ্ছে তবে সার্ভারের দিক থেকে এই সমস্ত পন্থা (হওয়া উচিত?) বিমূর্ত করা যেতে পারে।

— অ্যাড্রিয়ান

এই পদ্ধতির পক্ষে: - এটি বৈধ মার্কআপ উত্পাদন করে (এমনকি পুরানো ব্রাউজার / স্পেসের অধীনে)। - এটি ডেটার অভিপ্রায়টি (জেএস দ্বারা গ্রাস করা) পরিষ্কার করে তোলে। - এটি অন্যান্য বৈশিষ্ট্যগুলির (যেমন মন্তব্য হিসাবে) চতুর ব্যবহার না করে উপাদানটির সাথে একাত্ম হয়। - এটি বিশেষ বিশ্লেষণ প্রয়োজন হয় না। সার্ভার-সাইড দৃষ্টিকোণ থেকে, আপনি এটি আরপিসির মতো বলে ভাবতে পারেন।

— স্টিমার 25

Answer 8

আমি কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করছি না, কারণ আমি এক্সএইচটিএমএল আউটপুট করছি, কারণ আমি চাই তৃতীয় পক্ষের সফ্টওয়্যার দ্বারা ডেটা মেশিন-পঠনযোগ্য হওয়া উচিত (যদিও, আমি চাইলে এক্সএইচটিএমএল স্কিমাটি প্রসারিত করতে পারি)।

কাস্টম বৈশিষ্ট্যের বিকল্প হিসাবে, বেশিরভাগ ক্ষেত্রে আমি আইডি এবং শ্রেণীর বৈশিষ্ট্যগুলি (যেমন অন্যান্য উত্তরে উল্লিখিত হিসাবে) যথেষ্ট খুঁজে পাচ্ছি।

এছাড়াও, এটি বিবেচনা করুন:

• অতিরিক্ত ডেটা যদি মানব-পঠনযোগ্য পাশাপাশি মেশিন-পঠনযোগ্য হতে হয় তবে কাস্টম বৈশিষ্ট্যগুলির পরিবর্তে এটি (দৃশ্যমান) এইচটিএমএল ট্যাগ এবং পাঠ্য ব্যবহার করে এনকোড করা দরকার।

• যদি এটি মানব পঠনযোগ্য হওয়ার প্রয়োজন না হয় তবে সম্ভবত এটি অদৃশ্য এইচটিএমএল ট্যাগ এবং পাঠ্য ব্যবহার করে এনকোড করা যেতে পারে ।

কিছু লোক ব্যতিক্রম করে: তারা কাস্টম বৈশিষ্ট্যগুলিকে মঞ্জুরি দেয়, যা রান-টাইমে ক্লায়েন্টের পাশে জাভাস্ক্রিপ্ট দ্বারা DOM এ যুক্ত হয়। তারা বিবেচনা করে এটি ঠিক আছে: কারণ কাস্টম বৈশিষ্ট্যগুলি কেবল রান-টাইমে ডোমটিতে যুক্ত হয়, এইচটিএমএলে কোনও কাস্টম বৈশিষ্ট্য নেই।

Answer 9

আমরা একটি ওয়েব-ভিত্তিক সম্পাদক তৈরি করেছি যা এইচটিএমএলের একটি উপসেট বোঝে - খুব কঠোর উপসেট (এটি মেল ক্লায়েন্টদের দ্বারা প্রায় সর্বজনীনভাবে বোঝে)। আমাদের <td width="@INSWIDTH_42@">ডাটাবেসের মতো জিনিস প্রকাশ করতে হবে, তবে আমাদের এটি ডোমটিতে থাকতে পারে না, অন্যথায় ব্রাউজারটি যেখানে সম্পাদক চালায়, ফ্রিক আউট হয়ে যায় (বা কাস্টম বৈশিষ্ট্যের তুলনায় ফ্রিক আউট হওয়ার সম্ভাবনা বেশি) । আমরা ড্র্যাগ-এন্ড-ড্রপ চেয়েছিলাম, সুতরাং এটি ডিউমে নিখুঁতভাবে স্থাপন করা যেমন জ্যাকুরির মতো ছিল .data()(অতিরিক্ত তথ্য সঠিকভাবে অনুলিপি করা হয়নি)। যাত্রায় যাত্রা চালানোর জন্য আমাদের অতিরিক্ত অতিরিক্ত ডেটাও দরকার ছিল .html()। শেষ পর্যন্ত আমরা <td width="1234" rs-width="@INSWIDTH_42@">সম্পাদনা প্রক্রিয়া চলাকালীন ব্যবহারে স্থির হয়েছি এবং তারপরে যখন আমরা এটি সমস্ত পোস্ট করি তখন আমরা সরিয়ে widthএবং পুনরায় অনুসন্ধান এবং বিনষ্ট করি s/rs-width=/width=/g।

প্রথমে এই ছেলেটির বেশিরভাগটিই এই ইস্যুটির বৈধতা-নাজি ছিল এবং আমাদের কাস্টম বৈশিষ্ট্যটি এড়াতে সবকিছু চেষ্টা করেছিল, কিন্তু শেষ পর্যন্ত যখন তা প্রমাণিত হয় তখন অন্য সমস্ত কিছুই আমাদের সমস্ত প্রয়োজনের জন্য কাজ করে না বলে মনে হয়। এটি যখন তখন বুঝতে পেরেছিল যে কাস্টম বৈশিষ্ট্যটি কোনও ইমেলের মধ্যে কখনই উপস্থিত হবে না আমরা আমাদের অতিরিক্ত ডেটাগুলিতে এনকোডিং করার বিষয়টি বিবেচনা করি নি class, তবে সিদ্ধান্ত নিয়েছি যে এটি দুটি দুষ্টতার চেয়ে বৃহত্তর।

ব্যক্তিগতভাবে, আমি জিনিসগুলি পরিষ্কার এবং বৈধকরণকারীদের পাস করার পছন্দ করি ইত্যাদি পছন্দ করি, তবে একজন কোম্পানির কর্মচারী হিসাবে আমার মনে রাখতে হবে যে আমার প্রাথমিক দায়িত্ব কোম্পানির কারণকে অগ্রসর করছে (যত তাড়াতাড়ি সম্ভব অর্থোপার্জন করা), আমার অহঙ্কারী ইচ্ছার চেয়ে নয় প্রযুক্তিগত বিশুদ্ধতা। সরঞ্জাম আমাদের জন্য কাজ করা উচিত; তাদের জন্য আমাদের নয়।

Answer 10

আমি জানি লোকেরা এর বিপক্ষে, তবে আমি এর জন্য একটি সুপার শর্ট সমাধান নিয়ে এসেছি। আপনি যদি "খনি" এর মতো একটি কাস্টম বৈশিষ্ট্য ব্যবহার করতে চান তবে উদাহরণস্বরূপ:

<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;
});

Answer 11

স্পেস: জাভাস্ক্রিপ্ট ব্যবহার করে "ডেসিমালসেপেটর" এবং "হাজারে সেপারেটর" বৈশিষ্ট্য অনুসারে একটি এএসপি.নেট টেক্সটবক্স নিয়ন্ত্রণ তৈরি করুন যা গৌণিকভাবে এর পাঠ্যটিকে একটি সংখ্যা হিসাবে স্বতঃ-বিন্যাস করে।


এই বৈশিষ্ট্যগুলি নিয়ন্ত্রণ থেকে জাভাস্ক্রিপ্টে স্থানান্তর করার একটি উপায় হ'ল নিয়ন্ত্রণটি কাস্টম বৈশিষ্ট্যগুলি সরবরাহ করে:

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

কাস্টম বৈশিষ্ট্যগুলি জাভাস্ক্রিপ্ট দ্বারা সহজেই অ্যাক্সেসযোগ্য। এবং কাস্টম বৈশিষ্ট্যযুক্ত উপাদান ব্যবহার করে কোনও পৃষ্ঠা বৈধ হবে না , সেই পৃষ্ঠার রেন্ডারিং প্রভাবিত হবে না।


আমি শুধুমাত্র এই পদ্ধতির ব্যবহার যখন আমি স্ট্রিং এবং JavaScript সাথে ব্যবহারের জন্য HTML উপাদান পূর্ণসংখ্যার মত সহজ ধরনের সংযুক্ত করতে চাইলে। আমি যদি এইচটিএমএল উপাদানগুলিকে চিহ্নিত করা সহজ করতে চাই তবে আমি শ্রেণি এবং আইডি বৈশিষ্ট্যগুলি ব্যবহার করব ।

Answer 12

জটিল ওয়েব অ্যাপ্লিকেশনগুলির জন্য, আমি সমস্ত জায়গাতেই কাস্টম বৈশিষ্ট্যগুলি ফেলে দিই।

আরও জনসমক্ষে প্রকাশিত পৃষ্ঠাগুলির জন্য আমি "rel" বৈশিষ্ট্যটি ব্যবহার করি এবং আমার সমস্ত ডেটা এখানে JSON এ ফেলে দিন এবং তারপরে এটি MooTools বা jQuery দিয়ে ডিকোড করুন:

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

আমি সম্প্রতি "প্রস্তুত" করতে এইচটিএমএল 5 ডেটা অ্যাট্রিবিউট দিয়ে আটকে থাকার চেষ্টা করছি, তবে এটি এখনও প্রাকৃতিকভাবে আসে নি।

Answer 13

আমি সর্বদা কাস্টম ক্ষেত্রগুলি ব্যবহার করি উদাহরণস্বরূপ <ai = "" .... তারপরে jquery সহ আমি রেফারেন্স করব। অবৈধ এইচটিএমএল, হ্যাঁ। হ্যাঁ, এটি ভাল কাজ করে।

Comments

এখানে কিছু অনুপস্থিত মনে হচ্ছে। আপনার ট্যাগ এখানে সম্পূর্ণ ছিল?

— স্টুয়ার্ট সিগেলার

কীভাবে কেউ এটি বুঝতে পারে? আপনার উত্তরটি সম্পূর্ণ করুন।

— রাহুল রাজ

Answer 14

আমার নম্র মতে কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করা উচিত নয় কারণ তারা বৈধতা দেয় না। তার বিকল্প হিসাবে, আপনি একক উপাদানের জন্য অনেকগুলি ক্লাস সংজ্ঞায়িত করতে পারেন:

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

Comments

ব্যক্তিগতভাবে, আমি মনে করি এটি একটি ভয়ানক উদাহরণ। আপনার ক্লাসের নামগুলি এটি কীভাবে দেখাচ্ছে তা নির্ধারণ করে, এটি উদ্দেশ্য নয়। আপনি যখন একই ধরণের সমস্ত ডিভগুলি পরিবর্তন করতে চান তা সম্পর্কে চিন্তা করুন ... আপনাকে গিয়ে সেগুলি সমস্ত স্প্যান -11 বা এর মতো করে পরিবর্তন করতে হবে। ক্লাসগুলি এটি কী তা নির্ধারণ করা উচিত। স্টাইল

— শিটগুলিতে

আপনি কেবল একটি পতাকা ছাড়াও নির্দিষ্ট করার জন্য এই পদ্ধতিটি কীভাবে ব্যবহার করবেন? আমি আপনার অবস্থানের সাথে একমত হই এবং আমি কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করি না (যদিও আমি এটি বিবেচনা করছি)। কী / মান জুটির সুবিধা হ'ল অন্য শ্রেণিটি যুক্ত করার চেয়ে কিছুটা বেশি সুবিধাজনক বলে মনে হয়।

— টিএম

@ জোনাথন ফিংল্যান্ড: যদি কম্পাস ব্যবহার করা হয় তবে আপনার এখানে শ্রেণীর নাম নির্ধারণ করার দরকার নেই। আপনি কেবল তাদের .sass ফাইলটিতে নির্দিষ্ট করতে পারেন এবং আপনার মার্কআপটি পরিষ্কার হবে।

— অ্যালান হাগই আলাভি

@ জোনাথন ফিংল্যান্ড, classগুণটি অবশ্যই "চেহারা" জন্য সংরক্ষিত নয়। আর একটি ব্যবহার হ'ল "ব্যবহারকারী এজেন্টদের সাধারণ উদ্দেশ্য প্রক্রিয়াজাতকরণ"। এর মধ্যে স্পিকারটি

— npup

@ এনপআপ: উক্তিগুলির আকর্ষণীয় পছন্দ। আমি এক বছর আগে বলেছি, স্টাইল শিটগুলি কীভাবে সেই জিনিসগুলি দেখতে হবে তা নির্ধারণ করে (যেমন শৈলীর বৈশিষ্ট্যটি আমি যুক্ত করব) এবং শ্রেণীর বৈশিষ্ট্যটি উপাদানটির উদ্দেশ্য নির্ধারণ করতে ব্যবহৃত হয়। এটি হ'ল এটি বিশেষত এটি কী তা সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়, এবং এটি কীভাবে দেখায় তা নয়। আমি মনে করি আমি যা বলেছিলাম তা আপনি সহজেই ভুল-পঠন করতে পারেন, যতক্ষণ না আমি বলতে পারি আমরা চুক্তিতে রয়েছি।

— জোনাথন ফিঙ্গল্যান্ড