สไตล์ที่คุณเลือกสำหรับโครงการของคุณควรเป็นเกณฑ์สูงสุด วางเป็นคำอธิบายในโครงการของคุณและเชื่อมโยงไปยังเอกสารนี้เพื่อรับประกันความสอดคล้องของสไตล์รหัสความสามารถในการอ่านและการบำรุงรักษา
1. ว่างเปล่า
1. อย่าผสมช่องว่างและแท็บ
2. เริ่มโครงการเลือก Soft Intent (Space) หรือ TAB (เป็นวิธีการเยื้อง) ก่อนที่จะเขียนรหัสและใช้เป็นเกณฑ์สูงสุด
a). สำหรับความสามารถในการอ่านฉันมักจะแนะนำการออกแบบการเยื้องความกว้างของตัวอักษร 2 ตัวในการแก้ไขของคุณ - ซึ่งเทียบเท่ากับสองช่องว่างหรือสองช่องว่างแทนแท็บ
3. หากบรรณาธิการของคุณรองรับให้เปิดการตั้งค่า "แสดงตัวอักษรที่มองไม่เห็น" เสมอ ประโยชน์คือ:
a). ตรวจสอบให้แน่ใจว่าสอดคล้องกัน
b) ลบช่องว่างที่ส่วนท้ายของเส้น
c) ลบช่องว่างเปล่า
d). การส่งและการเปรียบเทียบสามารถอ่านได้มากขึ้น
2. ความงามไวยากรณ์
A. จัดฟัน, วงเล็บปีกกา, การแบ่งสาย
การคัดลอกรหัสมีดังนี้:
// ถ้า/อื่น/สำหรับ/ขณะ/ลองมักจะมีวงเล็บปีกกาการจัดฟันโค้งงอและหลายบรรทัด
// สิ่งนี้ช่วยอ่านได้
// 2.A.1.1
// ตัวอย่างไวยากรณ์ที่ยาก
ถ้า (เงื่อนไข) dosomething ();
ในขณะที่ (เงื่อนไข) วนซ้ำ ++;
สำหรับ (var i = 0; i <100; i ++) simeiterativefn ();
// 2.A.1.1
// ใช้ช่องว่างเพื่อปรับปรุงความสามารถในการอ่าน
ถ้า (เงื่อนไข) {
// คำแถลง
-
ในขณะที่ (เงื่อนไข) {
// คำแถลง
-
สำหรับ (var i = 0; i <100; i ++) {
// คำแถลง
-
// แนวปฏิบัติที่ดีกว่า:
var i,
ความยาว = 100;
สำหรับ (i = 0; i <length; i ++) {
// คำแถลง
-
// หรือ...
var i = 0,
ความยาว = 100;
สำหรับ (; i <length; i ++) {
// คำแถลง
-
prop var;
สำหรับ (เสาในวัตถุ) {
// คำแถลง
-
ถ้า (จริง) {
// คำแถลง
} อื่น {
// คำแถลง
-
B. กำหนด, การประกาศ, ฟังก์ชั่น (ชื่อฟังก์ชั่น, การแสดงออกของฟังก์ชั่น, ฟังก์ชั่นตัวสร้าง)
การคัดลอกรหัสมีดังนี้:
// 2.B.1.1
// ตัวแปร
var foo = "bar"
num = 1,
undef;
// การระบุตัวอักษร:
var array = []
Object = {};
// 2.B.1.2
// การใช้เพียงหนึ่ง `var` ภายในขอบเขต (ฟังก์ชั่น) ช่วยปรับปรุงความสามารถในการอ่าน
// และทำรายการคำสั่งของคุณเป็นระเบียบ (รวมถึงการพิมพ์แป้นพิมพ์สองสามรายการ)
// ไม่ดี
var foo = "";
var bar = "";
var qox;
// ดี
var foo = ""
bar = "",
Quux;
// หรือ..
var // ความคิดเห็นเกี่ยวกับตัวแปรเหล่านี้
foo = ""
bar = "",
Quux;
// 2.B.1.3
// คำสั่ง `var` จะต้องอยู่ที่ด้านบนของแต่ละขอบเขต (ฟังก์ชัน) เสมอ
// ยังเหมาะสำหรับค่าคงที่จาก ecmascript 6
// ไม่ดี
ฟังก์ชั่น foo () {
// มีคำสั่งก่อนตัวแปร
var bar = ""
qox;
-
// ดี
ฟังก์ชั่น foo () {
var bar = ""
qox;
// คำสั่งทั้งหมดเป็นไปตามตัวแปร
-
// 2.B.2.1
// ชื่อการประกาศฟังก์ชั่น
ฟังก์ชั่น foo (arg1, argn) {
-
// วิธีใช้
foo (arg1, argn);
// 2.B.2.2
// ชื่อการประกาศฟังก์ชั่น
ฟังก์ชั่นสแควร์ (หมายเลข) {
หมายเลขส่งคืน * หมายเลข;
-
// วิธีใช้
สแควร์ (10);
// สไตล์การผ่านความต่อเนื่องที่ผิดธรรมชาติมาก
ฟังก์ชั่นสแควร์ (หมายเลขโทรกลับ) {
การโทรกลับ (หมายเลข * หมายเลข);
-
สแควร์ (10, ฟังก์ชั่น (สี่เหลี่ยม) {
// เนื้อหาการโทรกลับ
-
// 2.B.2.3
// ฟังก์ชั่นนิพจน์
var square = function (number) {
// ส่งคืนเนื้อหาที่มีค่าและเกี่ยวข้อง
หมายเลขส่งคืน * หมายเลข;
-
// ฟังก์ชั่นนิพจน์ด้วยตัวระบุ
// ฟอร์มที่ต้องการนี้มีฟังก์ชั่นเพิ่มเติมที่อนุญาตให้เรียกตัวเอง
// และมีตัวระบุในสแต็ก
var factorial = ฟังก์ชั่น factorial (หมายเลข) {
ถ้า (หมายเลข <2) {
กลับ 1;
-
หมายเลขส่งคืน * แฟคทอเรียล (หมายเลข 1);
-
// 2.B.2.4
// การประกาศตัวสร้าง
ฟังก์ชั่น foobar (ตัวเลือก) {
this.options = ตัวเลือก;
-
// วิธีใช้
var foobar = new foobar ({a: "alpha"});
foobar.options;
// {a: "alpha"}
C. ข้อยกเว้นรายละเอียด
การคัดลอกรหัสมีดังนี้:
// 2.C.1.1
// ฟังก์ชั่นที่มีการโทรกลับ
foo (function () {
// หมายเหตุ: ไม่มีช่องว่างในวงเล็บและ `function 'ของการโทรฟังก์ชันแรก
-
// ฟังก์ชั่นยอมรับ `array` เป็นอาร์กิวเมนต์โดยไม่มีช่องว่าง
foo (["Alpha", "beta"]);
// 2.C.1.2
// ฟังก์ชั่นยอมรับ `Object` เป็นอาร์กิวเมนต์โดยไม่มีช่องว่าง
foo ({
A: "Alpha",
B: "เบต้า"
-
// ฟังก์ชั่นยอมรับตัวอักษร `สตริง 'เป็นอาร์กิวเมนต์โดยไม่มีช่องว่าง
foo ("bar");
// ไม่มีช่องว่างภายในวงเล็บที่ใช้สำหรับการจัดกลุ่ม
ถ้า (! ("foo" ใน obj)) {
-
D. ความมั่นคงมักจะชนะ
ในส่วนที่ 2.A-2.C มีการเสนอพื้นที่ว่างเป็นวิธีการแนะนำตามวัตถุประสงค์ที่ง่ายและสูงกว่า: การรวมกัน เป็นที่น่าสังเกตว่าการตั้งค่าการจัดรูปแบบเช่น "พื้นที่ว่างภายใน" จะต้องเป็นทางเลือก แต่ต้องมีซอร์สโค้ดประเภทเดียวของโครงการทั้งหมดเท่านั้น
การคัดลอกรหัสมีดังนี้:
// 2.d.1.1
ถ้า (เงื่อนไข) {
// คำแถลง
-
ในขณะที่ (เงื่อนไข) {
// คำแถลง
-
สำหรับ (var i = 0; i <100; i ++) {
// คำแถลง
-
ถ้า (จริง) {
// คำแถลง
} อื่น {
// คำแถลง
-
E. เครื่องหมายใบเสนอราคา
ไม่สำคัญว่าคุณจะเลือกคำพูดเดี่ยวหรือสองครั้งพวกเขาไม่ได้สร้างความแตกต่างในการแยกวิเคราะห์ใน JavaScript สิ่งที่ต้องได้รับคำสั่งอย่างแน่นอนคือความสอดคล้อง อย่าผสมคำพูดสองคำในโครงการเดียวกันเลือกหนึ่งและทำให้มันสอดคล้องกัน
F. End of Line และ Line ที่ว่างเปล่า
การออกจากว่างจะทำลายความแตกต่างและการเปลี่ยนแปลงการใช้งานไม่สามารถอ่านได้ พิจารณารวมถึงตะขอล่วงหน้าที่จะลบช่องว่างโดยอัตโนมัติในตอนท้ายของบรรทัดและเส้นเปล่า
3. การตรวจจับประเภท (จากแนวทางสไตล์ jQuery Core)
A. ประเภทโดยตรง (ประเภทจริงประเภทจริง)
สตริง:
การคัดลอกรหัสมีดังนี้:
ตัวแปร typeof === "สตริง"
ตัวเลข:
การคัดลอกรหัสมีดังนี้:
ตัวแปร typeof === "number"
บูลีน:
การคัดลอกรหัสมีดังนี้:
ตัวแปร typeof === "Boolean"
วัตถุ:
การคัดลอกรหัสมีดังนี้:
ตัวแปร typeof === "วัตถุ"
อาร์เรย์:
การคัดลอกรหัสมีดังนี้:
array.isarray (ArraylikeObject)
(ถ้าเป็นไปได้)
โหนด:
การคัดลอกรหัสมีดังนี้:
Elem.NodeType === 1
โมฆะ:
การคัดลอกรหัสมีดังนี้:
ตัวแปร === null
โมฆะหรือไม่ได้กำหนด:
การคัดลอกรหัสมีดังนี้:
ตัวแปร == null
ไม่ได้กำหนด:
ตัวแปรทั่วโลก:
การคัดลอกรหัสมีดังนี้:
ตัวแปร typeof === "undefined"
ตัวแปรท้องถิ่น:
การคัดลอกรหัสมีดังนี้:
ตัวแปร === ไม่ได้กำหนด
คุณสมบัติ:
การคัดลอกรหัสมีดังนี้:
Object.prop === ไม่ได้กำหนด
Object.hasownproperty (Prop)
"เสา" ในวัตถุ
B. ประเภทแปลง (ประเภทที่ถูกบีบบังคับ, ประเภทที่ถูกบีบบังคับ)
พิจารณาความหมายของสิ่งต่อไปนี้ ...
ให้ HTML:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "text" id = "foo-input" value = "1">
// 3.B.1.1
// `foo` ได้รับการกำหนดค่าของ` 0`, พิมพ์ `number '
var foo = 0;
// typeof foo;
// "ตัวเลข"
-
// ในรหัสที่ตามมาคุณต้องอัปเดต `foo` และกำหนดค่าใหม่ที่ได้รับในองค์ประกอบอินพุต
foo = document.getElementById ("foo-input") ค่า;
// ถ้าคุณทดสอบ `typeof foo` ตอนนี้ผลลัพธ์จะเป็น` string '
// นี่หมายความว่าคุณมีตรรกะคล้ายกับสิ่งนี้เมื่อตรวจจับ `foo` ในคำสั่ง IF:
ถ้า (foo === 1) {
สำคัญ ();
-
// `` `สำคัญ ()` จะไม่ถูกดำเนินการแม้ว่า `foo` มีค่า" 1 "
// 3.B.1.2
// คุณสามารถใช้ตัวดำเนินการ +/- unary อย่างชาญฉลาดในการเลือกประเภทเพื่อแก้ปัญหา:
foo = +document.getElementById ("foo-input"). ค่า;
// ^ + ตัวดำเนินการ Unary จะแปลงวัตถุการดำเนินการเป็นขวาเป็น `number '
// typeof foo;
// "ตัวเลข"
ถ้า (foo === 1) {
สำคัญ ();
-
// `` `สำคัญ ()` จะถูกเรียก
นี่คือตัวอย่างบางส่วนสำหรับการคัดเลือกนักแสดง:
การคัดลอกรหัสมีดังนี้:
// 3.B.2.1
var number = 1,
String = "1"
bool = false;
ตัวเลข;
// 1
หมายเลข + "";
// "1"
สตริง;
// "1"
+สตริง;
// 1
+สตริง ++;
// 1
สตริง;
// 2
บูล;
// เท็จ
+บูล;
// 0
บูล + "";
// "เท็จ"
// 3.B.2.2
var number = 1,
String = "1"
bool = true;
สตริง === จำนวน;
// เท็จ
String === number + "";
// จริง
+สตริง === จำนวน;
// จริง
bool === จำนวน;
// เท็จ
+bool === จำนวน;
// จริง
bool === สตริง;
// เท็จ
บูล === !! สตริง;
// จริง
// 3.B.2.3
var array = ["a", "b", "c"];
!! ~ array.indexof ("a");
// จริง
!! ~ array.indexof ("B");
// จริง
!! ~ array.indexof ("C");
// จริง
!! ~ array.indexof ("D");
// เท็จ
// เป็นที่น่าสังเกตว่าข้างต้นเป็น "ความฉลาดที่ไม่จำเป็น" ทั้งหมด
// ใช้รูปแบบที่ชัดเจนเพื่อเปรียบเทียบค่าที่ส่งคืน
// ตัวอย่างเช่น indexof:
if (array.indexof ("a")> = 0) {
-
-
// 3.B.2.3
var num = 2.5;
parseint (num, 10);
// เทียบเท่ากับ ...
~~ num;
num >> 0;
num >>> 0;
// ผลลัพธ์ทั้งหมด 2
// โปรดจำไว้เสมอค่าลบจะได้รับการปฏิบัติแตกต่างกัน ...
var neg = -2.5;
Parseint (neg, 10);
// เทียบเท่ากับ ...
~~ neg;
neg >> 0;
// ผลลัพธ์ทั้งหมด -2
// แต่...
neg >>> 0;
// ผลลัพธ์คือ 4294967294
4. การดำเนินการเปรียบเทียบ
การคัดลอกรหัสมีดังนี้:
// 4.1.1
// เมื่อเพิ่งตัดสินว่าอาร์เรย์มีความยาวเทียบกับการใช้สิ่งนี้:
ถ้า (array.length> 0) ...
// ... เพื่อกำหนดความถูกต้องโปรดใช้สิ่งนี้:
ถ้า (array.length) ...
// 4.1.2
// เมื่อเพิ่งตัดสินว่าอาร์เรย์ว่างเปล่าเมื่อเทียบกับการใช้สิ่งนี้:
if (array.length === 0) ...
// ... เพื่อกำหนดความถูกต้องโปรดใช้สิ่งนี้:
ถ้า (! array.length) ...
// 4.1.3
// เมื่อเพียงแค่ตัดสินว่าสตริงว่างเปล่าเมื่อเทียบกับการใช้สิ่งนี้:
ถ้า (สตริง! == "") ...
// ... เพื่อกำหนดความถูกต้องโปรดใช้สิ่งนี้:
ถ้า (สตริง) ...
// 4.1.4
// เมื่อเพิ่งตัดสินว่าสตริงว่างเปล่าเมื่อเทียบกับการใช้สิ่งนี้:
if (string === "") ...
// ... เพื่อกำหนดความถูกต้องโปรดใช้สิ่งนี้:
ถ้า (! สตริง) ...
// 4.1.5
// เมื่อเพิ่งตัดสินว่าการอ้างอิงเป็นจริงเมื่อเทียบกับการใช้สิ่งนี้:
ถ้า (foo === จริง) ...
// ... ตัดสินอย่างที่คุณคิดเพลิดเพลินไปกับประโยชน์ของคุณสมบัติในตัว:
ถ้า (foo) ...
// 4.1.6
// เมื่อเพิ่งตัดสินว่าการอ้างอิงเป็นเท็จเมื่อเทียบกับการใช้สิ่งนี้:
ถ้า (foo === เท็จ) ...
// ... แปลงเป็นจริงโดยใช้เครื่องหมายอัศเจรีย์
ถ้า (! foo) ...
// ... ควรสังเกตว่าสิ่งนี้จะตรงกับ 0, "", null, undefined, nan
// ถ้าคุณ _must_ เป็นเท็จประเภทบูลีนโปรดใช้สิ่งนี้:
ถ้า (foo === เท็จ) ...
// 4.1.7
// หากคุณต้องการคำนวณข้อมูลอ้างอิงอาจเป็นโมฆะหรือไม่ได้กำหนด แต่มันไม่ใช่เท็จ "" หรือ 0
// สัมพันธ์กับการใช้สิ่งนี้:
if (foo === null || foo === undefined) ...
// ... เพลิดเพลินไปกับประโยชน์ของ == ประเภทการหล่อเช่นนี้:
ถ้า (foo == null) ...
// โปรดจำไว้ว่าการใช้ == จะทำให้ `null` match` null 'และ `undefined`
// แต่ไม่ใช่ `false`," "หรือ 0
null == ไม่ได้กำหนด
ตัดสินค่าที่ดีที่สุดและแม่นยำที่สุดเสมอข้างต้นเป็นแนวทางมากกว่าความเชื่อ
การคัดลอกรหัสมีดังนี้:
// 4.2.1
// คำแนะนำสำหรับการแปลงประเภทและการดำเนินการเปรียบเทียบ
// ครั้งแรก `===`, `==` ตาม (เว้นแต่จะต้องมีการเปรียบเทียบประเภทหลวม)
// `===` ไม่ได้ทำการแปลงพิมพ์เสมอไปซึ่งหมายความว่า:
"1" === 1;
// เท็จ
// `==` แปลงประเภทซึ่งหมายความว่า:
"1" == 1;
// จริง
// 4.2.2
// บูลีนจริงและปลอม
// บูลีน:
จริงเท็จ
// จริง:
"ฟู", 1
// pseudo:
"", 0, null, undefined, nan, void 0
5. สไตล์การปฏิบัติ
การคัดลอกรหัสมีดังนี้:
// 5.1.1
// โมดูลที่ใช้งานได้จริง
(ฟังก์ชั่น (ทั่วโลก) {
var module = (function () {
var data = "Secret";
กลับ {
// นี่คือค่าบูลีน
บูล: จริง
// สตริง
สตริง: "สตริง",
// อาร์เรย์
อาร์เรย์: [1, 2, 3, 4],
// วัตถุ
วัตถุ: {
Lang: "en-us"
-
getData: function () {
// รับค่าของ `data '
ส่งคืนข้อมูล
-
setData: ฟังก์ชัน (ค่า) {
// ส่งคืนค่าที่กำหนดของ `data '
return (data = value);
-
-
-
// บางคนจะปรากฏที่นี่
// เปลี่ยนโมดูลของคุณให้เป็นวัตถุระดับโลก
global.module = โมดูล;
})( นี้ );
// 5.2.1
// ฟังก์ชั่นการสร้างที่ใช้งานได้จริง
(ฟังก์ชั่น (ทั่วโลก) {
ฟังก์ชั่น ctor (foo) {
this.foo = foo;
คืนสิ่งนี้;
-
ctor.prototype.getfoo = function () {
คืนสิ่งนี้ foo;
-
ctor.prototype.setfoo = function (val) {
return (this.foo = val);
-
// อย่าใช้ `new` เพื่อเรียกฟังก์ชั่นการสร้างคุณอาจทำสิ่งนี้:
var ctor = function (foo) {
ส่งคืน ctor ใหม่ (foo);
-
// เปลี่ยนฟังก์ชั่นการสร้างของเราให้เป็นวัตถุระดับโลก
global.ctor = ctor;
})( นี้ );
6. การตั้งชื่อ
A. คุณไม่ใช่คอมไพเลอร์/คอมเพรสเซอร์ของมนุษย์ดังนั้นลองเปลี่ยนเป็นหนึ่งเดียว
รหัสต่อไปนี้เป็นตัวอย่างของการตั้งชื่อที่แย่มาก:
การคัดลอกรหัสมีดังนี้:
// 6.A.1.1
// รหัสตัวอย่างการตั้งชื่อที่ไม่ดี
ฟังก์ชั่น Q (S) {
return document.querySelectorall (s);
-
var i, a = [], els = q ("#foo");
สำหรับ (i = 0; i <els.length; i ++) {a.push (els [i]);}
ไม่ต้องสงสัยเลยว่าคุณได้เขียนรหัสดังกล่าว - หวังว่ามันจะไม่ปรากฏอีกครั้งตั้งแต่วันนี้
นี่คือรหัสที่มีตรรกะเดียวกัน แต่มีการตั้งชื่อที่แข็งแกร่งกว่าการตั้งชื่อ (และโครงสร้างที่อ่านได้):
การคัดลอกรหัสมีดังนี้:
// 6.A.2.1
// ปรับปรุงรหัสตัวอย่างที่มีชื่อ
ฟังก์ชั่นค้นหา (ตัวเลือก) {
return document.querySelectorall (ตัวเลือก);
-
var idx = 0
องค์ประกอบ = []
Matches = Query ("#foo")
ความยาว = matches.length;
สำหรับ (; idx <length; idx ++) {
Elements.push (จับคู่ [idx]);
-
เคล็ดลับการตั้งชื่อเพิ่มเติมบางอย่าง:
การคัดลอกรหัสมีดังนี้:
// 6.A.3.1
// ชื่อสตริง
`dog 'เป็นสตริง
// 6.A.3.2
// ชื่ออาร์เรย์
`['Dogs']` เป็นอาร์เรย์ที่มีสตริง `สุนัข
// 6.A.3.3
// ชื่อฟังก์ชั่นวัตถุอินสแตนซ์ ฯลฯ
Camlcase; ฟังก์ชั่นและการประกาศ var
// 6.A.3.4
// ตั้งชื่อผู้สร้างต้นแบบ ฯลฯ
Pascalcase; สร้างฟังก์ชัน
// 6.A.3.5
// ชื่อนิพจน์ปกติ
rdesc = //;
// 6.A.3.6
// จากคู่มือสไตล์ห้องสมุดปิด Google
functionNameslikethis;
Variablenameslikethis;
Constructornameslikethis;
Enumnameslikethis;
Methodnameslikethis;
symbolic_constants_like_this;
B. เผชิญกับสิ่งนี้
นอกเหนือจากการใช้การโทรและใช้ที่รู้จักกันดี. bind (นี้) หรือฟังก์ชั่นที่เทียบเท่ากับมันเป็นที่ต้องการเสมอ สร้างการประกาศขอบเขตสำหรับการโทรครั้งต่อไปโดยใช้นามแฝงเมื่อไม่มีตัวเลือกที่ดีกว่า
การคัดลอกรหัสมีดังนี้:
// 6.B.1
อุปกรณ์ฟังก์ชั่น (opts) {
this.value = null;
// สร้างสตรีมแบบอะซิงโครนัสใหม่นี้จะถูกเรียกอย่างต่อเนื่อง
stream.read (opts.path, function (data) {
// ใช้สตรีมเพื่อส่งคืนค่าล่าสุดของข้อมูลและอัปเดตค่าของอินสแตนซ์
this.value = ข้อมูล;
}. -bind (นี่));
// ควบคุมความถี่ของการทริกเกอร์เหตุการณ์
setInterval (function () {
// เผยแพร่กิจกรรมที่ควบคุม
this.emit ("เหตุการณ์");
}. -bind (นี่), opts.freq || 100);
-
// สมมติว่าเราได้สืบทอด Eventemitter;)
เมื่อไม่สามารถรันได้ค่าเทียบเท่า. bind จะมีอยู่ในไลบรารี JavaScript ที่ทันสมัยที่สุด
การคัดลอกรหัสมีดังนี้:
// 6.B.2
// ตัวอย่าง: Lodash/Underscore, _.bind ()
อุปกรณ์ฟังก์ชั่น (opts) {
this.value = null;
stream.read (opts.path, _.bind (ฟังก์ชั่น (ข้อมูล) {
this.value = ข้อมูล;
}, นี้) );
setInterval (_. bind (function () {
this.emit ("เหตุการณ์");
}, สิ่งนี้), opts.freq || 100);
-
// ตัวอย่าง: jQuery.proxy
อุปกรณ์ฟังก์ชั่น (opts) {
this.value = null;
stream.read (opts.path, jQuery.proxy (ฟังก์ชั่น (ข้อมูล) {
this.value = ข้อมูล;
}, นี้) );
setInterval (jQuery.proxy (function () {
this.emit ("เหตุการณ์");
}, สิ่งนี้), opts.freq || 100);
-
// ตัวอย่าง: dojo.hitch
อุปกรณ์ฟังก์ชั่น (opts) {
this.value = null;
stream.read (opts.path, dojo.hitch (นี่, ฟังก์ชั่น (ข้อมูล) {
this.value = ข้อมูล;
-
setInterval (dojo.hitch (this, function () {
this.emit ("เหตุการณ์");
}), opts.freq || 100);
-
จัดหาผู้สมัครเพื่อสร้างนามแฝงสำหรับสิ่งนี้ด้วยตัวเองเป็นตัวระบุ สิ่งนี้มีแนวโน้มที่จะมีข้อบกพร่องและควรหลีกเลี่ยงมากที่สุด
การคัดลอกรหัสมีดังนี้:
// 6.B.3
อุปกรณ์ฟังก์ชั่น (opts) {
var self = this;
this.value = null;
stream.read (opts.path, function (data) {
self.value = ข้อมูล;
-
setInterval (function () {
self.emit ("เหตุการณ์");
}, opts.freq || 100);
-
C. ใช้สิ่งนี้
วิธีการต้นแบบหลายวิธีใน ES 5.1 มีแท็กพิเศษนี้ในตัวใช้ให้มากที่สุด
การคัดลอกรหัสมีดังนี้:
// 6.C.1
var obj;
obj = {f: "foo", b: "bar", q: "qox"};
Object.keys (obj) .Foreach (ฟังก์ชั่น (คีย์) {
// | นี่ | ตอนนี้ `obj`
console.log (นี้ [คีย์]);
}, obj); // <- พารามิเตอร์สุดท้ายคือ `thisarg`
// พิมพ์ออก ...
// "foo"
// "บาร์"
// "qox"
thisarg สามารถใช้ใน array.prototype.every, array.prototype.foreach, array.prototype.some, array.prototype.map และ array.prototype.filter
7. อื่น ๆ
ความคิดและความคิดที่ว่าส่วนนี้จะอธิบายไม่ได้เป็นเรื่องยาก แต่ได้รับการสนับสนุนให้อยากรู้อยากเห็นเกี่ยวกับแนวทางปฏิบัติที่มีอยู่เพื่อพยายามให้ทางออกที่ดีกว่าเพื่อทำงานการเขียนโปรแกรม JavaScript ทั่วไปให้เสร็จสมบูรณ์
A. หลีกเลี่ยงการใช้สวิตช์ การติดตามวิธีการที่ทันสมัยจะฟังก์ชั่นบัญชีดำพร้อมการแสดงออกของสวิตช์
ดูเหมือนว่าทั้ง Firefox และ Chrome ได้ทำการปรับปรุงอย่างมีนัยสำคัญในการสลับคำสั่ง http://jsperf.com/switch-vs-object-literal-vs-module
เป็นที่น่าสังเกตว่าการปรับปรุงสามารถเห็นได้ที่นี่: https://github.com/rwldrn/idiomatic.js/issues/13
การคัดลอกรหัสมีดังนี้:
// 7.a.1.1
// ตัวอย่างคำสั่งสวิตช์
สวิตช์ (foo) {
กรณี "อัลฟ่า":
อัลฟ่า ();
หยุดพัก;
กรณี "เบต้า":
เบต้า ();
หยุดพัก;
ค่าเริ่มต้น:
// สาขาเริ่มต้น
หยุดพัก;
-
// 7.a.1.2
// วิธีการที่สามารถรองรับการรวมกันและนำกลับมาใช้ใหม่คือการใช้วัตถุเพื่อจัดเก็บ "กรณี"
// ใช้ฟังก์ชั่นเพื่อทำการมอบหมาย:
กรณี VAR, ผู้แทน;
// ค่าส่งคืนมีไว้สำหรับคำอธิบายเท่านั้น
กรณี = {
Alpha: function () {
// คำแถลง
// ค่าส่งคืน
return ["alpha", arguments.length];
-
เบต้า: ฟังก์ชัน () {
// คำแถลง
// ค่าส่งคืน
return ["beta", arguments.length];
-
_default: function () {
// คำแถลง
// ค่าส่งคืน
return ["default", argument.length];
-
-
Delegator = function () {
var args, คีย์, ตัวแทน;
// แปลง `อาร์กิวเมนต์ 'เป็นอาร์เรย์
args = [] .slice.call (อาร์กิวเมนต์);
// แยกค่าสุดท้ายจาก `อาร์กิวเมนต์ '
key = args.shift ();
// เรียกสาขาเริ่มต้น
มอบหมาย = case._default;
// มอบหมายวิธีการจากวัตถุ
if (case.hasownproperty (คีย์)) {
มอบหมาย = กรณี [คีย์];
-
// ขอบเขตของ ARG สามารถตั้งค่าเป็นค่าเฉพาะ
// ในกรณีนี้ | null | ไม่เป็นไร
return delegate.apply (null, args);
-
// 7.a.1.3
// ใช้ API ใน 7.A.1.2:
ผู้แทน ("อัลฟ่า", 1, 2, 3, 4, 5);
// ["Alpha", 5]
// แน่นอนว่าค่าของคีย์ `case 'สามารถเปลี่ยนเป็นค่าใดก็ได้
var casekey, someuserInput;
// มีอินพุตที่เป็นไปได้ของบางรูปแบบหรือไม่?
SomeUserInput = 9;
if (SomeUserInput> 10) {
casekey = "alpha";
} อื่น {
casekey = "เบต้า";
-
// หรือ...
casekey = someuserInput> 10? "อัลฟ่า": "เบต้า";
// แล้ว...
ผู้แทน (CaseKey, SomeUserInput);
// ["เบต้า", 1]
// แน่นอนสามารถทำได้ ...
ผู้แทน ();
// ["ค่าเริ่มต้น", 0]
B. ค่าส่งคืนล่วงหน้าเพื่อปรับปรุงความสามารถในการอ่านรหัสโดยไม่มีความแตกต่างของประสิทธิภาพมากนัก
การคัดลอกรหัสมีดังนี้:
// 7.B.1.1
// ไม่ดี:
ฟังก์ชั่น returnlate (foo) {
var ret;
ถ้า (foo) {
ret = "foo";
} อื่น {
ret = "quux";
-
ผลตอบแทนผลตอบแทน;
-
// ดี:
ฟังก์ชั่น returnearly (foo) {
ถ้า (foo) {
กลับ "ฟู";
-
กลับ "Quux";
-
8. วัตถุดั้งเดิมและโฮสต์ (หมายเหตุ: ฉันคิดเสมอว่าวัตถุโฮสต์ไม่ควรแปลดังนั้นฉันจะแปลตามวิธีการเขียนทั่วไป)
หลักการพื้นฐานที่สุดคือ:
อย่าทำอะไรโง่ ๆ สิ่งต่างๆจะดีขึ้นเสมอ
เพื่อเสริมสร้างแนวคิดนี้โปรดดูการสาธิตนี้:
"ทุกอย่างได้รับอนุญาต: ส่วนขยายดั้งเดิม" โดย Andrew Dupont (JSCONF2011, Portland, Oregon)
http://blip.tv/jsconf/jsconf2011-andrew-dupont-everything-is-permitted-extending-built-ins-5211542
9. ความคิดเห็น
ความคิดเห็นบรรทัดเดียวอยู่เหนือรหัสเป็นตัวเลือกแรก
หลายบรรทัดก็โอเค
ควรหลีกเลี่ยงความคิดเห็นในตอนท้ายของบรรทัด!
วิธี JSDOC ก็ดีเช่นกัน แต่ต้องใช้เวลามากขึ้น
10. ใช้หนึ่งภาษาเพียงอย่างเดียว
ไม่ว่าจะเป็นภาษาใดที่โปรแกรมผู้ดูแลโปรแกรม (หรือทีม) กำหนดว่าโปรแกรมใช้โปรแกรมควรเขียนในภาษาเดียวกันเท่านั้น
ภาคผนวก
เครื่องหมายจุลภาคก่อน
โครงการทั้งหมดที่ใช้เอกสารนี้เป็นคู่มือสไตล์พื้นฐานไม่อนุญาตให้ใช้รูปแบบรหัสก่อนการคอมมิวนิสต์เว้นแต่ผู้เขียนจะระบุหรือกำหนดอย่างชัดเจน