JavaScript เป็นภาษาสคริปต์ที่เป็นของเครือข่าย!
จาวาสคริปต์ใช้เว็บเพจนับล้านเพื่อปรับปรุงการออกแบบตรวจสอบรูปแบบตรวจจับเบราว์เซอร์สร้างคุกกี้และอื่น ๆ
JavaScript เป็นภาษาสคริปต์ที่ได้รับความนิยมมากที่สุดบนอินเทอร์เน็ต
JavaScript ใช้งานง่าย! คุณจะรักมัน!
JavaScript เป็นภาษาสคริปต์ที่ตีความด้วยไวยากรณ์ที่ยืดหยุ่นทำให้ผู้คนต่างสามารถเขียนฟังก์ชั่นที่แตกต่างกันได้หลายวิธี วิธีการจัดระเบียบรหัส JavaScript เพื่อให้ผู้อื่นเห็นได้อย่างรวดเร็วว่าคุณไม่ง่าย? คุณรอคอยคนอื่นถอนหายใจหลังจากอ่านรหัสของคุณ "ปรากฎว่าคุณสามารถเขียนด้วยวิธีนี้ได้"?
n วิธีการเขียนฟังก์ชั่นที่ไม่ระบุชื่อ
ฟังก์ชั่น js 'ไม่ระบุชื่อเป็นฟังก์ชั่นที่ดำเนินการด้วยตนเองพร้อมชื่อฟังก์ชั่นที่ไม่ได้ประกาศและรูปแบบมีดังนี้:
(การทำงาน(){})();ในความเป็นจริงเรามักจะใส่ ";" หน้าโครงการ:
;การทำงาน(){}();เนื่องจากไวยากรณ์ของ JS สามารถละเว้นอัฒภาค แต่กลไกนี้ยังสามารถนำไปสู่ข้อผิดพลาดที่ไม่คาดคิด เพื่อหลีกเลี่ยงข้อผิดพลาดทางไวยากรณ์ที่เกิดจากการรวมและบีบอัดรหัสลงในไฟล์หลังจากเปิดตัวแล้วเพิ่ม ";" สามารถหลีกเลี่ยงข้อผิดพลาดที่ไม่รู้จัก
แต่บางครั้งเราเห็นว่าห้องสมุดหรือปลั๊กอินของคนอื่นเขียนฟังก์ชั่นที่ไม่ระบุชื่อเช่นนี้:
+function () {} ();"+" เป็นตัวดำเนินการที่นี่และผู้ประกอบการมีลำดับความสำคัญสูงมากดังนั้นส่วนหนึ่งของการประกาศฟังก์ชั่นทางด้านขวาด้วยวงเล็บ (จริง ๆ แล้ววิธีการเขียนฟังก์ชั่นการดำเนินการ) จะถูกดำเนินการโดยตรง ในความเป็นจริงมันไม่เพียง แต่เป็นเครื่องหมาย "+" ด้านหน้า แต่ผู้ให้บริการเช่น "-", "!", "~" และ "++" สามารถใช้งานได้ ที่นี่เราเป็นเพียงการแนะนำส่วนขยาย วิธีการเขียนเฉพาะที่ใช้ขึ้นอยู่กับมาตรฐานแบบครบวงจรของทีม
ละทิ้ง Math.ceil () และ Math.Floor Rounding
บางทีฉันอาจเคยเห็นสัญลักษณ์ทั้งสองนี้ ~~ และ | 0 ในรหัสอื่น ๆ และดูผลลัพธ์การทำงานโดยตรง:
>> var a1 = 1.23 >> ~~ a11 >> var a2 = 2.345 >> a2 | 02 >> var a3 = -3.45 >> ~~ a3-3 >> var a4 = -4.5 >> a4 | 0-4
โปรดทราบว่าวิธีการเขียนนี้ไม่ใช่ต้นฉบับ แต่เพิ่งอ้างถึงการวิเคราะห์และอธิบายวิธีการเขียนทางเลือกนี้ คำอธิบายง่ายๆคือ ~ เป็นตัวดำเนินการแบบผกผันบิตซึ่งสามารถแปลงหมายเลขจุดลอยตัวเป็นจำนวนเต็มโดยทิ้งบิตทั้งหมดหลังจากจุดทศนิยม จำนวนเต็มบวกสามารถแปลงเป็นค่าเลขฐานสิบหกที่ไม่ได้ลงชื่อ จากนั้นผกผัน (~~) ลบและลบอีกครั้งเพื่อให้ได้ค่าบวกและรับจำนวนเต็มดั้งเดิม เป็นเพียงว่าเขาจงใจและไม่ถูก จำกัด คุณคิดว่าเป็นการเพิ่มประสิทธิภาพหรือไม่?
หมายเหตุ: หากคุณต้องการดำเนินการปัดเศษอย่างเข้มงวดคุณต้องใช้วิธีนี้ด้วยความระมัดระวังคุณยังต้องใช้ฟังก์ชั่นคณิตศาสตร์
ถ้าและอื่น ๆ ไม่ใช่คนเดียว
การใช้เงื่อนไข IF-ELSE นั้นเป็นตรรกะที่ชัดเจนมากมันไม่ได้ดูกระชับมากเมื่อข้อมูลการประมวลผลไม่ใหญ่:
if (a === 1) {// ขอแนะนำอย่างยิ่งให้ใช้สัญลักษณ์ที่เท่ากันอย่างเคร่งครัด "===" ที่นี่และการแปลงประเภทจะไม่ดำเนินการ A = 2} อื่นถ้า (A === 3) {A = 4} อื่น {A = 5}ดูสิ่งต่อไปนี้เพื่อใช้ || และ && เพื่อให้รหัสลดน้ำหนัก:
((a === 1) && (จริง, a = 2)) || ((a === 3) && (จริง, a = 4)) || (a = 5)
มันจะทำในบรรทัดเดียวและคุณจะลดน้ำหนักได้สำเร็จ - และ && หลักการง่ายๆคือไม่ต้องพูดถึง ไม่ใช่เรื่องง่ายที่จะเข้าใจเมื่อใช้ตัวดำเนินการเครื่องหมายจุลภาค คุณสามารถเปลี่ยนเป็นผู้ดำเนินการ Ternary ได้ต่อไป:
(a === 1)? A = 2 :( (a === 3)? (a = 4): (a = 5))
วิธีการเขียนนี้ดูเหมือนจะง่ายพอ แต่มันจะยากสำหรับผู้อื่นที่จะเห็นรหัสของคุณ
แทนที่โครงสร้างการเย็บของสตริงที่น่ารำคาญด้วย toString
หากเราต้องการสร้างโครงสร้าง DOM แบบไดนามิกโดยทั่วไปเราจะใช้มันเช่นนี้:
var template = "<div>"+ "<h2> {title} </h2>"+ "<div class = 'เนื้อหา' yattr = ''> {content} </div>"+ "</div>"หากมีการเพิ่มแอตทริบิวต์และพารามิเตอร์ต่างๆมันเป็นเรื่องง่ายที่จะรายงานข้อผิดพลาดเมื่อคำพูดขนาดใหญ่และขนาดเล็กสับสน อย่างไรก็ตาม ES6 จัดเตรียมสตริงเทมเพลตเพื่อช่วยเราแก้ปัญหานี้คุณสามารถเขียนได้เช่นนี้:
var template = <div> <h2> {title} </h2> <div class = 'เนื้อหา' yattr = ''> {เนื้อหา} </div> </div>แต่ปัญหาคือ ES6 ยังไม่มาถึงอย่างเป็นทางการ ... อย่ากลัวฟังก์ชั่นการทำหน้าที่จะแก้ปัญหาความอับอายเมื่อเราไม่ได้เชื่อมต่อ:
var rcomment = ////*([/s/s]*?)/*///; // ฟังก์ชั่นสตริงคูณ MS (fn) {return fn.toString (). การจับคู่ (rcomment) [1]}; ms (function () {/ * <div> <h2> {title} </h2> <div class = 'เนื้อหา' yattr = ''> {content} </div> </div> */})เอาต์พุตที่นี่เหมือนกับเอาต์พุตสตริงก่อนหน้า โปรแกรมเมอร์ front-end ต้องให้ความสนใจกับโครงสร้าง DOM ของตนเองเท่านั้น
เพิ่มการสนับสนุนโมดูล AMD รหัสพรอมต์ B
ประกาศข้อกำหนดโมดูล AMD (คำจำกัดความโมดูลแบบอะซิงโครนัส) ไปยังรหัสที่คุณเขียนเพื่อให้ผู้อื่นสามารถโหลดโมดูลของคุณโดยตรงผ่านข้อกำหนด AMD หากคนอื่นไม่โหลดโมดูลของคุณผ่านข้อกำหนดคุณสามารถส่งคืนวัตถุทั่วโลกทั่วไปได้อย่างหรูหรา มาดูวิธีการเขียนของ jQueryui:
(ฟังก์ชั่น (โรงงาน) {ถ้า (typeof define === "function" && define.amd) {// amd mode. และพึ่งพาปลั๊กอิน "jQuery" define (["jQuery"], โรงงาน);เปลี่ยนเป็นโครงสร้างของโมดูล AMD เพื่อให้รหัสของคุณเหมาะสมยิ่งขึ้นสำหรับการพึ่งพาสคริปต์การโหลดด้านเบราว์เซอร์ เขียนโค้ดในรูปแบบนี้เพื่อให้แน่ใจว่าคนอื่นรู้ว่าคุณเป็นนักพัฒนามืออาชีพทันทีที่คุณดูรหัส
วิธีการสืบทอดที่ดีที่สุด
JavaScript มีวิธีการสืบทอดมากกว่าสิบวิธีทั้งขนาดใหญ่และขนาดเล็ก ข้อดีและข้อเสียของวิธีการเขียนแต่ละวิธีนั้นแตกต่างกันและแต่ละวิธีจะไม่แสดงรายการทีละวิธี ใช้วิธีการสืบทอดร่วมกันเป็นตัวอย่างการสืบทอดต้นแบบ:
ฟังก์ชัน parent () {} function child () {} child.prototype = parent.prototypechild.prototype.constructor = child;วิธีนี้ชี้ให้เห็นตัวชี้ที่บันทึกไว้ใน child.prototype และ parent.prototype ไปยังวัตถุเดียวกันดังนั้นหากมีการขยายคุณสมบัติบางอย่างในต้นแบบวัตถุวัตถุเด็กเพื่อให้ต้นแบบวัตถุแม่จะยังคงสืบทอดต่อไป ดังนั้นในการแก้ปัญหานี้ลองยืมวิธีการเขียนตัวสร้างชั่วคราว:
ฟังก์ชั่นว่างเปล่า () {} emport.prototype = parent.prototype; child.prototype = new Empty (); child.prototype.constructor = child;ด้วยวิธีนี้คุณสมบัติและวิธีการต้นแบบของวัตถุแม่ได้รับการปกป้อง "Optimal" ค่อนข้างเกินจริง แต่ในการเปรียบเทียบ ฉันเชื่อว่าทุกคนมีรูปแบบการเขียนของตัวเองและยังมีข้อดีและข้อเสียของการกู้ยืมเงินและนำไปใช้เพื่อใช้การสืบทอดแอตทริบิวต์ ความยาวมี จำกัด และฉันจะไม่แนะนำพวกเขาทีละคน
สรุป
วิธีการเขียนทางเลือกทั้งหมดของ JavaScript ที่กล่าวถึงข้างต้นคือน้ำตาลไวยากรณ์เพื่อให้เข้าใจได้ง่ายหรือปรับปรุงประสิทธิภาพ วิธีการดังกล่าวเป็นสิ่งที่ดีกว่าเช่นการฝึกฝนการละเว้น if-else ตามที่กล่าวไว้ข้างต้น บางตัวได้รับการออกแบบมาเพื่อปรับปรุงความเข้ากันได้และประสิทธิภาพของรหัสของเราเช่น AMD และวิธีการสืบทอด ... ฉันเป็นมือใหม่และมีเนื้อหาที่ไม่สมบูรณ์และไม่สามารถอธิบายได้ในเนื้อหาข้างต้น
เนื้อหาข้างต้นเป็นการแนะนำวิธีการเขียนทางเลือกที่เกี่ยวข้องสำหรับ JavaScript ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!