毫无疑问,API在今天起着非常重要的作用。 从小到大的Web服务都需要通过API公开其数据,开发人员可以使用它们在其之上创建新服务。 想想像Google,Yahoo!,Twitter和Microsoft这样的大公司:它们都提供服务的API。 这些API提供的数据的示例用法是SnapBird (在Twitter上提供扩展搜索选项的工具)和JoindIn.js (我开发的库,该库基于JoindIn提供的数据创建小部件)。
在这个由两部分组成的文章中,我将向您展示如何使用Flickr API开发一个简单的服务,该服务允许用户在搜索字段中输入文本,然后显示标题或描述匹配的Flickr图像库。该文本。 这将是一个很好的机会,既可以使用第三方API并在此过程中学习一些不错的技术。
该项目的源代码可在我的GitHub帐户上的名为Flickr gallery demo的存储库中访问。
要求
在我们编写任何代码之前,了解如何开发服务很重要。 首先,我们的项目将由一个HTML页面组成,该页面包含三个主要组件:标题,图库和缩略图列表。
页眉将包含页面标题和搜索表单,用户可使用该表单查找与给定文本匹配的照片。
画廊将位于标题下方,并以自然大小显示图片,并以固定的宽度和高度显示(我们不希望图片溢出我们的布局,对吗?)。 画廊还将具有向左和向右按钮,分别显示上一张和下一张图像。
最后,我们将在图库下面提供照片缩略图的列表。 我们不希望列表变得太长,因此我们将对匹配的照片进行分页,并在每页上最多显示15张照片,分三行显示。 (在该项目中,单击向右箭头不会导致缩略图的下一页加载。但是,阅读本系列文章之后,可以根据需要更新为触发此操作的代码。)
整个服务的开发将关注可访问性,因此在此过程中,我们将在有意义的地方使用相关的role
属性,并确保可以通过使用TAB和ENTER来导航网站并触发各种操作键。
我们的努力结果如下图所示:
类别名称约定
尽管该项目本身并不复杂,但是除了一些帮助程序之外,我将使用BEM方法来命名所使用的类。 有人可能认为这太过分了,但我认为这是学习您可能不熟悉的新方法的好机会。 用于样式设计的类名称将不会用作JavaScript钩子。 因此,如果一段JavaScript需要检索一个或多个元素,而不是使用现有的类名,我将在元素中添加特定的类名,并以js-
作为前缀。 这是许多开发人员用来分隔类名和JavaScript钩子的常用技术。 为了强化这个概念,让我们简要地讨论一个例子。
假设我们已经这样定义了gallery元素:
<div class="gallery"><!-- other code goes here --></div>
gallery
类名称用于设置元素的样式,但需要JavaScript函数检索该元素以执行某些操作。 而不是使用gallery
类名称来检索元素,如下所示:
var gallery = document.getElementsByClassName('gallery')[0];
我将添加另一个名为js-gallery
类:
<div class="js-gallery gallery"><!-- other code goes here --></div>
然后,我将像这样检索元素:
var gallery = document.getElementsByClassName('js-gallery')[0];
这样,即使在项目的后面gallery
名称被重命名或删除的情况下,也可以确保JavaScript代码仍然有效。 如果您不喜欢js-
前缀,我已经读到一些开发人员使用do-
前缀来突出显示该元素用于执行操作的事实。 两种约定都是等效的,您可以选择最喜欢的一种。
建立了我们项目的目标,组成部分和约定之后,让我们开始乐趣吧!
标记
创建服务的第一步是编写页面的标记,我们将从标题开始。
标题
标头所需的HTML非常简单。 我们将包裹都在上一节中描述的元素-标题和形式-用header
元素。 页面标题由h1
元素定义,表单由form
元素定义。 该表单由label
,用户可以在其中input
要搜索的文本的input
以及提交请求的button
。 label
通过使用for
属性绑定到input
。
该form
还将具有role="search"
属性,因为我们要强调它是一个搜索表单,并且输入的type
将是search
。 最后,我们将添加一个名为form-search
的类以用于样式设计,并添加一个js-form-search
类,JavaScript将使用该类来检索用户输入的文本。
标头的完整代码如下所示:
<header class="island">
<h1>Flickr gallery</h1>
<form class="js-form-search form-search" action="/search" method="get" role="search">
<label for="query">Search:</label>
<input type="search" name="query" id="query" placeholder="Search" required />
<input type="submit" value="Search" />
</form>
</header>
现在让我们讨论标记的最重要元素–图库。
画廊
画廊由三个不同的小元素组成:用于以自然大小显示所选图像的img
元素,以及用于更改显示图像的左右箭头。 两个箭头都将使用button
元素创建。 这是正确的选择,因为我们希望在单击它们时执行一个动作。 外观上,按钮看起来像箭头,但这仅对有视力的人有意义。 从视障用户的角度来看,箭头完全没有用。 因此,我们必须通过指示其作用来增强这些按钮。 我们将通过添加文本作为按钮的内容来做到这一点-这些文本在视觉上是隐藏的,但屏幕阅读器可以访问。 下面采用的技术来自HTML5 Boilerplate项目,并使用一个名为visually-hidden
的类。
画廊的完整HTML代码如下:
<div class="island">
<div class="js-gallery gallery">
<img src="" class="js-gallery__image" />
<button class="js-gallery__arrow--left gallery__arrow gallery__arrow--left">
<span class="visually-hidden">Previous photo</span>
</button>
<button class="js-gallery__arrow--right gallery__arrow gallery__arrow--right">
<span class="visually-hidden">Next photo</span>
</button>
</div>
</div>
在完成标记之前,我们需要讨论最后一个组件–缩略图列表。
缩略图列表
最后一个组件由两个非常简单的子组件组成:当前页面的缩略图列表和寻呼机。 两者都定义为列表,但是第一个是无序列表,第二个是有序列表。 这两个列表都需要使用JavaScript即时生成,因此我们将在其上添加js-
前缀的类名。
最后一个组件的代码如下所示:
<div class="island thumbnails">
<ul class="js-thumbnails__list thumbnails__list"></ul>
<ol class="js-thumbnails__pager thumbnails__pager"></ol>
</div>
在最后一个代码片段中,我们已经完成了对页面标记的讨论,因此现在该给它一些样式了。
风格
项目的视觉样式将组织为小模块,每个模块都涉及一个特定方面。 作为基础,我们将使用normalize.css (著名的样式表),该样式表使浏览器更一致地呈现所有元素并符合现代标准。
它只针对需要规范化的样式。
然后,我们将为助手类提供一个模块,为画廊提供一个模块,为缩略图提供一个模块,等等。
在本节中,我们将讨论项目中使用的每个模块(normalize.css除外)。
布局模块
该模块是对元素的默认样式进行分组的模块,这意味着在没有定义任何类的情况下元素的外观。 例如,在这里我们将定义a
元素和body
的默认颜色。 唯一的例外是您在标记中使用的island
类,并且该类已用于创建隔离的块 。 该课程的灵感来自哈里·罗伯茨 ( Harry Roberts)的文章“ island”对象 ,因此,如果您想了解更多有关它的信息,建议您阅读引用的文章。
在此模块中值得一提的唯一声明块如下:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
它定义了页面的所有元素必须使用CSS border-box
框框模型值。 如果您想了解更多有关此主题的信息,建议您阅读Paul Irish的 * {Box-sizing:Border-box} FTW和Chris Coyier的 Box Sizing文章 。
layout.css文件的完整代码如下所示:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.island {
display: block;
max-width: 1024px;
margin: 0 auto;
}
body {
background-color: #060C10;
color: #FFFFFF;
font-family: Arial, Calibri, Helvetica, sans-serif;
}
h1 {
display: block;
color: #FCB720;
}
a {
color: #FFFFFF;
}
助手类
这可能是服务中最简单的模块,并且定义了三个众所周知的帮助程序类,这些人大多数(如果不是全部)都非常熟悉。 这些类是: visually-hidden
, hidden
和clearfix
。
第一个在visually-hidden
,用于在视觉上隐藏元素。 这意味着该元素未显示在页面上,但仍可供屏幕阅读器访问,这对于可访问性而言非常重要。 hidden
是单声明类,用于在视觉上和屏幕阅读器中隐藏元素。 最后一个类clearfix
,用于包含浮点数,而无需使用表示性标记。 如果要了解有关此主题的更多信息,可以查看Nicolas Gallagher的文章A new micro clearfix hack 。
该模块的完整代码如下所示:
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.hidden {
display: none !important;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
结论
在本文的第一部分中,我们讨论了我们正在构建的服务的详细信息,以及通过阅读本微型系列文章将学到的内容。 然后,我们介绍了我在项目创建期间使用的约定,因此您知道为什么以某种方式定义类名。
确定了目标和服务的组成部分之后,我们讨论了构成我们正在开发的服务的所有标记,重点介绍了一些选择,例如为什么我为画廊的箭头选择button
元素。 最后,在本文的最后一部分,我们开始研究该项目的一些CSS模块。
在本系列的第二部分(也是最后一部分)中 ,您将看到其余的CSS模块,并了解为该服务提供支持的JavaScript代码。
From: https://www.sitepoint.com/creating-image-gallery-using-flickr-api-requirements-markup/