- 博客(172)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 使用big.js解决JavaScript浮点数精度丢失问题
关于浮点数计算精度丢失是很多语言都存在的问题，例如比较著名的：DP：涉及除法的操作结果的最大小数位数。它仅与 div 和 sqrt 方法相关，以及当指数为负时与 pow 方法相关。使用Big构造函数可以创建一个Big对象，调用对应的方法即可实现我们的计算需求。注意最后我们需要使用toNumber方法重新将Big对象转为数字。因为涉及到了金额，所以一定不能出现这样的问题。
2023-03-26 08:00:00
905
1
原创 elementUI动态嵌套el-form表单校验
前端项目开发过程中表单校验是非常常见的需求，elementUI的el-form组件也是支持配置rules属性来配置表单项的校验。Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。
2023-03-19 09:00:00
6808
2
原创 vue3项目使用样式穿透修改elementUI默认样式
在css单文件中，我们在style标签中写组件的样式，可以看到，一般style标签都会带上一个scoped属性，这样可以实现及时不同组件选择器一样，但是样式互不干扰。看一个例子，我们在两个组件中都定义一个类，在对应的scope标签中设置不同的样式。可以看到，vue为我们在不同的组件中的标签上加上了一个。然后通过属性选择器，实现不同属性的标签样式互不干扰。css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式这也是style标签scoped属性实现样式模块化的原理。
2023-03-12 16:01:07
6801
原创 ElementPlus DateTimePicker日期时间选择器限制可选时间范围（精确时分秒）
如图，虽然11号不能选择，但是点击事件选择框，则可以选择一整天的时间。显然，这样用户体验十分不好，最理想的应该是用户可以选择11号，点开时间选择框`只能选择当前之后的时分秒`。在网上找了很多方案，发现全是旧版elementUI的，好像elementPLUS把selectableRange已经去掉了，而文档中也没有明确指出限制时分秒的属性，
2023-03-11 23:27:46
14525
11
原创 vue3中使用echarts初次渲染图表十分小的问题及解决方法
项目场景：vue3中引入了echarts图表，在onMounted中初始化图表。vue3中使用echarts初次渲染图表十分小的问题及解决方法
2023-03-08 16:26:53
2802
1
原创 jsx文件eslint报错 Parsing error: Unexpected token ＜ eslint
最近在使用react native开发app的发现一个问题：报错详情：可以看到，这是jsx的正确写法，并没有语法错误，但是eslint还是报错，大致意思就是意外的符号，可以大概推断是eslint没有正确解析jsx语法造成的，虽然程序可以正常运行，但是对于强迫症来说，确实受不了。
2023-01-05 19:02:48
4656
原创 【前端开发】CSS BEM命名规范
BEM其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。通过bem规范来命名元素，可以使得我们对于元素的命名更加规范，见名知意，便于项目后期的维护和样式提取。这是饿了么官网的卡片组件的代码，我们来分析以下这个组件的命名。首先对于BEM中的，更高级别的抽象或组件，这里是，表示饿了么的card卡片组件。Element代表 block 的后代(或者组成部分)，用于形成一个完整的 block 的整体。对于，它的Element有卡片头部、卡
2022-11-27 12:54:22
688
原创 vue3新一代状态管理器 — pinia的学习与使用
最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑，也可以直接在store实例上调用action。相比较于vuex，pinia去除了mutation，同步和异步操作都通过actions，并且没有了module的概念，defineStore会创建一个新的store。我们也可以在定义常规函数时通过 this 访问到整个 store 的实例。
2022-11-26 09:00:00
3967
原创 vue2升级vue3的新变化
vue 作者（尤大）在2022-2-7起宣布 vue3 正式作为默认版本，vue3目前也是可以投入生产项目中了，vue3 + vite + TS也是当前比较流行的配置。本篇博客主要记录一下相比较于vue2，vue3的新变化。
2022-11-24 22:16:34
3872
原创 下一代Ajax技术 — Fetch的学习与使用
Fetch被称为下一代,采用来处理数据。是一种简洁明了的API，比更加简单易用。Fetch 是一个现代的概念，等同于 XMLHttpRequest。它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。注意，Fetch是JavaScript提供的原生API，所以是可以直接使用的。
2022-11-23 13:03:40
1303
原创 【TypeScript】TypeScript学习 — 泛型
记住，这些类型变量代表的是任意类型，所以使用这个函数的人可能传入的是个。使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。你应该会记得之前的一个例子，我们有时候想操作某类型的一组值，并且我们知道这组值具有什么样的属性。这样的话，identity只能接收number类型的参数，接收其他参数是会报错的。我们需要传入符合约束类型的值，必须包含必须的属性，即包含length属性的值。泛型类指的是实例部分的类型，所以类的静态属性不能使用这个泛型类型。
2022-11-22 20:42:25
139
原创 微信小程序最新用户头像昵称获取规则调整应对措施（2022）
以前通过wx.getUserProfile获取用户信息，用户点击同意以后，便可以直接获取相关信息，但是官方最近做出了调整，直接将头像和昵称使用默认值填充了，所以我们无法直接获取用户的信息了，需要新增一个页面用于用户自定义头像和昵称。获取到的头像地址是一个临时地址，并不是长期有效的，我们需要将这个地址对应的文件存到自己的服务器上或者云存储中。就是设置button的open-type为chooseAvatar，当用户点击时，就会触发“修改头像”事件。中，因为当前仅仅只是修改该了data中的数据。
2022-11-20 12:49:13
4540
6
原创 JavaScript算法 — 二叉树遍历
和前序遍历思想相反。先序是使用push往res数组后面加数据，二后序是使用unshift往数组前面加数据。先序：“中 - 左 - 右” 0137849256。中序：“左 - 中 - 右” 7381940526。后序：“右 - 左 - 中” 7839415620。调用递归的位置不同，结果分为三种。
2022-11-11 21:00:15
2795
1
原创 设备像素、css像素、设备独立像素之间的区别？
在css中，可以通过-webkit-device-pixel-ratio，webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行。在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。，包括了css像素，比如:css像素，只是在android 机中，css像素不叫 “css像素了”，而叫“设备独立像素”。设备像素的大小是固定的，是不可变的。
2022-10-26 08:00:00
296
原创 JavaScript数组和树互相转换
先把数据转成Map去存储，之后遍历的同时借助对象的引用，直接从Map找对应的数据做存储。在前端业务场景中，将数组转为树型数据结构说经常会遇到的需求。相比于递归，非递归具有更高的性能。
2022-10-11 12:18:48
896
原创 深入学习JS：作用域与执行上下文
2、创建作用域链：在执行期上下文的创建阶段，作用域链是在变量对象之后创建的。当被要求解析变量时，JavaScript始终从代码嵌套的最内层开始，如果最内层没有找到变量，就会跳转到上一层父作用域中查找，直到找到该变量。可以看到，在全局作用域中，无法访问函数作用域中的age变量，但是在函数作用域中却可以访问全局作用域中的country变量，因为全局变量在任何地方都可见。1、创建变量对象：首先初始化函数的参数 arguments，提升函数声明和变量声明（变量的声明提前有赖于var关键字）。）区域，即函数作用域。
2022-09-16 09:57:15
301
原创 【Echarts】自定义提示框tooltip样式，实现点击路由跳转
后来搜索了相关的解决办法，我采用了一个比较简单的方法，在vue中定义一个路由跳转方法，将该方法挂载到window上，这样模板字符串就可以直接调用路由跳转的事件了。修改echarts提供的默认tooltip样式，并且点击tooltip中的菜单能够实现路由跳转 😑。这里formatter的返回值是一个字符串，用于生成HTML模板（也就是我们自定义的内容）。因为该方法直接挂载到了window上，所以字符串模板中的HTML也可以直接调用。需要注意的是，我们返回的模板字符串并不能使用vue的data数据和指令（
2022-09-13 14:58:44
2120
原创 【JavaScript】Generator函数
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
2022-09-08 08:00:00
275
原创 【前端】webpack5使用webpack-dev-server实现热更新和代理
【前端】webpack5的配置及基本使用。【前端】webpack5常用loader和plugin。今天我们来看一下webpack-dev-server，它是什么呢？大家有没有发现，在前面两篇博客的例子中，我们每次修改完js文件后，都需要再次打包，然后再用浏览器打开生成的html文件。但是我们在使用vue-cli开发项目时，一修改文件，就会立刻重新编译，然后页面自动发生变化，webpack-dev-server就是完成这一功能的。webpack-dev-server就是一个小型的静态文件服务器。
2022-09-07 08:00:00
2950
2
原创 【前端】webpack5常用loader和plugin
可以看到，loader和plugin非常多，并且配置起来也并不容易，所以我们每次都是直接使用别人封装好的脚手架，然后进行项目开发，例如vue-cli或者create-react-app等常用脚手架。但是了解了基本的loader和plugin作用，对于我们排除错误或者对项目的理解都有很大的帮助。腾讯TNTWeb前端团队 - 吐血整理的webpack入门知识及常用loader和plugin。
2022-09-06 08:00:00
1028
原创 【前端】webpack5的配置及基本使用
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在最原始的前端开发中，我们引入js和css等文件都是通过手动地在html中插入script和link标签来达到引用的目的，不仅繁琐，每个文件都需要单独发一次请求，而且容易发生变量冲突的问题。于是提出了JavaScript模块化的概念，依次出现了AMD、CommonJS、CMD、ES6模块化等解决方案。
2022-09-05 08:00:00
898
1
原创 【前端】彻底搞懂HTTP协议
HTTP协议（`HyperText Transfer Protocol`，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传输协议。当你在浏览器的地址框中输入一个URL（www.baidu.com）或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。我们需要获取到服务器上的资源或者请求服务器的接口，都要发送请求（不一定必须是http请求）。
2022-09-03 08:00:00
375
原创 【Vue】Axios取消请求
有的时候我们需要取消axios发出的请求，例如在退出页面时，取消掉仍然在进行的请求。AbortController和CancelToken。CancelTokenAbortController和CancleToken
2022-09-02 15:08:45
2976
原创 JavaScript算法 — 零钱兑换问题
背包问题。构造一个初始全是最大值的一维数组dp，dp[i]就代表兑换i元所需要的最少硬币个数。其中j表示当前要使用的硬币面值。
2022-09-02 09:00:00
502
原创 JavaScript算法 — 全排列
使用递归的思想，每次递归时，携带上一次的不完整数组，直到数组长度等于参数nums的长度，证明已经排列完了，可以存进结果数组了。类似与二叉树的深度优先遍历（dfs）。
2022-09-01 08:00:00
160
原创 Vue项目使用echarts实现图表数据展示
官网有许多图表案例，并且可以直接复制对应的配置代码。对于入门学习，不考虑项目的体积等问题，直接全部引入即可。我看有的教程是直接在main.js中将echarts挂载到vue实例上的，但我感觉在需要使用图表的组件或者页面中直接引入更好。
2022-08-25 09:00:00
2334
原创 解决Vue中ecahrts组件不能自适应问题
vue2项目中使用了echarts图标库来进行数据展示，需要解决图表自适应窗口变化以及菜单收缩后容器变化。
2022-08-15 09:00:00
1283
原创 Vue2 + ElementUI登录界面模板
几乎每个项目都会使用登录页面，这里直接写了一个模板，方便以后直接cv。//模拟异步请求后台接口 登录操作。
2022-08-08 15:45:44
8596
原创 Return the next higher prime number
This challenge is a little bit more complexWrite a function that takes a number (a) as argumentIf a is prime, return aIf not, return the next higher prime number
2022-08-06 16:31:07
89
原创 React学习（七）— 路由react-router
和vue一样，react应用也是单页面应用（spa），所以也需要引入路由来控制不同组件的展示和隐藏来实现不同页面的效果，保持UI与URL的同步。函数会返回一个函数，这个函数暂且叫做navigate，名字随意取，navigate用来实现编程导航的跳转。Link和NavLink都可以实现路由跳转，但是NavLink自身存在一个active的类名，可以在里面设置激活之后的样式。我们使用路由组件包含了App组件，所以应该在App组件中配置路由。例如这里，我设置.active类的样式。......
2022-07-28 09:00:00
1318
原创 React学习（六）— 状态管理Redux
刚开始你可以只有一个reducer，随着应用变大，你可以把它拆成多个小的reducers，分别独立地操作statetree的不同部分，因为reducer只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的reducer来处理一些通用任务，如分页器。方法发送action，参数就是需要传递的action对象，然后reducer接收到action并处理，返回新的state，视图自动更新。将数组展开然后和新增的todo合并，对象同样可以使用扩展运算符达到新增属性的目的。......
2022-07-27 14:46:50
1158
原创 React学习（五）— Hooks
react组件分为类（class）组件和函数（function）组件。class组件是通过继承模版类（Component、PureComponent）的方式开发新组件的，继承是class本身的特性，它支持设置state，会在state改变后重新渲染，可以重写一些父类的方法，这些方法会在React组件渲染的不同阶段调用，叫做生命周期函数。function组件state和类似class组件的生命周期函数的功能，这种api就叫做hooks。灵魂所在。httpshttpshttps。...
2022-07-23 09:00:00
831
原创 React学习（四）— 事件处理和表单
右边handleChange方法这个方法是在类的原型对象上的；而使用bind的函数把这个原型对象方法上的this修改成类实例对象上的this，右边的代码执行完成之后生成一个新的函数，然后把这个新函数放到实例的自身上也就是等式的左边，且给这个函数起了一个名字（左边方法名），这样就能解决原型方法上其他方法调用该方法this指向是undefined的问题了。在vue中，可以使用v-model指令实现表单的双向绑定，但是实际上，v-model只是v-bind和v-on的语法糖，在react中，我们可以直接利用。..
2022-07-21 19:14:40
326
原创 React学习（三）— React State和生命周期
可以看到，类组件和函数组件在State和生命周期上区别还是非常大的，函数式组件需要调用react提供的hooks（钩子函数，非常重要，后面会专门学习）来实现类组件对于的功能。学习过程中，我发现react类组件类似于vue2的选项式api组件，而函数组件则vue3组合式api十分相似。httpshttpshttps。...
2022-07-20 11:35:30
274
原创 React学习（二）— JSX和组件
JSX是全称是（）按照React 官方的解释，JSX 是一个 JavaScript 的语法扩展，类似于模板语法，或者说是一个类似于 XML 的 ECMAScript 语法扩展，并且具备 JavaScript 的全部功能。例如：或者：可以看到，定义的element和函数的返回值既不是字符串，也不是变量，而是。JSX 会被编译为 React.createElement()， React.createElement() 将返回一个叫作“React Element”的 JS 对象。JSX与React.cre
2022-07-09 12:12:07
572
原创 React学习（一）— 第一个React应用
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。React框架的主要优点：使用react创建web应用有许多种方法，这里使用两种比较流行的方式来创建第一个react应用。在上面的html页面中，我们引入了三个脚本文件，分别是：（1）、react.js，React框架的核心文库。（2）、react-dom.min.js，提供与DO
2022-07-08 17:23:24
328
原创 【Vue】事件修饰符
对事件可以添加一些通用的限制。语法：或者简写：vue中，事件修饰符处理了许多DOM事件的细节，让我们不用再花费大量的事件去处理这些烦恼的事情，例如事件冒泡等。阻止默认的冒泡事件。如果不阻止冒泡，那么点击子div时，也会触发父div的点击事件，即两次弹窗。与事件冒泡的方向相反，事件捕获由外到内。此时点击child的div会先触发parent的点击事件，然后才触发child div的点击事件，即由外到内顺序触发。跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行，若不是，则冒泡跳过该元
2022-06-26 16:11:39
422
原创 vue3动态添加路由
有的时候我们需要根据不同的用户身份生成不同的路由规则，例如：初始化vite + vue + ts项目，引入vue-router。目录结构如下，注意这个404重定向，vue3不支持直接使用“*”匹配所有路由了，要使用。初始化路由：现在如果去访问vip路由，则会跳转到404页面。如果需要访问vip页面，那么就需要我们动态地添加vip路由，下面代码实现了添加：此时我们再去访问vip路由路径：可以成功访问了。可以了解到，动态添加路由就是使用了router对象的addRoute方法。有时候可能是添加嵌套
2022-06-17 16:04:54
4930
2
空空如也
<!DOCTYPE html>为什么会影响flex居中？
2021-07-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人