ความสำคัญของรูปแบบการออกแบบด้วย Javascript, NodeJs และคณะ


36

ด้วย Javascript ที่ดูเหมือนจะเป็นภาษาการเขียนโปรแกรมที่แพร่หลายของเว็บในอีกไม่กี่ปีข้างหน้าเฟรมเวิร์กใหม่ที่โผล่ขึ้นมาทุก ๆ ห้านาทีและการเขียนโปรแกรมที่ขับเคลื่อนด้วยเหตุการณ์ทำให้ทั้งเซิร์ฟเวอร์และไคลเอนต์:

คุณในฐานะนักพัฒนา Javascript พิจารณารูปแบบการออกแบบดั้งเดิมว่ามีความสำคัญหรือมีความสำคัญน้อยกว่าที่เคยใช้กับภาษา / สภาพแวดล้อมอื่น ๆ หรือไม่?

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


5
บางคนยืนยันว่ารูปแบบการออกแบบ (โดยเฉพาะอย่างยิ่ง GoF) เป็นสัญญาณของความบกพร่องทางภาษา (ดูการสนทนานี้ ) เนื่องจากจาวาสคริปต์นั้นเป็นต้นแบบและใช้งานได้จริงฉันจึงกล่าวได้ว่าชุดรูปแบบอื่นมีผลบังคับใช้ / มีประโยชน์

สนใจมากในการตอบสนอง ... +1 สำหรับคำถาม :)
usoban

2
หนังสือJavaScript Patternsโดย Stoyan Stefanov เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับรูปแบบมากมายที่คุณสามารถใช้ใน JS หลายคนมีอยู่โดยเฉพาะสำหรับ JS และไม่ได้สำหรับภาษาอื่น ๆ
IgorGanapolsky

Javascript มีรูปแบบของตัวเอง นอกจากหนังสือที่กล่าวถึงโดย Igor แล้วยังมีรูปแบบการออกแบบจาวาสคริปต์การเรียนรู้ของ Addy Osmani ซึ่งไม่มีค่าใช้จ่าย
user16764

ความซ้ำซ้อนที่เป็น
ริ้น

คำตอบ:


23

คุณในฐานะนักพัฒนา Javascript พิจารณารูปแบบการออกแบบดั้งเดิมว่ามีความสำคัญหรือมีความสำคัญน้อยกว่าที่เคยใช้กับภาษา / สภาพแวดล้อมอื่น ๆ หรือไม่?

รูปแบบการออกแบบแบบคลาสสิกใช้ไม่ได้กับ JavaScript

สิ่งที่นำไปใช้คือการเขียนรหัสและโมดูลการทำงาน

คุณควรใช้ส่วนผสมของตัวสร้างและฟังก์ชั่นชั้นหนึ่ง

ในฐานะนักพัฒนาจาวาสคริปต์ฉันดันไปปฏิบัติกับจาวาสคริปต์เป็น LISP แทนจาวา ดังนั้นพยายามเลียนแบบ monads และรหัสลักษณะการทำงานระดับสูงแทนที่จะลองเลียนแบบรหัส OOP แบบดั้งเดิม

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

รูปแบบการออกแบบอีกครั้งไม่ได้ใช้จริงมาก แต่ด้านล่างเป็นโครงสร้างที่สำคัญสามประการ

  1. การใช้งานของการปิด
  2. การใช้ฟังก์ชั่นชั้นหนึ่ง
  3. การใช้โรงงานวัตถุที่มีหรือไม่มี new

โปรดทิ้งบริบทบางอย่างไว้ซึ่งฉันสามารถแสดงตัวอย่างของเทคนิคเหล่านี้เปรียบเทียบกับการทำโค้ดชนิดเดียวกันโดยใช้รูปแบบการออกแบบดั้งเดิม

ลองมาดูรูปแบบการออกแบบคลาสสิกบางส่วนและวิธีการใช้ใน js รวมถึงรูปแบบทางเลือกที่เหมาะสมกับ js:

รูปแบบการสังเกตการณ์:

ในนี้เป็นเพียงnode.js events.EventEmitterในjQueryนี้เป็น&&$.fn.bind $.fn.triggerในbackboneนี้อยู่และBackbone.Events.trigger Backbone.Events.bindนี่เป็นรูปแบบทั่วไปที่ใช้ในรหัสประจำวัน

ฉันไม่เคยหยุดและคิดว่า "เฮ้ฉันใช้รูปแบบผู้สังเกตการณ์ที่นี่!" ไม่มีนี่เป็นเพียงวิธีระดับต่ำในการส่งข้อความไปรอบ ๆ หรือวิธีเปลี่ยนการเรียงซ้อน

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

ในWebSocketprototcol เรามี.onสิ่งที่เราใช้ผูกกับon("message", ...เหตุการณ์ ครั้งนี้เป็นเรื่องธรรมดามาก แต่ก็เป็นผู้สังเกตการณ์ในกระแสค่อนข้างแล้ว OOP while (byte b = Stream.ReadNextByte())คลาสสิกของคุณตาม

สิ่งเหล่านี้ล้วนเป็นการใช้รูปแบบการสังเกตการณ์ที่ทรงพลัง แต่นี่ไม่ใช่รูปแบบที่คุณใช้ นี่เป็นส่วนที่เรียบง่ายของภาษา นี่เป็นเพียงรหัส

รูปแบบของที่ระลึก:

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

function SomeObject() {
    var internalState;

    this.toJSON = function() {
        return internalState;
    }

    this.set = function(data) {
        internalState = data;
    }

    this.restore = function(json) {
        internalState = JSON.parse(json);
    }
}

var o = new SomeObject();
o.set("foo"); // foo
var memento = JSON.stringify(o);
o.set("bar"); // bar
o.restore(memento);

ใน JavaScript เราให้การสนับสนุน API สำหรับของที่ระลึก เพียงกำหนดวิธีการที่เรียกว่าtoJSONบนวัตถุใด ๆ เมื่อคุณเรียกJSON.stringifyมันจะโทรหา.toJSONออบเจ็กต์ของคุณภายในเพื่อรับข้อมูลจริงที่คุณต้องการทำให้เป็นอันดับกับ JSON

สิ่งนี้ช่วยให้คุณทำสแนปชอตของรหัสของคุณได้เล็กน้อย

อีกครั้งฉันไม่ได้ตระหนักถึงรูปแบบที่ระลึกนี้ นี่เป็นเพียงการใช้เครื่องมือการทำให้เป็นอนุกรมที่เป็น JSON

รูปแบบของรัฐ / รูปแบบกลยุทธ์:

คุณไม่ต้องการรูปแบบสถานะ คุณมีฟังก์ชั่นชั้นหนึ่งและประเภทแบบไดนามิก เพียงแค่ฉีดฟังก์ชั่นหรือเปลี่ยนคุณสมบัติได้ทันที


Raynos คำตอบที่ดี สำหรับตัวอย่างฉันคิดเพิ่มเติมจากระดับแนวคิด ตัวอย่างเช่น: "รูปแบบการสังเกตการณ์ช่วยออกในสถานการณ์ ..."

@Lewis เลือกรูปแบบการออกแบบบางอย่างที่คุณชอบและฉันจะพยายามแนะนำทางเลือกการทำงานที่เหมาะสมมากขึ้นในภายหลัง
Raynos

แนวทางและคำตอบของความพยายามนั้นยอดเยี่ยมมาก Raynos ขอบคุณ
ลูอิส

@Lewis ฉันพยายามดูอีกสองสามครั้ง แต่นิ่งงันเพราะพวกเขาทั้งหมดได้รับการปรับแต่งสำหรับภาษา OO คลาสสิกที่เข้มงวด หากมีรูปแบบการออกแบบเฉพาะอื่น ๆ ที่คุณต้องการให้ฉันดูให้ฉันรู้
Raynos

คุณลืมเกี่ยวกับรูปแบบต้นแบบ - จาวาสคริปต์ที่โง่ไม่ได้มี oop ปกติ )
c69

10

ใช้คำตอบนี้เป็นความเห็นส่วนตัว

คุณในฐานะนักพัฒนา Javascript พิจารณารูปแบบการออกแบบดั้งเดิมว่ามีความสำคัญหรือมีความสำคัญน้อยกว่าที่เคยใช้กับภาษา / สภาพแวดล้อมอื่น ๆ หรือไม่?

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

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

โดยทั่วไปฉันจะบอกว่ารูปแบบการออกแบบแบบดั้งเดิมมีความสำคัญเท่ากับภาษาอื่น ๆ แต่รูปแบบเฉพาะของ JavaScript นั้นมีความสำคัญมากกว่าแบบดั้งเดิม

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

ในบรรดารูปแบบการออกแบบ JavaScript ที่สำคัญฉันมักใช้สิ่งเหล่านี้:

1. รูปแบบตัวสร้าง (พร้อมต้นแบบ)

โดยเฉพาะอย่างยิ่งทางฝั่งเซิร์ฟเวอร์เมื่อทำการเขียนสิ่ง node.js เพราะมันเหมาะสำหรับการเขียนโมดูลแม้ว่ามันจะไม่มีการห่อหุ้มแบบดั้งเดิม นอกจากนี้ยังเป็นที่นิยมสำหรับนักพัฒนาอื่น ๆ อีกมากมายหากคุณเรียกดูที่เก็บใน GitHub ดังนั้นความคุ้นเคยกับรูปแบบนี้จะช่วยให้คุณเข้าใจรหัสอื่น ๆ ได้ดีขึ้น

2. เปิดเผยรูปแบบของโมดูล

เสนอต้นแบบที่มีการห่อหุ้ม

3. รูปแบบแห้ง

นี่เป็นสถานการณ์ที่ค่อนข้างเฉพาะแม้ว่านักพัฒนาซอฟต์แวร์ทุกคนควรใช้ให้มากที่สุดเท่าที่จะเป็นไปได้ (im)


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

2

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

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

ผู้คนจะคิดวิธีแก้ปัญหาที่เหมาะสมกับรูปแบบการออกแบบด้วยตัวเอง แต่รูปแบบการออกแบบช่วยในการกำหนดคำศัพท์และแนวคิดมาตรฐานที่จะเป็นประโยชน์

ไม่มีอะไรพิเศษที่น่าทึ่งเกี่ยวกับรูปแบบสิ่งที่ดีที่สุดคือพวกเขาเป็นแนวคิดที่ถูกทำให้เป็นนักบุญและถูกนิยามในรูปแบบที่มีประโยชน์ซ้ำ ๆ


1

คุณเป็นนักพัฒนา Javascript หรือไม่พิจารณารูปแบบการออกแบบแบบดั้งเดิมว่ามีความสำคัญหรือมีความสำคัญน้อยกว่า

พวกเขามีความสำคัญ

นี่เป็นเพราะแนวคิดสำหรับการแก้ปัญหาที่นำมาใช้ใหม่สามารถอยู่เหนือภาษา - การเปลี่ยนแปลงทางไวยากรณ์ - การเปลี่ยนแปลงการใช้งาน - ความคิดสำหรับรูปแบบยังคงมีอยู่

นักพัฒนาจากภาษาใด ๆ สามารถเรียนรู้ JS ขั้นสูงด้วยรูปแบบการเรียนรู้ไม่ใช่ไวยากรณ์ คนที่ไม่ทราบว่าสิ่งนี้จะหายไป

โปรดตั้งชื่อรูปแบบการออกแบบสามอันดับแรกที่คุณใช้เป็นนักพัฒนา Javascript เป็นประจำ

มีรูปแบบที่ใช้บ่อยซึ่งบางคนก็ "โต้เถียง" ต่อ อย่างไรก็ตามพวกเขารู้ดีเพราะเป็นเรื่องธรรมดาและมีประสิทธิภาพใน JS ขั้นสูง

1- เนมสเปซ - ห่อรหัสของคุณในวัตถุ

var x = (function () {}) ();

2- ObjectConfiguration รูปแบบเหมือนโรงงาน -Pass วัตถุไปยังฟังก์ชั่นไม่ได้เป็นพวงของ vars

var product = factory ({});

3- ฟังก์ชั่นการโทรกลับ - ผ่านฟังก์ชั่นเป็นพารามิเตอร์ที่จะถูกเรียกเมื่องานเสร็จสมบูรณ์

ฟังก์ชัน longTask (function () {// โทรหาฉันเมื่อเสร็จสิ้น});

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

คำถามที่ยอดเยี่ยม

หวังว่าจะช่วย

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