基於無前端經驗的自定義模板生成js引擎

時間 2019-11-07

原文原文鏈接

爲何要用js呢由於跨平臺，甚至網頁也能夠生成html

/*
基於無前端經驗的自定義模板生成引擎
*/
function type(a){return Object.prototype.toString.call(a).split(' ')[1].replace(']','')}
var color={
	"默認":"",
	"原始":"layui-btn-primary",
	"百搭":"layui-btn-normal",
	"暖色":"layui-btn-warm",
	"警告":"layui-btn-danger",
	"禁用":"layui-btn-disabled"
}
var size={
	"大型":"layui-btn-lg layui-btn-normal",
	"默認":"layui-btn-normal",
	"小型":"layui-btn-sm layui-btn-normal",
	"迷你":"layui-btn-xs layui-btn-normal"
}



function jx(a)
{
	var html='';
	if(type(a)=="Object")
	{
		if(a.name=="文檔")
		{
			html+='<body style="background-color: #ecf0f5;">';
			console.log("解析文檔對象");
			if(type(a.body)=="Object"){
				console.log("解析對象");
				jx(a.body);
			}
			else{
				for(var i=0;i<a.body.length;i++)
				{
					console.log("解析節點");
					html+=jx(a.body[i]);
				}
			}
			html+="</body>";
			
		}
		if(a.name=="表格")
		{
			html+='<table class="layui-table"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr>';
			console.log("解析表格控件");
			for(var i=0;i<a.titles[0].length;i++)
			{
				html+='<th>'+a.titles[0][i]+'</th>';
			}
			html+='</tr></thead><tbody>';
			for(var i=0;i<a.titles[1].length;i++)
			{
				html+="<tr>";
				for(var as=0;as<a.titles[1][i].length;as++)
				{
					if(type(a.titles[1][i][as])=="Object")
					{
						html+='<td>'+jx(a.titles[1][i][as])+'</td>';
					}else{
						html+='<td>'+a.titles[1][i][as]+'</td>';
					}
				}
				html+="</tr>";
			}
		}
		if(a.name=="text")
		{
			html+=a.text;
		}
		if(a.name=="面板")
		{
			html+='<fieldset class="layui-elem-field">';
			html+=("解析面板控件");
			if(type(a.data)=="Object")
			{
				html+=("面板內容："+a.text);
			}else{
				html+=("面板節點對象數組");
				for(var i=0;i<a.data.length;i++)
				{
					if(type(a.data[i])=="Object")
					{
						html+=jx(a.data[i]);
					}
					//html+=("面板節點數組["+i.toString()+"]"+a.data[i].text);
				}
			}
			html+="</fieldset>";
		}
		if(a.name=="按鈕")
		{
			if(a.style=="默認")
			{
				html+='<button class="layui-btn '+color[a.color]+' '+size[a.size]+'">'+a.text+'000</button>';
			}
		}
		if(a.name=="層")
		{
			html+='<div class="layui-row">';
			var t=12/a.layer.length;
			var arra=a["rows"];
			console.log(a["rows"]==null?"1":"2");
			for(var i=0;i<a.layer.length;i++)
			{
				var texta='';
				if(arra!=12)
				{
					texta=arra!=null?arra[i].toString():t.toString();
				}
				html+=texta!=12?'<div class="layui-col-xs'+texta+'">':'';
				if(type(a.layer[i])=="Object")
				{
					html+=jx(a.layer[i]);
				}else{
					html+=a.layer[i];
				}
				html+=texta!=12?'</div>':'';
			}
			html+='</div>';
		}
		if(a.name=="導航條")
		{
			html+='<ul class="layui-nav" lay-filter="">';
			for(var i=0;i<a.item.length;i++)
			{
				html+='<li class="layui-nav-item">';
				var date=a.item[i]["badge"];
				var date=date!=null?'<span class="layui-badge">'+date.toString()+'</span>':'';
				console.log(date);
				html+='<a href="'+a.item[i].url+'">'+a.item[i].name+date+'</a>';
				html+='</li>';
			}
			html+='</ul>';
		}
		if(a.name=="輪播")
		{
			html+='<div class="layui-carousel" id="test1"><div carousel-item>';
			for(var i=0;i<a.item.length;i++)
			{
				if(type(a.item[i])=="Object")
				{
					html+='<div>'+jx(a.item[i])+'</div>';
				}
			}
			html+='</div>';
		}
	}
	return html;
}

<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：若是你直接複製全部代碼到本地，上述js路徑須要改爲你本地的 -->
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造實例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //設置容器寬度
    ,arrow: 'always' //始終顯示箭頭
    //,anim: 'updown' //切換動畫方式
  });
});
layui.use('element', function(){
  var element = layui.element; //導航的hover效果、二級菜單等功能，須要依賴element模塊
  
  //監聽導航點擊
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});
</script>

使用也很簡單手動定義節點使用js對象生成前端

例如數組

var a={
	name:"文檔",
	body:[
		{
			name:"導航條",
			item:[
				{
					name:"首頁",
					badge:10,
					url:"#"
				},
				{
					name:"舞曲",
					url:"#"
				},
				{
					name:"專輯",
					url:"#"
				},
				{
					name:"導航",
					url:"#"
				}
			]
		},
		{
			name:"層",
			rows:[8,4],
			layer:[
				{
					name:"text",
					text:'<img src="http://www.ivusic.com/uploads/20180124/32924edaba71889434e6db959fe119e3.jpg" alt="">'
				},
				{
					name:"層",
					rows:12,
					layer:[
						{
							name:"層",
							layer:[
								{
									name:"text",
									text:'<div class="layui-card">必讀精選</div>'
								}
							]
						},
						{
							name:"層",
							layer:[
								{
									name:"text",
									text:'<div class="layui-card">佔位</div>'
								}
							]
						}
					]
				}
			]
		},
		{
			name:"輪播",
			item:[
				{
					name:"text",
					text:'<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3900627411,3918395517&fm=27&gp=0.jpg">'
				},
				{
					name:"text",
					text:'<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3900627411,3918395517&fm=27&gp=0.jpg">'
				}
			]
		},
		{
			name:"層",
			rows:[6,6],
			layer:[
				{
					name:"按鈕",
					style:"默認",
					color:"默認",
					size:"默認",
					text:"層內按鈕1"
				},
				{
					name:"層",
					rows:12,
					layer:[
						{
							name:"層",
							layer:[
								{
									name:"text",
									text:"層內層內層"
								}
							]
						},
						{
							name:"層",
							layer:[
								{
									name:"text",
									text:"層內層內層"
								}
							]
						}
					]
				}
			]
		},
		{
			name:"表格",
			titles:[
				[
					"表頭id",
					"表頭name",
					"年齡",
					"成績"
				],
				[
					[
						{
							name:"面板",
							data:[
								{
									name:"text",
									text:"我是列表裏的面板控件"
								}							
							]
						},
						{
							name:"面板",
							data:[
								{
									name:"text",
									text:"我是列表裏的面板控件"
								}							
							]
						},
						{
							name:"按鈕",
							style:"默認",
							color:"默認",
							size:"默認",
							text:"表格內按鈕"
						},
						{
							name:"按鈕",
							style:"默認",
							color:"默認",
							size:"迷你",
							text:"表格內迷你按鈕"
						}
					],
					[
						{
							name:"面板",
							data:[
								{
									name:"text",
									text:"我是列表裏的面板控件"
								}							
							]
						},
						{
							name:"面板",
							data:[
								{
									name:"text",
									text:"我是列表裏的面板控件"
								}							
							]
						},
						{
							name:"text",
							text:"66666666666"
						},
						{
							name:"text",
							text:"66666666666"
						}
					]
				]
			]
		}
	]
};

框架的話能夠隨便用好比boot 我這裏用的是layui框架

**使用思路就是相似xml佈局利用layui 媒體查詢柵格佈局特性由此網頁可分爲十二列而且自適應，控件的話也是這個屬性而且隨意添加容器這樣甚至能夠不用看網頁調試即可以生成咱們須要的位置須要的控件個動畫，基本我已經寫好了擴展控件和動畫風格所有就能夠自定義定製而後發出來有興趣的能夠擴展看看我沒啥興趣哈哈 **佈局