浅谈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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
javascript vvorld 在线加密破解方法
Nov 13 Javascript
json 实例详细说明教程
Oct 31 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
javascript中this的用法实践分析
Jul 29 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
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
使用URL传输SESSION信息
2015/07/14 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
JS 日期比较大小的简单实例
2014/01/13 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
微信小程序实现下载进度条的方法
2017/12/08 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python三引号输出方法
2019/02/27 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
小班秋游活动方案
2014/02/22 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
庆七一宣传标语
2014/10/08 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
终止劳动合同通知书
2015/04/16 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
方法汇总:Python 安装第三方库常用
2022/04/26 Python