Singh1995-CSDN博客

原创深入理解HTML5之标签与文档结构

在HTML5出现以前，HTML的文档结构不够清晰、明确。我们会发现整个页面的头部、主体、页脚、导航，还有边栏皆是使用DIV元素来构成。我在学习前端的过程中也经常能看到诸如《DIV+Css》教程之类的书籍，但是<div>并不是一个很能表示文档结构的标签，特别对于搜索引擎和屏幕阅读器来说过多的使用<div>元素，那么这些程序就连“从哪里到哪里是正文”“这个<ul>元素是表示导航菜单，还是表示项目列表”等对于结构分析来说最基本的答案也都不知道。首先简单看下HTML5的文

2020-05-10 00:56:00 795

原创正则表达式位置匹配总结

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。...

2022-08-31 22:53:34 944 1

原创 canvas实现粒子跟随鼠标动画

canvas是前端绘制图形的好帮手，不少大牛的博客也会精心的用canvas绘制炫酷的背景。图形与可视化界面就是前端最好的名片，泡妞之前尚且知道要梳个靓头精心打扮，而canvas就是你装点门面与大牛平齐，脱颖而出的绝佳神器。...

2022-06-26 14:34:17 1096

原创 nodejs打造cli工具

如何实现nodejs打造cli工具

2022-06-11 20:32:57 645

原创 nodejs递归删除文件，文件夹

nodejs递归删除文件，文件夹

2022-06-09 19:15:12 511

原创 hooks实践总结

何为hooks？在React中hook是指不编写 class 的情况下使用 state 以及其他的 React 特性，而Vue3也推出了具有相同功能的组合式API。如果你用过Vue3就会知道在 setup 中你应该避免使用 this，因为hook的核心功能是让我们在脱离 React，Vue的情况下任然可以使用computed，watch，数据更改视图响应等功能。所以以下hook在Vue，React中是通用的useDebounceimport { useState, useEffect } from

2022-04-22 19:24:00 1407

原创字节跳动前端外包面试题

记录几前端道面试题习惯了平时vue的开发越来越不重视基础了，不出意外的被吊打了起来，凭借记忆大致还原考题。this指向问题class Preson { constructor(name) { this.name = 'Jerry'; } getName() { return { name: 'Tom', logName() { console.log(this.name) } } }

2022-02-19 15:41:45 5133 2

原创 react实现井字棋高亮显示连成一线

react实现井字棋高亮显示连成一线本文假设你已经阅读完了react教程并且实现了这个基础版的井字棋因为接下来的内容都是在官网教程的基础上进阶完成的，还没看的小伙伴建议跟着官网教学一遍再来学习进阶版接下来要实现的是每当有人获胜时，高亮显示连成一线的 3 颗棋子。要实现这个功能可以采用自下而上的构建应用，也就是从最基本的组件开始编写，在官网的教学中最基本的组件是组件目前这个组件只负责渲染props.value值以及触发props的onclick事件，现在这个Square 还需要在某些条件下高亮展

2021-12-09 20:51:26 670

原创 vue-Router路由别名使用技巧

最近在工作中看到了这样的代码<div> <router-view></router-view> <router-view name="Root"></router-view></div>居然有两个routerView串在一起使用,从来只会使用嵌套路由的我没想到routerView这玩意原来是可以用来布局的.何为命名视图?有的时候我们想在同级展示多个视图而不是嵌套,比如左边是一个侧边栏右边主体内容.他们作为两个同级的视.

2021-11-26 00:15:30 2214

原创 canvas绘制时钟

大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg

2021-09-29 14:51:09 957

原创了解websocket和简单示例

什么是websocketwebsocket是一种网咯通信协议,它允许服务器主动向客户端发送消息,客户端也可以主动向服务器发送消息。websocket解决了什么问题http协议是一个由客户端发起请求再到服务端响应的过程,并且通信只能由客户端发起。长久以来人们想要关注服务器实时的数据，就只能通过“轮询”的方式让浏览器隔个几秒就发送一次请求。但这样显然会浪费服务器资源，而且也不是实时的数据。于是websocket应运而生，一旦建立websocket链接之后，之后的交互数据都不需要再发送HPPT reque

2021-05-31 17:46:18 259 2

原创手撸一个vue自定义插件 vue-touch

// 自定义vue指令插件class VueTouchEvent { /** * @param {DOM} el * @param { * name：指令名，不包括 v- 前缀。 * arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo * value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2 * } binding

2021-04-15 15:19:06 165

原创 css媒体查询Media queries

什么是媒体查询媒体查询(Media queries) 根据不同的设备类型或者特定的特征和设备参数设定不同的css样式使用媒体查询的第一步就是要先确定设备类型all 适用于所有设备(默认选项)print 打印预览模式screen 屏幕speech 语音合成器其次是确定媒体特性媒体特性是指输出设备，或是浏览环境的具体特征的值是否存在,值为多少。媒体特性应该是和设备类型息息相关的,不同的设备类型应该有不同的媒体特性以下为部分媒体特性(详见官网)height

2021-02-20 21:50:43 220

原创前端常用方法集合

使用generator生成字符串0-9a-Zfunction* generateSequence(start, end) { for (let i = start; i <= end; i++) yield i; } function* generateAlphaNum() { yield* generateSequence(48, 57); yield* generateSequence(65, 90); yield* generateSequence

2021-01-15 22:33:04 98

原创手写promise

JavaScript是单线程语言，在一个进程上，只能运行一个线程，而不能多个线程同时运行。也就是说JavaScript不允许多个线程共享内存空间。因此，如果有多个线程想同时运行，则需采取排队的方式，即只有当前一个任务执行完毕，后一个任务才开始执行。

2021-01-10 00:04:30 95

原创深入理解ES6之promise

promise学习笔记何为promisepromise解决了那些问题promise基本使用promise链式调用promise的一些使用场景promise多任务管理用法何为promisepromise是js中异步函数的管理器,promise可以通过链式调用的方式管理一个异步的任务队列,也可以同时处理多个不同的异步任务。比如axios中的并发请求就是通过promise.all方法来进行管理的。promise解决了那些问题使用promise之前我们必须要明白promise是用来解决那些问题的，在js的编

2021-01-03 23:22:31 189

原创前端图片上传格式,本地图片路径打造略缩图以及上传进度条

前端上传图片到后台除了直接拿file还有formData以及base64格式formData:接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。const formData = new FormData()formData.append('userpic[]', myFile

2020-12-20 00:21:09 661 1

原创灵活运用css选择器开发

前端开发总是离不开写css，ui框架写的再好也不可能完全满足于企业的要求。而一个css的构成则是由选择器，属性，值组合而成，大概长这样选择器 { 属性：值属性：值 ...}css选择器顾名思义就是用于选择需要添加样式的元素，前端开发最常用到的选择器是ID选择器和类选择器，但css选择器远不仅如此包括但不限于派生选择器、后代选择器、子选择器，兄弟选择器，属性选择器、伪类选择器以及复杂的组合选择器。一个好的选择器不仅能够帮助我们准确的匹配需要添加样式的元素，往往

2020-11-21 09:12:25 105

原创如何减少if else以及优雅的条件判断

在JavaScript中可以用来控制流程的语句通常有if...elseswitch&& ``||(condition ? ifTrue : ifFalse)``当然还包括break,continue,tar...catch等，不过今天重点讲的是如何优化if else语句使用三元表达式 // old if (isSuccess) { success(); } else { rejected(); }

2020-11-05 16:04:33 648

原创 vue项目中swipe自定义pagination，navigationButton，鼠标滑过暂停播放

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习..

2020-10-30 14:01:42 1989

原创 webpack学习笔记

webpack [webpack中文网]: https://doc.webpack-china.org/webpack简介webpak是什么Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理它将根据模块的依赖关系进行静态分析，生成对应的静态资源webpack五个核心概念 Entry 入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2020-09-05 11:02:18 113 2

原创 Git学习笔记

何为git? git可以用来做什么 git是版本控制管理工具，有了它你可以将某个文件回溯到之前的状态，甚至将整个项目都退回去某个时间状态。集中式与分布式版本控制系统 CVS及SVN都是集中式的版本控制系统，而Git是分布式版本控制系统集中式版本控制系统将所有代码提交至中央服务器，由服务器保管各个版本，缺点明显没有本地的版本纪录。分布式版本控制系统每个人的电脑上都是一个完整的版本库，客户端并不只是提取最新版本的文件快照，而是把代码仓库完整的镜像下来。优点是不依赖服务器，可在本地电脑管理版本。

2020-09-01 09:47:02 73

原创清除checkbox默認样式-webkit内核

/* 去掉webkit内核里默认的样式 /-webkit-appearance: none;/ 去掉webkit内核里默认的点击效果 */-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

2020-07-18 14:30:17 169

原创超级简单三步实现svg圆形进度条

先上效果图前置知识<circle> 定义一个圆circle有三个属性cx=“圆的x轴坐标”cy=“圆的y轴坐标”r=“圆的半径”svg的基本属性fill 填充stroke 描边颜色stroke-width 描边宽度stroke-dasharray 创建线条（这个属性是实现的关键）ok 然后开始画图，首先按照circle的属性画出两个圆<svg> <circle cx='70' cy='70' r='70'>&lt

2020-07-03 15:28:37 306

原创 css文本与字体常见用法集合

总结一下项目中常见的文本和字体的样式设置文本text-align-last：段落的最后一行的对齐方式// 末尾右对齐p{ text-align-last: right;}text-decoration 文本修饰，下划线、上划线、删除线等。// 中间删除线p{ text-decoration：line-through;}text-indent 首行文本的缩进// 首行缩进20pxp{ text-index：20px;}text-overflow 文本溢出// 溢出的文本设置为点p

2020-06-22 17:36:28 147

原创深入理解HTML5之表单元素属性

表单是页面上非常重要的一项内容，用户可以输入的大部分内容都是在表单的元素中完成的，客户端与服务端的交互在大多数情况下也是通过表单中点按钮来完成的。1.form<form action="/add" method="get" id="textform"> <input type="text" name="" id=""> </form> <textarea form="textform"></textarea>fo

2020-06-20 15:41:44 179

原创 node中的qost请求参数

在HTTP协议中的两种发送请求的方法两种分别是get和post,其中get方式的请求参数是放在地址栏中进行传输的，而post的请求参数是在请求报文当中进行传输。get方式：post方式：

2020-06-12 21:12:45 215

原创 node.js中的url.parse方法详解

parse()方法接受一个URL字符串，解析它，然后返回一个URL对象。如果urlString不是字符串，则抛出类型错误。如果存在auth属性但无法解码，则会抛出URIError。语法：url.parse(urlStr, [parseQueryString], [slashesDenoteHost])参数1：必填 {string} 要解析的url地址参数2：{boole} 将查询（query）参数解析成对象形式，默认为false参数3：{boole} 如果为真，在文字字符串//之后和下一个/之前的

2020-06-12 01:43:13 5712 4

qq_40710974的博客