<div id="example-value">বা <div id="example_value">?
এই সাইট এবং টুইটারটি প্রথম শৈলী ব্যবহার করে। ফেসবুক এবং ভিমেও - দ্বিতীয়।
আপনি কোনটি ব্যবহার করেন এবং কেন?
উত্তর:
আপনার এইচটিএমএল এবং জাভাস্ক্রিপ্টের মধ্যে বিচ্ছিন্নতা নিশ্চিত করতে হাইফেন ব্যবহার করুন।
কেন? নিচে দেখ.
হাইফেনগুলি সিএসএস এবং এইচটিএমএলে ব্যবহারের জন্য বৈধ তবে জাভাস্ক্রিপ্ট অবজেক্টের জন্য নয়।
অনেকগুলি ব্রাউজার বড় প্রকল্পে উইন্ডো / ডকুমেন্ট অবজেক্টে এইচটিএমএল আইডিগুলি বিশ্বব্যাপী অবজেক্ট হিসাবে নিবন্ধভুক্ত করে, এটি সত্যিকারের ব্যথা হতে পারে।
এই কারণে, আমি হাইফেনের সাথে নামগুলি এইভাবে ব্যবহার করি এইচটিএমএল আইডিগুলি কখনই আমার জাভাস্ক্রিপ্টের সাথে বিরোধ করবে না।
নিম্নোক্ত বিবেচনা কর:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};এইচটিএমএল
<body>
<span id='message'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
</script>ব্রাউজার যদি এইচটিএমএল আইডিকে বিশ্বব্যাপী বস্তু হিসাবে নিবন্ধিত করে তবে উপরেরটি ব্যর্থ হবে কারণ বার্তাটি 'পূর্বনির্ধারিত' নয় এবং এটি এইচটিএমএল অবজেক্টের একটি উদাহরণ তৈরি করার চেষ্টা করবে। এইচটিএমএল আইডি নামের একটি হাইফেন রয়েছে তা নিশ্চিত করে নীচের মত বিরোধগুলি প্রতিরোধ করে:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};এইচটিএমএল
<body>
<span id='message-text'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
</script>অবশ্যই আপনি বার্তা পাঠ্য বা বার্তা পাঠ্য ব্যবহার করতে পারেন তবে এটি সমস্যার সমাধান করে না এবং আপনি একই সমস্যাটি পরে চালাতে পারেন যেখানে আপনি জাভাস্ক্রিপ্টের পরিবর্তে কোনও এইচটিএমএল অবজেক্টে দুর্ঘটনাক্রমে প্রবেশ করতে পারবেন
একটি মন্তব্য, আপনি এখনও উইন্ডো ['বার্তা-পাঠ্য'] ব্যবহার করে উইন্ডো অবজেক্টের মাধ্যমে (উদাহরণস্বরূপ) এইচটিএমএল অবজেক্টগুলিতে অ্যাক্সেস করতে পারেন;
window['message-text'];
আমি গুগল এইচটিএমএল / সিএসএস স্টাইল গাইড সুপারিশ করব
এটি বিশেষভাবে বলে :
হাইফেন দ্বারা আইডি এবং শ্রেণীর নামগুলিতে শব্দ পৃথক করুন । হাইফেন ব্যতীত অন্য কোনও অক্ষর দ্বারা (বা মোটেও কিছুই নয়) সিলেক্টরে শব্দ এবং সংক্ষিপ্ত বিবরণগুলি বোঝাবেন না যাতে বুঝতে এবং স্ক্যানযোগ্যতার উন্নতি করতে পারেন।
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
/* Recommended */
#video-id {}
.ads-sample {}BEMস্বরলিপি সম্পর্কে কি ?
এটি সত্যিই পছন্দের দিকে নেমে আসে তবে কোন নির্দিষ্ট দিক থেকে আপনাকে কী প্রভাবিত করবে তা আপনার সম্পাদনা কোড হতে পারে। উদাহরণস্বরূপ, টেক্সটমেটের স্বয়ংক্রিয়-সম্পূর্ণ বৈশিষ্ট্যটি একটি হাইফেনে থামে, তবে আন্ডারস্কোর দ্বারা পৃথক শব্দের একটি একক শব্দ হিসাবে দেখায়। শ্রেণীর নাম এবং আইডিগুলি এর স্বয়ংক্রিয়-সম্পূর্ণ বৈশিষ্ট্য ( ) ব্যবহার করার the_postচেয়ে কাজের সাথে আরও ভাল ।the-postEsc
আমি বিশ্বাস করি এটি পুরোপুরি প্রোগ্রামারটির উপর নির্ভর করে। আপনি চাইলে আপনিও উট কেস ব্যবহার করতে পারেন (তবে আমি মনে করি এটি বিশ্রী মনে হবে))
আমি ব্যক্তিগতভাবে হাইফেন পছন্দ করি, কারণ আমার কীবোর্ডে টাইপ করা তত দ্রুত। সুতরাং আমি বলব যে আপনি যেটি সবচেয়ে বেশি স্বাচ্ছন্দ্যযুক্ত তার সাথে আপনার চলতে হবে, যেহেতু আপনার দুটি উদাহরণ ব্যাপকভাবে ব্যবহৃত হয়।
হয় উদাহরণ পুরোপুরি বৈধ, আপনি এমনকি ":" বা "মিশ্রণটি ফেলে দিতে পারেন। ডাব্লু 3 গ স্পেস অনুযায়ী বিভাজক হিসাবে । আমি ব্যক্তিগতভাবে "_" ব্যবহার করি যদি এটি কেবল স্থানের সাদৃশ্যের কারণে দুটি শব্দর নাম হয়।
ZZ:ZZহিসাবে পালাতে হবে ZZ\00003AZZ।
আসলে কিছু বাহ্যিক ফ্রেমওয়ার্ক (জাভাস্ক্রিপ্ট, পিএইচপি) এর আইডি নামের হাইপেন ব্যবহার করে অসুবিধা (বাগ?) রয়েছে have আমি আন্ডারস্কোর ব্যবহার করি (960 গ্রিডও করে) এবং সমস্ত দুর্দান্ত কাজ করে।
আমি মূলত জাভাস্ক্রিপ্টের পার্শ্ব-প্রতিক্রিয়াটির কারণেই আন্ডারস্কোর প্রস্তাব করব।
আপনি যদি নীচে কোডটি আপনার লোকেশন বারে টাইপ করেন তবে আপনি একটি ত্রুটি পাবেন: 'উদাহরণ-মান' অপরিজ্ঞাত ined যদি ডিভটির নাম আন্ডারস্কোর দিয়ে দেওয়া হয় তবে এটি কাজ করবে।
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), যা ভাল কাজ করবে।