![](https://img-blog.csdnimg.cn/20191016210702678.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
学习
文章平均质量分 60
Garrettzxd
没有那么多可以说的
展开
-
Oauth 2.0授权流程
最近业务原因接触到第三方授权的规范第三方授权方式有很多种,比如每个平台都有相似之处但也有些差别但是大都遵循Oauth 2.0这一套流程,至于是不是标准的Oauth 2.0就另外一说了下面详细介绍一下Oauth 2.0的授权流程(代码层面)1.授权前提条件(以平台为例子)1):一般现在平台建立应用其目的是获得平台对建立应用的唯一标识app_id2):知晓授权的路径及相关规则原创 2017-12-04 21:39:27 · 476 阅读 · 0 评论 -
Promise回调执行顺序
ES6中的Promise十分的好用,可以在一定程度上有效的避免回调嵌套的尴尬境地,但是promise.prototype.then调用顺序却容易被忽视then()的执行顺序是在主要操作执行完成后再执行,即使代码顺序写在then()后面,也是先执行后再执行then()里面的回调console.log('before promise');function test() { return ...原创 2018-08-02 21:23:37 · 1680 阅读 · 0 评论 -
vue过滤器filters
在vue中有个类似实例组件中computed的资源选项,那便是过滤器filters,为什么说类似呢,因为他们都可以对已有的数据进行加工再返回加工后的数据,但是两者又有着明显的区别,下面先阐述什么是vue过滤器1.用途:常在v-bind与{{}}里使用2.本质:是声明的函数,最终返回结果3.声明:可在实组件例局部声明也可在全局声明 使用方法如下声明过滤器<temp...原创 2018-08-06 22:18:42 · 428 阅读 · 0 评论 -
利用vue-router改善数据获取
有时候我们会对用户有个性化设置,比如在A页面用户可以选择性的展示若干个模块,是否展示的判断标准存在数据库,因此路由到这个页面时需要调用接口获取数据判断到底是哪些模块要显示,哪些是不需要显示的正常情况下在路由导航到此页面创建完成时调用接口获取数据会有不好的用户体验,此时会有页面抖动现象<template> <div class="text"> <span...原创 2018-07-31 22:26:47 · 475 阅读 · 0 评论 -
JS实现集合类
集合是基本的数学知识,在程序应用中也十分的常见,但是通过js实现集合在网上查了下并不是很多,有些也是使用比较传统的方法实现,当然不是说传统的方法有什么缺点,传统方法兼容性更好我发现在ES6中天然适合做集合的Set类,由于Set具有元素唯一性,这个特性也正是集合的最基本特性之一,因此能够用简洁的代码实现类的抽象类常见的运算有查找、增加、删除、合集、并集、差集、子集等等操作,通过Set十分方...原创 2018-07-27 21:34:50 · 675 阅读 · 0 评论 -
有关setTimeout的输出
今天无意间看到有关setTimeout()的各种输出结果,常见如下//for在全局环境为前提for(var i = 0; i < 5; i++){ setTimeout(function(){ console.log(i); },1000);}//输出5个5以上代码输出5个5,而不是0,1,2,3,4;这是为什么呢,网上一大堆解释,但是很多都是一样的,我并不认同,网上...原创 2018-07-30 21:21:14 · 1114 阅读 · 0 评论 -
ES6箭头函数this指向
箭头函数是简化的回调函数,能够在一定程度上简化代码let num = [1,2,3];num.map(function(item) { return item * item;});num.map(item => item * item);以上两种写法结果是一样的,但是并不能说以上两种是完全等价的,其中之一便是两者的this指向问题箭头函数本身没有this,因此在t...原创 2018-07-21 22:39:25 · 284 阅读 · 0 评论 -
JS与或运算
说来惭愧,JS基本的与或运算都没掌握完全,下面说一下与或运算的结果1.与运算(&&)与运算有可能返回五种结果,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 · 8397 阅读 · 3 评论 -
web跨域之JSONP
现代浏览器在安全为前提下,由望京公司在浏览器中引入同源策略,同源策略在一定程度上能够提高网络安全性,但是有利有弊,也在一定程度上限制了网络资源的共享同源策略:1.交互协议相同:同为http或https或其他协议2.域名相同:指完整域名相同,只是顶级域名相同并不行3.端口相同:必须在同一端口下如同为80端口在开发过程中多少会遇到跨域的问题,解决跨域常见的方法之一是JSONP方式,...转载 2018-07-19 20:44:40 · 214 阅读 · 0 评论 -
js深复制
JS深复制在业务场景中十分的常用,为什么要深复制,这涉及到JS的数据类型的问题JavaScript分为两种数据类型引用数据类型和非引用数据类型,引用数据类型常见的有object、array、null等,而string、number、Boolean、undefined等属于非引用数据类型,两者的差别之一是引用数据类型指向堆内存,非引用指向栈内存,明显的区别是在赋值的时候let a = 1;...原创 2018-08-12 10:59:10 · 1156 阅读 · 0 评论 -
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 · 182 阅读 · 0 评论 -
有效的数独
有9x9数量不变数独用二维数组表示,检查数独是否满足以下条件:数字1-9每行只能出现一次 数字1-9每列只能出现一次 数字1-9每3x3的框内只能出现一次数独空白部分用‘.’填充,列子如下var a = [ ["5","3",".",".","7",".",".",".","."], ["6&qu原创 2019-02-20 22:24:32 · 295 阅读 · 0 评论 -
浏览器请求资源的过程
如果存在service work,会先触发cache事件,判断是否命中service work中的缓存 未命中则memory-cache中查找命中 未命中则disk-cache中查找命中,其中如果有强缓存且缓存没有过期,则使用强缓存状态全部为200,若强缓存失效则使用协商缓存最后根据文件状态判断是304(请求服务器发现没有更新)还是200 未命中则发送网络请求 吧响应数据存储在disk-c...原创 2019-02-25 22:23:45 · 642 阅读 · 0 评论 -
VUE keep-alive理解分享
在vue中keep-alive能够被经常使用到,下面总结下使用方法、技巧、概念1.通常用来包裹组件使用,本身没有意义,不会产生任何可视的元素,与component一起使用<keep-alive> <component :is="view"></component></keep-alive>2.在包裹组件时可以默认缓存组件,所谓...原创 2019-03-04 21:35:35 · 726 阅读 · 0 评论 -
若干字符串公共前缀
有若干字符串,找出若干字符中最大相同的子串,例子如下:['flow', 'flew', 'fly'] => 'fl'此时上面字符串最大相同的子串就是'fl',示例代码如下/** * [longestCommonPrefix] * @param {string[]} strs * @return {string} */var longestCommonPrefix = ...原创 2019-02-13 21:07:55 · 740 阅读 · 0 评论 -
JS事件循环优先级
由于JS是单线程的,但是JS又又异步处理概念,那么是怎么处理这个异步的东西的呢,这个时候就有了事件循环的概念在JS里事件循环是很重要的概念,代码的执行栈都是以事件循环为标准的具体的事件循环概念这里就不详细解释描述,主要讲述事件循环中的执行优先级问题,这里涉及到到概念还有宏任务、微任务等很多面试都遇到这段代码输出的顺序是什么这样的问题,下面就是这么一个简单的问题function tes...原创 2019-02-18 21:41:20 · 1165 阅读 · 0 评论 -
旋转矩阵
给定一个 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 · 1154 阅读 · 0 评论 -
ES6 async await原则探索
ES6中新增异步函数,即在函数声明前加上async即可,使得异步操作更加方便简洁,其中await是在async函数中独有的在执行过程中一旦遇到await就会先返回,等到异步操作完成之后再接着执行函数后面的语句,这句话是什么意思呢一旦遇到await就立刻让出线程,阻塞后面的代码 如果不是promise,await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完毕后再回到...原创 2019-02-15 21:27:38 · 340 阅读 · 0 评论 -
vuex代码结构
vuex是一套相对独立的代码,因此可以抽象出到单独的文件夹里,那么比较好的代码结构是啥样的?话不多说,以下是vuex比较好的代码结构├── index.html├── main.js├── api│ └── ... # 抽取出API请求├── components│ ├── App.vue│ └── ...└── store ├── index.js ...原创 2018-07-06 21:34:19 · 718 阅读 · 0 评论 -
vue实现路由切换改变title
由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示├── index.html├── main.js├── api│...原创 2018-07-12 21:37:55 · 3663 阅读 · 0 评论 -
浏览器请求过程
1)浏览器查询 DNS,获取域名对应的IP地址具体过程包括浏览器搜索自身的DNS缓存、搜索操作系统的DNS缓存、读取本地的Host文件和向本地DNS服务器进行查询等。对于向本地DNS服务器进行查询,如果要查询的域名包含在本地配置区域资源中,则返回解析结果给客户机,完成域名解析(此解析具有权威性);如果要查询的域名不由本地DNS服务器区域解析,但该服务器已缓存了此网址映射关系,则调用这个IP地址映射...转载 2018-06-16 09:57:58 · 525 阅读 · 0 评论 -
JS遍历性能比较(for与for...in以及for...of)
话不多说,上代码及展示结果,let arr = new Array();for(let i = 0, len = 1000000;i < len; i++){ arr.push(i);}function foradd(my_arr){ let sum = 0; for(let i = 0; i < my_arr.length; i++){ sum += my_a...原创 2018-06-08 22:47:34 · 5914 阅读 · 0 评论 -
JS基本数据类型判断方法
通常来讲js有七种基本数据类型但是ES6又新增一种基本数据类型Symbol数据类型那么常见数据类型的判断使用typeof来判断以下是typeof判断数据类型结果表typeof操作表值操作结果说明123typeofnumber正常显示'str'typeofstring正常显示truetypeofboolean正常显示nulltypeofobject作为对象的引用undefinedtypeofunde...原创 2018-06-22 22:19:56 · 332 阅读 · 0 评论 -
字符串拼接性能比较
话不多说直接上代码看一下拼接方法差异let arr = [];//数组有若干字符串for(let i=0;i<100000;i++){ arr.push(i+'A');}//性能计算原理//主要看同样遍历次数下时间消耗对比function add1(){ let str = null; let start_time = new Date().getTime(); for...原创 2018-06-14 21:13:57 · 780 阅读 · 0 评论 -
ES6 Object.assgin()详解
关于assgin()基本的这里就不讲解了,详细请参考阮一峰老师的ES6教程Object.assgin()文档大致是合并对象所用,但是合并有一下几点需要注意1.只有一个参数时返回原对象本身具体请参考如下代码let source = {a:1}; //原对象let target = {}; //目标对象target = Object.assgin(source); //只有...原创 2018-06-21 21:40:30 · 2098 阅读 · 0 评论 -
from memory cache与from disk cache详解
在chrome浏览器中的控制台Network中size栏通常会有三种状态1.from memory cache2.from disk cache3.资源本身的大小(如:1.5k)那么问题来了1.三种区别在哪里;2.浏览器采取不同措施的原则是什么;3.其他浏览器的策略下面分别讲述以上三个问题1.三种区别在哪from memory cache:字面理解是从内存中,其实也...原创 2018-06-13 21:18:35 · 30753 阅读 · 2 评论 -
vue插件初探
vue插件很多,也有官方插件,vue插件定位并不死板,按照官方说法是如此的先上vue插件文档,不熟悉的可自行查阅先vue插件官方文档插件一般有一下几种(来自官方文档)1.添加全局方法或者属性2.添加全局资源:指令/过滤器/过渡等3.通过全局 mixin 方法添加一些组件选项4.添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现5.一个库,提供自己的 API,同时提供上面提...原创 2018-06-20 21:45:15 · 226 阅读 · 0 评论 -
前端懒加载(简易版)
懒加载 前端优化 图片加载原创 2017-12-14 21:50:32 · 765 阅读 · 1 评论 -
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 · 278 阅读 · 0 评论 -
JS对象遍历
话不多说此篇阐述js对象遍历的常见方法以及遍历规则1.常见遍历方法 方法 说明 结果 for...in 常规遍历得到key值,遍历自身及继承的可枚举属性 String Object.keys(obj); 遍历返回由key组成的数组,自身可枚举属性键名 [key1,key2,...] Object.values(obj); 遍历返回由...原创 2018-06-25 21:54:57 · 382 阅读 · 0 评论 -
常见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 · 5582 阅读 · 0 评论 -
vuex基础理解
vuex是vue的一个插件,下面要从以下三方面来初步了解以下vuex1.vuex是什么官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化通俗解释:官方解释我不会自己去看?还要你解释(手动滑稽),于是就有了通俗解释,vuex可以把它理解为是在项目内全局声明的一些通用变量(注意是可以理解为...原创 2018-07-05 20:43:07 · 308 阅读 · 0 评论 -
flex布局学习笔记
在非常熟悉的盒子模型下也有不少的缺点,比如不易实现垂直居中,元素的位置常常要依靠浮动定位等才能解决,在响应式方面盒子模型布局也并不是多么得心应手,而flex布局能在一定程度上解决上述问题,下面归纳一下flex布局的一些基本知识要点及注意事项1.任一容器都能指定flex布局<div class="content"></div><span class="cont">...翻译 2018-07-11 22:08:21 · 328 阅读 · 0 评论 -
vue-router导航守卫
导航守卫这个名字听起来略微有点中二(手动滑稽)回归正题,导航守卫大体上分为以下三类:1.全局守卫钩子2.独享守卫钩子3.路由组件守卫钩子下面详细说明以上三种守卫钩子包含的方法及调用时序1.全局守卫钩子全局守卫顾名思义是在路由全局执行,即在路由切换时无差别的执行钩子(如果声明的话)全局守卫钩子函数有三种const router = new VueRouter({...});//全局前置守卫rou...原创 2018-07-03 22:37:48 · 855 阅读 · 0 评论 -
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 · 245 阅读 · 0 评论 -
前端版本控制
最近由于前端重构改版碰到版本问题,是vue脚手架搭建的工程具体问题如下:新版本文件结构变更较大,与老版本文件结构不兼容,导致部分用户的项目入口文件index.html因为浏览器缓存问题请求到老版本的资源,然而老版本资源文件已经没有了,因此会报错或者根本打不开入口文件此原因也是因为发版导致,发版把老版本的资源完全删除,将新资源替换进去正确的应该是直接将新资源放在该文件目录下,老版本的资源文件保持不动...原创 2018-06-27 21:04:16 · 1821 阅读 · 0 评论 -
css水平垂直居中(常见)
实际上css水平居中比较容易实现,方法也有很多,但是垂直居中补胎费方便实现,原因也算是当前的盒子模型的一个缺陷吧,但是也只是不方便实现方法也还是有不少,下面说一下常见可用的方法吧有一下结构<div class="text"> <span>Hello World!</span></div>1.table-cell居中.test{ display:...原创 2018-07-09 21:18:38 · 173 阅读 · 0 评论 -
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 · 7142 阅读 · 3 评论 -
web页面回流与重绘
当浏览器必须重新处理和绘制部分或全部页面时,回流就会发生,例如当一个交互式站点更新后,前面这段话是在MDN上对回流的表述,那么这段话啥意思呢,实际上就是当元素的内容、结构、位置、尺寸等发生变化时会引起回流,而回流必定会引起重绘页面初始化 DOM树发生变化(增删节点) render树变化(如padding变化) 窗口resize以上都会导致回流的产生...原创 2019-02-20 22:26:35 · 291 阅读 · 0 评论