Views vs Components ใน Ember.js

143

ฉันกำลังเรียนรู้ ember.js และฉันพยายามเข้าใจความแตกต่างระหว่างมุมมองและองค์ประกอบ ฉันเห็นว่าทั้งสองเป็นวิธีในการสร้างส่วนประกอบที่ใช้ซ้ำได้

จากเว็บไซต์ของ Ember ในมุมมอง:

มุมมองใน Ember.js โดยทั่วไปแล้วจะถูกสร้างขึ้นด้วยเหตุผลดังต่อไปนี้:
- เมื่อคุณต้องการการจัดการเหตุการณ์ผู้ใช้ที่ซับซ้อน
- เมื่อคุณต้องการสร้างองค์ประกอบที่ใช้งานได้อีกครั้ง

จากเว็บไซต์ของ Ember เกี่ยวกับส่วนประกอบ:

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

ดังนั้นความแตกต่างที่สำคัญระหว่างมุมมองและองค์ประกอบคืออะไร? และจะเป็นตัวอย่างทั่วไปที่ฉันต้องการใช้มุมมองมากกว่าองค์ประกอบและในทางกลับกันคืออะไร

javascript ember.js handlebars.js

— แบรดลีย์ทราเกอร์
แหล่งที่มา

คำตอบ:

170

Ember.View

Ember.Viewปัจจุบันถูก จำกัด ไว้ที่แท็กที่ถูกสร้างขึ้นสำหรับคุณโดยของ W3C แต่ถ้าคุณต้องการกำหนดแท็ก HTML เฉพาะแอปพลิเคชันของคุณเองและใช้พฤติกรรมของพวกเขาโดยใช้ JavaScript? คุณไม่สามารถทำเช่นนี้จริงกับEmber.View

Ember.Component

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

การใช้ส่วนประกอบของ Ember พยายามที่จะใกล้เคียงกับข้อกำหนดของ Web Components มากที่สุด เมื่อองค์ประกอบที่กำหนดเองนั้นมีอยู่อย่างกว้างขวางในเบราว์เซอร์คุณควรจะสามารถโยกย้ายส่วนประกอบ Ember ของคุณไปยังมาตรฐาน W3C ได้อย่างง่ายดายและกำหนดให้เฟรมเวิร์กอื่นสามารถใช้ได้กับเฟรมเวิร์กอื่น ๆ

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

ยังเป็นสิ่งสำคัญที่จะต้องทราบคือว่าEmber.Componentเป็นจริงEmber.View (รอง) แต่ที่จะสมบูรณ์แยก การเข้าถึงคุณสมบัติในแม่แบบไปที่วัตถุมุมมองและการกำหนดเป้าหมายการกระทำยังที่วัตถุมุมมอง ไม่มีการเข้าถึงข้อมูลโดยรอบcontextหรือภายนอกcontroller ข้อมูลบริบททั้งหมดจะถูกส่งผ่านซึ่งไม่ใช่กรณีที่มีEmber.Viewซึ่งมีการเข้าถึงตัวควบคุมโดยรอบตัวอย่างเช่นในมุมมองที่คุณสามารถทำสิ่งthis.get('controller')ที่จะทำให้คุณ ตัวควบคุมในปัจจุบันที่เกี่ยวข้องกับมุมมอง

ดังนั้นความแตกต่างที่สำคัญระหว่างมุมมองและองค์ประกอบคืออะไร?

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

และจะเป็นตัวอย่างทั่วไปที่ฉันต้องการใช้มุมมองมากกว่าองค์ประกอบและในทางกลับกันคืออะไร

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

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

ปรับปรุง

ด้วยการตีพิมพ์Road to Ember 2.0คุณได้รับการสนับสนุนให้ใช้ส่วนประกอบแทน Views ในเกือบทุกกรณี

— intuitivepixel
แหล่งที่มา

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

— sly7_7

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

— สัญชาตญาณ

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

— Michael Johnston

อ่าใช่พวกเขาทำได้ {{view.xxxx}}ทำงานในองค์ประกอบเดียวกับในมุมมอง

— Michael Johnston

ความคิดเห็นของ Tom Dale ในหัวข้อนี้: ember.zone/the-confusion-around-ember-views-and-components/ …

— Akshay Rawat

คำตอบนั้นง่าย: ใช้ส่วนประกอบ

ตามวิดีโอการฝึกอบรมที่บันทึกไว้เมื่อเดือนสิงหาคม 2556 Yehuda Kats และ Tom Dale (สมาชิกในทีม Ember Core) ได้บอกผู้ชมว่าอย่าใช้มุมมองจนกว่าคุณจะเป็นนักพัฒนากรอบงาน พวกเขาได้ทำการปรับปรุงมากมายให้กับแฮนด์บาร์และส่วนประกอบที่แนะนำดังนั้นมุมมองจึงไม่จำเป็นอีกต่อไป มุมมองถูกใช้ภายในเพื่อทำกิจกรรมต่างๆเช่น {{#if}} และ {{outlet}}

คอมโพเนนต์ยังเลียนแบบมาตรฐานของ Web Component ที่จะสร้างลงในเบราว์เซอร์อย่างใกล้ชิดดังนั้นจึงมีประโยชน์มากมายที่จะทำให้การสร้าง Ember Components เป็นไปอย่างสะดวกสบาย

อัปเดต 2014-11-27

ตอนนี้สิ่งสำคัญยิ่งกว่าคือการใช้ส่วนประกอบแทนมุมมองเนื่องจาก Ember 2.0 จะใช้ส่วนประกอบที่กำหนดเส้นทางได้เมื่อเข้าสู่เส้นทางแทนที่จะเป็นตัวควบคุม / มุมมอง เพื่อเป็นการพิสูจน์แอปของคุณในอนาคตคุณควรอยู่ห่างจาก Views

แหล่งที่มา:

ถนนสู่ Ember 2.0: https://github.com/emberjs/rfcs/pull/15
พิสูจน์โค้ด Ember ของคุณในอนาคต: https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
ไม่มีมุมมองเฉพาะส่วนประกอบ (Tom Dale): https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice?slide=27

— Johnny Oshika
แหล่งที่มา

"หากคุณรู้สึกว่าจำเป็นต้องใช้มุมมองให้ใช้ส่วนประกอบแทน" เป็นคำแนะนำที่แย่มากและทรยศต่อการขาดความเข้าใจในความเหงาที่ส่วนประกอบต่าง ๆ มีส่วนเกี่ยวข้อง

— jmcd

@jmcd แม้ว่าความคิดเห็นนั้นมาจากผู้พัฒนาเฟรมเวิร์ก แต่ฉันก็เอามันออกไป

— Johnny Oshika

ฉันพบที่มา: การฝึกอบรมวิดีโอ Gaslight วิดีโอ 10.3 เครื่องหมายคำถาม & @ @ 26m ส่วนประกอบ ทอมพูดว่า: '' เนื่องจากตัวอย่างเหล่านั้นถูกเขียนขึ้น ... เราได้เพิ่มส่วนประกอบ [ซึ่ง] ไม่อยู่เมื่อมีการเขียนตัวอย่างเหล่านั้น โดยทั่วไปฉันจะบอกว่า Views ไม่ใช่สิ่งที่เราคาดหวังว่านักพัฒนาส่วนใหญ่จะเขียนพวกเขาเป็นวัตถุเก็บรักษาหนังสือภายในมากขึ้น ณ จุดนี้ '

— jmcd

@jmcd ในวิดีโอนั้น @ 26:15 ทอมพูดว่า "โดยทั่วไปจะไม่ใช้ Views" นอกจากนี้หากคุณข้ามไปที่ 30m ในวิดีโอเดียวกัน Yehuda Katz กล่าวว่า: "โดยทั่วไปแล้วรายละเอียดการใช้งานภายใน ... คุณสามารถใช้มุมมองได้ แต่คุณเป็นนักพัฒนาเฟรมเวิร์กคุณควรใช้สิ่งใดสิ่งหนึ่งแทน ที่เราสร้างขึ้นสำหรับคุณที่ใช้ View และมุมมองที่ใกล้เคียงที่สุด แต่มีซีแมนทิกส์ที่ดีกว่าคือ Component สิ่งใดก็ตามที่คุณสามารถใช้ View มาก่อนได้ Component นั้นดี "

— Johnny Oshika

ตามที่เป็นอยู่ในปัจจุบัน - v2.xการปล่อยเสถียรในปัจจุบัน - มุมมองถูกคัดค้านอย่างสมบูรณ์ มันบอกว่ามุมมองที่ถูกลบออกจาก Ember API

ดังนั้นการใช้{{view}}คำหลักใน Ember 2.0 จะทำให้เกิดการยืนยัน:

การยืนยันไม่สำเร็จ: การใช้{{view}}หรือเส้นทางใด ๆ ก็ตามที่ถูกลบออกไปใน Ember 2.0

ถ้าคุณมีมุมมองการใช้งานใน Ember 2.0 คุณสามารถใช้ถ่าน-มรดกวิว addon ซึ่งจะเข้ากันได้กับ Ember จนถึงรุ่น 2.4

ดังนั้นเพื่อสรุปส่วนประกอบต่างๆก็คือปัจจุบัน (มุมมองที่ถูกลบ) และอนาคต - พวกเขาจะแทนที่ตัวควบคุมด้วย ดูroutable ส่วนประกอบ RFC

— Daniel Kmak
แหล่งที่มา