这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

List 列列列列列表

从掘金开始构思一个列表组件

打开掘金首页，引入眼帘的如果不是下图的话，那大概率是路由访问指定界面， 或者网络卡了。

如果是长期在掘金探索知识(hua shui mo yu)的小伙伴应该也知道， 类似的布局不仅仅出现在首页，个人中心，我的小册等好几个界面，都是类似的列表。那么这时候就要脑补了，他们的开发是CV大法还是写成组件了呢？

如果想知道原因的话，还是可以探寻一波的。

看看掘金的列表结构

这里分别对比个人中心的文章列表页，以及首页，可以清晰的看到，两者的结构不能说是相似，只能说是一模一样的吧，那么到底是CV出来的还是组件化的开发呢？

那就不管了，既然之类讲组件，那么统一当做是组件化开发吧。

不过不同的是， 我的小册的列表与这里的结构完全不同的。

但是既然这里要做一个列表组件，那么是不是可以脑洞一下， 假设他们用的同一个组件，只是针对性的做了差异化处理呢？

搭个结构

看了看掘金的列表差异， 那么我们如果要做个自己的列表插件是不是可以参考下？

例如，先根据做一个默认的组件，主要展示文字内容，布局固定， 结构划分为header,footer,content。

按这个思路来拆分下掘金的列表结构

这里因为考虑右侧的图的高度占比问题， 所以默认footer部分是隐藏未使用的。但是在组件开发过程中考虑到可能会用上，就做一手处理。

// list-item
<template lang="pug">
block content
div.list-item
    div.list-item-header(v-if="header")
        slot(name="header") {{header}}
    div.list-item-content
        slot
    div.list-item-footer(v-if="footer")
        slot(name="footer") {{footer}}
<template>

注意： 这并不是list父组件，而是list-item列表项组件，从这里开始。

有趣的是，顶级list组件我们也可以这里处理， header部分可以在掘金列表中可以用来存放最新、最热的分类。

差异化处理。

这里的差异化分两种情况， 一种是从首页的文章列表到小册列表这种几乎脱胎换骨的差异化，那么就需要额外新增一个子组件去针对小册的布局进行组件开发了。

在处理差异化之前，要明白一点， 列表组件的核心是展示列表， 所以在组件中，应该减少针对内容样式的结构、样式的处理，主要负责搭建一个展示列表的舞台。

基于上线提到的这点，那么要针对大的差异化处理，如非必要，可以不用新的组件去处理，但是从文章到小册的结构是不同的， 所以需要一个新的子组件。

它与list-item的区别在于， 他为小册的结构提供的一个容器，可以适配小册结构的布局。

如果是小的差异化的处理的话，则完全可以把样式的问题交给开发时去处理，组件保持一个干净的容器结构。

如果差异略大，例如header部分和footer部分需要重新调整， 可以传入一个type参数控制类名，继而通过类名来改变布局样式。