国企程序媛 record 前端技术 & review code。。。

转载 大文件上传、下载终极解决方案：切片

前端切片实现大文件上传和下载

原创 javascript 实现准时的setTimeout

当每一次定时器执行时后，都去获取系统的时间来进行修正，虽然每次运行可能会有误差，但是通过系统时间对每次运行的修复，能够让后面每一次时间都得到一个补偿。来获取数据，比如直播页面，接口返回给我们一个时间，我们需要在时间到达后去执行一些操作，使用。会发现setTimeout 是不准的，因为 setTimeout 是一个。通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时。，它的指定时间指的是：进入主线程的时间。setTimeout 系统时间补偿。

原创 vue3 + ts + element plus 实现自定义分片上传组件以及上传进度弹窗

vue3 + typescript + elementplus 开发的后台管理系统，由于多个页面需要上传图片/视频/音频，所以将上传逻辑写成一个公共组件，如果上传文件超过5M，则需要分片上传，从0开始分片，前端传递给后台接口参数chunk 0表示第一片，1表示第二片，2表示第三片。：页面点击上传按钮（可自定义传入上传样式）调起电脑的文件选择，选中文件后直接上传后台服务器，页面展示上传进度条。：整体分片上传组件是比较简单的，重点就在计算分片的函数，祝大家永不宕机，永无bug💕💕💕。

原创 How I resolved git error — “fatal: Not possible to fast-forward, aborting”.

“fatal: Not possible to fast-forward, aborting”

原创 uniapp h5 竖向的swiper内嵌视频实现抖音短视频垂直切换，丝滑切换视频效果，无限数据加载不卡顿

博主一开始一直想实现类似抖音进入页面自动播放当前视频，上下滑动切换之后播放当前视频，但最后在ios上出现声音播放，但画面卡顿的问题，估计是ios的浏览器对自动播放做了安全限制，导致自动播放失效，为了功能的可用性，最终放弃自动播放，实现手动点击视频正中心的播放按钮进行播放，再点击视频暂停，这个bug在安卓端暂时没出现，大概率是ios的安全性更高导致的浏览器策略拦截了，需要用户手动交互。

原创 微信ios手机网页分享，右上角微信网页自带的更多三个点点 点不动？

微信ios手机网页右上角三个点点 点不动 不灵敏？

原创 uniapp h5项目 实现微信内分享 以及排坑ios分享获取不到缩略图和描述的bug

uniapp h5项目 实现微信内分享

原创 使用css 定义属性\变量 & @supports查询 & content-visibility提高网站性能 & CSS过渡\转换\动画 & 滚动捕捉 & :is/:where伪类 & res简化写法

这种方法的问题是，如果你想对其中一种颜色进行更改，你必须更改它的每一个实例。虽然代码编辑器可以通过搜索和替换轻松做到这一点，但这仍然很烦人，特别是当你只是想做一个快速的测试，而又要把所有的东西反过来的时候。的元素实际上为零，这让你可以为隐藏的元素应用一个理论上的高度和宽度，以便浏览器可以从一开始就考虑到它，而不是在元素渲染时才考虑。有三个值，默认情况下，它被设置为可见，在这种情况下，元素会像往常一样加载。浏览器的应用还有点不稳定，但慢慢就会有了。时，可见区域外的元素将被跳过，一旦出现在屏幕上，就会被渲染。

原创 javascript 数组数字排序的两种方式：冒泡排序/选择排序

js 冒泡排序🆚选择排序去得到 每轮比较找到最大的数

原创 jquery 实现在指定元素的开头添加内容 & css文件里面@charset “utf-8”；的作用 & meta标签里面的viewport & vscode编译器快速生成各种注释模板

jquery实现在指定元素的开头添加内容 & css文件@charset "utf-8"的作用你知道么 & meta标签的viewport属性 & vs code编译器生成文件注释的快捷键

原创 迷惑性的js烧脑面试大赏，你真的明白了么

let a = b = 10;(function(){ let a = b = 20 })()console.log(a) // 10console.log(b) // 20analysis：连等操作从右向左执行，相当于 b = 10、let a = b，b没有声明就赋值了，所以会隐式创建为一个全局变量，函数内也一样，并没有声明b，直接对b赋值，因为作用域链，会一层一层向上查找，找到了全局的b，所以全局的b就被修改为了20，而函数内的a因为重新声明了，所以只是局部变量，不影响全局的a，所

转载 前端代码重新部署如何优雅的通知用户刷新网页？

前端代码部署后通知用户刷新网页

转载 移动端H5 实用的 html + css + js

移动端h5开发使用hrml、css、js方便快捷操作

原创 前端开发必须要会的：macos启动一个本地web服务器访问本地html文件并在手机上访问html文件

前端启动一个本地web服务器访问html页面

转载 对于前端开发超级有用的三个api：Page Visibility 、Web Share 、Broadcast Channel，值得收藏

https://mp.weixin.qq.com/s/Tw1PPH_e_2aIBz01GvB4BA

转载 六种方案实现前端主题切换，可收藏

https://mp.weixin.qq.com/s/GQI67eSkhXplzmR3K1RxAw

转载 一份详细的Vue 前端代码风格，值得一览

vue社区官方公众号写的一份关于前端代码风格指南，值得一看，不仅要写代码，也要将代码写的好看易读。

原创 uniapp 使用 mui-player 插件播放 m3u8/flv 视频流

uniapp h5项目 pc/移动端 播放m3u8/flv 视频地址的视频流

原创 macOS获取本机的 IP 地址

获取macOS系统电脑的ip地址

原创 git 命令行实现 不增加仓库提交记录的回滚代码

git 命令行回滚代码

原创 js 常用工具函数 校验数据类型/防抖/节流/手机号脱敏/解析url参数/判断手机平台/数组去重/滚动到页面顶部/滚动到元素位置/存储/下载文件/模糊搜索/

【代码】js 常用工具函数。校验数据类型 防抖 节流 手机号脱敏 解析url参数 判断手机是安卓还是iOS 数组对象根据字段去重 滚动到页面顶部 滚动到元素位置 uuid 存储操作 下载文件 模糊搜索 遍历树节点 在树状结构中查找指定节点

原创 javascript 对if...else/find/解构/运算符 优化小技巧

1、减少if…else面条代码const getPrice = (name) => { if (name === 'hamburger') { return 20 } else if (name === 'French fries') { return 15 } else if (name === 'ice cream') { return 5 }}console.log(getPrice('hamburger')) // 20优化：const foodMap = {

原创 数组方法 arr.at() 以及 arr.flatMap()

1、at() 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。const array1 = ['this is the first element', 'this is the second element', 'this is the last element'];console.log(arr.at(0)) // logs 'this is the first element'console.log(arr.at(-2))

原创 JavaScript异步代码

new Promise((resolve,reject) => {})const responses = [] for (const url of urls) { const response = fetch(url); responses.push(response) } await Promise.all(responses)new Promise((resolve,reject) => { resolve(result) })async onL

原创 js 数组去重

const quchong = (arr) => { return [...new Set(arr)]}const quchong = (arr) => { const res = [] arr.reduce((pre, next) => { if (!pre.has(next)) { pre.set(next, 1) res.push(next) } return pre }, new Map()) retur

原创 防抖函数与节流函数

function debounce(fn, delay = 200) { let timer return function(...args) { if (timer) { clearTimeout(timer) timer = null } timer = setTimeout(() => { fn.apply(this, args) clearTimeout(timer) timer = null

原创 打乱一个数组

const shuffle = (arr) => { return arr.sort(() => { return Math.random() > 0.5 ? 1 : -1 })}

原创 uniapp h5打开微信小程序

首先贴代码将几个需要注意的点：1、当获取不到微信小程序APPID和微信小程序APPSECRET时只能在微信浏览器打开小程序2、此代码只要是在微信环境打开小程序3、需要在线上域名调试，本地看不到效果，可将本地host反向代理到线上域名进行调试4、wx-open-launch-weapp标签内样式只支持px，要自适应需再将rpx转px5、需要服务端的接口生成签名和公众号的一些数据给前端6、前端安装模块 npm install jweixin-module --save7、main.js 添加一行代

原创 uniapp swiper实现图片预览 预览一张图片加载前后两张 实现性能优化

背景：使用uniapp框架在做h5项目时，领导要求预览图片时不能一次性加载完所有的图片，需要看一张加载一张，这样用户不费流量，优化h5的性能。首先uniapp官网实现图片预览使用的是uni.preview api，但是这样传的urls数组，在点击图片进行预览时一次性加载了所有的图片。所以要实现图片预览，点击一张加载这张图片需要自已写预览组件。这里用到的是swiper组件来进行预览功能。1、新建公共组件 previewImage.vue<template> <view clas

原创 将dev分支代码提交到master分支

1.查看当前分支：git branch -a2.切换到dev分支：git checkout -dev3.把修改的代码在dev分支下提交git add .4.提交修改信息git commit -m'add content'5.将修改的内容推送至远程仓库git push6.此时需要把提交的代码合并到master分支上，先切换到master分支git checkout master7.把代码都拉下来git pull 8.把dev提交的代码合并到master分支上git

原创 Vue定义全局变量、全局方法，在.vue文件和.js文件里使用

背景：在.vue后缀名的文件，和.js后缀名的文件里，使用全局变量的语法是不一样的。.vue模板文件可以直接访问挂载在Vue实例上的全局对象，而普通的.js文件访问不到。1、 定义全局变量 const ssoServer = "https://iam.by.gov.cn/idp"; // 生产环境 const ssoServerLogout = "https://iam.by.gov.cn/apphub/logout"; // 生产环境 export default { sso

转载 从一个git仓库（有代码，只有一个master分支）迁移代码到另一个git仓库（空仓库，只有一个master分支）

1、git remote2、git remote add origin2 master3、git remote set-url origin2 ssh://git@git.omtech.cn:29418/network-interaction-middleground/web.git4、git pull5、git push origin2

原创 uniapp 动态背景图写法

:style="{backgroundImage:'url(' + (channelInfo.img ? channelInfo.img : defaultImg) + ')'}"

原创 git 仓库克隆新项目/将本地存在的项目推送到线上仓库/将一个仓库的项目推送到另一个仓库

转载 axios详解之实现请求中断

Axios是vue项目中使用最多的一个第三方开源免费的HTTP库，最大的特点在于可以同时兼容浏览器端和NodeJS服务端。底层通过判定不同的运行环境来自动提供不同的适配器，在浏览器端通过原生的XHR对象来发送请求，而在NodeJS服务端则通过内置的http模块来发送请求。1、基础示例// 安装 axiosnpm install --save axios;// 导入 axiosimport axios from 'axios';// 创建 axios 实例const instance = ax

转载 几个少见却很有用的 JS 技巧

1、“返回”按钮使用 history.back() 可以创建一个浏览器返回按钮<button onclick="history.back()"> 返回</button> 2、数字分隔符为了提高数字的可读性，使用下划线作为分隔符const largeNumber = 1_000_000_000;console.log(largeNumber); // 10000000003、事件监听器只运行一次想添加一个事件监听器并且只运行一次，使用 once 选项

原创 ProcessOn 简单入门技巧

1，基础操作

转载 自定义指令实现 防抖v-debounce/加载中v-loading/吸顶v-sticky/波纹v-wave/权限v-permission/拖拽v-draggable

转载链接

转载 前端 button 组件之按钮式进度条实现 完整js+css+html

1、实现效果2、html<div class="button"> <i class="fa fa-arrow-down" aria-hidden="true"></i> <span class="text">download</span> <span class="progress"></span></div>3、css body, html {

原创 typeof检测的Array和Object的返回类型都是Object，因此用typeof是无法检测出来数组和对象的。所以toString封装类型检测函数，方便使用

/*** @description: 数据类型的检测* @param {any} data 要检测数据类型的变量* @return {string} type 返回具体的类型名称【小写】*/const isTypeOf = (data) => { return Object.prototype.toString.call(data).replace(/\[object (\w+)\]/, '$1').toLowerCase()}console.log(isTypeOf({}))