JavaScript
关注
分享
扫一扫
文章平均质量分 84
JavaScript相关
漂流瓶jz
Web前端开发，华东师范大学计算机硕士
展开
-
谈一谈前端构建工具的本地代理配置（Webpack与Vite）
使用代理之后，在浏览器中，前端访问还是原来的非跨域的接口，但实际请求后端的url可能早就被改的面目全非了。原创 2025-01-20 23:59:14 · 1561 阅读 · 0 评论 -
如何使用React，透传各类组件能力/属性？
函数式组件与类式组件在Props和事件透传的方式基本一致，但是ref透传的区别较大。直接对比的话，好像类式组件的透传能力更强一些，但是它把组件内部所有内容全暴露在外，违反了封装的原则，子组件内部的改动很容易影响父组件，不是一个好的设计。在React19版本中，ref属性也变成了prop，仅通过透传Props，就能实现透传组件大部分能力了。原创 2024-12-26 23:16:50 · 1136 阅读 · 1 评论 -
JavaScript中的this, 究竟指向什么？
文章深入探讨了 JavaScript 中 this 的指向问题，涵盖了多种场景，如全局上下文、模块上下文、普通函数上下文、构造函数上下文、对象或实例属性的函数上下文、类的相关上下文、继承场景、call/apply/bind 方法、原始值原型函数属性上下文、回调函数上下文、箭头函数、eval 函数、事件处理器等，并对严格模式下 this 的处理做了总结，还讨论了特殊或组合场景。原创 2024-12-11 22:23:59 · 772 阅读 · 0 评论 -
使用天地图与Leaflet，轻松创建免费地图应用
天地图又叫做地理信息公共服务平台，是提供给公众免费使用的地理信息平台，提供了多种形式的地图开发资源，使用天地图，可以构建免费的地图应用。Leaflet是一个开源的Javascript地图库，我们使用它来进行地图的展示和交互。原创 2024-09-14 23:33:15 · 2840 阅读 · 0 评论 -
Vue中的事件总线(EventBus)是什么？它有什么优点和缺点？
事件总线是一种组件通信方式，用于在工程的中的任意组件中进行事件触发和数据传递。通过在全局创建一个事件总线，所有组件（无论他们的关系是父子还是兄弟还是不相关）都可以使用同一个总线发送事件和监听事件，传输数据。这样通信就可以不受组件间关系限制，实现灵活的通信能力。事件总线作为一种全局的组件通信方法，符合订阅发布模式，由于其简单有效的使用方式，受到部分开发者的欢迎。但是由于各种使用不慎和维护带来的问题，官方和许多开发者也不推荐使用：在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。原创 2024-03-01 22:11:58 · 2490 阅读 · 0 评论 -
带你搞懂JavaScript中的原型和原型链
原型和原型链是JavaScript中与对象有关的重要概念，但是部分前端开发者却不太理解，也不清楚原型链有什么用处。原创 2023-12-10 19:40:06 · 977 阅读 · 0 评论 -
如何二次封装一个Vue3组件库？
在封装vue组件库时一些基础的工程化方法。了解这些就可以开发基础的二次封装组件库了。原创 2023-12-03 17:48:34 · 1816 阅读 · 0 评论 -
简单理解Vue2的响应式原理
使用Vue作为前端开发技术栈的同学，在使用Vue时都会有一些好奇：为啥我们的响应式变量要在data中定义？Vue是如何监听到变化，实现响应式的？这次我们就来探究一下，Vue2的响应式原理。原创 2023-11-12 15:52:42 · 580 阅读 · 0 评论 -
超详细！手把手带你实现一个完整的Promise
本文首先介绍了JavaScript中异步编程的几种方式，再对Promise进行了简单介绍。然后从创建类开始，一步一步实现一个完整的Promise。我们实现的Promise不仅可以通过Promises/A+规范测试，并且提供了与ECMAScript同样的实用函数。原创 2023-10-04 15:25:30 · 1375 阅读 · 0 评论 -
谈一谈浏览器与Node.js中的JavaScript事件循环，宏任务与微任务机制
JavaScript是一个单线程非阻塞的脚本语言。这代表代码是执行在一个主线程上面的。但是JavaScript中有很多耗时的异步操作，例如AJAX，setTimeout等等；也有很多事件，例如用户触发的点击事件，鼠标事件等等。这些异步操作并不会阻塞我们代码的执行。可以看到，上述代码在浏览器中执行时，遇到setTimeout操作，并没有阻塞等待异步操作的结束再继续执行代码，而是先继续执行后面的代码。等异步操作结束后，浏览器再回来执行异步回调中的代码。原创 2023-08-21 15:29:08 · 1421 阅读 · 0 评论 -
浏览器中Cookie的全面介绍
在Web前端开发时，我们经常会遇到一些浏览器存储相关的工具，例如Cookie。Cookie的英文本意是曲奇，但是在Web中，它被用作浏览器中存储的数据。Cookie都是name=value的结构，name和value都为字符串。原创 2023-07-16 19:04:29 · 2263 阅读 · 1 评论 -
使用VitePress和Github搭建个人博客网站，可以自动构建和发布
使用VitePress和Github搭建个人博客网站，可以自动构建和发布原创 2023-05-21 20:34:25 · 1083 阅读 · 1 评论 -
使用Vite虚拟模块功能重写多语言和多皮肤插件
虚拟模块实际上是Vite背后的打包器Rollup的功能。通过虚拟模块，我们可以传入一些编译时信息。通过虚拟模块，我开发了两个vite插件，集成了多语言多皮肤文件等资源的快速导入。原创 2023-04-21 16:00:07 · 1047 阅读 · 0 评论 -
如何编写一个自己的web前端脚手架
脚手架是创建前端项目的命令行工具，集成了常用的功能和配置，方便我们快速搭建项目，目前网络上也有很多可供选择的脚手架。今天就来聊一下如何编写一个脚手架。原创 2023-04-03 15:44:34 · 2314 阅读 · 0 评论 -
使用vite和vue-i18n，实现部署后更新多语言功能
vue-i18n是Vue.js的国际化插件，用于实现多语言功能。但是vue-i18n文档中提供的示例用法仅仅是开发时才可以添加/修改多语言。如果希望在打包部署后实现多语言的修改甚至增加语言，不需要修改源码或者重新打包，类似于我们常见的多语言包扩展，又该如何实现呢？原创 2022-12-05 15:14:15 · 1988 阅读 · 0 评论 -
web前端自动生成动态面包屑导航的方法，以vue为例
面包屑（Breadcrumb）是网页中一个常见的模块，用于显示用户在网站中当前的所处的位置，并且可以向上导航。如果可以自动生成面包屑，就能够减轻很多重复性工作，也方便代码维护。原创 2022-07-21 23:55:45 · 7953 阅读 · 3 评论 -
使用 Canvas 手画不规则多边形，并限制相交线和凹多边形
简介使用 Canvas 实现的手画不规则多边形功能。通过鼠标在画面上点击的点作为多边形的顶点，连线形成多边形。除了手画之外，还加入了随机生成和回显，检测多边形横穿，凹凸性的检测。注意：两个点如果靠太近会被认为是同一个点而忽略。闭合区域需要点击图形中的第一个点，或者点击“闭合图形”按钮。两个 Canvas 图层由于要实现线条跟随鼠标运动功能，而且 Canvas 的图形无法清除单个绘制命令，因此我用 CSS 的绝对定位，在同一个区域叠加了两个 Canvas 对象。一个在下面，表示已经绘制结束的图形，叫做原创 2022-03-07 19:22:12 · 4689 阅读 · 7 评论 -
Vue和VuePress支持显示LaTeX公式方法
在VuePress中撰写文章时，为了解释说明，有时候需要显示公式。而LaTeX是公式编辑最常用的格式。那么如何在VuePress中显示由LaTeX撰写的公式呢？方法很简单。（如果VuePress支持显示，那么Vue中使用同样方法肯定也支持显示）方法安装katexyarn add -D katex# 或者npm i -D katexVuePress中新建一个component我的创建位置是 components/common/latexDisplay.vue。编写代码：<te原创 2022-02-22 15:28:52 · 1742 阅读 · 0 评论 -
Base64编码详解与URL安全的Base64编码
Base64的基本编码方式base64编码是一种常见的编码方式，主要用于对8bit的字节进行编码。具体的编码方式是：把三个字节作为一组，转化为二进制的形式，一共3*8=24个二进制位。 例如： abc 三个字符用ASCII编码，转换为二进制： 01100001 01100010 01100011 把24个二进制数字每6个一组，分为4组： 01100001 01100010 01100011 被分为 011000 010110 001001 100011 按照表格，把每组二进制串转为对应字原创 2021-07-23 18:14:47 · 8991 阅读 · 0 评论 -
cookie，sessionStorage，localStorage与浏览器新开窗口window.open的关系
window.open是用JavaScript打开一个新的浏览器的窗口的函数，而cookie，sessionStorage，localStorage是三种常用的浏览器存储数据的方式，在开发时经常会用到。这里不谈cookie，sessionStorage，localStorage三种的联系和区别，只看一下三种在window.open打开窗口时发生的现象。1. 第一次window.open全部传输成功首先，我们手动打开第一个窗口，访问本地服务器，例如http://127.0.0.1:7001/。并赋值三原创 2021-03-08 20:18:25 · 5607 阅读 · 0 评论 -
JavaScript中fetch的最简单实现示例，最简单的跨域请求方式
fetch和XMLHttpRequest非常相似，都是在不需要重新加载整个网页的情况下，实现从后端获取数据，更新网页内容。但是fetch更新（部分旧浏览器不支持），调用方式也更简单。直接上例子：<html> <body> <div> receive <span id="qwerty"> </span> </div> </body> <script> f原创 2021-02-24 16:55:07 · 4039 阅读 · 0 评论 -
JSONP的最简单实现，前端跨域请求的方式
JSONP不是一门语言，也并不是什么特别开发的技术，它更像是一个BUG，一个开发者找出来可以用来作为跨域传输数据的”漏洞”。虽然名字中带的是JSON，但其实严格来说，传输的javascript代码，只不过代码内容基本都是json而已。JSONP的原理非常简单，就是HTML标签中，很多带src属性的标签都可以跨域请求内容，比如我们熟悉的img图片标签。同理，script标签也可以，可以利用script标签来执行跨域的javascript代码。通过这些代码，我们就能实现前端跨域请求数据。最关键的方法是这原创 2021-02-05 14:58:07 · 879 阅读 · 0 评论 -
AJAX技术示例，Web前端后端实现
AJAX的全称是Asynchronous JavaScript and XML，是一种利用Javascript在web前端请求后端数据的技术。我是2020年才开始接触的前端开发，目前基本在使用框架，平时并不会直接写AJAX。但是我觉得作为一个前端开发者，了解 AJAX是必要的，因此学了一下。学习AJAX可以看W3School的教程：https://www.w3school.com.cn/ajax/index.asp下面是AJAX的实现，后端采用的Egg.js。首先是前端代码 index.原创 2021-02-04 16:57:48 · 491 阅读 · 0 评论 -
Oauth第三方登录GitLab实现，用Egg.js做后端
Oauth是一种实现第三方登录的功能，目前在互联网上非常流行，很多大型网站都会提供第三方登陆的功能。由于个人接入Oauth第三方登陆的方式非常简单，因此我们今天就来实践一下。1.Oauth前置知识Oauth的原理我看的是阮一峰的博客。这几篇博客讲的通俗易懂：OAuth 2.0 的一个简单解释http://www.ruanyifeng.com/blog/2019/04/oauth_design.htmlOAuth 2.0 的四种方式http://www.ruanyifeng.c原创 2021-01-14 20:38:16 · 917 阅读 · 0 评论 -
正则表达式应用“如何判断字符串中不包含连续重复的数字或者字母”？
正则表达式是用来查找、判断、替换字符串的一类工具。是很有意思的内容。很多编程语言都支持正则表达式，而且使用形式都大同小异。1.前置知识：如何学习正则这篇文章的内容需要有正则表达式的知识，如果没学过正则表达式的同学，可以看一下这个教程，我觉得写的很好：《正则表达式30分钟入门教程》https://deerchao.cn/tutorials/regex/regex.htm正则表达式用来测试也非常简单，直接打开浏览器的console界面，用Javascript测试即可：用Javascr原创 2020-12-24 16:20:59 · 13111 阅读 · 6 评论 -
用Node.js和Redis实现简单消息队列，Node学习指南第二版第10章示例代码改写
Node学习指南第二版第10章Redis部分实现了一个很简单的消息队列，但是由于这部分代码只适用于Linux，而且我这里也没服务器的日志可供测试，于是改写成适合Windows，且简化了部分内容。先上代码// step1.jsvar spawn = require('child_process').spawn;var net = require('net');var client = new net.Socket();client.setEncoding('utf8');client.原创 2020-09-23 22:24:04 · 555 阅读 · 0 评论 -
Node.js学习指南第二版第8章child_process子进程Windows版本命令示例
Node.js学习指南第二版第8章讲的是child_process，用来创建子进程执行操作系统Shell命令的。书中的代码示例只给了UNIX版本的代码，在Linux和OSX系统上可以使用，但是在Windows系统上无法工作。这对于使用Windows系统学习Node的同学非常不友好。其实两个命令主要的不同基本只有shell命令的区别。因此我把书中大部分例子转换为了Windows版本的代码，方便使用Windows学习的同学。8.1节 P157-158 代码var spawn = requ.原创 2020-09-19 19:06:29 · 1217 阅读 · 0 评论 -
Node中QueryString库的使用注意事项
querystring是在node..js中流行的字符串格式化和解析库，解析的格式与HTTP中GET请求的格式相同。请求格式例子：https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1其中ie=utf-8&f=8&rsv_bp=1 部分就是querystring使用的格式。这里不讲querystring的使用语法，想了解的同学可以去看Node.js的文档http://nodejs.cn/api/querystrin.原创 2020-09-16 20:22:16 · 875 阅读 · 0 评论 -
书评《ES6标准入门》阮一峰
前段时间读完了这本书，算是作为ECMAscript的入门。我读的是这本书的官方开源版本（正版哦）。开源地址：https://es6.ruanyifeng.com/书的全部内容就像介绍ES6的使用手册或文档，按照主题介绍语法细节，然后附带一两个简单代码示例。没有任何的实战项目示例，代码长度都很短。只为讲述单个例子。不同章节内容除非在语法上有联系(比如Promise-Generator-async)，否则不同的章节内容基本不相关。阅读这本书要求有ES5的基础，书中默认读者已经掌握了ES5的大原创 2020-09-14 22:15:48 · 407 阅读 · 0 评论 -
node.js htttp文件服务器 遇到目录时搜索目录内默认html页面 廖雪峰javascript教程node.js中http部分练习题
廖雪峰javascript教程node.js中http部分最后的练习题：https://www.liaoxuefeng.com/wiki/1022910821149312/1023025830950720在浏览器输入http://localhost:8080/时，会返回404，原因是程序识别出HTTP请求的不是文件，而是目录。请修改file_server.js，如果遇到请求的路径是目录，则自动在目录下依次搜索index.html、default.html，如果找到了，就返回HTML文件的内容。如原创 2020-06-12 01:04:55 · 337 阅读 · 0 评论 -
JavaScript 中 Promise对象 的部分使用特点
回调函数和异步编程是JavaScript的特点之一，但是JavaScript中传统的回调函数编写太麻烦，如果嵌套的回调函数层级过多，容易产生“回调地狱”的现象，代码变得非常难看。因此Promise在ES6被引入用来解决这个问题。Promise的基本方法const promise1 = new Promise((resolve, reject) => { // some thing if(/* some */) resolve(/* some */) else re原创 2020-08-13 15:40:43 · 284 阅读 · 0 评论