自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(78)
  • 收藏
  • 关注

原创 前端开发环境模拟HTTPS

进入要建立 HTTPS 服务的目录。

2024-02-26 10:27:41 657

原创 R3F(React Three Fiber)基础篇

>

2024-02-24 22:44:56 1195

原创 R3F(React Three Fiber)经验篇

之前一直在做ThreeJS方向,现在不做了,整理了两篇R3F(React Three Fiber)的文档,这是经验篇,如果您的业务场景需要使用R3F,可以参考一下这个文档。下面是目录,按照需求自取。

2024-02-24 22:35:22 1075

原创 Electron 入门

elelctron 脚手架、线程通信、菜单、右键管理

2024-02-21 21:22:04 1320

原创 Dart 语言TS开发者速通(ChatGPT)

/ 输出 14如果需要给fulfilled、rejected赋予具体的值,请使用抽象类 + 常量属性。

2024-02-21 21:10:52 845

原创 前端初学者的Ant Design Pro V6总结(下)

Antd Pro 相关配置、Pro Component 组件配置

2023-12-04 18:25:32 1610

原创 前端初学者的Ant Design Pro V6总结(上)

/ 添加跨域请求头在locales > zh-CN / zh-CN 定义常量Model采用约定式目录结构,约定在src/models和Model即命名空间,它可以划分数据流,src/models/count.ts命名空间即count,src/pages/pageA/model.ts命名空间即pageA.model。src/models目录下不支持目录嵌套定义 model下 model 定义支持嵌套定义Model就是个自定义Hooks,它需要一个默认导出的函数。

2023-01-18 23:18:42 4434 4

原创 Bug:Warning: [antd: ***] overlay is deprecated. Please use menu instead.以及解决方案

【代码】Bug:Warning: [antd: ***] overlay is deprecated. Please use menu instead.以及解决方案。

2023-01-13 21:23:45 4841

原创 FreeRTOS教程——二值信号量(四)

目的:共享资源访问、与任务同步信号量类型:二值信号量、计数型信号量、互斥信号量、递归互斥信号量本质上是一种只包含一个项数的队列。

2023-01-04 10:31:54 190

原创 FreeRTOS教程——队列(三)

queue. h创建一个新的队列。为新的队列分配所需的存储内存,并返回一个队列处理。如果队列成功创建,并返回一个新建队列的处理。如果不能创建队列,将返回0。

2023-01-04 10:30:56 1067

原创 FreeRTOS教程——定时器(二)

软件定时器允许设置一段时间,当设置的时间到达之后就执行指定的功能函数,被定时器 调用的这个功能函数叫做定时器的回调函数。回调函数的两次执行间隔叫做定时器的定时周期, 简而言之,当定时器的定时周期到了以后就会执行回调函数。

2023-01-04 10:29:09 1021

原创 FreeRTOS教程——任务(一)

运行正在执行的任务就是处于运行状态,它占用了处理器。就绪就绪的任务是那些可以执行(没有被阻塞或暂停),但是因为其他相同或更高优先级任务正在运行造成还没有运行的任务。阻塞当一个任务等待临时事件或外部事件时它就是处于阻塞状态。例如,任务调用 vTaskDelay() ,它将被阻塞(置为阻塞状态)直到超过延时时间 – 一个临时事件。任务也可以阻塞等待队列和信号事件。阻塞状态的任务一般有一个超时时间,超时后任务将解锁。阻塞的任务不会参与调度。暂停暂停状态的任务也不参与调度。

2023-01-04 10:27:39 979

原创 mqtt综合实战(中国移动OneNET+ESP8266 AT指令)

mqtt综合实战(中国移动OneNET+ESP8266 AT指令)

2022-10-19 16:49:49 3552

原创 Node.js 处理 MQTT协议极简案例

Nodejs MQTT流程

2022-10-19 11:33:58 536

原创 JS实现groupby功能

JavaScript实现GroupBy功能

2022-10-17 15:11:19 1795

原创 递归判断JS对象内所有属性值是否为空,并返回空值的key和value

递归判断JS对象内所有属性值是否为空,并返回空值的key和value

2022-06-13 21:17:31 1165

原创 JavaScript设计模式:序、设计模式分类

序、JavaScript设计模式参考:设计模式:https://juejin.cn/post/6844904032826294286一、设计模式分类(23种设计模式)创建型单例模式 原型模式 工厂模式 抽象工厂模式 建造者模式结构型适配器模式 装饰器模式 代理模式 外观模式 桥接模式 组合模式 享元模式行为型观察者模式 迭代器模式 策略模式 模板方法模式 职责链模式 命令模式 备忘录模式状态模式 访问者模式 中介者模式 解释器模式二、设计原则单一职责原则(类功能要单一

2022-05-29 11:07:16 128

原创 JavaScript设计模式:十、适配器模式

十、适配器模式一、概述适配器模式是设计模式行为型模式中的一种模式;定义:适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修改已有接口,就可以使他们协同工作;1. 最小案例var googleMap = { show: function(){ console.log( '开始渲染谷歌地图' ); }};var baiduMap = { display: function(){

2022-05-29 11:03:07 143

原创 JavaScript设计模式:九、单例模式

单例模式就是不用重复去构建实例,直接取之前创建过的那个保存在内存中的实例,之前看element写的ui组件loading,也是单例模式。

2022-05-29 11:01:44 183

原创 JavaScript设计模式:八、状态模式

八、状态模式一、概述一个对象有状态变化,每一个状态变化都会触发一个逻辑,我们不能总是if…else 来写,所以我们就把状态和当前对象分离开来,比如最常见都红绿灯。红灯状态下是(停下),黄灯状态是(警告),绿灯状态是(通行)。那么我们就可以把这3个状态和方法都抽离出来。提高代码复用,符合开放封闭原则class RedLamp { constructor() { this.state = '红灯'; console.log('我是红灯'); } handle() {consol

2022-05-05 10:51:37 194

原创 JavaScript设计模式:七、外观模式

七、外观模式参考:https://blog.csdn.net/weixin_37064409/article/details/79073629一、概述为一组复杂的子系统接口提供一个更高级的同意接口,通过这个接口是的对子系统接口的访问更容易, 对底层结构兼容型做同意封装来简化用户使用。1. 点击事件兼容例子点击事件的兼容性封装浏览器对点击事件存在兼容性问题,对DOM绑定onclick事件为DOM0级事件,相当与为元素绑定了一个事件方法,重复定义会覆盖。<div id="dom"

2022-05-03 15:46:38 80

原创 JavaScript设计模式:六、工厂模式

JavaScript设计模式:六、工厂模式文章目录JavaScript设计模式:六、工厂模式一、概述1. 简单工厂模式一、ES6 Class实现二、原型实现2. 复杂工厂模式1) ES5原型实现2) es6-new.target属性的正确用法new.target属性实例3)ES6实现一、概述1. 简单工厂模式一、ES6 Class实现大白话:通过不同的参数由工厂的构造函数返回不同对象。工厂模式,通过传入不同短参数达到实例化不同的对象这一目的。比如: 有一天你去餐厅想吃宫保鸡丁,然后餐厅给你实

2022-05-03 15:45:42 584

原创 JavaScript设计模式:五、迭代器模式

JavaScript设计模式:五、迭代器模式参考文档:https://juejin.cn/post/6844904032826294286一、概述提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象的内部表示。1. 主要实现方法:Iterable,next(),hasNext(),getIterator()2. 极简实践class Iterable { constructor(conatiner) { this.list = conatiner.list; this

2022-05-03 15:45:01 466

原创 JavaScript设计模式:四、发布订阅模式

JavaScript设计模式:四、发布订阅模式文章目录JavaScript设计模式:四、发布订阅模式一、概述1. 观察者模式2. 发布订阅模式3. 观察者模式是不是发布订阅模式一、概述观察者模式: 观察者(Observer)直接订阅(Subscribe)主题(Subject),而当主题被激活的时候,会触发(Fire Event)观察者里的事件。发布订阅模式: 订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(

2022-05-03 15:44:13 2247 2

原创 JavaScript设计模式:三、代理模式

三、代理模式文章目录三、代理模式一、虚拟代理1. 简易虚拟代理例子2. 图片占位加载例子二、缓存代理1. 缓存代理的例子——计算乘积其他代理模式参考:https://blog.csdn.net/wuyufa1994/article/details/86557788一、虚拟代理1. 简易虚拟代理例子function Flower(){};var xiaoming = { sendFlower : function(target) { var flower = new Flower(

2022-05-03 15:43:12 452

原创 JavaScript设计模式:二、策略模式

JavaScript设计模式:二、策略模式文章目录JavaScript设计模式:二、策略模式一、概念二、实现方式三、例子不使用策略模式模拟传统面向对象策略模式(原型实现)JavaScript字面量对象实现ES6类实现一、概念策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。策略模式指的是定义一系列的算法,把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来。一个基于策略模式的程序

2022-05-03 15:42:19 392

原创 JavaScript设计模式:一、装饰者模式(原型链)

JavaScript设计模式:一、装饰者模式(原型链)参考:https://blog.csdn.net/userkang/article/details/104533641https://www.cnblogs.com/gaosirs/p/10756503.html装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。枪击大战例子// 被装饰的玩家class Player {

2022-05-03 15:41:18 478

原创 前端面试中浏览器相关问题(三):跨域

前端面试中浏览器相关问题(三):跨域熟悉web前端开发的人都知道,浏览器在请求不同域的资源时,会受到浏览器的同源策略影响,常常请求资源不成功,这也就是我们常常提到的跨域问题。这类问题常常会拖延着项目的推进,困扰着前端开发者。今天,我们就来谈一谈前端中可能会遇到的跨域问题。1.跨域问题的由来首先我们需要了解的是,前端处于项目开发过程中最接近用户的一个区域,代码最容易被hack获取解析,也最容易受到攻击。针对这个问题,互联网早期探索者Netscape提出了一个著名的安全策略——同源策略:浏览器限制脚本中发

2022-05-03 15:39:26 716

原创 前端面试中浏览器相关问题(二):回流与重绘

二、你真的了解回流和重绘吗文章目录二、[你真的了解回流和重绘吗](https://segmentfault.com/a/1190000017329980)浏览器的渲染过程生成渲染树回流重绘何时发生回流重绘浏览器的优化机制减少回流和重绘最小化重绘和重排批量修改DOM避免触发同步布局事件对于复杂动画效果,使用绝对定位让其脱离文档流css3硬件加速(GPU加速)如何使用效果重点css3硬件加速的坑回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事

2022-05-03 15:33:31 254

原创 前端面试中浏览器相关问题(一):浏览器存储

前端面试中浏览器相关问题(一):浏览器存储文章目录前端面试中浏览器相关问题(一):浏览器存储基本概念CookielocalStoragesessionStorage三者的异同应用场景安全性的考虑基本概念CookieCookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的

2022-05-03 15:28:19 127

原创 JavaScript原型链总结:继承(二)

二、JS继承(JS原型链二)文章目录二、JS继承(JS原型链二)一、JS实现继承的七种方式1. 原型链实现继承原型链实现继承的问题:2. 借用构造函数实现继承传递参数借用构造函数的问题3. 组合继承(构造继承+原型继承)最常用!!!4. 原型式继承优缺点5. 寄生式继承6. 寄生组合式继承(一)回顾组合式继承(二)使用Object.create 和工厂增强组合式继承(三)ES5继承最佳实践,寄生组合继承!!!(四)使用原型工厂封装寄生式组合继承7. 寄生式构造函数的语法糖class二、JS多继承(Mixi

2022-03-15 09:42:43 739

原创 JavaScript 原型链总结(一)

JS原型链(一)文章目录JS原型链(一)一、对象构造函数,原型对象,实例对象之间的关系二、原型链继承三、常用API四、面试问题一、什么是原型与原型链二、原型和原型链存在的意义是什么?补充一、in与hasOwnProperty属性检测差异二、isPrototypeOf 原型链检测三、DOM节点借用Array原型方法四、合理的构造函数声明问题:不合理的构造函数合理的做法:将共享方法绑定到prototype上如果构造函数需要定义的方法较多,可以将原型声明为一个对象五、`__proto__`1. Object.s

2022-03-15 09:41:05 1338

转载 React native uuid [Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid

React native uuid [Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuidInstall react-native-get-random-valuesImport it before uuid:import 'react-native-get-random-values';import { v4 as uuidv4 } from 'uuid';转载自:https://s

2022-02-21 11:47:49 1495

原创 React Navigation 基本使用

React Navigation 基本使用参考资料https://reactnavigation.org/docs/环境搭建Minimum requirementsreact-native >= 0.63.0expo >= 41 (if you use Expo)typescript >= 4.1.0 (if you use TypeScript)Installationnpm install @react-navigation/nativenpm install

2022-02-20 18:19:11 2218

转载 解决 SyntaxError: Cannot use import statement outside a module 报错问题

解决 SyntaxError: Cannot use import statement outside a module 报错问题转载自 https://www.jianshu.com/p/cd36e968cd88原因: npm运行node项目, 需要babel编译, 才能支持import等高级语法;安装babelnpm install --save babel-corenpm install --save babel-preset-env npm install babel-cli -g创

2022-01-04 23:12:35 1811

原创 九、TextInput组件

TextInput组件参考文档:https://www.react-native.cn/docs/textinput#editable案例:import React from 'react';import { View, TextInput, SafeAreaView, Alert } from 'react-native';function UselessTextInput(props) { return ( <TextInput {...props} // 将父

2021-11-06 18:36:53 110

原创 八、Slider组件

Slider组件参考文档:https://github.com/callstack/react-native-sliderInstallation & UsageTo install this module cd to your project directory and enter the following command:yarn add @react-native-community/sliderornpm install @react-native-community/s

2021-11-06 18:36:10 306

原创 七、Picker组件

Picker组件参考文档:https://github.com/react-native-picker/picker#onvaluechangeGetting started$ npm install @react-native-picker/picker --saveor$ yarn add @react-native-picker/pickeriOSCocoaPods on iOS needs this extra step:npx pod-install注意:请务必cd到i

2021-11-06 18:35:30 316

原创 六、ScrollView组件

ScrollView组件ScrollView 必须有一个确定的高度才能正常工作一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间,但前提条件是所有的父容器本身也设置了 flex 或者指定了高度,否则就会导致无法正常滚动,你可以使用元素查看器来查找具体哪一层高度不正确。长列表尽量用FlatList,效率会比较高。综合实例import React from 'react';import {StyleSheet, Text, View, ScrollView, S

2021-11-06 18:34:28 195

原创 五、Image组件

Image组件Image组件在 Android 上支持 GIF 和 WebP 格式图片[#](https://www.react-native.cn/docs/image#在-android-上支持-gif-和-webp-格式图片)案例Image组件在 Android 上支持 GIF 和 WebP 格式图片#默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在android/app/build.gradle文件中根据需要手动添加以下模块:dependencies { //

2021-11-06 18:32:45 136

空空如也

空空如也

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

TA关注的人

提示
确定要删除当前文章?
取消 删除