Linux.中国 - 开源社区

 找回密码
 骑士注册

QQ登录

微博登录


制作你的第一个 Atom 文本编辑器插件

2016-10-15 16:16    评论: 4 收藏: 4    

实现用来查找相关的 StackOverflow URL 的谷歌搜索功能

现在我们已经将 StackOverflow 的 URL 转化为代码片段了,让我们来实现最后一个函数——search,它应该要返回一个相关的 URL 并附加一些像“hello world”或者“快速排序”这样的描述。我们会通过一个非官方的 google npm 模块来使用谷歌搜索功能,这样可以让我们以编程的方式来搜索。

安装这个 Google npm 模块

通过在软件包的根目录打开命令行工具并执行命令来安装 google 模块:

npm install --save google@2.0.0
apm install

引入并配置模块

lib/sourcefetch.js 的顶部为 google 模块添加一条引用语句:

import google from "google"

我们将配置一下 google 以限制搜索期间返回的结果数。将下面这行代码添加到引用语句下面以限制搜索返回最热门的那个结果。

google.resultsPerPage = 1

实现 search 函数

接下来让我们来实现我们的 search 函数:

fetch() {
  ...
},

search(query, language) {
  return new Promise((resolve, reject) => {
    let searchString = `${query} in ${language} site:stackoverflow.com`

    google(searchString, (err, res) => {
      if (err) {
        reject({
          reason: 'A search error has occured :('
        })
      } else if (res.links.length === 0) {
        reject({
          reason: 'No results found :('
        })
      } else {
        resolve(res.links[0].href)
      }
    })
  })
},

scrape() {
  ...
}

以上代码通过谷歌来搜索一个和指定的关键词以及编程语言相关的 StackOverflow 页面,并返回一个最热门的 URL。让我们看看这是怎样来实现的:

let searchString = `${query} in ${language} site:stackoverflow.com`

我们使用用户输入的查询和当前所选的语言来构造搜索字符串。比方说,当用户在写 Python 的时候输入“hello world”,查询语句就会变成 hello world in python site:stackoverflow.com。字符串的最后一部分是谷歌搜索提供的一个过滤器,它让我们可以将搜索结果的来源限制为 StackOverflow。

google(searchString, (err, res) => {
  if (err) {
    reject({
      reason: 'A search error has occured :('
    })
  } else if (res.links.length === 0) {
    reject({
      reason: 'No results found :('
    })
  } else {
    resolve(res.links[0].href)
  }
})

我们将 google 方法放在一个 Promise 里面,这样我们可以异步地返回我们的 URL。我们会传递由 google 返回的所有错误并且会在没有可用的搜索结果的时候返回一个错误。否则我们将通过 resolve 来解析最热门结果的 URL。

更新 fetch 来使用 search

我们的最后一步是更新 fetch 函数来使用 search 函数:

fetch() {
  let editor
  let self = this

  if (editor = atom.workspace.getActiveTextEditor()) {
    let query = editor.getSelectedText()
    let language = editor.getGrammar().name

    self.search(query, language).then((url) => {
      atom.notifications.addSuccess('Found google results!')
      return self.download(url)
    }).then((html) => {
      let answer = self.scrape(html)
      if (answer === '') {
        atom.notifications.addWarning('No answer found :(')
      } else {
        atom.notifications.addSuccess('Found snippet!')
        editor.insertText(answer)
      }
    }).catch((error) => {
      atom.notifications.addWarning(error.reason)
    })
  }
}

让我们看看发生了什么变化:

  • 我们选中的文本现在变成了用户输入的 query
  • 我们使用 TextEditor API 来获取当前编辑器选项卡使用的 language
  • 我们调用 search 方法来获取一个 URL,然后通过在得到的 Promise 上调用 then 方法来访问这个 URL

我们不在 download 返回的 Promise 上调用 then 方法,而是在前面 search 方法本身链式调用的另一个 then 方法返回的 Promise 上面接着调用 then 方法。这样可以帮助我们避免回调地狱

sourcefetch 教程仓库 查看这一步所有的代码更改。

测试最终的插件

大功告成了!重新加载 Atom,对一个“问题描述”运行软件包的命令来看看我们最终的插件是否工作,不要忘了在编辑器右下角选择一种语言。

下一步

现在你知道怎么去 “hack” Atom 的基本原理了,通过 分叉 sourcefetch 这个仓库并添加你的特性 来随心所欲地实践你所学到的知识。


via: https://github.com/blog/2231-building-your-first-atom-plugin

作者:NickTikhonov 译者:OneNewLife 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

12345
查看其它分页:

发表评论


最新评论

我也要发表评论

绿色圣光 [Firefox 45.0|GNU/Linux] 2016-10-16 16:31
1
绿色圣光 [Firefox 48.0|Windows 7] 发表于 2016-10-15 16:28 的评论:
等我换台新电脑再学习吧……
2
OneNewLife [Chrome 53.0|Fedora] 发表于 2016-10-15 16:59 的评论:
不用的,装个 Fedora 你就可以重获新生了
哈哈,那台装着Win7的电脑可不是我的。
回复
绿色圣光 [Firefox 45.0|GNU/Linux] 2016-10-16 16:31
1
绿色圣光 [Firefox 48.0|Windows 7] 发表于 2016-10-15 16:28 的评论:
等我换台新电脑再学习吧……
2
OneNewLife [Chrome 53.0|Fedora] 发表于 2016-10-15 16:59 的评论:
不用的,装个 Fedora 你就可以重获新生了
哈哈,那台装着Win7的电脑可不是我的。
回复
OneNewLife [Chrome 53.0|Fedora] 2016-10-15 16:59
1
绿色圣光 [Firefox 48.0|Windows 7] 发表于 2016-10-15 16:28 的评论:
等我换台新电脑再学习吧……
不用的,装个 Fedora 你就可以重获新生了
回复
绿色圣光 [Firefox 48.0|Windows 7] 2016-10-15 16:28
等我换台新电脑再学习吧……
1 回复

热点评论

绿色圣光 [Firefox 48.0|Windows 7] 2016-10-15 16:28
等我换台新电脑再学习吧……
1
返回顶部

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”将网页分享至朋友圈。