วิธีปฏิบัติที่ดีที่สุดสำหรับ Javascript Object Oriented? [ปิด]


251

ฉันพบว่าตัวเองเขียนโปรเจคใหญ่ใน Javascript ฉันจำได้ว่าสิ่งสุดท้ายคือการผจญภัยเพราะแฮ็ค JS สามารถอ่านไม่ได้อย่างรวดเร็วและฉันต้องการให้โค้ดนี้สะอาด

ฉันใช้วัตถุเพื่อสร้าง lib แต่มีหลายวิธีในการกำหนดสิ่งต่าง ๆ ใน JS ซึ่งหมายถึงผลที่สำคัญในขอบเขตการจัดการหน่วยความจำพื้นที่ชื่อ ฯลฯ EG:

  • ใช้varหรือไม่;
  • การกำหนดสิ่งต่าง ๆ ในไฟล์หรือใน(function(){...})()สไตล์ jquery;
  • ใช้thisหรือไม่;
  • ใช้function myname()หรือmyname = function();
  • การกำหนดวิธีการในร่างกายของวัตถุหรือใช้ "ต้น";
  • เป็นต้น

ดังนั้นวิธีปฏิบัติที่ดีที่สุดเมื่อเข้ารหัสใน OO ใน JS คืออะไร

คำอธิบายทางวิชาการคาดหวังที่นี่จริงๆ เชื่อมโยงไปยังหนังสือต้อนรับอย่างอบอุ่นตราบใดที่พวกเขาจัดการกับคุณภาพและความทนทาน

แก้ไข:

ได้อ่านบ้าง แต่ฉันก็ยังสนใจในคำตอบของคำถามข้างต้นและแนวทางปฏิบัติที่ดีที่สุด


2
บางที "object oriented" ในชื่อเรื่องควรจะถูกแทนที่เป็น "modern"
viam0Zah

43
Hmmm, 79 upvotes, 82 favs, 91 upvotes สำหรับคำตอบ ... แต่สิ่งนี้ถูกปิดเพราะไม่สร้างสรรค์ ... ทำไม?
Brett Rossier

1
ฉันเขียนคลาส C ++ OOP แบบง่าย ๆ ในการเขียน javascript ด้วยไวยากรณ์ที่เรียบง่ายและเป็นธรรมชาติ ดูคำตอบของฉันที่นี่: stackoverflow.com/a/18239463/1115652

14
คำถามประเภทนี้จะถูกปิดเสมอ ฉันเข้าใจเหตุผลของเรื่องนี้ แต่เป็นคำถามที่สำคัญและเป็นที่นิยมเสมอ (และเนื่องจากฉันมักจะพบพวกเขาเมื่อฉันมีคำถามที่คล้ายกัน) ฉันสงสัยว่าใครสามารถพาเราไปยังสถานที่ที่เหมาะสมสำหรับถามพวกเขา?
KP MacGregor

2
@BrettRossier อะไรคือพลังที่ดีถ้าคุณไม่ใช้มัน? ดังนั้นการสาธิตสดของวิธีการสั่งจิกประชาธิปไตยทำงาน แน่นอนว่านักจิตวิทยาบางคนกำลังมองหามัน ...

คำตอบ:


288

ใช้ `var` หรือไม่

คุณควรแนะนำตัวแปรใด ๆ ด้วยvarคำสั่งมิฉะนั้นมันจะเข้าสู่ขอบเขตทั่วโลก

เป็นมูลค่าการกล่าวขวัญว่าในโหมดเข้มงวด ( "use strict";) การมอบหมายตัวแปรที่ไม่ได้ประกาศจะเกิดReferenceErrorขึ้น

ในปัจจุบัน JavaScript ไม่มีขอบเขตบล็อก โรงเรียน Crockford สอนให้คุณใส่งบ var ที่จุดเริ่มต้นของร่างกายฟังก์ชั่นในขณะที่คู่มือสไตล์ Dojo อ่านว่าตัวแปรทั้งหมดควรจะประกาศในขอบเขตที่เล็กที่สุดเท่าที่จะทำได้ (ในletคำสั่งและความหมายแนะนำใน JavaScript 1.7 ไม่ได้เป็นส่วนหนึ่งของมาตรฐาน ECMAScript)

เป็นวิธีปฏิบัติที่ดีในการผูกคุณสมบัติของวัตถุที่ใช้เป็นประจำกับตัวแปรในระบบเนื่องจากเร็วกว่าการค้นหาขอบเขตของขอบเขตทั้งหมด (ดูที่การเพิ่มประสิทธิภาพ JavaScript เพื่อประสิทธิภาพที่ยอดเยี่ยมและการใช้หน่วยความจำต่ำ )

การกำหนดสิ่งต่าง ๆ ในไฟล์หรือใน `(function () {... }) () '

หากคุณไม่จำเป็นต้องไปถึงออบเจ็กต์ของคุณนอกรหัสของคุณคุณสามารถรวมโค้ดทั้งหมดในนิพจน์ฟังก์ชัน - ซึ่งเรียกว่ารูปแบบโมดูล มันมีข้อดีด้านประสิทธิภาพและยังช่วยให้โค้ดของคุณมีขนาดเล็กลงและถูกบดบังในระดับสูง นอกจากนี้คุณยังสามารถมั่นใจได้ว่าจะไม่ทำให้เกิดเนมสเปซส่วนกลาง ฟังก์ชั่นการตัดคำใน JavaScriptยังช่วยให้คุณเพิ่มลักษณะการทำงานที่มุ่งเน้นด้าน เบ็นเชอร์รี่มีบทความเชิงลึกเกี่ยวกับรูปแบบโมดูลบทความในเชิงลึกเกี่ยวกับรูปแบบโมดูล

ใช้ `นี่ 'หรือไม่

หากคุณใช้การสืบทอดคลาสสิกเทียมใน JavaScript คุณสามารถหลีกเลี่ยงการใช้งานthisได้ยาก มันเป็นเรื่องของรสนิยมที่คุณใช้รูปแบบการรับมรดก สำหรับกรณีอื่น ๆ ให้ตรวจสอบบทความปีเตอร์ Michaux บนวิดเจ็ต JavaScript โดยไม่ต้อง "นี้"

ใช้ `function myname () 'หรือ` myname = function (); `

function myname()คือการประกาศฟังก์ชั่นและการแสดงออกฟังก์ชั่นที่ได้รับมอบหมายให้กับตัวแปรmyname = function(); mynameรูปแบบหลังบ่งชี้ว่าฟังก์ชั่นเป็นวัตถุชั้นหนึ่งและคุณสามารถทำอะไรกับพวกเขาเช่นเดียวกับตัวแปร ข้อแตกต่างระหว่างพวกเขาก็คือการประกาศฟังก์ชั่นทั้งหมดจะถูกยกขึ้นไปด้านบนของขอบเขตซึ่งอาจมีความสำคัญในบางกรณี มิฉะนั้นพวกเขาจะเท่ากัน function foo()เป็นรูปแบบชวเลข รายละเอียดเพิ่มเติมเกี่ยวกับรอกที่สามารถพบได้ในJavaScript กำหนดขอบเขตและ Hoistingบทความ

การกำหนดวิธีการในร่างกายของวัตถุหรือใช้ "ต้น"

มันขึ้นอยู่กับคุณ. JavaScript มีรูปแบบการสร้างวัตถุสี่แบบ: แบบคลาสสิก, ต้นแบบ, การทำงานและชิ้นส่วน ( Crockford, 2008 ) แต่ละคนมีทั้งข้อดีและข้อเสียดูCrockford ในวิดีโอพูดคุยของเขาหรือรับหนังสือThe Good Partsตามที่Anon แนะนำอานนท์แนะนำแล้ว

กรอบ

ฉันขอแนะนำให้คุณเลือกเฟรมเวิร์ก JavaScript ศึกษาระเบียบและสไตล์ของพวกเขาและค้นหาแนวทางปฏิบัติและรูปแบบที่เหมาะสมกับคุณที่สุด ตัวอย่างเช่นDojo Toolkitจัดเตรียมเฟรมเวิร์กที่มีประสิทธิภาพในการเขียนโค้ด JavaScript เชิงวัตถุซึ่งรองรับการสืบทอดหลาย ๆ

รูปแบบ

สุดท้ายมีบล็อกที่ทุ่มเทให้กับการสำรวจรูปแบบ JavaScript ที่พบบ่อยและต่อต้านรูปแบบ- ตรวจสอบคำถามด้วยมีมาตรฐานการเข้ารหัสสำหรับ JavaScript หรือไม่ ใน Stack Overflow


1
"JavaScript มีรูปแบบการสร้างวัตถุสี่แบบ: แบบคลาสสิก, ต้นแบบ, การทำงานและชิ้นส่วน" - ฉันขอขอบคุณบทสรุปของข้อดีและข้อเสียที่นี่
BadHorsie

2
" letคำสั่งและคำจำกัดความที่แนะนำใน JavaScript 1.7 ไม่ได้เป็นส่วนหนึ่งของมาตรฐาน ECMAScript" ตอนนี้มันเป็นส่วนหนึ่งของ ES6
MichałPerłakowski

13

ฉันจะเขียนสิ่งที่ฉันอ่านหรือใส่ในใบสมัครตั้งแต่ฉันถามคำถามนี้ ดังนั้นคนที่อ่านมันจะไม่ผิดหวังเพราะคำตอบส่วนใหญ่คือ RTMF ที่แฝงตัวอยู่ (แม้ว่าฉันต้องยอมรับหนังสือแนะนำก็ดี)

การใช้ Var

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

ในวัตถุทำให้ var ตัวแปรส่วนตัว หากคุณต้องการประกาศตัวแปรสาธารณะให้ใช้this.my_var = my_valueเพื่อทำเช่นนั้น

ประกาศวิธีการ

ใน JS พวกเขาเป็นวิธีการประกาศวิธีการมากมาย สำหรับโปรแกรมเมอร์ OO วิธีที่เป็นธรรมชาติและมีประสิทธิภาพที่สุดคือการใช้ไวยากรณ์ต่อไปนี้:

ด้านในของวัตถุ

this.methodName = function(param) {

/* bla */

};

มีข้อเสียคือ: ฟังก์ชั่นด้านในจะไม่สามารถเข้าถึง "this" เนื่องจากขอบเขต JS ตลก Douglas Crockford แนะนำให้หลีกเลี่ยงข้อ จำกัด นี้โดยใช้ตัวแปรเฉพาะที่ชื่อ "ว่า" ดังนั้นมันจึงกลายเป็น

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

อย่าพึ่งพาปลายสายอัตโนมัติ

JS พยายามที่จะเพิ่ม;ในตอนท้ายของบรรทัดโดยอัตโนมัติถ้าคุณลืม อย่าพึ่งพาพฤติกรรมนี้เนื่องจากคุณจะได้รับข้อผิดพลาดที่ทำให้ไม่สามารถแก้ไขข้อบกพร่องได้


8

ครั้งแรกควรจะอ่านเกี่ยวกับการเขียนโปรแกรมต้นแบบตามเพื่อให้คุณรู้ว่าสิ่งที่ชนิดของสัตว์ที่คุณจัดการกับและจากนั้นจะดูที่คู่มือสไตล์ JavaScript ที่ MDCและJavaScript หน้า MDC ฉันยังพบว่าดีที่สุดในการบังคับคุณภาพรหัสด้วยเครื่องมือเช่น JavaScript Lintหรือตัวแปรอื่น ๆ

ปฏิบัติที่ดีที่สุดด้วยเสียง OO มากขึ้นเช่นคุณต้องการที่จะหารูปแบบกว่าสมาธิกับคุณภาพรหัสเพื่อให้ดูที่การค้นหาของ Google: รูปแบบ JavaScriptและรูปแบบ jQuery


5

คุณอาจต้องการตรวจสอบความลับของ JavaScript นินจาโดย John Resig (jQuery) "หนังสือเล่มนี้มีวัตถุประสงค์เพื่อใช้เป็นนักพัฒนา JavaScript ระดับกลางและให้ความรู้แก่เขาว่าเขาต้องการสร้างห้องสมุด JavaScript ข้ามเบราว์เซอร์ตั้งแต่แรกขึ้นไป"

ร่างพร้อมใช้งานผ่านผู้เผยแพร่: http://www.manning.com/resig/

Douglas Crockford มีบทความจาวาสคริปต์ที่ดีในหน้าแรกของเขา: http://www.crockford.com/


5

ฉันมักจะรู้สึกเหมือนผู้ชายคนเดียวที่นี่ซึ่งใช้ MooTools สำหรับจาวาสคริปต์ของฉัน

มันย่อมาจากM y O bject O riented Tools, mootools

ฉันชอบที่จะใช้ OOP ในรูปแบบจาวาสคริปต์ คุณสามารถใช้งานคลาสของพวกเขาพร้อมกับ jQuery ด้วยดังนั้นคุณไม่จำเป็นต้องทิ้ง jquery (แม้ว่า mootools ก็ทำได้เช่นกัน)

อย่างไรก็ตามให้ลิงค์แรกอ่านดีและดูว่าคุณคิดอย่างไรลิงค์ที่สองคือเอกสาร mootools

MooTools & มรดก

คลาส MooTools


ฉันไม่ได้พยายามที่จะงอภาษาเพื่อให้เหมาะกับคุณ habbit เก่าเป็นสิ่งที่ดี มันเหมือนกับคนนี้ใน C โดยใช้ # เพื่อแทนที่ทำให้ดูเหมือนฟอร์แทรนหรืออย่างอื่น ฉันคิดว่าคุณควรพยายามเรียนรู้วิธีการทำงานของภาษา (และวิธีปฏิบัติที่ดีที่สุดของมันและใช้วิธีที่ไม่รบกวนคุณมากเกินไป แต่อย่าเปลี่ยนมันจริงๆ
e-Satis

2
ฉันคิดว่าระบบวัตถุ MooTools นั้นค่อนข้างหรูหราและช่วยให้ฉันจัดระเบียบ / ใส่รหัสได้
awesomo

0

นี่คือหนังสือที่ครอบคลุมฐานส่วนใหญ่:

Object Oriented Javascript สำหรับแอ็พพลิเคชันและไลบรารีคุณภาพสูง


ขอบคุณ แต่ฉันไม่ได้มองหาพื้นฐาน ฉันสามารถรหัส (สกปรก) JS ที่ทำงานได้ หรืออย่างน้อยที่สุดเวลา :-) ฉันต้องการแนวทางในการเขียนรหัสเดียวกัน แต่ถูกต้อง
e-Satisfaction
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.