在前端开发过程中，我们常常需要使用图片来进行展示、配图等操作。图片的选取、管理、搜索等都是比较繁琐的操作，但是现在有一个叫做 imgur-search 的 npm 包可以帮助我们解决这些问题。本文主要介绍如何使用 imgur-search 包进行图片的选取和搜索功能。
环境准备
在开始使用 imgur-search 包之前，我们需要对环境进行一些准备。
- 把开发项目的根路径设置为环境变量
NODE_PATH。这可以让我们使用绝对路径引入包，而无需一层层地找到我们要引入的包。 - 安装 imgur-search 包。可以使用
npm install imgur-search命令进行安装。 - 创建 imgur app，并获取到对应的 client id。这是我们调用 imgur 搜索接口的必要凭证。
基本使用
选取图片
以下是一个简单的示例代码，用于选取图片并展示在页面上：
--------- -----
------
------
-------------
---- ---------------- --
------- -----------------------------------
------- --------------------------
-------
--------- --------
----- ----- - ------------------------
----- --------- - -- -- -
-----
--------- -- ------- --
-------------- -- -
----- ------ - --------------------
----- ----------- - ---------------------------------------
--------------- - -------
--
------------ -- -
-------------------
---
--上述代码中，我们通过调用 imgur 的搜索接口来获取图片信息。解析返回数据后，将第一张图片的链接赋值给 img 标签的 src 属性，从而展示在页面上。
搜索图片
以下是一个简单的示例代码，用于搜索图片并展示在页面上：
--------- -----
------
------
-------------
------ ---------------- ------------------- --
------- -----------------------------------
---- -------------------
------- --------------------------
-------
--------- --------
----- ----- - ------------------------
----- --------- - -- -- -
----- ------- - ---------------------------------------------
-----
--------- -- ------- --
-------------- -- -
----- ------- - -----------------------------------
----------------- - ---
----------------------------- -- -
----- ---------- - ------------------------------
-------------- - -------------
--------------------------------
---
--
------------ -- -
-------------------
---
--上述代码中，我们通过获取输入框中的关键词，调用 imgur 的搜索接口来获取图片信息。我们将搜索结果逐一展示在页面上，并通过动态创建 img 标签的方式实现展示。
优化
上述的示例代码实现了图片的选取和搜索，但是还需要进行优化。下面分别从结果缓存和分页展示两个方面进行优化。
结果缓存
每次搜索图片都需要调用 imgur 的搜索接口，这会造成一些问题：
- 搜索过程中会出现卡顿，用户体验不好。
- 多次搜索同一关键词，会造成重复的请求。
我们可以对搜索结果进行缓存，这样在后续的搜索操作中就不用再调用 imgur 的搜索接口了。
以下是缓存搜索结果的示例代码：
----- ---------- - ---
----- --------- - -- -- -
----- ------- - ---------------------------------------------
-- --------------------- -
-----------------------------------
-------
-
-----
--------- -- ------- --
-------------- -- -
------------------- - -------
----------------------
--
------------ -- -
-------------------
---
--
----- ------------- - -------- -- -
----- ------- - -----------------------------------
----------------- - ---
----------------------------- -- -
----- ---------- - ------------------------------
-------------- - -------------
--------------------------------
---
--上述代码中，我们使用一个 imgurCache 对象来保存搜索结果。在每次搜索前会判断当前关键词对应的搜索结果是否已经包含在 imgurCache 中，如果是的话直接使用缓存结果来展示图片列表，否则调用 imgur 的搜索接口，并将结果保存到 imgurCache 中。
分页展示
当搜索关键词对应的结果较多的时候，需要进行分页展示。我们可以通过传入 offset 和 limit 来实现分页展示效果。
以下是分页展示的示例代码：
----- ---------- - ---
----- --------- - -- -- -
----- ------- - ---------------------------------------------
-- --------------------- -
-----------------------------------
-------
-
-----
--------- -- ------- --
-------------- -- -
------------------- - -------
--------------------- -- ----
--
------------ -- -
-------------------
---
--
----- ------------- - -------- ------- ------ -- -
----- ------- - -----------------------------------
----------------- - ---
----- --------- - ------------------------- ------ - -------
--------------------------- -- -
----- ---------- - ------------------------------
-------------- - -------------
--------------------------------
---
----- ---- - ------------------------------
---------------------------
-------------- - -
------- ---------------------------------
------- ---------------------------------
--
--------------------------
----- -------- - -- -- -
----- --------- - --------------- - ------ ---
--------------------- ---------- -------
--
----- -------- - -- -- -
----- --------- - --------------- - ------ ------------------ - -------
--------------------- ---------- -------
--
--上述代码中，我们新增了两个变量 offset 和 limit，并通过 slice 方法对搜索结果进行切片。展示的图片数量就是 limit 的值。同时，我们还通过 prevPage 和 nextPage 两个函数实现了分页展示的效果。在 renderImglist 中我们动态创建了一个按钮组用于翻页操作。
总结
在本文中，我们介绍了如何使用 imgur-search 包进行图片的选取和搜索，以及如何通过结果缓存和分页展示来优化代码。学习这些技巧可以帮助我们更加快速高效地开发前端项目。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/imgur-search