无糖的酸奶-CSDN博客

原创无聊写个 chatgpt 玩玩！这不得试一试 openai 的聊天和绘画功能

chatgpt 最近很火。使用 chatgpt 问一些问题还是很有用的。比如面试题，面试题的答案。简直不要太爽。不过闲来无事，也使用 openai 提供的api ，写了几个小页面，可以进行聊天，和绘画

2023-04-18 19:49:16 3678 1

原创前端优化-防抖&节流

顾名思义，就是防止抖动的。比如验证码点击切换，用户快速点击了5次，但其实不用切换五次验证码，只需要切换一次就行了。那么就可以使用防抖。防抖的特点是一定时间内的连续多次的触发，只会执行一次真正的回调。节流是限制触发的频率，比如连续的滚动，scroll事件会被频繁的触发。如果这个时候，需要通过JS 去操作 DOM ，那么频繁的操作就会降低性能，导致页面卡顿这个时候，就可能需要使用节流，限制它 16 ms 执行一次，如果不需要太及时，30ms执行一次也可以。

2023-04-03 09:51:37 589

原创细聊 JavaScript 的事件执行机制

细聊 JavaScript 的事件执行机制我使用的 Node.js 版本是 v12.13.0 的， 11 的版本前会与11 版本后的事件循环有些区别。线程？都说 JavaScript 是单线程的，那么什么是单线程呢？单线程就是进程只有一个线程。那这又扯到进程这个概念了。进程进程（Process）：进程是一个具有独立功能的程序关于某个数据集合的一次运行活动。它可以申请和拥有系统资源，是一个动态的概念，是一个活动的实体。它不只是程序的代码，还包括当前的活动，通过程序计数器的值和处理寄

2022-04-14 12:00:00 499 1

原创 Node.js中的 npm , package.json以及npx

npm 包管理器什么是 npm就是你配吗？开玩笑的。全称： node package manager ，中文叫 node 包管理器。它起初是作为下载和管理 Node.js 包依赖的方式，但其现在也已成为前端 JavaScript 中使用的工具。但其实它也是一个包。不过它很强大，成为包老大，手下一群小弟（其他）。通过 npm 即能管理其他包，也能管理自己（通过 npm 管理 npm）。npm 能干什么1. 下载npm 可以下载并安装第三方库。下载命令安装所有依赖n

2022-04-13 12:15:00 696

原创 node.js中的模块化

Node.js 中的模块化Node 使用了 CommonJS 模块化标准。通过 exports 暴露，require 导入。CommonJS 是同步的，会等待模块加载完后再继续执行。而 ES module 默认是异步加载的。Node 一开始并不支持 ES module 。现在能使用，不过可能需要相关配置。需要了解可以戳这 Node.js 如何处理 ES6 模块-阮一峰导入与导出requirerequrie是 node 的全局方法。在任何 js 文件里都可以使用。它的作用有两点：

2022-04-12 12:00:00 184

原创 Node.js 的安装与配置

什么是 nodeNode.js 不是一门语言，也不是库或者包。Node.js 是一个基于 V8引擎的 JavaScript 的运行时环境,可以解析 JS 代码。（游览器也是一种 JavaScript 运行环境）简单的说 Node.js 就是运行在服务端的 JavaScript。但与 JavaScript 也有些不同。Node.js 中的 JavaScript没有DOM和BOM支持基本的 EcmaScript 语法额外提供了一些服务器级别的操作APINode.js

2022-04-11 12:50:34 803

原创 Typora设置文件自动上传

Typora 自动上传图片到图床

2022-03-15 11:00:00 1809 2

原创浅聊JS预处理，以及提升问题

引导我们都说， JavaScript 是解释型语言，执行到哪一行就编译解释执行哪一行那我们看下面这个代码console.log(a)var a = 1你觉得他打印出的是什么呢？ 1 还是报错 a is not defined当然都不是，实际上打印 undefined实际上，它等同于下面这些代码var aconsole.log(a)a = 1那么说 JavaScript 是解释型语言就解释不通了。因为明明先执行 console.log(a) 按理说，应该报错。那么 .

2022-03-13 21:54:18 1673

原创处理游览器缩放带来的border出现缝隙的问题

收到一个师弟的问题，说同样的代码，有的有问题，有的没有问题。不知道为什么问题是这样子的左边的不会，但右边的会。但代码是一样的这个问题，早在我当时初学的时候也发现了。不过当时没有找到很好的解决办法。对此，我先是查看了结构和样式。发现的盒子，就比立即抢购这个元素多了 1px 的 border 。但在放大和缩小时，即使通过开发者工具查看还是仅是多个border 。但却出现了白色空隙。对于出现的原因，我不记得之前在哪里看到过了。说是因为游览器在处理这种情况时，本身有一个适合的大小。就比如 1p.

2022-03-02 22:48:12 2326 1

原创 ECharts---一个非常炫酷好用的图表库。发现自己写的好详细。怪不得当时弄那么久。

ECharts_study对于渲染可视化图标的库有许多，因为项目需要，我学习了 Echarts 。完整叫 Apache ECharts很多图在基本的准备部分不会详细说明，因此初学一定要看基本准备的部分另外，图表真的很多，官网什么是 EchartsECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观

2021-11-24 23:26:53 3140

原创 Mockjs - 前端模拟请求数据生成器

mockjsMock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：根据数据模板生成模拟数据模拟 Ajax 请求，生成并返回模拟数据基于 HTML 模板生成模拟数据中文网github安装npm install mockjs --save--dev一般是开发时依赖。简单使用这里我使用 vue 来演示1.创建模拟服务根目录下创建一个 mock 文件夹。同一存放 Mock 相关文件// mock/mock.js//

2021-11-22 20:39:09 1732

原创 redux 及 react-redux的详细使用过程和案例。分享搬砖知识的一天，期间打瞌睡了几次。啊哈哈~

搬砖搬砖，分享点搬砖技巧。第六章了，差不多结束了，还有些零零散散的，慢慢搬吧。之前的章节内容可点这~第六章 — reduxredux中文官网6.1 什么是 redux官方是这样子说的：redux 是 JavaScript 应用程序的可预测状态容器，它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行且易于测试的应用程序。官方的解释有时候总是看不懂的说一下我的理解。JavaScript 应用程序： redux 和 react 可是两回事，只是长的像而已。 redu.

2021-09-18 23:44:55 866 7

原创 Neumorphism ：集拟态美 ? 不不不，就是聊一聊CSS拟态而已啦。八千多字，我是扯了啥呀。

最近有些忙，考驾照，上课，处理项目依赖。就没怎么学习新知识和发文章咯。今天周六，聊一聊拟态吧。英文怎么读我是不知道的。就顺便读吧。哈哈Neumorphism——新拟态设计什么是 NeumorphismNeumorphism - 新拟态UI风格是目前比较新颖的一种前端css设计风格.它的格调简单，基本颜色比较浅，如米白，浅灰，浅蓝等。再利用阴影呈现出凹凸效果。看起来和简单舒适，且有3D效果。因此我们可以通过拟态设计出很多优美的页面。如下图：什么是 SkeuomorphismNeum.

2021-09-11 14:04:00 1341

原创简单的贪吃蛇小游戏。使用的是纯原生 JavaScript 和 HTML ，CSS

这个小游戏是一时兴起。在暑假时写的。不过当时还比较简陋。后来开学后。还没上课。就又拿出来改了改界面。让它看起来更美观，更像贪吃蛇一些。先展示展示几张图吧。开始前开始咯吃了些小老鼠后：撞墙或撞到自己后当时去做这个时，可能是突然的一个想法。但并不是要做一个完整的游戏出来。所以这里并没有设置关卡模式有些细节也并不关注。只是去关注了身体移动，吃食物，成长这些主要的问题。当然，这些主要问题解决，增加其他功能就不是大问题了。这里我就先说一下我的思路，有兴趣和想法的同学们可以自己先去.

2021-09-06 10:50:57 614 4

原创超详细的图片预加载和懒加载教程

最近接手一个项目。结果光安装依赖都出现了一堆麻烦。好不容易处理完一个，又来一个。头疼啊看到之前有一些预加载的学习笔记。于是又查查找找，想想写写把预加载和懒加载的笔记写完整发现制图挺麻烦的！不知道你们有没有什么推荐？写了挺久的这篇文章，有什么不对的地方欢迎评论或私聊指出图片的预加载和懒加载预加载和懒加载的字眼总会看到。其实预加载和懒加载不仅仅是用于加载图片资源。其他资源，文字，视频。都可以。我们较常用或较需要使用的场景就是加载图片资源。这里，我们也只讨论加载图片资源。.

2021-09-04 16:59:31 7876 2

原创 react-router-dom的使用；react 路由实现的基本原理和浅谈前后端路由

react 路由学了好久，断断续续的，也开学了。忙这忙那。呼呼。终于学完这一章节了内容有点多，5.1 的相关知识只是浅谈，需要深入了解可以找找其他博文。如果这里有不对请指正啦。第五章 — react-router5.1 相关知识1. 浅谈网页发展1.1后端渲染阶段早期网页早期网页是由 jsp/php 代码开发，基本是html和css它的请求过程是输入网站后，发送到服务器，服务器会将完整的网页返回，也就是已经渲染完成的网页，包括一些图片资源等。这个也就是后端渲染，即请求回来的即使渲染.

2021-09-01 21:53:36 450

原创抽象数据类型 ADT

5. 抽象数据类型（ADT）抽象数据类型 (ADT，Abstract Data Type)是指一个数学模型以及定义在此数学模型上的一组操作。它通常是对数据的某种抽象，定义了数据的取值范围及其结构形式，以及对数据操作的集合。抽象数据类型是描述数据结构的一种理论工具，其目的是使人们能够独立于程序的实现细节来理解数据结构的特性。抽象数据类型（ abstract data type ）是从数据使用者的角度去看数据类型。抽象数据类型是对数据的一种抽象描述，是一种数学上的约束。数据结构是ADT的

2021-08-25 15:19:29 4569 1

原创 JS --- canvas画布的简单使用

canvas<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。（我做不到）1. canvas 标签使用 canvas 需要在页面中增加 canvas 标签<canvas id="canvas" width="300" height="300"> 文字代替：你的游览器不支持 canvas , 换一个

2021-08-13 19:03:40 14398 3

原创 javascript-事件自动触发

事件自动触发在JQ里有一个trigger()方法可以使事件自动触发原生怎么搞？1. element.dispatchEvent()对于标准浏览器，其提供了可供元素触发自定义事件的方法：element.dispatchEvent().。在IE6/7/8则使用 fireEvent()方法在使用dispatchEvent前需要先创建和初始化2. createEvent()createEvent()方法返回新创建的Event对象参数事件接口初始化方法HTMLEvent事件H

2021-08-03 11:57:10 1267

原创微信小程序自定义底部 tabbar的两个方法

这里记一下微信小程序自定义 tabbar 的方法，一个是官方给出的。一个是我在尝试的过程中想到的。官方文档给了一个自定义tabbar 的方法。这个方法需要注意一下几点：为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组

2021-07-31 16:03:30 6533

原创微信小程序自定义组件的基本使用

微信小程序自定义组件的基本使用组件与模块类似，实现了功能的复用，提高开发速率，减少代码量在开发过程中，总会遇到一些功能板块是相同或很类似的。如两个不同页面都有搜索框，或者导航栏等。那么这个使用就很有必要使用组件了组件文件创建一般在根目录下创建一个 components 文件夹，用于保存各组件组件模板<view> <view>组件内部</view><view>组件使用定义组件在使用组

2021-07-29 17:45:44 1225

原创 js --- 扩展运算符

参数扩展与收集ES6 增加有一个特殊符号，拓展运算符 ’ … ’ 即三个点。它的使用如下：扩展参数… 扩展运算符能将可迭代对象转换为逗号分隔的参数系列；如将数组拆开，其位置在传值体前（实参，需把自身拆开的变量）前const arr = ['手机','电脑','人一个']...arr // => '手机'，'电脑','人一个'应用场景：1. 如果将数组作为参数传入；则传入的只有一个参数，参数是一个数组；如果传入参数时给数组前加上扩展运算符如…arr;如会将数组解构出来

2021-07-25 10:12:35 4356

原创 ES6---类的继承

ES6的继承其实可以说就是对ES5的继承机制的包装和一些优化，其背后还是原型链。继承基础ES6 类支持单继承。使用 extends 关键字，就可以继承任何拥有[[Construct]]和原型的对象。它会继承父类上的原型方法，静态成员，以及 constructor (需要配合 super)很大程度上，这意味着不仅可以继承一个类，也可以继承普通的构造函数（保持向后兼容）class Fclass1 {}// 第一种继承方法class Sclass1 extends Fclass1 {

2021-07-22 15:33:12 660

原创 es6 --- 类

ECMAScript 6 新引入的 class 关键字具有正式定义类的能力。class（类）其实是对ES5 的构造函数，继承等进行了封装，语法糖等，使的构造函数创建，继承等像使用类一样。类定义与函数类型相似，定义类也有两种主要方式：类声明和类表达式。这两种方式都使用 class 关键字加大括号。// 类声明class Person {} // 不需要小括号// 类表达式const Animal = class {}; 类表达式类表达式可以只有变量名，也可以有类名和变

2021-07-22 15:23:02 192

原创 javascript-ES5-继承的实现

ES6的类继承其实是对ES5的较复杂的继承过程的封装。这里讲一下我对ES5继承的实现过程的学习和理解。如果有问题，请大佬指出也可以一起交流。继承是面向对象编程中讨论最多的话题。很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。原型链就是实例有一个指针指向其构造函数的原型，而原型是对象，也就是原型也

2021-07-21 16:35:49 146

原创 DIV 模拟 textarea

呼呼呼~textarea: 为什么？你已经无所不在了，还想着代替我？div:不好意思了，你在你的领域确实很强大，但是input不能换行，而你却一言不合就出现滚动条，你得知道，这有时候，很丑。textarea: 其实我是可以高度适应的，you look<style> textarea { padding: 0; }</style><body> <textarea name="" id="area" cols="34"

2021-07-20 19:53:08 1103

原创 Javascript --- 模板引擎

模板引擎什么是模板引擎官方解释：“模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。”看不懂简单来说就是将业务逻辑层和显示层分开，通过引擎将数据与模板结合，再将结果显示出来。举个栗子你要写一个文章回复的页面，回复块的代码有很多地方需要填充数据（如：回复的人的信息，回复人的ID，回复内容，回复被点赞数…)一般情况下实现的方法可能是通过字符串拼接将代码与数据拼接起来，然后添加到某一

2021-07-20 17:46:11 4232

原创工厂模式，构造函数模式及原型模式

工厂模式用于抽象创建特定对象的过程。function CreateObj1(name, age) { return { name: name, age: age }}let Obj1 = CreateObj1('obj1', 'age1')console.log(Obj1); // { name: 'obj1', age: 'age1' }缺点：没有解决对象标识问题（即新创建的对象是什么类型）。构造函数模式function CreateObj2(name, a

2021-07-20 14:47:00 177

原创 CSS-MASK

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。遮罩必须有两个图层，上面一个为遮罩层，下面一个为被遮罩层，这两个图层中只有重叠部分才会有效果，其要求是，如果遮罩层完全不透明，被遮罩层原图显示，如果遮罩层部分透明，原图也会有些透明，遮罩层完全透明，被遮罩层不显示；可理解为，把遮罩层每个部分的透明度一一对应附加到被遮罩层上注意：遮罩层如果是图片一般是PNG格式的，且有透明部分的MASK 属性值包括（类似

2021-06-12 13:30:57 533

FOR 的博客