使用VueJS的计算属性监听DOM元素属性的问题

今天在写一个模拟微信的聊天组件的时候,需要获取消息列表的滚动条高度,来实现每次发送接受消息数据时,自动滚动到列表末尾。
当然就想到了用 Computed 属性来计算容器的 scrollHeight
然后就发现一开始滚动条会定位到列表最后,但是测着测着就发现怎么超出了一定高度范围之后就不会滚动到列表末尾了,而是固定在了一个值。

阅读全文

什么是 [Arguments] 隐式参数?

这段时间总是看到有人提到 arguments 隐式参数, 并且在 方方老师 的面试经中也提到了这个词,但是好像很多人不知道怎么一回事。
确实在 ES6 普及之后,有了 ... 展开运算符之后就很少有用到 arguments 了,并且我在写这篇文章之前还总是拼错单词,因为我喜欢自己定义 parameter 形参…

阅读全文

map() 和 forEach() 的区别

一直以来没有整理查阅过数组的原生方法,所以对什么时候用 map, 什么时候用 forEach 并不是很明确,完全看心情。
只是知道 map有返回值而 forEach 没有需要自己操作,所以今天准备好好梳理一下记录下来。

阅读全文

「 TypeScript 笔记 」 楔子

这两天同时写 3 个项目,脑子有点乱,每天白天写一个晚上另外写一个,第二天可能就是第三个项目,所以每天上午到公司之后有大概 1 个多小时就处于梦游的状态,就等着群里有谁提问题,然后我解决的时候可以把脑回路给转换过来,但是这段时间可能因为疫情的原因吧,活跃的人越来越少了,还是自己写写 demo 把今年要学的 TS 给学起来吧。

本来是想等到 Vue 更新 3.0 的时候再学的,但是感觉可能等到 3.0 出来了应该要是下半年了,如果上半年就只学习 React,不配合 TS 的就有点太浪费了,好多小伙伴就是用 TS 在开发 React 项目。

阅读全文

ESlint的格式化风格有很多种,选择哪一种作为自己的代码格式化风格呢?

这段时间刚刚复工,年前的我负责的一个年会大屏系统公司准备重新整理制作成为商城可售卖版本,然后又来了一个公司服务器租赁的 WebAPP 的项目,
我春节期间的外包项目也没有做完。那么给我自身 CodeReview 的时间就不够了,所以需要一个 ESLint 的通配规则来减少我编写的时候小失误,
虽然有自己的代码书写习惯,但是并没有强制要求自己,一直以来自己的 ESLint 配置仅具有错误预防功能,并没有使用一个通用的格式化风格,一直考虑的是使用 Airbnb config

趁着 CLI 在创建项目下载依赖的时间,我想选择一个规则作为我自己的以后的编码风格,
根据 CLI 给出的提示,默认可以配置的有三种:

阅读全文

使用 npm-check-updates 更新全局依赖提示 No dependencies

今天想起自己一直依赖没有更新全局依赖,就直接在 bash 里边输入 ncu -g 居然提示 No dependencies.
我就纳闷了,打错命令了吗,为啥提示没有依赖?
项目内依赖检查更新是没问题的,但是检测全局依赖就显示没有依赖,换了几个终端还是这个问题。
我怀疑是我全局以来的路径设置错了(我是使用 npm 来安装全局依赖,yarn 安装项目依赖)
查看了 npm 的全局依赖路径发现没错啊。

阅读全文

一年结束,回顾2019

前言

很快啊,2019 结束了,本来是不想写总结的,因为也没有啥可以总结的,毕竟中间离开了前端圈子一段时间,再回来基本都是接触的新东西。

按照我今年的认知来说,其实我从 16 年实习开始,一直在原地踏步,并没有成长多少,而且学的东西乱七八糟,基本都是业务用到了什么就学什么。

从 接触客户了解需求 到 前端 再到 后端 最后 运维,基本上都沾了点,然后除了 CSS 部分玩出了花,其他都是半瓶子水到处乱晃。

从学校离职之后去到成都就还是找的外包公司去作企业网站模板(当时自己也就这个拿手了,投的也大多都是这个类型的公司),所以技术栈就是 16 年学的那些东西。

阅读全文

被忽略的两个 Background 新属性(CSS3)

之前在看一个文章的时候有提到过,background 的这两个属性,确实不常用到,以至于没有几个人知道这两个新属性。
和他们同时期出的 background-size 因为经常用到所以被大众所熟知。

对的,这次我要说的是background-originbackground-clip 两兄弟

阅读全文

鼠标移出时颠倒元素过度效果

今天有一个小伙伴在群里问,怎么让鼠标经过的移出效果和移入效果相反。

比如说
移入的时候先让元素增加宽度,接着增加高度,最后显示内部元素,
鼠标移出的时候,先收缩高度隐藏元素,最后还原宽度。

看了一些回复有些答非所问,或者推荐用 Js 的。
最开始想的是,animation 是不是有一个 direction 属性可以设置反向么,
就想看 transition 是不是也有,但是并没有。CSS transition - MDN
所以就想着用 :hover 来覆盖原先的 transition

阅读全文

使用 webpack 打包时去除注释和控制台日志

开一个坑,今天怎么尝试也都只能在打包的时候去除 console 但是注释还是不会被去除掉。