# JSpider **Repository Path**: wu_jianyong/jspider ## Basic Information - **Project Name**: JSpider - **Description**: 在浏览器端使用 JS 快速爬取文件的框架 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 20 - **Created**: 2021-06-08 - **Last Updated**: 2021-06-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README --- 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) star fork 修改时间：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 Copyright (C) KonghaYao