- 博客(138)
- 收藏
- 关注
RSS订阅原创 搞懂TypeScript的类型声明的方方面面
在 NPM 上会有对应的标签，使用TypeScript编写，会展示有TS标识：DefinitelyTyped中维护类型定义，会展示有DT使用TypeScript 开发的项目中可以通过tsc"declaration": true, // 用于指定是否在编译完成后生成相应的*.d.ts文件"emitDeclarationOnly": true // 只生成声明文件, 不会生成js文件和上文介绍的 vue 一样，在中通过"types"或"typings"字段来指定类型声明文件即可。
2023-10-20 18:55:02
254
原创 搞懂TypeScript中的类型断言和使用场景
TypeScript的类型断言看起来概念比较简单，但是对于刚接触TypeScript的使用者，可能对使用场景缺少认识，希望本文可以帮助你更了解类型断言。当你使用一个值，但是TypeScript不知道具体类型或者TypeScript记录的类型没有办法满足使用要求时，可以使用类型断言来明确指定为自己想要使用的类型。......
2022-07-26 19:09:20
1088
1
原创 搭建组件库文档最快姿势：Docz
Docz是零配置的，基于Gatsby + MDX，如果你们部门没有使用文档工具，那么你可以轻松接入(KPI向)，如果已经使用了文档工具不妨了解一下Docz，做个对比。为什么要为项目组件/组件库添加文档组件库文档可以帮我们解决以下问题：不知道项目中有哪些公共组件(比如组员写的组件，但是你并不知道)，导致重复开发。复用组件时需要再去翻代码，看看怎么使用，传什么参数。以前写的代码，需要修改或者重构时，无从下手有了组件库文档，基本就可以解决上面的问题，同时也提升了代码复用率和开发效率。...
2022-05-01 10:38:15
1386
翻译 JavaScript中的继承和组合
继承与组合都是面向对象中代码复用的方式，了解各自有什么特点，可以让我们写出更简洁的代码，设计出更好的代码架构。
2022-04-28 14:19:54
330
原创 Zoom会议怎么录屏，录屏存放在哪里，meetingrec文件转换
首先找到录屏存储地址：设置>录制>保存地址一般会存储到zhumuintl(瞩目国际版)或Zoom文件夹中。如果录制过程是被中断的，可能看到的文件就是meetingrec文件，如果想转换成可以播放的文件，需要修改后缀为zoom。双击zoom文件即可打开转换窗口，可能还需要点击一下确认转换：...
2022-04-24 18:23:11
15203
1
翻译 【推荐阅读】JavaScript 中的 SOLID 原则(五)：“D”代表什么
本篇是SOLID原则的最后一篇，建议先阅读前四部分：JavaScript 中的 SOLID 原则（一）：“S”代表什么JavaScript 中的 SOLID 原则（二）：“O”代表什么JavaScript 中的 SOLID 原则（三）：“L”代表什么JavaScript 中的 SOLID 原则（四）：“I”代表什么这是SOLID的第五篇文章(原文一共五篇)，作者是serhiirubets，感谢持续关注。依赖倒置原则D - 依赖倒置原则 这个原则是指：高级模块不应该依赖低级模块；两者都应该依赖于抽象，抽象应该
2022-04-11 17:50:09
2117
翻译 【推荐阅读】JavaScript 中的 SOLID 原则(四)：“I”代表什么
本篇是SOLID原则的第四部分，建议先阅读前三部分：JavaScript 中的 SOLID 原则（一）：“S”代表什么JavaScript 中的 SOLID 原则（二）：“O”代表什么JavaScript 中的 SOLID 原则（三）：“L”代表什么这是SOLID的第四篇文章(原文一共五篇)，作者是serhiirubets，欢迎持续关注。接口隔离原则（Interface Segregation Principle）I - 接口隔离原则。这个原则是指：客户端不应该依赖他们不使用的接口(接口应该是精简的，拥有尽
2022-04-10 21:32:04
146
翻译 【推荐阅读】JavaScript 中的 SOLID 原则（三）：“L”代表什么
本篇是SOLID原则的第三部分，建议先阅读前两部分：JavaScript 中的 SOLID 原则：“S”代表什么JavaScript 中的 SOLID 原则：“O”代表什么这是SOLID的第三篇文章(原文一共五篇)，作者是serhiirubets，欢迎持续关注。里氏替换原则（Liskov Substitution Principle）L - 里氏替换原则。这个原则是指：如果S是T的子类型，那么程序中的T对象可以被S对象替换，不需要改变程序中任何所需属性。从定义上可能没有办法清晰的理解其含义，我
2022-04-09 18:37:12
142
翻译 【推荐阅读】JavaScript 中的 SOLID 原则（二）：“O”代表什么
本文主要渐进的讲解了SOLID原则：不使用SOLID是怎么编写代码的，存在什么问题？应该使用SOLID中的哪个原则？使用SOLID我们应该如何对代码进行修改？相信对比和沉浸式的示例会让你更容易理解SOLID原则，以及如何应用到代码实践中
2022-04-08 09:38:32
181
翻译 【推荐阅读】JavaScript 中的 SOLID 原则(一)：“S”代表什么
你可能已经了解过一些设计原则或者设计模式，本文主要渐进的讲解了SOLID原则：不使用SOLID是怎么编写代码的，存在什么问题？应该使用SOLID中的哪个原则？使用SOLID我们应该如何对代码进行修改？相信对比和沉浸式的示例会让你更容易理解SOLID原则，以及如何应用到代码实践中。这是SOLID的第一篇翻译文章(原文一共五篇)，来自hackernoon，作者是serhiirubets，欢迎持续关注。在本文中，我们将讨论什么是 SOLID 原则，为什么我们应该使用他们和如何在JavaScript中使用他们。什么
2022-04-06 16:16:31
178
原创 前端必备Chrome插件推荐
Web Serve for Chrome通过浏览器直接起一个静态服务，文件夹就可以在浏览器中通过http://127.0.0.1:8887进行访问，默认是首页是index.html。高级用法：可以调整对应的端口号，设置CORS头，支持HTTPS等。运行结果：OneTabOneTab可以把当前打开的所有标签以链接的方式收纳到一个标签中，可以在下班关电脑之前把已打开的标签做收纳，下次打开电脑再进行恢复，也可以管理自己没来得及看的文章。FE Helper强烈推荐 一款强大的插件系统，基本可以满足
2022-04-06 10:50:09
6565
原创 那些我使用过的神级效率工具
为什么介绍这些效率工具：这些我经常使用的工具，对我的日常工作和生活有很大的帮助。效率工具的看法：工具本身出现就是为了解决某些问题，方便我们开发和工作，提高生产力。但是每个人的使用习惯和审美不同，对效率工具的选择和使用也是一样的。工具不是“银弹”，一个好的书写软件并不会让你写出优秀文章，一个优秀的作图软件也不会让你画出令人眼前一亮的图形，正确合理的使用工具。最近打算录个视频来对介绍一下这些工具，主要是可以看到具体操作界面，了解这些软件的隐藏比较深的功能，欢迎持续关注。笔记工具Typora编写MarkDown最
2022-01-07 14:58:38
477
原创 我从Typoro中学到的Child Process知识点(三)
相关链接：我从Typoro中学到的Clipboard妙用我从Typoro中学到的Clipboard妙用(二) 混沌前端 分享技术、工作和生活。 9篇原创内容
2021-11-30 20:48:11
1051
原创 推荐一个工作区管理小工具
起因工作中的业务线比较复杂，每个业务线对应一个项目，经常会遇到多个需求并行开发或者在多个项目中排查问题的情况，需要频繁在不同项目之间切换。日常接触到各种新工具自己也会上手试一下，有时候研究到一半可能会被其他事情中断导致忘记。所以编写了一个简单的小工具满足自己的需求：可以记录工作区目录，增加和删除可以直接通过VS Code打开工作区进行编辑小工具介绍这个小工具使用了一年多，在大部分场景下满足我自己的需求，也提高了开发效率。小工具使用nodejs编写，使用了inquire.js来做交互提示，通
2021-11-24 18:05:34
3510
原创 我从Typoro中学到的Clipboard妙用(二).md
上篇介绍了一下我从Typora中学到的Clipboard妙用：我们从网页复制文字时，剪切板中会塞入两种格式的数据：纯文本和富文本。当我们粘贴到其他编辑器时，文本编辑器会使用纯文本数据，富文本编辑器会使用富文本数据(Typora中会把对应的文本提取成MarkDown格式)。具体内容和简单的代码实现可以查看：我从Typora中学到的Clipboard妙用.mdTypora中图片处理方式经常使用Typora的人应该都知道Typora对于处理图片也有着优秀的使用体验，当插入图片时，你可以指定图片存储方式：Typor
2021-11-23 10:29:44
420
原创 Puppeteer常用代码
!important 欢迎点赞收藏，会不定期更新1. Puppeteer点击包含指定文字内容的元素async function clickWithText(selector,text){ await page.$$eval(selector, (options=[],text) => { options.forEach(item=>{ item.textContent.includes(text) && item.click() }) },text)}.
2021-11-22 10:24:52
1021
原创 我从Typora中学到的Clipboard妙用.md
Typora是我经常使用的一款软件，用来写MarkDown很舒适，有着非常优秀的使用体验：实时预览自定义图片上传服务文档转换主题自定义起因不过我遇到一个非常好玩的事情，当我复制Typora内容粘贴到文本编辑器时，会得到MarkDown格式的内容；复制到富文本编辑器时，可以渲染出富文本效果：复制到VS Code：VS Code复制到其他富文本编辑器：富文本编辑器我很好奇为什么会出现两种不同的结果，Typora应该是使用Electron(或类似技术)开发的，我尝试用Clipboard API来进行测试：//&n
2021-11-18 15:45:00
787
原创 Chrome浏览器主页被篡改怎么修复
今天发现Chrome主页被篡改了，查了一下网上的方法都不管用。先查看了快捷方式右键，没有异常:打开chrome://version/ 发现被修改成了："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" xxxx.com尝试从Chrome重新创建快捷方式，但是还是被篡改的状态，但是直接打开Chorme.exe是正常的，猜测篡改方式可能是实时的。解决方法：查看Windows安全中心的应用和浏览器控制，发现有问题：某个解
2021-11-14 09:59:17
3902
原创 Super expression must either be null or a function错误
在使用Jest为封装的业务组件库添加单元测试时，遇到Super expression must either be null or a function错误，但是组件的引入和渲染又没有问题，网上查了一下主要是由下面几个问题引起的：拼写错误 比如写React类组件时，Component大小写或拼写错误import/export使用问题 示例当使用export default A导出模块时，使用 import * as AModule 就会遇到这种问题，A会出现在AModule.default当出现循
2021-10-11 13:52:10
2427
原创 Windows上怎么使用gzip压缩
在使用koa-static作为静态服务器中间件时，看官网文档支持gzip压缩，所以想试试效果。但是gzip是类Unix系统的内置命令，尝试使用了Windows上常用的压缩软件，都只提供了把文件压缩成.tar.gz格式的功能，最后发现了GunWin提供的gzip压缩工具关于GunWin: Gun Win项目为Win32提供了GNU Linux平台的一些工具包，可以在Window平台使用Linux的部分工具, 具体介绍和工具列表具体使用方法1.下载打开下载地址，这里我们可以选择使用第一个(安装
2021-10-07 23:27:30
7232
翻译 npm ci和npm install区别
npm大家肯定都使用过，可能会有一些不经常使用的命令，npm ci和npm install都可以用来安装依赖，他们之间有什么区别呢？官方文档npm ci 和 npm install类似，不同之处在于npm ci旨在用于自动化环境，例如测试平台、持续集成和部署，或者您希望确保对依赖项进行全新安装。npm ci 在以下情况下会明显更快：有一个 package-lock.json 或 npm-shrinkwrap.json 文件node_modules 不存在或为空目录npm install 和 n
2021-10-06 19:31:34
4721
原创 Antd中示例代码是怎么直接在CodeSandBox中打开的
image-20210906111439548使用过Antd的小伙伴应该很熟悉，Antd组件文档有在CodeSandBox和CodePen中打开直接预览和编辑的功能，这么炫酷且实用的功能具体是怎么实现的？codesandbox.io[1] 是一个前端代码的在线编辑器，支持各种不同的框架，可以随时预览代码的运行结果。创建沙盒“在CodeSandBox中打开”是CodeSandbox提供的功能，让我们可以通过直接调用API来创建CodeSandbox沙盒。CodeSandbox提供了几种导入到沙盒中预览的方式：
2021-09-06 15:52:33
1094
原创 file-uploader-cli的使用方法
先看一下file-uploader-cli可以实现的效果命令行直接上传文件：在Typora中使用: 图片拖拽到Typora，或者复制图片到Typora中粘贴，自动替换图片为网络地址安装npm install -g file-uploader-cli 我们以GitHub为例，看看怎么使用吧。需要使用Public权限的仓库或者GitHub Pages仓库，否则公网会因为没有权限而无法进行访问1.创建需要导入的json配置{ "token": "", "user": "",
2021-08-26 23:48:35
472
原创 业务组件库开发流程
业务组件库必要性项目经过长期维护之后往往会沉淀出很多公共组件，当一个组件编写完成之后，其他维护者想要使用这个组件，了解这个组件是做什么的，应该怎么用，必须再去翻看源码，或者没有压根儿注意到这个组件导致重发开发。这个时候一个完善的组件库就很有必要了，可以保障开发者之间进行良好的协作。组件库可以帮我们解决以下问题：业务组件跨项目复用，提升开发效率统一代码实现，统一代码质量保障组件库文档提供清晰的使用方式和直观的展示效果组件库的组成业务组件构成业务组件库是基于基础组件库进行编写的，基础组件库是使用antd。我们会
2021-08-26 19:22:09
6162
1
原创 vue,react,angular都在用的commit规范,了解一下?
截图来自vue的PR:1.commit-message规范必要性统一格式的提交记录，更清晰和易读可以通过提交记录来了解本次提交的目的，更好的CR和重构更容易了解变更，定位和发现问题每个提交描述都是经过思考的，改善提交质量直接生成ChangeLog2.规范选型常见的commit message规范有：atom，eslint和Angular等,其中Angular规范更为通用。3.Angular的Commit Message规范简介每条提交记录包含三个部分：header,body和footer<header
2021-08-19 10:06:12
521
原创 程序员加薪必备，绘制架构图，流程图神器推荐
给大家推荐几个很方便的绘制流程图，架构图的神器。画图画的好，加薪少不了！绘图是一项软技能，好的图形可以表达比文字更丰富的内容，更清楚的展示逻辑。1. ProcessOn 在线绘制首先放一个注册链接：点击注册 ，推荐使用这个地址注册，可以获得会员。可以在7天之内创建多个文件备用，7天之后也会保留。特点类型丰富：流程图，思维导图，思维笔记，原型图，UML类图等,。模板市场：每个账号有9个免费文件额度。有模板市场，非常丰富精美的模板，免费的模板也很多2. 金山文档 在线绘制特点类
2021-08-05 12:00:19
1276
原创 【必读推荐】程序员的职业素养
整理了一下《代码整洁之道--程序员的职业素养》中一些受益匪浅的观点。第一章 专业主义清楚你想要什么承担责任了解你的领域失误率永远不能等于0，但你有责任让它无限接近于零。每个专业软件开发人员必须了解的技能：设计模式。必须能够描述GOF书中的全部24种模式。设计原则 必须了解SOLID原则，深刻理解组件设计原则结构图 流程图 决策表 状态迁移图表第二章 说“不”大多数时间我们都希望能够说“是”。健康的团队都会努力寻找给他人肯定的答复。运作良好的团队经理和开发人员，会相互协商，
2021-07-25 14:53:41
1463
3
转载 汉字笔顺动画C端实现&B端原理 - [大力智能 前端]
✊ Give Me the Font, Back to You the Animation一、简介笔顺后台的目标是只要对于给定的字体文件（WOFF, OTF, TTF ）以及需要的字形（汉字，字母 or 其他各国的语言），就能产出与之对应的笔顺动画数据。是对开源项目Make me han zi[1]的实践。二、效果演示展示效果大力硬件端展示效果后台数据资源后台产出笔顺动画的 json 文件，并通过 CDN 资源分发。确定字体的情况下，一个字形对应唯一一个数据资源（字形通过encodeURI，并去除"%"进行
2021-06-23 16:48:16
2753
原创 使用Nodejs编写的Typora图片自动上传工具
Typora图片自动上传工具file-uploader-cli, 支持:github 上传到GitHub Pages或者公共仓库搭配jsDelivr使用(不推荐)ali-oss 阿里云对象存储qiniu 七牛云对象存储cos 腾讯云对象存储jdcloud 京东云对象存储ftp FTP服务器安装npm install -g file-uploader-cli配置fuc -t github config.jsonconfig.json中配置项(以github为例)有：通用参数(非
2021-04-07 16:28:01
234
原创 Xmind怎么打开？在线转换成PNG,JPG图片格式，无需安装其他软件
使用ProcessOn即可在线转换。登录之后，点击新建=>导入支持导出多种格式
2021-03-22 16:35:32
4609
原创 WASM反编译，WASM逆向
/Users/bj/gitlab/Application/articleFetch/wabt/bin/wasm-decompile test.wasm -o test.o
2021-03-15 10:09:01
11372
2
原创 命令行动图，命令行生成SVG动图
命令行动图，命令行GIF图代码片段生成带高亮效果的图片我们可以使用carbon 但是如果想制作动图一般是录屏来转换成GIF图，其实还有另一种方式，我们可以使用asciinema + svg-term生成SVG图片优点矢量可以手动修改速度和文案文字可以复制具体效果：https://cdn.jsdelivr.net/gh/Iamxiaozhu/file-uploader-cli/test.svg...
2021-03-09 11:47:06
581
原创 强大且免费的文本转换工具，word转其他格式，epub转换
alldocs开源的基于pandoc的在线文本文件转换器alldocs仓库地址免费在线服务可以使用仓库代码，构建自己的服务
2021-03-08 19:20:55
478
翻译 Linux搭建SFTP服务，CentOS搭建SFTP服务
https://www.howtoforge.com/tutorial/how-to-setup-an-sftp-server-on-centos/本教程主要是关于如何在CentOS上设置和使用SFTP服务器。使用普通的FTP从服务器到客户端或从客户端到服务器传输，很容易被匿名入侵者入侵（如果不使用TLS），因为它的端口对任何人都是开放的。可以使用SFTP作为更安全的替代方案。SFTP使用SSH文件传输协议或安全文件传输协议来提供安全的连接。教程将展示如何为客户端提供对SFTP服务器的访问权限，但.
2021-02-26 19:48:49
1632
原创 前端下载文件，下载图片和pdf新标签中打开,下载二进制流，canvas图片跨域
对于静态服务的文件一般可以通过a标签+download属性来下载, 但是如果文件是图片，pdf,html等浏览器支持解析的，而且是当前文件是跨域的，那么浏览器就会在新标签中打开。<a download="" href='***'>下载</a>文件不跨域 => 下载文件跨域 + 浏览器不支持解析 => 下载文件跨域 + 浏览器可以解析 => 新标签中打开如果是后端返回的二进制流，可以通过ObjectURL进行下载(同时可以解决跨域img,pdf
2021-01-24 18:00:37
526
2
转载 js怎么实现复制文本
if (navigator.clipboard) { navigator.clipboard.writeText('test text'); showTips('复制成功!', 30, 2);} else { const eventCopyer = event => { event.preventDefault(); event.clipboardData.setData("text/plain", 'test text'); }
2020-12-15 19:49:39
384
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人