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

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

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

阅读全文

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

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

阅读全文

Js对象 调整属性排序是否有意义

年会终于结束了,忙了一个月,终于可以开始填坑了。

昨天把之前写了一半的 滚动侦测导航 给写完了。

写的途中就有在思考 对象属性的排序问题,

最开始我是直接用数组的下边作为年份,输出的时候会出现一堆空白 item,

然后改成赋值给一个 timeline 对象,以年为属性名,月份为内部数组元素

但是循环输出内容的时候就发现会按照正序的方式去输出属性。
比如我整理好的数据为

阅读全文

年会开发日记03 - WebSocket长连接获取微信签到用户信息

接着 年会开发日记 01 的签到墙,
里边用到了 WebSocket 来实现用户微信扫码签到,然后后端推送签到用户信息到前端,
前端收到数据之后创建元素添加到 3D 墙中。

本来是想直接自己写的,但是有后来又加入了礼品活跃气氛,就要用到用户列表的展示和抽取过程中的随机效果,虽然哪些人获奖是后台返回给我的。
所以这些用户信息需要在多组件内共用,那我就懒得自己写了,就去找了 Vue 的组件库了。

阅读全文

年会开发日记02 - 红包雨

本来想写的,但是手机摔了,X 的后玻璃碎了,看了官网保修 RMB 4,269
有点烦,算了! 不写了,今天晚上咸鱼。

Javascript 滚动侦测导航

一个以前的小项目要改,新增一个根据时间线显示不同月份绩效的需求。
没有设计稿,想了下怎么做出来好看。就有了以下这个想法

左侧显示时间线,滑动会显示不同的年份和月份,
右侧显示不同月份的统计数据。

阅读全文

forEach() 与 Promise()

今天写年会活动页的时候用到了异步记载数组里边的图片,然后按照数组的下标顺序做不同的操作,
所以想循环里边用 await,那就要 Promise 化图片的加载。

可是我问了下群友,好像不能在 forEach 中使用 async/await
但在 for 替换则可以。

所以像探究下为什么 forEach 中不能使用 async/await

开坑未填
2019-12-02

怎么知道依赖包需要安装到生产还是开发环境或者是安装到全局

刚开始接触 Node.js (包管理项目) 的时候很多人都会疑惑哪些依赖是可以装在全局的,哪些依赖是安装在项目里的,安装在项目里的依赖又是怎么分辨是否是要安装在开发环境中还是生产环境中?

小白的时候还不知道怎么搜索关键词,然后就只能看着文档,他们怎么说自己就怎么敲,

上边写的是 npm install vuenpm install,
如果写的是 npm install -g @vue/cli 那么就 npm install -g,
如果是 npm install --save-dev @babel/core 那么就 npm install --save-dev

比如 4 个月前的我就是这样,最近有一些人在群里问,那我就整理了下(原来这不是我笨理解不了,别人也是这样觉得的!)

阅读全文

JavaScript for(let..){setTimeout...}

今天在 Segmentfault 看一篇文章。 里边举例了一个经典的面试题,异步、单线程的问题。
我也只是了解,知道执行结果是什么,但并不是门清。
但看到把 var 换成 let 声明之后就是另外一个结果了,就有点懵。
所以准备写一篇笔记梳理一下 块级作用域

首先来看下这道面试题:

1
2
3
4
5
for (var i = 1; i <= 5; i++) {
setTimeout(function test() {
console.log(i) // 依次输出:6 6 6 6 6
}, i * 1000);
}
阅读全文

如何理解 Call, Apply, Bind?

今天,介绍这两个方法的区别以及一些妙用,还有用法相似的 bind 的方法。

它们最主要的作用,是改变 this 的指向。在平时的工作中,除了在写一些基础类,或者公用库方法的时候会用到它们,其他时候应用场景并不多。

阅读全文