随笔分类 -  前端

html、css、js、webpack相关
如何发布一个 npm 包
摘要：一 背景 在工作时，突然接到经理的一个要求，需要将一个react的高阶组件函数封装成一个npm包。之前从没弄过，当场还是有些懵逼的，但是这毕竟是工作，不能推脱。于是开始了学习、汤坑之旅。最终包发布，线上项目成功使用，虽然导致了一次线上故障，但还是快速地fix掉。吃一堑长一智，记录一下整个发布的过程和 阅读全文
posted @ 2020-05-31 23:33 大芒果哇 阅读(1376) 评论(3) 推荐(1)
webpack-dev-server 使用 react-router 启用 browserhistory 采坑记
摘要：问题的产生 今天下午请假，忙完手头事之后，在家实在无聊，想着从0开始搭建一个 react 的项目。webpack 基本配置之前研究过，没什么大问题。谁想，在 react-router 的配置时出现了个大坑。 router 版本采用最新的5版本。官网提供 browserrouter 和 hashrou 阅读全文
posted @ 2020-05-27 23:45 大芒果哇 阅读(893) 评论(0) 推荐(0)
react修饰器对组件实例ref引用实例的影响
摘要：ref: 获取组件实例的引用，即获取实例的this。 影响原因 当一个组件用了修饰器之后，其ref会被包裹一层，而不能找到真实的this实例。 ref在react组件中，同为关键字，子组件取不到该props 解决方法 在组件外层包裹一层 container,手动绑定ref 指定getInstance 阅读全文
posted @ 2020-03-15 09:43 大芒果哇 阅读(342) 评论(0) 推荐(0)
js实现拖拽
摘要：思路： 1. 元素需要脱离文档流。设置为 position : absolute 2. 鼠标点击时，获取点击的位置距离元素的左边和顶边的偏移量。 3. 鼠标移动，是在父元素中移动,一般是 html，即 document.documentElement。 注意不是在元素中移动 。 1. 获取 鼠标点击 阅读全文
posted @ 2020-03-15 09:23 大芒果哇 阅读(253) 评论(0) 推荐(0)
深入理解 vertical-align 属性
摘要：语法 用来指定行内元素或表格元素的垂直对齐方式 相对父元素的值 baseline 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如textarea，这意味着这些元素使用此值的表现因浏览器而异。 middle 使元素的中部与父元素的基线加上父元素x height（译注： 阅读全文
posted @ 2020-02-29 11:39 大芒果哇 阅读(871) 评论(0) 推荐(0)
深入理解React key
摘要：一 react 组件元素的 diff 算法 二 key 的理解 概述 react 中的key 属性，它是一个特殊的属性，它的出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。 key 的作用 key不是用来提升react的性能的，不 阅读全文
posted @ 2020-02-29 11:26 大芒果哇 阅读(822) 评论(0) 推荐(0)
JS数据类型检测
摘要：typeof 操作符 只能用来检测基本类型的数值。引用类型会统一返回 object。 函数：function 数值：number 字符串：string 布尔值：boolean undefined:undefined 对象：object 正则：function (safari 只能用来检测引用类型，由 阅读全文
posted @ 2020-02-29 11:10 大芒果哇 阅读(177) 评论(0) 推荐(0)
数组去重
摘要：一 双层循环匹配 1. 选择排序 1. 思想： 将标志位的每一项与后面的项进行对比，一致则删除，j 。 3 利用对象key的不可重复性 4 对排序之后的数组进行前后值的对比。 1. 思想 1. 将数组进行排序，遍历数组，将当前项和下一项进行对比，一样则将下一项删除掉。最后return数组。 四 es 阅读全文
posted @ 2020-02-29 10:59 大芒果哇 阅读(204) 评论(0) 推荐(0)
ES5继承
摘要：1 构造函数继承 2 原型链继承 3 组合继承 4 组合继承优化 阅读全文
posted @ 2020-02-29 01:18 大芒果哇 阅读(167) 评论(0) 推荐(0)
两栏布局
摘要：常用的后台布局方式。左侧固定，右侧宽度自适应屏幕。 实现方式 1. BFC。运用 BFC 不和 float 块重叠的特点 2. position 布局。right 块 absolute,让 left 为right的宽度 3. 自适应布局。right 不设置宽度。用 margin 撑开左边边距。 4. 阅读全文
posted @ 2020-02-29 01:15 大芒果哇 阅读(204) 评论(2) 推荐(0)
图片在容器内上下左右居中对齐
摘要：一 父元素和居中子元素的宽高未知 1. vertical align middle处理居中 思路解析： 1. span高度设置100%,确定他的基线是底部margin。父元素的基线也是底部margin。 2. span 设置middle。span 的横向中心与父元素的基线+ 0.5x height 阅读全文
posted @ 2020-02-29 01:10 大芒果哇 阅读(818) 评论(0) 推荐(0)
函数节流和防抖
摘要：函数节流 限制一个函数在一定时间内只能执行一次。忽略在当前时间段内其他的事件触发。 1. 使用场景 1. 如鼠标的滚轮事件。 2. 高频输入的远程搜索输入框。 3. 表单确定按钮的点击处理事件。 2. 代码举例 1. setTimeout 2. 判断本次与 上次执行 的时间间隔。在wait时间段内， 阅读全文
posted @ 2020-02-18 23:33 大芒果哇 阅读(129) 评论(0) 推荐(0)