<div id="example-value">หรือ<div id="example_value">?
ไซต์นี้และ Twitter ใช้รูปแบบแรก Facebook และ Vimeo - วินาที
คุณใช้อันไหนและทำไม?
คำตอบ:
ใช้ยัติภังค์เพื่อให้แน่ใจว่ามีการแยกระหว่าง HTML และ JavaScript ของคุณ
ทำไม? ดูด้านล่าง
ยัติภังค์ใช้ได้ใน CSS และ HTML แต่ใช้กับ JavaScript Objects ไม่ได้
เบราว์เซอร์จำนวนมากลงทะเบียนรหัส HTML เป็นวัตถุส่วนกลางบนหน้าต่าง / วัตถุเอกสารในโครงการใหญ่สิ่งนี้อาจกลายเป็นความเจ็บปวดอย่างแท้จริง
ด้วยเหตุนี้ฉันจึงใช้ชื่อกับยัติภังค์วิธีนี้รหัส HTML จะไม่ขัดแย้งกับ JavaScript ของฉัน
พิจารณาสิ่งต่อไปนี้:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};HTML
<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>หากเบราว์เซอร์ลงทะเบียนรหัส HTML เป็นโกลบอลอ็อบเจ็กต์ข้างต้นจะล้มเหลวเนื่องจากข้อความไม่ใช่ "ไม่ได้กำหนด" และจะพยายามสร้างอินสแตนซ์ของวัตถุ HTML การตรวจสอบให้แน่ใจว่ารหัส HTML มียัติภังค์ในชื่อเพื่อป้องกันความขัดแย้งเช่นเดียวกับด้านล่าง:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};HTML
<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>แน่นอนคุณสามารถใช้ messageText หรือ message_text ได้ แต่ไม่สามารถแก้ปัญหาได้และคุณอาจพบปัญหาเดียวกันในภายหลังซึ่งคุณจะเข้าถึงวัตถุ HTML โดยไม่ได้ตั้งใจแทนที่จะเป็น JavaScript
ข้อสังเกตประการหนึ่งคุณยังสามารถเข้าถึงวัตถุ HTML ผ่านวัตถุหน้าต่าง (ตัวอย่าง) ได้โดยใช้ window ['message-text'];
window['message-text'];
ฉันอยากจะแนะนำ Google HTML / CSS Style Guide
โดยเฉพาะระบุ :
แยกคำในชื่อ ID และระดับด้วยยัติภังค์ อย่าเชื่อมคำและตัวย่อในตัวเลือกด้วยอักขระใด ๆ (รวมถึงไม่มีเลย) นอกเหนือจากขีดกลางเพื่อปรับปรุงความเข้าใจและความสามารถในการสแกน
/* 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สัญกรณ์ล่ะ?
มันขึ้นอยู่กับความชอบจริงๆ แต่สิ่งที่จะส่งผลต่อคุณในทิศทางใดทิศทางหนึ่งอาจเป็นตัวแก้ไขที่คุณเขียนโค้ดด้วย ตัวอย่างเช่นคุณลักษณะการเติมข้อความอัตโนมัติของTextMateจะหยุดที่ขีดกลาง แต่จะเห็นคำที่คั่นด้วยเครื่องหมายขีดล่างเป็นคำเดียว ดังนั้นชื่อคลาสและรหัสที่the_postทำงานได้ดีกว่าthe-postเมื่อใช้คุณสมบัติการเติมข้อความอัตโนมัติ ( Esc)
ฉันเชื่อว่าทั้งหมดนี้ขึ้นอยู่กับโปรแกรมเมอร์ คุณสามารถใช้ camelCase ได้เช่นกันถ้าคุณต้องการ (แต่ฉันคิดว่ามันจะดูอึดอัด)
โดยส่วนตัวแล้วฉันชอบยัติภังค์มากกว่าเพราะพิมพ์บนคีย์บอร์ดได้เร็วกว่า ดังนั้นฉันจะบอกว่าคุณควรเลือกสิ่งที่คุณพอใจมากที่สุดเนื่องจากทั้งสองตัวอย่างของคุณใช้กันอย่างแพร่หลาย
ทั้งสองตัวอย่างนั้นใช้ได้อย่างสมบูรณ์แบบคุณยังสามารถผสม ":" หรือ "" ก็ได้ เป็นตัวคั่นตามของ W3C ข้อมูลจำเพาะ โดยส่วนตัวฉันใช้ "_" ถ้าเป็นชื่อสองคำเพียงเพราะความคล้ายคลึงกับช่องว่าง
ZZ:ZZจะต้องใช้ Escape เป็นZZ\00003AZZ(CSS2 ขึ้นไป)
ฉันใช้อันแรก (หนึ่ง - สอง) เพราะอ่านได้ง่ายกว่า สำหรับรูปภาพฉันชอบขีดล่าง (btn_more.png) Camel Case (oneTwo) เป็นอีกทางเลือกหนึ่ง
จริงๆแล้วเฟรมเวิร์กภายนอกบางอัน (javascript, php) มีปัญหา (บั๊ก?) กับการใช้ยัติภังค์ในชื่อ id ฉันใช้ขีดล่าง (960grid ก็เช่นกัน) และทุกอย่างใช้งานได้ดี
ฉันขอแนะนำขีดล่างส่วนใหญ่ด้วยเหตุผลของผลข้างเคียงของจาวาสคริปต์ที่ฉันพบ
หากคุณต้องพิมพ์โค้ดด้านล่างลงในแถบสถานที่ตั้งของคุณคุณจะได้รับข้อผิดพลาด: 'ค่าตัวอย่าง' ไม่ได้กำหนด ถ้า div ถูกตั้งชื่อด้วยเครื่องหมายขีดล่างก็จะใช้ได้
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value")ซึ่งจะทำงานได้ดี