浅谈javascript中自定义模版


Posted in Javascript onJanuary 29, 2015
/**
 * 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);

执行结果:

浅谈javascript中自定义模版

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

结果:

浅谈javascript中自定义模版

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

Javascript 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
分享Javascript实用方法二
Dec 13 Javascript
Javascript自定义事件详解
Jan 13 Javascript
浅谈Vue.js
Mar 02 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
jQuery和AngularJS的区别浅析
Jan 29 #Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 #Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 #Javascript
使用Sticker.js实现贴纸效果
Jan 28 #Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 #Javascript
7个让JavaScript变得更好的注意事项
Jan 28 #Javascript
简单谈谈javascript代码复用模式
Jan 28 #Javascript
You might like
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
python分割文件的常用方法
2014/11/01 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python实现单机五子棋
2020/08/28 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
逻辑链路控制协议
2016/10/01 面试题
个人自我评价范文
2014/02/05 职场文书
人力资源主管职责范本
2014/03/05 职场文书
眼镜促销方案
2014/03/15 职场文书
学习计划书怎么写
2014/09/15 职场文书
买房协议书范本
2014/10/23 职场文书
财务会计实训报告
2014/11/05 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书