使用 Deno 构建单词查找器应用
入门指南 Jump to heading
在本教程中，我们将使用 Deno 创建一个简单的单词查找器 Web 应用程序。无需事先了解 Deno。
介绍 Jump to heading
我们的单词查找器应用程序将接收用户提供的模式字符串，并返回英语字典中所有匹配该模式的单词。该模式可以包含字母字符以及 `_` 和 `?`。`?` 可以代表模式中不存在的任何字母。`_` 可以代表任何字母。
例如，模式 `c?t` 匹配 "cat" 和 "cut"。模式 `go?d` 匹配单词 "goad" 和 "gold" (但不匹配 "good")。
构建视图 Jump to heading
下面的函数渲染 HTML，该 HTML 创建了上面显示的简单 UI。您可以指定模式和单词列表来自定义 HTML 内容。如果指定了模式，它将显示在搜索文本框中。如果指定了单词列表，则将渲染单词的符号列表。
render.js
export function renderHtml(pattern, words) {
let searchResultsContent = "";
if (words.length > 0) {
let wordList = "";
for (const word of words) {
wordList += `<li>${word}</li>`;
}
searchResultsContent = `
<p id="search-result-count" data-count="${words.length}">Words found: ${words.length}</p>
<ul id="search-result" name="search-results">
${wordList}
</ul>
`;
}
return `<html>
<head>
<title>Deno Word Finder</title>
<meta name="version" content="1.0" />
</head>
<body>
<h1>Deno Word Finder</h1>
<form id="perform-search" name="perform-search" method="get" action="/api/search">
<label for="search-text">Search text:</label>
<input id="search-text" name="search-text" type="text" value="${pattern}" />
<input type="submit" />
</form>
${searchResultsContent}
<h2>Instructions</h2>
<p>
Enter a word using _ and ? as needed for unknown characters. Using ? means to include letters that aren't already used (you can think of it as a "Wheel of Fortune" placeholder). Using _ will find words that contain any character (whether it's currently "revealed" or not).
<br />
<br />
For example, d__d would return:
<ul>
<li>dand</li>
<li>daud</li>
<li>dead</li>
<li>deed</li>
<li>dird</li>
<li>dodd</li>
<li>dowd</li>
<li>duad</li>
<li>dyad</li>
</ul>
<br />
And go?d would return:
<ul>
<li>goad</li>
<li>gold</li>
</ul>
</p>
</body>
</html>
`;
}
搜索字典 Jump to heading
我们还需要一个简单的搜索函数，它扫描字典并返回所有匹配指定模式的单词。下面的函数接受一个模式和字典，然后返回所有匹配的单词。
search.js
export function search(pattern, dictionary) {
// Create regex pattern that excludes characters already present in word
let excludeRegex = "";
for (let i = 0; i < pattern.length; i++) {
const c = pattern[i];
if (c != "?" && c != "_") {
excludeRegex += "^" + c;
}
}
excludeRegex = "[" + excludeRegex + "]";
// Let question marks only match characters not already present in word
let searchPattern = pattern.replace(/\?/g, excludeRegex);
// Let underscores match anything
searchPattern = "^" + searchPattern.replace(/\_/g, "[a-z]") + "$";
// Find all words in dictionary that match pattern
let matches = [];
for (let i = 0; i < dictionary.length; i++) {
const word = dictionary[i];
if (word.match(new RegExp(searchPattern))) {
matches.push(word);
}
}
return matches;
}
运行 Deno 服务器 Jump to heading
Oak 是一个框架，可让您在 Deno 中轻松设置服务器（类似于 JavaScript 的 Express），我们将使用它来托管我们的应用程序。我们的服务器将使用我们的搜索功能来填充我们的 HTML 模板数据，然后将自定义的 HTML 返回给查看器。我们可以方便地依赖 `/usr/share/dict/words` 文件作为我们的字典，这是一个在大多数类 Unix 操作系统上存在的标准文件。
server.js
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import { search } from "./search.js";
import { renderHtml } from "./render.js";
const dictionary = (await Deno.readTextFile("/usr/share/dict/words")).split(
"\n",
);
const app = new Application();
const port = 8080;
const router = new Router();
router.get("/", async (ctx) => {
ctx.response.body = renderHtml("", []);
});
router.get("/api/search", async (ctx) => {
const pattern = ctx.request.url.searchParams.get("search-text");
ctx.response.body = renderHtml(pattern, search(pattern, dictionary));
});
app.use(router.routes());
app.use(router.allowedMethods());
console.log("Listening at https://#:" + port);
await app.listen({ port });
我们可以使用以下命令启动我们的服务器。请注意，我们需要显式授予对文件系统和网络的访问权限，因为 Deno 默认是安全的。
deno run --allow-read --allow-net server.js
现在，如果您访问 https://#:8080，您应该能够查看单词查找器应用程序。
示例代码 Jump to heading
您可以在此处找到完整的示例代码 here。