คู่มือสไตล์จาวาสคริปต์ยอดนิยมในปัจจุบัน

JavaScript ไม่มีคู่มือสไตล์การเข้ารหัสที่เชื่อถือได้ แต่เป็นรูปแบบการเข้ารหัสยอดนิยมบางอย่าง:

การคัดลอกรหัสมีดังนี้:

คู่มือสไตล์ JavaScript ของ Google (ต่อไปนี้เรียกว่า Google)

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

รูปแบบการเข้ารหัส NPM (ต่อไปนี้เรียกว่า NPM)

https://npmjs.org/doc/coding-style.html

คู่มือสไตล์ Node.js ของ felix (ต่อไปนี้เรียกว่า node.js)

http://nodeguide.com/style.html

สำนวน JavaScript (ต่อไปนี้จะเรียกว่าสำนวน)

https://github.com/rwldrn/iiomatic.js/

คู่มือสไตล์ JavaScript JavaScript (ต่อไปนี้เรียกว่า jQuery)

http://contribute.jquery.org/style-guide/js/

คู่มือสไตล์ JavaScript ของ Douglas Crockford (ต่อไปนี้เรียกว่า Crockford) Douglas Crockford เป็นหนึ่งในหน่วยงานด้านเทคนิคที่รู้จักกันดีที่สุดในด้านการพัฒนาเว็บและสมาชิกของคณะกรรมการมาตรฐาน ECMA JavaScript 2.0

http://javascript.crockford.com/code.html

แน่นอนว่ายังมีตัวเลือกการตั้งค่าเริ่มต้นบางอย่างในตัวตรวจสอบไวยากรณ์ JavaScript Jslint และ JShint คำถามคือรูปแบบการเข้ารหัส JavaScript ที่ดีที่สุดที่นักพัฒนาส่วนใหญ่สามารถติดตามได้คืออะไร? มาหารูปแบบฉันทามติจากคู่มือสไตล์ 6 ข้อด้านล่าง

1. การเปรียบเทียบสไตล์รหัส

1.1 การเยื้อง

สองช่องว่างไม่มีการเยื้องอีกต่อไปไม่มีการเยื้องแท็บ: Google, npm, node.js, สำนวน

แท็บเยื้อง: jQuery

4 ช่องว่าง: Crockford

1.2 ช่องว่างระหว่างพารามิเตอร์และนิพจน์

ใช้สไตล์ขนาดกะทัดรัด: Google, NPM, Node.js

คัดลอกรหัสดังนี้: project.myclass = function (arg1, arg2) {

การใช้พื้นที่มากเกินไป: สำนวน, jQuery

คัดลอกรหัสดังนี้: สำหรับ (i = 0; i <length; i ++) {

ไม่มีความคิดเห็น: Crockford

ในคู่มือส่วนใหญ่นักพัฒนาจะได้รับการเตือนว่าจะไม่มีช่องว่างใด ๆ ในตอนท้ายของแถลงการณ์

1.3 ความยาวบรรทัดรหัส

มีอักขระมากถึง 80 ตัว: Google, NPM, Node.js, Crockford (เมื่ออยู่ในบล็อกรหัสเยื้องอื่น ๆ ยกเว้น 2 ช่องว่างอนุญาตให้พารามิเตอร์ฟังก์ชันจัดตำแหน่งกับตำแหน่งของพารามิเตอร์ฟังก์ชันแรกตัวเลือกอื่นคือการใช้ 4 ช่องว่างเพื่อเยื้องเมื่อห่อเส้นแทน 2))

ไม่มีความคิดเห็น: jQuery, สำนวน

1.4 เซมิโคลอน

ใช้เครื่องหมายอัฒภาคเสมอไม่พึ่งพาเม็ดมีดโดยนัย: Google, node.js, Crockford

อย่าใช้คาดหวัง: NPM ในบางกรณี

ไม่มีความคิดเห็น: jQuery, สำนวน

1.5 ความคิดเห็น

ติดตามการประชุม JSDOC: Google, สำนวน

ไม่มีความคิดเห็น: npm, node.js, jQuery, Crockford

1.6 คำคม

คำพูดเดียวที่แนะนำ: Google, node.js

คำคมสองเท่า: jQuery

ไม่มีความคิดเห็น: NPM, สำนวน, Crockford

1.7 การประกาศตัวแปร

ประกาศทีละครั้งโดยไม่ต้องใช้เครื่องหมายจุลภาค: node.js

การคัดลอกรหัสมีดังนี้:

var foo =”;

var bar =”;

ประกาศหลายครั้งพร้อมกันใช้เครื่องหมายจุลภาคเพื่อแยกออกจากกันในตอนท้ายของบรรทัด: สำนวน, jQuery

การคัดลอกรหัสมีดังนี้:

var foo = ""

bar = "",

Quux;

ใช้เครื่องหมายจุลภาคที่จุดเริ่มต้นของบรรทัด: NPM

ไม่มีความคิดเห็น: Google, Crockford

1.8 เครื่องมือจัดฟัน

ใช้เครื่องมือจัดฟันเปิดในบรรทัดเดียวกัน: Google, NPM, node.js, สำนวน, jQuery, Crockford

คัดลอกรหัสดังต่อไปนี้: ฟังก์ชั่น thisisblock () {

คู่มือ NPM ระบุว่าใช้การจัดฟันเมื่อบล็อกรหัสจำเป็นต้องรวมบรรทัดถัดไปมิฉะนั้นจะไม่ถูกใช้

1.9 ตัวแปรทั่วโลก

อย่าใช้ตัวแปรระดับโลก: Google, Crockford (Google กล่าวว่าความขัดแย้งการตั้งชื่อตัวแปรทั่วโลกนั้นยากที่จะแก้ไขข้อบกพร่องและอาจมีปัญหาที่ยุ่งยากเมื่อมีการรวมโครงการสองโครงการเพื่ออำนวยความสะดวกในการแบ่งปันรหัสจาวาสคริปต์ทั่วไป

ไม่มีความคิดเห็น: สำนวน, jQuery, npm, node.js

2 สไตล์การตั้งชื่อ

2.1 การตั้งชื่อตัวแปร

คำแรกที่เริ่มต้นคือตัวพิมพ์เล็กและตัวอักษรตัวแรกของคำทั้งหมดหลังจากนั้นคือตัวพิมพ์ใหญ่: Google, npm, node.js, สำนวน

การคัดลอกรหัสมีดังนี้:

var foo = "";

var fooname = "";

2.2 การตั้งชื่อคงที่

ใช้ตัวอักษร CAPTONS: Google, NPM, Node.js

การคัดลอกรหัสมีดังนี้: var cons = 'value';

ไม่มีความคิดเห็น: jQuery, สำนวน, Crockford

2.3 การตั้งชื่อฟังก์ชั่น

คำแรกที่จุดเริ่มต้นคือตัวพิมพ์เล็กและตัวอักษรตัวแรกของคำทั้งหมดหลังจากนั้นคือตัวพิมพ์ใหญ่ (อูฐ): Google, NPM, สำนวน, node.js (แนะนำให้ใช้ชื่อฟังก์ชันที่มีความยาว

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่นมาก

ฟังก์ชั่นสั้น () ..

การตั้งชื่อฟังก์ชั่นในรูปแบบคำหลัก:

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่นพร้อม ()

ฟังก์ชัน setName ()

ฟังก์ชั่น getName ()

ไม่มีความคิดเห็น: jQuery, Crockford

2.4 การตั้งชื่ออาร์เรย์

ใช้แบบฟอร์มพหูพจน์: สำนวน

การคัดลอกรหัสมีดังนี้: var documents = [];

ไม่มีความคิดเห็น: Google, JQuery, NPM, Node.js, Crockford

2.5 การตั้งชื่อวัตถุและคลาส

ใช้แบบฟอร์มต่อไปนี้: Google, NPM, Node.js

การคัดลอกรหัสมีดังนี้:

var thisIsObject = วันที่ใหม่;

ไม่มีความคิดเห็น: jQuery, สำนวน, Crockford

2.6 การตั้งชื่ออื่น ๆ

ใช้ All-Hyphen-CSS-case สำหรับชื่อไฟล์ยาวและคีย์การกำหนดค่า: NPM

3. กำหนดค่าไฟล์. jshintrc ตามสไตล์ข้างต้น

jshint (http://www.jshint.com/) เป็นไวยากรณ์ JavaScript และเครื่องมือตรวจสอบสไตล์ที่คุณสามารถใช้เพื่อเตือนปัญหาสไตล์รหัสที่เกี่ยวข้อง มันสามารถรวมเข้ากับบรรณาธิการที่ใช้กันทั่วไปจำนวนมากและเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการรวมรูปแบบการเข้ารหัสของทีม

คุณสามารถดูตัวเลือกที่มีอยู่ผ่านเอกสาร jshint: http://www.jshint.com/docs/#options

ต่อไปนี้คือการสร้างไฟล์. jshintrc ตามสไตล์แรกภายใต้แต่ละหมวดหมู่ข้างต้น คุณสามารถวางไว้ในไดเรกทอรีรากของโครงการและโปรแกรมแก้ไขรหัส JShint-Avare จะรวมรูปแบบรหัสทั้งหมดในโครงการตาม

การคัดลอกรหัสมีดังนี้:

-

"Camelcase": จริง

"เยื้อง": 2,

"undef": จริง

"quutkmark": โสด

"Maxlen": 80,

"ต่อท้าย": จริง

"หยิก": จริง

-

นอกจากนี้คุณควรเพิ่มส่วนหัวต่อไปนี้ในไฟล์ JavaScript ของคุณ:

การคัดลอกรหัสมีดังนี้:

/ * jshint เบราว์เซอร์: จริง, jQuery: true */

ในไฟล์ node.js คุณควรเพิ่ม:

การคัดลอกรหัสมีดังนี้:

/ *โหนด jshint: true */

นอกจากนี้คุณยังสามารถเพิ่มคำสั่งต่อไปนี้ในไฟล์ JavaScript ต่างๆ:

การคัดลอกรหัสมีดังนี้:

'ใช้อย่างเข้มงวด';

สิ่งนี้จะส่งผลกระทบต่อ JShint และเครื่องยนต์ JavaScript ของคุณและอาจไม่เข้ากันได้ แต่ JavaScript จะทำงานได้เร็วขึ้น

4. ดำเนินการ jshint โดยอัตโนมัติก่อนที่จะทำ Git

หากคุณต้องการตรวจสอบให้แน่ใจว่ารหัส JS ทั้งหมดสอดคล้องกับสไตล์ที่กำหนดไว้ใน. jshintrc คุณสามารถเพิ่มสิ่งต่อไปนี้ในไฟล์. git/hooks/pre-commit ของคุณและการตรวจสอบสไตล์จะดำเนินการโดยอัตโนมัติเมื่อคุณพยายามส่งไฟล์ที่แก้ไขใหม่ไปยังโครงการ

การคัดลอกรหัสมีดังนี้:

#!/bin/bash

# pre-commit git hook เพื่อเรียกใช้ jshint บนไฟล์ JavaScript

-

# ถ้าคุณต้องกระทำอย่างแน่นอนโดยไม่ต้องทดสอบ

# ใช้: git commit-ไม่มีการตรวจสอบ

FileNames = ($ (git diff-cached-name-only head)))

jshint &> /dev /null ไหน

ถ้า [$? -ne 0];

แล้ว

echo "ข้อผิดพลาด: ไม่พบ jshint"

echo "ติดตั้งด้วย: sudo npm ติดตั้ง -g jshint"

ออกจาก 1

FI

สำหรับฉันใน "$ {ชื่อไฟล์ [@]}"

ทำ

ถ้า [[$ i = ~ /.js$]];

แล้ว

echo jshint $ i

jshint $ i

ถ้า [$? -ne 0];

แล้ว

ออกจาก 1

FI

FI

เสร็จแล้ว