一个简单的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 条评论
登录 后参与评论

相关文章

来自专栏java工会

java调用webservice接口的几种方法

3184
来自专栏北京马哥教育

做到这二十条,Python程序性能轻松翻倍!

1.优化算法时间复杂度 算法的时间复杂度对程序的执行效率影响最大,在Python中可以通过选择合适的数据结构来优化时间复杂度,如list和set查找某一个元素的...

3477
来自专栏Android知识点总结

3-AIV--使用ContentProvider获得所有图片路径

812
来自专栏机器学习从入门到成神

java.lang.StackOverflowError异常解决

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

1702
来自专栏MasiMaro 的技术博文

ATL模板库中的OLEDB与ADO

上次将OLEDB的所有内容基本上都说完了,从之前的示例上来看OLEDB中有许多变量的定义,什么结果集对象、session对象、命令对象,还有各种缓冲等等,总体上...

1092
来自专栏XAI

微信企业号登录授权Java实现获取员工userid根据userid换openid

微信企业号登录授权Java实现获取员工userid根据userid换openid 2016年1月8日 为了方便测试 。debug 建议大家搞个花生壳或者其他的可...

7319
来自专栏小灰灰

spring-boot & ffmpeg 搭建一个音频转码服务

利用FFMPEG实现一个音频转码服务 提供一个音频转码服务,主要是利用ffmpeg实现转码,利用java web对外提供http服务接口 背景 音频转码服务...

9886
来自专栏步履前行

Java 基础-LocalDate相关

那么在写具体的LocalDate前,我们先来看下为什么要在Java8中搞一套新的API呢,因为旧的Date类非常的难用,比如,其中的几个构造方法都被标注为@De...

1471
来自专栏码字搬砖

JVM内存模型之直接内存

直接内存 又称堆外内存,也就是说这不是jvm运行时数据区的一部分,也不是java虚拟机规范中定义的内存区域,但这部分也会被频繁的使用,而且也可能导致OOM。

1343
来自专栏Hongten

Struts2 IncludeModules(包含 <include file="login.xml" />)

xml文件当成struts.xml包含在struts.xml中,比如我们看到的login.xml

551

扫码关注云+社区