hjb2722404-CSDN博客

原创 js（ts）截取视频第一帧作为封面图

有时候截取到的图片可能是黑屏、白屏、透明等，需要使用二进制数据进行判断，如果无效，则返回系统默认图片。，会导致如果是竖视频截取出来的封面图在横显示时会变形。这是防止截图结果为黑屏的关键一步。网络上其它文章的代码都直接读取。

2023-03-02 11:44:39 2147 1

它有两个参数，第一个参数就是要获取样式的元素，第二个则是当我们需要获取元素上特定伪元素的样式时要传入的伪元素类型，比如。块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”所以，看一个元素是否为块级元素，需要看它最终在页面渲染时所占据的空间是否为独占一行。最后，就只剩下看元素最终的CSS样式了，如果一个元素的。所以，通过标签名来判断是否为块级元素，是不可靠的。，其渲染结果表现为了行内元素和行内块元素的特征。默认情况下，块级元素会新起一行。，那它一定就是块级元素了。

2022-12-28 22:19:31 639

原创 DOM算法系列007-判定给定节点是否为空白节点

实际上，节点值有内容的节点类型，除去CDATA类型和注释节点以及ProcessingInstruction类型外，就只剩下文本节点了，其它节点的给属性值统统为null.由于空文本值所包含的不可见字符种类很多，所以我们最好的选择是借助正则表达式和JS的。，也是空白符的一种），对于我们提到的其它各种空白符，由于十分不常见，就不再考虑。所以，我们最终判断的就只是一个文本节点的节点值是否为空文本值。它旨在匹配所有的空格、制表符、换行符、回车符以及零宽间隔符号（当一个节点的节点值为空文本值时，这个节点就是空白节点。

2022-12-20 15:32:23 884

原创 DOM算法系列006-判定给定节点是否为换行（br）节点

这个属性是只有元素节点才有的，所以只要确定了它有这个标签名，就可以确定它是元素节点了。一个节点要满足两个条件，我们就可以判定其为。这个判断，也确定它是元素节点，但是。

2022-12-20 15:31:09 302

原创 DOM算法系列005-获取给定节点所属的window对象

尽管现在大多数人都使用chrome相同内核的浏览器了，IE已经被扫入历史的簸箕中了，但是国内一些政企由于历史原因，仍旧使用着IE8，那我们就不得不考虑兼容问题。我们知道，在一个HTML页面中，可以包含很多个框架或框架集，那么，当给定一个节点，我们如何获取这个节点所属的window对象呢？这个属性，这个属性就直接指向节点或标签所在的文档对象。很幸运被我们找到了，而且不止一个其他对象的属性指向。在这里，MDN直接告诉了我们，要获取。但是，当我们在查看MDN上关于。同样，为了优先兼容IE，我们先看。

2022-12-20 15:30:44 634

原创 JS 自动分号机制

从左到右解析程序，遇到一个某些文法产生式允许的Token，但是此产生式是受限产生式，受限产生式紧跟在【no LineTerminator here】标识后的第一个终结符或非终结符的Token叫做受限Token，当至少一个换行符分割了受限的Token和前一个Token，那么就在受限的Token前面自动插入分号。的观点，自己在写代码时候注意些就不会触发JS的ASI规则，毕竟我们还可以配置eslint等辅助工具帮助我们添加句末分号。间存在了至少一个 LineTerminator（换行符），那么会在受限。

2022-12-20 14:42:29 680

原创 DOM算法系列004-判断给定节点是否为body元素

我们发现，它只查找到了我们定义了id的这个body元素，没有有包含页面顶级的body元素。会不会查找时只会返回我们书写的最后一个body呢？所以说，这可能时浏览器实现中的一个Bug，或者，浏览器是根据其他某个规范执行的这样的操作，我们目前还不得而知。预期应该返回所有符合条件的节点集合，根据我们以上的实验并不是如此，至少在传入的tagName为。标签时，返回的应该时第一个具有具体属性的节点。并且，此时如果查看页面的。树，发现页只保留了返回的该节点，页面中其他的。时，意味着它就是页面中唯一的那个。

2022-12-19 22:02:01 628

原创 DOM算法系列003-获取节点A相对于节点B 的位置

在前面判断包含关系时，我们得到了A与B的祖先节点数组，那两个数组里元素的顺序是顺着DOM树由下而上的，最后一个元素是根节点，然而我们要找A与B两个节点的最近的共同祖先节点，最好是顺着DOM树由上而下找，这样确保A数组与B数组中最开始的元素，下标相同的元素指向同一个节点。这里的处理方式是不对的，因为它只考虑了节点B是节点A的同级兄弟节点的情况，而没有考虑到节点B可能是节点A的祖先节点的兄弟节点或子节点，再或者是祖先节点的兄弟节点的子节点这种情况。

2022-12-15 19:26:51 745

原创 DOM算法系列002-寻找指定DOM节点的上一个或下一个节点

getDomNode。

2022-12-13 16:04:48 1153

原创 DOM算法系列001-DOM基础

DOM，全称，即【文档对象模型】，顾名思义，它是一种把【文档】抽象为计算机程序语言中的【对象】类型结构的方法。这里的【文档】特指【网页文档】。这里的【对象】指的是计算机程序语言中的一种数据结构，它具有成员属性和成员方法，属性是其自身性状的描述，比如【人】这个对象，就具有【身高】、【年龄】、【性别】这样的属性，方法是对象可以执行的动作，比如【人】这个对象，就有【走路】、【吃饭】、【睡觉】这样的方法。而对应于网页文档，将其抽象为对象后，它可能会有【宽度】、【高度】、【背景颜色】等属性，会有【滚动】、

2022-12-13 15:51:26 829

原创原生API编写简单富文本编辑器005

经过前几节的层层递进，我们了解了一个利用原生的属性和方法来实现一个简单版的富文本编辑器，但是目前版本的编辑器虽然功能上基本实现了，但是作为一个应用或者工程，还很低级，它的部分变量和全部方法暴露在全局变量下，并且无法在同一个页面实例化多个互不干扰的编辑器。本节我们就利用面向对象方法来对该编辑器进行封装设计。

2022-12-08 23:29:35 603 2

原创原生API编写简单富文本编辑器004

目前的下拉框，我们都是新生成按钮，然后再在编辑器初始化的时候动态生成将按钮替换掉的，而且每一个下拉框都有一个单独的生成方法，代码冗余比较多，我们统一使用相同方法生成下拉框的dom，并且在生成工具条的时候直接渲染。我们现在的工具条所有按钮，都是写死在html中的，每个按钮一个li标签，但是这样，一是按钮越多，代码就越多，二是不方便扩展，每次新增一个功能按钮，都要去改html模板。所以，下一节我们将对代码进行面向对象的改造，让同一个页面可以生成多个不同的编辑器实例，各个实例之间可以互不干扰。

2022-12-08 23:28:49 601 1

原创原生API编写简单富文本编辑器003

之前插入链接不起作用是因为我们的编辑器没有插入链接功能，无法插入链接，就无法验证取消链接功能，现在我们给编辑器加上了插入链接功能，插入链接后，选中链接，直接点击取消链接按钮，链接就能被取消了。插入链接的流程是当点击插入链接按钮的时候，弹出一个填写链接的输入框和一个确定按钮，点击确定按钮，为选中的文字增加链接。原因是，当我们点击某个字体的时候，浏览器就会取消编辑区内的选区，所以当我们执行命令时，并没有选区，所以会执行失败。现在我们对上面的代码进行改造，将字体列表改造为一个下拉选框，当选择值变化时，设置字体。

2022-12-08 23:25:36 700

原创原生API编写简单富文本编辑器002

我们在中为所有功能按钮添加点击事件监听，在点击对应按钮时执行相应的原生命令。然后我们回到页面中进行点击，会发现除了重做和撤销，其它按钮都不起作用，哪怕我们在可编辑区域输入文字，选择一段文字，然后点击按钮，也是没有任何效果。（可在分支复现）原因是：所以，我们改造一下HTML，将按钮全部改为元素：3. 改造CSS由于将原来的元素上套了一层元素，所以样式与我们最初设计的有了出入：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TjMJHt42-1670512440938)(h

2022-12-08 23:17:13 572

原创原生API编写简单富文本编辑器001

从这一节开始，我们将亲自动手，使用我们之前介绍过的浏览器原生API来实现一个简单的可以处理文本的富文本编辑器。这一个简单版的编辑器，由于我们是基于原生的API，基于浏览器原生API的能力，我们将实现以下功能：文字输入文字格式调整段落格式调整其它通常，当用户使用富文本编辑器时，都希望点击一个按钮来实现某种功能，而传统的按钮太过丑陋，所以我们为其准备一个按钮图标。这里，我们使用上提供的免费图标。我们可以进入iconfont 官网，登陆后，新建一个项目：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下

2022-12-08 23:13:35 715

原创 JS设计模式初探——单例模式

所谓单例，即整个系统中只存在某个类的一个单一实例。单例模式是一种比较常见的设计模式，它也被应用在许多场景，它能够解决如下问题：命名空间管理：可以将一组有关联的属性和方法封装到一个单例中，方便命名管理，防止这些方法属性和其他类的实例的方法属性发生命名冲突。资源共享，由于有些实例的内存损耗比较大，一旦有多个实例，内存损耗就会非常严重，这时候，就可以使用单例模式来保证实例的唯一性，即每次调用和创建实例返回的都是内存中的同一个实例。保证实例的唯一性：有些实例整个系统中只能存在一个，否则会引起同步问题和操作冲

2022-06-16 10:56:11 325

原创富文本编辑器开发系列7——textRange对象详解

在浏览器和更早版本的浏览器中，是没有提供用来表示选区的对象的的，但是它们依旧有可编辑区域的相关能力，是因为它们提供了另一个对象接口：对象[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYpG3x4R-1655347848546)(https://gitee.com/hjb2722404/tuchuang/raw/master/img/20201210162002.png)]我们先直观地看一下这些属性。我们有下面一段代码：再来看页面中选中一个选区后各个属性所指向的从上面的思维

2022-06-16 10:53:47 771

原创富文本编辑器开发系列8——常用DOM API

通常，我们在浏览器中，都是直接通过来直接使用对象的，但是由于浏览器中的页面可能包含框架集，此时每一个框架集都是有一个对象，那么如何准确获取我们需要的对象呢？如果页面包含多个框架（一般来说，每一个），那么每个框架都加载的是不同的文档，它们都有自己的文档对象，在每个对象上都有一个名为的属性指向它所在的，所以我们可以这样或取某个文档关联的 :如果该文档没有关联的对象，则会返回；但是日常开发中，我们往往首先拿到的是某个DOM节点而非对象，那我们又如何判断该节点是属于页面中哪个呢？每一个节点都有一个只读属性

2022-06-16 10:48:53 468

原创 iconfont无法使用时的应急解决方案

iconfont挂了？那项目如何新增图标？来看看这个解决方案

2022-06-13 17:11:40 5879

原创 Yapi数据库迁移后无法新建的问题解决方案

Yapi数据库迁移后无法新建的问题解决方案1.场景在一个新的服务器环境全新安装了yapi后，需要将原有的已经在使用的yapi系统里的数据导入的新装的服务器里。即将A服务器上mongodb里yapi库的数据迁移到B服务器上的mongodb的yapi库里。2.问题迁移后再yapi中执行分组/项目/分类/接口的新建操作时，可能会遇到服务器错误的提示，看服务器端终端日志，原因是数据库主键_id 重复造成的。3. 原因由于mongodb 本身没有主键自动递增的机制，它默认只是生成一个随机的object

2022-02-21 13:33:27 519 1

原创 YAPI 重点功能使用介绍

YAPI 重点功能使用介绍1 项目配置建立项目并填写基本信息成员配置数据导入（从其它API管理工具迁移接口文档）环境配置与swagger自动同步（已经使用了swagger的项目）钉钉通知配置2. 接口调试接口登陆验证在实际使用中，我们需要调试接口是否正常工作（通达、正确），但是接口都需要登陆才能请求，这种情况下，我们可以使用全局请求配置功能，将登陆后获取到的token 动态添加到每一个接口的requestHeader 中去：token的值需要手动登陆系统一次

2022-02-16 11:43:01 2699

原创 Yapi 插件配置教程

Yapi 插件配置教程YAPI的优势就是提供了一套插件系统，任何人都可以通过开发和使用插件来扩展它的功能。但是，由于官方很久没有更新程序了，所以目前安装插件时，如果不做特殊配置，插件打包时会因为依赖版本的关系导致打包失败，从而无法成功安装使用插件。在安装插件前，需要先做以下工作：2.0 关闭正在运行的yapi客户端程序如果是直接使用终端中的node命令运行的，就直接关闭终端，如果是使用pm2启动的，就使用pm2停止服务。2.1 删除打包缓存YAPI 是使用 ykit 打包的，打包会有缓存，其位

2022-02-16 11:42:08 3844 2

原创 Yapi安装部署教程

Yapi安装部署教程1.1 环境准备nodejs > 7mongodb > 2.61.2 安装命令行工具1.2.1 全局安装 yapi-cli ，yapi的命令行工具$ npm i yapi-cli -g1.2.2 全局安装 ykit ， yapi打包工具$ npm i ykit -g1.3 安装在硬盘上新建一个用来安装yapi 的目录，在目录下调出命令终端，执行以下命令：$ yapi server可视化安装指引程序会运行在 http://localho

2022-02-16 11:41:40 7262

原创基于Git子模块的微前端项目管理和公用组件库方案

基于Git子模块的微前端项目管理方案1. 媒体项目从单一项目到多项目的转变及问题随着前端媒体业务的急剧扩大，传统的单体应用已经变得难以维护，由此，这几年我们一直在探索对大型复杂项目的拆分工作。一开始拆分出去的是策划中心，老的媒体项目主体是AngularJS编写的，而拆分出去的策划中心模块则采用 VueJS 编写，限于框架之间的巨大差异，难以优雅地集成在一起，就使用了 Iframe 嵌入式方案。后来，随着配置管理模块、网络资源模逐渐使用 VueJS 重写为独立项目的工作完成，对采编模块的重写工作终于开

2022-02-11 09:32:03 2689

原创 DOM系列——001-DOM基础

DOM系列——001-DOM基础1. 什么是DOMDOM，全称 Document Object Model，即【文档对象模型】，顾名思义，它是一种把【文档】抽象为计算机程序语言中的【对象】类型结构的方法。这里的【文档】特指【网页文档】。这里的【对象】指的是计算机程序语言中的一种数据结构，它具有成员属性和成员方法，属性是其自身性状的描述，比如【人】这个对象，就具有【身高】、【年龄】、【性别】这样的属性，方法是对象可以执行的动作，比如【人】这个对象，就有【走路】、【吃饭】、【睡觉】这样的方法。

2022-01-11 18:35:26 7604

翻译 Git-如何写好一条提交信息

Git-如何写好一条提交信息本文为翻译文章原文： How to Write a Git Commit Message作者： cbeams1.为什么好的提交信息很重要如果你曾经开过任意一个Git仓库的提交历史，你可能会发现它们的提交信息多多少少会有些混乱。请比较下面两个提价历史：$ git log --oneline -5 --author cbeams --before "Fri Mar 26 2009"e5f4b49 Re-adding ConfigurationPostProces

2022-01-06 11:21:43 1251

翻译微软的软件工程检查清单

软件工程检查清单这是一份来自微软的软件工程检查清单，原文是英文的，我认为对与我们很有参考性，所以将它翻译成中文，并结合我们自己的特定进行了文本的微调。代码版本控制默认主分支是被锁定的。（译者注：主分支权限控制）。所有的合并都是通过提 PR/MR 完成的。 PR/MR 都是跟任务管理系统关联的提价历史记录是一致的，提交信息是信息性的（what,why）.（译者注：关于提交信息的格式，可以参考这篇文章）一致的分支命名约定。（译者注：比如类型 + 任务编号）清晰的存储

2022-01-06 11:12:58 391

原创基于el-table二次封装的通用表格组件

特性：数据驱动，省去一个一个写el-table-column标签和属性的烦恼，表格的表头可以存到后端。支持通过拖拽改变列的位置支持通过拖拽改变行的位置支持loading自定义支持具名插槽语法支持可选的复选框列和序号列支持自定义每一列的显示和隐藏，以及是否允许隐藏拖拽的实现依赖于sortablejs库表格使用方式：import TrsTable from '@/components/normal/TrsTable.vue';<trs-table :ta

2021-11-18 18:48:43 1339 2

原创 VsCode+WSL+Docker 开发环境构建指南

Why——为什么整这种活在实际开发中，我们遇到了以下类型的问题：1. 不同工程对nodejs版本要求不一样比如我们的工程A是基于angularjs1.5的，它要求nodejs版本为11.0.0，而工程B是基于vue+vite的，vite要求nodejs版本需要大于12.0.0。尽管有nvm来管理nodejs版本，但它仍旧存在以下问题：全局环境污染比如angularjs工程是基于gulp的，所以需要全局安装gulp包，但是其他工程用不到，而vue工程则需要全局安装vue-cli，这样同一个w

2021-10-13 09:58:14 4626 1

原创当小数遇上二进制——全面解析JS中的小数二进制计算（附赠0.1+0.2 !== 0.3问题解释）

二进制小数如何转换为十进制二进制转换十进制的方法是：从二进制数的最低位开始，每一位乘以对应的2的幂数，然后将最终的结果小数部分与整数部分分别相加对应的2的幂，以个位为0，向高位依次增1，向地位依次减1；举个例子：以二进制小数1100.0011为例：二进制小数位1100.0011对应2的幂3210.-1-2-3-4乘幂计算1 * 231 * 220 * 210 * 20.0 * 2-10 * 2-21 * 2-31

2021-09-27 18:41:09 3039

原创正则表达式中的空白符详细解释

why- 为什么要专门写一篇空白符空白符代表的是编程中常见的一些可以显示为空白的符号，最常见于正则表达式，比如：var reg = /[\n\t\r\f\b\v\s]/;这些字符其实是很常见的，但有时候又像是“最熟悉的陌生人”，有时甚至会混淆他们所代表的含义。本文就彻底全面地对这些字符进行梳理解释，等我们明白了它们具体的含义和渊源后，就再也不会弄混它们了。what- 它们分别代表什么意思：符号含义\n换行符\r回车符\t制表符\f换页符\v

2021-09-26 15:56:24 10018

原创前端错误监控警报系统Sentry（哨兵）私有化部署手札

1.What —— sentry 是什么它是一个前端错误监控警报系统。对于一个前端应用，即使经过开发自测——>前端团队内部评审——>测试团队测试后，仍然无法完全避免线上出现的错误，比如网络请求错误、前端逻辑异常等。sentry 可以监控前端应用的线上运行，当用户在使用应用的过程中遇到应用报错时（有时页面可能没反应，但报错会在控制台出现），它可以及时将错误信息上报给sentry的服务端程序，服务端程序可以通过开发者自定义的方式（比如，邮件、钉钉等）及时向开发者报警，并给出详细的错误信息。当

2021-08-30 17:33:30 4827

原创 git 命令大全

本文大部分内容来自于阮一峰老师《常用 Git 命令清单》一文，余下部分有在网络上收集的，有个人总结的。仅供大家参考。代码库在当前目录新建一个Git代码库$ git init新建一个目录，将其初始化为Git代码库$ git init [project-name]下载一个项目和它的整个代码历史 $ git clone [url]配置显示当前的Git配置 $ git config --list编辑Git配置文件 $ git config -e [--global].

2021-08-12 10:42:02 148

原创关于Git的rebase操作与cherry-pick操作的建议

缘起最近一次新疆采编发版时，发现代码中有一处配置的一个变量没有了，经过查询Git的提交历史发现这次改动涉及的提交bbb的作者是开发人员A，但A君表示从来没有动过这块代码。这就很奇怪了，明明Git上显示的作者是A君，但A又表示不是自己改的，那到底是Git在说谎还是A君在说谎？经过线下询问其他采编开发人员，并对比Git的分支图谱，多方查证，终于弄清楚了原因：开发人员B君要开发的一个功能正好在产品分支上已经有了，所以采用了cherry-pick的方式从产品分支将这个功能的那次提交000(作者是D，提交者

2021-08-10 15:24:26 653

GAE包（以配置好，解压可用）

Php新浪在线编辑器带图片上传版

空空如也