浅谈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 相关文章推荐
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
详解JavaScript中return的用法
May 08 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
js实现弹幕飞机效果
Aug 27 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文件缓存smarty模板应用实例分析
2016/02/26 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python json模块使用实例
2015/04/11 Python
python字典get()方法用法分析
2015/04/17 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python 可视化神器Plotly详解
2020/12/26 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
粗暴解决CUDA out of memory的问题
2021/05/22 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题