Laytpl เป็นเอ็นจิ้นเทมเพลต JavaScript ที่ก่อกวน มันใช้วิธีการใช้งานที่ชาญฉลาดเพื่อให้ขนาดของตัวเองเล็กและประณีต ไม่เพียง แต่มีประสิทธิภาพสูงสุดเท่านั้น แต่ยังมีฟังก์ชั่นเกือบทั้งหมดของเครื่องยนต์ส่วนหน้าแบบดั้งเดิม เวทมนตร์การแปลงทั้งหมดนั้นถูกสร้างขึ้นด้วยรหัสน้อยกว่า 1KB ซึ่งดูเหมือนว่าเป็นการปฏิวัติหรือไม่ แต่ก็ไม่ต้องสงสัยเลยว่า Laytpl นำเสนอให้ทั่วโลกในทางที่เบาที่สุด หากคุณไม่เคยสัมผัสกับแอปพลิเคชันนี้มันไม่สำคัญ เรื่องราวต่อไปนี้จะทำให้คุณไม่สามารถรอที่จะเลือก Laytpl และจากนั้นคุณสามารถเข้าใจการแสดงข้อมูลของหน้าและไปถึงจุดสูงสุดของชีวิตของคุณ!
Laytpl Advantage
•ประสิทธิภาพที่ยอดเยี่ยมเร็วกว่า Arttemplate และ DOT เกือบ 1 เท่าซึ่งเป็นที่รู้จักกันในชื่อ King of Performance และเร็วกว่า Baidemplate, Kissytemplate ฯลฯ 20-40 เท่า
•ปริมาตรมีขนาดเล็กถึงสุดขีดน้อยกว่า 1KB และมันจะเล็กลงในอนาคต
•มีกลไกความปลอดภัยเช่น Escape และมีฟังก์ชั่นการรายงานข้อผิดพลาดทางวิทยาศาสตร์
• JavaScript ดั้งเดิมสามารถเขียนได้โดยพลการในเทมเพลตเพื่อให้แน่ใจว่ามีความยืดหยุ่นของเทมเพลตอย่างเต็มที่
•สนับสนุนแอปพลิเคชันบนแพลตฟอร์ม Node.js
•รองรับเบราว์เซอร์กระแสหลักหรือสมัยใหม่ทั้งหมด
วิธีใช้
การคัดลอกรหัสมีดังนี้:
// ขั้นตอนที่ 1: เขียนเทมเพลต คุณสามารถใช้แท็กสคริปต์เพื่อจัดเก็บเทมเพลตเช่น:
<script id = "demo" type = "text/html">
<H1> {{d.title}} </h1>
<ul>
{{# for (var i = 0, len = d.list.length; i <len; i ++) {}}
<li>
<span> ชื่อ: {{d.list [i] .name}} </span>
<span> เมือง: {{d.list [i] .city}} </span>
</li>
-
</ul>
</script>
// ขั้นตอนที่ 2: สร้างมุมมอง ใช้ในการแสดงผลการแสดงผล
<div id = "ดู"> </div>
// ขั้นตอนที่ 3: แสดงเทมเพลต
var data = {
หัวข้อ: 'Front-end Siege'
รายการ: [{ชื่อ: 'Xianxin', เมือง: 'Hangzhou'}, {ชื่อ: 'Xie Liang', เมือง: 'Beijing'}, {ชื่อ: 'Qianqian', เมือง: 'Hangzhou'}, {ชื่อ: 'Dem', เมือง: 'Beijing'}]
-
var gettpl = document.getElementById ('demo'). innerhtml;
laytpl (gettpl) .render (data, function (html) {
document.getElementById ('ดู'). innerhtml = html;
-
คำอธิบายเอกสาร
1. ไวยากรณ์เทมเพลต
เอาท์พุทฟิลด์ปกติโดยไม่ต้องหลบหนี HTML: {{D.Field}}
เอาต์พุตฟิลด์ปกติและหลบหนี html: {{= d.field}}
สคริปต์ JavaScript: {{# javaScript statement}}
2. วิธีการในตัว
1): laytpl (เทมเพลต); // ฟังก์ชั่นหลักส่งคืนวัตถุ
var tpl = laytpl (เทมเพลต);
tpl.render (ข้อมูลการโทรกลับ); // วิธีการเรนเดอร์, ส่งคืนผลลัพธ์การแสดงผลรองรับสองโหมด: แบบอะซิงโครนัสและซิงโครนัส
a): อะซิงโครนัส
tpl.render (ข้อมูล, ฟังก์ชัน (ผลลัพธ์) {
console.log (ผลลัพธ์);
-
b): ซิงโครนัส
var result = tpl.render (ข้อมูล);
console.log (ผลลัพธ์);
2): laytpl.config (ตัวเลือก); // เริ่มต้นการกำหนดค่า
ตัวเลือกคือวัตถุ
{Open: 'Start Tag', Close: 'Close Tag'}
3): laytpl.v // รับหมายเลขเวอร์ชัน
สิ่งที่ควรทราบ
1. เพียงแนะนำ laytpl.js โดยตรงและคุณยังสามารถใช้ SEAJs และการโหลดแบบแยกส่วนอื่น ๆ โดยตรง
2. Laytpl สามารถใช้งานได้ทั้งในธุรกิจและในแพลตฟอร์มส่วนบุคคล
3. ตรวจสอบให้แน่ใจว่าได้เก็บแหล่งที่มาในทุกโอกาสและอย่าลบความคิดเห็นส่วนหัว layoutpl.js
เว็บไซต์อย่างเป็นทางการ: http://sentsin.com/layui/laytpl/
ดาวน์โหลด: //www.vevb.com/codes/207072.html