前端
前端知识
实在不知道什么
这个作者很懒,什么都没留下…
展开
-
koa中关于session取值undefined问题
在写项目的过程中遇到一个关于koa中session取值的bugbug描述:相同的IP发出的请求,第一个接口给session赋值之后,第二个接口请求的时候从session中取值为undefined解决方案:在后端代码中设置credentials: trueapp.use(cors({ credentials: true}));在前端的axios请求中设置withCredentialsimport Axios from 'axios';Vue.prototype.$axios =原创 2022-03-26 19:47:15 · 1260 阅读 · 0 评论 -
vue中子组件调用父组件的方法
1.子组件通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import child from './child'; export default { components: { child }, methods: {原创 2020-06-08 20:45:46 · 452 阅读 · 0 评论 -
TCP协议三次握手分析
TCP(Transmission Control Protocol) 传输控制协议TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接:SYN(synchronous建立联机):建立连接ACK(acknowledgement 确认):表示响应,为1便是确认连接Sequence number(顺序号码): 发送这个包的序号另一个是确认编号(Acknowledgement Number):即接收到的上一次远端主机传来的seq然后+1,再发送给远端主机。提示远端主机已经成原创 2020-06-01 13:24:16 · 227 阅读 · 0 评论 -
JavaScript实现div鼠标跟随
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ width: 50px; height: 50px; position: absolute; b原创 2020-05-31 16:55:26 · 122 阅读 · 0 评论 -
JavaScript实现div的鼠标拖拽
HTML<div class="box"></div>CSS.box{ width: 50px; height: 50px; position: absolute; background-color: red; }记得添加定位,不然移动不了分为三个事件,鼠标点击下去(onmousedown),鼠标移动时候(onmousemove),鼠标松开(mouseup事原创 2020-05-31 11:20:59 · 629 阅读 · 0 评论 -
SSL建立的过程
客户端使用http url访问服务器,要求web服务器建立ssl链接web服务器收到客户端请求后,会将网站的证书(包含公钥)返回给客户端客户端与web服务器端协商SSL链接的安全等级,也就是加密等级客户端浏览器通过双方协商一致的安全等级,建立会话密钥,用网站证书中的公钥来加密会话密钥,并传送给服务器web服务器通过自己的私钥解密出会话密钥web服务器通过会话密钥加密与客户端之间的通信...原创 2020-05-26 22:01:15 · 596 阅读 · 0 评论 -
前端性能优化方法
对一个网站而言,CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次http请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。原创 2020-05-26 21:20:16 · 124 阅读 · 0 评论 -
浏览器渲染原理
浏览器从服务器那收到的HTML,CSS,JavaScript等相关资源,然后经过一系列处理后渲染出来的web页面的过程过程浏览器将获取的HTML文档解析成DOM树处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)将DOM和CSSOM合并为渲染树(rendering tree)将会被创建,代表一系列将被渲染的对象渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次pass绘制操作就可以布局所有的元素将渲染树的各原创 2020-05-25 17:16:41 · 124 阅读 · 0 评论 -
Vue中computed和watch有什么区别
computedvar var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName ...原创 2020-05-06 17:49:33 · 1096 阅读 · 0 评论 -
CSS-flex布局
什么是flex布局Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素一样可以指定基本概念这里借助阮一峰老师的图采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,...原创 2020-05-04 21:20:34 · 127 阅读 · 0 评论 -
cookie各字段详解
name字段:名称value字段:cookie的值domain字段:为可以访问此cookie的域名,顶级域名只能设置domain为顶级域名,不能设置为二级域名或者三级域名,否则cookie无法生成。二级域名能读取设置了domain为顶级域名或者自身的cookie,不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享,需要设置domain为顶级域名,这样就可以...原创 2020-05-04 17:48:16 · 4585 阅读 · 0 评论 -
JavaScript之节流与防抖
防抖在前端开发中会遇到一些频繁的事件触发,比如:window 的 resize、scrollmousedown、mousemovekeyup、keydown……防抖的原理就是:你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总之,就是要等你触发完事件 n 秒内不再触发事件,我才执行fu...原创 2020-05-04 12:09:56 · 130 阅读 · 0 评论 -
JavaScript中call apply bind的区别
相同点:都可以改变this的指向例子:var zhangsan = { name: "张三", gender: "男", age: 24, say:function () { alert(this.name+","+this.gender+",今年"+this.age+"岁"); }}var lisi = { name: "李四...原创 2020-05-01 09:49:40 · 86 阅读 · 0 评论 -
手写ajax的实现过程
var xhr = new XMLHttpRequest();xhr.open("GET",url,false);xhr.onreadstatechange = function() { if (xhr.readystate === 4){ if(xhr.status === 200){ alert(xhr.responseText)...原创 2020-04-23 11:41:51 · 248 阅读 · 0 评论 -
JS-深浅拷贝实现
浅拷贝浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,所以当一个对象发生变化时,另一个对象随之改变深拷贝深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象;实现深拷贝function deeolone(scoure){ if (typeof scoure !== "object") return scoure; /...原创 2020-04-23 11:09:46 · 170 阅读 · 0 评论 -
javascript中的声明提升
变量提升先看第一个代码a = 1;var a;console.log(a);//1按照思路来说第一行代码创建了一个全局变量a并赋值1,第二行重新声明并赋值undefined。按道理来说应该打印undefined。而我们打印出来的是1是因为发生了变量提升才打印1上面的代码实际的执行顺序是下面这样的var a;a = 1;console.log(a);在来看一个例子cons...原创 2020-04-22 13:48:52 · 307 阅读 · 0 评论 -
ES5继承和ES6继承的区别
ES5继承这里使用的是最常用的组合继承,要了解其他的继承方式可以ES5继承方式function Person (name,gender){ this.name = name; this.gender = gender;}Person.prototype.getName = function() { console.log(this.name);}function...原创 2020-04-22 12:42:54 · 296 阅读 · 0 评论 -
实现JavaScript中的new
新建一个空对象,这个空对象原型指向构造函数的prototype,执行构造函数后返回这个对象function objectFactory(){ var obj = new Object(); //创建一个新对象 Constructor = [].shift.call(argument); //取出第一个参数即构造函数,shift会修改数组 obj._proto_...原创 2020-04-21 19:33:50 · 111 阅读 · 0 评论 -
Javascript作用域和作用域链
作用域作用域就是一个独立的地盘,让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来,为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现。全局作用域最外层函数 和在最外层函数外面定义的变量拥有全局作用域var outVari...原创 2020-04-21 18:50:40 · 150 阅读 · 0 评论 -
Set WeakSet Map WeakMap的操作方法
Set类似数组,成员值唯一,可以去重const s = new Set();[2,3,5,4,2,2,2].forEach(x=>s.add(x));for (let i of s){ console.log(i);} //2,3,5,4Set的操作方法Set.prototype.add(value):添加某个值,返回Set结构本身Set.prototype.d...原创 2020-04-21 12:28:21 · 153 阅读 · 0 评论 -
css实现水平/垂直居中
水平居中块级元素居中html代码:<div class="father"> <div class="children"></div></div>记得清楚浏览器样式html,body { margin: 0; padding: 0; }效果:1. 使用margin实现水平居中.fa...原创 2020-04-20 20:02:01 · 132 阅读 · 0 评论 -
JS-类的继承方式
当我们了解了原型和原型链后我们就可以来看JS类的继承方式原型链继承function Parent () { this.name="kevin";}Parent.prototype.getName = function () { console.log(this.name);}function Child () {}Child.prototype =...原创 2020-04-18 23:27:11 · 192 阅读 · 0 评论 -
原型与原型链
prototype属性JavaScript中每个函数都有prototype属性(prototype是函数才有的属性)function Person() {}Person.prototype.name = 'Kevin';var person1 = new Person();var person2 = new Person();console.log(person1.name) // ...原创 2020-04-18 13:51:55 · 115 阅读 · 0 评论 -
UDP和TCP的区别
UDP发送数据前不需要建立连接,而TCP是面向连接的UDP尽努力交付,不保证可靠交付;TCP提供可靠服务UDP是面向报文的,而TCP是面向字节流UDP支持一对一,一对多;TCP支持一对一TCP首部字节为20个;UDP首部字节为8个...原创 2020-04-17 20:30:45 · 75 阅读 · 0 评论 -
csrf和xss的网络攻击及防范
什么是CSRF(跨站请求伪造)当用户访问A(信任网站)网站并登录成功时,在用户处产生A的Cookie。这时候用户访问了B(危险网站)网站,当B要求访问第三方站点(A)的时,浏览器会带着用户最开始登录A的时候产生的Cookie访问A,而A网站并不能分辨请求是由用户发出的还是由B发出的,这时候B网站就能模拟用户操作。例如转账等操作如何防范CSRF攻击1.使用token可以在 HTTP 请求中以...原创 2020-04-17 20:12:48 · 379 阅读 · 0 评论 -
JS的异步加载的三种方法
为什么要引入异步加载JS当浏览器解析器遇到<script>标签时会立即加载(加载:下载,解析和执行),浏览器对其他资源和文档的加载会停止。为了提高页面的加载速度,得让JS不阻塞其他资源的加载。提高页面加载速度的最简单快速的方法就是将脚本文件放到body底部。但这并不是提高页面加载速度最优方案的方案defer属性defer异步加载:dom文档全部被解析完才会执行JS,只有IE能用...原创 2020-04-17 19:35:37 · 363 阅读 · 0 评论 -
ES6-export,import ,export default的区别和作用
ES6模块主要有两个功能:export和importexport用于对外输出本模块变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法。export和import的区别例子:一个为test.js的文件export var a=...原创 2020-02-05 11:51:44 · 149 阅读 · 0 评论