Vue 权限菜单（动态路由）详解
前言今天记录一下Vue的权限菜单（动态路由），在我们写后台的时候用的比较多，Vue的权限菜单分两种，一种是通过本地进行，根据账号的权限进行筛选出可用的权限，组合菜单并在页面上渲染显示，另一种是根据登录的账号，后端直接回可用的权限菜单，前端进行整合渲染。第二种在日常中使用比第一种的情况多些，本篇文章讲述记录的也是第二种方式。我这里使用的是 element-ui的Admin 模板。
一、新建请求的js我这里是新建了一个请求的js，你们可以直接将这个方法写在你们现在的请求js里面。在src目录下新建一个文件夹api，新建是一个名request的js文件。
request.js代码：
123456789101112131415//这个request 是模板自带的，封装了axios的request，在utils目录下import request from '@/utils/request'export default { //...其他的请求 // 获取权限菜单列表 getRoleMenu(){ return request({ ...
Promise详解-手写Promise，实现一款自己的简易Promise
前言Promise 是ES6异步编程的一种解决方案：
从语法上讲，promise是一个对象，从它可以获取异步操作的消息；
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
promise有三种状态：
pending(等待)，
fulfiled(成功)，
rejected(失败);
状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
让我们一起实现一款自己的Promise，顺便还可以理解理解源码。
Let’s go
首先打开我们的编辑器，新建一个.js格式的文件。声明Padding、Fulfied、Rejected三种状态，然后创建一个Class，当然你也可以使用构造函数写。为了方便理解，每行代码都有注释。
123456789101112131415161718//Promise/A+规定的三种状态const Padding = 'Padding' //等待const Fulfilled = 'Fulfilled' //成功const Rejected = 'Rejected' //拒绝//创建一 ...
Promise 链式调用原理-精简20行代码
前言在面试的过程中，总有一些面试官会问你，手写一个简易版的Promise得行不，得行的话就写一个出来看看，啪一哈，就把纸和笔给了你。我们思索半天就写出来了个下面这个。哦豁，高薪张开了它的翅膀，远离了我们。
123456789101112class Promise { constructor (resolve, reject) {} resolve () {} reject (){} then () {} catch () {} once () {} all () {} ...}
本篇文章将不讲述手写出来一个简易的Promise，感兴趣的朋友可以去看我这篇文章 -> Promise详解-手写Promise,实现一款自己的简易Promise
本篇文章记录的是如何实现Promise的核心功能之一的.then 链式调用，采用构造函数的写法，本篇文章的代码不考虑任何容错和异常处理，只 ...
xcode提示debugserver is x86_64 binary running in translation, attached failed.
Flutter 项目运行 xCode 以下错误的解决方法。该方法适用于任何xCode项目。
debugserver is x86_64 binary running in translation, attached failed.
如图：
解决办法：
找到 Edit Scheme -> Run -> Debug excitable，取消该选项即可运行成功。
Showing All Messages Command CompileSwiftSources failed with a nonzero exit code
xCode 错误运行提示： Showing All Messages Command CompileSwiftSources failed with a nonzero exit code.
解决方法：
打开xCode在Runner中选择PROJECT中的Runner。在Build Setting里找到user-defined。点击 + 号。添加一条属性为SWIFT_ENABLE_BATCH_MODE,值为NO的记录。就可以了。添加后的内容如下：
添加完后，重新运行项目。
前端优化篇
在开发的过程中，多多少少的都会有着优化的工作内容。可能在前期堆码过程中不会在意，但堆码结束后必干的事情就是优化。
优化千千万，要干就干正优化。不管是堆码优化还是性能、页面等优化。都是一个重要的事。列举些常见的优化手段，不足之处或者您有其他的建议可评论在下方。
本篇文章不做过多的原理说明，只述优化方式。
一、 图片优化图片在前端是一个有点吃时间的东西，图片比较大的动不动就是1s起步，小的还好。
1、 精灵图/雪碧图我们可以使用精灵图来减少浏览器等对图片的加载，让其只请求加载一次。
把所有需要的图片全部放在一张图上，根据css的背景图属性进行裁切渲染。2、转iconfont(推荐)可以将使用到的图标这些利用第三方工具或者使用iconfont官网将其转换成字体图标。3、图片预加载在进入页面前，将下一页面所需的图片进行提前加载4、图片懒加载(推荐)对图片资源较大的进行懒加载处理。
原理：
根据图片位置和屏幕可视化高度/宽度进行计算
将处于可视化屏幕内的图片进行请求加载
仅对未加载过的图片做处理，减少页面渲染时间
二、页面白屏/首页白屏优化这个是项目中最常见的需要优化的场景。
使用lo ...
rollup简单使用
简介rollup 是和webpack、 vite齐名的一种打包工具。但webpack和vite更适合打包应用，rollup偏向于打包类、库这样的工具项目。支持多种格式(es、umd、cjs等)打包。详细配置可以看rollup官网
环境配置全局安装rollup
1pnpm i rollup -g
使用rollup 也有很多配套的生态工具，我这里就不举例并安装了，大家可以去npm上面看。
新建一个项目，并创建rollop.config.js，并添加配置
rollop.config.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273// 配置typescriptimport typescript from 'rollup-plugin-typescript2';// import clear from 'rollup-plugin-cle ...
var、let、const的区别
话不多说，直接上干活，我们先来说说一直存在并使用的 var，虽然现在有let和const了，但还是有很多人在使用它
一、 var1. 使用var声明的变量它并不属于一个块作用域的变量,它属于函数域变量12345678910111213 //代码一function test() { console.log(age); var age = 26;}test(); // undefined//没报错是因为上面的被浏览器运行时看做等价于下面的代码function test() { var age; console.log(age); age = 26;}test() //undefined
2. 变量可重复声明多次声明只算最后一次有效，因为var声明后的变量会提升，所以重复声明一个变量会合并成一个声明的变量
123456789function test() { var age = 10; age = 20, age = 30, age = 40, console.log(age); ...
flutter ios 配置 flavor / custom schemes
最近写 Flutter 用 Flavor 做环境区分，Android 配置可视化很简单，我这里就不细说了，本篇博客主要记录的是Ios Xcode 配置 Flavor (custom schemes 自定义运行方案)。
亦是记录，也是学习。
环境mac 系统的电脑、xcode、Flutter
一、创建配置文件用 xcode 打开 Flutter 项目的 ios 目录。在 Runner -> Flutter 新建配置文件，鼠标右键Flutter目录，在弹出来的菜单中选择新建文件即可。搜索 Configuration Setting File 选择并创建填写配置名称 并点击 create 创建创建好后并打开该文件，如果创建的是Debug 相关的则将目录中的Debug文件中的内容复制到这个文件中并将下面这段代码放到文件的后面。
12bundle_suffix=.这里是对应的方案名称name_suffix=${FLUTTER_BUILD_NUMBER}
二、创建对应的 schemes点击模拟器菜单旁边的 Runner ，我这里已经创建过了一个。点击 New Sche ...
react 基于 hooks 实现受控组件双向绑定
前言了解或会 Vue 的朋友都知道，在 Vue 中我们可以通过 v-model 实现 受控组件的数据双向绑定，而在 React 中则需要通过 value 和 onChange 实现数据的双向绑定，单个还可以接受，如多个呢。
看个例子。
1234567891011121314151617const [nickName, setNickName] = useState('') const [age, setAge] = useState(null) const handleNickNameChange = useCallback((value) => { setNickName(value)}, [])const handleAgeChange = useCallback((value) => { setAge(value)}, []) return ( <> <Input value={nickName} onChange={ha ...