• JS如何实现书签导入导出？我是这么做的

    目录

    前言

    依赖

    概览

    功能实现

    FileSystem：

    HTMLSystem：

    html-config：

    写在最后

    前言

    使用Node做过爬虫的人应该都知道Cheerio.js模块，其快速灵活的机制，使我们只需要了解JQ就可以轻松上手，是在使用node抓取网页数据的过程中不可或缺的一员。

    了解了cheerio后，我突发奇想：干脆拿cheerio实现个书签的导入吧，正好可以熟悉一下它的用法，于是早些时候我使用cheerio+node实现了初版的书签导入功能，将浏览器导出的书签通过前端页面上传到服务端，服务端使用cheerio将html解析成JSON文件，通过接口将数据传递到前端。

    然而，当时我并不满意，因为就为了一个接口开了一个node服务，是不是有点大材小用了，我能否靠本地缓存实现一个纯前端的书签预览和导入导出功能？

    说干就干，导入书签我借助前端的FileReader类，读取HTML文件，然后再使用cheerio将Dom解析成JSON格式的数据，在前端展示成menu形式；导出书签同样使用cheerio根据JSON数据生成对应的Dom数据，通过URL.createObjectURL新建文件的本地url地址，最后使用a标签下载文件

    下面我分享一下完整的实现过程及源码

    依赖

    • utils-lib-js模块

    • cheerio模块

    • vite：3.1

    • vue：3.2

    • element-plus：2.0

    概览

    这个小案例是基于vite搭建的一个vue-3.0的项目，除了layout之外，案例的核心部分是两个类：
    FileSystem和HTMLSystem，前者提供下载，文件读取的功能，后者实现了JSON和HTML互转的功能，除此之外其他的都是常见的布局及组件，所以文章重点描述这两大块

    功能实现

    FileSystem：

    • 读取文件功能，从element-ui的el-upload组件获取到数据后将结果转换成string格式
    • 下载文件功能，给定url下载静态资源
    • 本地文件转静态地址
    1. import type { UploadFile } from "element-plus/es/components/upload/src/upload.type";
    2. import { defer } from "utils-lib-js";
    3. export type readFileType = 'readAsArrayBuffer' | 'readAsBinaryString' | 'readAsDataURL' | 'readAsText'
    4. export declare interface IFileSystem {
    5.     readFile: (file: UploadFile, type?: readFileType, encoding?: string) => Promise<ProgressEvent<FileReader>>
    6.     downloadFile: (url: string, name?: string) => void
    7.     stringToBlobURL: (fileString: string) => string
    8. }
    9. export class FileSystem implements IFileSystem {
    10.     /**
    11.      * @name: 
    12.      * @description: 读取前端上传的文件
    13.      * @param {UploadFile} file 文件
    14.      * @param {readFileType} type 文件类型
    15.      * @param {string} encoding 解码方式
    16.      * @return {Promise>}
    17.      */
    18.     readFile(file: UploadFile, type: readFileType = 'readAsText', encoding: string = 'utf-8') {
    19.         const { promise, resolve, reject } = defer()
    20.         const reader: FileReader = new FileReader();
    21.         reader[type](file.raw, encoding)
    22.         reader.onload = resolve
    23.         reader.onerror = reject
    24.         return <Promise<any>>promise
    25.     }
    26.     /**
    27.      * @name: 
    28.      * @description: 下载文件
    29.      * @param {string} url 资源目录/网址
    30.      * @param {string} name 下载文件名
    31.      * @return {*}
    32.      */
    33.     downloadFile(url: string, name: string = 'file.txt') {
    34.         const link = document.createElement('a')
    35.         link.href = url
    36.         link.download = name
    37.         const _evt = new MouseEvent('click')
    38.         link.dispatchEvent(_evt)
    39.     }
    40.     /**
    41.      * @name: 
    42.      * @description: 字符串转本地文件
    43.      * @param {string} fileString 文件内容
    44.      * @return {*}
    45.      */
    46.     stringToBlobURL(fileString: string) {
    47.         return URL.createObjectURL(new Blob([fileString], { type: "application/octet-stream" }))
    48.     }
    49. }

    HTMLSystem：

    • HTML转JSON函数，解析dom树，生成JSON数据
    • JSON转HTML函数，通过标准格式生成书签格式的HTML标签
    1.  
    2. import { load, Cheerio, CheerioAPI, CheerioOptions } from 'cheerio'
    3. import {
    4.     createHtmlFolder,
    5.     createHtmlFile,
    6.     createBaseTemp
    7. } from '@/config'
    8. import { File, Folder } from "@/layout/menu/types";
    9. export declare interface IHTMLSystemFolder | File, T = Cheerio<any>, I = CheerioAPI, FolderList = Array> {
    10.     count: number
    11.     resetCount: () => void
    12.     initHTML: (html: string) => FolderList
    13.     htmlToJson: (node: T, bookMarks: FolderList) => void
    14.     addToBookMarks: (node: T, list: FolderList) => unknown
    15.     getNodeTitle: (node: T) => void
    16.     getNodeInfo: (node: T, info: File) => File
    17.     createInitHtml: (temp: string, opt?: CheerioOptions, isDoc?: boolean) => I
    18.     initJSON: (json: FolderList) => string
    19.     jsonToHtml: (bookMarks: FolderList, node: I) => string
    20.     createFolder: (folder: Folder, node: T) => I
    21.     createFile: (file: File, node: T) => I
    22.     createElemChild: (node: T) => (it: F, i: number) => void
    23.     checkIsFileOrFolder: (item: F) => 'folder' | 'file' | 'none'
    24. }
    25. export class HTMLSystem implements IHTMLSystem {
    26.     count = 0
    27.     /**
    28.      * @name: 
    29.      * @description: 重置id
    30.      * @return {*}
    31.      */
    32.     resetCount = () => {
    33.         this.count = 0;
    34.     };
    35.     /**
    36.      * @name: 
    37.      * @description: 递增id
    38.      * @return {*}
    39.      */
    40.     addCount = () => {
    41.         return this.count++
    42.     };
    43.     /**
    44.      * @name: 
    45.      * @description: 初始化html生成器
    46.      * @param {string} html 预加载的html字符文件
    47.      * @return {Array}
    48.      */
    49.     initHTML(html: string) {
    50.         const $ = load(html);
    51.         const dl = $("dl").first();
    52.         const dt = dl.children("dt").eq(0);
    53.         return this.htmlToJson(dt, []);
    54.     }
    55.  
    56.     /**
    57.      * @name: 
    58.      * @description: html转Json的递归函数
    59.      * @param {Cheerio} node 根节点
    60.      * @param {Array} bookMarks JSON数据源
    61.      * @return {Array}
    62.      */
    63.     htmlToJson = (node: Cheerio<any>, bookMarks: Array = []) => {
    64.         //下一级文件夹目录列表
    65.         const childrenNodeDL = node.children("dl");
    66.         const childrenNodeDT = childrenNodeDL.children("dt");
    67.         const { item: dir, dirType } = this.addToBookMarks(node, bookMarks)
    68.         childrenNodeDT.map((i) => {
    69.             const it = childrenNodeDT.eq(i)
    70.             dirType === 'file' && this.addToBookMarks(it, dir.children)
    71.             this.htmlToJson(it, dir.children);
    72.         });
    73.         return bookMarks;
    74.     };
    75.     /**
    76.      * @name: 
    77.      * @description: 将单个数据添加到JSON中
    78.      * @param {Cheerio} node 父节点
    79.      * @param {Array} list 书签JSON数据
    80.      * @return {, Array, 'folder'|'file'} 
    81.      */
    82.     addToBookMarks = (node: Cheerio<any>, list: Array = []) => {
    83.         const item = this.getNodeTitle(node);
    84.         const dirType = this.checkIsFileOrFolder(item)
    85.         switch (dirType) {
    86.             case "folder":
    87.                 item.children = [];
    88.             case "file":
    89.                 item.id = this.addCount().toString()
    90.                 list.push(item)
    91.                 break;
    92.         }
    93.         return { item, list, dirType }
    94.     }
    95.     /**
    96.      * @name: 
    97.      * @description: 判断单个数据是否是文件夹，并解析详细信息
    98.      * @param {Cheerio} node 文件或文件夹所在的节点
    99.      * @return {*}
    100.      */
    101.     getNodeTitle = (node: Cheerio<any>) => {
    102.         const info: any = {};
    103.  
    104.         const title = node.children("h3");
    105.         // 如果h3的length为0则不是文件夹，就获取网站名称和网址，否则是文件夹并赋值title, add_date,last_modified
    106.         return title.length === 0 ? this.getNodeInfo(node, info) : {
    107.             ...info,
    108.             title: title.text(),
    109.             add_date: title.attr("add_date"),
    110.             last_modified: title.attr("last_modified")
    111.         };
    112.     };
    113.     /**
    114.      * @name: 
    115.      * @description: 解析书签文件详细信息
    116.      * @param {Cheerio} node 文件所在的节点
    117.      * @return {File}
    118.      */
    119.     getNodeInfo = (node: Cheerio<any>, info: File) => ({
    120.         ...info,
    121.         name: node.children("a").text(),
    122.         href: node.children("a").attr("href") ?? '',
    123.         icon: node.children("a").attr("icon") ?? '',
    124.         add_date: node.children("a").attr("add_date")
    125.     })
    126.     /**
    127.      * @name: 
    128.      * @description: 入口函数
    129.      * @param {Array} json 上面生成的书签JSON文件
    130.      * @return {string}
    131.      */
    132.     initJSON(json: Array) {
    133.         return this.jsonToHtml(json);
    134.     }
    135.     /**
    136.      * @name: 
    137.      * @description: 生成新标签的CheerioAPI
    138.      * @param {string} temp 标签
    139.      * @param {*} opt Cheerio 配置项
    140.      * @param {*} isDoc 是否生成完整的html标签
    141.      * @return {CheerioAPI}
    142.      */
    143.     createInitHtml = (temp: string, opt = { xml: true, xmlMode: true }, isDoc = false) => {
    144.         const $ = load(temp, opt, isDoc);
    145.         return $
    146.     }
    147.     /**
    148.      * @name: 
    149.      * @description: JSON转书签的主函数
    150.      * @param {Array} bookMarks 书签的JSON数据
    151.      * @return {string}
    152.      */
    153.     jsonToHtml = (bookMarks: Array = []) => {
    154.         const root = this.createInitHtml(`
      ${createBaseTemp()}
      `      )("#root")
    155.         bookMarks.forEach(this.createElemChild(root.children().first()))
    156.         return root.children().toString()
    157.     }
    158.     /**
    159.      * @name: 
    160.      * @description: 递归生成Dom树
    161.      * @param {Cheerio} node 父节点
    162.      * @return {void}
    163.      */
    164.     createElemChild = (node: Cheerio<any>) => (it: Folder | File) => {
    165.         const type = this.checkIsFileOrFolder(it)
    166.         switch (type) {
    167.             case 'folder':
    168.                 const folder = this.createFolder(it as Folder)
    169.                 node.append(folder("*"))
    170.                 //每次都会获取最后一个标签，将子项放进去，防止标签重复遍历
    171.                 it.children.forEach(this.createElemChild(node.children("DL").last()))
    172.                 break
    173.             case 'file':
    174.                 const file = this.createFile(it as File)
    175.                 node.append(file('*'))
    176.                 break
    177.             case 'none':
    178.                 throw new Error('Item is not Folder or File')
    179.         }
    180.     }
    181.     /**
    182.      * @name: 
    183.      * @description: 生成文件夹标签
    184.      * @param {Folder} folder 文件夹格式的单个数据
    185.      * @return {CheerioAPI}
    186.      */
    187.     createFolder = (folder: Folder) => {
    188.         const init = this.createInitHtml(createHtmlFolder(folder))
    189.         return init
    190.     }
    191.     /**
    192.      * @name: 
    193.      * @description: 生成文件标签
    194.      * @param {File} file 文件格式的单个数据
    195.      * @return {CheerioAPI}
    196.      */
    197.     createFile = (file: File) => {
    198.         const init = this.createInitHtml(createHtmlFile(file))
    199.         return init
    200.     }
    201.     /**
    202.      * @name: 
    203.      * @description: 判断是文件还是文件夹格式的数据
    204.      * @param {Folder} item 单个数据
    205.      * @return {*}
    206.      */
    207.     checkIsFileOrFolder = (item: Folder | File) => item.title ? 'folder' : item.name ? 'file' : 'none'
    208.  
    209. }

    html-config：

    此外，生成HTML时，需要一些模板函数

    1.  
    2. import { File, Folder } from "@/layout/menu/types";
    3. /**
    4.  * @name: 
    5.  * @description: 书签默认模板
    6.  * @param {string} 书签名
    7.  * @return {*}
    8.  */
    9. export const createHtmlTemp = (name: string) => `
    12. <span class="hljs-subst">${name}</span>
    13. ${name}
    14. `
    15. /**
    16.  * @name: 
    17.  * @description: 生成文件夹格式的Dom
    18.  * @param {Folder} folder 文件夹格式数据
    19.  * @return {*}
    20.  */
    21. export const createHtmlFolder = (folder: Folder) => `
    23. ${folder.add_date}" LAST_MODIFIED="${folder.last_modified}">${folder.title}
    24. ${createBaseTemp()}
    25. `
    26. /**
    27.  * @name: 
    28.  * @description: 生成文件格式的Dom
    29.  * @param {File} file 文件格式数据
    30.  * @return {*}
    31.  */
    32. export const createHtmlFile = (file: File) => `
    34. ${file.href}" ICON="${file.icon}" ADD_DATE="${file.add_date}">${file.name}
    35. `
    36. /**
    37.  * @name: 
    38.  * @description: 列表格式的Dom
    39.  * @return {*}
    40.  */
    41. export const createBaseTemp = () => `
    44. `

    写在最后

    最终实现效果：BookMarks

    源码：book_mark: 纯前端导入导出html书签，生成书签导航

    最后，感谢你看到这里，如果文章有帮助到你，还请支持一下博主！

  • 相关阅读:
    docker 安装 RabbitMQ & 安装 rabbitmq_delayed_message_exchange插件
    世界儿童日，周大福真诚关爱儿童成长
    Android高版本读取沙盒目录apk解析安装失败解决方案
    国考省考申论：归纳概括多个主体身上的优秀品质，透过动词现象（怎么做的），找到名词（精神品质）本质
    JavaScript之无题之让人烦躁的模块化
    什么是PUP？什么是PUP程序？
    汇编语言中的标志位：CF、PF、AF、ZF、SF、TF、IF、DF、OF
    【干货】浅谈如何给.net程序加多层壳达到1+1>2的效果
    智慧党建小程序源码系统+在线考试+缴费+学习 功能强大 带完整的前后端搭建教程
    Docker 安装运行命令解读安装Mysql
  • 原文地址：https://blog.csdn.net/time_____/article/details/128190825