- 博客(67)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端位运算运用场景小知识（权限相关）
位运算（Bit Manipulation）是直接在整数的二进制位上进行的操作，相当于转成二机制数进行运算READ: 1
2024-07-26 16:47:19
742
原创 前端调试合集(包含移动端/内嵌h5)
chrome的控制台是前端最强大的调试工具之一，很多FE同学每天在使用功能只是其中的一小部分，很多非常强大的功能值得我们继续深挖。可出输出console对象下不同方法的语义信息，info(普通信息)，log(日志)，error(错误信息)，warn(警告信息)，可以输出代码执行时抛出的错误。移动端调试的时候，如果需要查看自己打印的日志和请求返回，在不借助电脑调试的情况下，就可以借助vconsole插件来完成。打开Mac端safari，在开发选项找到移动端需要调试的页面，即可调起浏览器的控制台进行调试啦。
2024-07-24 17:23:50
723
原创 手把手教你从0到1开发浏览器插件
Chrome插件，官方名称extensions（扩展程序）；为了方便理解，以下都称为Chrome插件，或者简称插件，那么什么是Chrome插件呢？扩展程序是自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制Chrome的功能和行为。插件程序可以提供以下几个功能：生产力工具：网页内容丰富信息聚合乐趣和游戏可以通过点击更多 -> 扩展程序来查看所有安装的插件，或者直接打开插件标签页。
2024-06-03 18:52:53
6719
2
原创 报错解决：You may need an additional loader to handle the result of these loaders.
根因是：当前webpack/babel 识别不了 export * as x x x from xxxx的语法（export 和 import的组合使用）或者 在.babelrc中配置。
2023-11-29 22:59:07
4829
原创 你不知道的 CSS 之包含块
没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。
2023-11-17 11:08:18
169
原创 webpack常用配置与性能优化插件
提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高开发效率和项目的可维护性。
2023-09-22 10:33:40
735
原创 事件循环，还在微任务宏任务？过时了，快看看新版浏览器事件循环event loop(message loop)
程序运⾏需要有它⾃⼰专属的内存空间，可以把这块内存空间简单的理解为进程。：有了进程，就可以执行程序代码了，一个进程至少包含一个线程，这个线程称之为主线程。如果想要多块代码同时运行，
2023-09-15 15:22:14
1236
1
原创 新版原型和原型链详解，看完整个人都通透
思考一个问题，如果访问doSomeInstancing里的一个属性，浏览器是怎么做的？浏览器首先会查看中是否存在这个属性如果不包含属性信息，那么浏览器会在的__proto__中进行查找 (同). 如属性在的__proto__中查找到，则使用中__proto__的属性。否则，如果中__proto__不具有该属性，则检查的__proto__的__proto__是否具有该属性。默认情况下，任何函数的原型属性__proto__都是因此，通过的__proto__的__proto__( 同的__proto__
2023-09-14 15:39:32
180
原创 在云服务器上部署nuxt服务端渲染服务（亲测线上）
打包完毕得到最新的.nuxt包注意：.nuxt文件是以.开头的，属于隐藏文件，mac电脑快捷键shift+command+. 可以显示出隐藏文件;windows的话查看文件夹选项，勾上显示隐藏文件
2022-06-12 14:10:06
2831
3
原创 实测在Nuxt中自定义loading加载效果，搭配nuxt/axios拦截器
首先说一下我用的loading是一个第三方json动画库，底层用了window和document对象，在服务端会报错，只能在客户端跑。所以在服务端运行的请求钩子是不能进行loading效果的先引入第三方动画库lottiefiles我的版本是^1.5.6npm install @lottiefiles/lottie-player在plugins下创建一个Loading文件夹，Loading下创建一个lottiePlayer.js全局引入该模块// 引入lottiefilesimpo.
2022-04-25 17:40:03
3148
原创 实测Nuxt坑，配置@nuxt/axios、拦截器、代理跨域，请求
下载第三方模块@nuxtjs/axiosnpm install @nuxtjs/axios// 自动帮你下载@nuxtjs/proxy在nuxt.config.js中配置代理和启用@nuxtjs/axios模块下面一些配置都是我的各环境变量不会的话参考普歌-实测Nuxt.js入坑，配置dev、test、pro三种环境的变量envmodule.exports = { // 环境变量 env: { NODE_ENV: env[process.env.NODE_ENV].NODE
2022-04-25 17:28:10
2572
原创 实测Nuxt.js入坑，配置dev、test、pro三种环境的变量env
先下载一个cross-env模块，比较好控制环境npm install cross-env在package.json中写入环境的配置 "scripts": { "dev": "cross-env NODE_ENV=dev nuxt --open ", "test": "cross-env NODE_ENV=test nuxt", "build": "cross-env NODE_ENV=pro nuxt build", "start": "cross-env NOD
2022-04-25 17:09:41
4765
3
原创 Vue-cli3|4 打包build优化（vue.config.js+nginx+gzip）已实战测试chunk大小小了3倍
哈哈哈。好久没更新了，因为参加了工作和校招面试，还有一部分是自己学习。大部分笔记都写在印象笔记上了，后续会持续分享哈。分入口文件因为我们打包时需要不同的main配置文件。方便进行打包需要在根目录下创建两个main文件。在vue.config.js中写入webpack语法或者vue.config提供的语法。识别环境变量(我环境变量是通过cross-env进行控制)module.exports = { chainWebpack: config => { config.whe.
2022-03-04 15:23:15
3110
原创 .sh脚本shell编写简单的git自动提交（无分支，个人项目适合）
shell基本操作命令pwd->是获取当前文件夹的绝对路径把pwd下面是获取当前shell文件所在的文件绝对路径，并赋给变量SHELL_FOLDERSHELL_FOLDER=$(cd "$(dirname "$0")";pwd)read -p "输入：" msg->read代表能输入某些东西并赋给msg变量echo ""->一行提示文本空值判断// 空值判断if [ ! $msg ]; then echo "IS NULL"else echo "NOT
2021-12-03 20:32:27
1067
原创 uniapp中或小程序中使用背景水印（canvas实现+原生组件层级高的解决）
代码结构<!-- 水印 --><view class='water_top'> <canvas canvas-id='watermarkCanvas' style='width:100%;height:100%'></canvas></view><script> export default { data() { return { } }, onLoad() { this.drowsyUs
2021-11-29 12:45:30
3984
1
原创 (mac m1亲身教程)iterm配置oh-my-zsh以及iterm配置dracula主题
一、 查看系统shells是否安装zsh，通常默认是bash（M1默认使用的是 zsh所以不修改安装了再说了 M1用户忽略这一步）查看系统是否有 zsh. cat /etc/shells如果没有安装zsh，请使用下面命令安装pacman -S zsh二、 首先安装iTem2iterm2官网下载安装(https://iterm2.com/)三、 安装oh-my-zsh方式一:官网的正常安装方式（如果安装oh-my-zsh时由于github登陆失败（443）而无法安装，可以使用方
2021-11-29 11:03:36
2535
3
原创 原生js实现移动h5端可滑动轮播图、自动轮播（数字导航,无知识点）
原生js移动h5端简单可滑动轮播图(rem适配)很多移动端轮播图是需要这个触摸滑动的功能，js中映射就是touch、touchmove、touchend这三个事件,看看效果图直接放代码html<!-- 轮播图区域 --> <div id="banner-area"> <div id="banners-img"> <div class="img-area"> <img src="./images/banner
2021-07-15 15:51:24
2266
4
原创 vue中配合axios的拦截器实现自定义loading组件（插件）
前言：在vue中想实现loading加载可以使用NProgress，如果效果没有达到想要的效果就可以用自定义loading先搭建一个loading组件在components下创建一个Loading/loading.vue的文件，现附上loading代码<template> <div class="loading-page" v-if="loading"> <div data-loader="jumping"></div> <p.
2021-06-27 13:43:24
665
2
原创 vue项目中通过文件操作进行动态加载路由(router.js)
前言：在vue项目中都需要配置router，而在一个项目中需要配置的静态路由非常多，一个router.js文件下写几百行代码，这也太xxxx了解决的话一个是后端提供路由进行路由动态加载渲染，另一种就是对路由文件的动态加载接下来我们来实现下路由文件的动态加载第一步，在创建vue文件时，可以在同级文件夹下在创建一个router.js，在这里面配置本路由及其子路由//路由懒加载const Login = () => import(/* webpackChunkName: "log..
2021-06-19 11:58:06
1612
原创 Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue-lazyload图片懒加载等进行cdn加载)、elementui进行按需加载
(亲测有效)服务端渲染nuxt对axios/jQuery/swiper/vue-lazyload启用cdn加速，elementUI进行按需导入前言：在nuxt中做一些性能上的优化其实存在许多坑，尽管nuxt已经帮你做了许多事情，下面是我慢慢捣鼓出来的，有问题的话望大佬指出一 、打包开启打包分析第一步，下载依赖webpack-bundle-analyzernpm i webpack-bundle-analyzer -D第二步，在package.json中scripts中加一项配置 "
2021-06-14 14:28:49
4586
原创 普歌-手写系列02—实现forEach、手写instanceof、实现一个new
面试重点之手写forEach，以及instanceof和new原理1. 实现一个forEach根据forEach的特点Array.prototype.MyforEach = function (fn, thisArg) { var _this; if (typeof fn !== "function") { throw "参数必须为函数"; } if (arguments.length > 1) { _this = thisArg; } if (!Ar
2021-05-31 19:11:39
180
原创 普歌-手写系列01—实现promise(简易)、promise.all、promise.race、promise.any
(面试重点)手写实现promise、promise.all、promise.race、promise.any大三的我找暑期实习，有幸也面过腾讯、阿里、快手、字节、作业帮等等公司，也算是一个行走的面经…现在把一些真实遇到的手写系列分享给大家如果有错误，及时提出来，谢谢哈手写实现一个promise class MyPromise2 { constructor(executor) { // 规定状态 this.state = "pending"; // 保存 `r
2021-05-28 14:03:48
418
2
原创 普歌-vue-template-amdin用webpack配置CND加速/打包忽略element、vue等（亲测有效）
普歌-vue-template-amdin用webpack配置CND加速详细教程 依旧废话两句：项目不优化，用户两行泪客官看图回归正题，配置流程1. 把main.js分成两个js，一个是开发环境下的(main-dev.js)，一个是生产环境下的(main-prod.js)main-dev.js文件中的elementui、echarts等还是正常引用(我这有echarts、element等)import Vue from "vue";import "normalize.css/norm
2021-05-28 13:47:06
572
1
原创 普歌-多种跨域方式以及解决跨域方案(jsonp、cros、vue中跨域proxy、nginx反向代理跨域)
普歌-跨域及解决跨域(超详细，面试官都夸赞)前言：了解如何跨域前，首先了解什么是跨域 同源策略- 浏览器的安全策略- 协议名、域名、端口号完全一致跨域违背同源策略就会产生跨域解决跨域jsonp(前端设置和后端设置) \ cors(后端设置) \服务器代理(后端设置)…当时3月底面试快手是提起这个怎么解决跨域时，说的面试都称，说的很详细，我相信你即使没实践过也能很快上手(原话)~~~~但最后挂在二面了????????????用jsonp解决跨域(前后端配合设置)jsonp
2021-04-22 21:06:07
556
8
原创 普歌-LeetCode（JS两数之和）JavaScript实现两数相加等于target返回其下标
力扣题一 ：JS实现两数之和(两种解法)题目：给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例1：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。示例 2：输入：nums = [
2021-04-01 22:33:54
607
原创 普歌-页面优化之实现图片懒加载+节流(面试重点)
优化之js实现图片懒加载应用场景：懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。面试问：实现懒加载的原理?懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。图片没有进
2021-03-29 22:29:49
207
原创 【已解决】Linux中安装nodejs用n切换版本没反应？
云服务器中安装node版本过低，切换不了版本我的云服务器版本:centos7我们安装软件使⽤⼯具： dnfDNF，全称Dandified（时髦的、华丽的） Yum；是Yum的下⼀个版本，也被称之为Yum的替代品；如果是centos7的版本，需要通过yum进⾏安装（这个⾃⾏安装⼀下）,通过yum安装；yum install dnf，如果安装报错,linux中yum错误解决方法centos8，所以是⾃带dnf的；1. 安装dnf(下载软件包) yum install dnf之后通过
2021-03-03 11:46:48
3651
6
原创 Linux中yum update错误/yum install 错误 error: rpmdb: BDB0113 Thread/process 728/140414210832448 failed
【已解决】yum执行命令 error: rpmdb: BDB0113 Thread/process 728/140414210832448 failed错误截图再现：错误场景：可能是yum update xxx或yum install xxx服务器版本：centos 7.x解决方法依次输入以下代码# cd /var/lib/rpm# lsBasenames __db.001 __db.003 Group Name Packages
2021-03-03 11:20:44
322
原创 腾讯云短信+使用node发送短信（3种方法API、SDK）、封装工具、搭建web服务、写接口、调用接口发送短信、时效性判断、验证验证码的正确性（下）
普歌-结合腾讯云短信服务+node搭建一个简单的发送短信web小项目涉及技术：腾讯云服务后端服务：node+express前端搭建：html+js前言：本来这篇博客应该很早就发了，中间有一些事情忘了，抱歉昂~，没有学会基本发送短信的可以看看我以前的普歌-腾讯云短信+使用node发送短信（3种方法API、SDK）、封装工具、搭建web服务、写接口、调用接口发送短信、时效性判断（上），学会了可以集成到自己的小项目里让大家看看实现效果，(样式别在意)一、node搭建web服务第一步
2021-02-03 01:20:16
1293
原创 普歌-uniapp安卓打包apk发布软件商城
总结一. uniapp安卓打包apk发布软件商城打包前准备uni_appid： uniapp的id秘钥： 生成APP证书时设置的密码应用包名： uniapp打包时有个安卓包名既应用包名应用签名： 常是微信开放平台中特定需要的，下载微信签名工具安装到手机上，输入应用包名后获得一串字符串，既应用签名证书别名： 证书的名称生成Android平台签名证书(.keystore)-自有证书操作步骤安装JRE环境（推荐使用JRE8环境，如已有可跳过）可从Oracle官方下载jre安装包
2021-02-02 22:21:48
1079
原创 普歌-前端js/vue生成二维码的两种方式
普歌-前端js/vue生成二维码的两种方式需要生成二维码的场景比较多，支付、个人信息读取等等，今天就说说两种方式，一种单纯的生成二维码，另一种中间可以放logo1. 方式一:QRCode.jsQRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。在npm的使用方法：https://www.npmjs.com/package/qrcodejs2我进行了总结使用方法：
2021-01-24 17:04:00
553
原创 events.js:292 throw er； //Unhandled ‘error‘ event；Error:spawn cmd ENOENT.......错误解决
error描述：提示：这里一般是在运行vue 项目或者node时出现问题，但出现这种解决办法都一样解决方案：在环境变量path中添加System32的路径，一般路径在C:\Windows\System32一般这样就可以解决，项目就能跑起来...
2020-12-14 22:35:26
7450
8
原创 腾讯云短信+使用node发送短信（3种方法API、SDK）、封装工具、搭建web服务、写接口、调用接口发送短信、时效性判断（上）
普歌-腾讯云短信+三种实现发送短信的方法前提准备：腾讯云账号新用户领取200条免费短信腾讯云短信SMS登录账号进入短信的控制台进行创建 签名和正文模板，根据提示进行创建不会理解签名和正文模板的签名和正文模板这是我的正文模板: 您的验证码为：{1}，该验证码{2}分钟内有效，请勿泄漏于他人！有了签名和正文模板后，需要准备这些参数（这是在有了前面两个东西之后）应用SDKAppID：那个14开头的（ SKDApp相关参数）应用SDKAppKey：（ SKDApp相关参数）短信
2020-12-13 10:44:25
2592
原创 uniapp/vue根据文件路径后缀显示相应的icon图标，在uniapp中点击文件打开新页面查看文件
uniapp中根据文件路径后缀显示相应的icon图标（vue中同方法），并在点击文件打开新页面查看文件详情(app端)需要准备一套iconfont彩色图标，如果不会在uniapp中使用多色图标，请先移步：uni-app使用阿里iconfont多色图标先上效果，客官满意的话请继续看点击文件跳转...
2020-12-10 20:38:03
2043
原创 非常详细，详解html中的video视频标签（自制播放、时间、进度条、速度、全屏），实现自己的播放控件
实现自定义video播放视频控件，详解video中JS的api最后的效果（还有控制音量，开关声音，因为赶时间，没做上，会在本篇文章中说，怎么控制）先上基础知识video的标签属性属性值功能描述controlscontrols是否显示播放控件autoplayautoplay设置是否打开浏览器后自动播放widthPilex（像素）设置播放器的宽度heightPilex（像素）设置播放器的高度looploop设置视频是否循环播放（即播
2020-12-04 13:34:45
7472
6
原创 普歌-如何下载并使用Windows系统上的node版本管理工具、MacOs和Linux上的node版本管理工具
windows中的node版本管理工具前言：在实际的开发学习中，只需要一个Node版本（学习阶段推荐使用最新的node版本）；但在实际项目阶段，要使用LTS版本，开发人员版本统一的话，会避免很多预测不了的冲突。简单说一下非windows系统的Node版本管理工具可以快速更新或切换多个版本时，可以借助于一些工具nvm：Node Version Manager；n：Interactively Manage Your Node.js Versions（交互式管理你的Node.js版本）大家可以
2020-11-24 21:18:44
200
原创 uniapp封装手势滑动屏幕核心代码（向左滑，向右滑）
前言:uniapp官方没有提供左滑右滑的事件，但是像探探app那样左滑右滑是怎样实现的呢，本篇就来说一下怎样封装一个uniapp左滑右滑事件核心思路给容器绑定两个触屏事件touchstart(用户按下)和touchend（用户离开）用户按下屏幕事件a.记录用户按下屏幕的时间 Date.now() 时间戳，即返回1970-1-1到现在的毫秒数b.记录用户按下屏幕的坐标X和Y用户离开屏幕事件a.记录用户离开屏幕的时间 Date.now()b. 记录用户离开屏幕的坐标 x和yc. .
2020-11-21 21:54:39
1620
原创 微信小程序实现下滑触底加载loading更多数据，用分页的原理实现下拉触底加载效果（动画效果）
小程序上拉触底刷新，执行分页加载数据loading此博客适用于用分页方法使小程序下拉时实现需要加载更多数据时使用先看效果图:
2020-11-20 19:48:28
2204
原创 前端结合vue-element-admin实现简单Oauth2.0内部第三方登录
前端vue实现自己的第三方登录，并把用户信息渲染上去前言：本篇只讲解在已经搭建好了Oauth2.0内部的第三方登录的后端服务，前端如何实现登录，在讲述第三方登录之前，不懂第三方登录流程的可以看看下面几篇文章，这种技术解决了内部系统的一个账号互通，牛一点的可以自己写一个完完整整的第三方一张图搞定OAuth2.0OAuth2.0 详解理解OAuth 2.0看完这篇应该就可以理解开发前准备vue-element-admin的空模板 ->vue-admin-template这是GitHu
2020-11-19 20:33:47
2428
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人