浅谈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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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使用codebase生成随机数
2014/03/25 PHP
php简单smarty入门程序实例
2015/06/11 PHP
html读出文本文件内容
2007/01/22 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python 爬取微信文章
2016/01/30 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
答题辅助python代码实现
2018/01/16 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
基于PyTorch中view的用法说明
2021/03/03 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
秋天的雨教学反思
2014/04/27 职场文书
法人委托书的范本格式
2014/09/11 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书