傲娇味的草莓-CSDN博客

原创前端HTML5十大新特性详细总结

前端HTML5十大新特性总结一必须知道写前端的都知道，在代码最前面都有这一行代码，大家都知道一定要把这东西写上去。<!DOCTYPE html>但是！这是什么玩意儿？为什么要写上去?不写上去会怎么样？很少人去注意到，反正就照写就可以了。所以，这是个啥玩意儿?这是声明！这是HTML5声明的新特性！既然有HTML5，那肯定有HTML4是吧，那HTML4是怎么声明的呢？HTML4有三种声明方式：Strict（严格模式），Transitional（过渡模式），Frameset（框架模式

2021-04-04 21:33:56 14762 19

原创前端模块化CommonJS、AMD、CMD、ES6

一、前端模块化什么是模块化？为什么前端需要模块化？js代码量激增，放在同一个文件里面，不容易维护，而且牵一发而动全身。这时候就需要将代码按照逻辑放在不同的文件里面，按照一定的语法规则，遵循特定的规范将一个庞大的文件拆分若干个相互依赖的文件。这些文件对外暴露数据或接口，在需要的时候导入引用。这就是前端模块化。说的很官方，举个简单的栗子来通俗的理解。就像是社会的分工合作，彼此依赖，彼此独立，每个社会的部门可以理解为一个模块，按照某种规则负责特定的功能，组装起来形成一个整体，从而完成整个社会系统所要求的

2022-04-21 00:11:27 1739

原创 CommonJS、AMD、CMD、ES6模块化区别详细总结

一、CommonJS、AMD、CMD、ES6知识点简单概述（1）CommonJSNodeJS是CommonJS规范服务器端的实现，webpack也是CommonJS的形式书写。同步加载，服务器端从磁盘中读取速度快，运行在服务器端没有问题。（2）AMDAMD是Asynchronous Module Definition异步模块定义。基于CommonJS规范的node.JS是服务端模块化的实现。实现浏览器端的模块化就是AMD，且能与服务器端兼容最好。同一个模块在服务器端和浏览器端都可以维护运行，简单方

2022-04-13 00:18:00 7252 2

原创 css的经典布局：行布局、列布局、两栏布局6种方法、三栏布局6种方法

一、行布局经典的行布局，页面结构是头、主体内容、尾一行行排列。常应用于网站的首页。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .header, .main, .footer { /*居中*/

2022-04-09 00:16:52 4665

原创圣杯布局VS双飞翼布局介绍以及margin负值用法的详解

一、圣杯布局、双飞翼布局简单介绍圣杯布局、双飞翼布局基本都是一致的，都是两边固定宽度，中间自适应的三栏布局。中间栏要放到文档流前面，保证先行渲染。圣杯布局、双飞翼布局都是三栏（左中右）全部float:left浮动，区别在于中间栏div是否被遮挡上圣杯布局：中间栏相对定位，配合left、right属性，三栏独立分开双飞翼布局：中间栏嵌套div，内容写在嵌套的div中，嵌套div设置margin-left/margin-right。左右栏在中间栏的上面区别：双飞翼布局中间栏不变，将内容部分为两边腾开

2022-04-09 00:10:56 613

原创 session、token、cookie、JWT的区别一定要懂

一、基本概念1.1 认证认证authentication，指的是验证访问者的身份常见认证方法用户名密码认证短信验证码认证邮箱验证码认证扫码认证人脸识别或者其他生物特征识别认证1.2 授权授权authorization，指的是用户通过身份认证后，能够访问指定的某些资源常见授权模型—3种ACL（Access Control List）：ACL中包含用户、资源、资源操作三个关键内容。通过将资源以及资源操作授权给用户，使得用户具有操作某项资源的权限RBAC（Role-Base

2022-04-07 00:06:43 5676

原创 session、token、JWT的一文详细介绍

一、认证Authentication认证就是验证当前用户的身份，证明身份认证的应用用户密码登录邮箱发送登录链接手机号接收验证码二、授权Authorization授权就是用户授予第三方应用访问用户某些资源的权限授权的应用手机第三方app询问是否授权（访问相册、地理位置等权限）访问微信小程序，登录的时候会询问是否允许授权（获取昵称、头像、地区、性别等个人信息）实现方式cookiesessiontoken三、凭证Credentials实现认证和授权的前提是

2022-04-06 00:39:16 1529 1

原创 cookie、sessionStorage、localStorage区别一文超详细整理

在上一篇博客中整理一些cookie sessionStorage localStorage的知识点梳理，学习之后在这篇文章中总结这三者的区别。本地存储三种方式cookie、localStorage、sessionStorage的详细介绍一、cookie、sessionStorage、localStorage存储、获取、删除等使用方法的区别（1）cookie保存cookie值 var dataCookie = '110';document.cookie = 'token' + '=' + data

2022-04-05 00:10:18 2894

原创本地存储三种方式cookie、localStorage、sessionStorage的详细介绍

前言网页刷新的时候数据会被清空，这时候就需要用到存储技术。前端本地存储的方式有三种，分别是cookie、localStorage、sessionStorage。在前端面试过程中，经常会被问及这些存储技术和区别，优缺点，但是很少有人真正理解这些存储技术的具体介绍。笔者以为在学习过程中，首先要明白是什么学懂是什么为什么怎么样，然后再去比较这三者会比较好一点，有一种逻辑性，而不是一上来就背诵一些面经。本文会先整理这三者的介绍，下一篇文章会详细整理这三者的区别和应用场景。一、cookie1.1 cookie是

2022-04-05 00:02:40 12375 2

原创观察者模式VS发布订阅模式

一、前言观察者模式vs发布/订阅模式很容易混淆，像是凤梨和菠萝，傻傻分不清。Observer模式通常用Publish/Subscribe模式实现，我刚开始学习js的时候，以为这是同一回事，但是仔细学习，发现它们是有质的区别的。二、观察者模式vs发布/订阅模式1、观察者模式2、发布/订阅模式三、观察者模式3.1 什么是观察者模式官方：定义对象间的一对多的依赖关系，当一个对象发生改变时，所有依赖于他的对象都会受到通知。通俗：一个对象（subject）维持一系列依赖它的对象（observer）

2022-04-03 23:45:14 1865

原创 ES6中的箭头函数详细梳理

一、箭头函数的介绍1.1 什么是箭头函数ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。1.2 基本语法// 箭头函数let fn = (name) => { // 函数体 return `Hello ${name} !`;};// 等同于let fn = function (name) { // 函数体 return `Hello ${name} !`;};箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=

2022-04-03 00:11:45 23952 2

原创 JS—节流与防抖

一、js防抖和节流在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。二、为什么滚动scroll、窗口resize等事件需要优化滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非

2022-04-01 23:25:43 45327 5

原创数组去重的12种方法总结

数组去重的11种方法（1）ES5常用：利用for嵌套for，然后splice去重 function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { //第一个等同于第二个，splice方法删除第二个

2022-04-01 22:45:53 11871 1

原创 CSS盒子高度塌陷的解决方法

CSS盒子高度塌陷的解决方法一、盒子塌陷（1）什么是盒子塌陷高度塌陷，当所有的子元素浮动的时候，且父元素没有高度设置，这时候会产生父元素高度塌陷，本应该在父盒子内部的元素跑到外面。正常显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .box {

2022-04-01 14:21:46 2498

原创 ES6的Set、WeakSet、Map、WeakMap

一、总体介绍下Set、WeakSet、Map、WeakMap的区别Set：对象允许存储任何类型的唯一值，无论是原始值或者是对象引用WeakSet：成员都是对象，成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏Map：键值对的集合，类似集合；可以遍历，有很多方法，可以跟各种数据格式转换WeakMap：只接受对象为键名（null）除外，不接受其他类型的值作为键名；键名是弱引用，键值可以任意；键名所指向的对象可以被垃圾回收机制回收，此时键名无效，不能遍历。二、Set（

2022-03-31 23:49:59 692

原创空值NULL与undefined的区别

前言不同语言有不同表示空值的写法和关键字C++用NULL、java用null、Python用None NULL、JavaScript用NULL/undefined一、NULLnull ：空值语义：希望表示一个对象被人为的重置为空对象，而非一个变量最原始的状态。在内存里的表示就是，栈中的变量没有指向堆中的内存对象。1、NULL是一个特殊的对象 typeof null //object null值表示一个空对象指针，它代表的其实就是一个空对象 Number(null)//0

2022-03-29 01:14:49 1564

原创 js字符串分割处理的几种方法

js字符串处理的几种方法总结前端开发中，字符串处理是比较常见的，笔者在最近复习的过程中也把它整理了出来。首先，先来看看js截取三姐妹substring()、subsstr()、slice()1、slice(start, end)大姐slice()、从start开始，到end结束，开始的位置从0不是1，不包括end，支持数组分割，支持负数，返回数组 let test = 'hello world！' console.log(test.length) console.log(t

2022-03-29 00:15:43 21691

原创 ES6编写代码规范分类详细总结

一、块级作用域1.1 let 取代 varES6新增两个变量声明，let 和 const，let 可以取代var，在块级作用域内建议使用let声明双大括号中，ES6表示块级作用域。若var声明，在块级作用域外面也可以访问到块内var声明的变量，相当于全局变量，会失去很多语义的同时带来很多问题。若let声明，在块级作用域对形成一个封闭的区域，块外面无法访问块内的变量。if (true) { let x = 'hello'; console.log(x);}1.2 全局变量、线程安全

2022-03-28 19:39:31 2378

原创 js冷知识void 0是什么？为什么比undefined好用？

一、void 0 === undefined ？true！why？源码涉及到 undefined 表达都会被编译成 void 0//源码const a: number = 6a === undefined//编译后"use strict";var a = 6;a === void 0;void 0 === undefinedif(context === void 0) return fn;//等价于if(context === undefined) return fn;为什么

2022-03-28 15:08:15 10879

原创 js几种获取对象key的方法和区别

js几种获取对象key的方法和区别1、Object.keys() ，遍历自身可以枚举属性 let myColors = { color1: 'pink', color2: 'red' }; let yourColors = { color3: 'green', color4: 'blue' }; Object.setPrototypeOf(yourColors, myColors); //setPr

2022-03-27 21:52:01 55453 1

原创 let真的没有变量提升吗？let暂时性死区引发的思考

let真的没有变量提升吗？let暂时性死区引发的思考1、var声明存在变量提升（1）var 具有变量提升的特性，来看栗子1 function fu() { console.log(a); var a = 666; } fu();解析：为什么这段代码不是"Uncaught ReferenceError: a is not defined"，而是undefined呢？js的编译过程有关，js代码有编译阶段，js不是早早把编译工作做完，而是一边编

2022-03-27 16:14:39 1035 1

原创理解for循环中的异步取值问题—五道题就够了

理解for循环中的异步取值问题—五道题就够了复习：js单线程、事件循环、任务队列、执行顺序、异步、作用域、闭包彻底搞懂js事件循环机制JS深入理解闭包/作用域（scope）、作用域链/执行上下文和执行栈一、var声明变量（1）栗子1for (var t1=0;t1<4;t1++){ setTimeout(function(){console.log(t1)}, 1000)}//4 4 4 4 解析：js是单线程的，js分为同步任务和异步任务，同步任务在主线程上进行，异步任务

2022-03-26 23:11:09 1542

原创容易忽视的CSS3粘性定位position sticky

CSS3粘性定位position sticky一、介绍css3中新的定位属性，本身也具有定位元素的属性理解为相对定位position:relative + 固定定位position:fixed的混合体position:sticky粘性定位，基于用户的滚动定位二、基本原理依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed什么是目标区域相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定滚动元

2022-03-26 16:02:18 2358

原创【一文就够】浏览器缓存机制详细知识点梳理

浏览器缓存机制详细知识点梳理在前端的性能优化中，浏览器缓存是很重要的一环。比如在页面前进或者后退，发现丝毫不卡顿很流畅，就是缓存机制的力量。一、什么是缓存浏览器缓存Brower Caching是浏览器对之前请求过的文件进行缓存，以便再次访问的时候提高页面展示的速度。比如当我们第一次访问CSDN网站的时候，PC会把从网站上的图片和数据下载到电脑上。当再次访问CSDN网站的时候，网站直接从PC加载，这就是缓存。二、为什么需要缓存？缓存有哪些优势？（1）浏览器缓存是将文件保存在客户端，减少重复请求浪费网

2022-03-26 10:56:48 4276

原创 css中的z-index层级问题

css中z-index层级问题一、css盒子模型的布局提供三种不同的定位方案①正常文档流②浮动③定位第三种定位会将元素从正常文档流中完全移走，前端开发人员通过设置top、bottom、left、right在二维空间进行定位。Z-index允许开发人员在三维空间进行定位二、z-index基础x轴代码水平方向，y轴代表垂直方向，z轴代表目光平视的方向，看进去屏幕里面这个方向。开发的页面是二维空间，z轴是透视的。规定：两个元素共享同一个二维开发空间块，z-index值大的会覆盖小的。想象一下，

2022-03-25 19:16:22 2260

原创输入URL到页面展示发生了什么

详解输入URL到浏览器页面展示过程都发生了什么一、简单的过程总体概览①DNS域名解析②建立TCP连接③发送HTTP请求④服务器处理并返回HTTP报文⑤浏览器解析渲染页面⑥关闭TCP连接二、详细过程解析1、DNS域名解析在浏览器输入熟悉的网址比如www.baidu.com，这个叫做网址，并不是百度真实的地址，互联网中每一台机器都有唯一标识的ip地址。网址和ip地址的转换，就是DNS解析。网址简单容易记住，但是ip地址很复杂，所以需要一个地址簿记录哪个ip对应哪一个网址，这个地址

2022-03-25 00:07:26 3351

原创彻底搞懂js事件循环机制/js异步编程

js难点事件循环/异步机制/异步编程一、知识储备在学习前端的时候看过很多帖子讲js的运行机制、js异步编程的方式，说实话一看就忘，所以想自己整理一遍，以加深自己的理解。自己写过的东西即使是重复的，但至少在这个过程我也在思考和总结，也避免面试的时候被问到的时候支支吾吾说不出来，或者模糊的似懂非懂。首先深入理解js的异步机制，必须要先理解几个概念。Q1：什么是进程和线程？A1：这是操作系统的基本概念，忘记的回去复习操作系统。Q2：什么是同步和异步？A2：同步是调用一旦开始，调用者必须等到调用方

2022-03-24 00:55:11 2032 1

原创 css预处理全部知识点一文讲清楚

css预处理一、什么是css预处理css预处理器是一种新的编程语言，为css增加一些编程的特性，无需考虑兼容性问题。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法。前端工程化的里程碑。二、为什么需要css预处理一样东西的出现肯定是为了解决某种东西的缺陷。css预处理也不例外，它的出现是来解决css的一些缺点的。2.1css有什么样的缺点？（1）语法不够强大，无法嵌套书写，开发中需要重复写很多遍选择器，造成代码冗余（2）没有变量、样式

2022-03-23 21:25:44 4228 1

原创 16种CSS水平垂直居中方法

16种css水平垂直居中方法以及应用（文字、图片）一、垂直居中1、行内元素基本思想：单行文本子元素line-height 值为父元素 height 值.parent { height: 200px;}.son { line-height: 200px;}2、块级元素2.1行内块级元素基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央兼容性：支持IE7.parent::afte

2022-03-22 16:47:29 30665

原创 css的四种引入方式

css的四种引入方式一、行内样式别名：行间样式、内联样式写法：在网页元素上通过style=""属性<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>二、内部样式表写法：在网页创建嵌入的样式表，写在里面<head> <style> p{ color:pink; border

2022-03-21 21:48:40 14117 1

原创 Docke容器虚拟化技术的一些认识

这个笔记是大二的时候刚接触docker的时候留下的，放在SCDN上面当作学习痕迹吧。一 Docker为什么会出现？一款产品从开发到上线，是两套环境。应用环境，应用配置！本地环境----测试环境----生产环境环境配置十分麻烦，每一台机器都要部署，项目能不能带上环境安装打包。docker的思想来自于集装箱java—jar(环境)----项目打包带上环境(镜像)----docker仓库(应用商店)----下载我们发布的镜像—直接运行java----apk----发布到应用商店-

2022-02-28 00:14:45 447

原创操作系统—文件管理

文件管理1 文件和文件系统文件系统的管理功能是将其管理的程序和数据通过组织为一系列文件的方式实现1.1 数据项、记录、文件（1）数据项数据项是文件系统中最低级的数据组织形式，可分为以下两种类型：① 基本数据项：用于描述一个对象的某种属性的一个值，如姓名、日期或证件号等，是数据中可命名的最小逻辑数据单位，即原子数据② 组合数据项：由多个基本数据项组成。（2）记录记录是一组相关的数据项的集合，用于描述一个对象在某方面的属性，如一个考生报名记录包括考生姓名、出生日期、报考学校代号、身份证号等一系

2021-12-25 21:20:05 5238

原创操作系统—输入输出系统

输入输出系统1 I/O系统的功能、模型和接口I/O系统管理对象主要是I/O设备和相应的设备控制器，主要任务是完成用户提出的I/O请求，提高I/O速率，提高设备利用率1.1 I/O系统的基本功能第一第二功能为了方便用户使用I/O设备第三第四功能是用于提高CPU和I/O设备的利用率第五第六功能是为用户在共享设备时提供方便，保证系统有条不紊进行，系统发生错误时候，能及时发现错误，甚至能自动修复错误。① 隐藏物理设备的细节对于不同的设备，需要有不同的命令和参数。如果要求程序员或用户编

2021-12-24 21:44:10 4050

原创操作系统—虚拟存储器

虚拟存储器1 虚拟存储器概述1.1 常规存储管理方式的特征（1）常规存储管理方式的特征① 一次性：作业在运行前需一次性地全部装入内存② 驻留性：作业装入内存后，便一直驻留内存，直至作业运行结束（2）常规存储器的问题① 有的作业很大，所需内存空间大于内存总容量，使作业无法运行② 有大量作业要求运行，但内存容量不足以容纳下所有作业，只能让一部分先运行，其它在外存等待虚拟存储器能解决的问题：增加内存容量。从逻辑上扩充内存容量----虚拟存储器1.2 局部性原理（1）局部性原理程序运行时

2021-12-23 21:43:38 4843

原创操作系统—存储器管理

存储器管理1 存储器的层次结构计算机执行时，几乎每条指令都涉及对存储器的访问。因此要求对存储器的访问速度跟得上处理机的运行速度。考虑到价格和现实因素，如今的计算机大都采用了多层结构的存储器系统1.1 存储器的多层结构存储层次至少应具有三级：最高层为CPU寄存器、中间为主存、最底层为辅存从上到下：①访问的速度越来越慢 ② 空间容量越来越大 ③单位价格越来越低CPU 寄存器和主存又被称为可执行存储器，其中的信息在掉电后不复存在。但是辅存中的信息可以长期保存。对于可执行存储器和辅存，计算机访问

2021-12-23 01:16:46 4165 1

原创操作系统——处理机调度与死锁

处理机调度与死锁1 处理机调度的层次和调度算法的目标1.1 处理机调度的层次（1）高级调度又称长程调度或作业调度。它的调度对象为作业，只适用于多道批处理系统中，不适合实时和分时系统。主要功能是根据某种算法，决定将外存上处于后备队列中的哪几个作业调入内存，为它们创建进程、分配必要的资源，并将它们放入就绪队列。（2）低级调度又称进程调度或短程调度。它的调度对象为进程或内核级线程，适用于所有类型的操作系统。其主要功能是，根据某种算法，决定就绪队列中的哪个进程获得处理机。进程调度是最基本的一种调度，在多

2021-12-22 14:40:58 817

原创操作系统——进程的描述与控制

操作系统——进程的描述与控制1 前趋图和程序执行1.1 前趋图前趋图（Precedence Graph）：是一个有向无循环的图，记为DAG（Directed Acyclic Graph），描述进程之间的先后顺序。目的：更好的描述程序的顺序和并发执行的情况表示为P={p1,p2,p3,p4,p5,p6,p7,p8,p9}={(p1,p2),(p1,p3),(p1,p4),(p2,p5),(p3,p5),(p4,p6),(p4,p7),(p5,p8),(p6,p8),(p7,p9),(p8

2021-12-20 00:51:10 1783

原创操作系统—概念与定义

操作系统的概念和定义1.1 操作系统的层次结构操作系统OS(Operating System)是指控制和管理整个计算机系统的硬件和软件资源，并合理地组织调度计算机的工作和资源的分配，提供用户和其他软件方便的接口和环境同时它是计算机系统中最基本的系统软件。操作系统在这里有什么作用？（1）负责管理协调硬件、软件等计算机资源的工作（2）为上层的应用程序、用户提供简单易用的服务（3）操作系统是软件不是硬件1.2操作系统的功能和目标作为资源的管理者（1）操作系统作为资源的管理者（这些资源包括

2021-12-15 19:57:44 6796 1

原创数据结构栈（顺序栈、链栈、插入push、删除pop）、队（循环队，链队、入队push，出队pop）知识点梳理

数据结构栈知识点梳理一栈的定义栈（stack）是限定仅在表尾进行插入和删除操作的线性表不含任何元素的栈称为空栈允许插入和删除的一端成为栈顶（top），另一端称为栈底（bottom）具有LIFO（Last In First Out）结构栈元素具有线性关系，即前驱和后继，是特殊的线性表二栈的插入、删除栈的插入操作—进栈（push）栈的删除操作—出栈（pop）三栈的抽象数据类型ADT 栈(stack)Data 同线性表。元素具有相同的类型，相邻

2021-11-03 09:29:33 7811 1

原创 css动画详细知识点梳理

css动画深入剖析整理—前端一前言css动画是个很神奇的玩意儿，但是属性又很容易混淆，傻傻分不清楚。前端开发已经习惯用Javascript来写动画，但是作为一个想走前端方向的学生，我觉得还是有必要掌握css动画的。二 animation,transition,transform,translate 详细整理2.1 animation(动画)（1）animation定义和用法（animation属性是一个属性的简写，用于设置六个+两个动画属性。）animation-nameanimation

TA创建的收藏夹 TA关注的收藏夹

TA关注的人