基于TypeScript从0到1搭建一款爬虫工具
前端历劫之路
共 10888字，需浏览 22分钟
· 2021-02-01
前言
今天，我们将使用TS这门语言搭建一款爬虫工具。目标网址是什么呢？我们去上网一搜，经过几番排查之后，我们选定了这一个网站。
https://www.hanju.run/
一个视频网站，我们的目的主要是爬取这个网站上视频的播放链接。下面，我们就开始进行第一步。
第一步
俗话说，万事开头难。不过对于这个项目而言，恰恰相反。你需要做以下几个事情：
我们需要创建一个项目文件夹
键入命令，初始化项目
npm init -y局部安装typescript
npm install typescript -D接着键入命令，生成ts配置文件
tsc --init局部安装ts-node，用于命令行输出命令
npm install -D ts-node
在项目文件夹中创建一个 src文件夹
然后我们在src文件夹中创建一个crawler.ts文件。
在package.json文件中修改快捷启动命令
"scripts": {
"dev-t": "ts-node ./src/crawler.ts"
}
第二步
接下来，我们将进行实战操作，也就是上文中crawler.ts文件是我们的主战场。
我们首先需要引用的这几个依赖，分别是
import superagent from "superagent";
import cheerio from "cheerio";
import fs from "fs";
import path from "path";
所以，我们会这样安装依赖：
superagent作用是获取远程网址html的内容。
npm install superagent
cheerio作用是可以通过jQ语法获取页面节点的内容。
npm install cheerio
剩余两个依赖fs，path。它们是node内置依赖，直接引入即可。
我们完成了安装依赖，但是会发现你安装的依赖上会有红色报错。原因是这样的，superagent和cheerio内部都是用JS写的，并不是TS写的，而我们现在的环境是TS。所以我们需要翻译一下，我们将这种翻译文件又称类型定义文件（以.d.ts为后缀）。我们可以使用以下命令安装类型定义文件。
npm install -D @types/superagent
npm install -D @types/cheerio
接下来，我们就认认真真看源码了。
安装完两个依赖后，我们需要创建一个
Crawler类，并且将其实例化。import superagent from "superagent";
import cheerio from "cheerio";
import fs from "fs";
import path from "path";
class Crawler {
constructor() {
}
}
const crawler = new Crawler();我们确定下要爬取的网址，然后赋给一个私有变量。最后我们会封装一个
getRawHtml方法来获取对应网址的内容。getRawHtml方法中我们使用了async/await关键字，主要用于异步获取页面内容，然后返回值。import superagent from "superagent";
import cheerio from "cheerio";
import fs from "fs";
import path from "path";
class Crawler {
private url = "https://www.hanju.run/play/39221-4-0.html";
async getRawHtml() {
const result = await superagent.get(this.url);
return result.text;
}
async initSpiderProcess() {
const html = await this.getRawHtml();
}
constructor() {
this.initSpiderProcess();
}
}
const crawler = new Crawler();使用
cheerio依赖内置的方法获取对应的节点内容。我们通过
getRawHtml方法异步获取网页的内容，然后我们传给getJsonInfo这个方法，注意是string类型。我们这里通过cheerio.load(html)这条语句处理，就可以通过jQ语法来获取对应的节点内容。我们获取到了网页中视频的标题以及链接，通过键值对的方式添加到一个对象中。注：我们在这里定义了一个接口，定义键值对的类型。import superagent from "superagent";
import cheerio from "cheerio";
import fs from "fs";
import path from "path";
interface Info {
name: string;
url: string;
}
class Crawler {
private url = "https://www.hanju.run/play/39221-4-0.html";
getJsonInfo(html: string) {
const $ = cheerio.load(html);
const info: Info[] = [];
const scpt: string = String($(".play>script:nth-child(1)").html());
const url = unescape(
scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")
);
const name: string = String($("title").html());
info.push({
name,
url,
});
const result = {
time: new Date().getTime(),
data: info,
};
return result;
}
async getRawHtml() {
const result = await superagent.get(this.url);
return result.text;
}
async initSpiderProcess() {
const html = await this.getRawHtml();
const info = this.getJsonInfo(html);
}
constructor() {
this.initSpiderProcess();
}
}
const crawler = new Crawler();我们首先要在项目根目录下创建一个
data文件夹。然后我们将获取的内容我们存入文件夹内的url.json文件（文件自动生成）中。我们将其封装成
getJsonContent方法，在这里我们使用了path.resolve来获取文件的路径。fs.readFileSync来读取文件内容，fs.writeFileSync来将内容写入文件。注：我们分别定义了两个接口objJson与InfoResult。
import superagent from "superagent";
import cheerio from "cheerio";
import fs from "fs";
import path from "path";
interface objJson {
[propName: number]: Info[];
}
interface Info {
name: string;
url: string;
}
interface InfoResult {
time: number;
data: Info[];
}
class Crawler {
private url = "https://www.hanju.run/play/39221-4-0.html";
getJsonInfo(html: string) {
const $ = cheerio.load(html);
const info: Info[] = [];
const scpt: string = String($(".play>script:nth-child(1)").html());
const url = unescape(
scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")
);
const name: string = String($("title").html());
info.push({
name,
url,
});
const result = {
time: new Date().getTime(),
data: info,
};
return result;
}
async getRawHtml() {
const result = await superagent.get(this.url);
return result.text;
}
getJsonContent(info: InfoResult) {
const filePath = path.resolve(__dirname, "../data/url.json");
let fileContent: objJson = {};
if (fs.existsSync(filePath)) {
fileContent = JSON.parse(fs.readFileSync(filePath, "utf-8"));
}
fileContent[info.time] = info.data;
fs.writeFileSync(filePath, JSON.stringify(fileContent));
}
async initSpiderProcess() {
const html = await this.getRawHtml();
const info = this.getJsonInfo(html);
this.getJsonContent(info);
}
constructor() {
this.initSpiderProcess();
}
}
const crawler = new Crawler();
运行命令
npm run dev-t查看生成文件的效果
{
"1610738046569": [
{
"name": "《复仇者联盟4：终局之战》HD1080P中字m3u8在线观看-韩剧网",
"url": "https://wuxian.xueyou-kuyun.com/20190728/16820_302c7858/index.m3u8"
}
],
"1610738872042": [
{
"name": "《钢铁侠2》HD高清m3u8在线观看-韩剧网",
"url": "https://www.yxlmbbs.com:65/20190920/54uIR9hI/index.m3u8"
}
],
"1610739069969": [
{
"name": "《钢铁侠2》中英特效m3u8在线观看-韩剧网",
"url": "https://tv.youkutv.cc/2019/11/12/mjkHyHycfh0LyS4r/playlist.m3u8"
}
]
}
准结语
到这里真的结束了吗？
不！
不！
不！
真的没有结束。
我们会看到上面一坨代码，真的很臭~
我们将分别使用组合模式与单例模式将其优化。
优化一：组合模式
组合模式（Composite Pattern），又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构。
这种模式创建了一个包含自己对象组的类。该类提供了修改相同对象组的方式。
简言之，就是可以像处理简单元素一样来处理复杂元素。
首先，我们在src文件夹下创建一个combination文件夹，然后在其文件夹下分别在创建两个文件crawler.ts和urlAnalyzer.ts。
crawler.ts
crawler.ts文件的作用主要是处理获取页面内容以及存入文件内。
import superagent from "superagent";
import fs from "fs";
import path from "path";
import UrlAnalyzer from "./urlAnalyzer.ts";
export interface Analyzer {
analyze: (html: string, filePath: string) => string;
}
class Crowller {
private filePath = path.resolve(__dirname, "../../data/url.json");
async getRawHtml() {
const result = await superagent.get(this.url);
return result.text;
}
writeFile(content: string) {
fs.writeFileSync(this.filePath, content);
}
async initSpiderProcess() {
const html = await this.getRawHtml();
const fileContent = this.analyzer.analyze(html, this.filePath);
this.writeFile(fileContent);
}
constructor(private analyzer: Analyzer, private url: string) {
this.initSpiderProcess();
}
}
const url = "https://www.hanju.run/play/39257-1-1.html";
const analyzer = new UrlAnalyzer();
new Crowller(analyzer, url);
urlAnalyzer.ts
urlAnalyzer.ts文件的作用主要是处理获取页面节点内容的具体逻辑。
import cheerio from "cheerio";
import fs from "fs";
import { Analyzer } from "./crawler.ts";
interface objJson {
[propName: number]: Info[];
}
interface InfoResult {
time: number;
data: Info[];
}
interface Info {
name: string;
url: string;
}
export default class UrlAnalyzer implements Analyzer {
private getJsonInfo(html: string) {
const $ = cheerio.load(html);
const info: Info[] = [];
const scpt: string = String($(".play>script:nth-child(1)").html());
const url = unescape(
scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")
);
const name: string = String($("title").html());
info.push({
name,
url,
});
const result = {
time: new Date().getTime(),
data: info,
};
return result;
}
private getJsonContent(info: InfoResult, filePath: string) {
let fileContent: objJson = {};
if (fs.existsSync(filePath)) {
fileContent = JSON.parse(fs.readFileSync(filePath, "utf-8"));
}
fileContent[info.time] = info.data;
return fileContent;
}
public analyze(html: string, filePath: string) {
const info = this.getJsonInfo(html);
console.log(info);
const fileContent = this.getJsonContent(info, filePath);
return JSON.stringify(fileContent);
}
}
可以在package.json文件中定义快捷启动命令。
"scripts": {
"dev-c": "ts-node ./src/combination/crawler.ts"
},
然后使用npm run dev-c启动即可。
优化二：单例模式
**单例模式（Singleton Pattern）**是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。
这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。
应用实例：
1、一个班级只有一个班主任。 2、Windows 是多进程多线程的，在操作一个文件的时候，就不可避免地出现多个进程或线程同时操作一个文件的现象，所以所有文件的处理必须通过唯一的实例来进行。 3、一些设备管理器常常设计为单例模式，比如一个电脑有两台打印机，在输出的时候就要处理不能两台打印机打印同一个文件。
同样，我们在src文件夹下创建一个singleton文件夹，然后在其文件夹下分别在创建两个文件crawler1.ts和urlAnalyzer.ts。
这两个文件的作用与上文同样，只不过代码书写不一样。
crawler1.ts
import superagent from "superagent";
import fs from "fs";
import path from "path";
import UrlAnalyzer from "./urlAnalyzer.ts";
export interface Analyzer {
analyze: (html: string, filePath: string) => string;
}
class Crowller {
private filePath = path.resolve(__dirname, "../../data/url.json");
async getRawHtml() {
const result = await superagent.get(this.url);
return result.text;
}
private writeFile(content: string) {
fs.writeFileSync(this.filePath, content);
}
private async initSpiderProcess() {
const html = await this.getRawHtml();
const fileContent = this.analyzer.analyze(html, this.filePath);
this.writeFile(JSON.stringify(fileContent));
}
constructor(private analyzer: Analyzer, private url: string) {
this.initSpiderProcess();
}
}
const url = "https://www.hanju.run/play/39257-1-1.html";
const analyzer = UrlAnalyzer.getInstance();
new Crowller(analyzer, url);
urlAnalyzer.ts
import cheerio from "cheerio";
import fs from "fs";
import { Analyzer } from "./crawler1.ts";
interface objJson {
[propName: number]: Info[];
}
interface InfoResult {
time: number;
data: Info[];
}
interface Info {
name: string;
url: string;
}
export default class UrlAnalyzer implements Analyzer {
static instance: UrlAnalyzer;
static getInstance() {
if (!UrlAnalyzer.instance) {
UrlAnalyzer.instance = new UrlAnalyzer();
}
return UrlAnalyzer.instance;
}
private getJsonInfo(html: string) {
const $ = cheerio.load(html);
const info: Info[] = [];
const scpt: string = String($(".play>script:nth-child(1)").html());
const url = unescape(
scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")
);
const name: string = String($("title").html());
info.push({
name,
url,
});
const result = {
time: new Date().getTime(),
data: info,
};
return result;
}
private getJsonContent(info: InfoResult, filePath: string) {
let fileContent: objJson = {};
if (fs.existsSync(filePath)) {
fileContent = JSON.parse(fs.readFileSync(filePath, "utf-8"));
}
fileContent[info.time] = info.data;
return fileContent;
}
public analyze(html: string, filePath: string) {
const info = this.getJsonInfo(html);
console.log(info);
const fileContent = this.getJsonContent(info, filePath);
return JSON.stringify(fileContent);
}
private constructor() {}
}
可以在package.json文件中定义快捷启动命令。
"scripts": {
"dev-s": "ts-node ./src/singleton/crawler1.ts",
},
然后使用npm run dev-s启动即可。
结语
这下真的结束了，谢谢阅读。希望可以帮到你。
完整源码地址：
https://github.com/maomincoding/TsCrawler
欢迎关注我的公众号 前端历劫之路回复关键词 电子书，即可获取12本前端热门电子书。回复关键词 红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。
评论
强烈推荐一款好用到爆的可视化拖拽库
大厂技术 高级前端 Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群今天给大家推荐这款拖拽组件VueDraggablePlus，试了一下非常不错，据说还被尤雨溪推荐过，咱们国人自己开发的，中国人不骗🇨🇳人，我就再来推
程序员成长指北
2
了解加密货币到加密货币的互换
1、什么是加密货币互换？加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同，加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
一站式解决方案：基于 Arthas 实现服务发现和权限控制
来源：juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦， 演示链接
小哈学Java
0
【第129期】程序员的新宠：三款终端工具，让你告别Xshell！
概述 WindTerm：跨平台的SSH利器 首先介绍的是WindTerm，这是一款使用C语言开发的跨平台SSH客户端。它不仅完全免费，而且没有商业使用的限制。WindTerm支持SSH v2、Telnet、Raw Tcp等协议，而且性能出色，甚至超过了FinalShell和Electerm。功能
前端微服务
0
21.3K star！推荐一款可视化自动化测试/爬虫/数据采集神器！功能免费且强大！
【温馨提示】由于公众号更改了推送规则，不再按照时间顺序排列，如果不想错过测试开发技术精心准备的的干货文章，请将测试开发技术设为“星标☆”，看完文章在文尾处点亮“在看”！大家好，我是狂师！在大数据时代，信息的获取与分析变得尤为重要。对于开发者、数据分析师乃至非技术人员来说，能够高效地采集网络数据并进行
测试开发技术
4
AI论文写作工具和生成器（一）
随着人工智能和大模型的迅猛发展，AI对研究人员和学生提供了极大的写作便利。本文将介绍市面上常用的AI论文写作工具，帮助你提高论文写作效率并遵循学术道德。请仅将AI论文生成器视为辅助参考手段，切勿直接挪用全文。XPaper AlXPaper AI是由点击式创作工具晓语台推出的一款论文写作生成平台，只需
IQ前端
0
零售业降本增效的新举措：从卖场的能耗入手
导语：对于超市企业来讲，通过节能灯具减少40%以上照明电费，是切实可行的节流方案之一。商超节能，势在必行！零售企业的降本增效从何入手？它们更需要怎样的创新产品与照明解决方案？广东富兴商超照明有限公司总经理唐京飘在第二十届全国连锁商业发展战略论坛上，与大家分享了“如何用科技创新推动超市节能”的主题演讲
联商网资讯
0
某程序员吐槽：公司最近招了一批35左右的，这帮人习惯天天卷到八点多，导致现在我们也要八点才下班
架构师大咖
架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。
公众号该公众号已被封禁某位程序员的吐槽引发了广泛的思考和共鸣。他抱怨公司
源码共读
0