ฉันควรรวมมาร์กอัพ HTML ในการตอบสนอง JSON ของฉันหรือไม่

13

ในไซต์อีคอมเมิร์ซเมื่อเพิ่มรายการลงในรถเข็นฉันต้องการแสดงหน้าต่างป๊อปอัปพร้อมตัวเลือกที่คุณสามารถเลือกได้ ลองนึกภาพคุณกำลังสั่งซื้อ iPod Shuffle และตอนนี้คุณต้องเลือกสีและข้อความที่จะแกะสลัก

ฉันต้องการให้หน้าต่างเป็นแบบโมดัลดังนั้นฉันจึงใช้Lightbox ที่มีการเรียก Ajax ตอนนี้ฉันมีสองตัวเลือก:

ตัวเลือก 1: ส่งข้อมูลเท่านั้นและสร้างมาร์กอัพ HTML โดยใช้ JavaScript

สิ่งที่ดีเกี่ยวกับเรื่องนี้คือมันทำให้คำขออาแจ็กซ์ลดน้อยลงและไม่ผสมข้อมูลกับมาร์กอัป

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

ตัวเลือก 2: ส่งมาร์กอัพ HTML

สิ่งที่ดีเกี่ยวกับเรื่องนี้คือฉันสามารถมีเครื่องมือสร้างเทมเพลตฝั่งเซิร์ฟเวอร์เดียวกับที่ฉันใช้สำหรับงานการเรนเดอร์ที่เหลือ (Django) ทำการเรนเดอร์ของไลท์บ็อกซ์ JavaScript ใช้เพื่อแทรกแฟรกเมนต์ HTML ลงในหน้าเท่านั้น ดังนั้นจะทำให้การเรนเดอร์ไปยังเอ็นจินการเรนเดอร์อย่างชัดเจน ทำให้รู้สึกถึงฉัน

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

— Mike M. Lin
แหล่งที่มา

เป็นคำถามที่ดีมาก แต่ดูเหมือนว่าจะเป็นของ stackoverflow

— Saeed Neamati

1

ซอฟท์แว @SaeedNeamati คำถามการออกแบบโดยเฉพาะอย่างยิ่งคำถามแนวคิดไวท์บอร์ด-Y เช่นนี้อยู่ในหัวข้อที่นี่และปิดหัวข้อกองมากเกิน

10

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

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

2

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

— Mike M. Lin

2

ไม่ต้องพูดถึงว่า JSON ที่ไม่มีมาร์กอัปมีขนาดเล็กลงและใช้แบนด์วิดท์น้อยลง

@ Jackmaney: ยังเป็นจุดที่ดี แต่ต้นทุนที่แท้จริงของแบนด์วิดท์ที่เพิ่มขึ้นนั้นไม่ได้เกิดขึ้นหลังจากที่คุณกินค่าใช้จ่ายของคำขอ HTTP และฉันสามารถจินตนาการถึงการตั้งค่าบางอย่างที่คุณรู้ว่าเครื่องไคลเอนต์มีเส็งเคร็งจนต้องเสียค่าใช้จ่ายมากขึ้นในการสร้าง DOM แบบเรียลไทม์โดยใช้ JavaScript คิดว่า: แอปภายในกับผู้ใช้บนเครื่อง / เบราว์เซอร์โบราณ

— Mike M. Lin

3

ฉันจะส่งข้อมูลในคำขอและสร้างมาร์กอัปใน js ข้อดีอย่างหนึ่งคือการใช้แบนด์วิดท์น้อยลง มันเป็นความชอบส่วนบุคคล แต่การทำให้มาร์คอัปฝั่งไคลเอ็นต์อยู่ห่างจากฝั่งเซิร์ฟเวอร์น่าจะเป็นแนวคิดที่ดีกว่า ฉันมีเว็บไซต์ Django เช่นกันและฉันใช้ระบบ templating สำหรับการวาง json varibles บางหน้า (ต้องมี ajax req. เพื่อสร้าง) และใช้ไฟล์ src เมื่อพัฒนาบนเครื่องของฉัน ฝั่งไคลเอ็นต์ทั้งหมดทำด้วย ExtJS

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

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

— Mike M. Lin

โอ้ฉันเห็นว่าเซิร์ฟเวอร์ของคุณยังไม่ก้าวหน้าพอที่จะรู้ว่าผู้ใช้จะใส่อะไรไว้ในรถเข็นล่วงหน้า;)

— pllee

1

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

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

— ไรอันชะนี
แหล่งที่มา

ขอบคุณสำหรับการตอบกลับ. นั่นคือสิ่งที่ฉันหมายถึงในตัวเลือก 1 ไลท์บ็อกซ์ในฐานะภาชนะจะถูกเขียนลงในหน้า แต่ซ่อนอยู่ ข้อมูล JSON จากคำขอ Ajax จะถูกใช้เพื่อสร้างเนื้อหาในคอนเทนเนอร์ เนื้อหาบางส่วนนั้นจะถูกทำเครื่องหมายโดยใช้ HTML คุณตีความตัวเลือกที่ 1 ได้อย่างไร บางทีนั่นอาจเป็นตัวเลือกที่สามของฉัน

— Mike M. Lin

ฉันกำลังคิดบางอย่างตามบรรทัดของstackoverflow.com/questions/6008908/นี้จากนั้นใช้ JSON เพื่อแทนที่ข้อมูลหลังจากการโหลดครั้งแรก

— Ryan Gibbons

0

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

— อเล็กซ์
แหล่งที่มา