- 博客(46)
- 收藏
- 关注
RSS订阅原创 我对BFC的理解
BFCBFC 是什么东西BFC 称为块级格式化上下文，是一个拥有独立渲染区域的盒子，规定内部元素如何布局，并且盒子内部元素与外部元素互不影响BFC 渲染规则内部的盒子会在垂直方向，一个接一个的放置盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻的盒子的 margin 会发生重叠计算 BFC 高度的时，浮动的元素也参与计算BFC 就是页面上一个隔离的独立容器，里面的子元素不会影响到外面的元素BFC 解决了什么问题两栏布局<!DOCTYPE html>
2021-06-07 20:51:53
190
2
原创 前端安全：XSS和CSRF
谈谈你对XSS攻击的理解什么是XSS攻击XSS全称是Cross Site Scripting,为了与CSS区分开来，故简称XSS，翻译过来就是跨站脚本XSS是指黑客往HTML文件或者DOM中注入恶意脚本,从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段最开始的时候，这种攻击是通过跨域来实现的，所以叫跨域脚本，现在插入恶意代码的方式越来越多，所以是否跨域注入脚本已经不是唯一的注入手段了，但是这个XSS名字却一直保留至今注入恶意脚本可以完成这些事情窃取cookie监听用户行为，比如
2021-06-07 20:45:19
335
4
原创 深入跨域
深入跨域，理论和实践讲一下跨域是什么一个源加载文档或者脚本和来自另一个源的文档和脚本等资源进行交互(也就是不满足同源策略的两个源之间进行一些交互)，就是跨域2.同源策略2.1同源策略是什么所谓的同源指的是"三个相同”协议相同域名相同端口相同举个例子:http://www.wuhuiluo.com/dir/page.html这个而网址，协议是http://,域名是www.wuhuiluo.com,端口是80(默认端口可以省略),来看看下面改变的哪些是同源哪些不是同源http://w
2021-05-19 16:42:10
198
原创 Vue自测
1.说说你对SPA单页面的理解。它的优缺点分别是什么？SPA仅在Web页面初始化加载相应的HTML、Javascript和CSS，一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用路由机制实现HTML内容的变换，UI与用用户的交互，避免页面重新加载。优点用户体验好，快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染基于上面一点，SPA相对对服务器压力小前后端分离职责，架构清晰，前端进行交互逻辑，后端负责数据处理缺点初次加载耗时多，为实现
2021-05-18 14:19:49
128
原创 HTTP协议与计算机网络总结
HTTP协议与计算机网络1.TCP和UDP-UDPTCP是否可连接无连接面向连接是否可靠不可靠传输，不使用流量控制和拥塞控制可靠传输链接对象个数一对一，一对多，多对一，多对多一对一传输方式面向报文面向字节流首部开销首部开销小，8字节首部最小20字节，最大60字节使用场景实时应用（IP电话，视频会议，直播等）适用于可靠传输的应用，比如文件传输2.TCP三次握手，两次行不行，四次行不行，四次挥手三次握手第一次: clien
2021-05-15 14:42:00
87
原创 xx和xx的区别
1.箭头函数和普通函数的区别1.箭头函数和普通函数的样式不同，箭头函数语法更加简洁、清晰，箭头函数是=>定义函数，普通函数是function定义函数2.箭头函数会捕获其所在上下文的this值，作为自己的this值，定义的时候就确定并固定了。3.箭头函数不能作为构造函数使用，也不能使用new关键字(因为箭头函数没有自己的this，他的this其实是继承了外层执行环境中的this，且this指向永远不会改变，作为构造函数其的this要是指向创建的新对象)4.箭头函数没有自己的grg
2021-05-08 13:41:32
2205
原创 同一个套路实现 Promise 的 all、allSettled、any、race 方法
共同点这些方法的参数都接受一个promise的iterable类型(Array,Map,Set都属于ES6的iterable类型)的输入这些方法都返回一个Promise实例不同点1.返回的Promise实例的状态改变时机不同all 方法在所有输入的Promise实例都resolve后执行自身的resolve回调，在任意一个输入的Promise实例reject后执行自身的reject回调allSettled方法在所有输入的Promise实例都改变了状态(执行resolve回到或rejec
2021-04-11 16:20:36
676
原创 完整实现原生Promise
手写前需要了解这些1.什么是宏任务我们都知道JS是单线程的，但是一些高耗时操作就带来了进程阻塞的问题，为了解决这个问题，JS有两种任务的执行模式，同步模式和异步模式。在异步模式下，创建异步任务主要分为宏任务和微任务两种，宏任务是由宿主（浏览器、Node）发起的，而微任务由JS自身发起。宏任务与微任务的几种创建方式 ????宏任务（Macrotask）微任务（Microtask）setTimeoutrequestAnimationFrame（有争议）setIntervalMutationObserv
2021-04-08 20:25:31
666
1
原创 冒泡排序，选择排序，插入排序，快速排序
1.冒泡排序 Bubble Sort原理: 冒泡排序在每次冒泡操作时会比较相邻的两个元素，看是否满足大小关系要求，不满足就将它俩互换。一直迭代到不再需要交换，也就是排序完成。function BubbleSort(arr) { let temp for(let i = 0 ; i < arr.length - 1 ; i++) { for(let j = 0 ; j < arr.length - 1 - i; j++) { if(arr
2021-04-07 20:56:40
175
原创 实现instanceof
instanceof用来检测某个实例对象的原型链上是否存在构造函数的prototype属性手写instanceof原理：原型链的向上查找function myInstanceof(L, R) { // 基本数据类型直接返回false if (typeof L !== 'object' || L === null) return false //getProtypeOf是Object对象自带的一个方法，能够拿到参数的原型对象 let proto = Object.get
2021-04-06 20:00:40
185
2
原创 实现一个简易的new操作符
new的用法// 定义构造函数function Person (name) { this.name = name;}Person.prototype.age = 18;// 创建实例var person = new Person('whl');// 调用实例console.log(person.name); // whlconsole.log(person.age); // 18console.log(person); // Person {name: whl"}这是一个很
2021-04-06 19:31:30
169
原创 ES5-ES6数组方法
ES51.indexOf用途：用于查找数组中是否存在某个值，如果存在则返回某个值的下标，否则返回-1let list = [1, 2, 3];console.log(list.indexOf(2)) // 1console.log(list.indexOf("whl")) // -12.map用途：map是一个数组函数方法，接收三个参数，value，index，arr，返回值是处理完的结果。let list = [1, 2, 3]const res = list.map((
2021-04-05 00:01:18
306
原创 Vue声明周期
什么是vue的生命周期Vue实例从创建到销毁的过程，就是生命周期创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、销毁等一系列过程Vue生命周期可以简单分为四个阶段:创建阶段 beforeCreate,created挂载阶段 beforeMount,mounted运行阶段 beforeUpdate,updated销毁阶段 beforeDestroy,destroyed所有生命周期钩子函数自动绑定this上下文实例中，因此你可以访问数据,你不能用箭头函数来定义一个生命周期方法（
2021-03-31 15:10:06
429
原创 Vue组件通信的方式
1.父组件向子组件传值在父组件中引入子组件注册子组件在页面中使用，子组件标签上动态绑定传入动态值/静态值在子组件中，使用props来接受父组件传递过来的值子组件接收的父组件的值分为引用类型和普通类型两种：普通类型: String,Number,Boolean,Null引用类型: Array,Object#父组件<template> <div> <!-- 传递值 --> <Test :obj="obj"
2021-03-29 16:40:17
106
原创 函数柯里化
什么是柯里化只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。柯里化有什么作用let add = function (x) { return function (y) { return x + y }}let add1 = add(1)let add2 = add(2)console.log(add1(10)); // 11console.log(add2(20)); // 22这个例子表明柯里化是一种预加载函数能力，通过传递一到两个参数，
2021-03-28 22:15:16
66
原创 JS实现继承的几种方式
1.原型链法继承(使用原型)基本思想：利用原型让一个引用类型继承另外一个引用类型的方法和实例。我的理解是: 将父类的实例作为子类的原型function Father() { this.qwe = 'abc' this.info = { name: 'whl', age: 22 }}Father.prototype.getInfo = function () { console.log(this.info);}functio.
2021-03-25 22:08:47
156
2
原创 我对闭包的理解
闭包是什么闭包是指有权访问另一个函数作用域中的变量的函数`在我看来就是内嵌函数,在函数中嵌套函数由于在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之回收，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数——也就是闭包，便拥有了访问上级作用域中的变量的权限，即使上级函数执行完后作用域内的值也不会被销毁。闭包的作用内部函数调用外部变量function Father() { va
2021-03-23 22:58:32
128
原创 深拷贝和浅拷贝
深拷贝和浅拷贝浅拷贝对于基本数据类型（number,boolean,string,null,undefined），拷贝的是数据的值，对于引用数据类型（object），拷贝的是数据的内存地址深拷贝对比浅拷贝，深拷贝需要拷贝到引用数据类型中堆里面的值，并开辟新的堆空间，且修改新对象不会影响原对象。var a1 = { b: { c: {} } }var a2 = shallowClone(a1) // 浅拷贝方法a2.b.c === a1.b.c // true 新旧对象还是共享一块内容
2021-03-22 16:36:32
281
4
原创 数组去重
数组去重第一种ES6写法new Set() Set结构不会添加重复的值扩展运算符…转换成数组var arr = [1,3,5,7,9,1,3,5]let result = new Set(arr)console.log([...result]); // [1,3,5,7,9]第二种ES6写法new Set() Set结构不会添加重复的值Array.from()转换成数组var arr = [1,3,5,7,9,1,3,5]let result = new Set(arr)
2021-03-20 14:57:06
61
2
原创 var、let、const
var let constconst 在声明变量时必须初始化(声明变量的同时并赋值即初始化),var和let可以不用// varvar aa = 1console.log(a) // 1// letconst bb = 2console.log(b) //Uncaught SyntaxError: Missing initializer in const declaration//const const c c = 3console.log(c) // 3var存在
2021-03-19 17:25:33
78
原创 原型和原型链
JS原型链构造函数、实例对象person是Person函数的实例对象Person是函数person的构造函数function Person()let person = new Person()person // Person {__proto__} 是一个对象，有一个__proto__属性person.constructor === Person // true 指向Person的构造函数本身实例对象的 constructor 属性指向构造函数本身其实这么说不准确。后面会说明其实
2021-03-18 15:20:48
82
原创 this、new、call、apply、bind
this、call、apply、bindthis的指向问题在ES5中，this的指向始终坚持一个原理：this永远指向最后调用它的那个对象，注意是在ES5中。Case1: var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:"
2021-03-18 12:48:45
120
原创 详解Vue响应式原理
什么是响应式我们先来看个例子：<div id="app"> <div>Price :￥{{ price }}</div> <div>Total:￥{{ price * quantity }}</div> <div>Taxes: ￥{{ totalPriceWithTax }}</div> <button @click="changePrice">改变价格</butto
2020-06-15 19:05:02
438
原创 Vue3.0beta版本实战小demo(ref reactive torefs computed watch watcheffect vuex router)
项目首页截图github地址觉得写的还不错的可以给一个star
2020-05-26 21:23:04
671
原创 SSR渲染开发个人博客V1.0.0后台使用koa（开发中已经封装大量组件更新到本项目完结）
好的代码一定有好的目录结构（nuxt创建项目后的文件不同于原生vue)组件封装目录结构所有已经开发完毕组件的封装封装http请求参考大牛的封装（使用axios）目录结构所有已经开发完毕组件的封装1.switch-theme2.desktop-nav(PC端适配)3.封装http请求参考大牛的封装（使用axios）import Vue from 'vue'import axios from 'axios'import Config from '@/config'const co
2020-05-18 09:39:09
857
2
原创 Vue+Typescript实战开发-封装组件
熟悉Typescript如何在vue项目中使用独立封装一个button组件UIbutton.vue中的代码<template> <div> <button :class="{'ui-btn-large' : large, 'ui-btn-small' : small, 'ui-btn-xlarge': xlarge,...
2020-05-01 23:37:21
1177
原创 使用下一代前端开发语言Typescript写爬虫
Typescript写爬虫项目打包 "scripts": { "dev": "ts-node ./src/index.ts", "build":"tsc" },npm run build这时候就会把ts文件编译成js文件然后打包，在tsconfig.json找到 “outDir”: “./build”, 把注释去掉就可以了，然后就会产生打包文件夹build...
2020-04-29 22:53:51
288
原创 Typescript变量类型包括高级类型详解（全）
Typescript我们先来看下如何为一个变量指定类型：为一个变量指定类型的语法是使用"变量: 类型"的形式，如下：let num: number = 1231.布尔类型类型为布尔类型的变量的值只能是 true 或 false，如下：let bool: boolean = false;bool = true;bool = 123; // error 不能将类型"123"分配给类型"...
2020-04-25 14:23:49
7157
原创 Vue3.0全家桶抢先体验(Sam大佬解读)
Vue 3.0 全家桶抢先体验1.vue: Beta2.vue-router: Alpha3.vuex: Alpha4.vue-class-component: Alpha5.vue-cli: Experimental support via vue-cli-plugin-vue-next6.eslint-plugin-vue: Alpha7.vue-test-utils: Alph...
2020-04-22 09:08:38
3041
4
原创 如何将小程序内置非promise API转换为promise对象（风袖小程序的学习）
非常重要，便于项目大局观，使用async和await如何将小程序内置非promise API转换为promise这里是我封装的一个wx.request函数如何将wx.request转换成promise对象呢？转换的方法创建一个文件夹放入代码，回到你需要引入的地方引入即可const promisic = function (func) { return function (par...
2020-04-21 10:35:16
611
原创 小程序云开发借助云函数突破数据库每次只返回20条数据的限制
问题引入我们用小程序云开发功能，有时候查询列表想一次多返回一些数据，但是我们如果直接用数据库的get方法查询。每次只能最多返回20条数据，我们如果想图片20条的限制，可以通过云函数去数据库里拿数据，然后我们请求云函数获取到这些数据。就相当于云函数作为一个中转站。以下代码是我的项目实战过程1.云函数初始化env后的值就是你云开发控制台中的ID2.云函数的创建打开微信开发者...
2020-04-20 12:51:30
4019
原创 JS前端面试-异步和单线程
JS前端面试-异步和单线程一、单线程和异步二、应用场景三、callbeck hell（回调地狱）和promise四、问题解答1.同步和异步的区别是什么？2.手写promise加载一张图片3.前端使用异步的场景4.场景题setTimeout五、小结题目1.同步和异步的区别是什么2.手写promise加载一张图片3.前端使用异步的场景4.场景题setTimeout知识点1.单线程和异步...
2020-04-20 12:15:24
648
原创 下一代前端开发语言Typescript之编写第一个Typescript程序
TypeScript注意编译Typescript项目之前需要确保安装了node.js编译.ts文件项目需要打开终端输出tsc index.ts 之后会生成一个index.js文件// //ts中创建接口使用interfaceinterface Person { firstName: string lastName: string}function person(...
2020-04-19 22:18:43
234
原创 JS前端面试基础-作用域和闭包
JS基础作用域和闭包一、作用域四、this的使用五、题目解答1.this在不同场景下应该如何取值？2.手写bind函数3.实际开发中的闭包应用场景，举例说明4.面试题 创建10个a标签，点击的时候弹出对应的序号 六、小结题目1.this在不同场景下应该如何取值？2.如何手写bind函数？3.实际开发中闭包的应用场景、举例说明4.创建10个a标签，点击的时候弹出对应序号知识点1.作用...
2020-04-19 16:49:51
409
原创 还在为没有服务器而烦恼？学会云开发让你全栈开发小程序
今天我们来使用云开发来获取自己的小程序二维码先打开开发者工具点击云开发根据提示创建自己的云环境这时候会有两个文件夹一个叫cloudfunctions|你的云环境ID还有一个叫miniprograme就是你要渲染的页面文件夹在我的项目中我已经有了云环境右键cloudfunctions选择新建node.js云函数我们的目的是通过云函数来获取我们的小程序二维码此时我创建一个云函数...
2020-04-17 21:37:32
445
原创 重磅！！！Vue3.0快速入门-数据渲染
今早Vue开发者尤老师发布微博表示Vue-next版本到来Vue3.0 beata 版本github传送门：Vue3.0beta版本文档地址使用vue create xxxx 创建vuecli3项目打开package.json此时的vue版本还是2.6的 我们需要使用命令来升级vue打开终端将路径选择在你想要升级Vue的项目内使用 vue add vue-next之后打...
2020-04-17 20:50:46
2311
原创 JS前端面试基础-原型和原型链
JS重点原型和原型链一、class和继承二、类型判断和instanceof三、原型四、原型链五、重要提示六、题目解答1.如何判断一个变量是不是数组？2.Class的原型本质，如何理解？七、小节JS是基于原型集成的语言题目引入1.如何判断一个变量是不是数组2.Class的原型本质，如何理解？知识点Class和继承类型判断和instanceof原型和原型链一、class和继承1....
2020-04-17 17:26:08
525
原创 下一代前端开发语言typescript学习之安装typescript
打开终端windows电脑中 使用npm install -g typescript 全局安装最新版本mac电脑中 使用sodu npm install -g typescript 输入密码后全局安装最新版本 如果不加sodu会报错查看是否安装成功typescript使用命令: tsc-v恭喜你成功安装typescript...
2020-04-17 14:04:19
288
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人