jQuery ডেটা বনাম অ্যাটার?

Question

মধ্যে ব্যবহার পার্থক্য কি $.dataএবং $.attrযখন ব্যবহার data-someAttribute?

আমার বোধগম্যতা এটি ডম- $.dataর মধ্যে $.cacheনয়, jQuery- এর মধ্যে সঞ্চিত । অতএব, যদি আমি $.cacheডেটা সঞ্চয় করার জন্য ব্যবহার করতে চাই তবে আমার ব্যবহার করা উচিত $.data। আমি যদি এইচটিএমএল 5 ডেটা-বৈশিষ্ট্য যুক্ত করতে চাই তবে আমার ব্যবহার করা উচিত $.attr("data-attribute", "myCoolValue")।

Comments

দয়া করে এটি পড়ুন: ফোরাম.jquery.com/topic/when-to-use-attr-vs-data

— Baz1nga

@Zz বাদে আসলেই প্রশ্নের উত্তর বলে মনে হচ্ছে না ...?

— sdleihssirhc

আসলে এটি পরোক্ষভাবে করে। attr()ব্যবহার করে data()নিরাপদ থাকা অবস্থায় কোনও বস্তুর সাথে সংযুক্তি মেমরি ফাঁস হতে পারে (কমপক্ষে আইই তে) । তিনি তার জবাবে এ বিষয়ে ইঙ্গিত করেছেন যদিও তিনি স্পষ্টভাবে বাইরে এসে তা বলে না। JQuery ডক্স সম্পর্কে আরও তথ্য ("অতিরিক্ত নোটগুলি দেখুন"): api.jquery.com/attr

— কেন

@ জন বি, শুধু এফওয়াইআই (যদিও এটি পুরানো), এর ডেটা অ্যাট্রিবিউটটি data-someAttributeঅবৈধ; অনুমান অনুযায়ী, কেবল ছোট হাতের অনুমতি দেওয়া হয়। আপনি বড় আকারের অক্ষর ব্যবহার করে অদ্ভুত সমস্যার মধ্যে চলে যাবেন।

— কেন

@ অ্যাড্রিয়েনবি অনেকের রেফারেন্সগুলি অনুসন্ধানের মাধ্যমে সহজেই পাওয়া যায়, তবে যেহেতু আমি বিরক্ত, তাই আপনি এখানে যান: stackoverflow.com/a/22753630/84473

— কেন

Answer 1

আপনি যদি সার্ভার থেকে কোনও ডিওএম এলিমেন্টে ডেটা পাঠাচ্ছেন তবে আপনার এলিমেন্টটিতে ডেটা সেট করা উচিত:

<a id="foo" data-foo="bar" href="#">foo!</a>

এরপরে .data()jQuery ব্যবহার করে ডেটা অ্যাক্সেস করা যায়:

console.log( $('#foo').data('foo') );
//outputs "bar"

যাইহোক আপনি যখন jQuery ডেটা ব্যবহার করে কোনও ডিওএম নোডে ডেটা সঞ্চয় করেন তখন ভেরিয়েবলগুলি নোড অবজেক্টে সংরক্ষণ করা হয় । এটি জটিল বস্তু এবং রেফারেন্সগুলিকে নোড এলিমেন্টে ডেটা সংরক্ষণ করার হিসাবে একটি অ্যাট্রিবিউট হিসাবে স্ট্রিংয়ের মানগুলিকে সামঞ্জস্য করতে পারে।

_{উপরে থেকে আমার উদাহরণ অবিরত:}

$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

এছাড়াও, ডেটা অ্যাট্রিবিউটগুলির জন্য নামকরণের সম্মেলনে কিছুটা গোপন "গোটচা" থাকে:

_{এইচটিএমএল:}

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

_{জাতীয়:}

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

হাইফেনেটেড কীটি এখনও কাজ করবে:

_{এইচটিএমএল:}

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

_{জাতীয়:}

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

তবে ফিরে আসা বস্তুর .data()হাইফেনেটেড কী সেট থাকবে না:

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

এটি এই কারণেই আমি জাভাস্ক্রিপ্টে হাইফেনেটেড কী এড়ানো পরামর্শ দিই।

এইচটিএমএলের জন্য, হাইফেনেটেড ফর্মটি ব্যবহার করা চালিয়ে যান। এইচটিএমএল বৈশিষ্ট্যাবলী হওয়া ASCII-lowercased স্বয়ংক্রিয়ভাবে পেতে অনুমিত হয় , তাই <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>এবং <dIv DaTa-FoObAr></DiV>হয় অনুমিত অভিন্ন হিসাবে গণ্য করা হবে, কিন্তু সবচেয়ে ভালো সামঞ্জস্যের জন্য ছোট হাতের ফর্ম পছন্দের দিতে হবে।

.data()যদি মান কোন স্বীকৃত ধরণের সাথে মেলা পদ্ধতি এছাড়াও কিছু মৌলিক স্বয়ংক্রিয় ঢালাই সম্পন্ন করবেন

_{এইচটিএমএল:}

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

_{জাতীয়:}

$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

এই স্ব-কাস্টিং ক্ষমতা উইজেট এবং প্লাগইনগুলি ইনস্ট্যান্ট করার জন্য খুব সুবিধাজনক:

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

যদি আপনার অবশ্যই স্ট্রিং হিসাবে আসল মান থাকতে পারে তবে আপনাকে ব্যবহার করতে হবে .attr():

_{এইচটিএমএল:}

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

_{জাতীয়:}

$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

_{এটি একটি স্বীকৃত উদাহরণ ছিল। রঙের মানগুলি সংরক্ষণ করার জন্য, আমি সংখ্যাসূচক হেক্স স্বরলিপি ব্যবহার করতাম (যেমন 0xABC123), তবে এটি লক্ষণীয় যে হেক্সটি 1.7.2 এর আগে jQuery সংস্করণগুলিতে ভুলভাবে পার্স করা Numberহয়েছিল এবং jQuery 1.8 আরসি 1 হিসাবে আর পার্স করা হয়নি ।}

jQuery 1.8 আরসি 1 অটো-কাস্টিংয়ের আচরণ পরিবর্তন করেছে । আগে, যে কোনও ফর্ম্যাট যা বৈধ উপস্থাপনা ছিল তাতে Numberকাস্ট করা হবে Number। এখন, সংখ্যাসূচক মানগুলি কেবল স্বতঃ-কাস্ট হয় যদি তাদের প্রতিনিধিত্ব একই থাকে। এটি একটি উদাহরণ দিয়ে সবচেয়ে ভাল চিত্রিত করা হয়।

_{এইচটিএমএল:}

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

_{জাতীয়:}

                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

যদি আপনি সংখ্যাসূচক মানগুলিতে অ্যাক্সেসের জন্য বিকল্প সংখ্যামূলক সিনট্যাক্স ব্যবহার করার পরিকল্পনা করে থাকেন তবে মানটিকে Numberপ্রথমে যেমন কূটনৈতিক +অপারেটর দিয়ে ফেলেছেন তা নিশ্চিত হন ।

_{জেএস (অবিরত):}

+$('#foo').data('hex'); // 1000

Comments

@ ভিটারবাল, এটি সত্য হলেও, প্রত্যাবর্তিত বস্তুর হাইফেনেটেড ফর্ম সেট .data()থাকবে না , তাই $('#bar').data('foo-bar-baz')কাজ করবে, তবে $('#bar').data()['foo-bar-baz']হবে না। এটি এই কারণেই আমি পরামর্শ দিই যে লোকেদের হাইফেনেটেড ফর্মটি ব্যবহার করা এড়ানো উচিত।

— zzzzBov

ঠিক আছে, এখন আমি আপনাকে বলতে চাইছি কি। এই ছোট্ট বিস্তারিত সম্পর্কে জানতাম না, আপডেটের জন্য ধন্যবাদ :)

— ভেটেরাল

@ সাবেলফস্টে, কোন লিঙ্ক? api.jquery.com/data হ'ল পদ্ধতির সঠিক লিঙ্ক, এবং আমি যতটা অবগত আছি তেমন কোনও পরিবর্তন হয়নি।

— zzzzBov

আমি পছন্দ করি, ফু, বার, বাজ, ফিজ, বাজ আরও: ডি

— উসমান ইউনাস

প্রতিটি লাইনে প্রেম।

— ফু বার

Answer 2

উভয়ের মধ্যে প্রধান পার্থক্য হ'ল এটি কোথায় সঞ্চয় করা হয় এবং কীভাবে এটি অ্যাক্সেস করা হয়।

$.fn.attr পরিদর্শন করার পরে সর্বজনীনভাবে দৃশ্যমান এবং উপাদানগুলির নেটিভ এপিআই থেকে পাওয়া যায় এমন বৈশিষ্ট্যগুলিতে সরাসরি উপাদানটিতে তথ্য সংরক্ষণ করে।

$.fn.dataএকটি তথ্য সঞ্চয় করে হাস্যকর অস্পষ্ট জায়গা। এটি স্থানীয় বন্ধ হিসাবে পরিচিত একটি বদ্ধ ওভারে অবস্থিত data_userযা স্থানীয়ভাবে সংজ্ঞায়িত ফাংশন ডেটার উদাহরণ। এই পরিবর্তনশীলটি সরাসরি jQuery এর বাইরে থেকে অ্যাক্সেসযোগ্য নয়।

সঙ্গে ডেটা সেট attr()

• থেকে অ্যাক্সেসযোগ্য $(element).attr('data-name')
• এর থেকে অ্যাক্সেসযোগ্য element.getAttribute('data-name'),
• মান আকারে ছিল data-nameথেকে অ্যাক্সেসযোগ্য এছাড়াও $(element).data(name)এবং element.dataset['name']এবংelement.dataset.name
• পরিদর্শন উপর উপাদান প্রদর্শিত
• বস্তু হতে পারে না

সঙ্গে ডেটা সেট .data()

• শুধুমাত্র থেকে অ্যাক্সেসযোগ্য.data(name)
• .attr()অন্য কোথাও থেকে অ্যাক্সেসযোগ্য নয়
• পরিদর্শন করার পরে উপাদানটিতে প্রকাশ্যে দৃশ্যমান নয়
• বস্তু হতে পারে

Comments

হ্যাঁ, আমার মূল প্রশ্নটি ছিল কোথায় এই তথ্যটি সংরক্ষণ করা হয়েছিল, সুতরাং সেই তথ্যের জন্য ধন্যবাদ!

— ম্যাক্স ওয়াইল্ডার

এছাড়াও .attr()যেতে উপায় হল, পরে আপনি ব্যবহার করতে চান তাহলে ডাটা নির্বাচক হিসাবে ( .data()কিন্তু দেখ পাওয়া যাবে না codepen.io/anon/pen/EvawPV?editors=1011 )

— Kamafeather

Answer 3

আপনি data-*কাস্টম ডেটা এম্বেড করতে অ্যাট্রিবিউট ব্যবহার করতে পারেন । data-*বৈশিষ্ট্যাবলী আমাদের এম্বেড কাস্টম ডেটাতে ক্ষমতা সব এইচটিএমএল উপাদানে বৈশিষ্ট্যাবলী দেয়।

jQuery .data()পদ্ধতি আপনাকে এমন কোনও উপায়ে DOM উপাদানগুলিতে কোনও ধরণের ডেটা সেট / সেট করতে দেয় যা বিজ্ঞপ্তি রেফারেন্স এবং সেইজন্য মেমরি ফাঁস থেকে নিরাপদ।

জিকিউরি .attr()পদ্ধতিটি মেলে সেটে কেবলমাত্র প্রথম উপাদানটির জন্য বিশিষ্ট মানটি সেট / সেট করে।

উদাহরণ:

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");