在前端开发过程中，我们常常需要使用图片来进行展示、配图等操作。图片的选取、管理、搜索等都是比较繁琐的操作，但是现在有一个叫做 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
