- 博客(99)
- 资源 (14)
- 收藏
- 关注
RSS订阅原创 JS案例：实现一个简易版axios
axios是一个的前端请求工具，其优秀的场景复用性使它可以运行在node环境和浏览器环境，在浏览器环境中使用的是xhr，在node中则是使用http模块，最近在封装一些工具函数，恰好接触到了这一块，于是想分享一下心得，希望对大家有帮助。文章中有一些类型和函数未给出可以在这个工具包中找到功能特性：浏览器环境下，我使用的是fetch而摒弃了xhr的封装，这会使低版本浏览器兼容上有一定缺陷，后续有时间的话可能会加上，node环境下依旧使用的http模块。
2022-09-09 17:09:51
312
6
原创 JS案例：实现一个简单的任务队列-TaskQueue
针对一些大型的秒杀活动，抢票业务，高并发是一个经常遇到的问题，后端人员时常会接触到消息队列这个中间件。对于前端人员而言，使用node开发业务，或者使用浏览器单线程异步渲染时也会遇到堵塞，页面卡死的现象，如何处理大量的数据同时加载或者数据同时请求便成为了老生常谈的话题。此时一个异步的任务队列或许可以帮助我们缓解这些问题。任务队列的特点：异步，解耦，削峰异步是多个任务并发进行，互不依赖；解耦是将业务隔离开，保证任务的运行结果不会影响到其他任务，从而产生堵塞；削峰是指在系统请求量或者负载达到一定峰值时使用缓存
2022-06-01 14:25:45
527
41
原创 JS案例：基于发布订阅实现的事件消息中心-MessageCenter
参考node中的 events事件触发器 我总结归类出了以下函数on :注册事件emit：触发事件un：事件销毁once：注册事件，执行后即销毁clear：重置事件列表（消息中心）has：判断事件是否被订阅handlerLength：返回某个事件的监听函数数量watch：与on一样，不同点是可以将结果返回至发布者invoke：与emit一样，配合watch使用，当watch中存在异步操作时接收其结果
2022-04-27 21:24:43
493
24
原创 基于内网穿透+Fiddler的私有化项目调试前端解决方案
前言分享一下这段时间的一个工作经历：对接第三方平台时，对方只会提供一台跳板机，以及只有跳板机能访问的内网ip（通过内网ip可以访问前端页面，后端接口，数据库，最重要的是第三方平台的api），此时该方案比较适用准备工作toDesk（控制跳板机）内网穿透工具（部署本地前端项目）Fiddler（更改远程请求接口）可以本地部署的前端项目意义我们使用反证法，如果不这么做，在对接第三方的时候有以下缺点：代码更新需要发版解决，每次调试需要重新打包部署，十分耗时间控制台无法直接调试源码，只能查看
2022-01-19 11:00:44
4291
50
原创 这一次带你彻底搞懂JS继承
前言这段时间复习JS从看懂到看开（前端面试题整合）_DieHunter1024的博客-CSDN博客时发现对继承概念又陌生了，平时大多用的都是extends，对底层知识难免会生疏，于是决定分享这篇文章，重新学习一下继承起步继承作为面向对象程序设计特征之一，必定有其重要的意义继承是指：在已存在的类的基础上，拓展出新的类。那么存在的类就是父类，或基类，超类；新的类就是子类，或派生类其重要意义就是使代码可以复用，子类中也拥有父类的属性和方法，从父类一级一级往下，属性和函数由泛化到细化
2022-01-09 23:28:53
1384
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
797
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
1444
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
1528
40
原创 联想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
3411
29
原创 从0到1，教你如何使用Tasker+Autojs实现自动打卡功能
你是否有上下班总会忘记打卡或者迟到的困扰，这篇文章将带你感受一下自动化工具+JS的魅力首先声明：本文章不针对任何第三方软件，侵删准备工作：安卓手机或模拟器，最好使用模拟器（推荐夜神模拟器安卓7的64位），因为手机条件会比较苛刻（需要root，和谷歌三件套）Auto.js软件，或者其衍生产品AutoX.jsTasker，中文站，原网站需要自动执行的软件，我用的是 *人薪事首先，咱们熟悉一下Auto.js的调试，官方文档已经写的很清楚了，我
2021-10-24 10:24:24
5507
20
原创 浅析MVVM原理，实现一个mini-vue
前言MVVM实际上是MVC的改进版，其立足于MVP框架。使用Vue时，我们会体会到其与React的区别，绑定表单数据时react对输入框读写需要input事件设置state，以及value绑定，而vue则只需将数据与model绑定即可，这种数据驱动视图却与视图解耦的编程方式使用起来很方便。为了深入体验mvvm模式，我实现了一个mini-vue。MVVM在开始前，我们先试着参照下图实现一个简单的双向绑定案例
2021-08-08 23:07:42
602
56
原创 JS案例：支持PC端和Mobile端的Canvas电子签名功能
前言：这段时间项目迭代时遇到了一个新需求，基于react实现一个Pc版电子签名功能，并生成图片上传。于是我想到了signature_pad，并且在项目使用了这个插件不得不说，用别人造的轮子是真的香，出于好奇，想用原生实现一下电子签名的功能以下是实现过程HTML和css可以参照源码，这里不过多介绍首先引入eventBus，方便代码解耦然后实现Base基类存放公共方法和属性，后续有啥共用属性或方法可以往这加//基类：公共方法和属性import event from './eventBu
2021-05-13 18:33:03
1274
154
原创 JS案例：将前端页面导出为PDF
前言：记录一下最近的一个需求，产品需要打印表单凭证，需要实现将选中页面的元素或者是组件导出为PDF，方便打印使用到的JS库：html2canvas（截取页面生成canvas），jsPDF（使用JS生成PDF）下面我针对该需求实现一个简单的Demo，并且分享一下遇到的问题首先，我选择了懒加载的案例作为测试对象，因为图片可以检测截图效果，并且有滚动加载长页面我们把整个demo分为两部分，分别是使用上述两个插件实现基本功能使用html2canvas截屏生成canvas......
2021-04-28 11:16:15
2994
60
原创 浅谈Vuex的使用
正如Redux一样，当你不知道是否需要Vuex那就是不需要。不要因为想用Vuex而使用它。用过Vue的人都知道，Vuex是Vue的一个全局状态管理模块，它的作用是多个组件共享状态及数据。
2021-03-25 10:21:48
5415
77
原创 没有云服务器？内网穿透了解一下
内网穿透又叫端口映射，用一句最简单的话来讲就是：将你的计算机所连接的私有网络映射到公网上，别人通过你给的域名或ip即可访问你本地的服务。具体的原理可参照百度百科这么做可以实现各大厂商的云服务器（阿里云，腾讯云，百度云，华为云等）的效果，通过公网地址访问服务器这里分享一些提供内网穿透的网站，前几种是我用过的，感觉都还不错（仅供参考）：StarryFrp（星空云）：免费版（需要实名认证），带宽：5 Mbps，限流：初始20G，每日通过签到可以随机获得 1 ~ 10 GB 流量，隧道数量：5条（强烈
2021-03-20 11:21:28
25934
46
原创 Nginx常用指令，基本配置，反向代理
前言：近期公司整改项目，前端的项目和接口全部采用Nginx重新部署，这里就最近用到的Nginx服务器做一个知识点整理，推荐一个Nginx中文文档网站Nginx服务器就不多做介绍，直接进入正题，系统用的是window7 旗舰首先，下载Nginx，这里我下载了1.18版本，解压后得到以下Nginx根目录，推荐把根目录放到环境变量中然后，在根目录导航栏输入cmd并回车进入命令控制常用命令：...
2021-03-16 12:19:09
2144
59
原创 WebSocket使用及优化（心跳机制与断线重连）
WebSocket在2008年被提出，其通信协议于2011被制定为标准websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接然而，这么做无疑会对服务端造成资源消耗，因为HTTP请求包含较长的头文件，只传递了少许的有用信息，十分消耗资源。于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。
2021-03-13 20:40:15
2812
34
原创 JS案例：触底懒加载
接着上篇文章：ajax获取图片列表，我们来实现一下JS的经典案例，懒加载在web应用中，系统的响应速度对用户体验十分重要，其最主要的影响来源于服务端数据库查询，以及DOM渲染。数据库查询数据量大的情况下，我们可以进行分页配合前端分页或者懒加载进行优化，而这篇文章主要讲的是如何处理后端百万级数据对DOM渲染造成的影响，当然这也是大厂常问的题。
2021-03-09 19:13:10
961
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
819
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
770
16
原创 TypeScript学习笔记（一）TS介绍，环境安装与运行
TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。其源于JavaScript（JS的拓展），终于JavaScript（编译成JS）TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。
2021-02-25 15:33:51
857
24
原创 Nodejs安装配置与npm配置
前言：该片文章主要介绍一下node环境的安装流程及排雷，为下篇TypeScript文章做铺垫环境安装：这里我使用的是nvm（node管理工具）对node进行安装，直接一步到位，省去一些配置我的gitee上的nvm托管地址当然也可以去GitHub或者码云托管上下载nvm下载好安装包后双击安装nvm，选择我同意，并点击下一步选择安装路径，点击下一步选择安装好后，node快捷方式的路径最后点击安装，途中若杀毒软件提示应用修改环境变量点击允许即可安装完成后在环境变量中多出以下变量，并且在cmd中输
2021-02-24 20:38:26
654
16
原创 JS案例：Observer Pattern(观察者模式)和Publisher-Subscriber Pattern(发布者/订阅者模式)
发布/订阅模式和观察者模式一样吗？在许多地方我们都能见到基于这二者或者说基于某种设计模式的框架，函数或插件在浏览器中使用addEventListener(type,fn)对dom元素进行事件委托，事件监听用户的异步操作Android中也有一个事件发布/订阅的轻量级框架：EventBus，原理与web相似Socket.io的许多方法也是基于此类模式，监听与触发事件，批量广播等在Node中同样也有一个events事件触发器解决异步操作的同步响应
2021-02-11 15:02:15
3294
31
原创 React（前端面试题整合）
谈谈对react的理解react是基于v（视图层）层的一款框架，虚拟dom和diff算法react特点：声明式设计高效，其中高效以现在虚拟dom，最大限度减少与dom的交互和diff算法灵活，体现在可以与已知的框架或库很好的配合JSX，是js语法的扩展组件化，构建组件，是代码的更容易得到复用，比较建议在大型项目的开发单项数据，实现单项数流，从而减少代码复用react有哪几个生命周期自己的总结分为三个阶段，初始，运行中，销毁初始化： 执行getDefaultProps钩子
2020-12-16 09:03:26
406
20
原创 VueJs（前端面试题整合）
vue和react的区别React严格上只针对MVC的view层，Vue则是MVVM模式virtual（虚拟） DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制组件写法不一样，React推荐的做法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in
2020-12-10 09:24:24
3116
45
原创 NodeJs（前端面试题整合）
谈谈对Node的理解Node.js 在浏览器外运行V8 JavaScript引擎，单线程 非阻塞I/O 事件驱动,适应于数据高并发,适合多请求,但不适合高运算,有权限读取操作系统级别的API，npm 仓库，常用框架：Express，koa，Socket.io，AdonisJs，NestJS什么是gulp？作用？机制是什么？gulp是基于node的自动化构建工具作用：1 自动压缩JS文件2 自动压缩CSS文件3 自动合并文件4 自动编译sass5 自动压缩图片6 自动刷
2020-11-28 16:48:17
2864
20
原创 ES6+（前端面试题整合）
谈一谈let与var和const的区别let为ES6新添加申明变量的命令，它类似于var，但是有以下不同： let命令不存在变量提升，如果在let前使用，会导致报错let暂时性死区的本质，其实还是块级作用域必须“先声明后使用”的性质，let 暂时性死区的原因：var 会变量提升，let 不会。let，const和class声明的全局变量不是全局对象的属性const可以在多个模块间共享const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可
2020-11-23 09:09:27
1788
33
原创 JS案例：实现Promise
说到ES6的Promise，大家并不陌生，它是JS中解决异步的方法之一其优点：避免回调地狱，链式调用，函数思路清晰，逻辑相对回调函数和事件发布/订阅更强缺点：理解性差，异步操作在promise构造函数内部这段时间在整理面试题时发现，Promise的实现可以单独拿出来分享，于是自己实现了一下...
2020-11-17 17:02:05
2200
30
原创 JS从看懂到看开（前端面试题整合）
解释一下为何[ ] == ![ ] // ---> true首先看一张图！[ ] 是 false原式：[ ] == false根据第八条，false通过tonumber（）转换为0原式：[ ] == 0根据第十条，[ ]通过ToPrimitive()转换为' '原式：' ' == 0根据第六条原式：0 == 0尝试实现new function ObjectClass() {//对象 console.log(arguments[...
2020-11-11 11:11:13
3106
38
原创 JS进阶篇（前端面试题整合）（二）
Ajax 是什么? 如何创建一个Ajax？AJAX全称是Asychronous JavaScript And Xml（异步的 JavaScript 和 XML）它的作用是用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持其主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果实现方式（gitee上的案例）：
2020-11-07 18:41:11
4512
40
原创 JS进阶篇（前端面试题整合）（一）
js的垃圾回收机制是什么原理垃圾回收机制有两种方法第一种是标记清除法：当变量进入执行环境时,就标记这个变量为”进入环境”,当变量离开环境的时候,则将其标记为”离开环境”,垃圾收集器在运行的时候会给储存在内存中的所有变量都加上标记,然后它会去掉环境中的标量以及被环境中的变量引用的标记,而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了,最后,垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间 第二种是引用计数法：当声明了一个变量并将
2020-11-06 09:21:24
2286
21
原创 JS基础篇（前端面试题整合）（二）
如何创建函数第一种（函数声明）： function sum1(num1,num2){ return num1+num2; } 第二种（函数表达式）： var sum2 = function(num1,num2){ return num1+num2; } 第三种（函数对象方式）： var sum3 = new Function("num1","num2","return num1+num2");三种弹窗的单词以及三种弹窗的功能1.alert //弹出对话框并输出一段提示信...
2020-11-04 16:01:05
641
10
原创 JS基础篇（前端面试题整合）（一）
解决js兼容性问题使用 event对象 function eventHandler(event) { event = event || window.event} 获取滚动条属性 var scrollTop = document.documentElment.scrollTop || document.body.scrollTop
2020-11-03 16:02:27
1672
22
原创 联想Tab M10 FHD PLUS (TB-X606F)解锁BL，获取root权限（无需第三方recovery），刷xp框架（太极-阳）适用大部分联发科CPU（国际版rom底包）
前言：5月份的时候在网上买了个联想M10 FHD PLUS平板，当时想找root方法拓展平板更多功能，发现几乎查不到教程，在国外网站也只有一些比较模糊的教程其中包括https://forum.xda-developers.com/thinkpad-tablet/general/twrp-lenovo-tab-m10-fhd-tb-x606f-t4139237...
2020-11-03 10:30:17
12353
65
原创 前端面试题整合（HTML，CSS等基础篇）
浏览器的内核 IE: trident内核，Firefox：gecko内核，Safari:webkit内核，Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核，Chrome:Blink(基于webkit，Google与Opera Software共同开发) HTML中的Doctype有什么作用 此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面） div+css的布局较table布局有什么...
2020-10-30 17:41:38
1602
27
原创 谷歌插件Infinity pro标签书签分享，附上本地pro版的书签的迁移方法
这个书签涵盖很多程序员必备网站，不止有前端方法一：直接在浏览器打开即可：m.infinitynewtab.com?6iyA0H方法二：谷歌infinity插件下载：https://www.extfans.com/search/extensions/infinity/（推荐）官网：http://cn.infinitynewtab.com/
2020-10-24 10:24:11
2935
25
原创 从零开始，搭建一个简单的购物平台（十九）前端商城部分
从零开始，搭建一个简单的购物平台（十八）前端商城部分：https://blog.csdn.net/time_____/article/details/108918489项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上篇文章后，前端商城部分基本功能已实现，包括商品列表，商品分类，首页商品展示，商品详情，购物车，用户登录注册，剩余内容：用户信息修改，提交订单，订单展示等，这篇文章将对剩余部分完结。用户信息修改的后端接口
2020-10-17 14:50:20
1265
16
原创 从零开始，搭建一个简单的购物平台（十八）前端商城部分
从零开始，搭建一个简单的购物平台（十七）前端商城部分：https://blog.csdn.net/time_____/article/details/108893925项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上篇文章对购物车进行了简单的介绍...
2020-10-08 11:38:17
934
16
原创 从零开始，搭建一个简单的购物平台（十七）前端商城部分
从零开始，搭建一个简单的购物平台（十六）前端商城部分：https://blog.csdn.net/time_____/article/details/108769229项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上篇文章讲到了商品详情页面实现，最后一个功能是加入购物车，...
2020-10-08 11:38:05
1158
12
原创 从零开始，搭建一个简单的购物平台（十六）前端商城部分
从零开始，搭建一个简单的购物平台（十五）前端商城部分：https://blog.csdn.net/time_____/article/details/108680599项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping在前几篇文章中，我们对首页，分类列表，公共组件，工具类进行了实现，这篇文章将实现商品详情页进行介绍，这里我们将商品详情页细化成多个组件，利用组件通信方式进行监听传递方式从而实现数据传递和效果逻辑先来看看效
2020-10-08 11:37:55
841
12
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关注的人