DataTo 数据转换
简介
开发软件的时候经常遇到数据转换,比如字符串转数字,ul+li转json,#id转node节点等,以确保程序可按预定的方式执行下去。
axStrToDom
该函数是将字符串转成Dom节点对象。
完整写法:axStrToDom(string),参数说明如下:
- string:必填项,通常为"<div>伟大的中国</div>"等标签与文字夹杂的字符串。
举例:axStrToDom('<div>伟大的中国</div>'),该例子表明将"<div>伟大的中国</div>"字符串转成可以使用document.querySelector选择器的节点。
axIdToDom
该函数表示选择#id、.className、div等Dom对象,如果本身是Dom则直接返回该Dom。
完整写法:axIdToDom(string),参数说明如下:
- string:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
举例:axIdToDom('#demo'),该例子结果等于document.querySelector('#demo')。
axArrToDom
该函数将逗号区分的字符串转成数组,并根据数组内容转成Dom集合。
完整写法:axArrToDom(str, parent),可简写axArrToDom(str),参数说明如下:
- str:必填项,是以英文逗号分隔的字符串,比如"#demo,.china,div"。
- parent:可选项,如果填写表示只将其子元素转入集合,可以填"#id"、".className"、"div"等原生选择器以及Dom对象
举例:axArrToDom(".china,div", "#demo"),该例子返回#demo这个父节点下的.china和div子元素。
axUlToArr
该函数可以将UL+LI格式的内容转成Json对象,类似[{'name':'china','id':'no01','children':{}}]。
完整写法:axUlToArr(elem),参数说明如下:
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象,elem必须是ul节点对象
举例:axUlToArr('#demo'),该例子将id为demo的ul节点转成Json对象
axSelectToArr
该函数可以将select下拉菜单的内容转成Json对象,类似[{'name':'china','id':'no01','children':{}}]。
完整写法:axSelectToArr(elem),参数说明如下:
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象,elem必须是select节点对象
举例:axSelectToArr('#demo'),该例子将id为demo的select节点转成Json对象
axListToArr
该函数可以将datalist节点对象转成Json对象,类似[{'name':'china','id':'no01','children':{}}]。
完整写法:axListToArr(elem),参数说明如下:
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象,elem必须是datalist节点对象
举例:axListToArr('#demo'),该例子将id为demo的datalist节点转成Json对象
axStrToArr
该函数可以将字符串转成数组,支持字符串类型有'[]','{},{}','{}'和'a,b,c'。
注意'{}'中属性和值的写法需要用双引号,比如:'{"country":"China"}'
完整写法:axStrToArr(string,dftAttr,dftValue),参数说明如下:
- string:可以填'[]','{},{}','{}'或'a','a,b,c'
- dftAttr:选填项,默认属性,是数组。比如['media','caption']
- dftValue:选填项,与默认属性相对应的默认值,是数组。比如['','测试标题']
举例:axStrToArr('{"country":"China"},{"country":"Rusia"}'),该例子将最终返回一个数组:[{country:"China"},{country:"Rusia"}]
axTplToArr
该函数可以将页面中的HTML模板转成数组。
完整写法:axTplToArr(template, roles, keys, itemNode,dft),参数说明如下:
- template:必填项,HTML模板。可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- roles:必填项,HTML模板中的标签属性,是数组类型,比如['src','title']
- keys:必填项,转成数组后的属性名合集,是数组类型,比如['media','caption']
- itemNode:选填项,HTML模板中的子节点名称,如果是列表就需要填
- dft:选填项,转成数组后的属性为空时是否使用默认值,是数组类型,比如['','测试标题']
举例:axTplToArr('#demo', ['src','title'], ['media','caption'], 'figure'),该例子将最终返回一个数组:[{media:"",caption:''},{media:"",caption:''}]
HTML模板如下:
<div style="display:none;" id="demo"> <figure> <img src="../demo01.jpg"> <figcaption title>测试1</figcaption> </figure> <figure> <img src="../demo02.jpg"> <figcaption title>测试2</figcaption> </figure> <figure> <img src="../demo03.jpg"> <figcaption title>测试3</figcaption> </figure> </div>