前端
文章平均质量分 80
浮游本尊
这个作者很懒,什么都没留下…
展开
-
ios上整体页面可拖动问题
在排查问题时,按网上建议,在根元素html和body上加overflow:hidden,虽然在浏览器上无法滑动,但是到了移动端还是可以左右滑动,然后一层层排查,直到在使用了transform:rotate属性的元素父级(最近的position不为static的父级)加上overflow:hidden,才解决了问题。在ios系统中发现,当touch位置在比较偏上或者偏下的情况下,手指拖动整个页面,会导致整个页面整体被拖动,然后内容页的滚动部分会发生卡顿,不能滑动的问题。原创 2023-03-13 09:56:43 · 1409 阅读 · 0 评论 -
Uni-app页面路由的几种写法
关闭当前页面,返回上一级或多级页面,可通过 getCurrentPages( ) 获取当前页面栈,决定需要返回几层。(4)页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有tabBar。保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原来页面。跳转到 tabBar页面,并关闭其他所有非 tabBar 页面。(5)不能在 App.vue 里面进行页面跳转。关闭当前页面,跳转到应用内的某个页面。关闭所有页面,打开到应用内的某个页面。原创 2023-03-07 11:47:20 · 458 阅读 · 0 评论 -
在谷歌浏览器下,使用CSS实现设置font-size小于12px无效的终极解决方案
近日做一个需求的时候,需要调整字号,结果在设置font-size:10px时,发现好像并没有什么变化。网站查找资料后才知道,谷歌浏览器最低支持12px的字号。font-size 有一个最小值 12px(不同操作系统、不同语言可能限制不一样),低于 12px 的,一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。原创 2023-03-02 09:49:21 · 858 阅读 · 0 评论 -
防抖节流函数
我们按照如下思路来实现:防抖基本功能实现:可以实现防抖效果优化一:优化参数和this指向优化二:优化取消操作(增加取消功能)优化三:优化立即执行效果(第一次立即执行)优化四:优化返回值let timer = null // console.log(this)//window // 定义控制立即执行的变量,false表示没有执行过 let isInvoke = false // 真正的处理函数 function _debounce(... args) {原创 2023-03-01 10:07:57 · 173 阅读 · 0 评论 -
认识DOM和架构
DOM 代表文档对象模型,是 HTML 和 XML 文档的接口(API)。当浏览器第一次读取(解析)HTML文档时,它会创建一个大对象,一个基于 HTM L文档的非常大的对象,这就是DOM。它是一个从 HTML 文档中建模的树状结构。DOM 用于交互和修改DOM结构或特定元素或节点。浏览器是用来展示网页的,而网页中最重要的就是里面各种的标签元素,JavaScript很多时候是需要操作这些元素的。JavaScript如何操作元素呢?通过Document Object Model(DOM,文档对象模型)。原创 2023-02-28 10:37:38 · 335 阅读 · 0 评论 -
浅谈BOM
BOM对于每个前端都不陌生,但是很多人都停留在表面,而没有深层次的研究过它。JavaScript有一个非常重要的运行环境就是浏览器,而且浏览器本身又作为一个应用程序需要对其本身进行操作,所以通常浏览器会有对应的对象模型(BOM,Browser Object Model)。我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。window:包括全局属性、方法,控制浏览器窗口相关的属性、方法;location:浏览器连接到的对象的位置(URL);history:操作浏览器的历史;原创 2023-02-24 14:57:09 · 301 阅读 · 0 评论 -
Cookie在前端登录中的作用
访问哪些域名的哪个路径时会默认携带上 cookie,称为cookie的作用域。Cookie总是保存在客户端中,按在客户端中的存储位置,Cookie可以分为内存Cookie和硬盘Cookie。默认情况下的cookie是内存cookie,也称之为会话cookie,也就是在浏览器关闭时会自动被删除;由于session和cookie的缺点,在目前前后端分离的开发过程中,多使用Token进行身份验证。web开发中,我们使用最多的协议是 http ,但是 http 是一个无状态的协议。mac电脑自带终端即可。原创 2023-02-22 10:22:17 · 659 阅读 · 0 评论 -
Storage
我们能看到DB这个词,就说明它其实是一种数据库(Database),通常情况下在服务器端比较常见;在实际的开发中,大量的数据都是存储在数据库的,客户端主要是请求这些数据并且展示;有时候我们可能会存储一些简单的数据到本地(浏览器中),比如token、用户名、密码、用户信息等,比较少存储大量的数据;那么如果确实有大量的数据需要存储,这个时候可以选择使用IndexedDB;原创 2023-02-21 14:23:51 · 607 阅读 · 0 评论 -
JSON的Stringify及深浅拷贝
JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。相当于是进行了一次深拷贝;原创 2023-02-17 11:35:54 · 415 阅读 · 1 评论 -
浅析JSON
JSON.stringify的第一个参数传入的是需要JSON序列化的对象,第二个参数传入的是一个函数或者数组,如果传入的是数组,那么仅仅会替换数组包含的属性,如果传入的是函数,那么可以选择性的替换值。第三个参数可传入数字或者字符串,传入数字的值为多少,就表示JSON序列化后里面的属性前面的空格为多少,如果传入的是字符串,则表示属性前面以该字符串开头。JSON是一种轻量级的数据交换格式,前端是离不开JSON的,JSON采用完全独立于编程语言的文本格式来存储和表示数据。原创 2023-02-16 16:27:56 · 191 阅读 · 0 评论 -
包管理工具-npm-npx-yarn-cnpm
在我们通过模块化的方式将代码划分成一个个小的结构后,在以后的开发中我们就可以通过模块化的方式来封装自己的代码,并且封装成一个工具,这个工具我们可以让同事通过导入的方式来使用,甚至你可以分享给世界各地的程序员来使用。显然,通过第二种方式我们可以更好的管理自己的工具包,其他人也可以更好的使用我们的工具包。这时候,有的人会考虑一个问题,如果我们分享给世界上所有的程序员使用,有哪些方式呢?npx的作用非常多,但是比较常见的是使用它来调用项目中的某个模块的指令。原创 2023-02-13 16:40:10 · 547 阅读 · 0 评论 -
Can‘t find Python executable “ python“, you can set the PYTHON env variable
右键“我的电脑”(win7系统有的显示是“计算机”)选择“属性”然后选择“高级系统设置”,弹出的“系统属性”界面,选择“高级”里面的“环境变量”的对话框在下面的“系统变量”中找到“Path”,然后点击“编辑”,将Python的安装目录“C:\Python27”填写进去,注意,两个路径之间是用“;”分号隔开的。输入之后点击“确定”即可。原创 2023-02-08 11:44:57 · 1468 阅读 · 0 评论 -
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
最近使用vue框架时报了一个错,vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.You may want to run the following to upgrade to Vue CLI 3:这是由于vue的版本存在更新,需要先卸载vue cli2,然后重新安装vue cli 3。原创 2023-02-08 11:34:50 · 2075 阅读 · 0 评论 -
Can‘t find Python executable “ python“, you can set the PYTHON env variable
出现如下情况报错Can‘t find Python executable “ python“, you can set the PYTHON env variable,说明axios所需的插件没有装上。原创 2023-02-08 11:30:50 · 354 阅读 · 0 评论 -
this的指向问题
在日常的工作中,我们经常会遇到this的指向问题,过去对这个问题一直是一知半解,今天特意写一篇文章,来扫盲,如有错误,欢迎指出。JavaScript中的this和常见的面向对象语言中的this不太一样:常见面向对象的编程语言中,比如Java、C++、Swift、Dart等等一系列语言中,this通常只会出现在类的方法中。也就是你需要有一个类,类中的方法(特别是实例方法)中,this代表的是当前调用对象。但是JavaScript中的this更加灵活,无论是它出现的位置还是它代表的含义。原创 2023-02-08 11:19:07 · 441 阅读 · 0 评论 -
三分钟彻底搞懂Nginx反向代理
客户端对代理是无感知的,因为客户端不需要任何配置就可以访问,我们只需要将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后,在返回给客户端,此时反向代理服务器和目标服务器对外就是一个服务器,暴露的是代理服务器地址,隐藏了真实服务器 IP地址。从配置文件开始到events块之间的内容,主要会设置一些影响Nginx服务器整体运行的配置指令,主要包括:配置运行Nginx服务器的用户(组)、允许生成的 worker process 数,进程PID存放路径、日志存放路径和类型以及配置文件的引入等。原创 2022-11-07 16:20:05 · 4243 阅读 · 0 评论 -
在编译器和解释器中V8是如何执行一段JavaScript代码的?
本篇文章主要是站在 JavaScript 引擎 V8 的视角,来分析 JavaScript 代码是如何被执行的。前端工具和框架的自身更新速度非常块,而且还不断有新的出现。要想追赶上前端工具和框架的更新速度,就需要抓住那些本质的知识,然后才能更加轻松地理解这些上层应用。比如我们接下来要介绍的 V8 执行机制,从底层了解 JavaScript,深入理解语言转换器 Babel、语法检查工具 ESLint、前端框架 Vue 和 React 的一些底层实现机制。原创 2022-10-09 10:23:14 · 186 阅读 · 0 评论 -
在栈空间和堆空间中数据是如何存储的
这个涉及到JavaScript 的内存机制,这个概念咋看可能觉得很熟悉,但是据我观察,一知半解的比较多,因为平时不会去关注这方面的知识,但是如果想对JavaScript有一个更深入的了解,注重前端应用的性能,这个知识点必须掌握。执行第一段代码,打印出来 a 的值是 2,b 的值是 1,这没什么难以理解的。接着,再执行第二段代码,会发现,仅仅改变了 a 中 name 的属性值,但是最终 a 和 b 打印出来的值都是{name:“fuyoubenzun”}。原创 2022-09-29 10:32:42 · 626 阅读 · 0 评论 -
async await使用同步方式写异步代码
自从网页中引入了 JavaScript,操作 DOM 树中任意一个节点就变得非常容易了,例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等。不过在 XMLHttpRequest 出现之前,如果服务器数据有更新,依然需要重新刷新整个页面。原创 2022-09-05 11:18:35 · 550 阅读 · 0 评论 -
XMLHttpRequest是怎么实现的
自从网页中引入了 JavaScript,操作 DOM 树中任意一个节点就变得非常容易了,例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等。不过在 XMLHttpRequest 出现之前,如果服务器数据有更新,依然需要重新刷新整个页面。原创 2022-08-25 16:14:52 · 582 阅读 · 0 评论 -
渲染流程,代码是如何变为页面的(二)
在HTML页面内容被提交给渲染引擎之后,渲染引擎首先将HTML解析为浏览器可以理解的DOM;然后根据CSS样式表,计算出DOM树所有节点的样式;接着又计算每个元素的几何坐标位置,并将这些信息保存在布局树中。现在有了布局树,而且每个元素的具体位置信息都计算出来了,那么接下来是不是就要开始着手绘制页面了?答案依然是否定的。因为页面中有很多复杂的效果,如一些复杂的3D变换、页面滚动,或者使用z-indexing做z轴排序等,为了更加方便地实现这些效果,渲染引擎还需要为特定的节点生成专用的图层,并生成一棵对应的图层原创 2022-07-11 10:42:40 · 330 阅读 · 0 评论 -
渲染流程,代码是如何变为页面的(一)
作为前端工程师,通常,我们编写好HTML、CSS、JavaScript等文件,经过浏览器就会显示出漂亮的页面,但是发生了哪些事情,我们并不是很清楚。由于渲染机制过于复杂,所以渲染模块在执行过程中会被划分为很多子阶段,输入的HTML经过这些子阶段,最后输出像素。我们把这样的一个处理流程叫做渲染流水线,其大致流程如下图所示:按照渲染的时间顺序,流水线可分为如下几个子阶段:构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。有三点内容是必须要清楚的:因为浏览器无法直接理解和使用HTML,所以需要将H原创 2022-07-11 10:41:56 · 1102 阅读 · 0 评论 -
类型“Element”上不存在属性“offsetTop”
记录一次类型错误的解决方案,ts报错类型“Element”上不存在属性“offsetTop”。因为ts默认用的是Element,需要声明为HTMLElement或是下面这样当然如果你用的是angular的话,建议用 ElementRef原创 2022-07-11 10:41:06 · 3819 阅读 · 1 评论 -
为什么很多站点第二次打开速度会很快
在访问一些网站时,我们会发现,第二次打开速度会明显比第一次快,或许以前我们并不是很清楚这其中的原因,今天用一篇文章,彻底搞懂。我们知道,一个TCP连接过程包括了建立连接、传输数据和断开连接三个阶段。HTTP协议是建立在TCP连接基础之上的。HTTP是一种允许浏览器向服务器获取资源的协议,是Web的基础,通常由浏览器发起请求,用来获取不同类型的文件,例如HTML文件、CSS文件、JavaScript文件、图片、视频等。HTTP也是浏览器使用最广的协议。如果我们在浏览器地址栏里键入地址:http://baidu原创 2022-07-08 15:22:43 · 866 阅读 · 0 评论 -
TCP协议是怎么保证页面文件能被完整送达浏览器的
相信很多人和我一样,对这其中发生的事情,并不是完全清楚,今天用一篇文章,彻底搞懂。FP:First Paint的缩写,指的是从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率,更快的页面响应意味着更多的PV、更高的参与度,以及更高的转化率。影响FP指标的一个重要因素是网络加载速度。优化Web页面的加载速度,就需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识,不管是使用HTTP,还是使用WebSocket,它们都是基于TCP/IP的。互联网是一套理念和协议组成的体系架构。协议是一原创 2022-07-08 15:21:53 · 149 阅读 · 0 评论 -
浅析Chrome架构
我们知道Chrome打开了1个页面,会启动多个进程。很多朋友对进程和线程一直处于一知半解的状态,今天就来彻底弄懂。在弄懂进程和线程之前,我们需要知道什么是并行处理。计算机中的并行处理就是同一时刻处理多个任务,比如我们要计算下面这三个表达式的值,并显示出结果把这个过程拆分为四个任务:任务1 是计算A=1+2;任务2 是计算B=2/2;任务3 是计算C=1*2;任务4 是显示最后计算的结果正常情况下程序可以使用单线程来处理,也就是分四步按照顺序分别执行这四个任务。如果采用多线程,我们只需分“两步走”:原创 2022-07-08 15:21:19 · 346 阅读 · 0 评论 -
有状态组件的设计
假设我们有如下模板:由这段模板可知,我们为 MyComponent 组件提供了一个空的 div 标签作为默认插槽内容,从DOM结构上看 标签有一个 div 标签作为子节点,通常我们可以将其编译为如下 VNode:这其实没什么问题,但是我们更倾向于新建一个 slots 属性来存储这些子节点,这在语义上更加贴切,所以我们希望将模板编译为如下 VNode:可以看到,如上 VNode 的 children 属性值为 null。当我们使用 mountComponent 函数挂载如上 VNode 时,我们可以在原创 2022-07-08 15:20:12 · 199 阅读 · 0 评论 -
input type=file 同一个文件两次上传,第二次无效
使用input[type=file] 实现文件上传功能,通过onchange事件触发js代码,这个时候第一次上传是完全没问题的,当你第二次上传文件时,如果是不同于上一次上传文件的话是可以正常上传的,不过如果你选择的还是上一个文件,也就是两次上传的文件重复了,那么就会上传失败。input是通过onchange事件来触发js代码的,由于两次文件是重复的,所以这个时候onchange事件是没有触发到的。读取文件后,记得把input的value重新设置为空即e.target.value=‘’...原创 2022-07-08 15:18:22 · 2733 阅读 · 0 评论 -
组件的本质
当我们使用 Vue 时,往往会将页面拆分为各种组件,通过拼装组件来形成页面和应用,就像搭积木一样。那么,组件的产出是什么呢?在 JQuery 盛行的年代,比起组件,“模板引擎”的概念要更加流行。我们可以使用 lodash.template 函数来回忆一下当年是如何用模板开发一个页面的:模板引擎的概念是:字符串 + 数据 => html。lodash.template 函数虽然称不上是“引擎”,但足以说明问题。我们将模板字符串传递给 template 函数,该函数返回一个编译器 compiler,只要把数据原创 2022-07-08 15:16:24 · 199 阅读 · 0 评论 -
从源码解读vue生命周期
其实和回调是一个概念,当系统执行到某处时,检查是否有hook(钩子),有的话就会执行回调。通俗的说,hook就是在程序运行中,在某个特定的位置,框架的开发者设计好了一个钩子来告诉我们当前程序已经运行到特定的位置了,会触发一个回调函数,并提供给我们,让我们可以在生命周期的特定阶段进行相关业务代码的编写。总的来说,Vue的生命周期可以分为以下八个阶段这个钩子是new Vue()之后触发的第一个钩子,在当前阶段中data、methods、computed以及watch上的数据和方法均不能被访问。这个钩子在实例创建原创 2022-07-08 15:15:48 · 145 阅读 · 0 评论 -
你不知道的WebSocket
WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接, 并进行双向数据传输。WebSocket 的出现就解决了半双工通信的弊端。它最大的特点是:服务器可以向客户端主动推动消息,客户端也可以主动向服务器推送消息。WebSocket原理 :客户端向 WebSocket 服务器通知(notify)一个带有所有接收者ID(recipients IDs)的事件原创 2022-07-08 15:14:47 · 120 阅读 · 0 评论 -
前后端的交互
Controller层(控制层):接收客户端的请求,然后调用Service层接口控制业务逻辑,获取到数据,传递数据给页面;Service层(业务层):接收Controller层的请求,然后调用Dao层,获取到数据,service层也叫服务层,主要负责业务模块的逻辑;DAO 层(数据操作层):连接数据库,对数据库进行操作,具体到对某个表的增删改查,也就是说某个DAO一定是和数据库的某一张表一一对应的,其中封装了增删改查基本操作Service层是建立在DAO层之上的,建立了DAO层后才可以建立Service层,原创 2022-07-07 11:06:58 · 2381 阅读 · 0 评论 -
微信小程序的底层架构原理,及如何做性能优化
小程序的渲染层和逻辑层分别由2个线程管理:(1)视图层:界面渲染相关的任务全都在 WebView 线程里执行。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程。(2)逻辑层:采用 JsCore 线程运行JS脚本。视图层和逻辑层通过系统层的 WeixinJsBridage 进行通信:逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。把开发者的 JS 逻辑代码放到单独的线程去运行,但在 Webview 线程里,开发者就没法直接操作 DOM。那要怎么去实原创 2022-07-07 11:05:20 · 6377 阅读 · 0 评论 -
五分钟完全弄懂JS闭包
这里先来看一下闭包的定义,分成两个:在计算机科学中和在JavaScript中。在计算机科学中对闭包的定义(维基百科):闭包的概念出现于60年代,最早实现闭包的程序是 Scheme,那么我们就可以理解为什么JavaScript中有闭包:我们再来看一下MDN对JavaScript闭包的解释:那么我的理解和总结:如果我们编写了如下的代码,它一定是形成了闭包的:1、创建GO对象,创建全局执行上下文并压入执行上下文栈中注意:在此之前,是存在内存泄漏的,因为foo函数执行结束了,但是foo函数的AO对象并没有被销毁原创 2022-07-07 11:04:20 · 1157 阅读 · 0 评论 -
JS的内存管理
对于JavaScript来说,会在创建变量(对象,字符串等)时分配内存,并且在不再使用它们时“自动”释放内存,这个自动释放内存的过程称为垃圾回收。因为自动垃圾回收机制的存在,让大多Javascript开发者感觉他们可以不关心内存管理,所以会在一些情况下导致内存泄漏。不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,不同的是某些编程语言需要我们自己手动的管理内存,某些编程语言会可以自动帮助我们管理内存:不管以什么样的方式来管理内存,内存的管理都会有如下的生命周期:不同的编程语言对于第一步和第三原创 2022-07-07 11:01:41 · 1249 阅读 · 0 评论 -
浏览器的工作原理与v8引擎
每次学习后,没多久就忘了,所以这次自己记录一下…JavaScript是一门高级的编程语言。那么有高级编程语言,就有低级编程语言,从编程语言发展历史来说,可以划分为三个阶段:但是计算机它本身是不认识这些高级语言的,所以我们的代码最终还是需要被转换成机器指令:那么javaScript代码在浏览器中是如何被执行的?首先当我们输入一个url,这时候我们向服务器发送http请求,服务器收到请求,会把我们请求的数据返回给我们,这个时候我们就接受到了服务器返回给我们的html页面,浏览器会把相应的css文件和js文件下原创 2022-07-07 10:57:54 · 186 阅读 · 0 评论 -
终止已被发出的请求
Axios :主流的、基于 XMLHttpReqeust、promise 的 HTTP 库如何实现 – cancelToken实现思路想要实现取消某个请求,我们需要为该请求配置一个 cancelToken ,然后在外部调用一个 cancel 方法。请求的发送是一个异步过程,最终会执行 xhr.send 方法,xhr 对象提供了 abort 方法,可以把请求取消。因为我们在外部是碰不到 xhr 对象的,所以我们想在执行 cancel 的时候,去执行 xhr.abort 方法。我们在 xhr 异步请求的过程原创 2022-07-07 10:55:47 · 803 阅读 · 0 评论 -
完成记录Completion Record
在控制台进行操作时,我们会发现, var 语句返回值为undefined,由此引发深思…我们在浏览器的控制台输入 abd = 2 时会打印 2,但是输入 var abd = 2 得到的结果却是 undefined,这是什么原因呢?普通语句执行后会得到 [[type]]值为normal的 Completion Record,所以普通语句执行完成之后就继续执行下一条,而只有表示式语句才会有 [[value]]值,不过这个[[value]]对于引擎执行逻辑来说没有什么用处,var语句执行得到的是一个[[vaue]原创 2022-07-07 10:54:28 · 125 阅读 · 0 评论 -
Vue3-CLI和Vite的使用
安装Vue CLI(目前最新的版本是v4.5.13)我们是进行全局安装,这样在任何时候都可以通过vue的命令来创建项目:npm install @vue/cli -g升级Vue CLI: 如果是比较旧的版本,可以通过下面的命令来升级:npm update @vue/cli -g通过Vue的命令来创建项目:vue create 项目的名称Vue CLI的运行原理Webpack是目前整个前端使用最多的构建工具,但是除了webpack之后也有其他的一些构建工具:比如rollup、parcel、gulp、vit原创 2022-07-07 10:53:28 · 2017 阅读 · 0 评论 -
devServer和VueCLI
目前我们开发的代码,为了运行需要有两个操作:这个过程经常操作会影响我们的开发效率,我们希望可以做到当文件发生变化时,可以自动的完成编译和展示;为了完成自动编译,webpack提供了几种可选的方式:webpack给我们提供了watch模式:如何开启watch呢?两种方式:这里我们选择方式二,在package.json的 scripts 中添加一个 watch 的脚本:webpack-dev-server上面的方式可以监听到文件的变化,但是事实上它本身是没有自动刷新浏览器的功能的:安装webpack-dev原创 2022-07-07 10:52:00 · 803 阅读 · 0 评论