一个简单的Emmet-Template-Engine~

制作的的原因

制作的的原因还是属于解决自己的遇到的麻烦事, 用于在前端便捷地生成dom结构

  1. 编辑器的Emmet修改起来还是比较麻烦, 按ctrl+z , 次数有点多 , 还有为了面对后的修改会把emmet的命令储存在注释里面
  2. 同时有一些dom是储存在js里面 , 占据的空间略大, 并且代码折叠 (在VS code编辑器) , 不能完整折叠, 代码之间的跳转不方便
  3. 储存在js 里面的dom里面的无论是事件绑定还是数据导入都用原生的方式挺繁琐的

功能概览

语法大致和Emmet的一致, 不过只是在导入数据方面我自己增加了一些, 不过只是支持了Emmet基础的语法 , 相比于Emmet少了一些限制 可以使用\n\t\r空格来格式化代码

基础的Emmet语法就不介绍了比较简单, 看下面的例子的输入输出就能知道其作用了

推荐直接 git clone 来看 , 如果觉得有用的话 点赞/star 一下下~耗时5day , debug大概占了80%的时间

修饰符.#及其导入
var test = new Emmet(`
  div.class_0.@class_import_str.@class_import_arr#id#id_covered
`);

test.bindData({
  class_import_str:'imported_str',
  class_import_arr:[
    'imported_arr_0',
    'imported_arr_1'
  ]
});

var result = [
  `<div id="id_covered" class="class_0 imported_str imported_arr_0,imported_arr_1"></div>`
];

test.parse().forEach(function(element,i){
  if(element.outerHTML != result[i]){
    tester.fail(id,element,result[i]);
  }else
    tester.success(id,element);
});

输出

修饰符[]{}及其导入
var test = new Emmet(`
  div.class_0#id_0[key_0="value_0" key_1='value_1' key_2=value2 =@key_value_imported]{@content_str} +
  div{@content_nodeObj}
`);

test.bindData({
  key_value_imported:{
    imported_key:'imported_value',
    key_0:'covered_value_0'
  },
  content_str:'string_0',
  content_nodeObj:(new Emmet(`div>span{ok}`)).parse()
});

var result = [
  `<div id="id_0" class="class_0" key_0="covered_value_0" key_1="value_1" key_2="value2" imported_key="imported_value">string_0</div>`,
  `<div><div><span>ok</span></div></div>`
];

test.parse().forEach(function(element,i){
  if(element.outerHTML != result[i]){
    tester.fail(id,element,result[i]);
  }else
    tester.success(id,element);
});

输出

连接符( ) * > ^及其导入和寻址

$是这层循环的得到结果, 如果其是一个object的话先要得到其自属性使用$attrName做来获取 , 如果还想继续获取就之后就是使用:来做分割, 比如$obj:key2:key3

var test = new Emmet(`
  div > (span > a ^ p) * 3 ^ 
  div > 
    (
      span{$name} + i{$obj:key} + div.$obj:key2:key3
      (
        ( span > a{$} ) * $level3 + p{$name}
      )* $level2 
    ) * @level1
`);

test.bindData({
  level1:[{
      name:'level1-0',
      obj:{
        key:'value-00',
        key2:{
          key3:'value-10'
        }
      },
      level2:[{
          name:'level2-0',
          level3:[
            'level3-0',
            'level3-1'
          ]
        },{
          name:'level2-1',
          level3:[
            'level3-2',
            'level3-3'
          ]
        }
      ]
    },{
      name:'level1-1',
      obj:{
        key:'value-01',
        key2:{
          key3:'value-11'
        }
      },
      level2:[{
          name:'level2-2',
          level3:[
            'level3-4',
            'level3-5'
          ]
        },{
          name:'level2-3',
          level3:[
            'level3-6',
            'level3-7'
          ]
        }
      ]
    }
  ]
});

var result = [
  `<div><span><a></a></span><p></p><span><a></a></span><p></p><span><a></a></span><p></p></div>`,
  `<div><span>level1-0</span><i>value-00</i><div class="value-10"></div><span><a>level3-0</a></span><span><a>level3-1</a></span><p>level2-0</p><span><a>level3-2</a></span><span><a>level3-3</a></span><p>level2-1</p><span>level1-1</span><i>value-01</i><div class="value-11"></div><span><a>level3-4</a></span><span><a>level3-5</a></span><p>level2-2</p><span><a>level3-6</a></span><span><a>level3-7</a></span><p>level2-3</p></div>`
];

test.parse().forEach(function(element,i){
  if(element.outerHTML != result[i]){
    tester.fail(id,element,result[i]);
  }else
    tester.success(id,element);
});

输出

修饰符[]=(nodeAttr)属性导入, 和=>(objAttr)属性导入
var test = new Emmet(`
  div[key="nodeAttrValue" key=>"objAttrValue" =@import_to_nodeAttr =>@import_to_objAttr =$import_to_nodeAttr_inloop =>$import_to_objAttr_inloop] * @loop
`);

test.bindData({
  import_to_nodeAttr:{
    nodeKey_0:'nodeValue_0',
    nodeKey_1:'nodeValue_1',
  },
  import_to_objAttr:{
    objKey_0:'objValue_0',
    objKey_1:'objValue_1',
  },
  loop:[
    {
      import_to_nodeAttr_inloop:{
        nodeKey_inloop_0:'nodeValue_inloop_0',
        nodeKey_inloop_1:'nodeValue_inloop_1',
      },
      import_to_objAttr_inloop:{
        objKey_inloop_0:'objValue_inloop_0',
        objKey_inloop_1:'objValue_inloop_1',
      }
    }
  ]
});

var resultStr = [
  `<div key="nodeAttrValue" nodekey_0="nodeValue_0" nodekey_1="nodeValue_1" nodekey_inloop_0="nodeValue_inloop_0" nodekey_inloop_1="nodeValue_inloop_1"></div>`
];

var resultObj = [
  {
    objKey_0:'objValue_0',
    objKey_1:'objValue_1',
    objKey_inloop_0:'objValue_inloop_0',
    objKey_inloop_1:'objValue_inloop_1'
  }
];

test.parse().forEach(function(element,i){
  var objAttrTestPass = true;
  forEachObject(resultObj[i],function(value,key){
    if(element[key] != value)
      objAttrTestPass = false;
  })

  if(element.outerHTML != resultStr[i] || !objAttrTestPass){
    tester.fail(id,element,resultStr[i]);
  }else
    tester.success(id,element);
});

输出

[]中的eventProcessor导入
//测试eventProcessor导入
//暂时不支持同一个事件同时导入管线事件和通过addEventListener,只能导入其中一种~

/*
onevent=function(){} 
result:
node.onevent = function(){} 

onevent=[function(){} ]
result:
[ function(){} ].forEach(function(eventProcessor){
  node.addEventListener(onevent.slice(2),eventProcessor)
});
*/

var test = new Emmet(`
  div[onclick=>@clickProcessor onmousemove=>@mousemoveProcessor]{click and mousemove}
`);

test.bindData({
  clickProcessor:function(){
    console.log('clickProcessor');
  },
  mousemoveProcessor:[
    function(e){
      console.log('mousemoveProcessor_0');
    },
    function(e){
      console.log('mousemoveProcessor_1');
    },
  ]
});

var result = [
  `<div>click and mousemove</div>`
];

test.parse().forEach(function(element,i){
  if(element.outerHTML != result[i]){
    tester.fail(id,element,result[i]);
  }else
    tester.success(id,element);

  console.log('%c事件绑定需要人工判断结果~',console_success_style);
  document.querySelector('body').appendChild(element);
});

输出

制作感受

弄这家伙很锻炼debug能力啊, 连续de到凌晨3点...当然最后只是显示自己逻辑不强~ 一开始测试很随意, 但后面准备完工的时候试试写测试样例, 结果发现这样写好舒服~感觉结构清晰~debug起来也方便~一边debug一边发现可以完善的特性~

其实这个应该算不上模版引擎吧 , 因为没有if else等语句, 也没有做数据绑定 , 虽然if可以通过* @arr来代替 ,如果if成立就以为着arr里面有一个数据 , 不过着并不直观~ 不管如果* 的循环应该是十分简洁方便的~ 应该可以满足最基本的前端模版需求[faceplam]~

最后感觉有用的话 求 点赞/star ~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android 研究

APK安装流程详解9——PackageParser解析APK(上)

为了让咱们更好的理解谷歌的安卓团队对PackageParser的定位,我们来看下PackageParser的注释

911
来自专栏为数不多的Android技巧

Android 插件化原理解析——Hook机制之AMS&PMS

在前面的文章中我们介绍了DroidPlugin的Hook机制,也就是代理方式和Binder Hook;插件框架通过AOP实现了插件使用和开发的透明性。在讲述Dr...

651
来自专栏小灰灰

Java 借助ImageMagic实现图片编辑服务

Java 借助ImageMagic实现图片编辑服务 java原生对于图片的编辑处理并没有特别友好,而且问题也有不少,那么作为一个java后端,如果要提供图片的编...

4046
来自专栏移动端开发

Charts 常见使用类型实例

Charts是做什么的:        在我们平时的开发中,当使用到一些统计图表的时候,我们该怎样去做那些柱形的统计图、那些折线统计图、扇形统计图,亦或是你在做...

1928
来自专栏Flutter入门

Android OpenGL ES(六) - 将输入源换成视频

上文中,我们是将相机提供的预览画面输入到Surface当中,然后进行滤镜处理和录制。 那我们可以切换输入源为视频吗?

984
来自专栏偏前端工程师的驿站

动手写个数字输入框3:痛点——输入法是个魔鬼

前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不是坑,也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 《动手写个数字输...

1986
来自专栏Python爬虫与数据挖掘

Python网络爬虫四大选择器(正则表达式、BS4、Xpath、CSS)总结

前几天小编连续写了四篇关于Python选择器的文章,分别用正则表达式、BeautifulSoup、Xpath、CSS选择器分别抓取京东网的商品信...

601
来自专栏java一日一条

优化 iOS 程序性能的 25 个方法

ARC(Automatic ReferenceCounting, 自动引用计数)和iOS5一起发布,它避免了最常见的也就是经常是由于我们忘记释放内存所造成的内存...

723
来自专栏tkokof 的技术,小趣及杂念

iTween那些事儿(二)

  上次我们简单浏览了一番iTween的使用和原理,这次我们换个角度,转而看看iTween目前存在的一些缺陷以及一点点可能的改进之处,当然,这些所谓的缺陷或者改...

371
来自专栏炉边夜话

VC++ MFC 常用技巧 (一)

 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

581

扫码关注云+社区