欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

浅谈javascript中自定义模版_javascript技巧

程序员文章站 2023-12-22 11:37:58
...
/**
 * 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 绑定json数据
  TemplateEngine: function (html, options) {
    html = html.replace(/(>)|(';
        case $2:
          return ']+)?%>/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“代码:

姓名:${name}
年龄:${age}
职业:${job}

javascript代码:

var data = [
      {
          name: '徐磊',
          age: 24,
          job: 'IT'
        },
        {
          name: '李磊',
          age: 23,
          job: '翻译'
        }
  ];


functionUtil.LoadJsonData('data', data);

执行结果:

浅谈javascript中自定义模版_javascript技巧

2、第二种方式

functionUtil.TemplateEngine(string,Object);

"html"代码:

姓名:

年龄:

工作:


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);

结果:

浅谈javascript中自定义模版_javascript技巧

以上就是本文的全部内容了,小伙伴们看完是否对javascript模板有了新的认识了呢,希望大家能够喜欢。

相关标签: javascript 模版

上一篇:

下一篇: