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>