เมื่อเร็ว ๆ นี้เนื้อหาการทำงานของฉันค่อยๆเข้าใกล้อุดมคติของฉัน (ส่วนหน้าเว็บสุดยอด) ดังนั้นฉันจึงให้ความสนใจกับประสิทธิภาพส่วนหน้ามากขึ้น! เพื่อนร่วมงานในพื้นหลังแนะนำการใช้เอ็นจิ้นเทมเพลต Ajax เพื่อปรับปรุงความเร็วในการแสดงผล!
นี่คือเครื่องยนต์เทมเพลต JavaScript
1. หนวด
เอ็นจิ้นเทมเพลตที่ใช้ JavaScript คล้ายกับปลั๊กอิน JQuery Template ของ Microsoft แต่ใช้งานง่ายกว่าและใช้งานง่ายกว่า!
2. dot.js
dot.js มีเอ็นจิ้นเทมเพลต JavaScript สำหรับเบราว์เซอร์และ Node.js
3. jsmart
JSMART เป็นรุ่น JavaScript พอร์ตของเครื่องยนต์ PHP ที่มีชื่อเสียง Smarty
4. dom.js
DOM.JS เป็นเอ็นจิ้นเทมเพลต JavaScript ที่สามารถใช้กับทั้งไคลเอนต์และฝั่งเซิร์ฟเวอร์
5. หยก
Jade เป็นเอ็นจิ้นเทมเพลตประสิทธิภาพสูงสำหรับโหนดที่ได้รับอิทธิพลจาก HAML ใน JavaScript
6. hogan.js
เอ็นจิ้นเทมเพลต JavaScript จาก Twitter
7. แฮนด์บาร์
HandleBars เป็นไลบรารีเทมเพลตหน้า JavaScript
8. Arttemplate
Arttemplate เป็นเอ็นจิ้นเทมเพลต JavaScript รุ่นใหม่ ประสิทธิภาพการเรนเดอร์ใน V8 สามารถใกล้เคียงกับขีด จำกัด ประสิทธิภาพของ JavaScript ในการทดสอบประสิทธิภาพการเรนเดอร์ภายใต้โครเมี่ยมมันเป็น 25 และ 32 เท่าของหนวดเครื่องยนต์ที่รู้จักกันดีและไมโคร TMPL ตามลำดับ เครื่องยนต์รองรับการดีบัก หากพบข้อผิดพลาดในระหว่างการเรนเดอร์ดีบักเกอร์สามารถค้นหาคำสั่งเทมเพลตที่สร้างข้อยกเว้นได้อย่างถูกต้องแก้ปัญหาที่เทมเพลตส่วนหน้ายากต่อการดีบัก
เครื่องมือการรวบรวมเทมเพลตที่ไม่ซ้ำกันสามารถรวบรวมเทมเพลตส่วนหน้าลงในไฟล์ JS ที่ไม่พึ่งพาเอ็นจิ้นเทมเพลตในการทำงานช่วยให้เทมเพลตส่วนหน้าจะบุกผ่านข้อ จำกัด ของเบราว์เซอร์และตระหนักถึงการจัดระเบียบของไฟล์และไดเรกทอรีในลักษณะเดียวกับเทมเพลตแบ็คเอนด์โหลดตามความต้องการรวมถึงการทำรัง
บางทีคุณอาจคิดว่าชื่อของปลั๊กอินนี้ดูคุ้นเคยใช่แล้ว! นี่คือผู้แต่ง Artdialog
ที่อยู่บล็อก: http://www.planeart.cn/
เครื่องยนต์อ้าง
การคัดลอกรหัสมีดังนี้:
<script src = "js/template.js"> </script>
เขียนเทมเพลต
การคัดลอกรหัสมีดังนี้:
<script id = "test" type = "text/html">
// ใช้แท็กสคริปต์ที่มี type = "text/html" เพื่อจัดเก็บเทมเพลต:
<H1> <%= title%> </h1>
<ul>
-
สำหรับ (i = 0; i <list.length; i ++) {%>
<li> iteml <%= i+1%>: <%= list [i]%> </li>
-
</ul>
// สัญลักษณ์นิยามสำหรับจุดเริ่มต้นและจุดสิ้นสุดของไวยากรณ์ตรรกะเทมเพลตคือ < % และ %> หาก <% ตามด้วยเครื่องหมาย = เนื้อหาตัวแปรจะถูกส่งออก
</script>
เทมเพลตการแสดงผล
การคัดลอกรหัสมีดังนี้:
var data = {
ชื่อเรื่อง: 'แท็ก',
รายการ: ['วรรณกรรม', 'บล็อก', 'Photography', 'Movie', 'Folk', 'Travel', 'Guitar']
-
var html = template.render ("ทดสอบ", ข้อมูล);
document.getElementById ('เนื้อหา'). innerhtml = html;