- 博客(92)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 el-popover 添加自定义类，样式不生效
现象：给 el-popover 标签设置 popover-class 属性，为popover添加类名，样式却不生效
2023-02-06 18:19:32
1989
1
原创 form 表单只有一个input 时，回车自动提交表单造成页面刷新效果
el-form 中仅有一个input，input上设置了回车响应事件，首次按回车键后，页面刷新，再次按回车才执行了响应事件
2023-02-03 19:05:43
1781
原创 前端项目中资源请求顺序和dom结构顺序不一致，资源启动器有（索引）解析器和脚本
前端项目中资源请求顺序和dom结构顺序不一致，资源启动器有（索引）解析器和脚本
2022-11-15 18:19:53
689
原创 nuxt 引入 recoder-core，报错 window is not defind
要引入的脚本里面用到了 window，nuxt.js 会在服务端渲染页面，在 mounted 生命周期之前都是在服务器端执行，服务端并没有window 或 document。1. 方法一：可以在 mounted 生命周期引入脚本，就可以使用window、document 等对象。在 nuxt 项目的 vue 文件中通过 import 引入 recorder-core。2. 通过script标签引入脚本，mounted 周期时再加载 script 标签。不推荐使用第二种方法，有点麻烦。
2022-11-15 10:29:11
625
原创 web前端 本地录制音频后放入audio标签中 使用navigator.mediaDevices.getUserMedia
web前端 本地录制音频后放入audio标签中 使用navigator.mediaDevices.getUserMedia。
2022-11-03 19:33:15
788
原创 nuxt 项目web前端 video 无法播放 mp4 视频，loader配置错误
nuxt 项目web前端 video 无法播放 mp4 视频，原来是loader配置错误。url-loader 不对 mp4 文件进行处理，mp4 资源直接就可以在项目中获取到，如果使用url-loader 配置处理mp4文件的话，引入这个资源时发现并没有被url-loader处理，还会影响原本的引入。
2022-11-02 19:40:29
1922
原创 Node.js 拆分HTML文件中 样式＜style＞ 和 脚本＜script＞标签中的内容
创建两个正则表达式，分别匹配 style 和 script 标签使用 fs 模块，读取需要被处理的 html 文件自定义 resolveCSS 方法，把 <style> 里的内容写入index.css 样式文件自定义 resolveJS 方法，把 <script> 里的内容写入index.js脚本文件自定义 resolveHTML 方法，替换掉style和script内容，写入index.html 样式文件const fs = require('fs')const p.
2022-03-11 08:57:51
528
原创 JavaScript 防抖、节流：限制事件回调函数的调用次数
因为 JS 中的一些事件会不断的调用事件绑定的回调函数，降低性能，为了优化体验，需要对这类事件进行调用次数的限制。防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流 ：在触发事件的n秒后会执行一次回调，在n秒内再触发事件的话不会执行回调。固定时间间隔执行。
2021-12-16 20:30:00
1924
1
原创 全双工&半双工&单工
单工单工数据传输只支持数据在一个方向上传输；在同一时间只有一方能接受或发送信息，不能实现双向通信，举例：电视，广播半双工半双工数据传输允许数据在两个方向上传输,但是,在某一时刻,只允许数据在一个方向上传输,它实际上是一种切换方向的单工通信；在同一时间只可以有一方接受或发送信息，可以实现双向通信全双工全双工数据通信允许数据同时在两个方向上传输,因此,全双工通信是两个单工通信方式的结合,它要求发送设备和接收设备都有独立的接收和发送能力；在同一时间可以同时接受和发送信息，实现双向通信，举例：电话通信
2021-12-15 21:45:00
1075
原创 JavaScript 事件处理程序
HTML 事件处理程序、DOM0级处理事件程序、DOM2级处理事件程序...DOM0级处理事件程序就是将一个函数赋值给一个事件处理程序属性，可以认为是元素的方法，在这个事件处理程序的作用域中，可以用this访问到该元素的任何方法和属性。DOM2级事件处理程序定义了两个方法：`addEventListener()`和`removeEventListener()`，所有DOM节点都包含这两个方法。
2021-12-14 21:07:31
818
原创 JavaScript 事件流（事件捕获、事件冒泡）
事件流即页面接受事件的顺序: ``捕获阶段 => 目标阶段 => 冒泡阶段``。事件捕获认为某个事件发生时，父元素最先接收到事件，目标元素（事件发生所在的节点）最后接收到事件。事件冒泡认为事件发生时，目标元素先接受到事件，再逐级传播到父元素。
2021-12-14 21:03:51
1540
原创 后台开发后的四种基础运维场景
发布变更前端代码开发完成，想要给用户使用，需要发布变更监控告警对项目中会产生问题的地方设置监控，当监控不在预期范围内时数据或状态时，触发告警。例如监控磁盘（磁盘容量）、监控内存（内存将满时调度，将一部分暂时不用的内存放入磁盘的临时区）、监控CPU（CPU负载过高，造成性能问题，过低，资源浪费）扩缩容项目已经发布变更了，突然遇到热点事件，访问页面人数增多，流量迅速扩大，这时需要增加服务器（扩容）来分发流量，减轻每个服务器上CPU的压力，防止cpu负载过高。热点事件过去，流量降低，需要减少服务器的
2021-12-14 20:41:26
1330
原创 Vue computed 计算属性 | watch属性
1.计算属性computed 计算属性，监听多个 data 属性，只要是依赖的属性值有改变，就自动重新调用一下计算属性computed 在 DOM 加载后立即执行，methods 需要有触发条件才能执行在依赖的属性值没有改变时，计算属性会从缓存中取值，而不是重新编译，性能较高????使用计算属性实现搜索框：<template> <div> <input type="text" v-model="value"> <ul>
2021-12-01 13:04:10
354
原创 vue 操作 dom 节点
在标签上定义 ref 属性<input type="text" ref="nameInput">this.$refs 获取 dom 节点this.$refs.nameInput.value
2021-12-01 13:01:57
962
原创 v-model 绑定表单的值 单选框、下拉框、多选框、texterea
以下分别用 v-model 绑定单选框、下拉框、多选框、texterea 的值<template> <div> <input type="text" v-model="info.name" /> <input type="text" v-model="info.age" /> <div> <!-- v-model 绑定单选框的值 --> <input type="radio"
2021-12-01 13:01:16
878
原创 HTTP MIME type 和 Encoding type | 数据类型、语言类型头字段
MIME type 和 Encoding typeHTTP 报文携带的数据类型用MIME type表示。MIME type 主要类别：text：文本格式的可读数据，常见的是 text/html ，表示超文本文档，还有纯文本 text/plain、样式表 text/css 等。image：图像文件，有 image/gif、image/jpeg、image/png 等。audio/video：音频和视频数据，例如 audio/mpeg、video/mp4 等。application：数据格式不固定
2021-11-30 00:32:05
1185
原创 vue 事件方法 / 事件修饰符 / 按键修饰符
- 方法可以传自定义参数- 事件对象：调用方法时传参数 $event，在方法里就可以获取到事件对象 event。- 使用 this 在一个方法里调用另一个方法- 多事件处理程序：事件可以一次触发多个方法
2021-11-25 23:35:20
748
原创 vue 绑定标签动态属性名和属性值
使用 v-bind(: ) 绑定动态的属性名和属性值，属性值要用引号括起来：如果只绑定了动态属性名，属性值是静态的话:要给属性值再加个引号。
2021-11-25 13:08:35
1426
原创 Vue3.x 搭建Vue环境 / 创建运行Vue项目 / 分析Vue目录
1. 安装Vue-cli$ npm i -g @vue/cli然后在终端中输入 vue -V 看有没有输出 @vue/cli 的版本号，确定是否安装成功。2. 通过Vue-cli创建项目vue create projectName选择vue3选项3. 运行项目 $ cd vue3-example $ npm run serve运行成功后，根据提示打开本地地址，查看项目页面4. 项目结构node_modules: npm 加载的项目依赖模块public: 公共资源目录s
2021-11-25 11:53:25
371
原创 DOM的dataset属性 / 元素标签的data-* 属性
data-* 可以让我们在所有 HTML 元素上嵌入自定义 data 属性。定义 data-* 属性的规则：属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符属性值可以是任意字符串<textarea id="address" data-name="yyy" data-role="xxx"></textarea>const dom = document.querySelector("#address")// 获取元素节点的所有 dat.
2021-11-24 17:28:58
1912
原创 TypeScript 自定义类型～ 字符串类型 / 对象类型
自定义字符串类型，使用模版字符串function getData(code:`${string}:${string}`):void{ console.log(code);}getData('1233:01')let a:`${string}.${string}` = '80.9'自定义对象类型，使用 interface 关键字interface obj{ name:string, age:number, type?:string}let o:obj = { nam
2021-11-24 17:28:15
848
原创 Jest 里配置 babelrc，支持import导入
Jest 基本配置 示例 生成代码覆盖率文件 Jest 匹配器 真值、数字、字符串、数组、异常匹配器 work.jsexport function work (age){ return age>30 ?'7小时':'8小时'};work.test.jsconst { work } = require('./work');test('work-年龄33岁的工作时间',()=>{ expect(work(33)).toBe('7小时')})Jest 不支持 ES6 语
2021-11-23 21:13:29
2105
原创 前端 debugger 浏览器调试
可以在代码中加入debugger，标识断点，然后打开浏览器进入调试界面。调试按钮：从左至右依次含义是：进入下一个断点。如果有多个断点，点击时可以直接进入下个断点，忽略断点内部所有逻辑。忽略代码内部实现，直接跳到当前断点的下个方法。按照代码顺序，逐行执行，进入函数内部。跳出当前函数内部，执行下一步不知道和3有啥区别 ?Sources面板调试界面右侧信息:watch: 实时监听的变量breakpoints: 所有的断点ScopeGlobal:(当前代码暂停运行的)全局作用域
2021-11-20 11:18:42
5261
原创 Jest 匹配器 真值、数字、字符串、数组、异常匹配器
test('test--',()=>{ let a = 2 expect(a).toBe(2) //测试用例通过})expect (2)返回一个预期的对象toBe: 使用 Object.is来进行精准匹配的测试toEqual: 检查对象的值，递归检查对象或数组的每个字段可以使用.not 测试相反的匹配test('test--',()=>{ let a = 2 expect(a).not.toBe(3) //测试用例通过})真值匹配器toBeNu
2021-11-19 13:04:26
836
原创 TypeScript 迷迷糊糊装饰器 / 类、属性、方法、方法参数装饰器 / 装饰器执行顺序
装饰器：一种特殊类型的声明，实际是一个方法，可以注入到了类、属性、方法、参数上来动态扩展类、属性、方法、参数的功能。装饰器写法普通装饰器，无法传参，在类的上一行使用@装饰器名字装饰器工厂，可传参，在类的上一行使用@装饰器名字(装饰器参数)使用普通装饰器：function logClass(param:any){ console.log(param); //param就是当前类，此处输出 Animal类}@logClassclass Animal{ constructor(.
2021-11-19 10:08:17
236
原创 清除父节点中所有子节点的三种方法
1.innerHTMLNode.innerHTML = ""将Node节点的innerHTML置为空，就清空了Node节点innerHTML 是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML2.remove() + 循环获取Node节点里的第一个子节点，子节点调用remove()删除自己，循环执行直到Node没有子节点。while(Node.firstChild){ Node.firstChild.remove()}3.removeChild() + 循环获取No
2021-11-18 23:31:50
5726
1
原创 input 标签 你有好多个面孔
单选框使用type为"radio"的input元素就是单选框，name属性相同的单选框被归为一组，才可以同时只能选中一个。<input type="radio" name="animal" id="">小狗<input type="radio" name="animal" id="">小猫<input type="radio" name="animal" id="">小猪获取被选中的元素document.querySelector("input[name='
2021-11-18 23:30:38
98
原创 Jest 基本配置 示例 生成代码覆盖率文件
基本配置npm init： 初始化项目，生成package.json 文件。npm i jest： 安装jest安装完jest后在项目 package.json 的scripts里添加运行jest的脚本，这样写好测试用例后可以通过npm run test运行测试用例。"scripts": { "test": "jest",},npx jest --init： 执行jest，生成初始化配置 jest.config.jscoverageDirectory：生成的测试报告的文件夹名npx
2021-11-18 21:16:07
1678
原创 懂了~npx 调用项目内部模块
npx 可以调用项目内部安装的模块。{ "name": "jest-example", "version": "1.0.0", "main": "index.js", "scripts": { "test": "jest", }, "author": "", "license": "ISC", "dependencies": { "jest": "^27.3.1" }, "devDependencies": {}, "description":
2021-11-18 21:11:53
846
原创 前端小项目 QuizApp 答题卡片
介绍页面显示一张卡片，上面有题目和选项，选择某个选项后点击提交，卡片内容换成其他题目。答完指定数目题目后会显示用户的答题结果，再次点击按钮可以重新答题。代码每次用户点击提交按钮时判断当次的答题结果，正确的话给标志位加一，然后销毁上一题的节点，渲染下一题的内容。简单版本，只写了javascript，没有样式。html:<p class="question_title"></p><div class="answer_list"></div><
2021-11-18 13:09:44
736
原创 TypeScript 命名空间、命名空间模块化
在代码量较大的情况下，为了避免各种变量命名冲突，可以将相似功能的函数、类、接口等放到命名空间中。命名空间将代码用关键字 namespace 包裹起来，只对外通过 export暴露需要在外部访问的对象.创建两个命名空间：namespace A{ interface Animal{ name:string; } export class Dog implements Animal{ name: string; constructor(n:string){ .
2021-11-18 09:25:04
190
原创 TypeScript 模块 模块化封装“模拟操作数据库”
模块里的数据是私有的，如果我们想在外部使用模块内的数据（变量、函数、类），我们首先要在模块里通过 export 把数据暴露出来，暴露后通过 import 引入模块，就可以使用模块里暴露的数据了。单个导出：export var dbUrl = 'xxx'export function getData():void{ console.log('getData...');}import { getData, dbUrl } from './modules/db'getData() //g
2021-11-17 12:42:37
1123
原创 前端小项目Notification 弹出定时消失的提示框
介绍每点击一下按钮，窗口右下角就弹出一个消息框，后一个消息框放在前一个的下面，并且每个消息框的显示时间都一样，显示时间达到后，此消息框消失。思路：窗口右下角定位一个盒子，用来放消息框，盒子高度由消息框撑开。按钮点击后，生成一个消息框（div标签+文案+样式类），并设置定时器清除消息框节点，把消息框添加到右下角盒子里。⚠️ 待改进：给消息框的显示和消失设置过渡效果。代码html:<button>Toast Notification</button><div cla
2021-11-16 12:44:31
1119
原创 TypeScript 类型、类、接口、泛型综合使用，练习模拟操作数据库
定义一个操作数据库的库，支持不同数据库，不同数据库的功能都一样，都有增add、update、delete、get方法
2021-11-15 23:27:52
713
原创 Typescript 泛型、泛型函数、泛型类、泛型接口
泛型可以支持不特定的数据类型，提高类、接口、方法的复用性。场景：使用泛型创建可重用的组件，一个组件可以支持多种数据类型的数据，用户可以以自己的数据类型来使用组件泛型函数// 只能返回stringfunction getString(value:string):string{ return value}console.log(getString('a'));// 只能返回numberfunction getNumber(value:number):number{ retur
2021-11-11 12:45:21
757
原创 前端小项目 HoverBoard 方格矩阵hover随机颜色动画
介绍整体是有很多方格组成的矩阵，鼠标滑入每个方格会随机显示不同的颜色，鼠标滑出2s后颜色消失。给方格设置 transtion-duration ，那滑入滑出的时间都是一致的，可以再给方格的hover态设置 transition-duration 为0，那么移入方格时的动画时间就是0 ，不影响移出时间了。代码无html，css：body{ font-size: 0; background-color: black;}ul{ display: inline-block;
2021-11-11 09:57:38
562
原创 ES5中的类
1.简单示例function Person(){ this.name = "lily"}let p = new Person()console.log(p.name);2.构造函数和原型链里面增加方法原型链上的属性会被多个实例共享，构造函数不会？？function Person(str){ this.name = "lily" this.sleep = function(){ return `${this.name}在睡觉` }}let p = new Perso
2021-11-10 09:58:10
304
原创 JS事件对象属性e.target、e.currentTarget和this
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。如下图，给 ul 绑定点击事件，然后点击其中某个 li，输出当前的 e.target、e.currentTargete.target 获取的是实际点击的元素e.currentTarget 获取的是绑定点击事件的元素事件中的this也是指向当前绑定事件的元素，所以:e.currentTarge === this是一定的，而e.target===this不一定...
2021-11-09 23:59:28
2770
空空如也
position:relative 层级问题
2021-09-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人