- 博客(45)
- 收藏
- 关注
RSS订阅原创 快速切换页面时控制台发生路由的错误
公司项目被测试出一个问题，就是在导航栏中快速切换页面时控制台会发生报错，大概是这样的（图是盗的，文末贴了大佬文章）啥意思呢？我查了一下：报错原因没有定位到，但是项目还得继续啊，所以找到一个办法，在main.js中写入以下代码，实测有效：import Router from 'vue-router'const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {.
2020-09-25 15:23:35
292
原创 使用axios调用后端接口的一个实验
做一个非常简陋的demo记录一下是如何从前端调用接口获取后端数据的，敬请指点前端使用的框架是vue，后端是用node.js搭建的服务器。vue-resource和vue-axios都可以实现，前者官网已经说明不再进行维护，至于它俩到底咋回事我还没细看。第一步，在本地搭建一个vue项目。第二步，引入axios，npm install axios --saveimport axios from 'axios' //引入axios//创建一个实例对象requestsconst reques
2020-09-18 16:34:34
977
原创 ES6新数据类型：Symbol
Symbol是JavaScript的第七种数据类型，是原始数据类型，表示独一无二的值。它是ES6新引入的数据类型，引入的原因在于：ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。...
2019-12-02 14:55:38
239
原创 块级作用域与函数声明
ES5规定，函数只能在顶层作用域和函数作用域中声明，不能在块级作用域中声明。但是以下这样的写法是被浏览器接受的：// 情况一if (true) { function f() {}}// 情况二try { function f() {}} catch(e) { // ...}ES6则有这样的明确规定（只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块...
2019-11-27 16:15:59
249
原创 var与let和const
ES6新增了两个与声明有关的命令：let和const。var与let、const的区别let和const声明的变量不会成为window的属性；var声明会成为window的属性 var a = 10;let b = 20;const c = 30;console.log(a,b,c); //10,20,30console.log(window.a, window.b, wi...
2019-11-27 15:01:51
231
原创 重绘和重排
浏览器的运行机制构建DOM树：渲染引擎解析HTML文档，将所有标签转换为DOM树中的DOM节点生成内容树 构建渲染树：解析对应的CSS样式文件信息，样式树与DOM树结合构建成渲染树 布局渲染树：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标 绘制渲染树：遍历渲染树，使用UI后端层来绘制每一个节点重绘定义：当一个元素的属性确定后，浏览器根据这...
2019-11-26 21:16:38
260
原创 防抖和节流
在前端开发中，常常会用到例如scroll、mousemove等持续触发的事件，这样的事件引起的操作有可能会导致页面卡顿，我们希望这样的事件不要频繁的触发执行回调。防抖和节流是前端性能优化的两种方式。相同点：将频繁的回调函数进行次数缩减，避免大量计算导致页面卡顿 不同点：防抖是将多次执行变为一次执行；节流是将多次执行变为在规定时间内只执行最后一次。比如在页面的无限加载场景下，我们需要用户在...
2019-11-26 20:12:19
161
原创 this的指向问题
this的指向真是JavaScript中的迷惑行为。function f1(){ var a=10; console.log(this.a);}f1(); //undefined上面这个栗子中，f1()在全局作用域直接调用执行，而调用它的对象是window。this指向window，不能取到局部范围的a的值，因此是未定义。那么这样呢？var obj = { ...
2019-11-21 18:37:29
198
原创 垃圾回收机制
JS的垃圾回收机制的原理其实很简单：找出不再继续使用的变量，然后释放其占用的内存。垃圾收集器会按照固定的时间间隔周期性执行。通常有两个策略。（参考红宝书）一、标记清除当变量进入环境时将其标记为“进入环境”。当变量离开环境时将其标记为“离开环境”。永远不能释放进入环境的变量所占的内存，因为只要执行流进入相应的环境，就可能会用到它们。垃圾回收器在运行时给存储在内存中的所有变量都加上标记...
2019-11-18 20:36:15
137
原创 实现JS继承的六种方式
注：本文中，父类型即是超类型。一、原型链继承1、基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法，让新实例的原型等于父类的实例，重写原型对象2、特点：实例可以继承的属性有：实例的构造函数的属性、父类构造函数的属性、父类原型的属性。但是新实例不会继承父类实例的属性和方法 子类的实例也是父类的实例3、缺点：无法实现多继承 创建子类型的实例时，不能向父类型的构造函...
2019-11-18 18:40:18
90
原创 原型和原型链
原型和原型链原型：是一个对象，其他对象可以通过它实现属性继承。所有引用类型都有一个__proto__（隐式原型）属性，属性值是一个普通的对象 所有函数都有一个prototype（显式原型）属性，属性值是一个普通的对象 所有引用类型的__proto__属性都指向它的构造函数的prototype原型链：当访问对象的某个属性时，先查找对象本身是否存在该属性，如果没有找到就去它的隐式原型__...
2019-11-16 12:28:09
194
原创 JS的执行环境及作用域
执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个变量对象中，但是我们编写代码不能访问这个变量对象，解析器在处理数据时会在后台使用它。全局执行环境：在JavaScript中window对象表示的是全局执行环境，全局执行环境是最外围的环境，所有的全局变量和函数都是作为window对象的属性和方法的。...
2019-11-14 17:31:46
153
原创 CSRF攻击原理及防御措施
CSRF，即跨站请求伪造（Cross-site request forgery）攻击原理用户登录受信任网站A，产生cookie 用户访问攻击网站B，网站B返回攻击代码并发出要登录网站A的请求 网站A对请求进行验证并确认是用户的cookie，误以为是用户操作 网站A执行攻击代码，攻击完成。可以理解为：攻击者盗用用户身份，并以用户的名义发送恶意请求。 在服务器看来这个请求是完全合法的，...
2019-11-14 10:39:30
972
原创 简说JS中的instanceof
instanceof操作符在MDN上的解释为：定义instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链的任何位置。1、作用：判断一个引用是否属于某构造函数或在继承关系中判断一个实例是否属于他的父类型。2、判断逻辑：从当前引用的proto一层一层顺着原型链往上找，看能否找到对应的prototype。3、使用方法：object instanceof co...
2019-11-13 20:32:55
2611
原创 null和undefined的区别
区别一：是两种不同的数据类型console.log(typeof undefined); //undefinedconsole.log(typeof null); //object区别二：含义不同null可以代表空对象，看作一个空对象指针；而undefined则表示空值。区别三：使用场景不同null的使用场景：手动设置 DOM元素获取时没有获取到指定的元素对象，...
2019-11-13 16:58:43
249
原创 JS中0.1+0.2不等于0.3的问题
在JS中，0.1+0.2 ！== 0.3console.log(0.1+0.2 === 0.3); // falseconsole.log(0.1+0.2); // 0.30000000000000004原因：浮点数运算的精度所致，属于算术误差计算机只认识二进制，运算时需将其他进制的数值转为二进制再进行计算。而浮点数用二进制表达是无穷的：//0.1：十进制——>二进制...
2019-11-12 13:25:15
739
1
原创 熊猫优选面筋
JS数据类型 null和undefined区别 具体说一下引用类型 symbol类型呢 0.1+0.2的问题，类似这样的情况如何解决 JS事件代理 闭包 原型和原型链（prototype和_proto_） CSS 选择器优先级 CSS flex布局 CSS position CSS 盒模型 vue生命周期 DOM节点在哪个阶段就可以监听到了 vue for指令为什么要指...
2019-11-09 12:56:48
185
原创 两列布局：左边固定右边自适应
实现这样一个两列布局：左边宽度固定（200px），右边自适应。<div class = "block"> <div class = "left">固定宽度</div> <div class = "right">自适应</div></div> 方法一 解析：左边设置了浮动，脱离了正常文档流。右边...
2019-11-08 11:59:48
698
原创 常见的几种HTTP状态码
状态码类别 1XX（信息性状态码）表示接收的请求正在处理 2XX（成功状态码）表示请求正常处理完毕 3XX（重定向状态码）表示需要进行附加操作以完成请求 4XX（客户端错误状态码）表示服务器无法处理请求 5XX（服务器错误状态码）表示服务器处理请求出错 常见状态码200 OK——客户端发来的请求在服务器端被正常处理 在响应报文中，随状态码...
2019-11-08 09:45:58
1547
原创 常见的几种HTTP状态码
状态码类别 1XX（信息性状态码）表示接收的请求正在处理 2XX（成功状态码）表示请求正常处理完毕 3XX（重定向状态码）表示需要进行附加操作以完成请求 4XX（客户端错误状态码）表示服务器无法处理请求 5XX（服务器错误状态码）表示服务器处理请求出错 常见状态码状态码的组成应该是三位数字200 OK...
2019-11-08 09:44:09
41
原创 XSS攻击原理及防御措施
XSS,即跨站脚本攻击（Cross Site Scripting）攻击原理恶意攻击者向web页面中插入恶意的代码，当用户浏览时，嵌入微博页面中的恶意代码将被执行。通过插入恶意脚本实现对用户浏览器的控制或窃取信息等目的。参考以下几篇，都写的很好：推一篇美团技术团队的文章，超级详细：https://www.freebuf.com/articles/web/185654.html附常见的...
2019-11-04 20:29:54
2922
原创 meta标签
<meta>在HTML中位于<head></head>内。作用是提供页面的元数据，这些元数据不会展示在客户端，但是会被浏览器解析。meta不难，只是属性值多，因此用途广泛。看过官方文档等后写下如下总结，以便记忆，侵删。主要作用：搜索引擎（SEO）优化 定义页面使用语言 自动刷新页面 控制页面缓存 网页定级评价 控制页面显示的窗口主要属性：...
2019-11-01 20:38:40
117
原创 bootstrap
bootstrap的架构原理先来看一段哪儿都能搜到的文字简单了解一下bootstrap：bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备有先的web项目（bootstrap中文网）。作用是使用一份代码适配多种设备，当然这是离不开CSS媒体查询的。它的架构组成就好像是一个金字塔，每一层都是基于它底下一层的基础之上。最底层到最顶层依次是：响应式设计...
2019-10-31 09:11:48
165
原创 AJAX原理及其使用和封装
AJAX，全称Asynchronous JavaScript and XML，即异步的JavaScript和XML。它是组合了以下技术的一种技术。使用CSS和XHTML来表示 使用DOM模型来交互和动态显示 使用XMLHttpRequest来和服务器进行异步通信 使用JavaScript来绑定和调用AJAX的工作原理相当于在用户和服务器之间加了一个中间层，即AJAX，使用户操作和服...
2019-10-29 21:00:57
100
原创 从浏览器输入一个URL到页面呈现出来的过程
URL到底是什么？URL（Uniform Resource Locator），统一资源定位符，即网址。遵守规则为：scheme://host.domain:port/path/filenamescheme：定义因特网服务的类型，常见协议：http、https、ftp、file； host：定义域主机（http的默认主机是www）； domain：定义因特网域名； port：定义主机上...
2019-10-28 11:30:47
579
原创 面筋两个
10.24，翼课网面试，感觉很注重底层的知识。从浏览器输入一个URL到页面展示出来的过程 TCP/IP四层模型 text-align什么条件下才可以使用 ES6模块导入导出对应写法 对于面向对象的理解 0.1+0.2是否等于0.3，如何等于0.39.7，好未来学而思网校面试用CSS实现一个三角形 箭头函数和普通函数的区别 实现垂直水平居中 ajax的实现 排序：1)so...
2019-10-25 08:38:29
238
原创 创建JS对象的几种方式
对象字面量 let obj = {}; 构造函数 let obj = new Object(); 工厂模式 function createObj(name,sex,age){ var obj = new Object(); obj.name = name; obj.sex = sex; obj.age = age; obj.sayNa...
2019-10-23 12:39:08
89
原创 字符串为何可以点出方法？基本包装类型
惨痛的浙江大华面试，面试官问了我一个问题：为什么字符串可以直接点一个方法来使用呢？我当时内心的想法是：这还用问吗？不都这么用的吗？当然，我没敢说出来。时隔一月之久，来康康它到底为什么可以这样使用......在前面的学习总结中已经了解到了常问的JS数据类型。其中有一类是基本类型，而基本类型和基本包装类型却又不是同一个概念：基本类型：undefined、null、Boolean、Number、...
2019-10-22 17:44:56
212
原创 详解BFC
一、触发BFC的方式，列举几种常用情况根元素<html> 浮动元素（float不为none） 绝对定位元素（position : fixed / absolute） 非块元素（display:inline-block / table-cell / table-caption / flex / inline-flex） 块元素（overflow不为visible）二、BFC...
2019-10-22 17:34:42
253
原创 如何清除浮动
1、首先来康康什么是浮动？浮动有什么特点？浮动的元素会可以向左或向右移动，直到元素的框外边缘碰到另一个框的外边缘为止。浮动元素的特点：脱离文档流，将不再占据空间 可能会覆盖住别的元素。如果覆盖了别的元素，别的元素中的文字将会围绕浮动元素排开 收缩宽度。块级元素设置浮动后，将不再占满一行，而是收缩为内部元素的宽度浮动元素的缺点：父容器的高度会塌陷2、浮动的属性clear ...
2019-10-21 19:28:22
79
原创 数组去重
数组去重后返回的新数组有两种创建方式：一种是新建一个空数组，将原数组的不重复元素依次放进去，依赖于数组的push()；另一种是在原数组的基础上，删除重复元素，依赖于数组的splice()。这两种方式在以下方法中都是可行的。遍历+includes() function unique(arr){ var newArr = []; var len = arr.length; ...
2019-10-21 18:41:40
108
原创 途虎面经
最近现场面了途虎，只有一面技术面，而且只问了我两个问题，都是算法题。这次面试的收获是很大的，这都要感谢那位非常nice的面试官，特别耐心的给我讲怎么做。一道是笔试时我做的题，一道是他现场出的题。给定一个二维数组，其每一行从左到右递增排序，从上到下递增排序。给定一个数，判断这个数是否在该二维数组中。 function search(array,target){ var col = a...
2019-10-21 11:56:49
1066
2
原创 CSS水平和垂直居中的实现
侵删一、水平居中1、行内元素：主要取决于行内元素的父元素是否是块级元素是块级元素 父元素{ text-align:center;} 不是块级元素 父元素{ display:block; text-align:center;} 2、块级元素：有宽度是否设定之分1）方法一定宽 该元素{ margin:0 auto;} ...
2019-10-16 10:09:58
105
原创 apply、call和bind
call、apply和bind是JavaScript中function对象的三个方法，他们的共同点有如下几点：改变函数运行时的this指向 第一个参数都是this要指向的对象 都可以利用后续参数传参不同点在于：bind是返回对应函数便于稍后调用；apply、call则是立即调用 apply和call可以实现继承；而bind不可以 bind会产生新的函数；而apply和call不会...
2019-10-13 15:27:35
144
原创 缓存总结
cookie和session都是用来跟踪浏览器用户身份的会话方式。一、cookie定义：简单来说，cookie其实是个存储在浏览器中的文本文件，是服务器保存在客户端的数据。它是HTTP协议的规范之一，主要内容包括：名字、值、过期时间、路径和域。（详解可参考百度百科或维基百科，看起来好复杂...） cookie规范：服务器通过响应头把cookie传给客户端，客户端将其保存起来；客户端再次请...
2019-10-06 19:56:40
87
原创 浅谈闭包和递归
闭包和递归时函数中的两个比较特殊的情况，并且都被告诫人们要慎用。闭包相当于函数的返回值为另一个函数，而递归则相当于函数的参数为另一个函数。一、闭包概念：能够访问其他函数内部的变量的函数。也可以理解为在一个函数内部创建的函数。 优点：变量可以长期存在、可以避免全局变量的污染 缺点：消耗内存、会在父函数外部改变内部变量值 用途：可以读取函数内部的变量、让这些变量的值始终保持在内存中 ...
2019-10-03 17:52:05
2484
2
原创 和对象有关的那些事儿~
对象其实就是拥有属性和方法的数据。在JavaScript中，一切皆对象，如数组、字符串、数字、日期等等。一、创建对象的方式 使用Object构造函数 var obj = new Object(); 使用对象字面量 var obj = { name:"CD", age:21, class:A }； Object.create()。该方法有两个参数：新建对象的...
2019-09-30 17:00:29
99
原创 数组和它的方法们~
数组Array是引用类型的一种，属于对象类型。本文整理了一些常用的方法，在面试中也是高频考点。一、创建数组的方法使用Array构造函数 var arr1 = new Array();//创建了一个空数组var arr2 = new Array(10);//创建了一个长度为20的数组var arr3 = new Array("CD", 21 , "m");//创建了一个具有初始化数据...
2019-09-27 18:39:25
71
原创 圣杯双飞翼
圣杯布局和双飞翼布局：实现三列布局，中间内容宽度自适应，两边内容宽度固定。区别如下：DOM结构不同，相对于圣杯，双飞翼为中间单独添加了一个容器，以便margin为左右留白。 圣杯用padding来为左右留白，双飞翼用margin来为左右留白。 圣杯结合浮动和定位来使左右定位，双飞翼则直接使用浮动来定位。一、圣杯布局HTML出现顺序：main、left、right。先载入主体，再加...
2019-09-26 21:11:32
170
原创 JS函数
函数其实就是一段具有特定功能的代码块，作用是将重复出现的代码封装起来，需要的时候直接调用。一、常见的函数定义的方式及其异同之处函数声明 function Fn(arguments){ //函数体} 函数表达式 var Fn = function (arguments){ //函数体} 构造函数 var Fn = new Function("arg...
2019-09-26 20:09:09
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人