นิยามตัวแปร JavaScript: จุลภาคเทียบกับอัฒภาค

อะไรคือความแตกต่างและ / หรือข้อดีของการใช้เครื่องหมายจุลภาคเมื่อประกาศกลุ่มของตัวแปรแทนที่จะเป็นอัฒภาค

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

var foo = 'bar', bar = 'foo';

เทียบกับ

var foo = 'bar';
var bar = 'foo';

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

ไม่มีประโยชน์ด้านประสิทธิภาพเป็นเพียงเรื่องของทางเลือกและสไตล์ส่วนตัว

เวอร์ชันแรกมีความกระชับมากขึ้น

อัปเดต:

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

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

หลังจากอ่าน Crockford และอื่น ๆ ฉันเริ่มเชื่อมโยงตัวแปรของฉันด้วยเครื่องหมายจุลภาคเท่านั้น จากนั้นต่อมาฉันรู้สึกรำคาญกับโปรแกรมดีบัก Chrome DevTools ที่ไม่หยุดอยู่ที่การกำหนดตัวแปรด้วยเครื่องหมายจุลภาค สำหรับดีบักเกอร์นิยามตัวแปรที่ถูกผูกด้วยลูกน้ำคือคำสั่งเดียวในขณะที่คำสั่ง var หลายคำสั่งเป็นคำสั่งหลายคำสั่งที่ดีบักเกอร์สามารถหยุดได้ ดังนั้นฉันจึงเปลี่ยนจาก:

var a = doSomethingA,
    b = doSomethignB,
    c = doSomethingC;

ถึง:

var a = doSomethingA;
var b = doSomethignB;
var c = doSomethingC;

ตอนนี้ฉันพบว่าตัวแปรที่สองสะอาดกว่ามากโดยไม่ต้องพูดถึงข้อดีของการแก้ปัญหาดีบักเกอร์

อาร์กิวเมนต์ "less code through the wire" ไม่โน้มน้าวใจเนื่องจากมี minifiers

ฉันชอบvar-per-variableสัญกรณ์:

var a = 2
var b = 3

เนื่องจากcomma-instead-of-another-varสัญกรณ์อื่นมีข้อบกพร่องสามประการนี้:

1. ดูแลรักษายาก
พิจารณารหัสนี้:

var a = 1,
    b = mogrify(2),
    c = 3

แต่เดี๋ยวก่อน mogrify ทำอะไร? ลองพิมพ์ b เพื่อค้นหา:

var a = 1,
    b = mogrify(2),
    console.log(b)
    c = 3

ทำลายสิ่งของ

2. อ่านยาก

ตัวแปรในการขอทานของสายสื่อสารอย่างชัดเจนว่าจะมีการเริ่มต้นตัวแปรใหม่

var get_all_unicorn_promise = db.get_all_unicorns((unicorn) => {
        unicorn.legs.map((leg) => {
            leg.log('yes')
        })
    }).sort(),
    c = 3

อะไรนรกคือc = 3การทำมีใช่มั้ย?

3. ไม่สม่ำเสมอ

พิจารณาสิ่งนี้:

var a = 1,
    b = 2,
    c = 3

กับvar-per-variableทุกการประกาศทำตามโครงสร้างเดียวกัน ด้วยcomma-instead-of-another-varตัวแปรแรกจะถูกประกาศในลักษณะที่แตกต่างจากตัวแปรอื่น ๆ หากคุณตัดสินใจที่จะพูดว่าย้ายตัวแปรตัวแรกภายใน a for cycle คุณจะต้องเพิ่ม var ที่ตรงกลางของการประกาศ

นอกเหนือจากความชอบดูเหมือนว่าโครงการที่มีชื่อเสียงส่วนใหญ่จะใช้var-per-variableสัญกรณ์

ฉันเห็นด้วยกับผู้ตอบคำถามคนอื่น ๆ ว่านี่เป็นเรื่องของสไตล์ส่วนตัวเป็นหลัก แต่เพื่อนำความคิดเห็น "เผด็จการ" มาสู่การสนทนานี่คือสิ่งที่Douglas Crockfordกล่าวในเว็บไซต์ของเครื่องมือ JSLint ยอดนิยม :

แต่เนื่องจาก JavaScript ไม่มีขอบเขตการบล็อกจึงเป็นการดีกว่าที่จะประกาศตัวแปรของฟังก์ชันทั้งหมดที่ด้านบนของฟังก์ชัน ขอแนะนำให้ใช้คำสั่ง var เดียวต่อฟังก์ชัน สิ่งนี้สามารถบังคับใช้ได้กับonevarตัวเลือก

ดังที่คนอื่น ๆ ตั้งข้อสังเกตว่ามันเป็นความชอบสไตล์ JSLintอาจบอกให้คุณมีเพียงหนึ่งรายการvarต่อฟังก์ชันเท่านั้น (หากคุณใช้ "Good Parts") ดังนั้นหากใช้ JSLint เพื่อตรวจสอบโค้ดของคุณ (ไม่ใช่ความคิดที่ไม่ดี IMHO) คุณจะใช้รูปแบบแรกมากกว่ารูปแบบหลัง

บนมืออื่น ๆ ที่ผู้เขียนเดียวกันดักลาส Crockfordกล่าวว่าจะนำตัวแปรแต่ละตัวในสายของตัวเองของเขาในการประชุมการเข้ารหัส ดังนั้นคุณอาจต้องการยกเลิกการเลือกvarช่องทำเครื่องหมาย"ทั้งหมดหนึ่งรายการต่อฟังก์ชัน" ใน JSLint หากคุณใช้ ;-)

ฉันไม่คิดว่าจะมีความแตกต่างที่เห็นได้ชัดเจนเท่าที่ฉันกังวลมันเป็นแค่ความชอบส่วนตัว

ฉันเกลียดการประกาศ var หลายรายการดังนั้นฉันมักจะทำ:

var 
   one
  ,two
  ,three
  ,four
;

เนื่องจากสั้นกว่าและอ่านได้ง่ายกว่าจึงไม่มีvarเสียงรบกวนให้ดู

เนื่องจากฉันไม่เห็นการอ้างอิงใด ๆนี่คือลิงก์ไปยังข้อกำหนด ECMA-262 ซึ่งเป็นข้อมูลจำเพาะพื้นฐานสำหรับ JavaScript ไวยากรณ์จากหน้านั้นกล่าวว่า:

12.2 Variable Statement

Syntax

  VariableStatement :
    var VariableDeclarationList ;

  VariableDeclarationList :
    VariableDeclaration
    VariableDeclarationList , VariableDeclaration

  VariableDeclarationListNoIn :
    VariableDeclarationNoIn
    VariableDeclarationListNoIn , VariableDeclarationNoIn

  VariableDeclaration :
    Identifier Initialiseropt

  VariableDeclarationNoIn :
    Identifier InitialiserNoInopt

  Initialiser :
    = AssignmentExpression
  InitialiserNoIn :
    = AssignmentExpressionNoIn

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

ครั้งแรกบันทึกอักขระไม่กี่ตัว - ดังนั้นจึงมีการประหยัดเพียงเล็กน้อยในแง่ของขนาดไฟล์ JS และการใช้แบนด์วิดท์ ครั้งเดียวที่จะกลายเป็นที่สังเกตได้ในกรณีที่รุนแรง

ฉันชอบเวอร์ชันที่สองมากกว่า (แต่ละรุ่นมีของตัวเองvar) ฉันคิดว่าเป็นเพราะฉันมาจากพื้นหลัง C ++ ใน C ++ คุณสามารถประกาศตัวแปรได้เช่นเดียวกับที่คุณทำในตัวอย่างแรก แต่มีการขมวดคิ้ว (ซึ่งทำให้เกิดข้อผิดพลาดได้ง่ายเมื่อคุณพยายามสร้างพอยน์เตอร์ด้วยวิธีนั้น)

หากคุณลดขนาดจาวาสคริปต์ของคุณมีประโยชน์มากพอสมควร:

var one, two, three, four;

กลายเป็น

var a, b, c, d;

ที่ไหนเป็น

var one;
var two;
var three;
var four;

กลายเป็น

var a;
var b;
var c;
var d;

นี่เป็นอีกสามกรณีvarที่สามารถเพิ่มขึ้นได้เมื่อเวลาผ่านไป

ดูชุดบทความ "A List Apart" "Better Javascript Minification" ตอนที่ 1และตอนที่ 2