- 博客(29)
- 收藏
- 关注
RSS订阅原创 用JavaScript实现一个简易的区块链
安装依赖模块npminstallcrypto-jsconst sha256 = require('crypto-js/sha256')class Block { constructor (data, prevHash) { this.data = data this.prevHash = prevHash this.hash...
2020-03-21 15:49:45
663
原创 封装axios定义ajax请求函数统一处理请求异常
import axios from 'axios';import message from 'antd';export default function ajax(url, data={}, type='GET') { return new Promise((resolve, reject) => { let promise if (type=...
2020-03-14 19:40:19
159
原创 前端性能优化
从输入URL到页面加载完成，发生了什么?用户输入baidu.com 浏览器通过DNS，把ur解析为IP IP地址建立TCP链接发送HTTP请求 服务器接收请求，查库，读文件等，拼接好返回的HTTP响应 浏览器收到首屏html，开始渲染 解析html为dom 解析css为css-tree dom+css生成render-tree绘图 加载script的js文件 执行js所谓性...
2020-03-12 14:58:00
329
原创 常见的web攻击方式之clickjacking点击劫持
定义点击劫持是一种视觉欺骗的攻击手段。 攻击者将需要攻击的网站通过frame嵌套的方式嵌入自己的网页中，并将 iframe设置为透明，在页面中透出一个按钮诱导用户点击。模拟攻击登录http://localhost:4000/clickjacking.html<!DOCTYPE html><html lang="en"><head> &...
2020-03-10 13:10:32
277
原创 常见的web攻击方式之CSRF
定义CSRF(Cross Site Request Forgery)，即跨站请求伪造,是一种常见的Web攻击 它利用用户已登录的身份，在用户毫不知情的情况下，以用户的名义完成非法操作。操作实现用户已经登录了站点A，并在本地记录了 cookie 在用户没有登出站点A的情况下(也就是 cookie生效的情况下)，访问了恶意攻击者提供的引诱危险站点B(B站点要求访问站点A) 站点A没有做...
2020-03-10 12:20:08
174
原创 常见的web攻击方式之XSS
XSSCross-Site Scripting，跨站脚本攻击，因为缩写和CSS重叠，所以只能叫XSS。 是指向有安全漏洞的web页面或者网站的url运行非法的非本站点HTML标签或JavaScript进行的一种攻击。 有可能造成以下影响：利用虚假输入表单骗取用户个人信息。 利用脚本窃取用户的Cookie值，被害者在不知情的情况下，帮助攻击者发送恶意请求。 显示伪造的文童或图片。XS...
2020-03-10 11:02:17
168
原创 Vuex核心概念和API
statevuex管理的状态对象 是唯一的const state = { xxx: initValue}mutations包含多个直接更新state的方法（回调函数）的对象 由action中的commit('mutation名称')触发 只能是同步代码，不可以异步const mutation = { xxx(state, { data1 }){ ...
2020-03-08 18:57:04
134
原创 Vue源码分析之双向数据绑定
双向数据绑定建立在单向数据绑定（model-view）的基础之上 实现流程：解析v-model指令时给当前元素添加input监听 当input的value发生改变时，将最新的值赋给当前表达式所对应的data属性Compile.prototype = { compile: function (node) { var attrs = node.attributes,...
2020-03-07 11:27:46
135
原创 Vue源码分析之数据绑定Dep与Watcher的关系
数据绑定数据绑定一旦更新了data中的某个属性数据，所有界面上直接（this.xxx='aaa'）或间接（计算属性或方法）使用了此属性的节点都会更新数据劫持数据劫持是vue中用来实现数据绑定的一种技术 基本思想：通过defineProperty()来监视data中所有属性（任意层次）数据的变化，一旦变更就去更新界面...
2020-03-06 21:47:45
1862
4
原创 Vue源码分析之模板解析
模板解析基本流程1、将el的所有子节点取出，添加到一个新建的文档fragment对象中function MVVM (options) { this.$options = options var data = this._data = this.$options.data var me = this // 创建一个编译对象 this.$comp...
2020-03-05 18:47:57
172
原创 Vue源码分析之准备知识点和数据代理
准备知识点1、[].slice.call()/Array.prototype.slice.call() 将伪数组转换成真数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...
2020-03-05 18:45:08
113
原创 定义一个基本的axios函数实现ajax请求
json-server用来模拟服务器API，测试接口 全局安装npm install -g json-server创建一个db.json文件{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": ...
2020-03-04 13:05:25
177
原创 JS异步中的宏任务和微任务
1、JS中用来存储待执行回调函数的队列包含2个不同特定的列队2、宏列队：用来保存待执行的宏任务（回调），比如：定时器回调/DOM事件回调/ajax回调3、微列队：用来保存待执行的微任务（回调），比如：promise回调/MutationObserver回调4、JS执行时会区别这两个队列JS引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前，都要将所有的微任...
2020-02-28 19:56:39
230
原创 ES7中的async和await
async函数函数的返回值为promise对象 promise对象的结果由async函数执行的返回值决定await表达式await右侧的表达式一般为promise对象，但也可以是其它的值 如果表达式是promise对象，await返回的是promise成功的值 如果表达式是其它的值，此值为await表达式的返回值注意await必须写在async函数中，但async函数中可以没...
2020-02-28 18:06:57
128
原创 定义自己的Promise
ES5版本/* 自定义Promise函数模块：IIFE*/(function(window){ const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' /* Promise构造函数 excutor：执行器函数（同步执行） ...
2020-02-28 13:24:50
135
原创 深入理解JS中的Promise
定义抽象表达promise是JS进行异步编程的新的解决方案具体表达从语法上来说promise是一个构造函数从功能上来说promise用来封装一个异步操作并获取结果作用指定回调函数更加灵活普通回调函数：必须在启动异步任务之前指定promise：启动异步任务 > 返回promise对象 > 给promise对象绑定回调函数支持链式调用，解决了回调地狱ap...
2020-02-26 14:12:43
296
原创 JS数组扁平化的5种方式
ES6提供的Array.prototype.flat方法let arr = [10,[1,2],[12,[3,4,[5,6,16]],6,6],7];arr = arr.flat(Infinity);arr = Array.from(new Set(arr)).sort((a, b) => a-b)console.log(arr) //[1, 2, 3, 4, 5, 6,...
2020-02-11 21:24:56
200
原创 MongoDB安装教程
MongoDB下载地址https://www.mongodb.com/download-center/enterpriseMongoDB可视化工具compass下载地址https://www.mongodb.com/download-center/compass下载完之后一路安装即可配置环境变量系统属性——环境变量——双击path编辑，你的MongoDB安装在哪里就写哪个地...
2020-02-11 13:03:11
137
原创 JS中的单例模式
ES6中的单例模式定义：无论实例化多少次，构造函数只执行一次优点：有利于提高性能class Db { constructor () { console.log('实例化会触发构造函数') this.connect() } connect () { console.log('连接数据库') } ...
2020-02-10 20:18:32
243
原创 es5和es6中的继承和静态方法
ES5中的静态方法function Person(name, age){ this.name = name this.age = age this.run = function () { console.log(`${this.name}---${this.age}`) }}Person.work = function () { ...
2020-02-10 20:08:01
229
原创 Koa入门
安装插件npm i koa koa-router -S引入模块const Koa = require('koa');const Router = require('koa-router');实例化let app = new Koa();let router = new Router();路由配置//localhost:9090/router.get('/', ...
2020-02-10 17:16:31
82
原创 排序算法——插入排序
定义从右向左进行比较，使手中的牌总是有序的适应性对于少量元素排序来说是一个有效的算法工作方式类似扑克牌，第一次手中只有一张牌，抽第二张时，与第一张作比较，比第一张小就往它前面插，抽第三张时，依次与从右至左与第二张第一张作比较，直至插入至合适的地方图文详解代码实现function sort(arr) { for (let j = 1, len = arr.le...
2020-02-05 21:38:52
115
原创 CORS跨域简单请求与非简单请求
定义CORS全称是跨域资源共享（Cross-orgin resource sharing）作用允许浏览器向跨源服务器发起请求，突破了同源限制问题使用浏览器和服务器要同时支持，IE版本不能低于10 分为简单请求和非简单请求，以下分别从几个方面来区分，下面SR为简单请求缩写，NSR为非简单请求1、请求方法SR—POST/GET/HEADNSR—PUT/DELETE...
2020-02-05 19:44:47
584
原创 JavaScript数据类型详解
1、基本数据类型number、string、boolean、undefined、null 2、引用数据类型object：普通对象{}、数组对象[]、正则对象/^$/、日期对象new Date() 、Math对象 、实例对象…… 数组是特殊的对象 对象的属性名可以是基本类型值，不可以是引用类型值，但是可以把引用类型存在一个变量中，默认会转换为字符串进行处理 例如：let o...
2020-02-03 19:57:40
71
原创 js创建平衡二叉树（AVL）和搜索二叉树（BST）
class tree { constructor (val) { this.val = val this.left = this.right = null } }搜索二叉树：class BST { constructor (data) { let len = data.length, i...
2019-03-28 11:34:18
223
原创 for循环中有setTimeout的情况下依次输出索引的三种方法
众所周知，下面这种写法，输出都是 6个6，但是我们想依次输出012345怎么办呢，有三种办法for (var i = 0; i < 6; i++) { setTimeout(() => { console.log(i) }, 500*i)}第一种很简单就是把var改成let第二种是使用闭包for (var i = 0; i <...
2019-03-02 12:16:43
837
1
原创 LeetCode：子数组的最小值之和
一开始的思路是打算先求出所有子数组，然后排序子数组，最后相加，然而运算太复杂，会超出时间限制sumSubarrayMins (arr) { let i, j, subarr, allarr = [], res = 0 for (i = 1; i < arr.length + 1; i++) { for (j = 0; j < ...
2019-02-15 13:51:29
407
原创 js深拷贝
数组：arrDeepCopy () { let arr1 = [1,2,3,4,5], arr2 = [] arr1.map((val, index)=>{ arr2[index] = val }) arr2[2] = 2 console.log(arr1) console.log(arr2) ...
2019-02-14 09:12:58
71
原创 领扣 LeetCode：第k个排列
原文参考链接：https://www.cnblogs.com/ariel-dreamland/p/9149577.html//第k个排列 getPermutation (n, k) { let arr = [], i, j, res = [], temp, result = '' //放入n个数 for (i = 0; i < n; i++)...
2019-02-13 15:32:32
135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人