/*** สร้างโดยผู้ดูแลระบบเมื่อวันที่ 15-1-19 */function functionUtil () {} functionUtil = {// do dom node มีแอตทริบิวต์บางอย่าง HASATTR: function (el, ชื่อ) {var attr = el.getattributenode && el.getattributenode (ชื่อ); return attr? attr.specified: false}, // รับองค์ประกอบตามคลาส getByClass: function (sclass, oparent) {oparent = oparent || เอกสาร; if (! oparent.getElementsByClassName) {return oparent.getElementsByClassName (sclass); } var arr = []; var aele = oparent.getElementsByTagname ('*'); var reg = ใหม่ regexp ('(^| // s)' + sclass + '(// s | $)'); // var reg = ใหม่ regexp ('(^| [// x20 // t // r/n // f])' + sclass + '([// x20 // t // r // n // f] | $)'); สำหรับ (var i = 0; i <aele.length; i ++) {ถ้า (reg.test (aele [i] .classname)) {arr.push (aele [i]); }} return arr; }, // เพิ่มสไตล์ชีท addSheetFile แบบไดนามิก: ฟังก์ชั่น (พา ธ ) {var fileref = document.createElement ("ลิงก์") fileRef.rel = "Stylesheet"; FileRef.type = "text/css"; FileRef.href = เส้นทาง; FileRef.media = "หน้าจอ"; var headobj = document.getElementsByTagname ('head') [0]; headobj.AppendChild (FileRef); }, // ผูกข้อมูล JSON ตามรูปแบบที่ระบุเช่น $ {name} loadJSondata: ฟังก์ชั่น (sparent, ojson) {var oparent = document.getElementById (sparent); ถ้า (อินสแตนซ์ ojson ของอาร์เรย์) {var str = oparent.innerhtml; สำหรับ (var i = 0; i <ojson.length - 1; i ++) {oparent.innerhtml+= str; } สำหรับ (var d ใน ojson) {oparent.children [d] .innerhtml = oparent.children [d] .innerhtml.replace (// $/{(/w+)/}/g, function (str, $ 1) {return ojson [d] [$ 1] }} else {oparent.innerhtml = oparent.innerhtml.replace (// $/{(/w+)/}/g, ฟังก์ชั่น (str, $ 1) {return ojson [$ 1]? ojson [$ 1]: '';}); }}, // ผูกข้อมูล JSON ตามรูปแบบที่ระบุเช่น <%...%> templateEngine: ฟังก์ชั่น (html, ตัวเลือก) {html = html.replace (/(>) | (<)/g, ฟังก์ชัน (str, $ 1, $ 2) var re =/<%([^%>]+)?%>/g, reexp =/(^()? (ถ้า | สำหรับ | อื่น | สวิตช์ | กรณี | break | {|})) (.*)?/g, code = 'var r = [];/n', cursor = 0; var add = function (line, js) {js? (รหัส + = line.match (reexp)? line + '/n': 'r.push (' + line + ');/n'): (รหัส + = line! = ''? 'r.push ("' + line.replace (/"/g, '// "') + '"); return add; } ในขณะที่ (match = re.exec (html)) {เพิ่ม (html.slice (เคอร์เซอร์, match.index)) (จับคู่ [1], จริง); Cursor = Match.index + Match [0] .length; } เพิ่ม (html.substr (เคอร์เซอร์, html.length - เคอร์เซอร์)); รหัส += 'return r.join ("");'; ส่งคืนฟังก์ชั่นใหม่ (code.replace (/[/r/t/n]/g, '')). ใช้ (ตัวเลือก); -1. วิธีแรก: $ {คีย์}
functionUtil.loadJSondata (องค์ประกอบ, ข้อมูล);
รหัส "HTML":
<div id = "data"> <div> ชื่อ: $ {ชื่อ} <br/> อายุ: $ {อายุ} <br/> อาชีพ: $ {Job} <br/> <br/> </div> </div>รหัส JavaScript:
var data = [{ชื่อ: 'xu lei', อายุ: 24, งาน: 'it'}, {ชื่อ: 'li lei', อายุ: 23, งาน: 'การแปล'}]; functionUtil.loadjSondata ('ข้อมูล', ข้อมูล);ผลการดำเนินการ:
2. วิธีที่สอง < % รหัส %>
functionUtil.templateEngine (สตริง, วัตถุ);
รหัส "HTML":
<div id = "test3"> <%ถ้า (this.isshow) {สำหรับ (var i ใน this.data) {%> <p href = "#"> ชื่อ: <%this.data [i]. name%> </p> <p href = "#"> อายุ: <%this.data [i] <%this.data [i] .job%> </p> <br/> <%}}%> </div>รหัส JavaScript:
var person = {data: [{ชื่อ: 'xu lei', อายุ: 24, งาน: 'it'}, {ชื่อ: 'li lei', อายุ: 23, งาน: 'การแปล'}], isshow: true} document.getElementByid ("test3")ผลลัพธ์:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ คุณได้รับความเข้าใจใหม่เกี่ยวกับเทมเพลต JavaScript หลังจากอ่านหรือไม่? ฉันหวังว่าคุณจะชอบมัน