![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 60
前端学习专栏
中南滴水哥
啥也不会,废物一个!!
展开
-
彻底掌握页面白屏检测
在日常的前端开发中,我们可能会遇到一些页面白屏的问题。这些问题可能会给用户带来不好的体验,甚至导致用户流失。本文带你彻底了解前端白屏,从此不再畏惧。原创 2024-07-03 17:01:33 · 416 阅读 · 0 评论 -
bable初探
https://juejin.cn/post/7045496002614132766#heading-41转载 2023-03-07 11:41:15 · 175 阅读 · 1 评论 -
npm、yarn到pnpm的发展历程
npm、yarn到pnpm的发展历程原创 2022-11-23 10:40:05 · 924 阅读 · 0 评论 -
js实现全排列功能
【代码】js实现全排列功能。原创 2022-10-10 17:05:09 · 186 阅读 · 0 评论 -
typescript高级类型 Partial, Readonly, Pick, Record
typescript高级类型 Partial, Readonly, Pick, Record原创 2022-09-26 10:17:43 · 425 阅读 · 0 评论 -
纯前端实现羊了个羊,既然玩不过就自己造一个
纯前端实现羊了个羊,react+ts+vite+antd原创 2022-09-24 21:10:20 · 2187 阅读 · 2 评论 -
原生js实现复制功能
【代码】原生js实现复制功能。原创 2022-09-19 16:12:22 · 199 阅读 · 0 评论 -
Typescript对象的类型 -- 接口
在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。原创 2022-09-08 16:47:06 · 161 阅读 · 0 评论 -
同源策略,跨域,请求,网络安全详细知识
同源策略,跨域,请求,网络安全详细知识原创 2022-09-05 19:39:49 · 2325 阅读 · 0 评论 -
socketio确认函数
中文文档地址原文地址有时,您可能希望在客户端确认消息接收时收到回调。为此,只需将函数作为.send或.emit的最后一个参数传递。 更重要的是,当你使用.emit时,确认是由你完成的,这意味着你也可以传递数据。也就是说,我们emit的最后一个参数如果是函数,就会在接收端调用之后触发这个确认函数,相当于ack,确保接收方接受到了消息,当然这个这个确认函数是可以传递参数的!!学习过程中遇到了小记一下...原创 2022-04-13 18:14:26 · 504 阅读 · 0 评论 -
npm nvm nrm npx n五个管理工具讲解
npm nvm nrm npx n五个管理工具讲解npmnpm 的全称是 Node Package Manager 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。常用命令npm install 安装模块npm uninstall 卸载模块npm update 更新模块npm outdated 检查模块是否已经过时npm ls 查看安装的模块npm init 在项目中引导创建一个packag原创 2022-02-18 11:06:11 · 686 阅读 · 0 评论 -
redux概览
redux概览一:为什么需要redux二:三大原则三:设计思想四:最基本使用五:Redux中间件六:React-redux七:redux-action八:关键函数讲解一:为什么需要redux随着JavaScript单页应用开发日趋复杂,管理不断变化的state变得十分困难。状态的变更也变的十分难以追踪,这时候一种新的管理方式需要被使用,所以redux产生了。二:三大原则【一】单一数据流 整个应用的 state被储存在一棵object tree中,并且这个object tree只存在于唯一的s原创 2021-11-24 16:23:20 · 688 阅读 · 0 评论 -
前端websocket实现简易聊天室
分为客户端和服务端,客户端就是一个简单的html页面,服务端使用node进行编写。具体代码如下index.html<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>websoket</title></head><body> <h1>chat room</h1> <in.原创 2021-11-17 19:47:43 · 2716 阅读 · 0 评论 -
关闭vscode保存后自动格式化代码
方案一: 将设置-文本编辑器-正在格式化-format on save取消勾选方案二:安装了 JS-CS-HTML Formatter这个插件的原因,那么解决办法就是禁用或者卸载这个插件,原创 2021-09-05 23:16:08 · 1992 阅读 · 0 评论 -
whistle使用指南
whistle使用指南一、whistle 简介二、安装、启动、配置2.1 安装 Node.js2.2 安装 whistle2.3 启动 whistle2.4 配置代理 (推荐)2.5 抓取 HTTPS 请求(可选)2.5.2 信任 whistle 证书2.5.3 验证抓取 HTTPS 请求三、修改请求实例演示3.1 修改请求3.1.1 修改请求方法3.1.2 修改请求头3.1.3 修改请求体3.2 修改响应3.2.1 修改响应状态码3.2.2 修改响应头部3.2.3 修改响应体四、总结一、whistle原创 2021-07-29 19:47:51 · 10646 阅读 · 8 评论 -
NPM详解
NPM详解介绍命令执行多个脚本pre & post错误静默消息日志等级从文件中引用路径访问环境变量传递参数命名规则前缀在拿到一个项目之后,如何看入口文件,如何运行项目,我们都会找到 package.json 中的 script 。 甚至在做项目做久之后,我们会自己写一些脚本来给开发提效,但你知道 NPM 脚本能做什么吗? 你知道如何传递一个参数给脚本? 你知道如何执行某个脚本文件么? 在这篇文章中,我将分享我如何充分利用 NPM 脚本。介绍NPM 脚本是 package.json 中定义的一组原创 2021-07-02 16:59:46 · 7365 阅读 · 1 评论 -
从零开始搭建规范的typescript-react项目
从零开始搭建规范的typescript-react项目**加粗样式**从零开始搭建规范的typescript-react项目新建TS-React项目EslintPrettierhusky+linthusky+lint-staged增加git commit提交规范从零开始搭建规范的typescript-react项目新建TS-React项目安装create-react-appnpm install -g create-react-app初始化TS-React项目create-react-原创 2021-07-02 16:49:09 · 492 阅读 · 2 评论 -
npm发布包详细流程+常见错误
文章目录一级目录二级目录三级目录创建目录编写内容发布:可能报的错:(1)未登录(2)仓库地址不对(3)电脑环境问题(4)403错误成功发布去npm 官网搜索使用一级目录二级目录三级目录前言:npm官方建议规范的包至少包含:package.json(包的基本信息)README.md(文档)index.js (入口文件)创建目录电脑上首先要下载node.js,如果没有就先下一个去npm官网上注册一个账号,需要记住用户名,密码和邮箱创建一个新目录并使用npm init初始化m原创 2021-06-18 15:24:13 · 1538 阅读 · 1 评论 -
promise妙用(等同步函数里的异步执行完再继续执行)
考虑这样一个场景:function func1(){ let temp = new Promise((res, rej) => { setTimeout( () => { console.log('第三'); },2000) })}function func2() { console.log("第二") func1();}function func3(){ console.log('第一')原创 2021-06-17 15:41:10 · 5291 阅读 · 2 评论 -
npm包管理
npm包管理转载 2021-06-03 10:23:26 · 63 阅读 · 0 评论 -
TypeScript快速入门
TS的基本数据类型null和undefined只有本身function:声明的函数在调用的时候,参数个数要和声名的时候的参数个数保持一致,并且要保持类型的相同//没有返回值的函数可以用void声明const fn1 = (param1:string,param2:number): void => { console.log("我是没有返回值的箭头函数");};function f2(param1:string,param2:number):void{ conso原创 2021-06-01 14:39:29 · 99 阅读 · 0 评论 -
小程序快速入门_01
项目里面不同的类型文件.json的配置文件.wxml后缀的模板文件 - html.wxss后缀的样式文件 - css.js后缀的JS脚本逻辑文件 - js四个重要文件类型JSON配置app.json是当前小程序的全局配置,包括页面路径、界面表现、网络超时,底部tap等信息,重要字段(page window)project.config.jsonpages.json:定义每一个页面的配置WXML模板组件化编程的体现多了一些渲染逻辑和表达式,(MVVM的体现)..原创 2021-05-14 12:02:22 · 58 阅读 · 0 评论 -
JS垃圾回收与内存泄漏
JS垃圾回收与内存泄漏原创 2021-03-17 13:51:41 · 522 阅读 · 0 评论 -
JS对象概述
对象什么是对象?代表现实中的某个事物, 是该事物在编程中的抽象多个数据的集合体(封装体)用于保存多个数据的容器为什么要用对象?便于对多个数据进行统一管理对象的组成属性代表现实事物的状态数据由属性名和属性值组成 属性名都是字符串类型, 属性值是任意类型方法代表现实事物的行为数据是特别的属性==>属性值是函数如何访问对象内部数据? `.`属性名: 编码简单, 但有时不能用 `['属性名']`: 编码麻烦, 但通用什原创 2021-03-16 21:36:48 · 525 阅读 · 0 评论 -
Javascript函数概览
函数什么是函数:具有特定功能的n条语句的封装体只有函数具有行为(可执行的)函数也是对象function fn() {}console.log(fn instanceof Object) // 是Object类型的实例,打印true为什么要函数提高代码的复用便于理解和阅读申明一个函数函数申明(函数申明的方式会有函数提升)函数表达式f1() //可以先使用再声明f2() //函数表达式不会又变量声明,所以这里会显示报错,f2 is原创 2021-03-16 18:30:11 · 502 阅读 · 0 评论 -
JS数据类型,变量和内存
数据类型,变量和内存1、数据类型数据类型的分类:基本(值)类型Number:任意数值String:任意文本Boolean:true/falseundefined:undefinednull:null'symbol ':ES6中新加的(本文不讨论)对象(引用)类型Object:任意对象Array:特别的对象类型(下标/内部数据有序)Function:特别的数据对象(可执行)数据类型的判断:js是一门弱语言,它在声明变量时无需确定变量的类型,js在运行时会原创 2021-03-16 10:51:22 · 527 阅读 · 0 评论 -
Vue组件基础
Vue组件的使用方法:组件命名:(短横线式和驼峰式)注意:当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。(Vue官网)组件的data必须是一个函数why?一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:从而不止于多次使用这个组件时他们之间的变量进行相互干扰组件的组织形式:由于组原创 2021-03-09 10:06:59 · 516 阅读 · 0 评论 -
Vue中is属性的使用
Vue中is属性的使用前言: 在读官方文档的时候看到了is属性,现对其做总结用法一:动态的切换组件<div id="app"> <button @click="changeComponent('component1')">组件1</button> <button @click="changeComponent('component2')">组件2</button> <!-- 通过is特性,可以动态切换当前组件原创 2021-03-09 09:07:52 · 2796 阅读 · 1 评论 -
v-model的实现原理
v-model的实现原理基础用法v-model 本质上不过是语法糖,可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScri原创 2021-03-09 08:45:55 · 23506 阅读 · 2 评论 -
Vue_Day1
模板语法插值文本数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:<span>Message: {{ msg }}</span>//只要data中的msg发生变化,{{msg}}就会动态的发生变化通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:<span v-once>这个将不会改变: {{ msg }}</span>原创 2021-03-08 13:44:25 · 561 阅读 · 0 评论 -
Canvas实战之时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-03-06 13:23:17 · 507 阅读 · 0 评论 -
函数节流和函数防抖浅析
函数节流和函数防抖浅析函数防抖函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。(也就是说只会执行最后一次)例如:公交司机要在最后一个乘客上车后并且相应时间内再没有乘客上车才会触发关闭公交门的事件实现方式:通过计时器来实现,设置事件在n秒内只执行一次,如果在n秒内又触发了该事件,那么计时器清空。重新开始n秒计时,直到n秒内没有再触发该事件那么就进行计时器的函数回调例子:如果一直滚动的话是不会触发scrollTap()函数的,只原创 2021-03-05 15:22:42 · 1706 阅读 · 0 评论 -
函数执行的踩坑(addEventListener)
记录一次踩坑经历写法一:const outer = function () { var x = "我是外面函数的变量"; console.log('我现在要在外层被调用'); return function () { console.log(x); } }; document.addEventListener('scroll', outer原创 2021-03-05 14:23:03 · 773 阅读 · 0 评论 -
encodeURI()和encodeURIComponent() 区别
encodeURI()和encodeURIComponent() 区别URI: Uniform ResourceIdentifiers,通用资源标识符具体的URI格式【来源百度百科】:【协议名】: //用户名:密码@服务器地址:服务器端口号/路径?查询字符串#片段ID定义:encodeURI[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uRmaySLp-1614860559200)(https://gitee.com/csu_xzy/drawing-bed原创 2021-03-04 20:23:40 · 1009 阅读 · 1 评论 -
JavaScript数组方法
ES5中数组的新方法1、forEach()从头到尾遍历数组,为每个元素调用指定函数第一个参数:传递的函数该函数调用的参数:数组元素、元素索引、数组本身(不需要全部写上)var array = [1,2,3,4,5]; var sum = 0; array.forEach(function(val){sum += val}); console.log(sum); array.forEach(function(val,index,array) {原创 2021-03-04 14:18:10 · 901 阅读 · 1 评论 -
CSS选择器超详解
CSS选择器CSS选择器的作用:CSS选择器根据不同的需求把不同的标签选出来,方便为选出来的标做样式处理,这就是CSS选择器的作用。CSS选择器的分类:基础选择器:是由单个选择器组成的,例如标签选择器,类选择器等等。复合选择器:有多个选择器组成,例如后代选择器,兄弟选择器等等。CSS基础选择器:标签选择器:是用HTML标签名称作为选择器,按标签名称分类,可以为页面中的某一类标签指定统一的CSS样式。基本语法:标签名: { 属性1: 属性值1; 属性2:原创 2020-12-29 00:07:57 · 698 阅读 · 0 评论 -
纯js实现搜索框自动补全
纯js实现搜索框自动补全开发语言:HTML+CSS+JS编辑器:VSCode构建思路:建立两个div,一个用于输入和搜索,一个用于展示,用于展示的初始状态为隐藏的。后面当有键盘输入事件时就显示,遍历数组,如果找到了我们要输入的就将其加入到展示的div里面,如果搜索框失去焦点就清空。界面展示:项目完整代码:<!-- * @Author: CSU_XZY * @Date: 2020-12-22 20:43:12 * @LastEditors: CSU_XZY * @LastEdit原创 2020-12-22 21:35:30 · 1972 阅读 · 0 评论 -
纯JS实现验证码生成与检验
纯JS实现验证码生成与检验使用语言:HTML+CSS+JS开发工具:VSCode功能说明:可以实现验证码的自动产生,可以切换验证码,同时可以进行验证码的检验效果展示:构建思路:使用数组来进行验证码的产生,当点击后调用产生验证码的函数更新验证码,检验时通过获取验证码和用户输入的验证码进行比对,成功就弹出成功,失败就清空验证码输入框。项目源码<!-- * @Author: CSU_XZY * @Date: 2020-12-22 15:28:30 * @LastEditors: CS原创 2020-12-22 16:34:34 · 1057 阅读 · 0 评论 -
CSS实战:CSS实现折扇效果(可以表白哦)
前言:使用CSS做出折扇的开合效果,当鼠标悬浮上去就会开扇,移开就合扇。适合装逼,也可以用来表白哈。开发工具:visual studio code语言:HTML+CSS环境:windows10GitHub地址:扇子开合效果图:思路分析:首先要实现十三个扇叶,考虑使用无序列表,使用13个li即可,要让这13个li能重叠显示,只需要让他们绝对定位就行。然后要让他能鼠标悬浮就旋转,考虑使用hover伪元素,同时让不同的li旋转不同的角度,最后加入过渡效果,改变旋转的圆心就行了。完整代码:<原创 2020-11-14 12:48:26 · 2565 阅读 · 0 评论 -
CSS实现不同的箭头效果
以前需要用到箭头时,要么用的箭头图片,要么用的CSS代码生成器来做的。这次想用CSS来手写一个上下左右的箭头效果,并且如果明白里面的具体原理,可以做出更牛逼的效果。引入:在我们平时使用border时,一般都是内容宽有内容的,也就是说内容区的width和height不为0,然后效果一般为这样:对应的代码:这是内容区有内容的情况,那我们想一下,要是内容区为0,border会是怎样呢。结果如下:对应代码:HTML:<div class="container"></div&原创 2020-11-14 11:27:25 · 1129 阅读 · 0 评论