- 博客(32)
- 收藏
- 关注
RSS订阅原创 基于Sass实现动态css样式切换
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量嵌套混合(mixins)、导入(inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。
2023-04-02 18:05:29
715
原创 关于Vue中props传参你必须了解的内容
关于Vue中props传参你必须了解的内容父子组件场景一子组件将参数仅仅用于展示或计算（直接在模板中使用、在计算属性中使用）值会随着父组件的值改变而改变场景二子组件将参数赋值给本地data参数数据类型基本数据类型：值不会随着父组件的值改变而改变，原因是data中的赋值只在生命周期钩子created之前执行一次引用数据类型：值会随着父组件的值改变而改变，原因是引用数据类型赋值给的是地址，两个引用的是同一个地址如果有监听父组件值的需求，可以在子组件利用watch监控props
2022-05-11 16:31:12
1124
原创 懒加载静态资源
懒加载当我们需要加载静态资源（比如图片）时，可以判断元素是否出现在可视区域，当即将出现时再加载，以此节省带宽方法一：通过判断视口高度与元素距离文档顶部的高度和滚动条卷去的高度的差值，确定元素是否出现在可视区域 const box = document.querySelector('.box') // 获取视口高度 let clientHeight = document.documentElement.clientHeight // 元素相对于文档顶部的高度 c
2022-05-10 16:03:40
212
原创 Express
Express认识expressexpress是基于node.js，快速、开放、极简的web开发框架。官网地址：https://www.expressjs.com.cn/安装$ mkdir myapp$ cd myapp$ npm init -y // 初始化项目$ npm i express // 安装express使用创建服务// 新建 app.js 文件，将其设置为入口文件（pachage.json文件的main属性配置）// 引入expressconst e
2022-04-23 00:53:30
85
原创 for of 原理
for of 原理for of 的用处：遍历可迭代对象（在迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个属性的值执行语句）。可迭代对象：有默认的迭代行为，并且拥有Symbol.iterator属性，指向一个返回迭代器的函数。js内置的可迭代对象：Array、String、Set、Map、类数组对象(arguments)迭代器：在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时返回一个返回值。通过显式调用next()方法，得到一个对象，包含两个属性 valu
2022-04-13 23:14:02
745
原创 nodejs模块化
Node模块化1-认识模块化什么是模块化模块化： 在编程领域，模块化就是，在固定的规则下，把大文件分割为若干个独立且相互依赖的小模块模块化的好处：可复用性、可维护性、按需加载模块作用域对模块间的访问进行限制好处： 防止全局变量污染common.js规范（用于自定义模块）每个模块都有一个module对象，存储着模块的信息模块间通过module的exports指向的对象来向外暴露（module.exports和exports指向一个对象），导出的对象以modul
2022-04-12 13:40:18
50
原创 ES6新特性——解构赋值
ES6新特性——解构赋值基础用法解构赋值：解构的目标是数组和对象，在表达式的左边定义了从原变量中区出什么变量。解构数组const arr = ['E', 'S', '6', '新', '特', '性']// 变量声明并赋值let [a, b, c] = arrconsole.log(a, b, c) // 'E' 'S' '6'// 变量先声明再赋值let d, e, f[, , , d, e, f] = arr console.log(d, e, f) // '新' '特' '性
2022-04-10 23:23:14
298
原创 原生JS实现下拉刷新（移动端）
原生JS实现下拉刷新（移动端）主要利用touchstart、touchmove、touchend事件结合CSS定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
2022-04-09 17:23:48
867
原创 手写防抖和节流函数
/* 防抖：是指在事件被触发后，在n秒内函数只执行一次，如果在n秒内重复被触发，则重新开始计时*//** * 防抖函数，计时结束时触发 * @param { Function } callBack * @param { Number } 延迟秒数 * @returns { Function } */ function debounce1 (funs, delay) { let timer return function () { let arg = ar.
2022-04-09 15:49:55
418
原创 vue前端项目上线配置
vue前端项目上线配置1.准备云服务器建议使用阿里云、腾讯云、华为云、百度云自行官网购买或新人免费体验2. 工具安装xShell(远程连接工具)新建会话主机：服务器公网IP，验证用户、密码完成连接xFTP(文件传输工具)3. 服务器nodejs安装在nodejs官网（https://nodejs.org/en/）找到对应版本，复制下载路径在xShell远程控制台输入：# mkdir /data/tools // 新建文件目录，保存安装包# cd /data/to
2022-04-07 19:15:43
1467
1
原创 lrc格式歌词格式化处理函数封装，返回对象数组
lrc格式歌词格式化处理函数封装，返回对象数组函数/** * lrc格式歌词格式化 * @param { STRING } lrc lrc格式歌词 * @return { ARRAY } 返回对象数组 */function lrcformat (lrc) { const lyric = [] let lrcArr = lrc.split('\n') // 记录行数 let row = lrcArr.length - 1 // 循环遍历lrcArr for (let
2022-04-07 13:32:03
187
原创 简单封装一个倒计时函数（Promise版）
倒计时函数（Promise版）函数/** * 倒计时 * @param { NODE } node 渲染倒计时的结点 * @param { NUMBER } num 从多少秒开始计时 * @return{ PROMISE } 返回PROMISE */ function countDown (node, num) { return new Promise((resolve, reject) => { const timer = setInterval(() => {
2022-04-07 13:20:47
223
原创 自适应实现盒子与背景图相等的宽高比例（给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定）
自适应实现盒子与背景图相等的宽高比例需求给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定实现利用background-size: 100% auto; 实现背景图的宽度根据盒子宽度自适应利用给盒子添加伪类，伪类的高度根据盒子宽度和背景的宽高比例计算，由伪类撑开盒子的高度.box {width: 100%;background-image: url('');background-size: 100% auto;}.box::before {content: '';
2022-04-04 16:41:49
1840
原创 将元素在页面中隐藏的四种CSS方法和区别
将元素在页面中隐藏的四种方法和区别display: none;visibility: hidden;opciyt: 0;position: absolute; top=-9999px; left=-9999px
2022-04-04 02:25:49
124
原创 Vue2数组和对象的响应式检测变化
Vue2数组和对象的响应式检测变化数组用index来操作数组中的元素，不会被检测用length属性来改变数组长度不会被检测// 状态data () {return { arr: [1, 2, 3, 4]}arr[4] = 5 // indexarr.length = 6 // length // Vue2不能检测到变化解决方法vue全局方法Vue.set(arr, index, value)splice()Vue.set(arr, 4, 5)arr.spl
2022-03-29 11:42:46
1705
原创 对象数组去重
对象数组去重 // 对象数组去重 /* 1. 如果对象内容相同：先遍历数组将对象转为json格式，再将数组最为参数转为set，利用set值的唯一性去重 */ const arr = [{id: 1, name: 'zsl'}, { id: 1, name: 'zsl' }, { id: 2, name: '小米' }] const arr1 = [...new Set(arr.map(item => JSON.stringify(item)))].ma
2022-03-25 18:44:42
162
原创 使用axios的拦截器给url添加时间戳参数
使用axios的拦截器给url添加时间戳参数axios.interceptors.request.use( config => { if (config.method == 'post') { config.data = { ...config.data, _t: Date.parse(new Date()) / 1000 } } else if (config.method == 'get') { config
2022-03-23 23:46:27
1440
原创 初识Node.js
1.初识Node.js-基础使用Node.js简介node.js是基于chorme V8引擎的javascript运行环境。下载安装官网下载：https://nodejs.org/zh-cn/。查看是否安装成功：运行终端，输入命令 node -v, 输出版本号，安装成功PS D:\Desktop\mianshi\Node> node -vv16.13.0PS D:\Desktop\mianshi\Node>-内置模块node.js 模块化规范是comm
2022-03-21 22:44:45
903
原创 Content-type常见的取值
text/html ：HTML格式text/plain ：纯文本格式text/xml ： XML格式image/gif ：gif图片格式image/jpeg ：jpg图片格式image/png：png图片格式application/json：JSON数据格式application/pdf ：pdf格式application/octet-stream ：二进制流数据，一般是文件下载application/x-www-form-urlencoded：fo..
2022-03-21 22:34:53
373
原创 重学数据结构与算法（四）
重学数据结构与算法（四）·哈希表hash：把任意长度的输入通过hash函数变为固定长度的输出，这个输出就是hash值（散列值）例如：MD5hash表（散列表）：是根据关键码可以直接访问的数据结构，关键码通过哈希函数得到固定长度的散列值，将散列值作为索引来利用数组存储对应的数据，这种数组就是哈希表。/* 哈希表 */class hashTable { constructor () { this.items = [] } // 存储数据 set (val, key) {
2022-03-20 21:21:19
216
原创 你必须记住的DOM解析渲染流程
DOM解析绘制解析html 浏览器将HTML解析成树形的数据结构构建DOM Tree解析CSS 浏览器将CSS解析成树形的数据结构构建 CSS Rule Tree由DOM Tree和CSS Rule Tree 生成 Render TreeLayout 布局 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置painting 绘制 按照算出来的规则，通过显卡，把内容画到屏幕上reflow 回流 当浏览器发现
2022-03-18 21:08:23
155
原创 重学数据结构与算法（二）
重学数据结构与算法（二）· 队列：一种操作收限的线性表，遵循先进先出（FIFO）原则，可以在表的前端出队，表的后端入队/* 队列queue *//* 利用Array的实例和方法构建一个Queue类*/class Queue { constructor () { this.item = [] } // 入队 enqueue (val) { this.item.push(val) } // 出队 outqueue () { return this.
2022-03-17 20:17:08
90
原创 重学数据结构与算法（三）
重学数据结构与算法（三）·单链表：每个元素由一个存储自身数据的结点和指向下一个元素的引用（指针）组成/* 单链表 *//* 1. Node类：属性element存储自身数据，next指向下一个node2. LinkedList类： 属性 Head 头指针，length 链表长度 方法 */class Node { constructor (element) { this.element = element this.next = null }}c
2022-03-17 20:15:19
47
原创 重学数据结构与算法（一）
重学数据结构与算法（一）· 栈：一种受限制的线性表，遵循后进先出（LIFO）原则/* 栈Stack */// 利用js中的Array实例和方法实现一个Stack类class Stack { constructor () { this.item = [] } // 压栈 push (val) { this.item.push(val) } // 出栈 pop () { return this.item.pop() } // 取栈顶元素
2022-03-16 18:28:21
1360
原创 浏览器处理请求的流程
浏览器处理请求的流程根据服务端的强缓存政策查看是否命中强缓存查看头部control-cache的max-age检查缓存是否过期没有过期就读取缓存，否则就查看是否有Etag、last-modified, 没有就直接发起请求，如果有Etag就携带if-none-match发起请求，如果有last-modified就携带if-modified-since发送请求，走协商缓存。协商缓存服务端根据if-none-match、if-modified-since检查缓存是否真的过期如果没有过期，
2022-03-14 17:45:00
181
原创 一行代码解决Element UI Container 布局容器中 头部和侧边栏固定 el-main可滚动
布局<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container></el-container>方案**只需要给内容区域的contain
2022-03-11 20:03:46
2891
5
原创 【数据劫持】Object.definedProperty() 数据劫持
Object.defineProprerty()简介和使用注意：defineProperty方法直接用Object构造器调用，不被任何实例对象调用基础语法 var obj = {} var descriptor = {} Object.defineProperty(obj,prop1,descriptor) /* obj: 要操作的对象 prop：对象的属性 descriptor：描述信息,对象数据类型
2021-12-07 11:56:08
989
原创 一招解决iconfont图标与文字对不齐的问题
1.用相对定位解决position: relative;top: 0;left: 0;top和left的值根据情况调节2.垂直对齐方式vertical-align 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。vertical-align: middle; 把此元素放置在父元素的中部。详细解释...
2021-11-18 22:25:33
2429
原创 DOCTYPE的作用？ 为什么要加上DOCTYPE？
简单说一下DOCTYPE位置：<!DOCTYPE>声明必须写在我们的文档内容的第一行，位于标签前面。作用：<!DOCTYPE>并不是html标签，它的作用是告诉浏览器用哪个文档类型规范来解析文档。扩展：在HTML4.01中，<!DOCTYPE>声明引用DTD（文档类型定义，Document Type Definition），因为HTML4.01基于SGML（标准通用置标语言）。DTD规定了标记语言的规则，这样浏览器才能正确解析文档。而H5不基于SGML，所以不需要
2021-11-14 22:44:29
1047
原创 简单写一下src 和 href 的区别
* src是引入，在请求src资源时会将指向的资源下载并应用到文档中。例如用在script、img、 iframe上，是页面内容不可缺少的一部分。* href是引用，在当前元素和引用资源之间建立联系，用在link、a标签中。* src请求是同步的，资源加载完成才会继续执行下去。* href请求是异步的，会和页面一块加载。...
2021-11-13 21:01:54
529
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人