浅谈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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
Vuex提升学习篇
Jan 11 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
js实现简单选项卡功能
Mar 23 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
探讨php中header的用法详解
2013/06/07 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
jQuery中find()方法用法实例
2015/01/07 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
js实现点击烟花特效
2020/10/14 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python如何实现MySQL实例初始化详解
2017/11/06 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python 实现批量图片识别并翻译
2020/11/02 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
Java的基础面试题附答案
2016/01/10 面试题
掌上明珠Java程序员面试总结
2016/02/23 面试题
项目建议书范文
2014/05/12 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
向女朋友道歉的话
2015/01/20 职场文书
自主招生专家推荐信
2015/03/26 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏