JavaScript ควรสร้าง HTML เมื่อใด

ฉันพยายามสร้าง HTML จาก JavaScript ให้น้อยที่สุดเท่าที่จะทำได้ แต่ฉันชอบที่จะจัดการกับมาร์กอัปที่มีอยู่เมื่อใดก็ตามที่ฉันสามารถและสร้าง HTML ได้เฉพาะเมื่อฉันต้องการแทรกองค์ประกอบที่ไม่เหมาะสมสำหรับการใช้ Ajax แบบไดนามิก ฉันเชื่อว่านี่ทำให้การบำรุงรักษาโค้ดทำได้ง่ายกว่าและทำการเปลี่ยนแปลงอย่างรวดเร็วเพราะมาร์กอัพนั้นง่ายต่อการอ่านและติดตาม กฎง่ายๆของฉันคือ: HTML สำหรับโครงสร้างเอกสาร CSS สำหรับงานนำเสนอ JavaScript สำหรับการทำงาน

อย่างไรก็ตามฉันเห็นรหัส JS จำนวนมากที่สร้างกอง HTML รวมถึงแบบฟอร์มทั้งหมดและกล่องโต้ตอบโมดัลเนื้อหาที่มีเนื้อหามาก โดยทั่วไปวิธีใดที่ถือว่าเป็นแนวปฏิบัติที่ดีที่สุด JavaScript ควรใช้ในการสร้าง HTML ในสถานการณ์ใดและไม่ควรใช้เมื่อใด

เมื่อใดก็ตามที่ฉันได้พบกับการสร้าง HTML อย่างหนักในจาวาสคริปต์มันก็เกือบจะเป็นเพียงในปลั๊กอิน UI แบบสแตนด์อะโลน มันสมเหตุสมผลแล้วเนื่องจากช่วยให้ encapsulate ปลั๊กอินทั้งหมดในไฟล์. js เดียว (+ a .css เพื่อปรับแต่งสไตล์) ดังนั้นจึงทำให้สามารถนำมาใช้ซ้ำได้อย่างง่ายดายสามารถกระจายได้และเป็นอิสระจากกรอบงานที่ใช้ในแอปพลิเคชัน

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

ฉันคิดว่าปัญหาคือคุณกำลังเปรียบเทียบ templating ฝั่งเซิร์ฟเวอร์ที่เขียนไว้อย่างดีกับการสร้าง HTML ฝั่งไคลเอ็นต์ ad-hoc ที่เขียนไม่ดี แน่นอนว่าโค้ดที่เขียนอย่างหมดจดนั้นง่ายต่อการอ่านบำรุงรักษาและติดตาม

คุณเรียกรหัสฝั่งไคลเอ็นต์ว่า "กอง HTML" แต่แน่นอนว่าเป็น HTML เดียวกันกับที่สร้างขึ้น "เนิน" เป็นก้อนใหญ่ของรหัสจริงๆ

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

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

มีแนวโน้มที่จะใช้เทมเพลตฝั่งไคลเอ็นต์ในกรณีที่ร้ายแรงคุณต้องมีเซิร์ฟเวอร์ที่ให้เฉพาะ RESTful API เช่นในรูปแบบ JSON ในขณะที่ทำการฝั่งไคลเอ็นต์การเรนเดอร์ทั้งหมด ข้อดีของวิธีการนี้คือรหัส JS และเทมเพลตเป็นทรัพยากรแบบสแตติกที่สามารถแคชแคชพร็อกซีและกระจายผ่าน CDN ซึ่งไม่สามารถทำได้หากคุณมี HTML แบบไดนามิกที่สร้างขึ้นฝั่งเซิร์ฟเวอร์ นอกจากนี้การส่งคืนข้อมูลจาก RESTful API ในรูปแบบที่มีน้ำหนักเบายังใช้ทรัพยากรด้านเซิร์ฟเวอร์น้อยลงทำให้ตอบสนองได้เร็วขึ้น อีกทั้งการที่เบาลงมันเป็นการถ่ายโอนข้อมูลผ่านเครือข่ายที่น้อยลงซึ่งทำให้เร็วขึ้นอีกครั้ง วิธีนี้คุณสามารถมีแอปพลิเคชั่นเวลาตอบสนองที่ช้ามากแม้ในการเชื่อมต่อที่ช้าเช่น 3G ดังนั้นวิธีนี้จึงเป็นที่นิยมสำหรับมือถือและแอพพลิเคชั่น

มีห้องสมุดจำนวนมากการใช้แม่แบบ JS เป็นหนึ่งในคนที่เป็นที่นิยมเพียว , หนวดและdust.js ต่อมาจะถูกใช้โดย LinkedIn, พวกเขาได้อธิบายข้อดีในบทความของพวกเขา"JSPs ทิ้งในฝุ่น: ย้าย LinkedIn เพื่อ dust.js แม่ฝั่งไคลเอ็นต์"

ข้อได้เปรียบของการสร้าง HTML บนไคลเอนต์คือคุณลดการแสดงผลงานให้กับลูกค้าแต่ละรายซึ่งโดยทั่วไปแล้วจะไม่มีการรอการตอบกลับ การเพิ่มทรัพยากรเซิร์ฟเวอร์ให้มากขึ้นเพื่อส่งมอบข้อมูล JSON และเนื้อหาสแตติก (HTML, JS และ CSS) เท่านั้น

เราทำเว็บแอปที่สร้างเฉพาะ HTML ด้วย Javascript ความนิยมของเซิร์ฟเวอร์ 87% เป็นข้อมูล JSON โดยทั่วไปจะมีการโหลดเนื้อหาแบบสแตติกหนึ่งครั้งจากเบราว์เซอร์แคช

แต่คุณไม่สามารถใช้งานได้ - อย่างน้อยก็ไม่สะดวก - ถ้าคุณต้องการ SEO หรือหากคุณกำหนดเป้าหมายไปยังกลุ่มประชากรที่ปิดใช้งาน Javascript แต่ฉันไม่แน่ใจว่ากลุ่มนี้ยังเกี่ยวข้องกับ Youtube, Twitter, Facebook, Gmail, ... โดยธรรมชาติบังคับให้ผู้คนเปิดใช้งาน

เกี่ยวกับการโหลดหน้าแบบไดนามิกเราควรตระหนักว่าเบื้องหลัง "JQuery AJAX Cloud!" เวทมนตร์มีเพียงสองสิ่งที่เป็นไปได้ที่เกิดขึ้น:

1. รหัสขององค์ประกอบถูกฉีดใน div (ไม่ดี) หรือ
2. กำลังโหลดเนื้อหาใน iframe (ดีกว่า แต่ไม่เหมือนกัน ... )

เกี่ยวกับคำถามเดิมฉันสร้างเนื้อหา HTML ผ่าน Javascript เมื่อฉันสร้างเว็บแอปบางประเภทที่อ่านข้อมูล XML หรือ JSON ที่เก็บไว้บนเซิร์ฟเวอร์และมันก็เปลี่ยนไปมาก

มันไม่สมเหตุสมผลเลยที่จะโหลดเนื้อหาสแตติกบนหน้าเว็บที่มี Javascript เนื่องจากมีความเป็นไปได้ที่จะไม่โหลดถูกต้องหรือลูกค้าจะปิดการใช้งาน ("ใช้โฆษณาที่น่ารำคาญ!") นอกจากนี้ก็จะทำให้มันยากมากที่จะเปลี่ยนแปลงเนื้อหา HTML เมื่อมัน smushed ภายในน่าเกลียดdocument.write()หรือห่วงโซ่ของdocument.createElement()'s

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

หนึ่งบันทึกย่อล่าสุดหากคุณต้องการนำ xmlhttprequests, er, AJAX ไปไว้ในเว็บไซต์อาจเป็นวิธีที่ดีที่สุด / ปลอดภัยที่สุดในการจัดเก็บข้อมูลในรูปแบบข้อมูล (เช่น XML) โหลดและส่งออกตามลำดับ บนลูกค้า document.writeและelement.innerHTMLไม่ใช่วิธีที่ดีที่สุดในการจัดการกับเนื้อหาและถูกผูกไว้กับอาการปวดหัวที่อาจเกิดขึ้นในอนาคต (ทำไมสคริปต์นี้จึงไม่ทำงาน<i>แท็กที่ใช้งานไม่ได้ของฉันก็คือทำให้ทุกอย่างเอียง!

มนต์ของฉันคือ: เมื่อมันง่ายขึ้นและไม่มีใครใส่ใจเกี่ยวกับมาร์กอัป

นอกจากนี้คุณยังสามารถใช้ประโยชน์จากทั้งสองและกำหนดขีด จำกัด ที่มันยากเกินกว่าที่จะใส่ใจเกี่ยวกับมาร์กอัปและคุณควรจะมุ่งเน้นไปที่ต้นไม้ DOM ตัวอย่างเช่นแบบฟอร์มที่มีแถวแบบไดนามิก (เช่น "เพิ่มสิ่งที่แนบมาอีก") คุณอาจต้องการแบบฟอร์มใน HTML ปุ่ม "เพิ่มแถว" และปุ่มส่ง ... คุณอาจไม่ต้องการสร้าง HTML ด้วยภาษาฝั่งเซิร์ฟเวอร์ของคุณหรือบางอย่าง

กฎของหัวแม่มือก็สามารถนำมาใช้ใหม่ หากวิธีการแก้ปัญหาของคุณสามารถนำไปใช้กับปัญหาอื่น ๆ ในฝั่งไคลเอ็นต์ห่อหุ้มใน js

เราสร้างแอปหน้าเดียว (ala Google Mail) และไม่มีการสร้าง HTML ฝั่งเซิร์ฟเวอร์ในแอพของเราเลย แต่เราใช้ Backbone.js เพื่อจัดโครงสร้างฝั่งไคลเอ็นต์และแฮนด์บาร์เพื่อแสดงผล JSON ของเราเป็นเทมเพลตที่เข้าไปในหน้า มันใช้งานได้ดีมากและเรากำลังจะปิดแอพแรกที่ใช้มันและเราจะจัดการโครงการที่ใหญ่กว่านี้ในอนาคต

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

ฉันกำลังสร้างโค้ด HTML ใน jquery เพราะฉันใช้พอร์ตเล็ตและหลังจากการประมวลผลรหัส jsp ฉันต้องสร้างลูปด้วยรหัส html เพื่อที่ฉันจะไม่สามารถใช้จาวาสำหรับลูปที่มีโค้ดจาวาสคริปต์บางตัวได้ ดังนั้นฉันกำลังแสดงผล java arraylist ในอาร์เรย์ javascript และการใช้สตริงเพื่อสร้าง html