- 博客(38)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 关于睡眠排序的小尝试
睡眠排序，也称为硬件排序，是一种充分利用硬件计时器的资源来实现的拟态算法。JavaScript 中，基本原理就是通过设置多个计时器（setTimeout），每个计时器的唤醒时间与数组各项的值各相对应。计时器唤醒时，便执行对应值的输出，最终完成对数组的排序。
2022-01-11 11:21:25
446
原创 CSS 中文字体格式
font-family华文新魏：STXinwei 华文行楷：STXingkai 华文隶书：STLiti 华文琥珀：STHupo 华文彩云：STCaiyun 方正姚体：FZYaoti 方正舒体：FZShuTi 华文仿宋：STFangsong 华文中宋：STZhongsong 华文宋体：STSong 华文楷体：STKaiti 华文细黑：STXihei 隶书：LiSu 幼圆：YouYuan 微软雅黑体：MicrosoftYaHei 微軟正黑體：MicrosoftJhengHei
2021-09-29 15:04:28
644
原创 图片等比缩放方案
方法 1：设置最大宽高 + autoimg { width: auto; max-width: 400px; height: auto; max-height: 225px;}如果，此时图片存在父级，并且希望图片以等比缩放的形式，最大的填充在父级块中，也可以通过将 max-width、max-height 设置为 100% 来实现：img { max-width: 100%; max-height: 100%;}方法 2：设置背景属性
2021-09-14 09:56:29
972
原创 纯CSS实现垂直水平居中的几种方法
方法 1：table-cell<div class="container"> <div class="inner">Azer</div></div>.container { display: table-cell; vertical-align: middle; text-align: center;}方法 2：flex 布局.container { display: flex; jus
2021-09-14 09:32:40
158
原创 简单的时间格式化转换
const dateFormat = (date, format = 'YYYY-MM-DD hh:mm:ss') => { try { if (!date) return date = new Date(date) // 判定输入值是否可转换为日期 if (isNaN(date.getTime())) { console.log(date) return null .
2021-08-30 16:51:26
183
原创 CSS 中的冷门属性收录
声明： 本篇作用在于收录一些不常用，但又能有效处理一些不常见问题的 CSS 属性，以便遇到一些问题时，能及时查找使用。
2021-08-23 15:57:15
570
2
原创 文件真实类型判断：判定文件是否为图片
文件buffer读取函数const readBuffer = (file, start = 0, end = 2) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { resolve(reader.result); }; reader.
2021-08-06 16:10:20
605
原创 Promise 实现文件串行上传请求
// input multiple 多文件上传let files = []const upload = file => { return (resolve, reject)=> { return new Promise((resolve, reject)=>{ // 文件上传操作 }) }}let waitingQueue = []files.forEach(file => { wait.
2021-08-06 15:56:45
382
原创 移动端浏览器中触发app打开/下载
handleDownload() { let ua = window.navigator.userAgent if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { // ios端 // 触发app启动 const appName = 'app的软件名，需要跟商店中参数一致' window.location.href = `${ appName }://openApp` .
2021-07-22 16:21:35
850
原创 关于 Vue 自定义按钮组件 $emit(‘click‘) 一次触发两次的问题总结
子组件<template> <button :class="['yt-button', ClassOfType, ClassOfSize]" @click="$emit('click')"> <slot></slot> </button></template><script>export default { name: "YtButton", props: {
2021-06-30 14:14:58
6426
2
原创 JavaScript try catch 获取错误信息
try { // do something} catch(err) { console.log(err) // do something while error}err 对象的属性说明：message：错误提示信息 fileName：表示出错代码所在文件 lineNumber：出错代码所在行数 stack： 出错堆栈信息 name：异常对象名/类型...
2021-06-25 16:34:34
2834
原创 Sortable.js 多层嵌套拖动排序
<div class="tree"> <div class="node"> <span class="node-title">node 1</span> <div class="node-children"> <div class="node"> <span class="node-title">node 1.1</spa.
2021-06-16 16:03:37
5267
1
原创 原生函数添加、删除DOM类名
添加类名HTMLElement.prototype.addClassName = function (className) { if (!className) return const el = this const classNames = el.className.split(' ').filter(i => !!i) if (!classNames.includes(className)) { classNames.push(classNam
2021-06-16 13:53:26
183
原创 统计文段中英语单词数量
网上找到的方案function wordCalculate(words) { if (words) { // 1.复制副本 let value = words // 2.将中文字符替换为空格 value = value.replace(/[\u4e00-\u9fa5]+/g, " "); // 3.将换行符，前后空格去除 value = value.replace(/\n|\r|^\s+|\s+$/
2021-06-10 14:45:19
459
原创 html2canvas 生成图片偏移出现白边的解决方案
说明最近开发时，遇到需要将 html 页面生成图片并下载的情况。因为之前就有接触过 html2canvas 这个工具库，所以就直接使用了。一开始，只是先做功能的实现，也就没太在意。但后边随着功能完善，开始测试时，发现每次截图时生成的图片都会有白边，而且白边的大小和位置会随着窗口的改变而出现较为明显的变动。于是，在网上各种查找 html2canvas 处理白边的方案，并做了尝试，但很显然，都不能很好的解决，白边的问题依旧存在。后来，在重新测试的时候，发觉白边问题的本质是目标内容出现了偏移，
2021-05-19 18:12:40
3753
3
原创 关于 Element-ui Dialog 引用时，在弹窗上 mousedown 后再在遮罩层 mouseup 引发的意外弹窗关闭问题的处理方案
问题：Element-UI 作为当前较为成熟的 Vue 框架的 UI 组件，能有效的提高特异性不强的项目的界面开发。但是，作为一个要兼备处理多方面问题的第三方库，Element-UI 也存在着一些问题。比如 <el-dialog>。在引用 <el-dialog> 时，尤其是将其作为编辑弹窗时，常常会有一个问题，便是在使用鼠标滑动选取弹窗中做文本选择时，若不注意将光标滑到弹窗窗体之外的遮罩层处，此时松开鼠标，就会导致弹窗被关闭掉的现象，十分影响使用体验。当然，这种情况也有一
2020-11-27 17:41:25
1457
3
原创 H5+CSS3 背景图毛玻璃效果实现方案
方案一、<img> + filter: blur()<div class="container"> <img class="background" src="./image/index.png"></div><style> .background { width: 100px; height: auto; filter: blur(20px); }</styl
2020-11-17 23:57:50
1953
1
原创 大前端 - Vue-Router
编程式导航// 将新的路由推入 history 中，history.length + 1this.$router.push()// 用新的路由替换掉当前 histroy 中的末尾项this.$router.replace()// 在 history 数组中，前进回退// + 前进 - 后退this.$router.go(-1)hash 模式URL中带有 # 标识，如：https://music.163.com/#/playlist?id=202 URL 中 .
2020-08-06 15:34:11
128
原创 大前端 - 打包工具
概要需求背景新特性代码编译，将具备新特性的代码编译成能够兼容低版本环境的代码，如 ES6 => ES 5 模块化 JavaScript 打包 支持不同类型的资源模块本质解决的是前端整体的模块化，并不单指 JavaScript 模块化功能模块打包器（Module Bundler） 解决模块 JS 打包问题 可以将零散的 JS 代码整合打包到一个 JS 文件中 模块加载器（Loader） 对于存在兼容问题的代码，可以通过引入对应的解析编译模块进行编译 代码拆分
2020-08-06 15:14:06
231
原创 大前端 - ES Modules
特性通过给 script 添加 type="module" 的属性，就可以以 ES Module 的标准执行其中的 JS 代码 ESM 自动采用严格模式，忽略 “use strict” 每个 ES Module 都是运行在单独的私有作用域中 ESM 是通过 CORS 的方式请求外部的 JS 模块的 ESM 的 script 标签会延迟执行脚本，不会阻滞页面的渲染导入导出 // 导出 module.jsvar name = 'foo module'function =
2020-08-06 14:42:49
214
原创 大前端 - Webpack
概述本质JavaScript 应用程序的静态模块打包器核心加载器（Loader）机制工作流程配置初始化 webpack 会首先读取配置文件，执行默认配置 编译前准备 webpack 会实例化 compiler，注册 plugins、resolverFactory、hooks。 reslove 前准备 webpack 实例化 compilation、NormalModuleFactory 和 ContextModuleFactory reslove 流程解析文件的路径信息以及 i
2020-08-05 18:04:09
214
原创 大前端 - 前端脚手架工具
脚手架工具本质作用创建项目基础结构 提供项目构建任务 提供项目规范、约定意义减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件 可以根据交互动态生成项目结构和配置文件 多人协作更为方便，不需要把文件传来传去常用脚手架工具 脚手架 作用 create-react-app 创建 React 项目 vue-cli 创建 Vue 项目
2020-08-04 18:46:34
374
原创 大前端 - 关于项目工程化
定义工程化是根据业务特点，将前端开发流程规范化，标准化，它包括了开发流程，技术选型，代码规范，构建发布等，用于提升前端工程师的开发效率和代码质量。作用制定各项规范，编码规范，开发流程规范，前后端接口规范等等 使用版本控制工具 git，commit描述规范 使用合适前端技术和框架，提高生产效率，降低维护难度，采用模块化，组件化，数据分离等 代码可测试，单元测试，端到端测试等 开发部署自动化意义减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 可以根据
2020-08-04 18:02:17
208
原创 前端路 - JavaScript 性能优化
浏览器内存管理基本概念JavaScript 中垃圾的定义内存 由可读写的单元组成，表示一片可操作空间 JS 中的内存空间在变量定义时自动分配，无法人为指定明确大小 管理：认为的去操控一片空间的申请、使用和释放 内存管理：开发者主动申请空间、使用空间、释放空间 管理流程：申请 => 使用 => 释放 不再被引用的对象 不能从根上访问到的对象（非可达对象） 程序中不再需要使用的对象 程序中不能再访问到的对象JavaScript 中可达对象的定义可以访问到
2020-08-04 17:11:26
107
原创 前端路 - JavaScript 中的数据类型校验
类型系统相关介绍类型安全强类型 语言层面限制函数的实参类型必须与形参类型相同 语言中不允许任意的隐式类型转换 弱类型 语言层面不会限制实参的类型 语言中允许任意的隐式类型转换 类型检查静态类型 声明时，变量的类型便是明确的 声明后，变量的类型就不允许再修改 动态类型 在运行阶段，才能够明确类型变量 变量的类型可以随时发生变化 可理解为，动态类型的变量是没有类型的，而变量的值是有类型的 强类型语言优势错误更早暴露 代码更智能，编码更准确 重构
2020-07-27 11:26:55
541
原创 前端路 - ES6
作用域ES6 在全局作用域、局部作用域外，新增了一个块级作用域。在 { } 中使用 let / const 则会形成块级作用域，在 “块” 外层不能获取到 “块” 中的变量。在 for 循环中，for 的条件语句中声明的参数与其执行语句中声明的参数之间互相不影响，互相独立。可视为 for 循环中嵌套了两层作用域。for (let i = 0; i < 3; i++) { let i = 'Azer'; console.log(i);}// Azer Azer Azer
2020-07-27 10:44:45
141
原创 前端路 - 手打实现 Promise
分析Promise 就是一个类，在执行这个类时，需要传递一个执行器进去，执行器会立即执行 Promise 有三种状态 pending 等待 fulfilled 成功 rejected 失败 Promise 状态变化只能有两种情况： pending > fulfilled pending > rejected 状态一旦确定就不可再更改 resolve() 和 reject() 用于更改状态 resolve：fulfilled reject：rejecte
2020-07-27 00:36:20
108
原创 前端路 - JavaScript 中的异步编程方案
Promise 方案误区在一个 Promise 的回调中调用另一个 Promise，即 Promise 的嵌套调用，形成了回调地狱。promise().then(res => { promise().then(re => { promise().then(r => {}) })})链式调用Promise 对象的 then 方法会返回一个全新的 Promise 对象 后边的 then 方法就是在为上一个 then 返回的 Promis
2020-07-27 00:28:44
106
原创 前端路 - JavaScript 函数式编程
高阶函数JavaScript 的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。高阶函数可以用来抽象通用的问题，让我们可以只关注于我们需要实现的目标。函数作为参数function forEach (array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]) }}function filter (array,
2020-07-23 11:20:48
186
前端面试常见问题规整.pdf
2024-04-13
告白利器 - 动画爱心表白信
2022-05-24
纯 JS 实现手风琴效果相册
2022-04-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人