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

相关文章

来自专栏pangguoming

Maven WEB 项目使用ProGuard进行混淆,最佳解决方案

近期公司的Android项目做了混淆,虽说对于保护代码并不是100%的,但混淆后的代码可以使那些不法份子难以阅读,这样也能对代码的保护做出贡献。  于是,公司写...

1741
来自专栏Python小屋

Python读写CSV格式文件

CSV(Comma Separated Values)格式的文件常用于电子表格和数据库中内容的导入和导出。Python标准库csv提供的reader、write...

2775
来自专栏coding for love

JS常用参考文档整理

482
来自专栏cs

淘宝评论的爬取

淘宝网页的评论数据动态加载的,首先要关闭adblock等屏蔽插件广告。还有我登陆了账号。

2063
来自专栏专知

【关关的刷题日记57】Leetcode 101. Symmetric Tree

关关的刷题日记57 – Leetcode 101. Symmetric Tree 题目 ? 题目的意思是判断一棵树是否是镜像的,此处镜像指的是中心对称的树。 思...

2894
来自专栏互联网软件技术

js识别设备

775
来自专栏数据结构与算法

03:成绩排序 个人博客:doubleq.win

个人博客:doubleq.win 03:成绩排序 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB描述 给出班里某门课程的成绩单...

3065
来自专栏喔家ArchiSelf

一行Python代码

自从08年接触Python,就有爱不释手的感觉,逐渐地,有些不忍地疏远了Perl 和Shell编程,因为python 的优雅么? 不全是,主要是可以高效开发吧。

834
来自专栏Java爬坑系列

【JAVA零基础入门系列】Day12 Java类的简单应用

  俗话说的好,实践出真知,所以除了理论知识掌握扎实以外,更重要的是要多加操练,这样才能掌握核心科技。   今天我们就用刚学会的类来实践一下,目标便是完成上一篇...

1779
来自专栏优启梦

渗透测试中的域名伪装原理

今天在《网络渗透测试--保护网络安全的技术、工具、过程》一书中看到了一个关于对恶意链接进行域名伪装的方法,以前从不知道的一个方法,特此记录下来:

1565

扫码关注云+社区