- 博客(13)
- 收藏
- 关注
RSS订阅
原创 React和Vue状态管理的区别
前端实例数据共享，vue有vuex而react则有redux，mobx等等。使用vuex进行状态管理我们现在vue项目，均采用vuex来做全局的状态管理，简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更，下面我们看看在项目中怎么使用它作状态管理，在此之前先看看vuex工作流程图。 ...
2019-06-11 19:46:39
948
原创 vue3 setup学习之[封装element-plus中的table]
上篇文章对element-plus中的搜索条件el-form进行了封装，下面将对elementplus中的el-table表格进行封装，以支持el-table-column以数组类型输入，且支持类似于vue2中自定义操作的render渲染，vue3中使用动态component和h函数来实现，实现效果如下：效果图。
2024-04-11 16:38:22
332
1
原创 js 节流函数原理分析，及call和apply函数的理解
其中args = arguments为函数调用时传入的参数;call和apply函数都是用来改变this指向，唯一区别就是参数不同。如果你将这个返回的函数赋值给某个对象的属性，并通过这个对象来调用它，比如。在JavaScript中是一个动态的值，它基于函数的调用方式。可以有效减少页面的性能消耗和网络传输次数,提高用户的使用体验。如果你直接调用这个返回的函数，比如。的含义取决于你如何调用返回的函数。将指向全局对象（在浏览器中是。，那么在这个新函数的内部，那么在这个新函数的内部，），除非在严格模式（
2024-04-08 17:09:47
284
原创 vue3 setup学习之[封装elementplus中的el-dialog弹窗]
弹窗和表单的封装，应方便业务使用，包括含有form表单的新增和编辑业务，入参包括各种表单元素、校验规则rules、标题等，配置好入参渲染即可使用。后台管理系统中，会经常性的出现各种增删改查业务，表单使用较多的地方。在业务页面中，引用封装好的PageModal组件。其中的modal.config.ts代码如下。PageModal.vue中type.ts。
2024-03-22 14:33:01
308
原创 vue3 setup学习之[mixin]
由于vue3 setup中没有像vue2中的mixins: []混入，因此需要手动实现它 见代码清单form-table.d.ts文件。针对一般的后台管理系统，会在大量的页面中出现搜索查询功能，此时如果需要封装这些表单和查询条件，则需要采用mixin原理来实现了。在页面中改如何使用它呢，在页面中先引入解构后，在组件中即可使用混入的封装的方法和对象。
2024-03-13 17:23:37
375
原创 前端性能优化（分包打包）
当前问题是：webpack2默认配置打包（将使用到的node_modules架包）打到一个文件vendor中去了，导致首屏加载文件大、速度非常慢。当然webpack3及以上版本自身做了优化，使用split已经进行了分包，不需要再做分包处理了。(1) 第一步,在webpack.test.conf.js中生成manifest.jsnew webpack.optimize.CommonsChunkPlugin({ name: 'manifest', filename: 'manifest.js...
2021-09-24 10:33:37
2279
原创 初识Hooks状态
在Hooks中使用状态state，设置状态后，状态并不会同步更新，这时可采用以下三种方案。1 添加一个 副作用（useEffect()）2 使用函数形式设置状态3 使用useRef设置状态
2021-07-15 16:35:33
182
原创 Cli项目兼容ie9及以上浏览器
最近翻看原来的代码，发现在ie浏览器下出现空白，心里想着ie虽然份额在减少，但是技术上能解决当然最好了，于是开始检查配置文件，发现配置文件已有babel-polyfill要解决ie兼容性问题，单单有babel-polyfill还不行，还需要babel-loader安装：npm install -D babel-loader @babel/core @babel/pr...
2020-05-07 11:15:13
517
原创 Webpack实际项目打包文件解析
webpack版本2.6+以上 公共文件采用DllPlugin打包配置写在webpack.dll.js文件内，分为三个模块，打包dll后，修改业务代码就不需要重新打包，提高打包速度。第一个模块为兼容性组件shim.dll.js，它包括ie兼容性组件，热部署刷新组件，支持 react16 所必须组件，支持 antd 所必须组件shim: ["console-polyfi...
2020-05-03 01:20:34
388
原创 前端性能优化（gzip压缩和按需引用）
某次，打包上线后页面需要几十秒才加载出来，看着实在受不了，开始优化页面主要做了以下三点1） cdn缓存js文件，如vue axios vue-router均采用cdn引入。2） element antd等ui框架的组件按需引用 Only import the components you need。import { Button, message } from 'ant-d...
2019-09-16 15:36:17
699
原创 Vue下使用Echart绘制树形关系图谱
某日接到需求说做个这样的关系图前期因为用到echart，所以没有考虑别的d3.js来实现，主要是节点的更新，echart2有refresh来实现，但是在echart4已不存在该方法，于是用setOption来重新渲染Tree数据，同层级之间的距离一直不好设置，如果数据节点过大的时候会出现重叠的烦恼。解决问题1，使用自定义节点图片；解决问题2，当节点数量过多时，初始化节点全在当...
2019-06-25 16:00:49
8363
4
原创 前端读取指定文件夹的文件
在写前端UI文档说明手册时，发现项目中需要弄很多的md文件，用于演示，这时在webpack.base.conf.js中写了一段webpack.base.conf.jsconst fs = require('fs')const fileArray = fs.readdirSync('./examples/docs')/*** * 缓存md文件 * @returns {string}...
2019-06-14 11:20:11
3826
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人