制作的的原因
制作的的原因還是屬于解決自己的遇到的麻煩事, 用于在前端便捷地生成dom結(jié)構
- 編輯器的Emmet修改起來還是比較麻煩, 按ctrl+z , 次數(shù)有點多 , 還有為了面對后的修改會把emmet的命令儲存在注釋里面
- 同時有一些dom是儲存在js里面 , 占據(jù)的空間略大, 并且代碼折疊 (在VS code編輯器) , 不能完整折疊, 代碼之間的跳轉(zhuǎn)不方便
- 儲存在js 里面的dom里面的無論是事件綁定還是數(shù)據(jù)導入都用原生的方式挺繁瑣的
功能概覽
語法大致和Emmet的一致, 不過只是在導入數(shù)據(jù)方面我自己增加了一些, 不過只是支持了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);
});
輸出
連接符( ) * > ^及其導入和尋址
$是這層循環(huán)的得到結(jié)果, 如果其是一個object的話先要得到其自屬性使用$attrName做來獲取 , 如果還想繼續(xù)獲取就之后就是使用:來做分割, 比如$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事件綁定需要人工判斷結(jié)果~',console_success_style);
document.querySelector('body').appendChild(element);
});
輸出
制作感受
弄這家伙很鍛煉debug能力啊, 連續(xù)de到凌晨3點...當然最后只是顯示自己邏輯不強~ 一開始測試很隨意, 但后面準備完工的時候試試寫測試樣例, 結(jié)果發(fā)現(xiàn)這樣寫好舒服感覺結(jié)構清晰debug起來也方便一邊debug一邊發(fā)現(xiàn)可以完善的特性
其實這個應該算不上模版引擎吧 , 因為沒有if else等語句, 也沒有做數(shù)據(jù)綁定 , 雖然if可以通過* @arr來代替 ,如果if成立就以為著arr里面有一個數(shù)據(jù) , 不過著并不直觀~ 不管如果* 的循環(huán)應該是十分簡潔方便的~ 應該可以滿足最基本的前端模版需求[faceplam]~
