简单实现滑动滑块完成验证

偶尔会遇到PM提的需求,要加入滑动验证,但是不想使用付费的第三方验证,想就在前端实现滑块验证即可,
就这一段时间遇到两次这个需求了,就整理一下构思和部分伪代码逻辑。

不会牵扯到复杂的人机验证部分,所以如果需要考虑人际校验,还是推荐你选择靠谱的第三方行为验证,不要自己瞎折腾,本例只是一个面子工程。

阅读全文

谈一谈 JavaScript 中的闭包

函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起构成闭包(closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中,每当函数被创建,就会在函数生成时生成闭包。

先拿 MDN 上的一个简单的 🌰 来说:

1
2
3
4
5
6
7
8
function init() {
var name = "Mozilla"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数,一个闭包
alert(name); // 使用了父函数中声明的变量
}
displayName();
}
init();

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。
displayName() 是定义在 init() 里的内部函数(仅在 init() 函数体内可用),它没有自己的局部变量,
然而它可以访问到外部函数的变量,所以 displayName() 可以使用父函数 init() 中声明的变量 name

阅读全文

关于 ES6 Class 继承中 Constructor 的整理

今天在和小伙伴聊天时, 发现对于 ES6 中的 Class 继承的理解我其实还是只是一个模棱两可的状态, 其实也不只是 constructor 有问题其它的部分其实也有问题, 这次先写类的继承之后再看有没有其它没理解的地方

整篇文章搭配食用 阮一峰老师的 ECMAScript 6 入门 - Class的继承 更佳

Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

阅读全文

export { x as x } 中的 as 是什么?

今天在读一个开源框架的时候看到了一行

1
export { installer as VueAxios, service as axios };

然后我就 ? ? ?,以前一直都不知道这个 as,然后就赶紧百度,结果没有一个匹配的结果。

然后就只能从阮一峰老师的ES6入门里边找…

阅读全文

什么是 [Arguments] 隐式参数?

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

阅读全文

map() 和 forEach() 的区别

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

阅读全文

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 的组件库了。

阅读全文