- 博客(159)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 千万别用 replaceAll | 兼容性问题 | 踩坑记
博主吃了 replaceAll 方法的坑，该方法有严重的兼容性问题，部分手机完全不支持这个方法导致报错。
2024-07-16 19:50:51
634
翻译 前端开发将被 AI 取代吗？
我是 Reactjs 开发人员。所以，当我的老板告诉我们前端开发将被 AI 100% 取代时，我觉挺可怕的。早在 Chatgpt 在整个世界发生大变革之前，他就预言了这一点。现在，每当我使用 Chatgpt 或 Github 的 Co-pilot 时，我有时真的会感到不安，因为这些工具实在太强了。如果它已经可以完成这些任务，那么这些任务就有可能取代开发人员，至少可以取代其中的很大一部分。我知道即使预测成真，也至少需要十年（我的预测）。然而，我的老板预测这将在 2030 年内发生。
2023-11-21 13:26:36
424
原创 什么是代理服务器
代理服务器扮演一个中间人角色，其中，代指的是代表，理就是转发处理，也就是发送和接收数据。因此，。有代理服务器和无代理服务器，如下所示。从图中，我们可以看到，代理服务器是作为信息中转的工具，那它有什么作用呢？...
2023-09-21 18:19:37
6252
原创 vue-loader 结合 esbuild-loader 使用报错，error: Do not know how to load path xxx/xxx.vue
vue-loader 结合 esbuild-loader 使用报错，do not know how to load path
2023-03-18 19:46:47
1514
原创 export default 在 webpack 和 vite 中 treeshaking 效果实践
webpack 和 vite treeshaking 效果
2023-03-17 20:43:35
2280
原创 Vite 创建项目后 eslint 提示错误 HelloWorld.vue has no default export
vite 创建项目 eslint 报错
2023-03-03 22:08:17
1711
原创 【Promise 规范】resolve 和 then 方法主要逻辑
Promise 表示一个异步操作的状态和结果。掌握 Promise，有利于我们更好的运用异步编程。通过学习规范，能让我们更准确地理解 Promise 的底层逻辑。resolve 的主要逻辑如果 resolve 的参数是非 thenable 对象，则直接then 的主要逻辑如果 Promise 是 pending 状态，将 then 的 onFulfilled 方法追加到 Promise 的 onFulfilledCallback 列表后边。将 then 的 onFulfilled 方法追
2022-05-17 11:53:04
1804
7
原创 【express】使用 express 返回 gzip 的两种方式
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2022-03-03 21:34:44
1636
2
原创 vue create 报错 Cannot find module ‘C:\Users\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js‘
问题描述执行 npm install -g @vue/cli执行 vue create project 报错 Cannot find module vue\cli\bin\vue.js解决方法定位到目录 C:\Users\AppData\Roaming\npm\删除以下文件原因可能用户以前安装过 vue cli，重新安装时旧文件还在导致新版本安装失败。...
2021-12-28 16:35:58
7841
1
原创 【antd-vue】 a-tree 点击节点文字展开或收缩子节点
问题描述a-tree 组件默认点击切换图标展开或收缩，如何做到点击节点文字也展开或收缩。解决方法在 onSelect 方法中调用 onExpand 方法<template> <a-tree @select="onSelect" /></template><script>export default { methods: { onSelect(selectedKeys, {node}) { node.onExpan
2021-11-18 00:45:47
5697
13
原创 四个字记住 js 数组 sort 的排序规则
比较函数compareFunction：用来指定按某种顺序进行排列的函数sort(compareFunction(a, b) {...})返回值规则如果返回值 < 0 ，a 排在 b 前如果返回值 = 0 ，位置不变如果返回值 > 0 ，b 排在 a 前前升后降前升后降的意思是：假如前一个参数 a 在计算表达式的前边，则为升序；假如后一个参数 b 在计算表达式前边，则为降序参数 a 在计算表达式的前边为升序sort(compareFunction(a, b) { retu
2021-10-27 11:18:34
264
原创 Vue 的 data 函数里的 this 用法
代码示例const app = new Vue({ el: '#app', props: { id: { type: String, default: '10000' } }, data(vm) { console.log('data', this) // ==> #1. 当前 Vue 实例 console.log('data', vm) // ==> #2. 当前 Vue 实例 return { ne
2021-10-26 00:11:16
13197
2
原创 【css】css 实现填充剩余高度
自动填充高度.html<div class="box"> <div class="header">头部</div> <div class="auto-fill">自动填充</div></div>使用 flex（推荐）兼容性好；只需关注自动填充的 div，无需考虑其他 div 的高度.box { display: flex; flex-flow: column; height: 100%;}.h
2021-10-11 21:21:56
20555
1
原创 【vue-router】push 方法对应的路由组件传参方式
params 方式this.push({name: 'user', params: {id: 'abc'})this.push({path: 'user/${id}')组件const User = { props: ['id'], template: '<div>User {{ id }}</div>'}路由{ path: '/user/:id', components: User, props: true }增加额外的静态参数{
2021-09-28 16:35:57
413
原创 【antd-vue】修改对话框 modal 的样式
问题描述antd-vue 修改对话框 modal 的样式解决方法template 中添加添加一下<div ref="yourModal"></div>:getContainer="() => $refs.yourModal"css 中在类名前加 /deep/代码示例<div ref="yourModal"></div><a-modal v-model="visible" :title="name" @ok="handleOk"
2021-09-27 14:48:44
4117
原创 一图看懂 offsetX，clientX，pageX，screenX 的区别
offsetX vs clientX vs pageX vs screenX
2021-05-21 15:32:31
1895
原创 一行 css 实现竖直间隔线
效果图html<div class="container"> <a href="#">收藏</a> <a href="#">评论</a> <a href="#">点赞</a> <a href="#">分享</a></div>css.container { display: flex; font-size: 14px;}a { text-deco
2021-05-11 00:10:22
606
原创 解决 andoird 和 iphone 微信浏览器h5页面收起软键盘后页面留空白问题
android 版本function windowResize() { var originalHeight = document.documentElement.clientHeight || document.body.clientHeight; window.onresize = () => { var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight //键盘弹
2021-05-10 00:35:33
1205
2
原创 Flex 布局的自适应子项内容过长导致其被撑大问题
问题还原flex 布局中，把其中一个子项设置 flex-grow: 1，可以使它自动占据所有剩余空间，但是当该子项内容过长时，子项长度会被长内容给撑开而出现滚动条。<div class="box"> <div class="item-1">xxxx</div> <div class="item-2"> long content - long content - long content - long content - long conten
2021-02-25 19:47:41
4682
1
原创 妙用 max 和 calc 函数实现元素居中两端等宽自适应
在 css 世界中，有时一句 css 就能实现很强大的功能，这是因为有了函数的存在。底下这句 css 就能够很轻松的实现元素两端等宽自适应padding: 1em max(1em, calc(100vw - 70ch)/2);70ch 表示元素的 width 为 70个字母长度。元素两端的补白宽度为 （屏幕宽度 - 元素宽度）/ 2 ，当补白宽度小于 1em，用 1em 代替。用 max 就是为了指定 1em 为最小补白宽度，防止元素两端宽度消失。div { height: 100px;
2021-02-23 11:53:06
473
原创 img 图片加载错误时显示默认图片
有时我们项目里的图片加载错误时（比如 404），为了友好体验，我们可以用一张默认图片来替代。方法一：用 background 遮住原图片<img src="no-such-pic.png" />img { position: relative; height: 200px; width: 200px;}img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height:
2021-02-09 20:18:38
2963
原创 利用 linear-gradient 函数实现炫酷的动态进度条
linear-gradient 函数linear-gradient 是可以用来创建颜色线性渐变效果的一个函数语法：background-image: linear-gradient(deg, color...)第一个参数为渐变的方向或角度，第二个参数为渐变颜色颜色百分比background-image: linear-gradient(to right bottom, red 25%, blue 75%)0 - 25% 为纯红色，25% - 75% 为红色渐变到蓝色，渐变中心在50%，75
2021-02-07 00:06:16
1092
1
原创 不定高度元素实现高度自适应动画
问题如果元素高度确定情况下，实现动画并不是什么难事。但是如果是不定高度的元素呢？可能很多人第一反应是，给元素加个 ：height: auto可惜的是，这并不会起作用。用 max-height 代替 height思路：先将需要做动画的元素设置 max-height: 0px，overflow: hidden;在事件中给元素添加 max-height: 固定高度（>= 元素的实际高度）<!DOCTYPE html><html lang="en"><
2021-01-21 09:50:35
1645
原创 【编程规范】编程中常见中英文词汇对照
中文英文备注添加add/插入insert/创建create, new强调从无到有保存save/缓存cache/删除delete, remove/修改modify不要使用 change更新update不要使用 change替换replace/提交submit/搜索search常用于搜索框查找find比如查找字符串查找query常用于数据库获取get/...
2021-01-15 16:21:48
1171
翻译 【编程规范】命名变量的艺术
There are only two hard things in Computer Science: cache invalidation and naming things. — Phil Karlton给各种东西命名着实有难度，但合理地命名得到的回报是值得我们付出心思的。你是否曾经见过类似这种代码？const convertObj = (x, y, z) => { const k = Object.keys(x); return k.map((key) => { .
2021-01-05 15:13:56
311
谷歌跨域插件 Allow-Control-Allow-Origin
2020-11-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人