前端自动化html,前端自动化——用js动态生成html页面

首先思路明确：生成的元素是一个完整的DOM对象；这些DOM对象的属性可以是字符串，xml文件，也可以是json格式的数据，存储在后台或者其它位置；通过层层解析，顺着DOM层级关系动态创建在html文档流中；这些html文档放于不同的模板文件中相应生成不同样式的效果。

以下就json格式存储的数据，简单示例一下：

第一步：获取attribute数据

var url = window.android.getCurrentDataUrl();

var data = window.android.getDataBody(url);

var dataJson = JSON.parse(data);

var jsonData = JSON.parse(dataJson['data']);

var jsonData = [] //自主创建(可选)

第二步：创建元素类数据并分别解析

$(function () {

//alert(url);

var cls = {};

AnalyJson(jsonData, cls, data_toggle, $('#main'));

});

//创建JSON解析函数

function AnalyJson(data,cls,data_toggle,div){

if('id' in data){

AnalyJson(data.values,cls,data_toggle,div);

}else{

if('name' in data){

CreateInputViewer(data.name,cls,data_toggle,div);

AnalyJson(data.values,cls,data_toggle,div);

}else{

if('type' in data){

CreateInputViewer(data,cls,data_toggle,div);

}else{

for(var p in data){

CreateInputViewer(data[p],cls,data_toggle,div);

}

}

}

}

//针对不同的解析情况，调用下边函数

function CreateInputViewer(data,cls,data_toggle,div){

attr = {};

//alert(data.type);

switch(data.type){

case 'text':{

//alert(attr['name']);

CreateInput(data,cls.text,data_toggle.text,div);

break;

}

case 'radio':{

//alert(attr['name']);

CreateRadio(data,cls.radio,data_toggle.radio,div);

break;

}

case 'select':{

//alert(attr['name']);

CreateSelect(data,cls.select,data_toggle.select,div);

break;

}

case 'checkbox':{

//alert(attr['name']);

CreateCheckBox(data,cls.checkbox,data_toggle.checkbox,div);

break;

}

case 'photo':{

CreatePhoto(data,