ทำไม JSX ถึงดีเมื่อสคริปต์ JSP ไม่ดี

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

<ul>
  {list.map((item) =>
    <li>{item}</li>
  )}
</ul>

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

บางอย่างเช่นนี้ใน JSP

<ul>
   <% for (item in list) { %>
     <li>${item}</li>
   <% } %>
</ul>

<c:forEach>ถือเป็นปัญหาการอ่านจะได้รับการแก้ไขได้ด้วยแท็กเช่น เหตุผลที่อยู่เบื้องหลังแท็ก JSTL ก็ดูเหมือนว่าพวกเขาสามารถนำไปใช้กับ JSX:

• มันง่ายกว่าที่จะอ่านเมื่อคุณไม่สลับระหว่าง XHTML คล้ายไวยากรณ์ (วงเล็บมุม, การซ้อน) และ Java / Javascript (curlies, จุลภาค, เครื่องหมาย)
• เมื่อคุณมีภาษาและแพลตฟอร์มเต็มรูปแบบสำหรับใช้ในฟังก์ชั่นการเรนเดอร์คุณจะมีกำลังใจน้อยลงในการวางตรรกะในสิ่งที่ไม่ได้อยู่ในนั้น

เหตุผลเดียวที่ฉันคิดได้ว่าทำไม JSX ถึงแตกต่างคือ:

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

• JSP และ Java ไวยากรณ์เป็น clunky กับพิเศษ<% ... %>เพื่อแยกรหัส Java จากการสร้างองค์ประกอบและด้วยไวยากรณ์พื้นเมืองของ Java ขาดforeachแนวคิดหรือฟังก์ชั่นชั้นหนึ่ง (จนกระทั่งเมื่อเร็ว ๆ ) บทลงโทษทางไวยากรณ์ของการใช้จาวาสคริปต์ดั้งเดิมสำหรับลูปและเงื่อนไขใน JSX นั้นไม่ใช่ศูนย์

มีอะไรอีกบ้างที่ฉันขาดไป?

ในขั้นต้นคนที่สร้าง JSX ไม่เห็นด้วยกับคนที่ไม่ชอบ JSP ดูการสนทนาของพวกเขาที่นี่: ทำไมเราถึงสร้างปฏิกิริยา? เช่นเดียวกับการแสดงข้อมูล

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

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

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

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

ในฐานะที่เป็นบุคคลภายนอกที่ทำปฏิกิริยาฉันมองว่า JSX ว่าเป็น "กลิ่นกรอบ" อีกครั้งในสวนสัตว์ที่มีคนหนาแน่นมาก ฉันยังไม่มั่นใจว่านี่ไม่ใช่กรณี

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

แนวคิดของการแนะนำซีแมนทิกส์แบบคอมไพล์ที่ต้องการกระบวนการสร้างแบบเป็นทางการนั้นมีประโยชน์ในบางสถานการณ์: ตัวอย่างเช่นการคอมไพล์ LESS ของไฟล์. css ให้โครงสร้างที่จำเป็นมากรอบ css ซึ่งเป็นโครงสร้างแบบลำดับชั้นที่มีการนำเข้าและแทนที่ มีแนวโน้มมากที่จะ "โซลูชั่นสปาเก็ตตี้" แต่จาวาสคริปต์คอมไพเลอร์ก่อน ... ไม่มาก

ในระยะสั้น:

• นักพัฒนา Front-end คาดว่าจะรู้สคริปต์และ templating
• JSX และ JSP เป็นทั้งเทมเพลตภาษา
• JavaScript เป็นภาษาสคริปต์
• Java ไม่ใช่ภาษาสคริปต์

อ้างอิง

• การแยก HTML และ JavaScript เป็นอันตรายหรือไม่? | Bitnative โดย Cory House

• เหตุใดจึงถือว่าสคริปต์เป็นอันตรายและจะปิดการใช้งานสคริปต์ในโปรแกรมของคุณได้อย่างไร

• จะหลีกเลี่ยงรหัส Java ในไฟล์ JSP ได้อย่างไร - สแต็คล้น

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

หน้า JSP ที่มีโครงสร้างที่ดีจะมีคำสั่ง JSTL เหมือนที่คุณพูดถึง คำสั่ง JSTL ทำให้ JSP ของคุณง่ายขึ้นดังนั้นพวกเขาจึงไม่ยุ่งกับการดึงข้อมูลจากขอบเขตการตรวจสอบโมฆะ ฯลฯ มันน่าแปลกใจที่ความยุ่งเหยิงนี้จะลบออกไปมากแค่ไหน

เช่นเดียวกับส่วนของ JSX; งานเดียวของ JSP ที่ควรจะพิจารณาวิธีการนำเสนอข้อมูลที่ได้รับโดยไม่ต้องกังวลว่ามาจากไหน

โดยสรุปไม่ว่ามุมมองของคุณคือ JSX หรือ JSP ถ้าคุณทำอย่างถูกต้องมุมมองของคุณจะนำเสนอข้อมูล

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