liuqipeng

媒体对象可以节省数百行代码

liuqipeng · 2016-12-09翻译 · 438阅读 原文链接

因特网由什么组成的呢?至少用户界面层主要是由媒体块组成的。我曾经讨论过 Facebook 里 stream story before, and all the tiny objects of which it is composed。大部分 stream story 都是由媒体对象不断重复组成的。

媒体对象是左侧为一张图片,右侧为描述性内容,就像 Facebook story 里一样:

左侧为图片,右侧为描述性内容

媒体对象

右侧的内容区域可以包括任何其他的对象。在这个例子里,它包含着文本,但是我们可以放进去列表、栅格,甚至可以是媒体对象。正如我们前面所看见,实际上在 Facebook 网站上有许多不同版本的媒体对象(在大多数的页面上)。对象里必需包含的这五个元素只是这个方式下的一些例子:

媒体对象的变化

有时候图像可以是一个小图标、很大的视频,又或者是一个头像,但它都是相同的基础对象。我创建新对象的第一件事情就是去找出哪个部分是可以复用的组件,并对它们定义什么是我需要知道不知道的。

我们知道什么?

  • Can be nested
  • 可以被嵌入

  • Optional right button

  • 可选的右侧按钮

  • Must clearfix

  • 必须清除浮动

我们决定不需要知道什么?(思考灵活性!)

对于一个新对象,定义什么是灵活或者未知是相当重要的。

  • Image width, margins, and decoration vary
  • 图片宽度、外间距以及装饰是变化的

  • Right content is unknown

  • 右侧内容是未知的

  • Width unknown

  • 宽度未知

一旦媒体对象被建立,我们可以用它来创建许多相同的基础对象。接下来的这幅图里,我已经把 facebook 主页里的媒体对象高亮标识。你可以看到,因为我们通过停止了重复自身,使得实现这个对象就可以节省大量的代码。

媒体对象的使用

在 facebook 主页里,媒体对象被红色高亮标识

实现细节

它是怎么做到的呢?因为这里面最难的部分就是图片的宽度是可以任意大小的,所以这个元素是复用的。这也意味着我们的内容区域需要足够的灵活才能把剩余空间有效地填充满。因此为了一个灵活的列区域,我们必须创建一个新的格式化上下文。

The HTML: HTML 代码:

<div class="media attribution">

  <a href="http://twitter.com/stubbornella" class="img">
    <img src="http://stubbornella.com/profile_image.jpg" alt="me" />
  </a>

  <div class="bd">
    @Stubbornella 14 minutes ago
  </div>

</div>

The CSS: CSS 代码:

/* ====== media ====== */
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}
  1. 我们使用 secret benefits of overflow 里的方法,对封装元素,例如:媒体对象、内部内容,以及 body 进行清除浮动。当然我们也可以通过其他的方式去清除浮动,来创建一个新的格式化上下文。更多资料会在接下来的文章里。

  2. 接着我们把图片 wrapper 往左浮动,可选的右边区域向右浮动。

  3. 为了更好的排列,我们给所有元素设置外间距和内间距。如果你有数个不同间隔和装饰下的图片,你可以通过继承于 .img 对象的类来设置外间距。

瞧,我们完成了。这是一个非常简单的对象,但是它非常有用。通过抽象这个重复模式,我们去除了大量代码。Object Oriented CSS open source project 里的媒体对象和其他 “web Lego” 代码是可用的。

相关文章