CHE制作JHTML

插件介绍：

涉及到的技术：

1. HTML
2. JS
3. json
4. HTML DOM

简介：

用json-script标签里编写json，效果展现到html，核心文件CHE/jsonScript/m.js，导入CHE/m.js即可

---

文件：

CHE/m.js：

var url="CHE/";
var CHE={
    windowArray:{}
};
CHE.import = function (object){
    if(object.type=="css"){
        var dom = document.createElement("link");
        dom.href=url+object.src;
        dom.rel="stylesheet";
         dom.type="text/css";
          document.querySelector("head").appendChild(dom);
       }
       if(object.type=="js"){
           if(object.position=="head"){
               var dom = document.createElement("script");
               dom.src=url+object.src;
               document.querySelector("head").appendChild(dom);
           }
           if(object.position=="body"){
               var dom = document.createElement("script");
               dom.src=url+object.src;
               document.body.appendChild(dom);
           }
       }
   };
CHE.import({
    type:"js",
    src:"jsonScript",
    position:"head"
});

CHE/jsonScript.js：

var i = 0;
var d = document.querySelectorAll("json-script")
var a = [
	
]
while (d[i]){
	a[i] = d[i].innerText;
	var j = eval("("+a[i]+")")
	if (typeof(j)!="object") {
		console.error("json-script里面必须是JSON!!!")
	}
	else if (typeof(j)=="object") {
		d[i].innerText=""
		var aa = [
			
		]
		var ii = 0;
		var iii = 0;
		while (j[iii]){
			aa[iii] = document.createElement(j[iii].el);
			arr = j[iii].content;
			var num = 0;
			while (arr[num]){
				eval("aa[iii]."+arr[num].el+"='"+arr[num].ct+"'")
				num++;
			}
			iii++;
		}
		while (aa[ii]){
			d[i].appendChild(aa[ii]);
			ii++;
		}
	}
	i++;
}

---

实例：

代码：

//json-script标签里
[
	{
		"el":"h1",
		"content":[
			{
				"el":"innerHTML",
				"ct":"我是一号标题"
			}
		]
	}
]

结果：

---

教程：

1. JSON解说

   1. 整个json是一个数组

   2. 每个数组元素对象

   3. 对象表示创建标签

      1. el表示标签名

      2. content表示标签内容

         1. content是一个数组

         2. content每一个元素都是对象

         3. content每一个元素表示一个节点

            1. content元素内对象的键el是要修改的节点的名称

            2.  content元素内对象的键ct是要修改的节点的内容

实例：

[
	{
		"el":"a",//设置标签为a
		"content":[//改变标签内容
			{
				"el":"innerHTML",//改变标签的innerHTML
				"ct":"我是一个链接"//innerHTML内容是我是一个链接
			},
            {
                "el":"href",//改变标签的href
                "ct":"https://www.runoob.com"//标签href为https://www.runoob.com
            }
		]
	}
]

结果：

---

下载

链接：百度网盘

提款码：json