- 博客(301)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 [webpack] webpack 插件大全
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle js 文件。该插件用来测量你的webpack构建速度，是优化你的webpack构建速度的第一步。该插件用来压缩所有文件成一个zip文件，一般用于打包项目。一个webpack插件，用来删除/清理你的构建文件夹。将已经存在的单个文件或整个目录复制到构建目录。
2023-11-28 12:15:02
712
转载 [前端技巧] lodash | 如何正确的 import lodash
通常前端都会导入一些好用的第三方套件，但是有时后导入的套件并非是基于 es module 进行开发，webpack 没办法发挥 tree shaking 的功能，在 import 时一不注意就会载入一堆没有必要的 function。在这篇文章中以 lodash 作为举例， lodash 是个能够帮我们处理各种资料的函式库，减少写一些比较琐碎的程式码。但因为 lodash 在 2012 年就被开源，历史较为久远，可能有多种缘故，导致目前 lodash 本身并不是使用 es module。所以如果在意 bun
2022-06-24 13:56:53
3343
转载 [React] React 如何自定义Hook
https://blog.csdn.net/fengqiuzhihua/article/details/103511209
2022-06-24 11:07:14
727
原创 [React] Antd Form getFieldValue 的使用、DatePicker 禁用日期 disabledDate
在表单中，有时需要根据表单项的不同选择，对下面的表单项进行不同的显示，也就是说，后面的表单项依赖于前面的表单项，这时是可以使用getFieldValue 获取依赖项的值进行判断，从而显示不同的内容比如上面代码，当审核不通过原因选择其他时，显示一个 让用户填写Antd 日期组件的选择比如某个表单项，只能选择某个日期之后的日期.........
2022-06-06 15:25:20
2627
2
原创 [前端技巧] 网站性能优化（FCP、lCP）
网站性能优化FCP(First Contentful Paint)， 首次内容绘制LCP(Largest Contentful Paint), 最大内容绘制打开控制台，选择 lignthouse 可以看跑分修改意见相关文章：被diss性能差，Dan连夜优化React新文档
2022-05-27 17:35:52
2241
原创 [CSS] CSS实现移动的三角边框箭头
CSS实现移动的三角边框 箭头设计稿长这样，交互是点击旁边的 Tab，三角边框移动到对应的位置，讲一下大概的实现，这里的三角边框我用的是两个三角形拼接而成的，直线是Tab-item 的 border-right1、先把直线弄好.tab-item { position: relative; display: flex; align-content: start; align-items: center; cursor: pointer; border-
2022-05-18 17:32:21
457
原创 [CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果一般在官网比较常见这种动效，当鼠标移入图片时可以看到视觉放大的效果，这里用到一个css属性 object-fit: cover;object-fit 属性object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 .activity-content-img{ width: 100%; height: 100%;
2022-05-18 17:11:14
10131
原创 [React] Antd Form.List 的基本使用
[React] Antd Form.List 的基本使用Form.List 为字段提供数组化管理。官网：https://ant.design/components/form-cn/#Form.List<Form.List name='infoList'> {(fields, {add, remove}) => ( <> <FormItem> {gettext('用户填写信息')} <Button
2022-05-07 15:06:55
3544
2
原创 [地图开发] React Hooks 封装高德地图进行地理定位
React Hooks 封装高德地图进行地理定位组件import React, {useEffect} from 'react'import AMapLoader from '@amap/amap-jsapi-loader'import useIsChinese from '@/hooks/use-is-chinese'import {MAP_LANG} from '@/config'import styles from './style.scss'import {CONSTANTS} fro
2022-04-25 14:42:32
2315
转载 [Git] Commit message 编写规范
Commit message 编写规范Commit message 的作用Commit message 的格式Header1. type2. scope3. subjectBodyFooterRevertGit 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。git commit -m "hello world"上面代码的-m参数，就是用来指定 commit mesage 的。如果一行不够，可以只执行git commit，就会跳出文本编辑器，让你写多行。git
2022-04-20 15:54:22
249
转载 [前端面试] CommonJs与ES Module的区别、Tree Shaking
ES6 module 特点：只能作为模块顶层的语句出现import 的模块名只能是字符串常量import binding 是 immutable的ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。下面引入的style.css模块，如果也使用Tree shaking，由于css文件没有导出任何模块，那么就有可能在打包的时候该引入模块就被摇晃掉了，导致bug。CommonJs 导出值是拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染。
2022-04-15 15:06:45
914
原创 [React] 如何在React 项目中添加 favicon.ico
如何在React 项目中添加 favicon.ico一、使用 create-react-app 搭建的项目二、未使用脚手架搭建的项目一、使用 create-react-app 搭建的项目如果将文件放入 public 文件夹，Webpack 将不会处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。<link rel="icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-i
2022-04-14 15:59:55
2790
原创 [微信小程序] 微信小程序使用特殊字体
methods: { onLoad() { this.loadFontFace() }, loadFontFace() { wx.loadFontFace({ family: 'Bebas', source: 'url("https://cloud-minapp-37887.cloud.ifanrusercontent.com/1mdOQVZ9eaLtmlUt.ttf")', fail: console.log, .
2022-02-23 11:31:35
986
原创 [React] create-react-app 实现热更新
一、使用以下命令行下载 react-hot-loaderyarn add react-hot-loader -D或npm install react-hot-loader二、添加 react-hot-loader/babel 进入 .babelrc 文件// .babelrc{ "plugins": ["react-hot-loader/babel"]}三、 在 App.js 中修改为如下代码// App.jsimport { hot } from 'react-hot
2022-02-23 10:30:46
1185
转载 [CSS] CSS 实现卡片翻转效果
css.App { width: 200px; height: 400px; position: relative; transform-style: preserve-3d; transition: transform 1s ease-in-out;}.front,.back { width: 200px; height: 400px; left: 0; top: 0; position: absolute; backface-visibility: h
2022-01-22 11:23:58
763
原创 [微信小程序] wx.navigateBack 返回上一页面传参
微信小程序 wx.navigateBack 返回上一页面传参直接调用上一页setData let pages = getCurrentPages(); // 当前页， let prevPage = pages[pages.length - 2]; // 上一页 prevPage.setData({ subPageResult: "我是结果", }) wx.navigateBack({ //返回 delta: 1 })使用 wxStoragewx.se
2021-12-13 18:45:37
402
6
原创 [微信小程序]在 wxml 文件中不能使用 Array.includes 方法问题
由于wxml里的模板支持的语法有限，在 wxml 文件中不能使用 Array.includes 方法，详情可以参考 微信官方文档解决方法：在wxs 中写一个方法<wxs module="tools"> var includes = function (array, searchElement) { return array.indexOf(searchElement) !== -1 } module.exports = { includes:includes
2021-12-01 11:58:58
4041
转载 [React] 使用Hooks时使用setFieldsValue设置初始值无效的问题
原文链接： https://juejin.cn/post/6844904129253359623 useEffect(() => { if (formConfigListValues.length === 0) { form.resetFields(); } }, [formConfigListValues]); useEffect(() => { if (statusId) { form.setFieldsValue(
2021-11-22 16:54:57
1896
1
转载 [CSS] CSS实现彩色动效按钮
<!DOCTYPE html><html><head><title>Crayon Animate</title><style type="text/css">body { background-color: #747474;}.yam-don-button { width: 300px; margin-top: 100px!important;}.yam-don-button { pos
2021-11-02 14:14:07
573
原创 [React]Day08—使用create-react-app 创建 react应用
[React]Day08—使用create-react-app创建react应用一、创建项目并启动一、创建项目并启动第一步，全局安装：npm i -g create-react-app第二步，切换到想创项目的目录，使用命令：create-react-app hello-react第三步，进入项目文件夹：cd hello-react第四步，启动项目：npm startMac 第一步需要加上 sudo，不然会报错 [permission denied]sudo npm i -g create-re
2021-08-27 16:06:20
305
原创 [微信小程序] 校验表单，滑动到不合格的具体表单项
[微信小程序] 校验表单，滑动到不合格的具体表单项一、具体需求二、实现思路一、具体需求产品提出校验表单时，填写不符合校验规则的，表单项 label 高亮，页面滑动定位到该表单项二、实现思路在校验表单函数，除了wx.showToast()提示用户外，使用wx.pageScrollTo 将页面滚动到目标位置，该API支持选择器和滚动距离两种方式定位，官方文档点我首先要在 input-field 给具体的 id，这个id 根据表单项的具体位置决定，这里写的是比如这里是上线时间 published_at未
2021-08-26 17:56:47
379
原创 [Day.js] 工具类Day.js 的基本使用
工具类Day.js 的基本使用一、Day.js 简介二、使用方式三、常见用法1. 获取当前时间戳2. 格式化时间2. 指定日期一、Day.js 简介与Moment.js 一样，Day.js 是一个轻量的处理时间和日期的 JavaScript 库，两者的API 设计保持完全一样，只要你会Moment.js，那么你就会Day.js特点：和 Moment.js 相同的 API 和用法不可变数据 (Immutable)支持链式操作 (Chainable)仅 2kb 大小的微型库全浏览器兼容二、
2021-08-17 18:37:39
4067
原创 [React] antd DatePicker 时间日期控件，禁用今日之前/之后的日期
官方文档：https://ant.design/components/date-picker-cn/#APIyarn add momentimport moment from 'moment'// 限制当天之前的日期不可选const disabledDate = (current) => { return current && current <moment().subtract(1, "days"); //当天之前的不可选，不包括当天//return curr
2021-08-06 11:26:32
2394
1
原创 [React]Day07—React的 Diffing 算法
[React]Day07—React的 Diffing 算法经典面试题一、 react/vue的key有什么作用？(Key的内部原理是什么？)二、 为什么遍历列表时，key最好不要用index?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
2021-07-28 18:10:52
109
原创 [React]React 生命周期之 getSnapshotBeforeUpdate
[React] React 生命周期之 getSnapshotBeforeUpdate getSnapshotBeforeUpdate() 的使用getSnapshotBeforeUpdate() 的使用getSnapshotBeforeUpdate(prevProps, prevState){ console.log('更新之前获取快照,getSnapshotBeforeUpdate~') return 'Snapshot: abc'}更新之前获取快照，在最后一次渲染输出（提交到DO
2021-07-28 16:08:19
804
转载 [JavaScript] Array.map() 与 Array.filter()区别
两者都是数组原型链中的方法，方法是遍历数组，回调函数对遍历出来的对象进行操作，但两者的返回值有所不同var kvArray = [{ key: 1, value: 10 },{ key: 3, value: 20 },{ key: 2, value: 30 }];var mapResult = kvArray.map((v,i)=>{ return v.value = v.value + 's'})console.log(mapResult)// ['10s', '20s',
2021-07-07 11:20:40
180
原创 [React]Day06—React的生命周期
Day05—React 生命周期一、初始化二、挂载时三、更新时四、卸载组件五、详细介绍1、constructor()2、componentDidMount()3、componentDidUpdate()4、componentWillUnmount5、shouldComponentUpdate()React生命周期图谱一、初始化constructor()二、挂载时当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()static getDerivedS
2021-05-28 09:57:03
201
原创 [React] React 实现的小功能：今天几点下班呢？
今天用 React 实现一个小功能，计算当天下班时间（例如我每天要上够 8 Hours，中午休息时间1.5 Hours）弹性上下班打卡必备<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
2021-05-26 14:58:37
116
转载 [React]Day05—React 表单中受控组件与非受控组件
Day05—React 表单中受控组件与非受控组件一、受控组件二、非受控组件一、受控组件作者：LinDaiDai_霖呆呆链接：https://juejin.cn/post/6858276396968951822在HTML的表单元素中，它们通常自己维护一套state，并随着用户的输入自己进行UI上的更新，这种行为是不被我们程序所管控的。而如果将React里的state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程
2021-05-25 18:29:18
110
原创 [React]Day04—React中类式组件的三大属性之refs & 事件处理
React中类式组件的三大属性之refs & 事件处理一、什么是refs?二、refs 的使用1、string ref 的使用 （React out API）2、回调 ref 的使用 (Before React V16)3、createRef 的使用 (After React V16)三、refs 的总结四、事件处理一、什么是refs?React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render() 返回的组件实例，ref 可以挂到任何组件上，可以
2021-05-25 16:29:57
174
2
原创 [CSS] CSS设置文字两端对齐（表单label常用）
CSS设置文字两端对齐（表单label常用）text-align-last: justify;
2021-05-20 17:13:46
670
原创 [React]Day03—React中类式组件的三大属性之props
React中类式组件的三大属性之一props的使用一、什么是props?二、props 的使用三、props 的总结一、什么是props?当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”二、props 的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
2021-05-18 18:23:50
344
原创 [React]Day02—React中类式组件的三大属性之State
<!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>React 类式组件
2021-05-18 18:09:54
288
原创 [React]Day01—初识React、React中JSX语法规则、React 创建组件
Day01—React中JSX语法规则1. JSX在React中的使用2. JSX语法规则1. JSX在React中的使用在React中使用JSX语法来创建虚拟DOM2. JSX语法规则
2021-04-20 23:38:14
143
原创 [CSS] 让背景图片、背景颜色根据内容自适应
一、让背景图片根据内容自适应.container{ width: 100vw; min-height: 100vh; background-image: url('URL'); background-size: cover; /* background-attachment: fixed;定义背景图片随滚动轴的移动方式 */ background-repeat: repeat-y; padding-bottom: 30rpx;}.conte
2021-04-15 18:01:01
1338
原创 [搞定一面] 快速搞定一面~技术面
一、请问JS中 new 一个对象发生了什么？new 执行的函数，函数内部生成一个空对象 var obj = new Object();将函数内部的 this 默认指向obj var result = Person.call(obj);设置原型链，将obj的__proto__成员指向了Person函数对象的prototype成员对象obj.__proto__ = Person.prototype;判断函数Person的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对
2021-02-23 12:01:05
743
2
转载 [CSS]Grid网格布局学习总结
Grid网格布局目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。一、Grid 与 FlexGrid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex
2021-02-07 17:30:03
580
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人