qq_42367749的博客

JavaScript实现监听路由变化

qq_42367749 — Fri, 13 Aug 2021 21:15:33 +0800

前端实现路由变化主要有两种方式，这两种方式最大特点就是实现URL切换无刷新功能 ①通过hash改变，利用window.onhashchange 监听。 ②通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。）等操作会主动触发popstate 事件，pushState，re.

图标和字体对齐的几种方法

qq_42367749 — Sat, 31 Jul 2021 10:16:03 +0800

图标和字体对齐的几种方法原因转述文字图片默认都是以baseline展示的，也称为基线对齐，也就是根据vertical-align属性。如下所示：我们还可以看到图片下面还有一部分空白的高度，此高度是由于字体line-height属性撑出来的，如果没有以下文本元素，自然也不会有以下的空白的高度。但是文字基线不是最低部，而是x的底部。下面的图可以很形象的描述补充一个知识点：X-height属性：指的的是小写字母x的高度，进而引申出一个单位“ex”。 ex是CSS中的一个相对单位，可以应用在图标跟文字

vue白屏时间长多种处理方案

qq_42367749 — Sat, 31 Oct 2020 13:17:57 +0800

其实通过开发者调试工具，我从network中我已经可以看到请求vendor.js和app.js资源的时间太长了，导致整体请求时间过长。其实学过vue的都知道，htm中只有一个root 的容器，是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析。 1. 依赖文件以及打包文件放进CDN服务器将vue，vue-router，vuex，axios，element-ui等依赖文件不进行引入，整体的vendor和app文件大小大大减少，写法和配置文件如下： main.js(不需要进行引入依赖） webap.

几道有关于this的面试题

qq_42367749 — Thu, 29 Oct 2020 19:54:06 +0800

var age= 10; var foo = { x : 20, bar : function(){ var age = 30; console.log(this.age) } }; foo.bar();//20 (foo.bar)();//10 (foo.bar = foo.bar)();//10 (foo.bar,foo.bar)();// 第一道题我们都很清楚答案。就是谁调用该函数的，this就是指向该调用的对象第二道题的话，可能不好理解

初始网络分层及理解

qq_42367749 — Sat, 24 Oct 2020 21:30:34 +0800

网络分层 TCP/IP五层模型：是从OSI七层优化而来每一层次的作用：物理层用物理手段（即计算机之间的物理连线）将电脑连接起来，主要用来传输0，1信号，但是并不能解析该层的现实意义。数据链路层该层规定好一套专门的协议（以太网协议），给0.1信号进行分组，以及规定不同的组是什么意思，目的：让双方计算机能够进行识别传输的信息。以太网协议以太网规定，每组的电信号就是一个数据包，每个数据包我们可以成为“帧”。每帧的组成是由标头(Head)和数据(Data)组成。 Q1:怎么知道接收方是谁， MA

震惊！还有人不懂CDN服务器原理

qq_42367749 — Fri, 23 Oct 2020 16:49:14 +0800

一、什么是 CDN CDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的 CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。简单的说，CDN的工作原理就是将您源站的资源缓存到位于全球各地的CDN节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每

搜索引擎优化（SEO）之前端性能优化技巧

qq_42367749 — Wed, 23 Sep 2020 20:38:41 +0800

什么是SEO 先让我们了解搜索引擎SEO，这个视频 How Search Works 解释了搜索引擎是如何工作的。在让我们摘一下百度百科 SEO（Search Engine Optimization）:汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。 what to do 其实搜索引擎做的工作是相

Web标准的理解

qq_42367749 — Wed, 23 Sep 2020 17:10:23 +0800

Web标准是W3C组织和其它标准化组织制定的一套规范集合，包含了一系列标准：HTML、XHTML、Javascript以及CSS等。 WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。 Web标准的目的是创建一个统一的Web表现层的技术标准，

精讲css的浮动与定位

qq_42367749 — Wed, 23 Sep 2020 16:52:36 +0800

浮动和定位浮动什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列，用浮动来布局。在css中，通过float属性来定义浮动，其基本语法格式如下：选择器 {float:属性值;} 属性值描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值）浮动的特性脱离标准流，不占位置，浮动只有左右浮动一般只要一浮动就创建一个包含块级的概念，一般要在外边添加一

在window下使用WSL快速创建自己的Linux终端，且在VSCode中开发

qq_42367749 — Thu, 13 Aug 2020 19:05:35 +0800

如果你是一名前端程序员，有一部mac电脑，绝对是你开发的一部利器，看看下面的搜搜结果，但贫穷的我们，我们也可以用Linux终端，部分的增强我们的利器！！！不仅如此，我在开发过程中，总是会遇到缺少一些Linux命令，导致我要新装一些插件，超级麻烦，就想直接安装一个linux终端 1.相对于虚拟机，Windows Subsystem for Linux 有以下优点：性能更好。由于实现更加底层，所以性能要比虚拟机好很多。与 Windows 共享的文件系统。子系统是可以直接访问硬盘中的所有文件的，甚至.

git-flow的工作流程

qq_42367749 — Mon, 06 Jul 2020 20:39:18 +0800

什么是 git-flow？一旦安装安装 git-flow，你将会拥有一些扩展命令。这些命令会在一个预定义的顺序下自动执行多个操作。是的，这就是我们的工作流程！ git-flow 并不是要替代 Git，它仅仅是非常聪明有效地把标准的 Git 命令用脚本组合了起来。严格来讲，你并不需要安装什么特别的东西就可以使用 git-flow 工作流程。你只需要了解，哪些工作流程是由哪些单独的任务所组成的，并且附带上正确的参数，以及在一个正确的顺序下简单执行那些对应的 Git 命令就可以了。当然，如果你使用 git-f

js 数组详细操作方法及解析合集

qq_42367749 — Wed, 17 Jun 2020 17:27:51 +0800

ES6 Array.of() 返回由所有参数值组成的数组定义：返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。目的：Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。 let a = Array.of(3, 11, 8); // [3,11,8] let a = Array.of(3); // [3] ES6 Arrary.from() 将两类对象转为真正的数组定义：用于将两类对象转为真正的数组（不改变原对象，返回新的数组）。参数：第一个参数

单页应用多路由预渲染指南总结

qq_42367749 — Tue, 16 Jun 2020 19:13:09 +0800

Prerender SPA Plugin prerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此，该插件限定了你的单页应用必须使用 webpack 构建，且它是框架无关的，无论你是使用 React 或 Vue 甚至不使用框架，都能用来进行预渲染。本文示例基于 Vue.js 2.0 + vue-router。下文会从生成项目讲起，然后看下没有配置预渲染前的样子，再配置预渲染进行构建，对比前后的差别。生成项目首先生成一个项目并安装依赖。 vu

判断js对象类型的多种方法，附详细说明

qq_42367749 — Fri, 22 May 2020 16:24:02 +0800

概述 js中有多种方式可以判断对象的类型，每种判断类型的方式都有自己的优缺点。这篇文章文章中我们一共总结了4种方法： instanceof typeof Object.prototype.toString.call constructor 1. instanceof 使用方法：obj instanceof Object，左操作数是对象实例，右操作数是构造函数。 instanceof关键字判断的方式如下，假定o是对象实例、c是构造函数：如果o继承自c.prototype，则o instanceof c的

斐波那契数列（阿里面试题）

qq_42367749 — Sun, 03 May 2020 16:04:01 +0800

斐波那契数列（阿里面试题） function fibonacci(n) { if (n <= 1) return 1 let arr = [1, 1]; //i表示的是即将常见多少个 let i = n + 1 - 2; while (i > 0) { let a = arr[arr.length - 2]; let b = arr[arr.leng...

数组扁平化的几种实现方式

qq_42367749 — Sun, 03 May 2020 16:02:27 +0800

数组扁平化数组扁平化其实挺有用的，在项目业务开发中，后台传过来的数据通常都是带有嵌套的。比如我们实现获得拥有多级的评论数据列表，获得其中评论数的话，我们这时候可以将其扁平化，再进行计算。 let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ] //ES6方法直接实现 ar...

全面讲解TCP中的“三次握手”和“四次挥手”

qq_42367749 — Sat, 04 Apr 2020 21:47:21 +0800

TCP报文格式简介其中比较重要的字段有：（1）序号（sequence number）：Seq序号，占32位，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记。（2）确认号（acknowledgement number）：Ack序号，占32位，只有ACK标志位为1时，确认序号字段才有效，Ack=Seq+1。（3）标志位（Flags）：共6个，即URG、ACK、PSH、R...

快速掌握如何复杂度分析与计算？

qq_42367749 — Sat, 04 Apr 2020 20:34:50 +0800

文章目录为什么要学习复杂度分析？1. 测试结果非常依赖测试环境2. 测试结果受数据规模的影响很大正文大O复杂度表示法时间复杂度分析1.只关注循环执行次数最多的一段代码2.加法法则3.乘法法则，嵌套代码的复杂度等于嵌套内外代码复杂度的乘积几种常见时间复杂度实例分析1.O(1)2.O(logn)、O(nlogn)3.O(m+n)、O(m*n)空间复杂度分析浅析最好，最坏，平均，均摊时间复杂度最好和最坏...

ES2017--async和await的用法及注意点

qq_42367749 — Wed, 01 Apr 2020 16:33:10 +0800

1.定义 2.用法注意附上vue使用async简单解决axios请求

前端面试题---对BFC规范的理解

qq_42367749 — Sat, 28 Mar 2020 21:31:44 +0800

BFC有点晦涩难懂，建议通过例子进行理解，理解他有什么具体的作用定义 BFC 全称为块格式化上下文 (Block Formatting Context) 。官方定义：一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。元素变为BFC的条件根元素或其它包含它的元素浮...