雪落凡尘zz-CSDN博客

原创 javascript和es5

javascriptES5及以前什么是javascript语言？轻量级脚本语言不具备开发操作系统的能力，只用来编写控制其他大型应用程序（比如浏览器）的“脚本”

2021-03-20 20:20:28 446

Typescript：js的超集，编程语言，支持ES6基础类型Number、String、Boolean、Null、undefined、object、symbol、bigInt（n）（js）let isDone: boolean = false;let binaryLiteral: number = 0b1010;let name: string = "bob";let list: Array<number> = [1, 2, 3];...

2021-02-01 01:58:32 106

原创 css相关

布局单列布局、两列自适应布局、三栏布局、粘连布局、等高布局、圣杯布局flex布局Flex容器：采用Flex布局的元素。所有子元素自动称为项目.box{ display:flex;}容器属性flex-direction：row | row-reverse | column | column-reverse;（主轴排布方向：从左，从右，从上，从下）flex-wrap：nowrap | wrap | wrap-reverse;（不换行、换行第一行在上方、换行第一行在下方）flex-flo

2020-12-22 23:45:14 110

原创 vue、react、webpack相关

快速创建vue项目// 安装node npmnpm install -g @vue/clivue create my-vuecd my-vuenpm run serve

2020-12-01 22:32:18 194

原创 es6

ECMAScript和JavaScript的关系—前者是后者的规格，后者是前者的实现全局作用域、函数作用域、块级作用域全局作用域：作用于所有代码执行的环境(整个 script 标签内部)，或者一个独立的 js 文件局部作用域：作用于函数内的代码环境，就是局部作用域也称为函数作用域块级作用域：由 { } 包括（1）内层变量可能会覆盖外层变量（2）循环计数的变量泄露为全局变量let const*相似点*：不存在变量提升（声明后才可使用）；暂时性死区（块级作用域内，变量声明前不可用）；不可重复声明

2020-11-16 22:22:59 186

原创 react原理

JSX：标签语法渲染逻辑与UI逻辑内在耦合UI绑定事件，状态变化更新到UI，在UI展示准备好的数据react组件首字母大写更加语义化，Dom标签小写React.createElement的语法糖；编译到<当作html来编译，编译到｛｝当作普通js代码编译react元素：react创建的普通对象，reactdom负责更新dom与react元素保持一致不可变对象（不能添加修改删除属性，不能修改已有属性的可枚举，可配置，可写性）嵌套Object.freeze状态更新16.3生命周

2021-04-06 23:12:52 486 1

原创 git增量校验代码

npm install pre-commit --save-devnpm instal husky --save-dev "husky": { "hooks": { "pre-commit": "npm run prettier && ./check-keyword.sh" } },check-keyword.sh#!/bin/bashred=`tput setaf 1`green=`tput setaf 2`reset=`tput sgr

2021-03-25 16:50:52 355

原创原型链

https://www.jianshu.com/p/dee9f8b14771

2020-08-17 21:36:33 81

原创 cookie内容

Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure"其中name=value是必选项，其它都是可选项。Cookie的主要构成如下：name:一个唯一确定的cookie名称。通常来讲cookie的名称是不区分大小写的。value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码domain:cookie对于哪

2020-08-15 20:54:00 985

原创进程和线程

进程和线程的区别（1）线程在进程下行进（单纯的车厢无法运行）（2）一个进程可以包含多个线程（一辆火车可以有多个车厢）（3）不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘）（4）同一进程下不同线程间数据很易共享（A车厢换到B车厢很容易）（5）进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源）（6）进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）（7）进程可以

2020-08-15 20:16:11 154

原创 redux

1.redux首先，用户发出 Action，然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action，Reducer 会返回新的 State ，State 一旦有变化，Store 就会调用监听函数，listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。...

2020-08-15 20:08:14 101

原创 let const var

全局作用域：任何地方都能访问到的对象拥有全局作用域。（1）函数外面定义的变量（2）未定义直接赋值的变量自动声明函数作用域：只可函数内部访问块级作用域：{}，包括for，if为什么需要？（1）内层变量会覆盖外层变量（变量提升）var tmp = new Date();function f() { console.log(tmp); if (false) { var tmp = 'hello world'; }}f(); // undefined（2）循环变量泄漏

2020-08-14 21:06:27 95

原创 promise 并发控制

https://blog.csdn.net/tonghonglei/article/details/88054116

2020-08-13 21:28:40 303

原创 await async相关

每隔几秒输出值function sleep(interval) { return new Promise(resolve => { setTimeout(resolve, interval); }) } // 用法 async function one2FiveInAsync() { for(let i = 1; i <= 5; i++) { console.log(i); await sleep(1000*i);

2020-08-11 23:50:59 97

原创 js内存泄漏

1.全局变量function foo(arg) { bar = "this is a hidden global variable"; //window.bar} function foo() { this.variable = "potential accidental global"; } // Foo 调用自己，this 指向了全局对象（window） // 而不是 undefined foo(); 2.闭包function(){ let a=1;

2020-08-11 21:44:37 102

原创 css画各种图形

1.三角形.triangle{ width:0; height:0; border:50px solid transparent; border-left:50px solid red; // border-bottom:50px solid red;}.triangle{ width:0; height:0; border-right:100px solid transparent; border-bottom:100px solid red;}2.扇

2020-08-10 22:41:17 121

原创 js操作dom方法

DOM节点获取 var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过标签名获得标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过类名获得标签数组，所以有s parentNo

2020-08-08 15:57:00 266

原创 mvc

m：（Model）是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。v：（view）是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。c：(controller)是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。mvvm加了viewmodel层是为了解析数据，将结果传给controller层...

2020-08-03 22:22:46 100

原创 CORS的两种请求方式

CORS是跨源资源分享，解决跨域的方法。JSONP只能发送get请求，CORS允许各种类型的请求。跨域：协议，域名，端口三者存在不同。请求有两种：1.简单请求请求方式为get post headhttp头信息不超出一下字段：Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content-Type2特殊请求对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是applicatio

2020-08-01 21:06:36 627

原创 vue路由的实现模式

路由：改变url但是不重新请求而刷新视图1.hash模式在url里面“#”后面的称为hash，用window.location.hash读取2.history模式history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致...

2020-08-01 19:12:53 203

原创从浏览器输入URL到页面呈现经历了什么

1.查看缓存（浏览器缓存，系统缓存，路由器缓存），如果有直接访问2.如果没有，DNS服务器进行域名解析，解析成ip地址3.通过ip地址找到服务器，进行TCP链接，完成三次握手4.浏览器像服务器发送http请求5.服务器响应，将响应报文通过TCP发送回浏览器6.对响应进行解码，根据资源类型决定如何处理7.如果是HTML文档，则构建DOM树，下载CSS，JS资源，构建渲染树，布局，绘制...

2020-07-31 00:00:12 168

原创 web安全

1.CSRF ：（Cross-site request forgery）跨站请求伪造原理：假设用户A登录了www.zz.com，用户A可以评论某个博客。攻击者准备一个页面www.yy.com，若不小心点击此页面则会恶意评论。利用cookie，冒充用户真实发送请求，但获取不到cookie（同源策略）防范：方法一、Token 验证：（用的最多）（1）服务器发送给客户端一个token；（2）客户端提交的表单中带着这个token。（3）如果这个 token 不合法，那么服务器拒绝这个请求。2.xss

2020-07-30 23:40:46 433

原创 webpack打包优化

https://www.jianshu.com/p/e4c1a9c40a2e

2020-07-30 16:04:09 137

原创 DOM渲染流程

Safari和Chrome都使用webkit，Webkit是一款开源渲染引擎dom渲染流程：1、浏览器解析html源码，然后创建一个DOM树。在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。2、浏览器解析CSS代码，计算出最终的样式数据。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样

2020-07-29 16:40:45 1560

原创强缓存与协商缓存

强制缓存：当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制1.cache-control: max-age=xxxx，public客户端和代理服务器都可以缓存该资源；客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求2.cache-control: max-age=xxxx，private只让客户端可以缓存该资源；代理

2020-07-29 16:21:13 241

原创函数节流和函数防抖及闭包

函数节流：是确保函数特定的时间内至多执行一次。实现：const _.throttle = (func, wait) => { let timer; return () => { if (timer) { return; } timer = setTimeout(() => { func(); timer = null; }, wait); };};函数防抖：就是指触发事件后在 n 秒内函数只能执行一次

2020-07-28 23:11:19 387

原创 js杂项（实现new，webworker，defer，async）

怎么实现new？Web Worker 的作用？为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。...

2020-07-28 23:03:43 201

原创 http和https相关

http特点：1.无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作2.无连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量。3.通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性https（1）首先客户端通过URL访问服务器建立SSL连接。（

2020-07-28 22:53:16 196

原创 css居中等问题搜集

定位方式postion：absolute（相对于父元素）、fixed（相对于浏览器窗口）、relative（相对于其正常位置定位）、static、inheritmargin重叠：在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：a、全部都为正值，取最大者；b、不全是正值，则都取绝对值，然后用正值减去最大值；c、没有正值，则都取绝对值，然后用0减去最大值。BFC：（1）内部的Box会在垂直方向，一个接一个地放置。（2）Box垂直方向的距离由

2020-07-27 22:49:58 101

原创同源策略

概念：协议域名端口一致同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。如何跨域？前端向发送请求，经过代理，请求需要的服务器资源缺点：需要额外的代理服务器...

2020-07-27 22:00:30 71

原创 TCP相关

TCP三次握手第一次握手：客户端要向服务端发起连接请求，客户端SYN标志位（1）和seq序列号（100）。第二次握手：服务端收到报文后给客户端回复一段报文，回复报文包含SYN和ACK标志(也就是SYN=1,ACK=1)、序列号seq=300、确认号ack=101(客户端发过来的序列号+1)。第三次握手：客户端收到服务端的回复，报文包含ACK标志位(ACK=1)、ack=301(服务端序列号+1)、seq=101(第一次握手时发送报文是占据一个序列号的，当服务端收到报文后发现ACK=1并且ack=301

2020-07-27 21:45:38 148

原创进程和线程

联系：线程是进程的一部分，一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程。区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位（1）在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。（2）在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行（通过CPU调度，在每

2020-07-27 21:00:53 141

原创 js继承

1.原型链继承function Person(name){ this.name=name; this.age=10;}function Child(){ }Child.prototype=new Person(); //主要const p=new Child();const s=new Person();s.height=20; // p.age=20 p.height=undefined

2020-07-27 16:06:42 69

原创 css 布局

元素的padding的百分比值是基于其父元素的宽度计算的，如此，设置元素宽度width:25%，元素高度不设定，元素padding-bottom:75%，就可以得到一个高宽比为3:1的盒子。或者，元素的宽高都不设定，设置元素的padding-right: 25%，padding-bottom:75%，也可以得到一个高宽比为3:1的盒子。 width: 100%; position: relative; padding-top: 75%;...

2020-07-26 21:58:09 148

原创 js获取dom的方法

获取dom的方法通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）获取html的方法（document.documentElement）获取body的方法（document.body）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorAll）document.querySelecto

2020-07-26 21:47:30 87

原创 TCP可靠性

https://blog.csdn.net/xuzhangze/article/details/80490362

2020-07-26 21:35:46 63

原创域名解析过程

1.客户机提出域名解bai析请求du,并将该请求发送给本地的域名服务器。2.当本zhi地的域名服务器dao收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。3.如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址。4.本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。5.重复

2020-07-26 21:32:08 106

空空如也

空空如也