自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 random()的使用技巧

Math.random() 方法返回大于等于0小于1的一个随机数。 套用下面的公式,就可以利用 Math.random() 从某个整数范围内随机选择一个值。 值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值) 公式中使用 Math.floor(...

2020-05-20 11:38:29 42 0

原创 三个基于子字符串创建新字符串的方法:slice()、substr()、substring()的区别

这三个方法都会返回被操作字符串的一个子字符串,而且也都接受一个或两个参数。第一个参数指定子字符串的开始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束。 slice()和 substring()的第二个参数指定的是子字符串最后一个字符后面的位置(留头不留尾)。 substr()的第二个...

2020-05-19 11:42:18 22 0

原创 VSCode编辑器中TypeScript自动编译配置

1、运行 tsc --init ,创建 tsconfig.json 文件。 2、将红色这项的注释去掉。 3、VSCode 中选择终端--运行任务 4、选择 tsc:监视 此时ts文件会自动编译成js文件并保存在js目录中

2020-05-18 23:02:57 52 0

原创 如何准确的直接打印出数据类型

function checkedType(target) { return Object.prototype.toString.call(target).slice(8, -1) } 以下分别是校验 函数、数组、对象、字符串、数值、Date、null 类型的结果

2020-05-14 15:05:20 30 0

原创 使用 JavaScript Proxy 实现简单的数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>proxy</title> </...

2020-03-03 14:48:48 90 0

原创 position 有哪些值?absolute/relative 是相对于谁定位的?

absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 relative: 生成相对定位的元素,相对于其正常位置进行定位。 fixed: 生成绝对定位的元素,相对于视窗口进行定位. static:默认值。没有定位 inherit:规定应该从父元素继承...

2020-02-18 15:12:27 55 0

原创 手写数组的 reduce 函数

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。对空数组是不会执行回调函数的。 Array.prototype.myReduce = function (fun, value = 0) { for (const ite...

2020-02-18 14:48:58 29 0

原创 说一说JavaScript 中的事件循环(event-loop)?event-loop 为什么这么设计?和 node 中事件循环有没有区别?

事件循环分为两种,macro和micro。JS执行过程中会先执行同步任务,然后清空microtask队列,最后执行macrotask,如此反复。 eventloop其实是为了解决一些异步回调,I/O操作。假设不区分marco/micro,统一都在macro处理,那callback可能就会很晚才执...

2020-02-18 13:50:39 69 0

原创 let、const、var 区别是什么?暂时性死区是什么?

let和const都是块级作用域,不存在变量前提 const是声明常量,不允许改变。但是const定义的是一个对象,keep的仅仅是对象的地址,对象内的属性依旧可以被改变。 var作用域为函数作用域 暂时性死区指的是在被let或const定义的变量,在该变量被声明之前无法被访问,会报错 ....

2020-02-18 13:39:19 116 0

原创 如何实现DFS和BFS?

DFS(深度优先搜索):遍历当前节点的全部子节点。再遍历同一级的节点 BFS(广度优先搜索):遍历兄弟节点,再遍历节点下的子节点 测试dom: <div id='root'> <span>123 &l...

2020-02-18 11:46:18 36 0

原创 ES6 的 class 继承为什么一定要写 super()?super代表什么?

ES6在继承中强制要求,必须在子类调用super,因为子类的this是由父类得来的。 super等价于parent.prototype.constructor.call(sub)。 super即可以做为函数调用,又可以做为对象使用。做为函数时,只能在constructor内部调用。做为对象则可以...

2020-02-18 10:16:27 352 0

原创 JavaScript 中,new 实现原理是什么?自己写一个 new 的实现?

创建一个新的空对象 设置这个对象的原型链为被new的prototype 把参数传入被new的对象并且绑定this 如果返回的是一个对象则直接返回对象,如果返回的是基本数据类型则忽略。 function create(Con, ...args) { const obj = {} Ob...

2020-01-21 16:55:42 42 0

原创 原型链的个人理解

构造函数: var M = function (name) { this.name = name } 获取该M构造函数的原型对象: console.log(M.prototype) 再获取M.prototype的构造函数,并证明是否结果是M: console.l...

2020-01-21 16:19:05 81 0

原创 ES6基础知识点

ES5 及 ES6 中类的区别是什么? Object.keys 没法枚举出ES6里的属性和方法,ES5可以 class 没有变量提升 class 不可重复定义,ES5的function可以覆盖前面的 ES6 中的箭头函数有什么特性?和普通函数有什么区别? 自动绑定作用域的this,指向上层...

2020-01-20 15:50:46 31 0

原创 Array.prototype.slice.call()方法理解

相信很多同学翻看代码的时候都有看到类似下面这个方法 Array.prototype.slice.call() 逐个解析这个方法: slice:用来截取截取字符串方法 Array: javascript的一个引用类型,其原型prototype上有一个方法叫slice call和apply...

2020-01-20 11:10:38 90 0

原创 手写 bind 函数

Function.prototype.myBind = function(thisArg) { if (typeof this !== 'function') { return } var _self = this var arg...

2020-01-19 17:16:36 55 0

原创 call、apply 的区别?谁性能更好?

call:第一个参数是为函数内部指定this指向,后续的参数则是函数执行时所需要的参数,一个一个传递。 apply:第一个参数与call相同,为函数内部this指向,而函数的参数,则以数组的形式传递,作为apply第二参数。 call 的性能更好,不过 lodash 里的源码当参数小于等于 3...

2020-01-19 15:20:54 172 0

原创 JavaScript 中,执行上下文及执行上下文栈是什么?

执行上下文就是指代码执行的作用域,js中常见的有全局上下文,函数上下文。 JS引擎使用执行上下文栈来管理执行上下文。上下文栈确保了JS的执行过程,我们知道JS是单线程的,所以每次需要创建新的上下文就会对应一个上下文栈,遵循先进后出的原则。 var a = 1; function b() { ...

2020-01-19 14:49:00 45 0

原创 XHR 的各种data类型对应的content-type header是什么?手写 XHR

XHR 的各种data类型对应的content-type header是什么? 1、application/x-www-form-urlencoded:最早的post请求中,参数通过浏览器url传递,不支持文件上传 POST /test HTTP/1.1 Host: foo.example ...

2020-01-17 16:44:11 149 0

原创 HTTP和HTTPS相关知识点和疑问解答

HTTPS建立连接的过程是什么? 客户端发送请求到服务器端 服务器端返回证书和公开密钥,公开密钥作为证书的一部分而存在 客户端验证证书和公开密钥的有效性,如果有效,则生成共享密钥并使用公开密钥加密发送到服务器端 服务器端使用私有密钥解密数据,并使用收到的共享密钥加密数据,发送到客户端 客...

2020-01-17 16:26:00 33 0

原创 TCP相关疑问解答

TCP连接为什么是3次握手,不是2次或4次? 为了实现可靠传输,发送方接收方始终需要同步(SYNchronize)序号,序号并不是从0开始,而是由发送方随机选择的初始序列号(Initial Sequence Number,ISN)开始。由于TCP是一个双向通信协议,通信双方都有能力发送信息,并接...

2020-01-16 15:58:12 52 0

原创 XSS攻击是什么?原理?如何避免?

跨站脚本攻击(Cross site Scripting),攻击者利用我们前后端没有做好代码转义从而执行了攻击者所写的代码。 原理? 反射型XSS攻击:攻击者把恶意代码拼接在URL上诱导用户打开并执行。常见的是超链接跳转、搜索等,预防这类攻击主要在于取url字段,或者渲染超链接时,内联JS事件都...

2020-01-10 14:10:46 110 0

原创 从输入url到浏览器显示页面,中间经历过什么过程?浏览器的渲染过程是怎样的?重排/重绘是什么?浏览器的HTML/CSS/JS解析过程是怎样的?

从输入url到浏览器显示页面,中间经历过什么过程? DNS(域名)解析:优先查找缓存,如果 DNS 已经缓存了直接过,否则不断溯源向上查找,直到找到为止(顺序:浏览器-操作系统-路由) tcp链接(三次握手) 发送HTTP请求,如果是HTTPS还需建立SSL,如果是H2则会判断是否支持H2,...

2020-01-10 10:33:49 51 0

原创 递归方式实现深拷贝

通常JSON.parse(JSON.stringify())的方式进行深拷贝是不可以拷贝undefined、function、RegExp等类型。 递归拷贝可以解决此类问题: // 定义一个深拷贝函数 接收目标target参数 function deepClone(targ...

2019-11-27 15:02:07 112 0

原创 前端错误监控了解

前端错误的分类 即时运行错误:代码错误 资源加载错误 错误的捕获方式 即时错误的捕获方式 try..catch window.onerror 资源加载错误 1、object.onerror 2、performance.getEntries() // 在浏览器Console输入...

2019-07-09 21:49:47 57 0

原创 提升页面性能的方法有哪些?

1、资源压缩合并,减少HTTP请求 2、非核心代码异步加载 (1)异步加载的方式 动态脚本加载(document创建一个script标签加在body或者head上) defer async (2)异步加载的区别 defer是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执...

2019-07-08 22:32:50 429 0

原创 浏览器的渲染机制简介

什么时候DOCTYPE及作用 DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式。 DOCTYPE是用来声明文档类型和DTD规范的,一个主...

2019-07-08 21:27:52 78 0

原创 算法之排序算法(快速、选择、冒泡、希尔)

排序算法大致有这些: 常用的排序算法大致四种快速、选择、冒泡、希尔 1、快速排序 快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用。快速排序是一种既不浪费空间又可以快一点的排序算法。 先从数列中取出一个数作...

2019-07-07 20:59:45 194 0

原创 安全之CSRF简介

CSRF(Cross-site request forgery)通常称为跨站请求伪造。 攻击原理: 1、用户登录网站A,验证身份,下发cookie并保存在浏览器中 2、用户访问网站B,网站B存在引诱点击,点击访问A网站 3、因为A网站存在cookie,可使用户自动登录A网站并通过身份验...

2019-07-07 15:20:25 48 0

原创 webpack之优化构建时命令行的显示日志(stats、friendly-errors-webpack-plugin)

这里介绍两种方法,1、是webpack的stats的优化方式 2、利用friendly-errors-webpack-plugin插件优化日志 1、webpack的stats的优化方式 主要有以下几个配置参数: 默认情况下是verbose,也就是全部输出,此刻我们将他改为“error...

2019-07-03 22:49:29 1484 0

原创 webpack打包组件和基础库

webpack除了打包应用,也可以用来打包js库 需要打包压缩版和非压缩版本 支持 AMD/CJS/ESM 模块引入 如何将库暴露出去? library:指定库的全局变量 libraryTarget:支持库引入的方式 1、新建项目,并安装webpack和wbpack-cli npm i...

2019-06-28 00:32:04 1056 0

原创 webpack之与Eslint结合

Eslint有多种团队规范,例如:Airbnb、alloyteam、ivweb 此处主要以Airbnb为例,使用eslint-loader,构建时检查JS规范 1、安装eslint依赖(此处以react开发环境为例,vue等其他开发环境有所不同,参考:https://www.npmjs.com...

2019-06-25 23:38:23 187 0

原创 webpack之代码分割和动态import

1、安装babel插件 npm install @babel/plugin-syntax-dynamic-import --save-dev 2、添加配置.babelrc(ES6: 动态import目前还没有原生支持,需要babel转换) { "plugins"...

2019-06-25 21:40:27 362 0

原创 webpack之摇树优化(tree shaking)

tree shaking主要作用是打包项目时会将不用到的方法不打包入项目中,这样得以优化项目体积。 主要原理: 利用ES6模块的特点: 只能作为模块顶层的语句出现 import 的模块名只能是字符串常量 import binding 是 immutable的 代码擦除:uglify阶段...

2019-06-25 20:54:14 611 0

原创 webpack之提取页面公共资源(SplitChunksPlugin)

利用SplitChunksPlugin进行公共脚本分离,Webpack4内置的,替代CommonsChunkPlugin插件。 chunks参数说明: async:异步引入的哭进行分离(默认) initial:同步引入的库进行分离 all:所有引入的库进行分离 minChunks:设置最...

2019-06-24 23:21:24 835 0

原创 webpack之多页面应用打包通用方案(glob)

使用glob来处理 1、安装glob npm i glob -D 2、项目处理,将代码放在src目录下,例如此处就拆分为两个项目,分别为index和search,index和search文件夹下入口文件必需使用index作为文件名 3、在webpack.prod.js配置文件下进行如...

2019-06-18 23:43:42 845 0

原创 webpack之静态资源内联(raw-loader)

主要是用 raw-loader来实现静态资源内联 1、安装raw-loader(此处使用比较老的版本 0.5.1 来实现) npm i raw-loader@0.5.1 -D 2、假设项目为移动端项目,需要使用lib-flexible来做适配处理 一般使用方法是直接将lib-flexib...

2019-06-18 23:02:01 2615 0

原创 vue异步引入百度地图API

看了下官网上的方法,是采用原生的写法,不适用于vue 异步引入的好处是baiduAK可以方便管理 import { baiduAk } from '@/settings' export function map() { /* eslint-disable */ ...

2019-06-18 11:47:23 270 0

原创 webpack之css自动转rem(px2rem-loader)

主要是使用 px2rem-loader 插件配合lib-flexible来实现 1、安装px2rem-loader npm i px2rem-loader -D 2、配置px2rem-loader { ...

2019-06-17 23:52:14 959 0

原创 webpack之自动补齐css前缀,增强项目兼容性(postcss-loader autoprefixer)

通过 postcss-loader 和 autoprefixer 两款插件实现 1、安装两款插件 npm i postcss-loader autoprefixer -D 2、在webpack.prod.js中加入以下配置 { t...

2019-06-17 23:27:22 1265 0

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