傲娇味的草莓的博客_CSDN博客-前端css,前端js基础,操作系统领域博主

傲娇味的草莓

码龄3年

个人简介：本科大三计算机专业在读|熬最晚的夜写最难的码

查看详细资料

4

领奖

总分 665 当月 43

个人成就

获得116次点赞
内容获得33次评论
获得505次收藏

TA的专栏

兴趣领域设置

前端

javascriptcssvue.jsreact.jses6webpackxhtml前端框架
后端

node.js
移动开发

flutter
网络

https
微软技术

typescript
小程序

小程序
职场和发展

面试
设计

uxui交互illustrator平面

搜TA的内容

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

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

发布博客 2022.04.21 ·

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 ·

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

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

发布博客 2022.04.09 ·

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

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

发布博客 2022.04.09 ·

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

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

发布博客 2022.04.07 ·

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

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

发布博客 2022.04.06 ·

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 ·

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

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

发布博客 2022.04.05 ·

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

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

发布博客 2022.04.03 ·

ES6中的箭头函数详细梳理

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

发布博客 2022.04.03 ·

JS—节流与防抖

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

发布博客 2022.04.01 ·

数组去重的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 ·

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

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

发布博客 2022.04.01 ·

ES6的Set、WeakSet、Map、WeakMap

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

发布博客 2022.03.31 ·

空值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 ·

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 ·

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 ·

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 ·

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 ·

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 ·