- 博客(118)
- 资源 (14)
- 收藏
- 关注
RSS订阅原创 TypeScript（七）类
在早期的JavaScript中，我们使用函数来模拟类，使用原型链实现继承行为。在ES6以后JS也引入类的概念，虽然其本质还是使用原型继承和构造函数的语法糖实现的，但是类的写法依旧使得开发人员得心应手；相比JS的类，TS的类可以说是有过之无不及。在TypeScript中，类可以包含属性和方法，支持继承和接口实现，也可以使用修饰符来控制访问权限。类的定义使用class关键字，并可以在其中声明构造函数、属性、方法等。
2023-03-21 22:55:52
301
原创 TypeScript（五）类型别名及类型符号
在编写JS代码时，我们通常使用const、var、let来定义一个变量，进行变量的运算或者逻辑编写等。在TS中也有一种类似变量的写法那就是类型别名，与运算逻辑相对应的便是类型符号在前面的文章中，我们介绍了TypeScript中常用的类型，然而在实际项目开发中，不可避免的会遇到各种复杂类型，有些可以使用接口或对象类型来描述，但是有些数据类型更灵活、复杂，那么此时，类型别名是一种非常有用的工具，它可以帮助我们简化代码，提高代码的可读性和可维护性；基本语法应用场景如果说类型别名是一个人，那么类型符号就是它的灵魂。
2023-03-13 10:26:28
284
4
原创 TypeScript（四）接口
在介绍TS对象类型中，为了让数组每一项更具体，我们使用 string [ ] 表示字符串类型的数组，为了知道函数的参数与返回值，使用 let fn: (a: number, b: number) => number 来表示一个函数类型，那么作为复杂类型，仅仅使用Object表示一个普通对象类型是远远不能满足类型检查以及代码可读性的，有没有一种类型可以用来描述对象的结构呢？
2023-03-09 16:58:06
639
6
原创 TypeScript（三）对象类型
在TS中除了之前的基本类型外，还包含Array（数组），Object（对象），Function（函数）等等继承于对象的其他对象，以及Tuple（元组），Enum（枚举）等高级类型，以及泛型，never，unknown类型。这些类型是TS强类型检查的基础Array（数组）Object（对象）Function（函数）Tuple（元组）Enum（枚举）泛型neverunknownTypeScript 入门教程TypeScript: Documentation - 基础
2023-03-05 14:44:35
349
原创 死磕Node模块兼容性，ESM和CJS我全都要！
在Node版本13.2.0（2019年）之前，我们一般使用CJS（CommonJS）模式在代码中引入包，它的加载是同步的，在整个模块加载完成后，才会执行后续代码。而ESM（ECMAScript Modules）最早在2015年就被使用在浏览器中，在script标签中增加type="module"这个属性，然后引入模块进行使用。在Node 13.2版本后，Node也支持使用ESM进行导入模块的操作，那么如何对其二者进行一个兼容？请接着往下看。
2023-02-22 14:27:33
239
原创 TypeScript（二）基本类型和特殊类型
距离上篇博客已有两年了，对TS也有了一定的认识，于是计划继续更新系列文章基本数据类型在TS中，基本数据类型有：Boolan（布尔），Number（数字），String（字符串），Null（空值），Undefined（未定义），Symbol（标识符，ES6新增），Bigint（任意位整数，精度在53位以内，ES10新增）。除了上面的基本类型外，还有Void（缺少值）通常表示函数无返回值，any（任意值）这些特殊类型变量定义在JavaScript中，我们通常使用var定义变量，在es6中新增
2023-02-17 14:42:56
257
原创 使用Node+Wechaty做一个机器人
这篇文章会结合Wechaty去实现一个机器人在开始编码之前，我们先了解一下wechaty；Wechaty是一个聊天机器人，只需6行代码即可实现一个机器人，其跨平台性，多编程语言支持，使其在众多开源的bot项目中大放光彩。
2023-02-17 09:47:37
6691
31
原创 基于Web Speech API给ChatGPT加上语音功能，距离MOSS又近了一步
去年写了两篇关于接入chatGPT的文章：微信接入ChatGPT，使用Node+ChatGPT+Wechaty做一个微信机器人_DieHunter1024的博客-CSDN博客站在巨人的肩膀上，用Node+ChatGPT模块实现一个接口_DieHunter1024的博客-CSDN博客我自己也把微信小号接入了chatGPT，同事们直呼过瘾，每天在群里聊得风生水起这不前段时间看了《流浪地球2》，在感叹国产科幻片如此优秀的同时，心中萌生出了一个想法，我是不是也能把语音技术结合到chatGPT中，做个语音对话机器人
2023-02-11 19:59:12
1645
2
原创 面试官：JS中变量定义时内存有什么变化？
JavaScript引擎是使用堆内存和栈内存来管理内存的：栈内存用于存储程序的函数调用，变量声明以及一些占用小的变量值，如布尔，部分整数等，它们的生命周期受到函数的调用和退出以及变量的作用域的控制。当函数被调用或者变量创建时，相关的变量和函数调用会被压入栈内存，如果函数退出或者变量作用域销毁，相关的变量和函数就会从栈内存中弹出。堆内存的作用是存储变量值，如字符串，对象，数组及函数，它们的生命周期受到JavaScript垃圾回收机制的控制，当不再需要这些变量时，垃圾回收机制会将它们销毁。
2023-02-06 10:23:46
332
2
原创 精读JavaScript中的代理（Proxy）与反射（Reflect）
JavaScript中的Proxy与Reflect是ES6中引入的新特性，它们可以帮助我们更高效地操作对象。代理（Proxy）是一种设计模式，它允许我们在访问对象的同时，添加一些额外的操作。代理对象与被代理对象实现相同的接口，代理对象会接受并处理所有对被代理对象的访问请求。反射（Reflection）是指程序可以在运行时获取、操作、修改它本身的状态或行为。反射是一种动态获取类型信息和操作类型的能力，可以在运行时动态调用类中的方法或属性。
2023-02-01 09:43:09
350
4
原创 为了方便项目打包，我用Node写了个git-tag工具
在使用git执行打包操作时，我们常常会根据场景在tag中增加一些标识。以基准版本为1.0.0为例：软件开发初期可以定义1.0.0-alpha.0，开发阶段是1.0.0-beta.0，上预发布环境时可以打成1.0.0-release.0，最终上线可以打v1.0.0。也许每个公司都有一套标准，是否能做一个工具适配这样的场景？于是就有了这篇文章，我想借这篇文章与大家分享一下最近整的一个git标签工具git-tag-sh
2023-01-24 18:07:39
2118
4
原创 旧手机别再换盆了，教你使用Linux Deploy安装CentOS
最近沉迷于服务器搭建，书接上文，在安卓高版本中成功安装了服务器，但是安卓低版本的却一言难尽，安装node环境时各种报错，这可能是因为Termux软件版本过低，许多系统依赖获取不了，无法安装高版本的node，不愿折腾的我只好另寻高见，使用Linux Deploy直接安装CentOS
2023-01-18 16:46:25
1513
2
原创 旧手机闲置？教你用Termux搭建个移动服务器
最近偶然看到网上有人用KSWEB搭建本地服务器，于是突发奇想也想在手机中搭建一个node环境试试，趁着周末有空，麻溜的试了试。这篇文章将针对我的搭建过程，遇到的问题及解决方案做个记录我的计划是使用手机搭建一个node环境，通过内网穿透将服务器暴露。TermuxAnbox最终基于方便和轻量，选择了Termux，说干就干准备工作Termux安卓手机（最好是高版本安卓，并且不使用模拟器），我的实验机是华为荣耀-安卓9；正式机是荣耀6-安卓6vpn谷歌商店，有最好电脑：adb（要不要都行）起步。
2023-01-15 23:32:44
1029
原创 JS案例：接口加解密与防重放
在网络通信中，如果数据包是明文传输，并且包含敏感信息，那么就很容易被抓包窃取，因此加密手段也成了开发者耳熟能详的知识技能；常见的加密方法有对称加密和非对称加密。对称加密使用同一个密钥进行加密和解密，而非对称加密使用公钥和私钥分别进行加密和解密。另一个需要知识点是防重放措施，防重放攻击是指攻击者会拦截请求并重新发送，从而导致重复处理。常见的防重放攻击方法有使用令牌桶算法和使用 Nonce 值（随机数）。
2023-01-12 15:06:34
537
2
原创 JS进阶篇（前端面试题整合）（三）
最近刷面试题遇到了一些比较有意思的题目，做个记录（题目均来源于牛客网，解析均是本人的理解，有任何问题欢迎在评论区指出）Q：请问以下两次检测对象constructor是否拥有属性名1的结果分别是什么？Q：以下哪些对象是Javascript内置的可迭代对象？A：抛出ReferenceError。Q：下面这段程序的显示结果是？
2022-12-25 18:51:19
600
2
原创 站在巨人的肩膀上，用Node+ChatGPT模块实现一个接口
蹭一下最近比较火的人工智能ChatGPT的热度，最近看到许多小伙伴都在调戏ChatGPT，看到这我就坐不住了，这种事怎么能少了我，于是闲（划）暇（水）之余用node做了个api
2022-12-07 22:34:23
6560
29
原创 JS如何实现书签导入导出？我是这么做的
使用Node做过爬虫的人应该都知道Cheerio.js模块，其快速灵活的机制，使我们只需要了解JQ就可以轻松上手，是在使用node抓取网页数据的过程中不可或缺的一员。了解了cheerio后，我突发奇想：干脆拿cheerio实现个书签的导入吧，正好可以熟悉一下它的用法，于是早些时候我使用cheerio+node实现了初版的书签导入功能，将浏览器导出的书签通过前端页面上传到服务端，服务端使用cheerio将html解析成JSON文件，通过接口将数据传递到前端。然而
2022-12-06 15:18:05
436
原创 基于Vite+Vue3+Electron整了一个桌面应用模板
随着前端的更新迭代，基于js/ts开发的桌面应用框架也越来越多，从heX，electron，nwjs到tauri，Qt，以及Rn和flutter也有桌面应用业务。而今天的主角正是electron，作为一款2013年推出的桌面应用开发框架，其运行于Chromium内核以及node平台，使得开发者可以使用html+css+js进行开发，然而它的缺点也比较明显，构建时可是带上了整个Chromium。但是作为一款经典的JS桌面应用框架，咱还是得了解一二的。下面给大家分享一下近期的项目搭建心得。
2022-10-24 14:37:52
1581
12
原创 JS案例：实现一个简易版axios
axios是一个的前端请求工具，其优秀的场景复用性使它可以运行在node环境和浏览器环境，在浏览器环境中使用的是xhr，在node中则是使用http模块，最近在封装一些工具函数，恰好接触到了这一块，于是想分享一下心得，希望对大家有帮助。文章中有一些类型和函数未给出可以在这个工具包中找到功能特性：浏览器环境下，我使用的是fetch而摒弃了xhr的封装，这会使低版本浏览器兼容上有一定缺陷，后续有时间的话可能会加上，node环境下依旧使用的http模块。
2022-09-09 17:09:51
607
10
原创 JS案例：实现一个简单的任务队列-TaskQueue
针对一些大型的秒杀活动，抢票业务，高并发是一个经常遇到的问题，后端人员时常会接触到消息队列这个中间件。对于前端人员而言，使用node开发业务，或者使用浏览器单线程异步渲染时也会遇到堵塞，页面卡死的现象，如何处理大量的数据同时加载或者数据同时请求便成为了老生常谈的话题。此时一个异步的任务队列或许可以帮助我们缓解这些问题。任务队列的特点：异步，解耦，削峰异步是多个任务并发进行，互不依赖；解耦是将业务隔离开，保证任务的运行结果不会影响到其他任务，从而产生堵塞；削峰是指在系统请求量或者负载达到一定峰值时使用缓存
2022-06-01 14:25:45
911
41
原创 JS案例：基于发布订阅实现的事件消息中心-MessageCenter
参考node中的 events事件触发器 我总结归类出了以下函数on :注册事件emit：触发事件un：事件销毁once：注册事件，执行后即销毁clear：重置事件列表（消息中心）has：判断事件是否被订阅handlerLength：返回某个事件的监听函数数量watch：与on一样，不同点是可以将结果返回至发布者invoke：与emit一样，配合watch使用，当watch中存在异步操作时接收其结果
2022-04-27 21:24:43
750
24
原创 基于内网穿透+Fiddler的私有化项目调试前端解决方案
前言分享一下这段时间的一个工作经历：对接第三方平台时，对方只会提供一台跳板机，以及只有跳板机能访问的内网ip（通过内网ip可以访问前端页面，后端接口，数据库，最重要的是第三方平台的api），此时该方案比较适用准备工作toDesk（控制跳板机）内网穿透工具（部署本地前端项目）Fiddler（更改远程请求接口）可以本地部署的前端项目意义我们使用反证法，如果不这么做，在对接第三方的时候有以下缺点：代码更新需要发版解决，每次调试需要重新打包部署，十分耗时间控制台无法直接调试源码，只能查看
2022-01-19 11:00:44
4566
50
原创 这一次带你彻底搞懂JS继承
前言这段时间复习JS从看懂到看开（前端面试题整合）_DieHunter1024的博客-CSDN博客时发现对继承概念又陌生了，平时大多用的都是extends，对底层知识难免会生疏，于是决定分享这篇文章，重新学习一下继承起步继承作为面向对象程序设计特征之一，必定有其重要的意义继承是指：在已存在的类的基础上，拓展出新的类。那么存在的类就是父类，或基类，超类；新的类就是子类，或派生类其重要意义就是使代码可以复用，子类中也拥有父类的属性和方法，从父类一级一级往下，属性和函数由泛化到细化
2022-01-09 23:28:53
1657
34
原创 基于node实现CSDN博客导出为markdown
前言这段时间准备搭建自己的博客挂到服务器上，于是想着把博客平台的文章导出，然而CSDN没有博客导出功能，在网上搜的方式是用博客搬家导入博客园然后导出为xml文件，由于xml文件也需要解析，而且操作方式并不简单，所以写了一个服务将CSDN的博客导出为md格式文件准备工作node环境依赖：axios cheerio html-to-md实现过程问题一：通过community/home-api/v1/get-business-list接口可以获取到个人博客的列表，请求采用分页懒加载，并
2021-12-21 09:43:58
1037
28
原创 使用verdaccio打造自己的npm私有化仓库
前言接着上篇文章Gitea+Jenkins能碰撞出怎样的火花？浅谈前端自动化部署_DieHunter1024的博客-CSDN博客本文将与大家分享使用verdaccio搭建私有化npm仓库以及npm包的发布准备工作Node环境远程或本地服务器verdaccio安装配置verdaccio使用npm install --global verdaccio全局安装verdaccio在服务器中新建文件夹用来存放npm数据在新建的文件夹中运行cmd输入verdaccio，显示以下日志就可以了
2021-12-16 19:39:14
1704
18
原创 Gitea+Jenkins能碰撞出怎样的火花？浅谈前端自动化部署
前言：一个好的部署工具能帮助开发者提升效率，节省时间，本文将与大家分享私有化Git仓库搭建与Jenkins操作项目部署准备工作：Java环境Node环境GiteaJenkinsNginx(部署前端页面)服务器或者电脑（我这里是window系统+公网映射搭建的本地服务器）首先是搭建一个本地Git代码仓库下载gitea并在需要安装的文件夹下打开，默认访问地址是127.0.0.1:3000打开后选择一下数据库，并在对应文件夹下生成db文件（新建空白txt文件，改后缀名为db）
2021-11-28 02:16:07
1755
42
原创 联想Tab M10 FHD PLUS (TB-X606F)安卓10版本刷TWRP及Magisk
感谢博友提供的参考文章：unofficial twrp 3.5.0 Root Lenovo TB-X606F X606FA - twrp unofficial接上篇文章：联想Tab M10 FHD PLUS (TB-X606F)解锁BL，获取root权限（无需第三方recovery），刷xp框架（太极-阳）适用大部分联发科CPU（国际版rom底包）_DieHunter1024的博客-CSDN博客前言：解答一些博友的刷机问题及分享一下最近刷安卓10及root的经历无法解锁BL：需要登录联想账号并
2021-11-04 16:53:34
5320
39
原创 浅析MVVM原理，实现一个mini-vue
前言MVVM实际上是MVC的改进版，其立足于MVP框架。使用Vue时，我们会体会到其与React的区别，绑定表单数据时react对输入框读写需要input事件设置state，以及value绑定，而vue则只需将数据与model绑定即可，这种数据驱动视图却与视图解耦的编程方式使用起来很方便。为了深入体验mvvm模式，我实现了一个mini-vue。MVVM在开始前，我们先试着参照下图实现一个简单的双向绑定案例
2021-08-08 23:07:42
716
56
原创 JS案例：支持PC端和Mobile端的Canvas电子签名功能
前言：这段时间项目迭代时遇到了一个新需求，基于react实现一个Pc版电子签名功能，并生成图片上传。于是我想到了signature_pad，并且在项目使用了这个插件不得不说，用别人造的轮子是真的香，出于好奇，想用原生实现一下电子签名的功能以下是实现过程HTML和css可以参照源码，这里不过多介绍首先引入eventBus，方便代码解耦然后实现Base基类存放公共方法和属性，后续有啥共用属性或方法可以往这加//基类：公共方法和属性import event from './eventBu
2021-05-13 18:33:03
1394
154
原创 JS案例：将前端页面导出为PDF
前言：记录一下最近的一个需求，产品需要打印表单凭证，需要实现将选中页面的元素或者是组件导出为PDF，方便打印使用到的JS库：html2canvas（截取页面生成canvas），jsPDF（使用JS生成PDF）下面我针对该需求实现一个简单的Demo，并且分享一下遇到的问题首先，我选择了懒加载的案例作为测试对象，因为图片可以检测截图效果，并且有滚动加载长页面我们把整个demo分为两部分，分别是使用上述两个插件实现基本功能使用html2canvas截屏生成canvas......
2021-04-28 11:16:15
3301
60
原创 浅谈Vuex的使用
正如Redux一样，当你不知道是否需要Vuex那就是不需要。不要因为想用Vuex而使用它。用过Vue的人都知道，Vuex是Vue的一个全局状态管理模块，它的作用是多个组件共享状态及数据。
2021-03-25 10:21:48
5548
77
原创 没有云服务器？内网穿透了解一下
内网穿透又叫端口映射，用一句最简单的话来讲就是：将你的计算机所连接的私有网络映射到公网上，别人通过你给的域名或ip即可访问你本地的服务。具体的原理可参照百度百科这么做可以实现各大厂商的云服务器（阿里云，腾讯云，百度云，华为云等）的效果，通过公网地址访问服务器
2021-03-20 11:21:28
28060
48
原创 Nginx常用指令，基本配置，反向代理
前言：近期公司整改项目，前端的项目和接口全部采用Nginx重新部署，这里就最近用到的Nginx服务器做一个知识点整理，推荐一个Nginx中文文档网站Nginx服务器就不多做介绍，直接进入正题，系统用的是window7 旗舰首先，下载Nginx，这里我下载了1.18版本，解压后得到以下Nginx根目录，推荐把根目录放到环境变量中然后，在根目录导航栏输入cmd并回车进入命令控制常用命令：...
2021-03-16 12:19:09
2290
59
原创 WebSocket使用及优化（心跳机制与断线重连）
WebSocket在2008年被提出，其通信协议于2011被制定为标准websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接然而，这么做无疑会对服务端造成资源消耗，因为HTTP请求包含较长的头文件，只传递了少许的有用信息，十分消耗资源。于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。
2021-03-13 20:40:15
3909
34
原创 JS案例：触底懒加载
接着上篇文章：ajax获取图片列表，我们来实现一下JS的经典案例，懒加载在web应用中，系统的响应速度对用户体验十分重要，其最主要的影响来源于服务端数据库查询，以及DOM渲染。数据库查询数据量大的情况下，我们可以进行分页配合前端分页或者懒加载进行优化，而这篇文章主要讲的是如何处理后端百万级数据对DOM渲染造成的影响，当然这也是大厂常问的题。
2021-03-09 19:13:10
1183
31
原创 JS案例：ajax获取图片列表
AJAX是个啥？有什么作用？如何实现AJAX？如何使用AJAX？这几个问题我在前端JS的面试题中，遇见了不少，对于前后端分离，单页面渲染流行的今日，ajax似乎变得很重要。那么什么是Ajax？Ajax（Asynchronous JavaScript and XML），又被称为异步 JavaScript 和 XML，它不是一门语言，而是web应用的一门技术。要知道，如果在2009年你了解前端的dom操作，ajax技术和一点点JS语法，你就已经可以找到一份不错的web前端的工作了。也正是Ajax技术..
2021-03-04 15:55:17
1087
16
原创 原生Node实现静态目录
node环境中实现静态资源托管，网上许多案例都是直接通过Express或koa框架实现的，一行代码就可以解决app.use('/img', express.static(path.join(__dirname, './img')));然而为了追寻原理，我自己试着实现了一个简单的静态资源托管，为下篇懒加载文章做铺垫新建server.js文件执行node代码，在server.js中引入等会要用到的模块http和fs（filesystem）const http = require('http'
2021-03-02 14:19:44
1016
16
原创 TypeScript（一）TS介绍，环境安装与运行
TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。其源于JavaScript（JS的拓展），终于JavaScript（编译成JS）TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。
2021-02-25 15:33:51
1118
30
javascript面向对象编程
2020-10-26
从零开始，搭建一个简单的购物平台
2020-09-08
Echarts案例：整一个炫酷一点的仪表盘
2020-03-21
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图
2020-03-20
Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果
2020-03-20
使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天
2020-03-12
用购物车理解前端MVC架构
2020-03-05
原生JS实现高大上的购物车
2020-02-24
收集前端常用框架包，及UI库
2018-11-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人