注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

前端开发懒人必备——自己封装结构模板  

2015-11-12 09:54:32|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
前端在写页面时,经常会用到DOM一个结构进HTML中,而传统的书写方式就是字符串拼接,要么写成一行,要么每行都用引号引起来再加上加号拼接起来,因此非常短的结构这么写还能够忍受,一旦超过十行的结构就会令人发狂。
现在各种模板插件也非常多,但是习惯不同总感觉用起来非常不舒服,所谓的模板无非就是对字符串进行截取替换拼接的三种方法,以前我们写结构是这么写的:
前端开发懒人必备——自己封装结构模板 - 叶落非殇 - 叶落非殇
  这种写法费时费力如果有变量也需要字符串拼接进去,如果class也是变量,class里就会有很多引号,非常容易眼花,一行的写法就不多说了,删空格删回车都累死你,回头看结构又不美观,完全不能看!
昨天和毛毛聊天中发现他用注释的方法去做模板,但是用的是/**/这种注释方式,正好也闲的无聊,平时都用快捷键注释在JS中都是双斜杠//,为了更方便自己的偷懒习惯,开始了模板制作的思考,这里就不写思考过程了,直接贴代码:
前端开发懒人必备——自己封装结构模板 - 叶落非殇 - 叶落非殇
 
 这样就让事情变得简单了,以后需要插入结构更新数据就可以这么写:
前端开发懒人必备——自己封装结构模板 - 叶落非殇 - 叶落非殇
 定义一个object存放你需要的数据,用固定格式{{xx}}的方式把数据替换上去,只需要把结构复制进来,直接选中双斜杠注释掉就可以了。
想要量身定做自己的模板函数,还需要根据自己的习惯对正则进行调整,so,如果你看不懂,请先看看正则的含义,然后再看看数组字符串的方法。一切就会变得简单起来。
  评论这张
 
阅读(36)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017