咕啾啾-CSDN博客

原创【Git】分布式版本控制系统

git是目前世界上最先进的分布式版本控制系统（没有之一）。git 的重要性在这里就不多说了，只要是公司的多人开发项目基本用的都是 git，进项目组的时候 leader 让你拉下代码，提交下代码，要是说不会的话真的就尬住了。目前我学习的重点在“更好的使用 git”而不是“研究 git”。

2024-01-18 15:44:29 1021

/ 基本语法 —— 定义类class 类名 {属性名: 类型;constructor(参数: 类型) {this.属性名 = 参数;方法名() {...// 一个简单的 Person 类示例// 定义属性类型static className: string = 'PersonTS' // 类属性// constructor -> 构造函数，在创建对象实例时调用// 实例属性// 实例方法// 在方法中可以通过 this 来表示当前调用方法的对象。

2024-01-11 15:04:54 966

原创【网络传输】HTTP 缓存

浏览器每次发起请求时，先在本地缓存中查找结果以及缓存标识，根据缓存标识来判断是否使用本地缓存。如果缓存有效，则使用本地缓存；否则，则向服务器发起请求并携带缓存标识。根据是否需向服务器发起HTTP请求，将缓存过程划分为两个部分：强制缓存和协商缓存，强缓优先于协商缓存。

2022-11-27 16:01:30 782 1

原创【leetcode】【JavaScript】二叉树

【leetcode】【JavaScript】二叉树。

2022-08-04 20:00:01 337

原创【React 框架】setState / Lazy loading / Hooks / Fragments / Context / PureComponent / render props / ...

官方文档：React.Component – React （1）stateChange 为状态改变对象 ( 该对象可以体现出状态的更改 )。（2）callback 是可选的回调函数，它在状态更新完毕、界面也更新后 ( render 调用后 ) 才被调用。2、setState(updater, [callback])------函数式的setState （1）updater 为返回 stateChange 对象的函数。（2）updater

2022-07-12 22:37:56 353

原创【React 框架】redux / react-redux

（1）redux 是一个专门用于做状态管理的 JS 库 ( 不是 react 插件库 )。（2）它可以用在 react、angular、vue等项目中, 但基本与 react 配合使用。（3）作用：集中式管理 react 应用中多个组件共享的状态。（1）某个组件的状态，需要让其他组件可以随时拿到（共享）。（2）一个组件需要改变另一个组件的状态（通信）。（3）总体原则：能不用就不用，如果不用比较吃力才考虑使用。2、redux

2022-07-11 17:03:37 1322

原创【React 框架】路由 / react-router-dom 相关 API / 嵌套路由 / 路由组件传递参数 / 编程式路由导航

（1）单页 Web 应用（single page web application，SPA）。（2）整个应用只有一个完整的页面。（3）点击页面中的链接不会刷新页面，只会做页面的局部更新。（4）数据都需要通过 ajax 请求获取，并在前端异步展现。（1）一个路由就是一个映射关系 ( key：value )。（2）key 为路径，value可能是 function 或 component。2.2.1 后端路由（1）理解

2022-07-07 10:45:32 547

原创【React 框架】Ajax / 配置代理服务器 / axios 的使用 / 消息订阅与发布技术 / fetch 发送请求

2、方法二：创建代理配置文件 setupProxy.js步骤：1、第一步：在src下创建配置文件：src/setupProxy.js（创建代理配置文件）。2、编写setupProxy.js配置具体代理规则：二、react 中 axios 的使用1、概述2、ajax 的使用三、消息订阅与发布技术（组件间通信）github：GitHub - mroderick/PubSubJS: Dependency free publish/subscribe for Jav

2022-07-05 15:17:01 803

原创【Promise】Promise 的使用 / API / 回调地狱问题 / 宏队列与微队列

我们定义的，我们没有调用，最终执行了。（1）同步的回调函数：理解：立即在主线程上执行，不会放入回调队列中。举例：数组遍历相关的回调函数 / Promise 的 executor 函数。（2）异步的回调函数：理解：不会立即执行，会放入回调队列以后执行。举例：定时器回调 / ajax 回调 / Promise 的成功、失败的回调。官方文档：Error - JavaScript | MDN捕获错误：try{ }catch( ){ }MDN文

2022-06-29 21:05:41 1706 1

原创【ajax】概述、发送请求 ( GET / POST )、解决跨域问题 ( JSONP / CORS )

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。概念：XML是可扩展标记语言，被设计用来传输和存储数据。XML 与 HTML：HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。2.2 JOSN3、AJA

2022-06-27 17:30:22 1676 5

原创【React 框架】React 应用：基于 React 脚手架

（1）xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目。① 包含了所有需要的配置（语法检查、jsx编译、devServer…）。 ② 下载好了所有相关的依赖。③ 可以直接运行一个简单效果。（2）react提供了一个用于创建react项目的脚手架库：create-react-app。（3）项目的整体技术架构为：react + webpack + es6 + eslint。（4）使用脚手架开发的项目的特点：模块化......

2022-06-20 17:28:08 959

原创【React 框架】React面向组件编程：非受控组件 / 生命周期 / DOM 的 diffing 算法

四、DOM 的 diffing 算法1、概述在入门章节曾说过，React 有一个特点是：使用虚拟 DOM + Diffing 算法，尽量减少与真实 DOM 的交互。主要步骤（个人理解）：（1）初始化的时候，虚拟 DOM 获取到了数据 A，并呈现到真实的 DOM 上。（2）虚拟 DOM 再次接收到数据 B 时，会先将数据 A 与数据 B 进行对比，对比的最小力度是标签。① 若标签内容没有发生任何改变，则不进行更新，直接沿用之前的。② .........

2022-06-14 15:56:32 190

原创【React 框架】React面向组件编程：函数式组件 / 类式组件 ( state / props / refs / 事件处理 )

【React 框架】函数式组件 / 类式组件 ( state / props / refs / 事件处理 )

2022-06-12 20:55:20 1578

原创【React 框架】简介 / 入门案例 / 虚拟DOM / 真实DOM

（1）原生 JavaScript 操作 DOM 繁琐、效率低（ DOM-API 操作 UI ）。（2）使用 JavaScript 直接操作 DOM，浏览器会进行大量的重绘重排。（3）原生 JavaScript 没有组件化（ html / css / js ）编码方案，代码复用率低。（1）采用组件化模式、声明式编码，提高开发效率及组件复...

2022-06-07 21:19:57 686

原创【JavaScript - Web API】移动端网页特效

一、触屏事件1.1 触屏事件移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。1.2 触摸事件对象（TouchEvent）TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等 touchstart、touchmove、t

2022-05-27 16:04:27 274

原创【JavaScript - Web API】PC端网页特效（ offset / client / scroll / 动画函数封装 / 网页轮播图案例）

学习视频以及笔记参考来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili一、元素偏移量 offset 系列1、offset 常用属性offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。注意点：（1）获取元素距离带有定位父元素的位置，也就是说，得到的是相对于有定位的...

2022-05-25 19:40:55 280

原创【JavaScript - Web API】BOM（定时器 / JS执行机制 / location对象）

学习视频及笔记参考来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili一、BOM概述1、什么是 BOM ？2、BOM 的构成window 对象是浏览器的顶级对象，它具有双重角色：（1）它是 JS 访问浏览器窗口的一个接口。（2）它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候.

2022-05-23 21:23:59 342

原创【JavaScript - Web API】事件高级（注册删除事件 / DOM事件流 / 阻止事件冒泡 / 事件委托 / 常用鼠标键盘事件）

学习视频以及笔记参考来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili一、注册事件1、概述2、addEventListener 事件监听方式eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。 eventTarget.

2022-05-19 20:40:10 629

原创【JavaScript - Web API】DOM（获取元素 / 事件基础 / 操作元素 / 节点操作）

一、DOM 简介1、什么是 DOM ？文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。2、DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示。元素：页面中的所有标签都是元素，DOM 中使用 element 表示。 ...

2022-05-18 16:04:05 487

原创【JavaScript】内置对象（Math / 日期 Date / 数组 Array / 字符串 String / 堆栈数据类型）

一、概述 JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象。前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于我们JS 独有的，我们JS API 讲解。内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等。查阅文档：MDN: http.

2022-05-10 18:29:16 373

原创【JavaScript】作用域 + 预解析 + 对象

一、作用域1、概述通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。 1.1 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。 1.2 局部作用域（函数作用域）作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。1.3 JS没有块级作用域（在ES6之前）

2022-05-08 12:16:46 377

原创【JavaScript】数组（冒泡排序） + 函数

学习视频及笔记来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibiliPS：有C语言基础，所以笔记做的比较简单QAQ一、数组1、创建数组注意：数组中可以存放任意类型的数据，例如字符串，数字，布尔值等，这和其他语言不太相同！1.1 利用 new 创建数组var 数组名 = new Array(); var arr = new Array(); /

2022-05-04 20:20:10 873

原创【JavaScript】运算符+流程控制（if...else/switch）+ 循环（for/while）

学习视频及笔记来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibiliPS：有C语言基础，所以笔记做的比较简单QAQ一、JavaScript 运算符1、算数运算符浮点数的精度问题：不要直接判断两个浮点数是否相等！2、递增和递减运算符如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。.

2022-05-03 17:03:05 814

原创【JavaScript】初识JavaScript+变量+数据类型

学习视频及笔记来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili一、JS简介1、HTML/CSS/JS的关系2、JS的组成2.1ECMAScript ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际..

2022-05-02 21:05:21 914

原创【HTML+CSS】移动端布局之响应式布局+Bootstrap框架

学习视频及笔记参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili一、响应式开发1、响应式开发原理原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备划分尺寸区间响应式尺寸超小屏幕（手机） < 768px 100% 小屏设备（平板） >= 768px ~ <992px 750px 中等屏幕（桌面显示

2022-05-01 22:44:49 1329

原创【HTML+CSS】移动端布局之rem布局

学习视频及笔记来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili一、rem基础1、概念rem是一个相对单位，类似em。 rem与em区别：em是相对于父元素字体大小而言的；rem是相对于html元素的字体大小而言的。 rem的优势：度元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小（可以根据具体屏幕的大小来适配不同的字体大小）。2、语法/* 根html 为 12p

2022-05-01 15:35:26 1790

原创【HTML+CSS】移动端布局之flex布局

一、flex布局原理1、概念flex ( flexible Box ) ，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局。2、布局原理布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。3、Flex 容器...

2022-04-26 21:14:20 1434

原创【HTML+CSS】移动端布局之流式布局

学习视频及笔记参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili一、移动端基础1、视口视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。布局视口 layout viewport：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。视觉视口 visual viewport：用户正在看到的网站的区域。理想视口 idea

2022-04-23 19:09:38 1262

原创【HTML+CSS】提高篇：HTML5+CSS3新特性

一、HTML5新特性1、新增语义化标签 <header>：头部标签 <nav>：导航标签 <article>：内容标签 <section>：定义文档某个区域 <aside>：侧边栏标签 <footer>：尾部标签 2、新增多媒体标签2.1 视频 <video>2.1.1 支持的视频格式2.1.2 语法 <video co

2022-04-15 21:05:17 199

原创【HTML+CSS】CSS高级技巧：精灵图+字体图标+CSS三角应用

学习视频及笔记参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili一、精灵图1、精灵图的理解（1）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。（2）目的：有效的减少服务器接收和请求的次数，提高页面的加载速度。2、精灵图的语法/* 1、先导入精灵图作为背景图。 *//* 2、定位到想要的图标的位置 *//* 注意：x轴向右边走为正值，左边走为负值；

2022-03-29 18:59:43 2436

原创【HTML+CSS】CSS页面布局：盒子模型+浮动+定位

一、盒子模型1、盒子模型组成CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。2、边框（border） border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。边框会影响盒子的实际大小。 /* 边框语法 */border : border-width || border-style || border-color/* 边框简写-无顺序 */border: 1px solid

2022-03-17 20:24:00 5435

原创【HTML+CSS】CSS的元素显示模式+背景+三大特性

一、CSS的元素显示模式1、元素显示模式特点+注意点元素模式元素排列设置样式默认宽度常见的元素块级元素一行只能放一个块级元素可以设置宽度高度容器的100％常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素行内元素一行可以放多个行内元素

2022-03-17 15:24:42 148

原创【HTML+CSS】CSS属性+基础/复合选择器

一、属性1、CSS语法规范/* 所有的样式，都包含在 <style> 标签内，表示是样式表。 *//* <style> 一般写到 </head> 上方 */<head> <style> h4 { color: blue; font-size: 100px; } </style></head>

2022-03-09 12:52:25 143

原创【HTML+CSS】HTML常用标签

一、标题标签<h1>-<h6> 标签语义：作为标题使用，并且依据重要性递减。单词 head 的缩写，意为头部、标题。特点：①加了标题的文字会变的加粗，字号也会依次变大。②一个标题独占一行。 <h1> 我是一级标题 </h1>二、段落和换行标签标签语义：可以把 HTML 文档分割为若干段落。单词 paragraph [ˈpærəgræf] 的缩写，意为段落。特点：①文本在一个段落中会根据

2022-02-25 11:59:40 565

原创【HTML+CSS】HTML基础知识+软件使用

目录一、HTML简介1、网页2、Web标准二、HTML标签1、HTML语法规范2、HTML基本结构标签3、开发工具：VScode学前端的第一天滴滴~希望能一直坚持！学习视频及知识点来源：https://www.bilibili.com/video/BV14J4114768?p=12&spm_id_from=pageDriver写完博客之后发现整理笔记确实需要一些时间和精力，经验是之后只记录于我而言比较难的点！一、HTML简介1、网页网站：在因特网上

2022-02-24 20:05:13 292

qq_30148319的博客