HuangBingQuan

2023年9月26日

摘要： yarn 的特别礼物在终端命令上，yarn不仅仅是对npm的命令做了一个改名，还增加了一些原本没有的命令，这些命令在某些时候使用起来非常方便 yarn check 使用yarn check命令，可以验证package.json文件的依赖记录和lock文件是否一致这对于防止篡改非常有用 yarn 阅读全文

posted @ 2023-09-26 23:40 HuangBingQuan 阅读(3) 评论(0) 推荐(0) 编辑

包管理工具 - yarn 的核心命令

摘要： yarn 的核心命令初始化初始化：yarn init [--yes/-y] 安装添加指定包：yarn [global] add package-name [--dev/-D] [--exact/-E] 安装package.json中的所有依赖：yarn install [--productio 阅读全文

posted @ 2023-09-26 23:03 HuangBingQuan 阅读(39) 评论(0) 推荐(0) 编辑

包管理工具-Yarn

摘要： yarn 简介 yarn 官网：https://www.yarnpkg.com/zh-Hans/ yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，它仍然使用 npm 的registry，不过提供了全新 CLI 来对包进行管理过去阅读全文

posted @ 2023-09-26 22:33 HuangBingQuan 阅读(10) 评论(0) 推荐(0) 编辑

2023年9月24日

Java类和类之间的关系

摘要：类和类之间的关系 A is-a B（A是一个B）泛化（继承实现）继承关系子类想要继承父类，通过extends关键字来实现子类继承了父类，可以调用父类中的（public protected）的属性和方法 2.1 构造方法严格意义来说不算做子类继承过来，只是单纯的在子类调用构造方法时，默认调阅读全文

posted @ 2023-09-24 21:02 HuangBingQuan 阅读(10) 评论(0) 推荐(0) 编辑

2023年9月20日

属性描述符

摘要：属性描述符 Property Descriptor 属性描述符是一个普通对象，用于描述一个属性的相关信息通过Object.getOwnPropertyDescriptor(对象, 属性名)可以得到一个对象的某个属性的属性描述符 value：属性值 configurable：该属性的描述符是否可以阅读全文

posted @ 2023-09-20 19:44 HuangBingQuan 阅读(3) 评论(0) 推荐(0) 编辑

2023年9月16日

Es6-符号

摘要：普通符号符号是ES6新增的一个数据类型，它通过使用函数 Symbol(符号描述) 来创建符号设计的初衷，是为了给对象设置私有属性私有属性：只能在对象内部使用，外面无法使用符号具有以下特点：没有字面量使用 typeof 得到的类型是 symbol 每次调用 Symbol 函数得到的符号永远阅读全文

posted @ 2023-09-16 21:13 HuangBingQuan 阅读(11) 评论(0) 推荐(0) 编辑

2023年9月4日

npm install总是到最后不动

摘要： ## 踩坑日记 npm install总是到最后不动，最后发现是npm淘宝镜像源地址更新了，所以我们同步一下即可； 1. 解决问题方法，npm淘宝镜像源换最新的 ``` // 切换新的镜像源 npm config set registry https://registry.npmmirror.com 阅读全文

posted @ 2023-09-04 18:19 HuangBingQuan 阅读(294) 评论(0) 推荐(0) 编辑

2023年8月31日

对某个组件进行单元测试

摘要： ### 准备环境全局下载依赖：`npm install -g @vue/cli-service-global` ### vue serve 1. 然后运行 vue serve 组件的url，这时候我们发现可以对单独的.vue进行测试了 ### 配置脚本 1. 打开项目根目录的package.jso 阅读全文

posted @ 2023-08-31 13:51 HuangBingQuan 阅读(17) 评论(0) 推荐(0) 编辑

2023年8月29日

过渡与动画

摘要： ## 过渡与动画 * 使用过渡和动画，可以让css属性变化的更加丝滑； * 过渡和动画无法对所有的css属性产生影响，能够产生影响的只有数值类属性，例如：颜色、宽高、字体大小等（支持数值类的过渡）。 ### 过渡 `transition: 过度属性持续时间过度函数过度延迟` （谁过渡，过渡时间阅读全文

posted @ 2023-08-29 19:53 HuangBingQuan 阅读(7) 评论(0) 推荐(0) 编辑

2023年8月27日

带样式的console.log

摘要： * log的二次封装 * 具体代码 ```js function print(info) { const contentArr = info.map(info => info.content); const styleArr = info.map(info => info.style).map(st 阅读全文

posted @ 2023-08-27 23:08 HuangBingQuan 阅读(13) 评论(0) 推荐(0) 编辑

函数科里化

摘要： * 在函数式编程中，科里化最重要的是把多参函数变为单参函数 * 举个例子：我们创建一个通用函数来复用 ```js // 实现科里化 Object.prototype.curry = function (func, ...args) { const that = this; // 得到从下标1开始的参阅读全文

posted @ 2023-08-27 00:06 HuangBingQuan 阅读(3) 评论(0) 推荐(0) 编辑

2023年8月15日

Cookie、localStorage、sessionStorage

摘要： * cookie：每次请求的时候都有可能传送许多无用的信息到后端 * localStorage：只能存储字符串、长期存储在浏览器的（无论窗口是否关闭都需要存储） * sessionStorage：这次会话临时需要存储的变量，每次浏览器关闭的时候，sessionStorage都会自动清空 localS 阅读全文

posted @ 2023-08-15 01:44 HuangBingQuan 阅读(4) 评论(0) 推荐(0) 编辑

单页面记录用户每一次的搜索记录(history)

摘要： ### 单页面记录用户每一次的搜索记录 ```html history 搜索 ``` 阅读全文

posted @ 2023-08-15 00:42 HuangBingQuan 阅读(16) 评论(0) 推荐(0) 编辑

2023年8月8日

this指向

摘要： * this是动态的，在函数调用前是无法预知的，只有函数被调用后this才被确定。 - 在全局代码中使用this，指代全局对象 > 在真实的开发中，很少在全局代码使用this - **在函数中使用this，它的指向完全取决于函数是如何被调用的** | 调用方式 | 示例 | 函数中的this指向 | 阅读全文

posted @ 2023-08-08 21:35 HuangBingQuan 阅读(6) 评论(0) 推荐(0) 编辑

全局对象

摘要： # 全局对象无论是浏览器环境，还是node环境，都会提供一个全局对象 - 浏览器环境：window - node环境：global 全局对象有下面几个特点： 1. 给未声明的变量赋值，实际就是给全局对象的属性赋值 2. 所有的全局变量、全局函数都会附加到全局对象 > 这称之为全局污染，又称之为全局阅读全文

posted @ 2023-08-08 02:19 HuangBingQuan 阅读(6) 评论(0) 推荐(0) 编辑

数据的作用域

摘要： 1. JS有两种作用域：全局作用域和函数作用域 - 内部的作用域能访问外部，反之不行。访问时从内向外依次查找。 - 如果在内部的作用域中访问了外部，则会产生闭包。 - 内部作用域能访问的外部，取决于函数定义的位置，和调用无关 ```js var a = 1; function F1() { a++; 阅读全文

posted @ 2023-08-08 01:07 HuangBingQuan 阅读(8) 评论(0) 推荐(0) 编辑

2023年8月5日

引用媒体查询的多种方式

摘要： ### 有三种方式引入 1. `` 2. `` 3. `` ```html --> Document ``` 阅读全文

posted @ 2023-08-05 23:47 HuangBingQuan 阅读(10) 评论(0) 推荐(0) 编辑

CSS画三角

摘要： ### 不追求三角形描边 ```scss &::after { position: absolute; content: ""; display: block; width: 0; height: 0; border: 10px solid; border-color: transparent tr 阅读全文

posted @ 2023-08-05 22:26 HuangBingQuan 阅读(3) 评论(0) 推荐(0) 编辑

2023年8月1日

css伪类选择器大全

posted @ 2023-08-01 22:56 HuangBingQuan 阅读(11) 评论(0) 推荐(0) 编辑

a标签伪类设置后不生效

摘要： ### a标签伪类设置后不生效 * 检查书写伪类顺序是否正确 * link -> visited -> hover -> active ```css a { /* 未访问过*/ &:link { color: green; } /* 访问过 */ &:visited { color: red; } 阅读全文

posted @ 2023-08-01 21:53 HuangBingQuan 阅读(28) 评论(0) 推荐(0) 编辑

2023年7月31日

最大最小宽高

摘要： ## 最大最小宽高 - 最大宽度：`max-width`，最大高度：`max-height` - 最小宽度：`min-width`，最小高度：`min-height` 当一个元素的尺寸会自动变化时，设置最大最小宽高，可以让它不至于变得过小或过大。在实际开发中，我们通常为PC端的页面设置一个最小宽度阅读全文

posted @ 2023-07-31 13:26 HuangBingQuan 阅读(43) 评论(0) 推荐(0) 编辑

尺寸的百分比

摘要： ## 尺寸的百分比绝大部分可以书写尺寸的地方，都可以书写百分比百分比是一个相对单位，其相对于元素的**参考系**，比如： - 普通元素的参考系为**父元素的内容区域** - 绝对（固定）定位元素的参考系为父元素中**第一个定位元素的padding区域+内容区域** 下面罗列常见的百分比情况 | 阅读全文

posted @ 2023-07-31 13:24 HuangBingQuan 阅读(16) 评论(0) 推荐(0) 编辑

颜色的alpha通道

摘要：颜色的alpha通道标识了色彩的透明度，它是一个0~1之间的取值，0标识完全透明，1标识完全不透明在css中使用rgba可以为颜色添加alpha通道 ```css .alpha { /* 一个完全透明的颜色，等同于 transparent */ color: rgba(0, 0, 0, 0); / 阅读全文

posted @ 2023-07-31 13:22 HuangBingQuan 阅读(42) 评论(0) 推荐(0) 编辑

css定位经验

摘要： ### 绝对定位特性 * 当一个元素开启绝对定位后，元素会自动变成block盒。 ### 什么时候使用绝对定位 * 下面三个条件满足任何一个时，使用绝对定位： 1. 元素出现在一个天马行空的位置 2. 元素是否存在，不影响其他元素的排列 3. 单个元素在某个区域内水平垂直居中 ### fixed和a 阅读全文

posted @ 2023-07-31 13:16 HuangBingQuan 阅读(5) 评论(0) 推荐(0) 编辑

2023年7月30日

requestAnimationFrame优化动画

摘要： 1. requestAnimationFrame优化动画 * 总结： * requestAnimationFrame与setInterval的区别 * setInterval是在任务队列里执行的，也就是说上一帧没有执行完下一帧不可能执行。 * 而requestAnimationFrame是在差异队阅读全文

posted @ 2023-07-30 19:17 HuangBingQuan 阅读(13) 评论(0) 推荐(0) 编辑

FileReader实现文件下载

摘要： ```html 文件下载点我下载 ``` 阅读全文

posted @ 2023-07-30 18:38 HuangBingQuan 阅读(90) 评论(0) 推荐(0) 编辑

H5 devicemotion摇一摇

摘要： 1. DeviceMotionEvent（设备运动事件）返回设备有关于加速度和旋转的相关信息。 2. acceleration属性包含三个加速度属性值{x, y, z}； * 检测屏幕摇动代码如下 ```html Document ``` 阅读全文

posted @ 2023-07-30 17:54 HuangBingQuan 阅读(10) 评论(0) 推荐(0) 编辑

H5 陀螺仪

摘要： ```html Document ``` 阅读全文

posted @ 2023-07-30 13:09 HuangBingQuan 阅读(61) 评论(0) 推荐(0) 编辑

2023年7月29日

HTML5 Api 获取网络地理信息

摘要：定位（GPS）：台式机几乎都没有GPS，笔记本绝大多数都没有GPS，智能手机几乎都有GPS。获取网络地理信息：navigator.geolocation.getCurrentPosition(successCallback：function(position), errorCallback：fun 阅读全文

posted @ 2023-07-29 22:33 HuangBingQuan 阅读(24) 评论(0) 推荐(0) 编辑

2023年7月27日

引入外部文件（图片、js等）出现403 forbidden的问题

摘要：引入外部文件（图片、js等）出现403 forbidden的问题报403错误则是访问被拒绝浏览器的防盗链机制当你的项目和需要访问的地址不在同一个域内，这时浏览器的防盗链机制就发挥作用了。其中防盗链是利用 HTTP header 中的 referer 来实现的。当浏览器向服务器发送请求时会带上阅读全文

posted @ 2023-07-27 22:49 HuangBingQuan 阅读(324) 评论(0) 推荐(0) 编辑

2023年7月24日

require.context

摘要： 1、什么是 require.context `一个webpack的api，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹下的文件，从中获取指定文件，自动导入模块）在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入。` 2、使用 ``` /* * dirname 阅读全文

posted @ 2023-07-24 21:57 HuangBingQuan 阅读(523) 评论(0) 推荐(0) 编辑

2023年6月21日

函数相关约束

摘要： # 函数的相关约束函数重载：在函数实现之前，对函数调用的多种情况进行声明可选参数：可以在某些参数名后加上问号，表示该参数可以不用传递。可选参数必须在参数列表的末尾。 ``` # 举个栗子-应用场景 /** * 相乘的结果 * @param a * @param b */ function com 阅读全文

posted @ 2023-06-21 17:48 HuangBingQuan 阅读(16) 评论(0) 推荐(0) 编辑

Ts类型别名

摘要：对已知的一些类型定义名称 ``` type 类型名 = ... ``` ``` # 举个例子 type Gender = "男" | "女"; type User = { name: string, age: number, gender: Gender } let u: User; u = { n 阅读全文

posted @ 2023-06-21 16:39 HuangBingQuan 阅读(10) 评论(0) 推荐(0) 编辑

Ts数据类型

摘要： # 如何进行类型约束仅需要在变量、函数的参数、函数的返回值位置加上```:类型``` ts在很多场景中可以完成类型推导 any: 表示任意类型，对该类型，ts不进行类型检查 # 基本类型 - number：数字 - string：字符串 - boolean：布尔 - 数组 - object: 对阅读全文

posted @ 2023-06-21 16:11 HuangBingQuan 阅读(25) 评论(0) 推荐(0) 编辑

2023年6月12日

TypeScript概述

摘要： # Hello TypeScript # 为什么要学习TypeScript - 就业或获得更大的竞争优势 - 获得更好的开发体验 - 解决JS中一些难以处理问题 # JS开发中的问题 - 使用了不存在的变量、函数或成员 - 把一个不确定的类型当作一个确定的类型处理 - 在使用null或undef 阅读全文

posted @ 2023-06-12 17:34 HuangBingQuan 阅读(12) 评论(0) 推荐(0) 编辑

2023年5月20日

Set集合

摘要： # set 集合 > 一直以来，JS只能使用数组和对象来保存多个数据，缺乏像其他语言那样拥有丰富的集合类型。因此，ES6新增了两种集合类型（set 和 map），用于在不同的场景中发挥作用。 **set用于存放不重复的数据** 1. 如何创建set集合 ```js new Set(); //创建一个阅读全文

posted @ 2023-05-20 23:11 HuangBingQuan 阅读(7) 评论(0) 推荐(0) 编辑

2023年5月12日

ES6剩余参数

摘要： ES6剩余参数 arguments的缺陷：如果和形参配合使用，容易导致混乱从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图 ES6的剩余参数专门用于收集末尾的所有参数，将其放置到一个形参数组中。语法: function (...形参名){ } 举个例子阅读全文

posted @ 2023-05-12 13:25 HuangBingQuan 阅读(17) 评论(0) 推荐(0) 编辑

2023年5月11日

ES6参数默认值

摘要：在书写形参时，直接给形参赋值，附的值即为默认值这样一来，当调用函数时，如果没有给对应的参数赋值（给它的值是undefined），则会自动使用默认值。举个栗子 function sum(a, b = 1, c = 2) { return a + b + c; } console.log(sum(1 阅读全文

posted @ 2023-05-11 13:50 HuangBingQuan 阅读(36) 评论(0) 推荐(0) 编辑

2023年5月10日

箭头函数

摘要：箭头函数箭头函数是一个函数表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数。完整语法 (参数1, 参数2, ...)=>{ //函数体 } 如果参数只有一个，可以省略小括号参数 => { } 如果箭头函数只有一条返回语句，可以省略大括号，和return关键字参数 => 返回值细节阅读全文

posted @ 2023-05-10 13:22 HuangBingQuan 阅读(53) 评论(0) 推荐(0) 编辑

2023年5月9日

js中的this

摘要： js中的this指向首先this是动态的，在函数调用前是无法预知的，只有函数被调用后this才被确定。函数调用的5种情况通过对象调用函数（除了箭头函数），this指向对象直接调用函数，this指向全局对象如果通过new调用函数，this指向新创建的对象如果通过apply、call、bin 阅读全文

posted @ 2023-05-09 19:41 HuangBingQuan 阅读(10) 评论(0) 推荐(0) 编辑

Superman02

公告