ด้วยการพัฒนาเว็บแอปพลิเคชันส่วนหน้ามีความซับซ้อนมากขึ้นเรื่อย ๆ ในเวลานี้ JavaScript ได้รับความคาดหวังมากขึ้น ในเวลาเดียวกันความคิด JavaScript MVC ก็กลายเป็นที่นิยมเช่นกัน ในฐานะที่เป็นส่วนที่สำคัญที่สุดของการแยกข้อมูลและอินเทอร์เฟซเอ็นจิ้นเทมเพลต JavaScript ได้รับความสนใจจากนักพัฒนามากขึ้นเรื่อย ๆ ในปีที่ผ่านมามีการเบ่งบานในชุมชนโอเพ่นซอร์ส พวกเขาสามารถเห็นได้ในเว็บไซต์ขนาดใหญ่เช่น Twitter, Taobao, Sina Weibo, Tencent QQ Space และ Tencent Weibo
บทความนี้จะใช้รหัสตัวอย่างที่ง่ายที่สุดเพื่ออธิบายหลักการของเอ็นจิ้นเทมเพลต JavaScript ที่มีอยู่รวมถึงหลักการการใช้งานคุณสมบัติของรุ่นใหม่ของ JavaScript Template Engine Arttemplate ยินดีต้อนรับเพื่อพูดคุยพวกเขาด้วยกัน
การแนะนำ ArtTemplate
Arttemplate เป็นเอ็นจิ้นเทมเพลต JavaScript รุ่นใหม่ มันใช้ precompilation เพื่อสร้างการก้าวกระโดดเชิงคุณภาพและใช้ประโยชน์จากคุณสมบัติของเครื่องยนต์ JavaScript อย่างเต็มที่ทำให้ประสิทธิภาพมีความโดดเด่นอย่างมากทั้งในส่วนหน้าและส่วนหลัง ในการทดสอบประสิทธิภาพการเรนเดอร์ภายใต้โครเมี่ยมมันเป็น 25 และ 32 เท่าของหนวดเครื่องยนต์ที่รู้จักกันดีและไมโคร TMPL
นอกเหนือจากข้อได้เปรียบด้านประสิทธิภาพแล้วฟังก์ชั่นการดีบักยังคุ้มค่าที่จะกล่าวถึง เทมเพลตดีบักเกอร์สามารถค้นหาคำสั่งเทมเพลตที่กระตุ้นให้เกิดข้อผิดพลาดในการแก้ไขข้อผิดพลาดแก้ปัญหาการดีบักโดยไม่ตั้งใจระหว่างการเขียนเทมเพลตทำให้การพัฒนามีประสิทธิภาพและหลีกเลี่ยงความผิดพลาดของแอปพลิเคชันทั้งหมดเนื่องจากข้อผิดพลาดในเทมเพลตเดียว
Arttemplate ทั้งหมดนี้ใช้งานใน 1.7KB (GZIP)!
จาวาสคริปต์เทมเพลตเอ็นจิ้นพื้นฐาน
แม้ว่าแต่ละเครื่องยนต์จะมีวิธีการใช้งานที่แตกต่างกันจากไวยากรณ์เทมเพลตการแยกวิเคราะห์ไวยากรณ์การกำหนดตัวแปรและการประกบสตริง
เกี่ยวกับการดำเนินการแบบไดนามิกของสตริง JavaScript บทความนี้ใช้ชิ้นส่วนของรหัสเทมเพลตเป็นตัวอย่าง:
นี่คือการเขียนเทมเพลตที่ง่ายมากโดยที่ "" เป็นตู้เสื้อผ้า (แท็กปิดเชิงตรรกะ) หาก OpentAg ตามด้วย "=" เนื้อหาของตัวแปรจะถูกส่งออก
คำสั่ง HTML และคำสั่งเอาต์พุตตัวแปรเป็นเอาต์พุตโดยตรงและสตริงที่แยกวิเคราะห์จะคล้ายกัน:
หลังจากการวิเคราะห์ไวยากรณ์เสร็จสิ้นวิธีการแสดงผลโดยทั่วไปจะถูกส่งคืน:
การทดสอบการแสดงผล:
ในวิธีการเรนเดอร์ข้างต้นการกำหนดตัวแปรเทมเพลตใช้คำสั่งด้วยและการประกบสตริงใช้วิธีการผลักดันของอาร์เรย์เพื่อปรับปรุงประสิทธิภาพใน IE6 และ 7 เครื่องยนต์ Micro Template TMPL ที่พัฒนาโดย JUGERATION Author John เป็นตัวแทนทั่วไปของวิธีนี้ดู: http://ejohn.org/blog
จะเห็นได้จากการใช้งานหลักว่าปัญหาสองประการที่จะแก้ไขจะถูกทิ้งไว้ในเอ็นจิ้นเทมเพลต JavaScript แบบดั้งเดิม:
1. ประสิทธิภาพ: เมื่อแสดงเอ็นจิ้นเทมเพลตจะต้องอาศัยตัวสร้างฟังก์ชั่นเพื่อใช้งาน เช่น Eval, settimeout และ setInterval ฟังก์ชั่นให้วิธีการเข้าถึงเอ็นจิ้นการแยกวิเคราะห์ JavaScript โดยใช้ข้อความ แต่ประสิทธิภาพของการดำเนินการ JavaScript ด้วยวิธีนี้ต่ำมาก
2. การดีบัก: เนื่องจากเป็นสตริงการดำเนินการแบบไดนามิกหากผู้ดีบักพบข้อผิดพลาดข้อผิดพลาดดีบักเกอร์จึงไม่สามารถตรวจจับแหล่งที่มาของข้อผิดพลาดได้ ในเครื่องยนต์ที่ไม่ได้รับการยอมรับความผิดพลาดหากเทมเพลตท้องถิ่นอาจทำให้แอปพลิเคชันทั้งหมดล้มเหลวเนื่องจากข้อยกเว้นข้อมูลค่าบำรุงรักษาจะเพิ่มขึ้นอย่างมากเมื่อจำนวนเทมเพลตเพิ่มขึ้น
Arttemplate ความลับของประสิทธิภาพ
1. คอมไพล์ล่วงหน้า
ในหลักการการใช้งานเอ็นจิ้นเทมเพลตที่กล่าวถึงข้างต้นเนื่องจากตัวแปรเทมเพลตถูกกำหนดแต่ละการแสดงผลแต่ละครั้งจะต้องมีการรวบรวมแบบไดนามิกของสตริง JavaScript เพื่อให้การกำหนดตัวแปรเสร็จสมบูรณ์ อย่างไรก็ตามกระบวนการรวบรวมและการมอบหมายของ Arttemplate เสร็จสมบูรณ์ก่อนการเรนเดอร์ซึ่งเรียกว่า "precompilation" คอมไพเลอร์เทมเพลต Arttemplate จะแยกตัวแปรเทมเพลตทั้งหมดตามกฎง่ายๆบางอย่างและประกาศไว้ที่หัวของฟังก์ชั่นการเรนเดอร์ ฟังก์ชั่นนี้คล้ายกับ:
ฟังก์ชั่นที่สร้างขึ้นโดยอัตโนมัตินี้เป็นเหมือนฟังก์ชั่น JavaScript ที่เขียนด้วยมือ ด้วยจำนวนการประหารชีวิตที่เท่ากันทั้งการใช้ CPU และหน่วยความจำได้ลดลงอย่างมีนัยสำคัญและประสิทธิภาพเกือบจะถึงขีด จำกัด
เป็นมูลค่าการกล่าวขวัญว่าคุณสมบัติหลายอย่างของ ArtTemplate นั้นขึ้นอยู่กับการใช้งานที่รวบรวมไว้ล่วงหน้าเช่นข้อมูลจำเพาะของ Sandbox และไวยากรณ์ที่กำหนดเอง
2. วิธีการเพิ่มสตริงที่เร็วขึ้น
หลายคนคิดผิดพลาดว่าวิธีการผลักอาร์เรย์จะแยกสายเร็วกว่า += คุณควรรู้ว่านี่เป็นเฉพาะในเบราว์เซอร์ IE6-8 การวัดจริงแสดงให้เห็นว่าเบราว์เซอร์ที่ทันสมัยใช้ += เพื่อใช้วิธีการกดอาร์เรย์ในขณะที่อยู่ในเครื่องยนต์ V8 โดยใช้วิธี += เร็วกว่า 4.7 เท่าของการประกบอาร์เรย์ 4.7 เท่า ดังนั้น ArtTemplate จึงใช้วิธีการประกบสตริงสองวิธีที่แตกต่างกันตามลักษณะของเครื่องยนต์ JavaScript
หลักการโหมดดีบัก ArtTemplate
เอ็นจิ้นเทมเพลตส่วนหน้าไม่เหมือนเอ็นจิ้นเทมเพลต back-end มันคือการแยกวิเคราะห์แบบไดนามิกดังนั้นผู้ดีบักไม่สามารถค้นหาหมายเลขบรรทัดที่ไม่ถูกต้อง Arttemplate ช่วยให้เทมเพลตดีบักเกอร์สามารถค้นหาคำสั่งเทมเพลตได้อย่างแม่นยำซึ่งส่งผลให้เกิดข้อผิดพลาดในการแสดงผลตัวอย่างเช่น:
ArtTemplate รองรับการจับข้อผิดพลาดสองประเภทหนึ่งคือข้อผิดพลาดในการแสดงผล (ข้อผิดพลาดในการแสดงผล) และข้อผิดพลาดในการรวบรวม (ข้อผิดพลาดทางไวยากรณ์)
1. ข้อผิดพลาดในการแสดงผล
ข้อผิดพลาดการแสดงผลโดยทั่วไปเกิดจากข้อผิดพลาดข้อมูลเทมเพลตหรือข้อผิดพลาดตัวแปร เมื่อทำการเรนเดอร์พวกเขาจะเข้าสู่โหมดการดีบักเพื่อคอมไพล์เทมเพลตอีกครั้งโดยไม่ส่งผลกระทบต่อประสิทธิภาพการดำเนินการเทมเพลตปกติ เทมเพลตคอมไพเลอร์บันทึกหมายเลขบรรทัดตามการแบ่งสายเทมเพลตและฟังก์ชั่นที่รวบรวมจะคล้ายกัน:
เมื่อเกิดข้อผิดพลาดในระหว่างกระบวนการดำเนินการหมายเลขบรรทัดที่สอดคล้องกับเทมเพลตข้อยกเว้นจะถูกโยนทันทีและตัวดีบักเทมเพลตจากนั้นตรวจสอบข้อความที่สอดคล้องกับเทมเพลตตามหมายเลขบรรทัดและพิมพ์ลงในคอนโซล
2. ข้อผิดพลาดในการรวบรวม
ข้อผิดพลาดในการรวบรวมโดยทั่วไปเป็นข้อผิดพลาดทางไวยากรณ์ของแม่แบบเช่นการทำรังที่ไม่มีคุณสมบัติ, ไวยากรณ์ที่ไม่รู้จัก ฯลฯ เนื่องจาก Arttemplate ไม่ได้ทำการวิเคราะห์คำศัพท์ที่สมบูรณ์จึงเป็นไปไม่ได้ที่จะกำหนดตำแหน่งของแหล่งที่มาของข้อผิดพลาดและสามารถส่งออกข้อมูลข้อผิดพลาดและรหัสแหล่งที่มาสำหรับข้อความต้นฉบับ