数据结构

前端需要数据结构吗,你可能会想到前端在请求数据时的数据结构。不对,这里要说明的数据结构是用来输出为html结构的,和后
端并没有什么关系。aotoo设计了一套扁平化的数据结构,我们知道对于数据操作的灵活性要远远超过对于dom的操作

const myData = [
  {title: '1111', idf: 'root', attr: {}, itemMethod: '', itemClass: '', itemStyle: '', img: '', url: '', li: [], body: [], footer: [], dot: []},
  {title: '2222'},
  {title: '3333'},
  {title: '444'},
  {title: '555', idf: 'father'},
  {title: '666'},
  {title: '777'},
  {title: '888'},
  {title: 'level2-1', parent: 'root'},
  {title: 'level2-2', parent: 'root'},
  {title: 'level3-1', parent: 'father'},
  {title: 'level3-2', parent: 'father', idf: 'son'},
  {title: 'level4-1', parent: 'root'},
  {title: 'level4-2', parent: 'root'},
  {title: 'friend-1', parent: 'son'},
  {title: 'friend-2', parent: 'son'},
]

上述结构非常简单,主要是为了突出扁平化数据结构的易用性,高可操作性,实际上数据项有较丰富的属性用来生成复杂的结构

Demo:
Edit aotoo-tree
第一次访问需要翻墙,因为codesandbox有相关google的广告内容

结构说明

  • idf {String}

    成对属性,与parent属性一起,用于表现层次型数据

  • parent {String}

    成对属性,与idf属性一起,用于表现层次型数据

  • id {String}

    为子项输出的结构配置id

  • attr {Json}

    数据数组会生成ul.li的html结构,attr会将子属性以data-*的方式存在在li的属性中

  • title {String|Number|Jsx|Array[]}

    实际上title是每一项的负载内容

  • url {string}

    当title为字符串时,如果存在url,title会输出<a href='...'>,如url使用__前缀,<a>标签会带上target="__blank"的属性

  {
    title: '访问github',
    url: '__ https://www.github.com'
  }

  // 该配置会生成 <a ef='https://www.github.com' target="__blank">访问github</a>
  • img {String|Array[String]}

    生成一张或多张图片结构, img指向图片地址

  • li {Array[MIX]}

    li的子项允许一个复杂的类型,该类型与ITEM支持的类型一致

    {
      title: '这是一个li的简单实现',
      li: [
        {title: '子项目1'},
        {title: '子项目2', url: 'http://www.agzgz.com'},
        {img: 'http://www.google.com/abc.png'},
        {li: [
          {title: 'title1'},
          {title: 'title2'},
        ]},
      ]
    }
    

    li的作用是在一个item内部实现list,允许嵌套,实际上是一个内部的递归,与list的表现几乎一致

  • body {Array[MIX]}

    li结构的一种语义表现,li类似,但产出的结构更加严谨,相较于Li来说有些许冗余

  • footer {Array[MIX]}

    li结构的一种语义表现,li类似,但产出的结构更加严谨,相较于Li来说有些许冗余

  • dots {Array[MIX]}

    li结构的一种语义表现,li类似,但产出的结构更加严谨,相较于Li来说有些许冗余
    用于表现一个item中的自由元素,类似常见的热门、推荐等的小标签

  • itemMethod {FUNCTION}

    为每一个子项配置回调方法,有一个dom(真实)的参数

  • itemClass {String}

    为每一个子项的输出结构配置样式类名称

  • itemStyle {String}

    为每一个子项的输出结构配置独立的样式style