- 博客(19)
- 收藏
- 关注
RSS订阅原创 Object.defineProperty()在Vue中实现数据监听得调用逻辑
很早就知道vue是通过Object.defineProperty实现响应式，但是一直对响应式得调用逻辑很模糊，自己看Watcher、Dep准是有一点似懂非懂，今天自己参考Vue源码实现了简化版的响应式。以Vue单个组件渲染过程为例，Vue首先会实例化一个watcher对象（渲染watcher），然后将组件中data函数返回的数据进行响应式处理（调用函数defineReactive() ），响应式处理函数如下图（超简化版）： defineReactive函数中实例化一个Dep，dep中有一个容器，用
2022-01-05 11:53:04
478
原创 webpack gzip压缩CompressionWebpackPlugin插件相关配置
CompressionWebpackPlugin示例：module.exports = { plugins: [ new CompressionPlugin({ test: /\.js(\?.*)?$/i, }), ],};配置项：test：匹配[string|RegExp|Array<String|RegExp];include: 匹配[string|RegExp|Array<String|RegExp];exclude: 不匹配[Stri
2021-12-20 10:40:46
1362
原创 webpack配置polyfill 按需引入配置踩坑记录
文章目录polyfill 按需导入ES6语法转换polyfill 按需导入ES6语法转换1、我们在webpack打包得过程中都会遇到ES6语法转ES5的问题，而ES6转ES5分为两部分，一部分是let、箭头函数等语法转换； 另一部分是ES6新增像Promise、async等方法的转换。2、语法转换配置简单如下：3、新增方法转换如下：当然记得提前下载对应的依赖4、在通过上图配置转换ES6语法有一个问题，转换后的内容引入全部新增语法，而实际开发中你可能只用到了一小部分，这会造成不必要的资源浪费
2021-12-15 20:01:47
2180
原创 webpack学习第二天-代码分离
代码分离：当项目太大时，为了首次加载得速度，我们可能会需要模块得按需加载和分模块闲时加载，此时就需要代码分离。代码分离得方式：多入口打包：使用entry配置手动分离（缺点：不同入口使用重复得模块会被分别打包）因为多入口打包会有公用代码重复打包得问题，所以需要配合Entry dependencies 或者 SplitChunksPlugin提取公共模块，该配置会让打包后生成一个公共部分模块，示例如下：entry: { index: { import: './
2021-12-09 09:39:49
501
原创 webpack 学习第一天 assetModules 和 source-map的基础配置
webpack基础配置之assetModules和source-map
2021-12-08 09:41:44
159
原创 element ui Table组件内容自适应的情况下实现表头相对页面固定
一、element ui Table 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。此时有一个弊端，如果页面布局内容较多，会出现两个滚动条，一个table的一个页面的，我们的需求是页面高度随着数据数量而自适应撑开，而不是固定table视窗的高度二、效果图对比如下三、实现步骤1、首先监听页面滚动事件、因为滚动事件触发太过频繁我就带了500毫秒的节流mounted() { window.addEventListener('scroll',
2021-07-12 19:37:33
1740
1
原创 JS各数组循环方法得区别及不同应用场景
1、forEach()语法：（来自mdn文档）// Arrow functionforEach((element) => { ... } )forEach((element, index) => { ... } )forEach((element, index, array) => { ... } )// Callback functionforEach(callbackFn)forEach(callbackFn, thisArg)// Inline callback
2021-05-13 02:16:41
567
原创 路径资源统一处理、加工、拼接方法
1、不知道大家有没有遇到同样的问题，后台接口传来的图片资源有带http的资源前缀，也有三方库返回的不带http资源前缀，而且后台换一次人，多张图片资源有传字符串用逗号分隔的，也有用数组格式传的，而且多张图片同样有带http，也有不带http的，且该问题往后上传的图片同样存在这个问题（原因是移动端和后台管理传的时候没做统一），之前同事简单封装老出问题，后来自己重写方法，方法如下：2、注意事项：该方法如果在html部分调用，可能会出现在imgUrl资源加载完成之前调用，就会执行最后else部分console.
2021-03-18 15:46:21
108
原创 iview/viewUI库组件封装学习——Card
今天看card组件源码，代码行数较多，整体放到最后，感兴趣的朋友可以先大概看后面的代码部分，然后返回阅读内容分析1、该组件相对比较简单，官方文档的四个参数bordered、dis-hover、shadow、padding皆为样式参数，可直接查看官网文档了解样式参数的使用，不过文档中未提及可用的两个参数，分别为title、icon，当组件使用时传title和icon时，系统默认title插槽展示，可以快速设置简单卡片的title样式2、通过插槽使用，该组件包含三个插槽，其中两个具名插槽，一个默认插槽，如文
2021-03-05 23:34:56
1189
原创 iview/viewUI库组件封装学习——Affix
基本逻辑：该UI组件是在满足特定条件下触发fixed效果，和css3中得sticky很相近。首先此组件涉及三个主要参数，分别是滚动条的滚动距离scrollTop（window.scrollTop）、组件元素的BoundingClientRect.top 即该组件距离浏览器可视区域的距离，还有组件接收用户参数offsetTop的值，如何保证元素距离可视区顶部为offsetTop的值时将元素固定？BoundingClientRect.top的初始值即scrollTop为0时，当我们滚动滚动条时BoundingC
2021-03-03 00:26:35
785
原创 iview/viewUI库组件封装学习——button-group
1、button-group组件比较简单，就是单纯的包装多个button的盒子，盒子有三个相关属性size、shape、vertical，size分别对应small、large、default；shape参数对应’circle’, 'circle-outline’两个参数，vertical 为boolean类型的参数，上述三个参数都是通过计算属性的class来影响样式展示，源码如下：<template> <div :class="classes"> <
2021-02-26 23:18:12
744
原创 iview/viewUI库组件封装学习——button
代码部分<template> <component :is="tagName" :class="classes" :disabled="disabled" @click="handleClickLink" v-bind="tagProps"> <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon> <Icon :type="ico
2021-02-25 00:18:38
782
原创 iview/viewUI库组件封装学习——icon
致力于提升组件封装思路，向iview组件库贡献大神学习day01：icon组件先上源码，然后总结使用方法和亮点学习<template> <i :class="classes" :style="styles" @click="handleClick"></i></template><script> const prefixCls = 'ivu-icon'; export default { name:
2021-02-23 22:48:39
1158
原创 js金额格式化方法，包括加千分符、小数后2位，不足补0
今天分享一个常用格式化金额的方法我自己用了带千分符号，前保留2位小数的，需要注意，小数是采用截取的方法相当于Math.floor的效果，代码如下：moneyFormat(num) { if(Number(num).toString() !== 'NaN') { //添加千分符 let _n = Number(num).toLocaleString() if(_n.indexOf('.') !== -1) { _n = _n + '00' } else { _n = _n +
2021-01-22 22:51:18
876
2
原创 uni-app项目uni.uploadFile多文件上传时适配微信小程序记录
以前使用uni-app提供的异步api一直都用系统提供的使用方式，将回调写到success：函数里面，今天遇到图片上传的问题，且微信小程序不支持files参数，为了实现多张图片同时异步上传，且当所有图片上传成功时执行回调函数，将系统api包装如下：upload(img) { return new Promise((resolve, reject) => { uni.uploadFile({ //参数可查看官方文档 url: 'https://dev.upload/upload',
2021-01-18 00:00:14
3145
原创 简单数据校验函数封装
数据校验是项目开发中经常遇到的问题，为了项目的精简，所以自己对基本的数据校验做简单封装。代码如下：class Formvalidate { constructor(rules) { this.rules = rules; }//不为空的校验规则 requirde(val = '') { return val.length > 0; }//最小长度为6的校验规则 minlength(val = '') { return val.length >=
2021-01-17 19:27:58
229
原创 元素position，且子元素全部position：absolute时父元素高度无法自适应时解决办法
今天遇到父元素高度无法自适应子元素的高度问题，试了各种清除浮动都无效，各种百度才弄明白。问题描述：父元素有position：relative ；两个子元素都是position：absolute；（因为经常念叨父R子A习惯性布局）；中间试了各种清除浮动的办法，均无法使父元素产生高度；产生原因：因为position：absolute会脱离标准流，所以父元素无法自适应子元素高度，而清除...
2020-03-24 18:20:57
7671
原创 JS拖拽不流畅、鼠标滑动太快导致拖拽物脱离鼠标问题
###拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；###问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，###解决方法： 将mousemove...
2020-03-02 10:04:42
10528
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人