- 博客(70)
- 收藏
- 关注
RSS订阅原创 前端项目代码风格及校验统一格式化配置
通过 vite 创建项目自带生成 eslintrc文件，npm 则需要手动在项目创建配置文件.eslintrc文件；tips: 主要支持 vscode 玩家，webstorm 玩家自行探索配置吧～～～～如果项目出现规则冲突以后，需要安装以下插件解决冲突，如果未出现冲突，则可以忽略。通过在项目中配置这三个配置文件，可以校验代码语法、提高项目代码规范、风格统一。
2024-10-29 00:52:33
421
原创 关于 vue/cli 脚手架实现项目编译运行的源码解析
通过解析vue-cli-serve的源码，以上便是 vue-cli脚手架 运用 webpack 进行内部封装，如何实现脚手架内将项目解析打包，加载在内存中，并拉起本地服务，实现本地运行vue项目的流程。
2024-09-11 00:05:51
1333
1
原创 Webpack中的自定义 loader 的简单实现
webpack 中 loader是用于对模块的源代码进行转换（处理）的插件。例如 webpack 中常见的loader， css-loader、babel-loader。关于 loader：loader本质上是一个导出为函数的JavaScript模块，即函数；loader runner库会调用这个函数，然后将上一个loader产生的结果或者资源文件传入进去；自定义 loader函数的接收参数有content(资源文件的内容)、map(sourcemap的数据)、meta(一些元数据)；
2024-08-28 02:02:37
910
原创 关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
2024-08-27 00:30:54
849
原创 Webpack中的 HTTP 压缩
http压缩，是指一种内置在服务器和客户端之间改进传输速度和带宽利用率的方式。http 数据在服务器发送前，通过 webpack配置进行压缩；兼容的浏览器在向服务器发送请求时，在请求头中会添加浏览器自身支持的压缩格式，告知服务器；例如：服务器在浏览器支持的的压缩格式下，直接返回对应压缩后的文件，并在响应头中告知浏览器；i 例如。
2024-08-27 00:06:43
481
原创 Webpack中搭建本地服务dev-server
HMR Socket Server，是一个socket的长连接建立连接后双方可以通信，当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk），通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；webpack-dev-server 是运用另一个node 框架 express开启本地的静态资源服务，和开启Socket服务；
2024-08-10 22:58:28
843
原创 小程序内嵌uniapp页面跳转回小程序指定页面方式
使用微信小程序提供的Api：wx.miniProgram.navigateTo。你需要在uniapp项目中配置相应的页面路径，确保跳转时能正确找到目标页面。你的小程序必须已经正确初始化，并且在合适的生命周期内调用跳转方法。你的小程序必须是通过uniapp构建的，并且支持小程序嵌套。在小程序中嵌套uniapp的H5页面，并使用。
2024-07-22 14:50:53
748
原创 Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置
data() {return {curTab: 0,tabTop: 0, // tab距离顶部的距离},name: '正文详情',}]name: '相关附件',})name: '图文解读',})},// 点击tab滚动事件if(!0 : (data?},// uni页面滚动监听事件// 获取tabs的距离顶部的距离}).exec();},
2024-06-13 19:39:22
1441
原创 React类组件生命周期详解
它使你的组件能够在 DOM 发生更改之前捕获一些信息（例如滚动的位置）。方法，那么 React 会在你的组件更新了 props 或 state 重新渲染后立即调用它。方法，会造成触发一次发生在浏览器更新屏幕内容之前的额外渲染，在这种情况下，即使。返回值：返回你想要的任何类型的快照值，或者是。方法，React 会在你的组件被移除屏幕（进行比较来确定发生了什么改变。进行比较来确定发生了什么改变。：更新之前的 props。：更新之前的 state。：更新之前的 Props。：更新之前的 State。
2024-05-21 00:19:26
1778
原创 移动端设置全局悬浮可拖动图标
/ 全局拖动})})// 记录开始触摸坐标// 记录组件移动前的位置x = 0//当前组件距离左边位置=开始位置(x轴)+（当前触摸点x坐标-开始移动触摸点x坐标）elLeft : 0y = 0。
2024-02-05 16:01:39
645
原创 Element-ui自定义表格头部-添加筛选条件
/ 自定义某列表头为时间搜索return h(props: {placeholder: '请选择排班时间',},on: {},},},// 自定义列表头展示信息return h('span',innerHTML: `值班人员(${type === 'day'?},},},// 表头日期选择},
2024-01-19 14:09:12
2651
原创 vue-quill-editor富文本插入图片改为上传服务器
注意：vue-quill-editor插入图片默认转换为base64，对于项目中使用，如果绑定的变量有插入图片，会造成字符串内容过长，造成请求缓慢，长度过限问题。// 引入Qill插件// 设置字体// 设置字体大小// toolbar工具栏['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线['blockquote', 'code-block'], // 引用，代码块。
2024-01-16 10:07:13
1021
原创 Element-ui合并table表格列方法
可以根据业务中实际需要合并的列数，增加判断，及 property 的字段取值满足自己业务合并列的效果。
2023-11-28 16:47:56
673
原创 React 其他常用Hooks
通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起，在父组件调用子组件的方法时，通过自定义实现，让父组件使用返回的对象；打个比方：搜索过滤，在输入框输入时，对于上w条数据时，会存在卡顿，是由于在搜索的输入事件中，event.target.value更新与过滤出来的数据同时更新，导致输入存在卡顿原因。通过useTransition。useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；
2023-11-07 16:30:23
383
原创 React Hooks解析
比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；等，函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；或者这次修改的state需要依赖之前的state时，也可以使用；函数式组件不可以，因为函数每次调用都会产生新的临时变量；参数：初始化值，如果不设置为undefined；
2023-10-27 16:15:25
450
原创 React-Router路由
useSearchParams函数获取，useSearchParams由react-router-dom库提供的api，该函数返回一个entries对象，通过Object.fromEntries转换成普通对象即可；安装时，选择react-router-dom，react-router会包含一些react-native的内容，web开发并不需要；目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的，但是这样的方式会让路由变得非常混乱，早期的时候，属性：设置匹配到路径后，渲染的组件；
2023-10-19 17:21:07
185
原创 react-redux的connect函数实现
通过context来解耦connect文件中对store的依赖，使connect的独立封装性更好。在入口文件index.js引入。
2023-10-17 11:00:14
452
原创 Redux详解（二）
接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk，相当于对异步操作的reducer处理，例如网络请求。通过Redux Toolkit创建store，对于store的数据使用，与传统的store数据获取方式一样，Redux Toolkit只是在store的初始化与逻辑编写进行了封装。），React官方为解决这一问题，推荐使用Redux Toolkit第三方包将redux逻辑聚合到一个文件中实现，解决上面的问题，
2023-10-16 17:53:16
411
原创 Redux详解（一）
将我们传入的reducers合并到一个对象中，最终返回一个combination的函数（相当于我们之前的reducer函数了）;在执行combination函数的过程中，它会通过判断前后返回的数据是否相同来决定返回之前的state还是新的state；对于多个页面共享的一个数据时，需要定义统一的规范来操作数据，才能使整个数据的变化可追踪；新的state会触发订阅者发生对应的刷新，而旧的state可以有效的组织订阅者发生刷新；清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的；
2023-10-13 17:34:08
257
原创 React编写CSS方式
CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修。CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义；修改成 .module.css/.module.less/.module.scss。配置webpack.config.js中的modules: true。.css/.less/.scss 等样式文件。，在JavaScript中是不识别的；等，就可以直接进行引用；
2023-10-10 16:32:17
494
原创 React过渡动画
对于实现一个组件的显示与消失的过渡动画，可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group库用来完成过渡动画。# npm# yarn。
2023-10-10 16:19:59
423
原创 React的高阶函数
2.高阶函数的意义优点：缺点： Modal.jsx App.jsx4.Fragment的使用在之前的开发中，我们总是在一个组件中返回内容时包裹一个div元素： 如果希望不渲染这层的div，就可以通过Fragment实现，Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点；5.StrictModeStrictMode 是一个用来突出显示应用程序中潜在问题的工具：StrictMode检查项：
2023-09-26 16:18:32
836
原创 React组件化开发二
props/state改变 -------render函数重新执行-------产生新的DOM树-------新旧DOM树进行diff对比-------计算出差异进行更行-------更新到真实的DOM。他们调用render应该有一个前提，就是依赖的数据（state、props）发生改变时，再调用自己的render方法。对于函数式组件需要获取组件中某个dom元素时，通过React.forwardRef,或者在hook中使用ref；函数会在dom被挂载时进行回调，这个函数会传入一个元素对象，自行保存；
2023-09-25 10:15:44
256
原创 React中setState的原理及深层理解
React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化。如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步。setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行。setState方法是从Component中继承过来的。通过setState来告知React数据已经发生了变化。setState设计为异步，可以显著的提升性能。setState的回调。
2023-09-22 17:27:57
415
原创 JSX的基础使用（二）
所有jsx中的属性都在config中以对象的属性和值的形式存储；（箭头函数this不绑定，this默认获取外层this）;存放在标签中的内容，以children数组的方式进行存储；在vue中，通过指令来控制：比如v-if、v-show；如果是标签元素，那么就使用字符串表示 “div”；react从jsx到虚拟dom到真实dom的过程。来做一些事情（比如阻止默认行为），默认情况下，主动执行的事件函数，并且传入相关的其他参数。如果是组件元素，那么就直接使用组件的名称；虚拟DOM（Virtual DOM）,
2023-07-20 23:49:41
114
原创 JSX的基础使用
比如元素的title属性、img元素的src属性、a元素的href属性、元素绑定的class、内联样式的style。不能作为子元素，会报错（not valid as a React child）；null、undefined、Boolean类型。Number、String、Array类型。Object对象类型。
2023-07-15 11:31:23
277
原创 Element ui多选框实现单选且隐藏全选按钮
通过 @selection-change="handleSelectionChange"实现单选逻辑。选中的值永远只有一项。
2023-04-28 14:26:26
536
原创 Babel的深度解析
以上只是是我在学习coderwhy老师的webpack课程中对Babel的简单理解和记录，想要了解更多关于webpack的配置分析及原理，可以去看coderwhy老师的课程。开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；babel做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的原理。Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；
2023-04-16 00:07:19
382
原创 移动端适配方案
的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。viewport的使用方法，viewport配置起来很容易，只需要新增一个postcss.config.js文件，这样在代码中写入的px会自动转换成vw单位，同样可以达到移动端适配的效果。之后我们写css样式的时候只需要正常写css即可，postcss会自动将我们的px转化为rem。
2023-04-03 23:36:45
325
原创 Webpack的source-map
webpack为我们提供了非常多的选项（目前是26个），来处理source-map，选择不同的值，生成的source-map会稍微有差异，打包的过程也会有性能的差异，可以根据不同的情况进行选择；推荐使用 source-map或者cheap-module-source-map ,分别是vue和react使用的值，可以获取调试信息，方便快速开发；会生成一个独立的source-map文件，并且在bundle文件中有一个注释，指向source-map文件；webpack提供的26个值，是可以进行多组合的；
2023-04-03 23:24:51
649
原创 Webpack加载和处理其他资源
在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
2023-03-20 22:46:55
249
原创 Webpack打包原理及浏览器兼容配置
传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）；这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；条件查询使用的是caniuse-lite的工具，这个工具的数据来自于caniuse的网站上；兼容性是针对不同的浏览器支持的特性：比如css特性、js语法，之间的兼容性；
2023-03-06 23:35:33
1260
原创 正则表达式中/g /i /m /e /x /s的用法
正则表达式模式修饰符，用法含义如下：1、/g 表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个2、/i 表示匹配的时候不区分大小写，这个跟其它语言的正则用法相同3、/m 表示多行匹配。什么是多行匹配呢？就是匹配换行符两端的潜在匹配。影响正则中的^$符号4、/s 与/m相对，单行模式匹配。5、/e 可执行模式，此为PHP专有参数，例如preg_replace函数。6、/x 忽略空白模式。这里有值得注意的一点，这些修饰符是可以混合使用的。例如 /i
2022-12-06 21:05:30
796
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人