向歌啊-CSDN博客

原创 JS Symbol

以前在项目开发中很少用到Symbol就认为Symbol不重要，重新学习JS红宝书之后才发现js很多的方法和场景都是借助Symbol来实现的。学无止境，始终保持学习的热情和求知的精神，不断探索和发现新的知识和技能。

2023-05-22 23:00:42 602 2

原创睡眠排序法

今天看到一个非常有趣的排序算法，利用每个数字作为定时器的时间完成数组排序，但是该算法采用异步并且不适用于存在负数的情况。其实现原理就是使用sleep睡眠函数对每个数字进行休眠，然后入队，这样数字就是从小到大排列好的。

2023-05-22 22:45:14 262

原创 git踩坑记录-git reset --hard

之前在提交代码的时候错误的选择了分支并进行了错误的commit，想要退回到commit之前的状态，于是就使用了reset --hard命令导致写的代码丢失，记录一下自己愚蠢的行为。

2023-05-22 22:40:48 504

在一些浏览器中，可以传递一个可选的配置对象，用于指定震动的强度。强度参数是一个数组，它的每个元素表示震动的强度。强度的取值范围是 0 到 1 之间的数字，表示震动的振幅比例。例如，0 表示无振动，1 表示最大振动。navigator.vibrate() 是一个浏览器原生的 API，用于在支持浏览器的设备中触发震动。需要注意的是，该 API 在某些设备上可能无法使用，需要检查浏览器是否支持该 API。例如，以下代码将使设备震动一次，持续 200 毫秒，然后停顿 100 毫秒，再震动一次，持续 500 毫秒。

2023-05-22 22:37:09 423

原创使用socket.io简单实现多客户端可编辑表格

之前看了B站小野森森老师的可编辑表格的视频深受启发，今天使用React简单实现一下。

2023-05-22 22:32:13 413

原创 requestAnimationFrame简单学习

为了提高性能和电池寿命，在大多数浏览器里，当 requestAnimationFrame() 运行在后台标签页或者隐藏的 <iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。备注：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame()。

2023-05-22 22:17:10 400

原创前端工程化介绍

前端工程化一、简单介绍1. 一个工程的生命周期工程立项需求分析产品原型开始实施测试部署上线运行2. 什么是前端工程化前端工程化就是通过各种工具和技术，提升前端开发效率的过程。前端工程化的内容：各种工具和技术前端工程化的作用：通过使用工具🛠️，提升开发效率。3. 前端工程化解决的问题项目上线前，压缩代码对ES6＋或CSS3新特性进行转换对less等CSS的预编译语言进行编译处理格式化代码…4. 前端工程化的内容脚手架工具：vue-cli等压缩工具、模块化

2022-05-02 14:46:27 228

原创基于vue3的移动端音乐播放器

项目介绍这是一个基于vue3的移动端音乐项目，具有歌单、音乐搜索、音乐播放、登录等功能，后期会更新完善功能。它具有以下不错的地方：1. 使用rem布局来应对不同设备，保证设备之间的兼容性。2. 具有比较完善的功能（后续会继续更新），歌单、音乐的搜索及播放，登录功能，路由拦截。3. 歌词会随着音乐的播放动态变化。4. 排行榜请求数据较多，增加了骨架屏来缓解白屏现象。5. 使用最新的vue3 Componsition API 风格来编写代码，使组件之间的逻辑更加内聚。项目内容首页歌曲播放

2022-05-02 14:38:15 2165

原创 30行代码让你构建自己的脚手架工具--保姆级教程

1. 创建一个文件夹首先创建一个文件夹，并且使用 npm init -y 来初始化项目。然后下载ejs和inquirer。现在项目长这样：2. 创建一个js文件在根目录下创建一个js文件，我这里命名为cli.js，并且在第一行加入**#!/usr/bin/env node**。3. 修改package.json的内容在package.json 里面增加 “bin”: “cli.js”，注意这里要和你新建的js文件名字要相同。4. 创建你的模板文件在根目录创建template文件夹，里

2022-03-12 21:02:53 1972 1

原创浏览器缓存机制--强缓存和协商缓存

一般来说，浏览器接收到url后不会立刻向服务器发送请求，而是先在浏览器缓存中寻找，然后再根据情况决定是否向服务器发送请求。而每次向服务器请求之后会将结果和缓存标识存到浏览器中。强制缓存强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是 Expires 和 Cache-Control，其中Cache-Control优先级比Expir

2022-03-11 16:17:04 551

原创 cookie、localStorage和sessionStorage异同

共同点：都是保存在浏览器端，并且是同源的不同点：Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约 4K 左右）localStora

2022-03-08 21:45:58 244

原创 TCP/IP 三次握手、四次挥手 TCP与UDP的区别

TCP/IP三次握手客户端向服务端发送请求，申请建立连接。（你好，可以认识一下吗？）服务端接收到客户端的申请，并向客户端发送可以连接的消息。（你好，很高兴认识你）客户端接收到服务端的消息，并发送确认连接的消息。（我也很高兴认识你）四次挥手、断开连接客户端向服务端发送断开连接请求。（天有点晚了，我该走了）服务端向客户端发送确认回复。（好的）服务端向客户端发送断开消息。（我也该走了）客户端向服务端发送确认消息。（好的）TCP和UDP的区别TCP 是面向连接的，UDP是无连接的即

2022-03-08 21:34:41 1853

原创计算机网络--http和https

一、http和https的基本概念http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。https：是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要SSL。https协议的主要作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性

2022-03-08 21:10:13 3594

原创节流与防抖函数

节流或防抖作用：限制函数执行的次数1. 防抖通过 setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。防抖函数我感觉可以理解为一个升降梯，在电梯门关闭之前，只要有人来，就重新等待相同间隔时间。这里我们使用点击按钮来模拟防抖函数的作用当用户点击提交按钮后，触发 debonce()函数这里使用定时器箭头函数，使用 fn.apply()绑定 this，此时 this 指向按钮实例。通过 arguments 传递剩余参数<!DOCTYPE html>&lt

2021-12-05 22:12:54 620

原创 webpack---实现列表隔行变色案例

一、介绍本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。简要概述一下webpack是前端工程化的具体解决方案，它主要提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。现在我们举一个

2021-09-27 23:02:11 371

原创字节青训营项目---综合功能模块的网页

一、文档说明该文档主要记录该项目的功能、技术、及各模块及其亮点的介绍。项目展示地址二、项目展示1、首页2、团队模块3、news模块4、music模块5、天气模块6、抽奖模块三、所用技术jQuery简化了对页面的优化Vue方便了对各列表内容的渲染及数据的绑定Ajax通过调用api返回数据，减少了项目的大小四、成员分工功能人员主页，左侧导航栏林逸廷团队介绍叶丹莲新闻部分页面胡军，邓峻宇，李建彬，汤哲涵音乐模块杨智渊

2021-09-24 21:02:23 512 2

原创 ES6---（4）async的用法

一、async简介1、async函数的基本用法async function f() { // return await 'hello async'; let s = await "hello async"; let data = await s.split(''); return data;}使异步操作更加方便，会等待一个await执行完后再执行下一个。会返回一个Promise对象。没有显式return，相当于return Promise.resolve(undefined);

2021-09-24 08:04:13 93

原创 ES6---（3）Promise对象

一、Promise对象介绍ES6原生提供了Promise对象，它表示未来要发生的事件，相当于一个容器，保存着异步操作的一些结果。各种异步操作都可以用同样的方法进行处理。特点：对象的状态不受外界影响处理异步操作三个状态：Pending（进行） Resolved(成功) Rejected(失败)一旦状态改变，就不会再次改变，任何时候都可以得到这个结果二、基本使用可以使用new来创建一个Promise对象的一个实例。let prom = new Promise(function(re

2021-09-24 08:03:37 126

原创 ES6---（2）迭代器和生成器

一、迭代器 iterator迭代器是ES6提供的一种接口，为不用的数据结构提供统一的访问机制。迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器通过迭代器的next()获取迭代后的结果迭代器是用于遍历数据结构的指针用法：const items = ['a', 'b', 'c'];let ite = items[Symbol.iterator]();console.log(ite.next()); // done: false(遍历是否完成) value:

2021-09-23 21:08:32 163

原创 ES6---（1）新增语法及扩展方法

一、关键字1、let关键字特性：let声明的变量只在所处于的块级有效// let变量具有块级作用域，即在{}里面生效 if (true) { let a = 10; } console.log(a); // not defined不存在变量提升// let 不存在变量提升console.log(a);let a = 100;暂时性死区var tmp = 123; if (true) {

2021-09-23 21:08:15 464 1

原创 JavaScript高级---（8）正则表达式

一、概述正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。二、正则表达式的使用1、创建在 JavaScript 中，可以通过两种方式创建一个正则表达式。

2021-09-23 21:07:58 208

原创 JavaScript高级---（7）浅拷贝与深拷贝

一、浅拷贝在JavaScript中，分为简单数据类型（数字、字符等）和复杂数据类型（对象、数组等），一般简单数据类型被存储在栈内存；而复杂数据类型存储在堆内存，其地址存储在栈内存里面。所以一般将复杂数据类型赋值给其他变量的时候，一般是将其地址复制，如果对赋值后的数据进行操作，很容易改变原本的复杂数据类型。我们举个例子，首先定义一个对象，里面有两个简单数据类型和另一个对象 var obj = { id: 1, name: "andy",

2021-09-23 21:07:41 979

原创 JavaScript高级---（6）闭包

闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分，JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作，闭包在主流JavaScript库以及高水平产品代码中日益流行起来。一、变量的作用域在介绍闭包之前，我们先理解JavaScript的变量作用域。变量的作用域分为两种：全局变量和局部变量。1、全局变量 var n = 999; //全局变量 function f1() { a = 100;

2021-09-23 21:07:26 77

原创 JavaScript高级---（5）ES5严格模式

一、严格模式JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改：消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。消除代码运行的一些不安全之处，保证代码运行的安全。提高编译器效率，增加运行速度

2021-09-23 21:07:08 127

原创 JavaScript高级--- （4）改变函数内部this指向的方法

一、一般函数内部this指向如下图：二、改变函数内部this指向的方法JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、call()、apply() 三种方法。让我们依次来看看它们之间的区别吧。1、call()方法使用方法：fun.call(thisArg, arg1, arg2, …)thisArg：在 fun 函数运行时指定的 this 值arg1，arg2：传递的其他参数返回值就是函数的返回值，因为它就是

2021-09-23 21:06:37 209

原创 JavaScript高级--- （3）ES5新方法，数组、字符串、对象

一、数组方法1、forEach()方法，遍历数组元素用法：array.forEach(function(currentValue,index,arr))currentValue：数组当前项的值index：数组当前项的索引arr：数组对象本身var arr = [1, 2, 3, 4]; var sum = 0; arr.forEach(function(value, index, array) { // console.log(`${i

2021-09-23 21:06:12 148

原创 JavaScript高级---（2）构造函数和原型、继承

一、构造函数和原型1、概述在ES6之前，对象并不是基于类创建的，而是构造函数来定义对象及其特征。构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。而new在执行时会有四件事情：在内存中创建一个新的空对象。让 this 指向这个新的对象。执行构造函数里面的代码，给这个新对象添加属性和方法。返回这个新对象(所以构造函数里面不需要 return)。静态成员及实例成员静态成

2021-09-23 21:05:44 157

原创 JavaScript高级---（1）面向对象编程

一、面向对象编程POP(Process-oriented programming)面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1、举例理解我们举个例子：把大象装进冰箱。面向过程的编程方式是：打开冰箱门–>把大象放进去–>关上冰箱门面向对象则是先抽象出对象，然后再找出对象的属性方法：1、大象：进去2、冰箱打开关闭2、面向对象编程的特性封装性继承性多态性3、面向对象编程的优缺点优点：易维护、易复用、易扩展，由于面向对象有封装、继承、

2021-09-23 20:56:57 110

原创 vue中根据条件对css属性进行添加

可以使用v-bind:class"{active:item.id===currentIndexNav}"，当表达式item.id===currentIndexNav为true时，设置的active样式才会显示出来。<view @click="activeNav(item.id)" v-for="(item,index) in navList" :key="index" v-bind:class="{nav_item:true,active:item.id===currentIndexNav}"&g

2021-08-07 22:29:00 1822 1

空空如也

空空如也