![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
文章平均质量分 81
Web前端知识
漂流瓶jz
Web前端开发,华东师范大学计算机硕士
展开
-
Vue中的事件总线(EventBus)是什么?它有什么优点和缺点?
事件总线是一种组件通信方式,用于在工程的中的任意组件中进行事件触发和数据传递。通过在全局创建一个事件总线,所有组件(无论他们的关系是父子还是兄弟还是不相关)都可以使用同一个总线发送事件和监听事件,传输数据。这样通信就可以不受组件间关系限制,实现灵活的通信能力。事件总线作为一种全局的组件通信方法,符合订阅发布模式,由于其简单有效的使用方式,受到部分开发者的欢迎。但是由于各种使用不慎和维护带来的问题,官方和许多开发者也不推荐使用:在绝大多数情况下,不鼓励使用全局的事件总线在组件之间进行通信。原创 2024-03-01 22:11:58 · 1816 阅读 · 0 评论 -
带你搞懂JavaScript中的原型和原型链
原型和原型链是JavaScript中与对象有关的重要概念,但是部分前端开发者却不太理解,也不清楚原型链有什么用处。原创 2023-12-10 19:40:06 · 896 阅读 · 0 评论 -
如何二次封装一个Vue3组件库?
在封装vue组件库时一些基础的工程化方法。了解这些就可以开发基础的二次封装组件库了。原创 2023-12-03 17:48:34 · 1549 阅读 · 0 评论 -
简单理解Vue2的响应式原理
使用Vue作为前端开发技术栈的同学,在使用Vue时都会有一些好奇:为啥我们的响应式变量要在data中定义?Vue是如何监听到变化,实现响应式的?这次我们就来探究一下,Vue2的响应式原理。原创 2023-11-12 15:52:42 · 444 阅读 · 0 评论 -
圣杯布局/双飞翼布局/flex/grid等,实现CSS三栏自适应布局的几种方法
我们介绍几种实现自适应三栏布局的几种方法,包括使用flex,grid等方法实现,以及经典的圣杯布局/双飞翼布局等。这些布局的实现源码我放到了Github上面进行了开源原创 2023-11-05 23:45:24 · 397 阅读 · 0 评论 -
超详细!手把手带你实现一个完整的Promise
本文首先介绍了JavaScript中异步编程的几种方式,再对Promise进行了简单介绍。然后从创建类开始,一步一步实现一个完整的Promise。我们实现的Promise不仅可以通过Promises/A+规范测试,并且提供了与ECMAScript同样的实用函数。原创 2023-10-04 15:25:30 · 659 阅读 · 0 评论 -
谈一谈浏览器与Node.js中的JavaScript事件循环,宏任务与微任务机制
JavaScript是一个单线程非阻塞的脚本语言。这代表代码是执行在一个主线程上面的。但是JavaScript中有很多耗时的异步操作,例如AJAX,setTimeout等等;也有很多事件,例如用户触发的点击事件,鼠标事件等等。这些异步操作并不会阻塞我们代码的执行。可以看到,上述代码在浏览器中执行时,遇到setTimeout操作,并没有阻塞等待异步操作的结束再继续执行代码,而是先继续执行后面的代码。等异步操作结束后,浏览器再回来执行异步回调中的代码。原创 2023-08-21 15:29:08 · 1342 阅读 · 0 评论 -
浏览器中Cookie的全面介绍
在Web前端开发时,我们经常会遇到一些浏览器存储相关的工具,例如Cookie。Cookie的英文本意是曲奇,但是在Web中,它被用作浏览器中存储的数据。Cookie都是name=value的结构,name和value都为字符串。原创 2023-07-16 19:04:29 · 1855 阅读 · 1 评论 -
什么情形下应该使用BFF?带你了解BFF的优势,即服务于前端的后端
BFF是一种Web架构,全名为Backends For Frontends,即为服务于前端的后端。。BFF一般指的是在前端与后端之间加增加一个中间层。为什么要在前端和后端之间增加一个BFF层呢?原创 2023-06-04 05:05:25 · 2319 阅读 · 0 评论 -
使用VitePress和Github搭建个人博客网站,可以自动构建和发布
使用VitePress和Github搭建个人博客网站,可以自动构建和发布原创 2023-05-21 20:34:25 · 886 阅读 · 1 评论 -
使用Vite虚拟模块功能重写多语言和多皮肤插件
虚拟模块实际上是Vite背后的打包器Rollup的功能。通过虚拟模块,我们可以传入一些编译时信息。通过虚拟模块,我开发了两个vite插件,集成了多语言多皮肤文件等资源的快速导入。原创 2023-04-21 16:00:07 · 884 阅读 · 0 评论 -
如何编写一个自己的web前端脚手架
脚手架是创建前端项目的命令行工具,集成了常用的功能和配置,方便我们快速搭建项目,目前网络上也有很多可供选择的脚手架。今天就来聊一下如何编写一个脚手架。原创 2023-04-03 15:44:34 · 2146 阅读 · 0 评论 -
使用vite和Element Plus,实现部署后不修改代码/打包,新增主题/皮肤包
Web前端界面切换主题/皮肤,是一个常见的需求。如果希望在打包部署后实现皮肤的修改甚至增加皮肤,不需要修改源码或者重新打包,类似于我们常见的皮肤包扩展,又该如何实现呢?我使用类似上一期多语言包功能中介绍的方法来实现。这个方法对Vue2和Vue3都适用,甚至可以适用于非Vue的前端框架。原创 2022-12-16 16:13:20 · 1300 阅读 · 0 评论 -
使用vite和vue-i18n,实现部署后更新多语言功能
vue-i18n是Vue.js的国际化插件,用于实现多语言功能。但是vue-i18n文档中提供的示例用法仅仅是开发时才可以添加/修改多语言。如果希望在打包部署后实现多语言的修改甚至增加语言,不需要修改源码或者重新打包,类似于我们常见的多语言包扩展,又该如何实现呢?原创 2022-12-05 15:14:15 · 1520 阅读 · 0 评论 -
web前端自动生成动态面包屑导航的方法,以vue为例
面包屑(Breadcrumb)是网页中一个常见的模块,用于显示用户在网站中当前的所处的位置,并且可以向上导航。如果可以自动生成面包屑,就能够减轻很多重复性工作,也方便代码维护。原创 2022-07-21 23:55:45 · 7231 阅读 · 3 评论 -
GitLab持续集成部署CI/CD初探:如何自动构建和发布个人前端博客
持续集成,持续部署简写为CI/CD,指的是代码频繁提交,且自动部署到生产环境。原创 2022-03-22 19:45:07 · 2017 阅读 · 0 评论 -
使用 Canvas 手画不规则多边形,并限制相交线和凹多边形
简介使用 Canvas 实现的手画不规则多边形功能。通过鼠标在画面上点击的点作为多边形的顶点,连线形成多边形。除了手画之外,还加入了随机生成和回显,检测多边形横穿,凹凸性的检测。注意:两个点如果靠太近会被认为是同一个点而忽略。闭合区域需要点击图形中的第一个点,或者点击“闭合图形”按钮。两个 Canvas 图层由于要实现线条跟随鼠标运动功能,而且 Canvas 的图形无法清除单个绘制命令,因此我用 CSS 的绝对定位,在同一个区域叠加了两个 Canvas 对象。一个在下面,表示已经绘制结束的图形,叫做原创 2022-03-07 19:22:12 · 4211 阅读 · 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 · 1446 阅读 · 0 评论 -
Web前端如何启动本地可执行文件
如果在用户本地电脑上有个exe可执行文件,不能修改这个可执行文件本身,想在浏览器中通过点击按钮,调用这个exe文件,Web前端可以做到么?原创 2022-01-25 19:56:30 · 2843 阅读 · 2 评论 -
书评《HTTP权威指南》
书评《HTTP权威指南》一本很老很老的书,对HTTP有个较为全面的介绍,看了之后好像懂了很多东西,但其实啥都没懂的书。1. 时间久远我读的书是中文版,出版时间是2012年9月。这对于发展迅速的web前端来说,已经有些过时了。但其实书仅仅是中文翻译版本出版的晚,英文本实际上是2002年出版的,距离现在接近20年了。互联网发生了翻天覆地的变化,书中的很多内容都过时了。但是,虽然互联网变化很大,但是协议并没有。尤其是书中介绍的HTTP1.1协议,目前依然是互联网上最常用的HTTP协议版本,原创 2021-08-02 19:56:38 · 319 阅读 · 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 · 7628 阅读 · 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 · 4930 阅读 · 0 评论 -
JavaScript中fetch的最简单实现示例,最简单的跨域请求方式
fetch和XMLHttpRequest非常相似,都是在不需要重新加载整个网页的情况下,实现从后端获取数据,更新网页内容。但是fetch更新(部分旧浏览器不支持),调用方式也更简单。直接上例子:<html> <body> <div> receive <span id="qwerty"> </span> </div> </body> <script> f原创 2021-02-24 16:55:07 · 3236 阅读 · 0 评论 -
JSONP的最简单实现,前端跨域请求的方式
JSONP不是一门语言,也并不是什么特别开发的技术,它更像是一个BUG,一个开发者找出来可以用来作为跨域传输数据的”漏洞”。虽然名字中带的是JSON,但其实严格来说,传输的javascript代码,只不过代码内容基本都是json而已。JSONP的原理非常简单,就是HTML标签中,很多带src属性的标签都可以跨域请求内容,比如我们熟悉的img图片标签。同理,script标签也可以,可以利用script标签来执行跨域的javascript代码。通过这些代码,我们就能实现前端跨域请求数据。最关键的方法是这原创 2021-02-05 14:58:07 · 820 阅读 · 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 · 433 阅读 · 0 评论 -
正则表达式应用“如何判断字符串中不包含连续重复的数字或者字母”?
正则表达式是用来查找、判断、替换字符串的一类工具。是很有意思的内容。很多编程语言都支持正则表达式,而且使用形式都大同小异。1.前置知识:如何学习正则这篇文章的内容需要有正则表达式的知识,如果没学过正则表达式的同学,可以看一下这个教程,我觉得写的很好:《正则表达式30分钟入门教程》https://deerchao.cn/tutorials/regex/regex.htm正则表达式用来测试也非常简单,直接打开浏览器的console界面,用Javascript测试即可:用Javascr原创 2020-12-24 16:20:59 · 11890 阅读 · 6 评论 -
Sass/SCSS中使用@extend继承合并复杂选择器列的奇怪规则
最近在看Sass/SCSS的中文文档,但是这份中文文档翻译的不全,和英文官网的文档格式也不一样。可能是翻译的旧版本文档?链接地址:https://www.sass.hk/docs/不过部分内容讲的还算挺清晰的,我也就拿来学习了。其中关于@extend指令,7.3.5.1. 合并选择器列 (Merging Selector Sequences)中描述的一种情况,吸引了我的兴趣。文档原文:一共可能的10种情况,但是仅仅生成两个?难道剩下8种情况都是没用的?我心想:这份文档本身就.原创 2020-10-23 15:27:24 · 1354 阅读 · 0 评论 -
Vue.js同名的组件插槽slot会不会冲突?
看Vue.js的官网文档中组件插槽的部分时,我有一个疑问,每个插槽都需要一个名字,通过名字来识别不同的插槽位置。那么同名插槽会不会起冲突导致Vue无法正常识别?尤其是看到官网文档中v-for渲染的列表中也包含插槽,这不会冲突么?我决定验证一下。多个同名插槽且显示默认内容首先看看如果有多个同名插槽,且使用默认插槽内容时的情况:父组件<template> <div id="app"> <HelloWorld :list="list"> &原创 2020-10-10 09:45:17 · 1946 阅读 · 0 评论 -
Vue.js子组件利用事件向父组件传输数据,以及sync修饰符和双向绑定
在Vue.js的组件中,prop是“单向绑定”的,数据只能从父组件传输到子组件。Vue文档中的说了这样做的原因:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。用自定义事件向父组件发送数据但是有时候的确需要由子组件从父组件获取更新的数据,这时候一个相对简单的方法就是——自定义事件。父组件监听事件,在事件的回调函数中得到数据。子组件emi原创 2020-10-09 14:37:01 · 243 阅读 · 0 评论 -
书评《Node学习指南》第二版Learning Node
最近想入门Node.js基础,于是选择了这本书阅读。书的内容是对Node.js核心模块做了一个大致的,并不深入的介绍。读完这本书能够了解Node.js的基础,但是还不能用Node.js做什么项目。总体评价:书的质量一般,但是基本满足我对他的要求。1. 书的质量一般为什么说这本书的质量一般呢?这要从选书的过程开始。由于Javascript和Node发展太快了,大部分书由于出版时间长里面的内容多半会过时,代码也执行不通过,因此不太适合阅读。但是直接看API文档?那可不行。API文章都没有原创 2020-09-27 09:02:55 · 400 阅读 · 0 评论 -
用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 · 493 阅读 · 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 · 1117 阅读 · 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 · 755 阅读 · 0 评论 -
书评《ES6标准入门》阮一峰
前段时间读完了这本书,算是作为ECMAscript的入门。我读的是这本书的官方开源版本(正版哦)。开源地址:https://es6.ruanyifeng.com/书的全部内容就像介绍ES6的使用手册或文档,按照主题介绍语法细节,然后附带一两个简单代码示例。没有任何的实战项目示例,代码长度都很短。只为讲述单个例子。不同章节内容除非在语法上有联系(比如Promise-Generator-async),否则不同的章节内容基本不相关。阅读这本书要求有ES5的基础,书中默认读者已经掌握了ES5的大原创 2020-09-14 22:15:48 · 356 阅读 · 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 · 287 阅读 · 0 评论 -
两个月 如何从零入门Web前端开发(个人经历)
两个月如何入门Web前端开发(个人经历)Web前端开发一直被网上称为入门最简单,学习最容易的开发类型。但是由于Node.js的出现,前后端分离的流行,前端的工作越来越多,学习成本实际上也不低。我之前上学的时候一直用C++和Python,对于前端没有任何了解,但是因为工作需要,开始做前端的工作,因此开始了0基础学习前端的日子。下面把我从零开始学习前端的经历和分享给大家,包括书籍推荐,学习方法,学习网站等等。1. HTMLHTML是网站的基础,也是前端必须首先学习的内容。学习难度..原创 2020-09-11 21:39:03 · 1581 阅读 · 2 评论 -
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 · 242 阅读 · 0 评论 -
Node.js定时器中的ref函数和unref函数
Javascript中有两大和定时有关的函数,setTimeout和setInterval。这两个方法都是在设定的事件之后,把回调函数放入调用栈的最后,一个是只执行一次,一个是重复执行。(这篇文章的重点不是讲这两个,有疑问的同学请自行搜索资料)清除这两个定时操作是把定时器传入clearTimeout和clearInterval函数。这两个函数的操作也非常清晰。上述的内容在浏览器和Node.js中都可以使用。但是还有两个函数,ref()和unref(),这两个操作也是和清楚定时器有关,但是性.原创 2020-09-09 20:20:43 · 3058 阅读 · 1 评论