/*** Создано администратором 15-1-19. */function functionUtil () {} functionUtil = {// Do Dom Node имеет определенный атрибут hasattr: function (el, name) {var attr = el.getattributeNode && el.getAttributEnode (name); вернуть аттро? attr.specified: false}, // Получить элемент в соответствии с классом getbyclass: function (sclass, oparent) {oparent = oparent || документ; if (! oparent.getElementsbyclassname) {return oparent.getElementsbyclassname (sclass); } var arr = []; var aele = oparent.getElementsbytagname ('*'); var reg = new regexp ('(^| // s)' + sclass + '(// s | $)'); // var reg = new regexp ('(^| [// x20 // t // r/n // f])' + sclass + '([// x20 // t // r // n // f] | $)'); for (var i = 0; i <aele.length; i ++) {if (reg.test (aele [i] .classname)) {arr.push (aele [i]); }} return arr; }, // динамически добавлять styleSheet AddSheetFile: function (path) {var fileref = document.createElement ("link") fileref.rel = "styleSheet"; fileref.type = "text/css"; fileref.href = path; fileref.media = "экран"; var headObj = document.getElementsbytagname ('head') [0]; HeadObj.AppendChild (fileref); }, // Связывать данные json в соответствии с указанным форматом, таким как $ {name} LoadJSondata: function (sparent, ojson) {var oparent = document.getElementById (sparent); if (ojson экземпляр массива) {var str = oparent.innerhtml; for (var i = 0; i <ojson.length - 1; i ++) {oparent.innerhtml+= str; } for (var d in ojson) {oparent.children [d] .innerhtml = oparent.children [d] .innerhtml.replace (// $/{(/w+)/}/g, функция (str, $ 1) {return ojson [d] [$ 1]? }} else {oparent.innerhtml = oparent.innerhtml.replace (// $/{(/w+)/}/g, function (str, $ 1) {return ojson [$ 1]? Ojson [$ 1]: '';}); }}, // Связывать данные JSON в соответствии с указанным форматом, таким как <%...%> TemplateEngine: function (html, опционы) {html = html.replace (/(>) | (<)/g, функция (str, $ 1, $ 2) {switch (str) {case $ 1: return '>'; case $ 2: return '<' '' ''; var re =/<%([^%>]+)?%>/g, reexp =/(^()? (if | for | else | switch | case | break | {|})) (.*)?/g, code = 'var r = [];/n', cursor = 0; var add = function (line, js) {js? (code + = line.match (reexp)? Line + '/n': 'r.push (' + line + ');/n'): (code + = line! = ''? 'r.push (" + line.replace (/"/g,' // '') + '");/n': ''); вернуть добавить; } while (match = re.exec (html)) {add (html.slice (cursor, match.index)) (match [1], true); cursor = match.index + match [0] .length; } add (html.substr (cursor, html.length - cursor)); code += 'return r.join ("");'; вернуть новую функцию (code.replace (/[/r/t/n]/g, '')). Apply (Options); }}1. Первый метод: $ {ключ}
functionutil.loadjsondata (элемент, данные);
«HTML» код:
<div id = "data"> <viv> Имя: $ {name} <br/> Возраст: $ {Age} <br/> занятие: $ {job} <br/> <br/> </div> </div>код JavaScript:
var data = [{name: 'xu lei', возраст: 24, задание: 'it'}, {name: 'li lei', возраст: 23, job: 'translation'}]; functiontil.loadjsondata ('data', data);Результаты исполнения:
2. Второй метод < % код %>
functiontil.templateEngine (String, Object);
«HTML» код:
<div id = "test3"> <%if (this.isshow) {for (var i in this.data) {%> <p href = "#"> name: <%this.data [i] .name%> </p> <p href = "#"> Возраст: <%this.data [i] .age%> </p> <p href = "#"#"#"#"#"#"#"#" <%this.data [i] .job%> </p> <br/> <%}}%> </div>код JavaScript:
var person = {data: [{name: 'xu lei', возраст: 24, задание: 'it'}, {name: 'li lei', возраст: 23, задание: 'перевод'}], isshow: true} document.getelementbyid ("test3"). innerhtml = functionUtil.templateEngine ("test3").результат:
Вышеуказанное - все содержание этой статьи. Получили ли вы новое понимание шаблонов JavaScript после прочтения? Надеюсь, вам это понравится.