ไลบรารีเทมเพลต JavaScript HTML ที่แนะนำสำหรับ JQuery? [ปิด]


89

มีข้อเสนอแนะเกี่ยวกับไลบรารีเทมเพลต HTML ใดที่เข้ากันได้ดีกับ JQuery Googling มีห้องสมุดจำนวนมาก แต่ฉันไม่แน่ใจว่ามีห้องสมุดที่ได้รับการยอมรับอย่างดีที่จะยืนหยัดในการทดสอบเวลาหรือไม่


21
สมมติว่าคุณนำวัตถุ json กลับมาพร้อมกับบันทึก 100 รายการ แต่ละเร็กคอร์ดจำเป็นต้องสร้างแฟรกเมนต์ html เดียวกัน มันช่วยในการใช้เทมเพลตมากกว่าการสร้างมาร์กอัปใน js อนุญาตให้นักออกแบบออกแบบได้แทนที่จะให้มาร์กอัปอยู่ภายในสตริงในฟังก์ชัน js
redsquare

3
@cletus - เพราะใช้เทมเพลตที่จัดรูปแบบ html ได้ง่ายกว่าแบบต่อท้าย
Andrey

2
ใช้การเปรียบเทียบที่สมบูรณ์แบบนี้เพื่อช่วยในการเลือกของคุณ: jsperf.com/dom-vs-innerhtml-based-templating
AM

คำตอบ:


58

พูดตรงไปตรงมาเทมเพลตฝั่งไคลเอ็นต์กำลังร้อนแรงมากในปัจจุบัน แต่ค่อนข้างเป็นป่า

ที่นิยมมากที่สุดคือฉันเชื่อว่า:

  • บริสุทธิ์ : ใช้เฉพาะ js ไม่ใช่ "ไวยากรณ์" ของตัวเอง
  • หนวด : ค่อนข้างมั่นคงและดีที่ฉันได้ยิน
  • jqote2 : เร็วมากตาม jsperfs
  • เทมเพลต jquery (เลิกใช้แล้ว):

ยังมีอีกมากมายแต่คุณต้องทดสอบเพื่อดูว่าอะไรเหมาะกับคุณและรูปแบบโครงการของคุณดีที่สุด

โดยส่วนตัวแล้วฉันมีช่วงเวลาที่ยากลำบากในการเพิ่มไวยากรณ์และชุดตรรกะใหม่ ( ผสมตรรกะและเทมเพลตสวัสดี ?? ) และใช้ js ที่บริสุทธิ์ ทุกเทมเพลตของฉันจะถูกเก็บไว้ในไฟล์ html ของตัวเอง (./usersTable.row.html) ฉันใช้เทมเพลตเฉพาะเมื่อมีการเปิดเนื้อหาและฉันมีไฟล์ js "ลอจิก" ไม่กี่ไฟล์หนึ่งไฟล์สำหรับตารางหนึ่งไฟล์สำหรับ div หนึ่งไฟล์สำหรับรายการ และไม่มีแม้แต่ตัวเลือกเดียวสำหรับตัวเลือกที่เลือก (โดยที่ฉันใช้วิธีอื่น)

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


14

jTemplates

เครื่องมือเทมเพลตสำหรับ JavaScript

ปลั๊กอินกับjQuery ...

คุณสมบัติ:

  • 100% ใน JavaScript
  • precompilator
  • รองรับ JSON
  • ทำงานกับ Ajax
  • อนุญาตให้ใช้โค้ด JavaScript ภายในเทมเพลต
  • อนุญาตให้สร้างเทมเพลตแบบเรียงซ้อน
  • อนุญาตให้กำหนดพารามิเตอร์ในเทมเพลต
  • สดรีเฟรช! - อัปเดตเนื้อหาอัตโนมัติจากเซิร์ฟเวอร์ ...


5

jQuery Templates Plugin ที่สร้างโดย Microsoft และได้รับการยอมรับให้เป็นปลั๊กอิน jQuery อย่างเป็นทางการ

แต่โปรดทราบว่าตอนนี้เลิกใช้งานแล้ว


13
และ "เลิกใช้งาน" ตั้งแต่ การพัฒนาหยุดชะงักและสิ่งนี้จะไม่หลุดจากเบต้า a ms guy และทีม jquery-ui กำลังทำงานกับเทมเพลตใหม่โดยใช้ JSRender thou;)
roselan

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

1
ถ้าทุกอย่างเป็นไปด้วยดีjsrender โดย boris mooreจะพบว่ามันเข้าสู่ jquery-ui ฉันเดาว่าไม่ต้องรีบร้อน;)
roselan

1
ฉันติดตั้ง jsRender ในโปรเจ็กต์แล้วและมันยอดเยี่ยมมาก คุ้มค่ากับการตรวจสอบ
ASeale

4

ฉันจะตรวจสอบjson2htmlมันไม่ต้องเขียนตัวอย่าง HTML และใช้การแปลง JSON แทนเพื่อแปลงอาร์เรย์วัตถุ JSON เป็นรายการที่ไม่มีโครงสร้าง เร็วมากและใช้การสร้าง DOM


4
ข้อจำกัดความรับผิดชอบ .. ฉันเขียนสิ่งนี้ แต่คุ้มค่าที่จะลองดู;)
Chad Brown

3

สองสามปีก่อนฉันสร้าง IBDOM: http://ibdom.sf.net/ | ณ เดือนธันวาคม 2552 รองรับการรวม jQuery หากคุณได้รับโดยตรงจากลำต้น

$("#foo").injectWith(collectionOfJavaScriptObjects);

หรือ

$("#foo").injectWith(simpleJavaScriptObject);

นอกจากนี้คุณสามารถใส่เครื่องหมาย "data: propName" ทั้งหมดในแอตทริบิวต์ class = "data: propName other classnames" ได้แล้วดังนั้นคุณจึงไม่ต้องทิ้งเนื้อหาของแอปพลิเคชันของคุณด้วยเครื่องหมายเหล่านั้น

ฉันยังไม่ได้อัปเดตเอกสารมากมายเพื่อแสดงถึงการปรับปรุงล่าสุดของฉัน แต่ฉันมีเฟรมเวิร์กนี้หลายเวอร์ชันในการผลิตตั้งแต่ปี 2550

หากต้องการสงสัยในคำถามนี้:

ย้อนกลับไปเมื่อ Microsoft คิดค้น IE5 ซึ่งตอนนี้เรารู้จักในชื่อ XmlHttpRequest และรูปแบบ "ajax" ส่วนหนึ่งของคำมั่นสัญญาที่อยู่เบื้องหลังสิ่งนี้คือการแลกเปลี่ยนข้อมูลระหว่างเว็บเบราว์เซอร์และเซิร์ฟเวอร์อย่างหมดจด ข้อมูลนั้นจะถูกห่อหุ้มใน XML เนื่องจากในปี 1999/2000 XML นั้นร้อนแรงมาก นอกเหนือจากการดึงเอกสาร xml ผ่านเครือข่ายด้วยกลไกการโทรกลับแล้วคอมโพเนนต์ MSXML ActiveX ของ MS ยังรองรับการใช้งานแบบร่างล่วงหน้าของสิ่งที่เรารู้จักในตอนนี้ในชื่อ XSL-T และ XPath

การรวมการดึง HTTP / XML, XPath และ XSL-T เข้าด้วยกันทำให้นักพัฒนามีความคิดสร้างสรรค์อย่างมากในการสร้าง "เอกสาร" ที่สมบูรณ์ซึ่งมีลักษณะเป็น "แอปพลิเคชัน" การส่งเพียงอย่างเดียวและที่สำคัญกว่านั้นคือการดึงข้อมูลจากเซิร์ฟเวอร์

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

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

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

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

สิ่งนี้เป็นไปได้กับ XSL-T และ XPath ใน IE5 + แต่แทบจะไม่มีเบราว์เซอร์อื่น ๆ เฟรมเวิร์กเบราว์เซอร์ F / OSS บางตัวใช้งาน XPath แต่มันยังไม่ใช่สิ่งที่เราพึ่งพาได้

อะไรคือสิ่งที่ดีที่สุดต่อไปในการบรรลุรูปแบบดังกล่าว? IBDOM รับข้อมูลจากเซิร์ฟเวอร์ของคุณฉีดลงในเอกสารของคุณ ได้อย่างง่ายดาย


อีกอย่างหนึ่ง: IBDOM ใช้วิธี DOM ที่บริสุทธิ์ 100% และไม่มี innerHTML
Chris Holland

หมายเหตุอื่น: IBDOM ใช้สิ่งที่ฉันเรียกว่า "forkedLoopExecution" ซึ่งเป็นส่วนประกอบที่ใช้ภายในและสิ่งที่ใช้งานได้ด้วยตัวมันเอง นี่คือปัญหา: สมมติว่าคุณกำลังแก้ไข DOM ผ่าน createElement และ appendChild ในโครงสร้างการวนซ้ำบางประเภทซึ่งต้องอยู่เหนือวัตถุข้อมูลขนาดใหญ่ที่ค่อนข้างใหญ่เบราว์เซอร์ส่วนใหญ่จะไม่ "ทาสีใหม่" อินเทอร์เฟซผู้ใช้จนกว่า โค้ดที่ส่งผลต่อ DOM "ส่งคืน" ใน "for loop" ขนาดใหญ่ที่มีข้อมูลจำนวนมากผลการค้นหาของเราอาจใช้เวลาอย่างเห็นได้ชัดครึ่งวินาทีถึงสองสามวินาทีก่อนที่จะแสดงข้อมูลทั้งหมดเป็นกลุ่มเดียว
Chris Holland

วิธีแก้ปัญหา: การดำเนินการแบบลูปแบบแยกส่วนใช้ประโยชน์จากการเรียกใช้ซ้ำ setTimeout ตลอดอายุของการรวบรวมข้อมูลที่ส่งผ่านซ้ำ ๆ ไปจนถึง "ส่งคืนและทาสี" เป็นหลักในการวนซ้ำแต่ละครั้งให้ความรู้สึกในการเรนเดอร์ทันที: "ให้สิ่งที่ผู้ใช้ดู - ตอนนี้ friggin ขวา ".
Chris Holland

2

คุณควรดู Javascript-Templates ซึ่งเป็นเครื่องมือเทมเพลตขนาดเล็กที่ใช้ภายในปลั๊กอิน jQuery File Upload ที่มีชื่อเสียงและพัฒนาโดย Sebastian Tschan (@blueimp) ผู้เขียนคนเดียวกัน

https://github.com/blueimp/JavaScript-Templates

ทำตามคู่มือการใช้งานของ Sebastian เพียงแค่ลบบรรทัดนี้

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

แทนที่ด้วยอันนี้

$('#result').html(tmpl('tmpl-demo', data));

อย่าลืมเพิ่มแท็กผลลัพธ์ div ในไฟล์ HTML ของคุณด้วย

<div id="result"></div>

สนุก

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