- 博客(66)
- 收藏
- 关注
RSS订阅原创 前端文件上传功能实战——前端实现（下）
我们并不能设想在同一时间内用户只会上传一个文件，在同一时间时如果用户上传多个文件那么我们该怎么实现控制多个文件的上传顺序，启停单独的文件，使所有文件同时暂停开始的功能，我们通过构造BigFileList类来实现上述功能。一个BigFile通常会由当前文件对应的TaskQueue，由Chunk组成的数组，当前文件的hash以及对应事件的处理组成，BIgFile也是我们在整个流程唯二需要手动操作的类。webWorker中的代码。
2024-12-23 17:05:53
1013
原创 前端文件上传功能实战——前端实现（中）
文件hash是一个CPU密集型任务，所以只会在任务被启动时才进行计算，确保主线程不会被阻塞，，因为计算hash涉及了IO操作，所以是异步的，为了防止在读取文件的过程中又一次的对reader进行重新赋值，我们可以对reader进行一个缓存处理，如果后续还需要hash，则可以将之前已经计算好的hash直接返回，而不需要重新计算，具体实现如下。每一个分片都需要上传到服务器上，每一个上传都是一个任务——即Task类，我们通过Task实例来执行上传任务，包括当前分片上传进度的监控，取消当前分片的上传等功能。
2024-12-19 09:28:45
1055
原创 前端文件上传功能实战——前端实现（上）
无论是通过showOpenFilePicker还是通过showDirectoryPicker来获取文件，本质上获取的是文件的句柄对象，句柄对象无法直接使用，我们可以通过getFile方法来得到句柄对象对应的file对象。如果此时的句柄对象指向的是文件夹的话，我们就需要通过entries方法得到此文件的所有子文件，通过kind属性来判断此时的句柄对象是否指向文件。BigFileDOM类主要控制每个文件在页面的相关展示，功能绑定等。DOM类用于获取页面相关元素并提供对应的事件绑定。
2024-12-17 16:02:02
786
原创 前端文件上传功能实战——后端实现
事实上，在切片上传失败后我们需要将这个切片删除掉，以免用户下一次重新上传时误以为此切片已经上传完成，但可惜的是multer默认提供的两种存储引擎并未提供此功能，所以我们需要在原本的diskStorage的基础上进行添加和修改try {});});});});通过在_handleFile中监听当前请求是否取消来决定是否关闭当前文件的管道流，以避免直接调用unlink导致到文件无法删除问题。
2024-12-13 12:14:32
715
原创 前端文件上传功能实战——功能分析
文件上传功能是许多人都会用到的，以最基本的文件上传为例，我们可以在网页中添加一个input元素，并通过JavaScript监听该元素的change事件来获取文件。每个小文件都通过一个独立的请求上传，这样如果有文件上传失败，我们只需重新上传那个特定的文件，而无需重新上传整个大文件。实际上，不管用户上传的是文件片段还是完整文件，都存在后端已保存该文件的可能性。我们可以大胆做出假设，用户所选择的文件都是需要上传的新文件，所以我们可以跳过计算文件hash的步骤，直接上传切片和切片的hash，以提高效率。
2024-12-11 15:06:11
614
原创 网页中的滚动穿透
在开发中我们可以观察到这么一种现象，当用户在屏幕上某个可滚动区域滚动时，如果滚动到当前区域滚动边界时会带动其他区域进行滚动，直观表现是在进行博客评论时，滑动textarea会带动博客一起滑动，另一种是屏幕有一个浮窗，滑动浮窗会导致浮窗之下的元素进行滚动其中一种情况，为浮窗时第二种情况，滚动区域本身未脱离文档流。
2024-10-25 18:52:45
917
原创 web worker
在很长的一段时间内，JavaScript都是一门单线程语言，所以在JavaScript中任何会导致页面阻塞的操作都是异步运行的，虽然异步能最大限度的保证用户的浏览体验，但如果在同步代码中执行时间过长的话还是会导致页面假死
2024-06-22 20:32:17
702
原创 websocket
socket，中文名称套接字，可以将其理解成一个抽象层，用于在网络上执行进程间的通信。它为应用程序提供了发送和接收数据的机制，通过ip和接口来标识网络中唯一的位置我们平时最常用的就是基于TCP的流套接字，websocket也是基于此socket最大的特点就是服务器和客户端可以任意进行通信，通信内容不限制于格式，也不限于发送和接收方，除非某一方主动断开，否则socket会一直保持连接状态。
2024-06-22 20:01:32
1244
原创 vue常见优化手段（下）
下篇主要内容为开发vue项目时的风格规范，良好的风格规范可以规避小纠结于反模式，同时提高项目的可读性和可维护性以及能带来良好的开发体验，上篇主要提及了vue项目的最佳实践，最佳实践可以帮助我们规避错误。
2024-06-21 09:39:12
621
原创 vue常见优化手段（上）
上篇主要提及开发vue.js项目中的最佳实践，最佳实践通常可以规避错误，同时大幅提高应用的性能，下篇主要提及了开发vue.js项目中的风格规范，良好的风格规范可以改善可读性和开发体验。
2024-06-21 09:38:48
789
原创 虚拟DOM的比较
将虚拟DOM渲染成DOM，这就是patch的作用在vue运行的时候会生成新旧两个虚拟DOM树，通过比较这两棵DOM树，我们就能针对性的修改真实DOM事实上，我们大可以在每次比较两棵DOM树的时候删除现有的DOM结构，然后根据新的虚拟DOM来渲染最新的DOM，但这样做的结果就是性能开销过大，所以vue并没有采取这种方式，vue会比对新旧两个vnode之间有哪些不同，然后根据对比结果找出需要更新的节点进行更新。
2024-06-20 09:03:03
1408
原创 虚拟DOM
理论上，用户的任何操作都有可能造成状态的改变，当状态改变时我们就需要重新渲染，直接操作DOM向来是简单且直接的，我们大可以将现有的DOM直接删除，然后重新根据现有状态来生成一个DOM，但是访问DOM是非常昂贵的。在Web开发的早期，因为网页的展现十分简陋，我们所维护的状态也十分的简单，我们大可以直接操作DOM来进行开发，然而随着时代的发展，我们所开发的web也变的十分复杂，维护的状态也十分的多，DOM操作也十分频繁。幸运的是，现代的主流框架，如vue，react，angular等都支持声明式操作DOM。
2024-06-20 09:02:14
708
原创 web标准与浏览器前缀
CSS1的规范发表于1996年，内容十分的少，用一个html就能完全表示，到了1998年，CSS2问世，它带来了更严谨的语法，更丰富的样式，此时的CSS已经十分复杂，靠人脑已无法完全记忆，人们意识到，此时的CSS已无法作为一个规范来发展，庞杂的内容导致人们难以修改和阅读，每个CSS属性都必须具备两个独立实现，但这几乎是不可能的。取而代之的是，这些实验性特性需要通过配置开关来启用，可以宣布的是，浏览器前缀已经彻底成为了一个失败的产物，不过我们还需要很长的时间，才能从浏览器前缀所引发的涟漪效应中解脱出来。
2024-06-19 09:35:02
1091
原创 HTML文档声明
GML是一个标记语言，通过特定的标识包裹数据，使得计算机能够识别和处理信息。在GML的基础上，SGML被开发出来，它是一种极为严格的文件描述语言SGML由语法定义、DTD以及文件实例这三个部分构成，由于SGML的规范非常严格，文档达到了500多页，因此它被认为难以学习、使用和实现，基于这些原因，人们在SGML的基础上发展出了其他更易用的标记语言。
2024-06-19 09:33:43
671
原创 针对indexedDB的简易封装
我们首先创建一个DBManager类，通过这个类new出来的对象管理一个数据库具体关于indexedDB的相关内容可以看我的这篇博客我们首先需要打开数据库，打开数据库需要数据库名和该数据库的版本在constructor中我们先初始化数据库相关信息，dbName为该对象管理的数据库的数据库名，version为该数据库的版本，db为该数据库的IDBDatabase对象现在我们开始实现openDB方法因为打开数据库涉及i/o操作，所以是异步的，所以我们需要返回一个Promise。
2024-06-18 08:26:10
1260
原创 indexedDB
indexedDB是一种现代浏览器持久化数据存储解决方案， 可以把它理解成用户浏览器端的数据库，它可以存储包括文件/二进制大型对象blobs等大量结构化数据，通过索引来实现对数据的高性能检索indexeddb内部的数据均是通过键值对的形式存储，所以不同于其他关系型数据库，不支持sql语句，indexeddb更类似于nosql数据库，通过提供的大量api来实现数据的增删改查需要注意的是，因为indexedDB中的很多api涉及i/o操作，所以是异步的。
2024-06-18 08:25:06
852
1
原创 HTML语义化
HTML语义化指的是在创建HTML页面时，使用合适的标签来准确描述内容的意义和结构在HTML页面的构建过程中，语义化扮演着至关重要的角色。它涉及到使用合适的HTML标签来准确地表达内容的意义和组织结构。这不仅仅是关于标签的选择，更是一种确保内容正确表达的实践。
2024-06-17 13:18:03
811
原创 HTML中的资源提示关键词
如果该script元素的src属性为空，则defer和async属性不生效如果该script元素的type属性为空或者为一个JavaScript MIME类型时，该script为普通脚本，普通脚本会受到defer和async的影响，但这些的前提为src属性不为空如果该script元素的type属性为module时，该script为JavaScript模块脚本，该类型脚本不受defer的影响，但会受到async的影响，与src属性无关。
2024-06-17 13:16:36
906
原创 super与this
我们可能会对一个问题感到好奇：为什么在派生类中，我们需要在调用之前调用。我们通常将其视为一种规范，却很少深入探究这个规范的真正意义。许多人认为不过是之前继承方式的语法糖。但实际上，这种看法是不准确的。要真正理解的必要性，我们必须探究中继承机制的内部工作原理。
2024-04-27 21:28:06
981
4
原创 JS手写set与map
但是Object.is有一个问题，在Object.is中+0和-0被认为是两个不同的东西，所以我们需要将Object.is再封装一层，这个封装可有可无，但set内部是针对Object.is封装了的。set是一个没有重复元素的集合，事实上我们无法完全的使用js来模拟出set的全部功能，因为浏览器原生的set底层是使用c++实现，能直接访问内存，所以我们只能实现set的一部分功能。在set中我们只需要针对constructor中传入的对象进行判断，而在map中我们需要针对对象中的各个元素进行判断是否可迭代。
2024-04-25 23:31:13
849
2
原创 js深浅拷贝
我们知道，像对象这种复杂数据类型，在定义它的时候我们所指定的变量只会存储这个对象的地址，我们通过这个地址来寻找对象并且操作它，而将这个变量赋值给其他变量时，复制的也仅仅只是地址，对象本身并没有被复制，当我们通过某一个变量去修改对象的成员时，另一个对它保持引用的变量也会同步的更新。我们定义一个deepClone函数，这个函数会传入一个值，我们并确定现在传入的是什么值，如果是一个基本类型的值我们需要直接将其返回，如果是一个复杂数据类型的值我们需要将其深度克隆之后返回一个新对象。
2024-04-25 23:29:47
1011
3
原创 JS包管理
包是一个或多个js的集合，一个工程可以是包，通俗的讲，我们在项目中所使用到的依赖就是包，依赖可以是一个完整的框架，如Vue或React，也可以是一个很小的工具库，如mockJS，jQuery，我们通常将这些由别人编写，我们使用的包叫做第三方库。显而易见的是，每个包可能都会或多或少的依赖其他第三方库，这些被依赖的第三方库可能本身也会依赖其他第三方库，如果去手动维护这些依赖关系是十分复杂的，而包管理器就能自动帮助我们维护这些依赖关系。都需要使用到的，在打包的时候都需要被囊括进去。中，包有两种安装方式，一种是。
2024-04-24 17:59:05
1057
2
原创 C语言实现循环队列
相较于使用链表实现，通过数组实现的队列容量是固定的，在容量到达上限时必须经过扩容步骤才能继续存储，另外被出列的元素也无法像链表队列里出列的元素一样被free释放。在循环队列实现之后我们的队列解决了假溢出的问题，但当队列空间真的被占满，遇到了真溢出的情况，我们想要队列自动扩容的话怎么解决呢。appendQueue函数会将指定的元素放入指定的队列中，当队列长度不足时队列会自动扩容。appendQueue函数会将指定的元素放入指定的队列中，当队列长度不足时队列会自动扩容。
2024-04-17 14:17:47
954
原创 js通过Object.defineProperty实现数据响应式
数据响应式，依赖收集，派发更新，属性描述符，get，set，Object.defineProperty
2024-04-08 00:36:44
784
4
原创 js手写Promise（上）
js手写Promise，构造器，then，onFulfilled，onRejected，resolve，reject
2024-02-08 15:14:59
1206
2
原创 数据库课程设计报告——音乐管理系统
音乐管理系统是一个完善的数据库系统。系统中一共包含了10个表，以及对应的主键与相应的外键。创建的数个存储过程、函数与触发器保障了数据库的完整性与安全性；在撰写这次大作业的过程中，我学到很多，如如何分析业务需求和数据需求，如何设计数据库表，如何确保数据库的完整性和安全性；明白了如何分析业务需求，如何更好的理解业务，如将业务转化成文字与图表与代码，最终实现业务的流程，我也明白了团队合作的重要性，很多事光凭一个人的力量很难进行下去，唯有进行团队合作，合理分工才能顺利推进；
2024-01-03 14:06:33
5050
14
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人