自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

哒哒哒

坚持总是比较难的

  • 博客(60)
  • 资源 (1)
  • 问答 (5)
  • 收藏
  • 关注

原创 vue与react区别

最近一段时间使用react + typeScript开发新对项目,说实话体验不是很好一是可能由于之前一直使用vue + js,对比react两个框架还是有明显差别对二是可能一次性接受太多的新知识,消化不完,react + typeScript做图片处理项目,很多图片图形处理在前端完成所以大家新项目做技术选型的时候还是要慎重一些,一次改变太大并不利于新项目的开发,因此可以现在不重要的模块...

2020-02-23 19:58:49 645 2

原创 vue响应式对象

在vue中与视图中绑定的数据,其数据的变化会驱动视图的更新,这是因为vue是响应式那么有没有那么一种情况数据的变化视图没有变化呢?答案肯定是有的,例如对象的属性变化vue并不能监听到,因此数据的变化并不能驱动视图更新vue也提供了$set方法来更新对象属性值的变化,但是也会有奇怪的现象比如<template> <div class="test"> ...

2020-02-21 20:59:16 1262

原创 canvas宽高理解,即canvas坐标系与屏幕坐标系

canvas在空标签没有任何额外手动添加的属性时,默认宽高为300*150px// 默认宽高300*150px<canvas /> 这里的宽高有两个含义canvas元素宽高为300*150px canvas画布可见区域为300*150px这时就引出两个坐标系概念,一个是在屏幕上显示的真实尺寸,一个是在canvas内的坐标<canvas id="test"...

2020-02-21 20:10:04 2052

原创 Eslint理解与常见工具使用

1.Eslint是什么Eslint是JS的代码检测工具,一般都是通过插件的形式存在,本身是nodejs编写的因为JS本身是弱类型语言,没有类型校验、没有编译过程 (运行时编译)因此在开发过程中会有很多以外错误不容易被发,因此有Eslint帮助可以在开发时帮助发现常见错误不仅如此,还能在一定程度上帮助代码风格的统一,因此Eslint是大型应用开发得力助手2.Eslint常见辅助工...

2019-10-16 21:38:49 456

原创 VUE keep-alive理解分享

在vue中keep-alive能够被经常使用到,下面总结下使用方法、技巧、概念1.通常用来包裹组件使用,本身没有意义,不会产生任何可视的元素,与component一起使用&lt;keep-alive&gt; &lt;component :is="view"&gt;&lt;/component&gt;&lt;/keep-alive&gt;2.在包裹组件时可以默认缓存组件,所谓...

2019-03-04 21:35:35 718

原创 浏览器请求资源的过程

如果存在service work,会先触发cache事件,判断是否命中service work中的缓存 未命中则memory-cache中查找命中 未命中则disk-cache中查找命中,其中如果有强缓存且缓存没有过期,则使用强缓存状态全部为200,若强缓存失效则使用协商缓存最后根据文件状态判断是304(请求服务器发现没有更新)还是200 未命中则发送网络请求 吧响应数据存储在disk-c...

2019-02-25 22:23:45 626

原创 旋转矩阵

给定一个 n × n 的二维矩,将图像顺时针旋转90度,且必须原地旋转,即不能借助其他矩阵来完成旋转操作,示例如下matrix = [ [1,2,3], [4,5,6], [7,8,9]]//原地旋转输入矩阵,使其变为:matrix = [ [7,4,1], [8,5,2], [9,6,3]]1 2 3 4 5 6 7 ...

2019-02-21 21:10:14 1127

原创 web页面回流与重绘

当浏览器必须重新处理和绘制部分或全部页面时,回流就会发生,例如当一个交互式站点更新后,前面这段话是在MDN上对回流的表述,那么这段话啥意思呢,实际上就是当元素的内容、结构、位置、尺寸等发生变化时会引起回流,而回流必定会引起重绘页面初始化 DOM树发生变化(增删节点) render树变化(如padding变化) 窗口resize以上都会导致回流的产生...

2019-02-20 22:26:35 274

原创 有效的数独

有9x9数量不变数独用二维数组表示,检查数独是否满足以下条件:数字1-9每行只能出现一次 数字1-9每列只能出现一次 数字1-9每3x3的框内只能出现一次数独空白部分用‘.’填充,列子如下var a = [ ["5","3",".",".","7",".",".",".","."], ["6&qu

2019-02-20 22:24:32 292

原创 JS事件循环优先级

由于JS是单线程的,但是JS又又异步处理概念,那么是怎么处理这个异步的东西的呢,这个时候就有了事件循环的概念在JS里事件循环是很重要的概念,代码的执行栈都是以事件循环为标准的具体的事件循环概念这里就不详细解释描述,主要讲述事件循环中的执行优先级问题,这里涉及到到概念还有宏任务、微任务等很多面试都遇到这段代码输出的顺序是什么这样的问题,下面就是这么一个简单的问题function tes...

2019-02-18 21:41:20 1145

原创 ES6 async await原则探索

ES6中新增异步函数,即在函数声明前加上async即可,使得异步操作更加方便简洁,其中await是在async函数中独有的在执行过程中一旦遇到await就会先返回,等到异步操作完成之后再接着执行函数后面的语句,这句话是什么意思呢一旦遇到await就立刻让出线程,阻塞后面的代码 如果不是promise,await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完毕后再回到...

2019-02-15 21:27:38 329

原创 若干字符串公共前缀

有若干字符串,找出若干字符中最大相同的子串,例子如下:['flow', 'flew', 'fly'] =&gt; 'fl'此时上面字符串最大相同的子串就是'fl',示例代码如下/** * [longestCommonPrefix] * @param {string[]} strs * @return {string} */var longestCommonPrefix = ...

2019-02-13 21:07:55 724

原创 整型大数相加(JS字符串)

由于语言本身的限制或者是机器本身的限制,整型数字通常都是有大小限制的,超过大小的数字没有办法正常计算比如在js里有安全整数的概念Number.MAX_SAFE_INTEGER与Number.MIN_SAFE_INTEGE分别是最大与最小安全整数但是很多情况下有大数相加需求的,这时通常采用字符串或者数组的方式来进行加法操作,按照四则运算的规则来计算结果如下:/** * [bigN...

2019-02-11 21:06:31 714

原创 js异或运算符^小技巧

这个运算符主要是在位运算的时候使用,但是在普通的数也能使用,且有一个转换过程,即将二进制的数转换为十进制var a = 1 ^ 2;//3//1 -&gt; 01//2 -&gt; 10//1 ^ 2 -&gt; 11 -&gt; 3如上所示,在十进制进行异或运算符操作时也是OK的,结果显示也是十进制的结果,示例中的转换过程只是我假象的转换过程,只是便于理解,假设由十进制到二进制...

2018-09-04 21:42:28 33247 5

原创 js函数节流

场景需求:有些事件监听触发的次数太过频繁,比如scroll、resize等事件,一秒内可触发数十上百次,实际上如此频繁的事件触发是没有必要的,因为对用户来说一秒内可能100次与5次没有任何感官上的差别,因此需要对时间节流,限制事件触发的次数,能够在一定程度上优化页面,尤其是在事件中触发DOM更新的操作话不多说上代码//节流函数function throttle(callback, wa...

2018-08-28 21:08:15 227

转载 CSS属性继承相关

1.不可继承的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、...

2018-08-27 21:16:46 180

原创 js实现简易二叉树

树是数据结构基本的知识点,树里面有比较特殊的二叉树,这里就不详细讲解树的概念了,只是用js实现简易的二叉树1.新增节点2.移除节点3.节点最大/最小值4.中序遍历5.先序遍历6.后序遍历7.查找是否存在指定节点8.是否为空树话不多说,上代码,首先是树的基本单元节点类 /***left:左子树*right:右子树*value:节点值*/ex...

2018-08-21 21:38:42 4096

原创 JS实现链表类

最近在学习基础的数据机构,之前学校学的都差不多忘记了,现在都温故下并尝试着用JS来实现基本的数据结构类,有些地方可能有些不合理的地方链表不熟悉的可以自行温故链表的基础知识,就特性啦可以对链表哪些操作啦等等,首先链表是以节点为单位的,一个节点包含值和指向下一个节点的指针,因此需要一个节点类Node.jsexport default class Node { constructo...

2018-08-15 21:23:24 1339

原创 http/https与websocket的ws/wss的关系

今天在域名升级到HTTPS的时候遇到websocket的链接问题,之前在http下使用的是new WebSocket('ws://xxx');但是在切换到HTTPS后这个链接部分浏览器报错甚至代码整体抛出异常走不下去了,之前没有注意过websocket在两个不同协议下有什么不同,实际上按照标准来是有如下对应关系的http ->new WebSocket('ws://xxx')ht...

2018-08-14 21:06:19 116462 7

原创 js深复制

JS深复制在业务场景中十分的常用,为什么要深复制,这涉及到JS的数据类型的问题JavaScript分为两种数据类型引用数据类型和非引用数据类型,引用数据类型常见的有object、array、null等,而string、number、Boolean、undefined等属于非引用数据类型,两者的差别之一是引用数据类型指向堆内存,非引用指向栈内存,明显的区别是在赋值的时候let a = 1;...

2018-08-12 10:59:10 1149

原创 vue过滤器filters

在vue中有个类似实例组件中computed的资源选项,那便是过滤器filters,为什么说类似呢,因为他们都可以对已有的数据进行加工再返回加工后的数据,但是两者又有着明显的区别,下面先阐述什么是vue过滤器1.用途:常在v-bind与{{}}里使用2.本质:是声明的函数,最终返回结果3.声明:可在实组件例局部声明也可在全局声明 使用方法如下声明过滤器&lt;temp...

2018-08-06 22:18:42 415

原创 vue高级组件之provide / inject

在vue中不同组件通信方式如下1.父子组件,通过prop2.非父子组件,通过vuex或根vue转载器 通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信1.下面是a.vue&lt;template&gt; &lt;div class="test"&gt; &lt;son prop="data"&gt;&lt;/son&gt; &lt;/

2018-08-04 09:30:06 34994 9

原创 Promise回调执行顺序

ES6中的Promise十分的好用,可以在一定程度上有效的避免回调嵌套的尴尬境地,但是promise.prototype.then调用顺序却容易被忽视then()的执行顺序是在主要操作执行完成后再执行,即使代码顺序写在then()后面,也是先执行后再执行then()里面的回调console.log('before promise');function test() { return ...

2018-08-02 21:23:37 1657

原创 利用vue-router改善数据获取

有时候我们会对用户有个性化设置,比如在A页面用户可以选择性的展示若干个模块,是否展示的判断标准存在数据库,因此路由到这个页面时需要调用接口获取数据判断到底是哪些模块要显示,哪些是不需要显示的正常情况下在路由导航到此页面创建完成时调用接口获取数据会有不好的用户体验,此时会有页面抖动现象&lt;template&gt; &lt;div class="text"&gt; &lt;span...

2018-07-31 22:26:47 465

原创 有关setTimeout的输出

今天无意间看到有关setTimeout()的各种输出结果,常见如下//for在全局环境为前提for(var i = 0; i &lt; 5; i++){ setTimeout(function(){ console.log(i); },1000);}//输出5个5以上代码输出5个5,而不是0,1,2,3,4;这是为什么呢,网上一大堆解释,但是很多都是一样的,我并不认同,网上...

2018-07-30 21:21:14 1081

原创 JS实现集合类

 集合是基本的数学知识,在程序应用中也十分的常见,但是通过js实现集合在网上查了下并不是很多,有些也是使用比较传统的方法实现,当然不是说传统的方法有什么缺点,传统方法兼容性更好我发现在ES6中天然适合做集合的Set类,由于Set具有元素唯一性,这个特性也正是集合的最基本特性之一,因此能够用简洁的代码实现类的抽象类常见的运算有查找、增加、删除、合集、并集、差集、子集等等操作,通过Set十分方...

2018-07-27 21:34:50 662

原创 JS与或运算

说来惭愧,JS基本的与或运算都没掌握完全,下面说一下与或运算的结果1.与运算(&amp;&amp;)与运算有可能返回五种结果,true、false、null、NaN、undefined运算规则如下1.与运算所有项为true情况下,返回最后一个值,注意是值,并不是truelet a = 11;let b = 'www';let c = false;let d = true...

2018-07-25 21:27:00 8227 3

原创 JS数组遍历

数组在JS中是十分常用的引用对象,数组占用着一整块的内存空间,数组的成员也是按照数组写入的顺序存入,遍历也自然是按照存入的顺序来遍历,一下罗列出常见的可以称之为对数组数组遍历的方法1.every检查数组每一项是否符合特定条件,都满足要求才返回true,否则返回falsevar arr = [1,2,3];arr.every((val,index,arr) => { ret...

2018-07-24 22:17:42 445

原创 ES6箭头函数this指向

箭头函数是简化的回调函数,能够在一定程度上简化代码let num = [1,2,3];num.map(function(item) { return item * item;});num.map(item =&gt; item * item);以上两种写法结果是一样的,但是并不能说以上两种是完全等价的,其中之一便是两者的this指向问题箭头函数本身没有this,因此在t...

2018-07-21 22:39:25 279

转载 web跨域之JSONP

现代浏览器在安全为前提下,由望京公司在浏览器中引入同源策略,同源策略在一定程度上能够提高网络安全性,但是有利有弊,也在一定程度上限制了网络资源的共享同源策略:1.交互协议相同:同为http或https或其他协议2.域名相同:指完整域名相同,只是顶级域名相同并不行3.端口相同:必须在同一端口下如同为80端口在开发过程中多少会遇到跨域的问题,解决跨域常见的方法之一是JSONP方式,...

2018-07-19 20:44:40 209

翻译 常见Http响应头部 responses header

响应头 说明 示例 Access-Control-Allow-Origin 指定哪些网站可以跨域资源共享 Access-Control-Allow-Origin:* Accept-Patch 指定服务器所支持的文档补丁格式 Accept-Patch:text/exa,ple;charset=utf-8 Accept-Ranges 服务器支持的内...

2018-07-18 21:18:13 5552

翻译 ES6学习---map数据结构

在传统JS操作对象是,通常只能用字符串来作为对象的键,在一定程度上是有限制的,在新的标准中,使用map数据结构可以放宽对象键的类型,理论上对象的键可以是任何类型,下面详细说明下map数据结构 。1.map的申明const map = new Map();//或const map = new Map([ ['name', 'smith'], ['age', 20]]);以上可...

2018-07-16 21:30:12 234

原创 vue实现路由切换改变title

由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示├── index.html├── main.js├── api│...

2018-07-12 21:37:55 3643

翻译 flex布局学习笔记

在非常熟悉的盒子模型下也有不少的缺点,比如不易实现垂直居中,元素的位置常常要依靠浮动定位等才能解决,在响应式方面盒子模型布局也并不是多么得心应手,而flex布局能在一定程度上解决上述问题,下面归纳一下flex布局的一些基本知识要点及注意事项1.任一容器都能指定flex布局&lt;div class="content"&gt;&lt;/div&gt;&lt;span class="cont"&gt...

2018-07-11 22:08:21 306

原创 css水平垂直居中(常见)

实际上css水平居中比较容易实现,方法也有很多,但是垂直居中补胎费方便实现,原因也算是当前的盒子模型的一个缺陷吧,但是也只是不方便实现方法也还是有不少,下面说一下常见可用的方法吧有一下结构&lt;div class="text"&gt; &lt;span&gt;Hello World!&lt;/span&gt;&lt;/div&gt;1.table-cell居中.test{ display:...

2018-07-09 21:18:38 168

原创 vuex代码结构

vuex是一套相对独立的代码,因此可以抽象出到单独的文件夹里,那么比较好的代码结构是啥样的?话不多说,以下是vuex比较好的代码结构├── index.html├── main.js├── api│ └── ... # 抽取出API请求├── components│ ├── App.vue│ └── ...└── store ├── index.js ...

2018-07-06 21:34:19 709

原创 vuex基础理解

vuex是vue的一个插件,下面要从以下三方面来初步了解以下vuex1.vuex是什么官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化通俗解释:官方解释我不会自己去看?还要你解释(手动滑稽),于是就有了通俗解释,vuex可以把它理解为是在项目内全局声明的一些通用变量(注意是可以理解为...

2018-07-05 20:43:07 301

原创 vue-router导航守卫

导航守卫这个名字听起来略微有点中二(手动滑稽)回归正题,导航守卫大体上分为以下三类:1.全局守卫钩子2.独享守卫钩子3.路由组件守卫钩子下面详细说明以上三种守卫钩子包含的方法及调用时序1.全局守卫钩子全局守卫顾名思义是在路由全局执行,即在路由切换时无差别的执行钩子(如果声明的话)全局守卫钩子函数有三种const router = new VueRouter({...});//全局前置守卫rou...

2018-07-03 22:37:48 833

原创 vue-router路由信息对象属性

vue路由对象为this.$route,下面详细列一下该对象属性的详细信息属性名类型读写说明$route.pathstaring只读当前路由的名字(一般为#后面的部分,但不包含query查询值)如:http://example.com/#/login?name=aathis.$route.path; //输出“/login”$route.queryobject只读可访问携带的查询参数如:th...

2018-07-02 20:48:37 7111 3

原创 vue-router传参

vue-router可以在切换时携带参数从A页面到B页面由此可以实现两个页面之间的通信,vue-router目前可用路由方式如下1.普通路由,没有携带任何参数const router = new VueRouter({ routes: [ { path: '/', component: Hello }, ]})2.动态匹配路由const router = new VueRoute...

2018-06-29 21:15:28 268

HTTP response Header列表

http请求服务单返回头部可选参数、含义、以及相关示例

2018-07-19

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除