让程序飞会的博客

字节实习记录文章目录字节实习记录前言一、上线的一些小tips二、CDN 安全合规改造2.1 边缘鉴权2.2 回源鉴权三、curl四、es6的可选链五、关于get与post的相关区别：六、vue-jsoneditor七、map八、ferry使用（通过rpc + idl进行前后端约束）九、微前端十、tailwindcss十一、mock十二、Object.entries前言一、上线的一些小tips二、CDN 安全合规改造• 背景：图床问题黑产人员：找到上传接口 -> 上传恶意资源 -&

字节实习记录文章目录字节实习记录一、关于样式less1.1 变量部分1.2 &的用法：二、data中的属性的后续添加2.1 this.$set的方式添加三、 异步操作3.1 async结构3.2 promise2.3.1 promise all2.3.2 promise resolve2.3.3 promise的链式结构四、this.$nextTick()的回调应用五、关于对前端传入后端的数据做改动5.1 trim5.2 set5.3 split5.4 Object.keys5.5 Object.

字节实习记录（1）10-12文章目录字节实习记录（1）10-12前言一、关于npm run dev的实现二、关于ppe泳道还有boe上线的相关三、关于git操作分支等3.1 分支分类3.2 分支区3.3 常见的分支命令四、一些细节方面的记录五、关于mixin六、关于vue的filter过滤器七、关于jsBridge八、关于eventbus与vuex8.1 eventbus8.2 vuex8.2.1 state8.2.2. mutation8.2.3 Actions8.2.4 Getters九、关于v-o

系列文章目录【计算机网络基础——系列1】-matlab与python使用socket udp进行进程间通信【计算机网络基础——系列2】-matlab与python使用socket tcp进行进程间通信【计算机网络基础——系列3】输入url后页面会遇到的问题【计算机网络基础——系列4】关于HTTP请求的相关内容【计算机网络基础——系列5】前端遇到的三种网络攻击【计算机网络基础——系列6】浏览器缓存之cookie、session、localstorage【计算机网络基础——系列7】浏览器缓存之—h

系列文章总结【前端vue——系列1】vue的路由【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理【前端vue——系列3】vue框架的优缺点；vue实现双向绑定【前端vue——系列4】vuex和angular【前端vue——系列5】生命周期详讲（vue的生命周期、页面的生命周期）文章目录系列文章总结前言一、vue用到的api介绍二、vue实现各部分功能2.1 vue进行参数配置2.2 vue调用摄像头2.3 vue关闭摄像头2.4 截图拍照功能2.5 将图片

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录一、为什么选择websocket1.1 websocket是什么？1.2 websocket的优点1.3 websocket报文1.3.1 客户端请求报文：1.3.2 服务端响应报文：1.3.3 数据帧预览格式：二、客户端（vue）使用websocket1.数据声明2.生命周期启动

系列文章目录文章目录系列文章目录一、函数防抖二、函数节流三、函数节流与函数防抖区别一、函数防抖持续拖动滚动条，只要不停止触发，就永远不会有输出，短时间内触发的事件，在某个时间期限内，我的函数只执行一次实现方式：缺点：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟。function debounce(fn,delay) { var timeout = null; // 创建一个标

文章目录一、函数传参传递的是值还是引用1.1 按值传递1.2 按引用传递1.3 js中的传参策略二、函数式编程2.1 函数式编程是什么2.2 函数式编程基本特点2.3 对比声明和命令式2.4 函数式编程的特性一、函数传参传递的是值还是引用var testA=1;var testB={};function testNumber(example){ example=2;} function testObj(example) { example.test=1;} testN

文章目录一、变量提升，函数提升1.1 变量提升1.2 函数提升二、内存泄漏2.1 什么是内存泄漏2.2 js的垃圾回收机制2.3 内存泄漏的原因和解决办法一、变量提升，函数提升1.1 变量提升变量声明的提升是以变量所处的第一层词法作用域作为’单位‘的，全局作用域中声明的变量会提升至全局最顶端，函数内声明的变量只会提升到该函数作用域最顶层var a;console.log(a); // undefineda = "a";var foo = () => { var a; //

文章目录一、常见的5种JavaScript设计模式1.1 工厂模式1.2 构造函数模式1.3 单例模式1.4 发布订阅者模式1.5 观察者模式一、常见的5种JavaScript设计模式工厂模式构造函数模式单例模式发布订阅模式观察者模式1.1 工厂模式工厂模式是创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。通过对传递参数的预定，返回不同的对象实例，但是这三种实例的内部构造都非常相似，因此还可以对其进行优化。

文章目录一、js中defer和async的区别1.1 async1.2 defer1.2 defer与async区别二、关于parseint三、js中图片压缩3.1 图片压缩原理3.2 代码实现原理3.2 上传或下载一、js中defer和async的区别首先，假设没有defer或者async属性时，浏览器会立即加载并执行相应的脚本，也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，这样就会导致阻塞后续文档的加载。<script src="exa

文章目录一、vuex1.1 安装1.2 特点1.3 工具1.4 使用1.5 vue 不建议在 action 中修改 state 而是在 mutation 中修改二、angular原理一、vuex1.1 安装HTML 中使用 script 标签引入Vue项目中使用 npm 下载安装（需要安装 Node 环境）1.2 特点Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接改变

一、vue框架的优缺点1.1 优点轻量级、易上手、可以有简洁的API提供高效的数据绑定和灵活的组件系统组件（component）是vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码双向数据绑定的实现更容易操作DOM（vue.js)则使用object.defineProperty（）方法，监控对方数据的操作，从而可以自动触发数据同步，可以精准的将变更发给绑定的视图，而不是对所有数据都执行一次检测（不同于angular.js）。vue是单页面应用；使页面局部刷新，不要

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例

文章目录一、BFC与IFC1.1 BFCBFC布局规则：触发BFC条件1.2 IFCIFC布局规则：触发IFC条件二、绝对定位与相对定位和固定位置相对定位（relative）绝对定位（relative）固定定位（relative）z-index：FC（格式化上下文）是指w3c规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用一、BFC与IFC1.1 BFCBFC（块级格式化上下文）的话则是一个块级元素的渲染显示规则，可以

文章目录一、css实现固定宽高比，随屏幕自适应1.1 方案一：宽高设置为vw，vh1.2 方案二：padding-bottom实现普通元素固定宽高比1.3 方案三：指定宽度或者高度值，另一边自动计算就可以了1.4 方案四：aspect-ratio属性指定元素宽高比二、伪元素2.1伪元素是什么2.2 before：：和after：：的特点2.3 伪元素的特点一、css实现固定宽高比，随屏幕自适应在最近做项目时，因为使用了两个屏幕，一个分屏的屏幕尺寸要比笔记本电脑屏幕大一些，就造成了使用固定值设置宽高

文章目录一、css动画与js动画的区别二、vue中css的scope原理，以及cssMoudle2.1 关于scope2.2 关于cssMoudle2.2.1 传统css的缺点：2.2.2 使用css Module一、css动画与js动画的区别js动画css动画动画控制js动画控制能力强，暂停，开始等操作易于实现进程控制能力较差，只能特定场合的动画控制，不能在特定位置添加回调函数动画效果动画效果丰富：如曲线运动，冲击闪烁等等动画效果不够丰富复杂度复杂度较高复

文章目录一、浮动1.1 浮动的定义：1.2 浮动应用场景：1.3 清除浮动：1.3.1 为什么要清除浮动1.3.2 清除浮动方法（1）额外标签法：（2）父级添加overflow法：（3）使用after伪元素清除浮动：二、垂直居中显示2.1 position元素已知宽度2.2 position transform元素未知宽度2.3 flex布局2.4 table-cell布局一、浮动1.1 浮动的定义：给元素的float属性赋值后，就是脱离文档流进行左右浮动，紧贴着父元素（默认为文本区域）的左右边

文章目录一、vue中的data是函数而不是对象二、vue中computed的实现原理2.1 computed的计算属性：2.2 computed的实现原理：2.3 computed与watcher和methods的区别：一、vue中的data是函数而不是对象object是引用数据类型，如果data不用函数返回，每个组件的data都是内存的同一个地址，一个数据发生变化，那么其他的也发生改变；js只有函数构成作用域，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响，

文章目录一、采用css雪碧图技术二、把css或者js文件进行合并或者压缩三、图片懒加载技术四、设置视频音频标签为none五、传输格式使用json六、采用cdn加速七、采用事件委托（时间代理）八、减少闭包使用九、尽量使用异步编程十、使用websocket十一、建立心跳机制一、采用css雪碧图技术采用css雪碧图，将一些小图合并到一张大图上，使用时通过背景图片定位，定位到具体的某一张小图上。二、把css或者js文件进行合并或者压缩特别是在移动开发端时，如果css或者js内容不是很多，那么我们可以

文章目录前言一、浏览器缓存种类二、http缓存2.1 HTTP缓存介绍2.2 HTTP缓存分类2.3 强缓存2.4 协商缓存2.5 如何设置缓存前言浏览器缓存是浏览器保存数据用来快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，浏览器缓存总共可以归纳为九种，本文详细讲解http缓存一、浏览器缓存种类http缓存websqlindexDBcookielocalstoragesessionstorageapplication cach

这个系列文章的几篇推文的链接在这：第四篇 扩展运算符与箭头函数第三篇 promise第二篇 filter、includes、fill、object.assign第一篇 set、map文章目录一、聊聊es6中的新的方法前言一、展开运算符1.1 展开运算符（...）是将一个数组转换为类函数参数序列1.2 结构赋值1.3 合并数组与对象1.4 帮助完成vuex中函数的映射二、箭头函数2.1 箭头函数是什么：2.2 箭头函数的适用场景2.3 箭头函数与普通函数的区别：一、聊聊es6中的新的方法Set

文章目录前言一、聊聊es6中的新的方法二、promise2.1 promise是什么？2.2 promise then2.3 promise all2.4 promise resolve2.5 Promise.reject2.6 Promise.race前言es6是js语言下的下一代标准，使得js语言可以用来编写复杂的大型应用程序，成为企业级的开发语言。提示：以下是本篇文章正文内容，下面案例可供参考一、聊聊es6中的新的方法Setmapfilterincludesfillobje

文章目录前言一、聊聊es6中的新的方法二、filter三、includes四、fill五、object.assign前言es6是js语言下的下一代标准，使得js语言可以用来编写复杂的大型应用程序，成为企业级的开发语言。提示：以下是本篇文章正文内容，下面案例可供参考一、聊聊es6中的新的方法Setmapfilterincludesfillobject.assignpromise二、filter它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map（）类似，Ar

文章目录前言一、聊聊es6中的新的方法二、set1.set介绍2.set作用2.1 set去重2.2 set取交集与并集三、map1.map介绍2.map用法3.map与object的区别4.map与reduce的区别前言es6是js语言下的下一代标准，使得js语言可以用来编写复杂的大型应用程序，成为企业级的开发语言。提示：以下是本篇文章正文内容，下面案例可供参考一、聊聊es6中的新的方法Setmapfilterincludesfillobject.assi

文章目录一、直接隐藏二、表单元素隐藏三、图片类的尺寸设置隐藏四、元素的透明度隐藏五、元素的绝对位置六、vue中的隐藏元素的两种方法对比6.1 v-if6.1.1 原理6.1.2 应用场景6.1.3 优点6.2 v-show6.2.1 原理6.2.2 应用场景6.2.3 优点一、直接隐藏display和visibility的设置。//css中.test1{display：none}或者是.test{visibility：hidden}二、表单元素隐藏表单元素有：in

文章目录一、盒模型1.w3c的标准盒模型2.IE的盒模型3.这两种盒模型的区别4.盒模型的转换二、flex布局1.flex布局的组成2.flex的相关属性2.1 flex-direction2.2 justify-content2.3 align-items2.4 flex-wrap2.5 align-content3.flex项目属性3.1 order3.2 flex-grow3.3 flex-shrink一、盒模型盒模型由：内容（content）、边界（border）、边框距（padding-

文章目录前言一、js的数据类型分类二、如何判别这些数据类型1、typeof()2、instanceof3、Object.prototype.toString.call()4.constructor三、instanof的实现原理前言JavaScript 是属于 HTML 和 Web 的编程语言，其数据类型分为基本数据类型和引用数据类型提示：以下是本篇文章正文内容，下面案例可供参考一、js的数据类型分类JavaScript 是属于 HTML 和 Web 的编程语言，其数据类型分为基本数据类型和引

文章目录一、cookie1.1 cookie是什么：1.2 cookie作用：1.3 cookie的使用：1.3 cookie的各部分：二、session1.session是什么：2.session的作用：3.session的使用：三、localstorage、cookie、sessionstorage的区别四、cookie与token的区别：一、cookie1.1 cookie是什么：cookie是服务器提供的一种用于维护用户会话信息的数据，通过服务器发送到游览器，保存到游览器的纯文本文件。1

文章目录前言一、XSS攻击1.1 XSS攻击什么：1.2 如何防御xss攻击：二、CSRF攻击2.1 CSRF攻击什么：2.2 如何防御csrf攻击：三、点击劫持前言前端安全问题越来越成为无比重要的一环，本文将简单介绍三种安全问题提示：以下是本篇文章正文内容，下面案例可供参考一、XSS攻击1.1 XSS攻击什么：xss攻击是前端安全中面临的最普遍的问题，这是一种代码注入攻击，攻击者在网站上注入恶意代码，当被攻击者登录网站时就会执行这些恶意HTML代码，这些脚本可以读取cookie，ses

文章目录前言一、http请求1.请求行2.请求头：3.请求体：4.具体的请求内容：二、http各请求方式的区别：1.head与get的区别：2.put与delete区别3.option三、http常见状态码：四、http请求头过大的解决办法。1. 将请求参数转而在请求体中设置:2. 在application中这样配置：前言HTTP是指超文本传输协议，基于应用层并且用于客户端和服务器通信；请求访问文本或图像资源的一端统称为客户端，提供资源响应的一端称为服务器。提示：以下是本篇文章正文内容，下面案例

文章目录前言一、什么叫做跨域？二、跨域产生的原因：三、跨域问题的解决办法：3.1 document.domain3.2 跨文档通信：window.postMessage（）3.3 cors跨域3.3.1 非简单请求3.3.2 非简单请求3.4 Axios解决跨域3.5 JSONP解决跨域前言在做项目时，有时会遇到一些端口不同或是域名不同的情况，这种情况就会产生跨域问题，导致通信传输受限，本文就来讲讲跨域产生的原因和我用到过的解决办法提示：以下是本篇文章正文内容，下面案例可供参考一、什么叫做跨域

文章目录前言一、页面的生命周期二、vue的生命周期1.vue的各个生命周期：2.vue各个生命周期的应用场景3.vue父子组件的生命周期顺序3.1. 子组件更新过程3.2 父组件更新过程：3.3 销毁过程：前言我是刚开始在项目中接触vue时了解到生命周期这个说法，一直有总结这个部分的内容，这篇文章就是关于生命周期的总结的。任何事物都有其自己的生命周期，比如说：自然界动植物生命周期-从出生到死亡。而页面的生命周期指的是从页面请求到页面卸载的一个过程，本文侧重讲解vue的各个生命周期以及遇到的问题。

文章目录前言一、项目配置二、显示效果三、各部分功能代码：3.1 开始展示画面3.2 暂停展示画面3.3 结束画面展示3.4 画面截取拍照保存3.5 计时器功能的实现：四、mainwindow.h和pro文件的内容前言 最近有个项目有个部分是要连接摄像机并把拍摄到的画面实时显示出来，于是我想到了用qt+opencv的方式正好可以实现。一、项目配置以下安装部署均是在windows上进行的1.qt5.12按装教程：2.opencv环境配置3.cmake安装教程二、显示效果功能描述：

文章目录前言一、输入url后的各部分的反应二、浏览器接收到http响应后渲染页面三、css文件要放在body头部，而js文件则是放在尾部1.css的角度2.js的角度3.css放置的位置造成的不同结果前言从输入url网址到域名解析一直再到页面渲染成功涉及到的知识过于庞大，本文不做详细介绍，只讲一些小编在这个过程中遇到的问题提示：以下是本篇文章正文内容，下面案例可供参考一、输入url后的各部分的反应• 1、输入网址：如：www.4399.com• 2、DNS解析：将你输入的网址解析为计

一个事件的处理过程主要有三个阶段：捕获，目标，冒泡；（1）捕获： 当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。（ 所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。 ）（2）目标阶段：当事件不断的传递直到目标节点的时候 ，最终在目标节点上触发这个

【vue-Router】vue的路由为了构建SPA，vue引入了前端路由系统vue-router。vue的路由【vue-Router】vue的路由前言一、SPA是什么？二、vue-router1.hash模式2.history模式3.两种模式的比较二、路由跳转1.最基本的跳转：2.带参数的跳转：3.js跳转转：4.关于传参方式和子路由接收参数方式4.1 params传参：4.2 query传参：)前言路由其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，这就

前端页面ajax连接后台服务器传输数据1.ajax原理描述2.ajax优点3.ajax缺点4.前端使用ajax与后台传输数据1.ajax原理描述Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。2.ajax优点（1）页面无刷新更新数据（2）异步与服务器通信3.ajax缺点（1）AJ

前端页面axios连接后台服务器传输数据前言一、axios二、使用步骤三、相关配置前言axios 是由 promise 封装的一个 http 的库。提示：以下是本篇文章正文内容，下面案例可供参考一、axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：• 从浏览器中创建 XMLHttpRequest• 支持 Promise API• 客户端