README.md · 吴建勇/JSpider

---
title: JSpider
version: 2.0
date: 2020/9/14
author: KonghaYao
NPM: https://www.npmjs.com/package/js-spider
Github: https://github.com/KonghaYao/jspider
Gitee: https://gitee.com/dongzhongzhidong/jspider
---
# :book: JSpider 2.0.0+ Beta
![Version](https://img.shields.io/badge/Version-1.3.22-blue.svg) ![MIT](https://img.shields.io/badge/License-MIT-green.svg) ![Javascript](https://img.shields.io/badge/Javascript->=%20ES5-green.svg)
![platform](https://img.shields.io/badge/Platform-Browser-red.svg) <a href='https://gitee.com/dongzhongzhidong/jspider/stargazers'><img src='https://gitee.com/dongzhongzhidong/jspider/badge/star.svg?theme=dark' alt='star'></img></a> <a href='https://gitee.com/dongzhongzhidong/jspider/members'><img src='https://gitee.com/dongzhongzhidong/jspider/badge/fork.svg?theme=dark' alt='fork'></img></a>

修改时间：2021/1/4

## 关于项目的计划
JSpider 在 1.0 时着重完成 JSpider 的基础功能的构建。
在 2.0 时，对 1.0 进行了函数的更改和一些新功能的加入。
在使用2.0的时候也遇到了一些问题，比如：
- 如何快速地将数据转变为 Excel 能够打开的数据（这是因为数据处理的时候这个格式比较好用）
- 如何在网页关闭后仍然能够保存我的进度和数据？（使用前端存储）
- 既然 JSpider 基于 JS ，我想在 Nodejs 上使用它！（我用TS改写了代码）
这些都会列入我的 3.0 计划中。（3.0计划详细查看文档末尾）

## :pencil2: 介绍
这是一个在浏览器端使用 JS 快速爬取文件的框架。我写的第一个爬虫脚本是基于 Python 的，但是学到分析 JS 脚本之后，发现完全可以由浏览器的 JS 来发送请求并获取数据。对于少量的数据来说，右键检查并写几行代码就爬取成功，比开新的 python 脚本要轻松得多。所以我写了这个 JSpider 工具类来替代那些繁琐的 JS 代码，使得我们能够在前端直接爬取或者提前测试爬虫代码，提高我们的爬虫效率。

##### 这个网页已经载入了JSpider，可以使用开发者工具打开，观看例子的时候可以试着做一做。

##### :bangbang: 注意: 2.0.0 + 版本语法与 1.0.0 + 版本语法不同。

## :closed_book: [版本情况](http://dongzhongzhidong.gitee.io/jspider#/Version.md)

## :hammer: 快速开始
###  JsDelivr cdn 载入链接解析

按 ES 版本引入 
- ES6引入 [https://cdn.jsdelivr.net/npm/js-spider/JSpider.js](#)
- ES5引入 [https://cdn.jsdelivr.net/npm/js-spider/dist/JSpider.es5.js](#)

### 如何单独导入

若只想在文件中使用一个模块可以使用下面的方式导入。

`import hook from "https://cdn.jsdelivr.net/npm/js-spider/src/Observer/hook.js"`

所有的模块都放置在 src 文件夹下，而且模块名首字母大写。单个函数名为小写。

```js
// js文件遵循 ES6 的 import 方式，所以要用下面的方式导入

import('https://cdn.jsdelivr.net/npm/js-spider/JSpider.js')
  .then(res=>window.JSpider = res.default)

// ES5 可以直接在 script 标签中引入
```

### :airplane: 快速爬取
请打开您的浏览器 开发者工具 
快捷键：**F12** or **Ctrl+SHIFT+C**

```js

//加载js模块完成之后

let spider = new JSpider();

let urls = [
    "/",
    {
        url: "/",
        options: {
            headers: {
                "content-type": "text/plain; charset=utf",
            },
            body: JSON.stringify({ index: 100 }),
        },
    },
];

let result = await spider.Ajax({
    urls,
    options: {
        headers: {
            "Content-Type": "application/json",
        },
        method: "post",
    },
    type: "start",
});

//请求完成之后就会在 result 中有结果
```

## :gear: 推荐阅读顺序

完成下面的阅读，我们可以入门 JSpider 的基本爬取功能。

#### [Ajax 模块](http://dongzhongzhidong.gitee.io/jspider#/src/Ajax.md)
#### [Parser 模块](http://dongzhongzhidong.gitee.io/jspider#/src/Parser.md)
#### [Downloader 模块](http://dongzhongzhidong.gitee.io/jspider#/src/Downloader.md)

完成下面的阅读，我们可以使用一些额外的功能（非主要）。

#### [Script 函数](http://dongzhongzhidong.gitee.io/jspider#/src/Script.js) 
#### [Copy 模块](http://dongzhongzhidong.gitee.io/jspider#/src/Copy.md)
#### [Cookies 对象](http://dongzhongzhidong.gitee.io/jspider#/src/Cookies.js)

完成下面的高级阅读，我们可以方便地提高分析网页方面的速度。

#### [Search 模块](http://dongzhongzhidong.gitee.io/jspider#/src/Search.md)
#### [Observer 模块](http://dongzhongzhidong.gitee.io/jspider#/src/Observer.md)

## :bee: 高级函数集
JSpider 高级函数集是通过 Extend 函数导入的。高级函数集中包含了便捷的工具，是 JSpider 的基础模块的联合，目的是为了帮助使用者快速开始爬虫。

导入的函数放置在 JSpider 实例中。

```js
let spider = new JSpider();
spider.Extend();
```

### :candy: 展开 JSpider 到 window 对象
展开后可以在 window 中直接使用 JSpider 的函数。
```js
Object.assign(window,JSpider.prototype);
```

## :dart: 与 1.0.0 版本的不同

### 全面模块化
1.0.0 系列的 JSpider 的代码并没有实现完全的模块化开发，使得每个文件很庞大，很难进行查看和更新，所以 2.0.0 系列开始全面使用 ES6 的 import 实现模块化。

### 单纯地处理数据
1.0.0 版本掺杂了数据的存储功能（parseResult 等），所以导致 JSpider 中变量过于复杂，想要取这些变量的时候的单词长度又很长。所以 2.0.0 剔除了数据的存储功能，改为直接由函数返回结果，所以需要使用变量来存储。

同时，由于使用了异步处理，除了 Downloader 不能控制下载过程外，几乎都可以使用异步进行统一操作。

### 使用高阶函数进行爬取
由于 1.0.0 的函数其实是多种函数和基础函数杂糅在一起，所以在 2.0.0 中将 **高级函数** 用 **基础函数** 实现，便于使用者使用。

## :rainbow: 开发者使用说明
### 如何测试 JSpider
推荐在教程网页导入 JSpider 然后跟着教程学。

**方式一：**
直接打开开发者工具，在 console 面板，输入 `import("https://cdn.jsdelivr.net/npm/js-spider/JSpider.js")`，然后运行即可导入。

**方式二：**
遇到 CSP 阻止引入外部的文件。
使用浏览器复制 `https://cdn.jsdelivr.net/npm/js-spider/dist/JSpider.es5.js` 的文件，然后在 console 上粘贴执行即可导入。

### 如何找到模块的源文件
在根目录下的 JS 文件是 JSpider 的入口文件，
入口文件通过 import 引入各个部分的模块文件，
你可以看到所有的模块放置在 src 文件夹下，
如果模块较大，可以在同名的文件夹下找到分模块。

### 单独载入 js 模块文件
基本上所有的模块都可以脱离 JSpider 使用,
引入方式为 使用 [JsDeliver](http://www.jsdelivr.com/) 提供的 API 和 ES6 的 import 来导入你的浏览器。

### 浏览器不支持 ES6 但支持 ES5
在根文件夹中有一个 index.bat 双击运行即可在项目的dist 文件夹中获取创建的 es5 版本。
也可以直接从下面的连接获取。
ES5 版本直接将使用的外部库直接添加到源代码末尾，所以文件较大。
- [x] **ES5 版本打包文件**  https://cdn.jsdelivr.net/npm/js-spider/dist/JSpider.es5.js

### ES5 版本与普通版本的区别
ES5 版本使用 webpack 将 JSpider 源代码降级为 ES5 版本并将 使用过的依赖的库并入 ES5 版本中, 使得直接导入时包括了依赖，但是这个文件的大小比原来要大很多。

### 跨域问题
跨域问题可以通过谷歌插件，使用转接服务器等手段解决，只凭借 浏览器端 Javascript 无法解决。

### 绕过 [CSP 协议](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 加载 JSpider
这个 CSP 协议是为了防止文件的非正常途经载入而使用的。所以，通过 script 标签和 import 引入不了文件，但是fetch 和 XHR 都是可以请求到文件的，但是然后以 Blob 数据接收并转化为字符串，使用 eval 注入脚本，可以绕过 CSP 协议。

使用开发者工具中的 **snippets** 保存 ES5 版本的JSpider源代码
或者直接在浏览器打开 [es5 版本源代码](https://cdn.jsdelivr.net/npm/js-spider/dist/JSpider.es5.js)
，然后复制运行即可。

## 相关依赖

在形成 es5 文件时，直接将下面的项目中的 JS 源文件拼接到 JSpider.es5.js 中，方便开发者在特殊环境下直接使用。

[JSZip](https://github.com/Stuk/jszip): 一个前端压缩数据的库。

[fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser): XML => JSON 的库。

[turndown](https://github.com/domchristie/turndown/)：将 HTML 文本转换为 Markdown 文本的插件

## 3.0 计划
3.0 计划的重点是在 Typescript 改写代码，使得代码可以编译成 浏览器版本和 Nodejs 版本。
在请求的时候加入即时存储功能，可以保存爬取的数据情况，方便开发者保存进度。
- [x] 使用 Typescript 改写代码。（虽然我的Typescript更菜，但是可以编译成各种版本）
- [ ] 重新修改所有的代码，部分函数发生更改。
- [ ] 使用浏览器的 indexDB 存储数据。（计划是使用 ZangoDB 这个处理 indexDB 的库）
- [ ] 数据直接转化为 Excel 能够打开的数据（计划使用 sheetjs 进行处理）

## 4.0宏图
4.0 计划的宏图是建立一个以 **Nodejs服务器** 为中心的分布式浏览器爬取工具，也就是说，你可以和小伙伴们愉快地爬取数据了。

## License
MIT licensed

吴建勇/JSpider

简介

发行版

贡献者

近期动态

吴建勇/JSpider .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

吴建勇/JSpider