/**
* Created by Administrator on 15-1-19.
*/
function functionUtil() { } functionUtil = {
//某个DOM节点是否有某个属性
hasAttr: function (el, name) {
var attr = el.getAttributeNode && el.getAttributeNode(name);
return attr ? attr.specified : false
},
//根据class获取元素
getByClass: function (sClass, oParent) {
oParent = oParent || document;
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;
},
//动态添加样式表
addSheetFile: function (path) {
var fileref = document.createElement("link")
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = path;
fileref.media = "screen";
var headobj = document.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
},
//根据指定格式如 ${name} 绑定json数据
LoadJsonData: function (sParent, oJson) {
var oParent = document.getElementById(sParent);
if (oJson instanceof Array) {
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, function (str, $1) {
return oJson[d][$1] ? oJson[d][$1] : '';
});
} } else {
oParent.innerHTML = oParent.innerHTML.replace(/\$\{(\w+)\}/g, function (str, $1) {
return oJson[$1] ? oJson[$1] : '';
});
}
},
//根据指定格式如<%……%>绑定json数据
TemplateEngine: function (html, options) {
html = html.replace(/(>)|(<)/g, function (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' : '');
return add;
}
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("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}
}
1、第一种方式:${key}
functionUtil.LoadJsonData(element, data);
”html“代码：
<div id="data">
<div class="item">
姓名：${name}<br/>
年龄：${age}<br/>
职业：${job}<br/><br/>
</div>
</div>
javascript代码:
var data = [
{
name: '徐磊',
age: 24,
job: 'IT'
},
{
name: '李磊',
age: 23,
job: '翻译'
}
]; functionUtil.LoadJsonData('data', data);
执行结果:
aaarticlea/png;base64,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" alt="" />
2、第二种方式<% 代码 %>
functionUtil.TemplateEngine(string,Object);
"html"代码：
<div id="test3">
<%if(this.isShow){
for(var i in this.data){%>
<p href="#">姓名：<%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: '徐磊',
age: 24,
job: 'IT'
},
{
name: '李磊',
age: 23,
job: '翻译'
}
],
isShow: true
}
document.getElementById("test3").innerHTML = functionUtil.TemplateEngine(document.getElementById("test3").innerHTML, person);
结果：
aaarticlea/png;base64,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" alt="" />