มีข้อเสนอแนะเกี่ยวกับไลบรารีเทมเพลต HTML ใดที่เข้ากันได้ดีกับ JQuery Googling มีห้องสมุดจำนวนมาก แต่ฉันไม่แน่ใจว่ามีห้องสมุดที่ได้รับการยอมรับอย่างดีที่จะยืนหยัดในการทดสอบเวลาหรือไม่
มีข้อเสนอแนะเกี่ยวกับไลบรารีเทมเพลต HTML ใดที่เข้ากันได้ดีกับ JQuery Googling มีห้องสมุดจำนวนมาก แต่ฉันไม่แน่ใจว่ามีห้องสมุดที่ได้รับการยอมรับอย่างดีที่จะยืนหยัดในการทดสอบเวลาหรือไม่
คำตอบ:
พูดตรงไปตรงมาเทมเพลตฝั่งไคลเอ็นต์กำลังร้อนแรงมากในปัจจุบัน แต่ค่อนข้างเป็นป่า
ที่นิยมมากที่สุดคือฉันเชื่อว่า:
ยังมีอีกมากมายแต่คุณต้องทดสอบเพื่อดูว่าอะไรเหมาะกับคุณและรูปแบบโครงการของคุณดีที่สุด
โดยส่วนตัวแล้วฉันมีช่วงเวลาที่ยากลำบากในการเพิ่มไวยากรณ์และชุดตรรกะใหม่ ( ผสมตรรกะและเทมเพลตสวัสดี ?? ) และใช้ js ที่บริสุทธิ์ ทุกเทมเพลตของฉันจะถูกเก็บไว้ในไฟล์ html ของตัวเอง (./usersTable.row.html) ฉันใช้เทมเพลตเฉพาะเมื่อมีการเปิดเนื้อหาและฉันมีไฟล์ js "ลอจิก" ไม่กี่ไฟล์หนึ่งไฟล์สำหรับตารางหนึ่งไฟล์สำหรับ div หนึ่งไฟล์สำหรับรายการ และไม่มีแม้แต่ตัวเลือกเดียวสำหรับตัวเลือกที่เลือก (โดยที่ฉันใช้วิธีอื่น)
ทุกครั้งที่ฉันพยายามทำบางสิ่งที่ซับซ้อนมากขึ้นฉันพบว่าโค้ดมีความชัดเจนน้อยลงและใช้เวลาในการทรงตัวมากกว่าการทำแบบเดิม ๆ ตรรกะในเทมเพลตเป็นสิ่งที่ไม่สมเหตุสมผลในความคิดของฉันและการเพิ่มไวยากรณ์ของตัวเองจะเพิ่มเฉพาะจุดบกพร่องที่ยากต่อการติดตามเท่านั้น
เครื่องมือเทมเพลตสำหรับ JavaScript
ปลั๊กอินกับjQuery ...
คุณสมบัติ:
- 100% ใน JavaScript
- precompilator
- รองรับ JSON
- ทำงานกับ Ajax
- อนุญาตให้ใช้โค้ด JavaScript ภายในเทมเพลต
- อนุญาตให้สร้างเทมเพลตแบบเรียงซ้อน
- อนุญาตให้กำหนดพารามิเตอร์ในเทมเพลต
- สดรีเฟรช! - อัปเดตเนื้อหาอัตโนมัติจากเซิร์ฟเวอร์ ...
มีเอกสารการอภิปรายที่เหมาะสมสำหรับหัวข้อนี้ที่นี่ซึ่งครอบคลุมเครื่องมือเทมเพลตต่างๆ ไม่เฉพาะเจาะจงสำหรับ jQuery แม้ว่า
jQuery Templates Plugin ที่สร้างโดย Microsoft และได้รับการยอมรับให้เป็นปลั๊กอิน jQuery อย่างเป็นทางการ
แต่โปรดทราบว่าตอนนี้เลิกใช้งานแล้ว
ฉันจะตรวจสอบjson2htmlมันไม่ต้องเขียนตัวอย่าง HTML และใช้การแปลง JSON แทนเพื่อแปลงอาร์เรย์วัตถุ JSON เป็นรายการที่ไม่มีโครงสร้าง เร็วมากและใช้การสร้าง DOM
สองสามปีก่อนฉันสร้าง 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 รับข้อมูลจากเซิร์ฟเวอร์ของคุณฉีดลงในเอกสารของคุณ ได้อย่างง่ายดาย
คุณควรดู 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>
สนุก