henuGM-优快云博客

原创第二章：引入 Tailwindcss 实现原子化CSS【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

原子化CSS是一种CSS的架构方式倾向于使用小巧、用途单一的class定义样式以class定义单一样式的方式，有效减少CSS包的体积。

2022-10-12 08:30:00 4542

原创第一章：实现组件库的MVP【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

MVP是什么？MVP是最简化可实行产品；也就是说，这一章我们要实现一个最简的组件库为什么使用vite？ 1. 基于 esbuild 实现极速开发 2. 兼容 Rollup 的插件机制与API 3. SSR 支持 4. 旧浏览器支持为什么 Vite 基于 Esbuild可以实现极速开发？

2022-10-10 08:00:00 2520

原创【蓝桥杯真题】当蓝桥杯开设Web组之后，对几题能拿省一？

目录🏆难度分析🏆一、水果拼盘🏆二、展开你的扇子🏆三、和手机相处的时光🏆四、灯的颜色变化🏆五、冬奥大抽奖🏆六、蓝桥知识网🏆七、布局切换🏆八、购物车🏆九、寻找小狼人🏆十、课程列表🏆结束语🏆难度分析这是蓝桥杯第一年开设web开发组，当时组委会在开会时就说过，由于不知道广大同学们的真实web水平，本次省赛会比较简单，来试试大家的真实水平；所以我们可以看到，这次省赛的题目都非常基础，我也是有幸混了一个省一： ...

2022-05-02 07:45:00 27415 208

原创第七章：使用Netlify零成本部署组件文档

一开始一共有三个方案：2、Netlify3、VercelGithub Page只支持一个repo发布一个网站，而我们的项目是一个mononrepo项目，后续可能还有其他需要部署的项目，pass掉；通过实操，目前通过vercel部署的网站正常无法访问，翻墙也不行，pass掉；

2023-01-04 10:59:16 843 2

原创第六章：利用dumi搭建组件文档【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

我们把准备好的logo放到docs项目的public的images文件夹中，然后。先安装一下我们的react-ui-teaching。下一章我们通过netlify部署一下文档；

2022-11-07 08:30:00 1998

原创第五章：将组件库发布到npm【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

然后我们需要有一个npm的账号：https://www.npmjs.com/signup。像自动化部署这些配置，我会专门拿出一章来讲；

2022-11-03 08:00:00 779

原创第四章：利用Monorepo方式管理组件库生态【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

Monorepo 的意思是在版本控制系统的单个代码库包含很多其他项目的代码；Unocss源码就是典型的Monorepo项目；

2022-10-24 09:00:00 1092

原创第三章：为组件库添加规范【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

本章我们会用 eslint、prettier以及Husky 为组件库添加规范；

2022-10-14 08:30:00 532

原创计算机组成原理——第一章计算机系统概论——复习逻辑图

计算机系统硬件计算机的实体软件由具有各类特殊功能的信息组成分类系统软件用来管理整个计算机系统语言处理程序分类汇编程序将汇编语言程序翻译成对应的目标程序编译程序将高级语言程序翻译成对应的目标程序链接程序将一个或多个目标程序与一个或多个相关的程序库组织在一起，产生可执行代码，并存入外存，在需要运行时再由操作系统加载后执行解释程序对高级语言程序逐句得进行翻译，产生对应的机器语言指令序列并执行之程序编译执行过程编译——链接——加载——执行

2022-08-17 21:02:16 760

原创 JavaScript的内存管理，你真的搞懂了吗？

前言每种语言与内存之间的关系都是不同的，了解JavaScript与内存的关系能够很好的帮助我们深入了解这门语言。一、什么是内存？内存其实就是程序真正运行的地方，其实程序本质上就是指令和数据的集合，所以说内存是指令和数据的存储器，之后的操作由cpu对内存中的指令和数据进行处理来完成；1、内存的分类1）、栈内存栈是一种常见的数据结构，栈只允许在一端操作数据，所有数据都遵循后进先出的原则；栈内存就使用...

2022-05-30 09:08:19 655 2

原创【前端知识体系梳理（四）】webpack基础

前言在前端开发过程中，webpack是我们绕不开的一个工具，这篇文章我们就来一起分析分析webpack到底是个什么工具；webpack是什么？从本质上来说，webpack是一种前端资源构建工具，是一个静态模块打包器；在webpack看来，前端的所有资源文件都会被作为模块处理；它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源；但是webpack本身默认只对JavaScript文件进行处理，其他...

2022-05-05 10:16:00 933 24

原创【前端知识体系梳理（三）】Diff策略

✅作者简介：大家好我是无处不楼台,是一个什么都会一点的大前端小白博主！📃个人主页：无处不楼台的博客_优快云博客-JavaScript学习,项目开发,node学习领域博主🔥系列专栏：知识体系梳理💖如果觉得博主的文章还不错的话，请👍三连支持一下博主哦🤞

2022-04-30 17:34:31 2372 72

原创【前端知识体系梳理（二）】前端跨页面通信手段

✅作者简介：大家好我是无处不楼台,是一个什么都会一点的大前端小白博主！📃个人主页：无处不楼台的博客_优快云博客-JavaScript学习,项目开发;🔥系列专栏：https://blog.youkuaiyun.com/qq_53087870/category_11785056.html?spm=1001.2014.3001.5482https://blog.youkuaiyun.com/qq_53087870/category_11785056.html?spm=1001.2014.3001.5482💖.

2022-04-27 16:37:07 5212 35

原创【前端知识体系梳理（一）】HTTPS协议

✅作者简介：大家好我是无处不楼台,是一个什么都会一点的大前端小白博主！📃个人主页：无处不楼台的博客_优快云博客-JavaScript学习,项目开发,node学习领域博主🔥系列专栏：知识体系梳理💖如果觉得博主的文章还不错的话，请👍三连支持一下博主哦🤞前言🔥聊到https，我们就得谈到http，了解http与https的关系是我们深入了解https的重点；首先我们需要明白https为什么要比http安全这是因为https使用对

2022-04-26 16:47:00 4785 5

原创 MAC中老版本react-native项目运行的报错总结

项目build：error：'React/RCTBridgeDelegate.h' file not found解决方法：pod install：[!] /bin/bash -c set -e #!/bin/bash # Copyright (c) Facebook, Inc. and its affiliates.解决方法：这个是xcode未指定命令行tool或者有多个tool造成的，在xode->Preference->Location中选用确定的xcode...

2022-03-10 18:41:25 3926 1

原创 Express框架基础

Express框架简介：在之前，我们要写一个web服务器程序的话，要使用node内置的http模块。而前面几篇文章也说过了，那样比较复杂，我们不要重复造轮子，Express就是这样一个web开发框架，它能够实现很多功能，包括：1、静态文件服务2、路由控制3、模板解析支持4、动态视图5、用户会话6、CSRF保护7、错误控制器8、访问日志9、缓存10、插件express就是一个基于内置核心http模块的一个第三方包使用Expre...

2022-03-04 13:31:39 1019

原创模板过滤器与模板继承关系-cookie与session状态保持--node.js学习（七）

模板过滤器和模板继承的使用过滤器的使用：如要使用过滤器，在app.js中：const template = require('art-template');template.defaults.imports.过滤器名字 = function(value){ //value接收html中“|”前面的值 return value * 1000}; 而在html模板页面中要用"|"隔开：<p>num1是：{{num...

2022-03-03 13:03:15 2687

原创 React的网络请求发送-----React学习（二）

学前知识：1、React本身只关注于页面，并不包含发送ajax请求的代码2、前端应用需要通过ajax请求来与后台进行交互3、react应用中需要集成第三方ajax库4、常用的ajax库有jQuery和axios在这里，我们使用axios：安装依赖：npm install axios --save引入axios依赖：import axios from 'axios'axios的get操作：axios.get('/user?ID=12345').the..

2022-03-01 22:28:02 3119

原创 Promise异步编程-异步终极解决方案async+await-node.js初级（三）

Promise简介：Promise是异步编程的一种解决方案，ES6将其写入语言标准，统一了语法，原生提供了Promise对象。所谓Promise，简单来说就是一个容器，里面保存着某一个未来才会结束的事件（通常是一个异步操作）的结果。从语法上来说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。 Promise对象有两个特点： 1、Promise对象的状态不...

2022-03-01 08:48:56 2456

原创模块化与内置模块-手写第一个web服务器程序-node.js初级（二）

为什么要进行模块化：进行模块化主要是为了更好的维护我们的代码，我们把很多函数分组，分别放到不同的文件里面，一个js文件就是一个模块。这样能够提升代码的可维护性，也可以直接在自己的项目里引用其他的模块，就像Node内置的模块和其他来自第三方的模块重点：方便项目的开发和维护模块的规范：每一个模块的作用域是私有的，内部定义的变量或者函数，只在当前的文件中可以使用如果别人需要使用我们模块...

2022-03-01 08:48:37 408

原创盒子模型的理解---IE怪异盒子模型----面试题学习（一）

盒子模型是什么？当对一个页面进行layout的时候，浏览器的渲染引擎会根据CSS基础框盒模型，将所有元素表示为一个个矩形的盒子。一个盒子模型由四个部分组成：1、content：实际内容，显示文本和图像2、padding：内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响。3、border：边框，围绕元素内容的内边距的一条线或者多条线，由粗细、样式、颜色三部分组成4、margin：外边距，在元素外为整体创造空白...

2022-02-28 21:51:55 483

原创 AJAX发送请求与响应-jQuery中ajax的使用-node初级（五）

AJAX简介： AJAX即异步JavaScript与XML技术，是一套综合了多项技术的浏览器端网络开发技术。简单来说，AJAX就是使用JavaScript代码发送网络请求并处理响应，有浏览器即客户端实现。 ajax技术能够在页面不刷新的情况下，和服务器端进行交互，可以仅向服务器发送并取回必须的数据，并在客户端采用js处理响应。交换的数据大大减少，服务器的响应更加迅速，把数据处理工作放到了客户端进行，减少了web服务器的负荷。特点：异...

2022-02-27 08:39:01 3016

原创与HTTP协作的web服务器------计算机网络学习（三）

HTTP/1.1规范允许一台HTTP服务器搭建多个web站点。即使物理层面只有一台服务器，但只要使用虚拟主机的功能，就可以假想已经具有多台服务器。在互联网上，域名通过DNS服务映射到IP地址之后才访问目标网站，所以说，当请求发送到服务器，就已经是以IP地址的方式来访问了。而如果一台服务器托管了多个域名，所以在域名映射成IP地址后，我们并不能知晓目标到底要访问哪个域名，所以，我们必须在Host首部内完整指定主机名或者域名的URI。...

2022-02-26 14:52:01 249

原创 Mac扩展分区

diskutil list//查看有多少扩展空间diskutil apfs resizeContainer disk0s2 100GB//这个数目就是disk0s2后面的数字

2022-02-25 18:41:01 510

原创初步了解HTTP协议-------计算机网络学习（二）

就实际情况而言，两台计算机作为客户端或者服务端的角色可能会互换。但就一条通信线路而言，服务端和客户端的角色是明确的。HTTP协议的两端角色是明确的。发送请求的报文例子：GET /index.htm HTTP/1.1Host: hackr.jp 在这里面，GET表示请求访问服务器的类型，/index.htm表示请求访问的资源对象，也叫作请求URI，HTTP/1.1代表客户端HTTP的版本号，用来提示客户端使用的HTTP协议功能。 ...

2022-02-24 22:30:23 1524

原创 HTTP网络基础---TCP/IP---计算机网络学习（一）

在网页浏览器的地址栏里面输入URL时，web页面是如何呈现的？我们应该知道在网页浏览器里面输入URL之后，信息会发送到某处，然后从某处获得回复，然后将web页面呈现出来。那么，再详细一点，web浏览器是根据地址栏中的指定URL，从web服务器端获取文件资源等信息，从而显现出web页面。像这种通过发送请求获取服务器资源的web浏览器，都可称为客户端。 web使用一种名为HTTP的协议作为规范，以来完成从客户端到服务端的等一系列的流程...

2022-02-24 18:46:38 1717

原创 Java期末考试必考知识点（从刷题入手）

1、main方法的方法头记住：public static void main(String args[])2、任何能运行Java字节码文件的软件都可以看成Java的虚拟机3、Java是一门面向对象的语言，Java具有自动垃圾回收的机制，Java可以跨平台，支持多线程4、集合类都位于java.util包中5、方法重载是指两个或者两个以上的方法取相同的方法名，但形参的个数或者类型不同6、static int arr[ ]=new int[10]; 这段代码的结果是产生了一个容量为

2022-02-22 21:59:31 5420 2

原创 Java期末考试必考知识点（从课堂内容入手）

JAVA没有信息卷，只能从老师上课讲的入手，梳理可能会考到的知识点，以不变应万变。1、Java三个技术平台：JavaSE、JavaEE、JavaME2、Java语言的特点：简单性、面向对象、安全性、跨平台性、支持多线程、分布性3、1995年，Java语言诞生（据说会考）4、JDK：一套Java开发环境，简称JDK(Java Development Kit)。JDK包括Java编译器、Java运行工具、Java文档生成工具、Java打包工具等JDK目录：bin目录：该目录用于存放

2022-02-22 19:58:23 2591

原创 RN多数据解耦解决方案---react-native折线图---react-native项目整理

出现问题：在react-native-charts-wrapper的折线图在展现动态数据会出现一定的问题： 1、多数据源在中图表展现的时候，若数据源中点个数不同难以达到平衡 2、在多数据源的情况下，如果每一个数据源使用与其相对应x轴数据的话或者多个数据源使用其中一个数据源的x轴数据，都会造成rn图表中数据的不客观，数据不真实。当前情况下，我们的图表数据源为多个，且各个数据的返回时间不同，可以理解为多个定时器，定时器中不断产生图表的数...

2022-02-22 19:20:45 971

原创 C#期末考试必考知识点

1、C#是基于运行时的强类型，一般的不规范语言都不符合C#的语言规则。2、C#的值类型包括：结构体（数值类型，bool型，用户定义的结构体），枚举，可空类型3、C#的引用类型包括：数组，用户定义的类、接口、委托，object，字符串4、C#中区分浮点型与小数型其中，浮点型可分为两种：float单精度与double双精度单精度与双精度的区别在于取值范围和精度的不同。计算机对浮点数据的运算速度大大低于对整数的运算速度。因此在对精度要求不高的情况下，我们可以采用单精度类型，而在精度要.

2022-02-22 16:07:00 2305 2

原创数据结构期末考试必考知识点

数据结构期末必看next数组的求解方法是：第一位的next值为0，第二位的next值为1，后面求解每一位的next值时，根据前一位进行比较。首先将前一位与其next值对应的内容进行比较，如果相等，则该位的next值就是前一位的next值加上1；如果不等，向前继续寻找next值对应的内容来与前一位进行比较，直到找到某个位上内容的next值对应的内容与前一位相等为止，则这个位对应的值加上1即为需求的next值；如果找到第一位都没有找到与前一位相等的内容，那么需求的位上的next值即为1。————

2022-02-21 14:20:01 4463 3

原创数字逻辑期末考试必考知识点（从上课知识点分析）

1、数字系统：对数字信号进行加工、传递和存储的实体。2、数字信号：在时间上和数字上都不连续变化的信号。3、模拟信号：在时间上和数字上都是均匀变化的信号。记：加工、传递、存储 || 模拟变化丝滑、数字变化生硬4、数制的变换：主要是16转2进制：一位变成四位，可以忽略的零忽略掉如：(6D.4)进制16 = 01101101.0100 = 1101101.015、BCD码：使用四位二进制码表示一位十进制数码。6、根据码中的每一位是否有权来区分有权码与无权码。7、BCD码是以二进制的

2022-02-21 12:48:28 2565

原创数字逻辑期末考试必考知识点（从题目中分析）

1、一个触发器只有两种状态，构成组合逻辑电路，要看最大值是多少，几位二进制数能够满足要求既然是模4，那么最大值为3，化成二进制是11，那么只需要两个触发器即可2、奇偶校验位：若为奇校验：原数据中1的个数为奇数时，校验位为0，反之为1；若为偶校验：原数据中1的个数为奇数时，校验位为1，反之为0；求偶检位，1有三个，所以检验位是1，完整的偶检验码：1001113、对偶式：把一个式子里面的“和”变成“且”，“0”变成“1”，“1”变成“0”：这个标准式子里面，之所以没.

2022-02-21 12:44:42 5207

原创给JSON-Server添加中间件

需要添加的中间件：middleware.js:module.exports=(req,res,next)=>{ if(req.method==='POST'&&req.path==='/login'){ if(req.body.username==='jack'&&req.body.password==='123123'){ return res.status(200).json({

2022-02-12 15:17:42 1527

原创使用泛型控制Typesript项目中的类型保持与any替代的问题

Typescript与Javascript的区别在于：ts是强类型，而js是弱类型。在ts中每一个函数或者组件获得的参数都需要确定类型，这样我们就可以在静态页面中通过ts党的报错直接解决大部分bug，避免了js弱类型，只能在代码运行中报错的问题。而在ts中，我们也应该避免使用any，any就意味着这个参数可以是任意类型，在运行代码时容易发生错误。export const useDebounce = (value: any, d...

2022-02-12 14:00:08 893

原创使用Debounce对频繁数据的请求操作进行处理

在有查询功能的项目中，只要输入框值的改变，请求出来的数据都会不同。而对于即时查询功能，也就是一旦在输入框中值，数据即时请求且即时展示的项目，我们往往在输入几个关键字的时候触发多次请求. 这种即时查询系统，在react项目中一般都是使用useEffect对输入框的值的改变进行处理。例子：在输入物料管理系统这六个字的时候，我们就发送了三次请求，这对整个系统的稳定是不利的。在这里我们使用debou...

2022-02-11 15:15:03 1336

原创使用.env与qs.stringify()对接口进行处理

例子：已知现在是通过两个值来对本地server请求数据。http://localhost:3001/projects?name=%E9%AA%91%E6%89%8B&personId=1name是转译过的，在这里我们是要使用name和personId从服务端请求值，所以这里的处理比较重要。 1、如果我们是在本机设置的mock-server进行接口测试，我们应该把测试的接口与最后正式使用的接口区...

2022-02-11 14:11:49 596

原创使用.env从项目中提取需更换的值

日常开发中，前端与后端开发进度不一，如果后端开发较慢，前端所需接口需要我们自己去mock，这里我们使用的接口就是自己本机上的接口，在后端开发完毕后，我们需要将这个接口换回来。如果这个接口在项目中多次出现，且项目极其复杂，那么我们就需要将这种数据提出来。在项目根目录下，新建文件“.env”与“.env.development”在.env.development中这样写：REACT_APP_API_URL=http://local...

2022-02-10 15:26:14 830

原创使用JSON Server在项目中配置Mock数据以及json server的基本数据操作

1、项目根目录下键入：yarn add json-server -D等待安装成功。2、在项目根目录下新建文件夹“__json_server_mock__”.这个文件夹名字前后代两个杠，代表这个文件夹实际与本项目代码关系不大。3、在此新建文件夹中创建文件“db.json”,写入：{ "user":[]}4、再在package.json中找到以下代码，并添加代码："scripts": { "start": "react-scripts start",

2022-02-10 14:00:22 8647

原创 Typescript-React项目开发前配置

npx create-react-app jira --template typescriptnpx可以让你直接去使用npm里面的包，而不需要先安装这个包。创建完之后，打开创建的项目可以看到，已经有一次git的commit记录，而且显示的是create-react-app这个包进行的git，已经自动把所有文件加入到git中。npm start//打开这个项目一般来说，如果整个项目的目录结构不复杂，文件夹的嵌套结构不深的情况下，要import...

2022-02-09 17:07:01 574 2

空空如也

reactnative的iOS端能调用到android代码吗