มีตัวเลือกมากมายสำหรับเทมเพลตโอเพ่นซอร์สโหนด แต่ขอแนะนำให้ผู้สูงอายุอย่างฉันใช้ EJS เป็นเรื่องธรรมดาที่จะใช้ EJS กับประสบการณ์ในคลาสสิก ASP/PHP/JSP กล่าวคือคุณสามารถจัดเรียงรหัส JavaScript ในบล็อก <%...%> บล็อกและใช้ <%= ตัวแปรเอาต์พุต%> ในแบบดั้งเดิมที่สุด (นอกจากนี้ <%-ตัวแปรเอาต์พุตจะไม่หลบหนีสัญลักษณ์เช่น &) คำสั่งการติดตั้ง EJS มีดังนี้:
NPM ติดตั้ง EJS
JS CALL
มีสองวิธีหลักที่เรียกโดย JS:
EJS.Compile (STR, ตัวเลือก); // => ฟังก์ชั่น ejs.render (str, ตัวเลือก); // => str
ในความเป็นจริง EJS สามารถใช้อย่างอิสระจาก Express ได้เช่น:
var ejs = ต้องการ (''), str = reghed ('fs'). readfilesync (__ dirname + '/list.ejs', 'UTF8'); var ret = ejs.render (str, {ชื่อ: ['foo', 'bar', 'baz']}); console.log (ret); ดู ejs.render () พารามิเตอร์แรกคือสตริงของเทมเพลตและเทมเพลตมีดังนี้ < %if (names.length) { %><ul> < %names.foreach (ฟังก์ชั่น (ชื่อ) { %> <li foo = '< %= name + "'" %> '> < %= name %> </li> < %}) %> </ul> < %} %>ชื่อกลายเป็นตัวแปรท้องถิ่น
พารามิเตอร์ตัวเลือก
พารามิเตอร์ที่สองคือข้อมูลซึ่งมักจะเป็นวัตถุ วัตถุนี้ถือได้ว่าเป็นตัวเลือกซึ่งหมายความว่าข้อมูลและการเลือกอยู่ในวัตถุเดียวกัน
หากคุณไม่ต้องการมีดิสก์ทุกครั้งคุณต้องแคชเทมเพลตและตั้งค่าตัวเลือก Filename ตัวอย่างเช่น:
var ejs = ต้องการ ('../'), fs = ต้องการ ('fs'), path = __dirname + '/functions.ejs', str = fs.readfilesync (เส้นทาง, 'UTF8'); ผู้ใช้ var = []; users.push ({ชื่อ: 'tobi', อายุ: 2, สปีชีส์: 'ferret'}) users.push ({ชื่อ: 'loki', อายุ: 2, สปีชีส์: 'ferret'}) users.push ({ชื่อ: 'Jane', อายุ: 6, สายพันธุ์: 'Ferret'} console.log (ret);คำสั่ง inculde
และถ้าคุณต้องการ
<ul> < % users.foreach (ฟังก์ชั่น (ผู้ใช้) { %> < % รวมผู้ใช้/แสดง %> < %}) %> </ul>โดยทั่วไปการแทรกเทมเพลตทั่วไปนั่นคือการแนะนำไฟล์คุณต้องตั้งค่าตัวเลือกชื่อไฟล์เพื่อเริ่มคุณสมบัติการรวมมิฉะนั้นรวมถึงจะไม่ทราบไดเร็กทอรีที่อยู่
เทมเพลต:
<H1> ผู้ใช้ </h1> < %ฟังก์ชันผู้ใช้ (ผู้ใช้) { %> <li> <strong> < %= user.name %> </strong> คือ < %= user.age %> ปี < %= user.Species %>. </li> < %} %> <ul>EJS รองรับเทมเพลตรวบรวม หลังจากการรวบรวมเทมเพลตไม่มีการดำเนินการ IO มันจะเร็วมากและสามารถใช้สำหรับตัวแปรท้องถิ่น ตัวอย่างต่อไปนี้ผู้ใช้/แสดงจะละเว้นส่วนขยาย EJS:
<ul> < % users.foreach (ฟังก์ชั่น (ผู้ใช้) { %> < % รวมผู้ใช้/แสดง %> < %}) %> </ul>โทเค็นใกล้เคียงที่กำหนดเอง
หากคุณวางแผนที่จะใช้ <H1> {{= title}} </h1> โดยทั่วไปไม่ใช่แท็ก-<%%> คุณสามารถปรับแต่งได้
var ejs = ต้องการ ('ejs'); ejs.open = '{{'; ejs.close = '}}'; รูปแบบเอาต์พุตก็โอเค ejs.filters.last = ฟังก์ชั่น (obj) {return obj [obj.length - 1]; - เรียกว่า:<p> <%=: ผู้ใช้ | %สุดท้าย> </p>EJS ยังรองรับสภาพแวดล้อมของเบราว์เซอร์
<html> <head> <script src = "../ ejs.js"> </script> <script id = "ผู้ใช้" type = "text/template"> < %ถ้า (ชื่อความยาว) { %> <ul> < %names.foreach (ฟังก์ชั่น (ชื่อ) { %> <li> function () {var users = document.getElementById ('ผู้ใช้'). innerhtml; ชื่อ var = ['loki', 'tobi', 'Jane']; var html = ejs.render (ผู้ใช้, {ชื่อ: ชื่อ}); document.body.innerhtml = html; } </script> </head> <body> </body> </html> ฉันสงสัยว่า EJS สามารถส่งออกวัตถุ JSON แบบหลายชั้นได้หรือไม่?โดยวิธีการที่ชาวเน็ตบางคนเปิดเผยว่า JQ Master John เขียนเทมเพลต 20 บรรทัดเมื่อหลายปีก่อนซึ่งละอายใจคล้ายกับ EJS แต่สั้นและกระชับ!
เครื่องยนต์เทมเพลต JS ที่เรียบง่ายและใช้งานได้ง่าย
เครื่องยนต์เทมเพลต JS ที่มีน้อยกว่า 50 บรรทัดรองรับไวยากรณ์ JS ต่างๆ:
<script id = "test_list" type = "text/html"> <%= สำหรับ (var i = 0, l = p.list.listion; i <l; i ++) {var stu = p.list [i]; =%> <tr> <td <%= ถ้า (i == 0) {=%> <%=} =%>> <%== stu.name =%> </td> <td> <%== stu.age =%> </td> <td> <%== (stu.address ||"<%= xxx =%>" เป็นรหัสลอจิก JS และ "<%== xxx =%>" เป็นตัวแปรเอาต์พุตโดยตรงคล้ายกับฟังก์ชั่นของเสียงสะท้อนใน PHP "P" คือพารามิเตอร์วัตถุ KV เมื่อเรียกใช้วิธีการสร้างต่อไปนี้ นอกจากนี้ยังสามารถตั้งค่าเป็นชื่อพารามิเตอร์อื่นเมื่อเรียกว่า "ใหม่ JTEMP"
เรียกว่า:
$ (function () {var temp = new jtemp ('test_list'), html = temp.build ({list: [{ชื่อ: 'จางซาน', อายุ: 13, ที่อยู่: 'Beijing'}, {ชื่อ: 'Li Si', อายุ: 17, ที่อยู่: $ ('ตาราง'). html (html);หลังจากสร้างอุณหภูมิข้างต้นวิธีการสร้างสามารถเรียกได้หลายครั้งเพื่อสร้าง HTML นี่คือรหัสสำหรับเครื่องมือเทมเพลต:
var jtemp = function () {function temp (htmlid, p) {p = p || {}; // ข้อมูลการกำหนดค่าในกรณีส่วนใหญ่ this.htmlid = htmlid; this.fun; this.oname = p.oname || 'P'; this.temp_s = p.temps || - this.temp_e = p.tempe || - this.getFun (); } temp.prototype = {getFun: function () {var _ = this, str = $ ('#' + _.htmlid) .html (); ถ้า (! str) _.err ('ข้อผิดพลาด: ไม่มีอุณหภูมิ !!'); var str_ = 'var' + _.oname + '= this, f =/'/';', s = str.indexof (_. temp_s), e = -1, p, sl = _.temp_s.length, el = _.temp_e.length; สำหรับ (; s> = 0;) {e = str.indexof (_. temp_e); if (e <s) การแจ้งเตือน (':( ข้อผิดพลาด !!'); str_ += 'f +=/' ' +str.substring (0, s) +'/';'; p = _.trim (str.substring (s +sl, e)); ถ้า (p.indexof ('=')! == 0) P.SubString (1) + ';';} str.substring (E + El); }, build: prunction (p) {return this.fun.call (p);แกนกลางคือการแปลงรหัสเทมเพลตเป็นฟังก์ชันที่สายรัดและทุกครั้งที่คุณใช้ฟังก์ชั่นการโทรข้อมูล
เนื่องจากส่วนใหญ่ใช้สำหรับโทรศัพท์มือถือ (webkits) ประสิทธิภาพของการประกบสตริงจึงไม่ได้รับการพิจารณา หากจำเป็นต้องใช้โดย IE จะเป็นการดีที่สุดที่จะเปลี่ยนวิธีการประกบสตริงเป็นรูปแบบของ array.push ()
เค้าโครงเลย์เอาต์เทมเพลต EJS
1. หากคุณไม่เต็มใจที่จะใช้เลย์เอาต์เริ่มต้น ejs คุณสามารถระบุด้วยตัวเอง ตัวอย่างเช่น:
res.render ("ดัชนี", {"title": "ทดสอบ", "layout": "main"}); // หรือ res.render ("index", {"title": "test", "layout": "main.ejs"});2. หากคุณไม่เต็มใจที่จะใช้เลย์เอาต์คุณสามารถตั้งค่าเลย์เอาต์เป็นเท็จตัวอย่างเช่น:
res.render ("ดัชนี", {"เลย์เอาต์": false});3. หากคุณไม่ต้องการให้แต่ละคำขอถูกตั้งค่าแยกกัน สามารถใช้การตั้งค่าทั่วโลก:
app.set ("ตัวเลือกมุมมอง", {"เลย์เอาต์": false});4. ใน EJS แท็กปิดเริ่มต้นคือ < % .. %> และเรายังสามารถกำหนดแท็กของเราเองได้ ตัวอย่างเช่น:
app.set ("ตัวเลือกมุมมอง", {"เปิด": "{{", "ปิด": "}}"});5. เค้าโครงท้องถิ่น
ในเว็บแอปพลิเคชันมักจำเป็นต้องแสดงเนื้อหาบางอย่างซ้ำ ๆ เช่นฟังก์ชั่นความคิดเห็นของผู้ใช้ซึ่งต้องมีการแสดงความคิดเห็นซ้ำ ๆ ของผู้ใช้แต่ละคน ในเวลานี้เราสามารถทำได้ผ่านลูป อย่างไรก็ตามมันยังสามารถนำไปใช้โดยใช้ [เทมเพลตบางส่วน] (บางส่วน) ตัวอย่างเช่น:
ก่อนอื่นเราสร้างเทมเพลตท้องถิ่น/views/comment.ejs:
<div> <div> <%= comment.user%> </div> <div> <%= comment.content%> </div> </div>
หมายเหตุ: นี่คือ comment.xxxx
จากนั้นใน ./views/index.ejs โทรความคิดเห็นผ่านบางส่วน
นี่คือ <%= title%>! <br/> <%- บางส่วน ("ความคิดเห็น", ความคิดเห็น)%>หมายเหตุ: นี่คือบางส่วน ("comment.ejs", ความคิดเห็น); <- คำควรเป็นพหูพจน์
ในที่สุดในเราเตอร์ให้โทรหาดัชนี
app.get ("/", function (req, res) {res.render ("index", {"title": "test", "layout": false, "ความคิดเห็น": [{"ผู้ใช้": "gainover", "content": "test1"}, {"ผู้ใช้": -หมายเหตุ: ความคิดเห็นในรหัสนั้นเหมือนกับชื่อตัวแปรความคิดเห็นของ index.ejs และในความคิดเห็น ejs เรียกโดยบางส่วนรูปแบบเอกพจน์ของความคิดเห็นใช้
เมื่อแสดงรายการสถานการณ์ที่เราพบมักจะพบคือการแสดงองค์ประกอบแรกหรือองค์ประกอบสุดท้ายเป็นพิเศษ ในส่วนหนึ่งเราสามารถใช้ตัวแปรในตัวใน Express เพื่อพิจารณาว่าวัตถุปัจจุบันเป็นองค์ประกอบแรกหรือองค์ประกอบสุดท้ายเช่น:
<div> <div> <%= comment.user%> </div>: <div> <%= comment.content%> </div> </div>
ด้วยวิธีนี้จะมี firstItem พิเศษในชั้นเรียนของความคิดเห็นแรก
ตัวแปรในตัวที่คล้ายกัน ได้แก่ :
(1) FirstinCollection เป็นจริงหากเป็นองค์ประกอบแรกของอาร์เรย์
(2) INDEXINCOLLECTION ดัชนีขององค์ประกอบปัจจุบันในอาร์เรย์
(3) LastinCollection เป็นจริงถ้ามันเป็นองค์ประกอบสุดท้ายของอาร์เรย์
(4) คอลเลกชันความยาว
ในที่สุดก็มีปัญหาการค้นหาเส้นทางเมื่อบางส่วนเรียกเทมเพลต:
(1) บางส่วน ("แก้ไข") จะค้นหาไฟล์ EDIT.EJS ในไดเรกทอรีเดียวกัน
(2) บางส่วน ("../ ข้อความ") จะค้นหาไฟล์ message.ejs ของไดเรกทอรีระดับก่อนหน้า
(3) บางส่วน ("ผู้ใช้") จะค้นหาไฟล์ users.ejs หากไม่มี users.ejs ไฟล์ /Users/Index.ejs จะถูกค้นหา
(4) < %= ผู้ใช้ %> จะหลบหนีเนื้อหา หากคุณต้องการหลบหนีคุณสามารถใช้ < %- ผู้ใช้ %>