- 博客(224)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 5个常见的前端手写功能：浅拷贝与深拷贝、函数柯里化、数组扁平化、数组去重、手写类型判断函数
上述写法，总是要以空括号()结尾，于是再改进为隐式转换.toString写法，原理：当用 Function的值做计算的时候，会调用toString做隐式转换。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。从上面普通的递归函数中可以看出，其实就是对数组的每一项进行处理，那么其实也可以用reduce来实现数组的拼接，从而简化第一种方法的代码。思路：利用闭包和递归，如果参数为空，则判断递归结束，求和，返回结果。
2024-04-22 10:47:30
438
原创 5个常见的前端手写功能：New、call apply bind、防抖和节流、instanceof、ajax
onreadystatechange设置监听函数，当对象的readyState变为4的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是200则为成功，404或500为失败。思路：接受传入的context上下文，如果不传默认为window，将被调用的方法设置为上下文的属性，使用上下文对象来调用这个方法，删除新增属性，返回结果。如果绑定的是构造函数，还需要继承构造函数原型上的属性和方法，保证不丢失。可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
2024-04-17 15:22:29
519
1
原创 手机适配，在真机上适配正常，在pc端适配出现横向滚动条
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。
2024-04-15 11:50:12
767
原创 用零宽字符来隐藏代码
一种不可打印的Unicode字符，在浏览器等环境不可见，但是真是存在，获取字符串长度时也会占位置，表示某一种控制功能的字符。常见的零宽字符有：空格符：格式为U+null00B，用于较长字符的换行分隔；非断空格符：格式为U+FEFF，用于阻止特定位置的换行分隔；连字符：格式为U+null00D，用于阿拉伯文与印度语系等文字中，使不会发生连字的字符间产生连字效果；断字符：格式为U+200C，用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果；
2024-04-11 11:28:35
335
原创 JS面向对象——多态
重载函数是函数的一种特殊情况，为方便使用，C++允许在同一范围中声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数、类型或者顺序）必须不同，也就是说用同一个函数完成不同的功能。这就是重载函数。重载函数常用来实现功能类似而所处理的数据类型不同的问题。不能只有函数返回值类型不同。与之相似的函数重写：函数重写，也被称为覆盖，是指子类重新定义父类中有相同名称和参数的虚函数，主要在继承关系中出现。多态是同一个行为具有多个不同表现形式或形态的能力。在JAVA中，多态通过在子类中重写父类方法去实现。
2024-04-08 09:59:43
934
原创 Access to image at from origin has been blocked by CORS policy: No ‘Access-Control-Allow-Origin 此图片来
最近，在平台上发现很多图片无法展示，显示此图片来自微信公众平台，未经允许不可引用，分析原因后，发现是在发布文章时，富文本编辑器get图片，有跨域问题。在网上搜了很多方案，例如img.setAttribute(‘crossOrigin’, ‘anonymous’)，发现无效，于是想到代理服务器。思路：传递图片地址过去 让后端给转成buffer返回给前端，前端再上传二进制图片，到oss，获得链接。传过去图片地址，前端根据后端返回的blob，上传图片，最终完美解决。在前端富文本中进行配置。新建一个node项目。
2024-03-27 15:22:51
198
原创 如何在服务器上传/下载文件
打开xshell，输入：ssh [email protected]。如果提示需要yes，直接enter，最后会让输入密码。如果文件是放在E盘，在E盘cmd。
2024-03-27 10:14:00
384
原创 前端部署到服务器，使用xshell和xftp
最近在做一个项目的时候，需要搭建测试环境，所以记录一下部署过程，备忘。前台项目用到的是nuxt2，后台管理系统用的是vue2，后端用的是egg。因为我们的后端已经在服务器上设置Nginx了，所以我们只需要简单的上传文件既可。
2024-03-26 10:37:00
1210
原创 用xshell7连接服务器，读取后台日志
有时候前端需要读取一些后台日志，比如，有时候接一些验证码啥的或者有时候前后端不分离时，前端上线项目先讲一下怎么用密码方式连接服务器。
2024-03-07 09:56:09
724
原创 实现粘性布局position:sticky
对于粘性定位这个概念，很多人都没有注意到，所以写这篇文章总结一下。粘性定位它基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？
2024-03-07 09:54:14
1019
原创 Aliplayer is not defined
阿里云视频播放器 报错：Aliplayer is not defined最近发现一个如果在当前页面打开，用了阿里云视频播放器的页面，就会报上面的错。
2024-03-07 09:49:37
424
原创 WebSocket实现聊天
基于webSocket通信的库主要有 socket.io，SockJS，这次用的是 SockJS。这里我们使用sockjs-client、stomjs这两个模块，要实现webSocket通信，需要后台配合，也使用相应的模块。
2024-02-21 15:03:39
1315
原创 强缓存与协商缓存、缓存失效的问题、缓存nginx配置、缓存存在哪里
前端缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。今天我们来总结一下。分类：前端缓存分为强缓存和协商缓存两种。
2024-01-24 09:57:02
838
原创 vuex在页面刷新后数据丢失
我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。之前，这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢，而且效率不高。区别在于存储的有效期和作用域不同。
2024-01-23 11:30:58
429
原创 JavaScript中的错误处理：throw、try 和 catch、finally 语句
throw 语句抛出一个错误。当错误发生时， JS 会停止执行并抛出错误信息。throw 语句创建自定义错误。技术术语是： 抛出异常。// 抛出文本throw 500;// 抛出数字如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。try {
2024-01-23 11:20:01
411
原创 font-display的使用：控制字体加载和替换
在介绍 font-display 之前，先了解一下什么是 Web Fonts。在以前使用 CSS 指定字体时只能使用用户电脑本地上现有的字体，而由于每个用户电脑上的字体可能都不一样，所以能用的基本上就是操作系统内置的一些字体，例如微软雅黑，宋体，苹果苹方，这些也叫做安全字体（Web Safe Fonts）。* {后来，CSS 开始支持 @font-face 这个指令，可以加载自定义的字体文件，这个时候可以把字体随网站一起发布，用户在浏览网站的时候，会下载 @font-face 中指定的字体。
2024-01-16 17:05:06
609
原创 CSS中用border画三角形等图形
最近在做一个官网项目的时候，UI小姐姐设计了一些特殊图形，例如三角形，虽然element-ui是带有相应模板的，但是设计的和模版的不一样，因此研究了一下。三角形实际上是border的产物 我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色 那么你就会发现，三角来了。当然我们要的三角通常不是这样的，现在，我们只要让border-color和border-width搭配，就可以变换各种三角。至于正三角、不规则三角等，只要知道它的原理，都是可以画出来的。我们看到了三角，却拿不到三角？
2024-01-11 11:13:58
523
原创 router全局守卫beforeEach导致infinite redirect in navigation guard 问题
其实这算是 vue-router 的一个机制了，当我们在router.push( {‘name’ : ‘login’} ) 时又重新进入了我们当前的这个router-beforeEach事件里，此时又进行了token的判断，还是没有token，导致又走到了router.push({name:‘login’}) 里，然后就是一直死循环。所以在判断之前，加了下面判断next();return。
2023-12-19 17:54:41
1348
原创 a标签下载文件重命名失败download 无效
download可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，文件名不变。但是需要注意的是此方法只适用于小文件，对于大文件来说耗时太久，不适用。因为它相当于先把文件下载下来了，所以需要比较长时间，但是这段时间的等待，对于用户交互来说，那是很不友好的。，即可直接下载，而且对于一些txt、img、mp4等浏览器直接渲染的类型，也可以实现下载，而不是直接打开。
2023-12-18 09:52:41
1012
原创 用egg搭建后端管理服务端
在 package.json 的 script 里面添加把数据库生成 model 的命令（ -o 表示生成 models 的路径，-h 表示主机，-p 表示端口，-d 表示数据库， -u 表示用户名，-x 表示密码）此时 sequelize-cli 和相关的配置也都初始化好了，我们可以开始编写项目的第一个 Migration 文件来创建我们的一个 users 表了。执行之后，我们的数据库初始化就完成了。执行 migrate 进行数据库变更。
2023-12-12 14:17:03
542
原创 为什么Vue3的proxy需要Reflect呢
Proxy 和 Reflect 是相辅相成的，通过结合使用它们可以实现更灵活和强大的代理功能，并且使用 Reflect 可以更好地管理和执行底层操作。
2023-12-11 19:14:21
523
原创 实现chatgpt聊天机器人打字机效果
思路：markdown-it和highlight是为了解决打字机过程中，写代码时，没有高亮效果的，同时还解决了，在打字过程中，滚动条没有随内容而自动滚动的问题。
2023-12-01 09:59:35
579
原创 el-select多选multiple数据无法删除，回显成功，但无法编辑，选中和删除都没反应
回显的数据是从后台接口得来，由于数据层次太多，导致render函数没有自动更新；使用 @change = “$forceUpdate()” 强制刷新视图。
2023-11-29 14:17:43
1177
2
原创 Egg.js的方法扩展
之前通过上下文来获取传递参数时，get方法请求和post方法请求的获取方式是不同的，我们编写的方法可以让这两个请求获取参数的方法统一化,都用params( )方法。按照Egg的约定，扩展的文件夹和文件的名字必须是固定的。Egg.js 对 Request 的扩展也需要在/app/extend文件夹下，新建一个request.js文件，然后在这个文件里写扩展属性。和上一个是差不多的, 需要设置的方法以set关键字开头，然后用this.set( )就可以设置返回的token了。eggjs的方法的扩展和编写。
2023-11-29 09:40:46
973
原创 Egg.js中Cookie和Session
HTTP请求是无状态的，但是在开发时，有些情况是需要知道请求的人是谁的。ctx.cookies.set( ) 方法是有三个参数的，第一个参数是key，第二个参数是value，第三个参数就可以进行配置。比如通过JS的方式document.cookie获取Cookie是不能获取的(需要在浏览器的控制台输入获取)。直接通过ctx.cookies.get( )方法获取，获取的是undefind，也就是无法获取的。Egg是对Koa的二次封装，所以中间件这部分和Koa框架是一样的，也追寻洋葱圈模型。
2023-11-28 11:39:30
589
原创 Egg.js 中 Service 的使用
打开/app/controller/home.js文件下，新建一个testGetGirl( )方法，然后新增好路由，这样id即可被数据库得到。配置静态资源：/app/public目录下，可以直接访问，不需配置路由，直接显示文件内容，因为Egg使用了egg-static插件。Service是用来编写和数据库直接交互的业务逻辑代码。简单来说，就是把业务逻辑代码进一步细化和分类，所以和数据库交互的代码都放到Service中。只要是和数据库的交互操作，都写在Service里，用了Egg框架，就要遵守它的约定。
2023-11-13 14:12:23
171
原创 Egg.js 中 Controller 的使用
什么是mvc，这个概念，我相信绝大部分人肯定是了解的。MVC是模型（model）- 视图（view）- 控制器（controller）的缩写。视图为用户展示数据控制器用来处理用户输入模型用户数据处理ps:这一整套流程实际上是一个闭环，你可以这么去理解，就是用户输入给控制器，然后控制器将用户输入的指令和数据传递给业务组件，业务组件进行业务逻辑判断，数据库存取，将要展示的数据返回到视图，用户得到了反馈，在进行下一步的操作。restful风格的url可以简化路由文件。
2023-10-30 10:15:39
207
原创 3分钟了解 egg.js
npm i // 安装依赖app/router.js 用于配置 URL 路由规则，具体参见 Router。app/controller/** 用于解析用户的输入，处理后返回相应的结果，具体参见 Controller。app/service/** 用于编写业务逻辑层，可选，建议使用，具体参见 Service。app/middleware/** 用于编写中间件，可选，具体参见 Middleware。app/public/** 用于放置静态资源，可选，具体参见内置插件 egg-static。
2023-10-17 16:35:48
906
原创 如何使用jest
"moduleFileExtensions": [ //不需要配置"js","json",// 告诉 Jest 处理 `*.vue` 文件"vue"],testMatch: [ //test文件所在位置],"transform": { //不需要配置// 用 `vue-jest` 处理 `*.vue` 文件// 用 `babel-jest` 处理 js},"moduleNameMapper": { //不需要配置},
2023-10-09 17:11:07
141
原创 浅析前端单元测试
为检测特定的目标是否符合标准而采用专用的工具或者方法进行验证，并最终得出特定的结果。对于前端开发过程来说，这里的特定目标就是指我们写的代码，通过写的测试用例检查的结果展示测试是否通过或者给出测试报告，这样才能方便问题的排查和后期的修正对于给定的输入，单元测试检查结果。通过及早发现问题并避免 bug 回归，它可以帮助我们确保代码的各个部分按预期工作。前端可以写单元测试吗？答案是前端可以写单元测试，但是意义不大。前端项目中如果有一些基础类、方法，可以编写测试。但是组件、视图不太需要，性价比太低。
2023-10-07 18:20:30
631
1
原创 随机留言的实现
随机获取一个0-1之间的小数, 然后乘以自身长度, 一定是一个大于等于0 小于自身长度的一个数. 如上面 长度为10， 则获取的一个随机数就为0-10之间的一个数[数组的下标].Math.random()返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。Math.floor方法返回小于参数值的最大整数（地板值）对于一个给定的数组，如何随机获得它的元素。最后根据下标获取数组元素值即可。
2023-09-19 16:52:08
95
原创 uniapp 使用subNVue原生子窗体显示弹框或悬浮框
subNVue原生子窗体是uniapp提供的一种原生组件，可以在uniapp中嵌入原生页面，并且可以与uniapp页面进行通信。我们可以在原生页面中使用uniapp提供的API来与uniapp页面进行通信，从而实现弹框等功能。在uniapp中，我们可以使用subNVue原生子窗体来解决web-view等原生页面中弹框无法显示的问题。在页面目录下新建专门存放原生子窗体的文件夹，subNVue是使用原生子窗体的vue页面。效果如图，显示在右下角的专属福利弹窗，不挂载在当前页面，挂载在全局。
2023-09-18 17:05:18
2466
原创 setInterval倒计时切换页面后不准
比如，setInterval指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。但是由于浏览器的优化机制，为了更极致的优化，在切换tab之后浏览器会把setInterval的执行效率降低，在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。最近在做一个倒计时时，发现当切换浏览器tab后，再切回倒计时页面，倒计时的数据不准，比真正的剩余时间多，短时间还好，时间长了，计时器的误差会很大。也就是每次计时的误差，理想情况下，应该是0。也是一样的会出现误差。
2023-09-15 14:51:18
780
原创 uniapp中video播放视频上按钮没显示的问题
video标签层级很高，尝试了添加z-index，但无效果通过查阅资料，得知cover-view层级比video层级高。
2023-09-14 15:51:18
1127
原创 雪花算法生成的ID到前端后精度丢失
最近将id改为雪花算法方式生成，后端使用雪花算法生成id，在返回给前端的时候没有问题，但是在前端使用id反查数据的时候始终查询不到数据。经过数据跟踪最终定位到是浏览器的问题，因为浏览器无法解析太长的数字，最终导致id精度丢失。在浏览器的console中验证，可以看到最后几位发生了变化。例如生成的id是1594605819398193154而前端展示的为1594605819398193200这是因为JS是弱语言，前端接收数字类型参数为number最大接收长度为16位，超出长度则会丢失精度而JAVA的Long类
2023-09-01 09:50:14
686
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人