聊一下自己 VueJS 项目的编码习惯和风格

横幅

最近在考虑把遍码习惯整理一下,一个良好的遍码习惯可以有效减少一个项目的维护成本,
因为不可能在整个项目的生命周期中,均由最初的开发人员来维护,或者所有的代码都是由你一个人写出来的,
改善代码的可读性,可以让开发人员尽快理解历史的业务代码。

之前也有研究过 ESlint的格式化风格 选择一款适合自己的来规范自己,但是了解的越多,越觉得还是需要团队互相讨论来找一个大家能都接受的妥协结果,所以最后还是选择了 Prettier ,因为我觉得其它两种风格相对来说太严苛了,很多项目都是自己开发并没有多人合作开发的情况出现,所以使用 Prettier 相对来说所自由一些…

阅读全文

ES6 中的 新数据结构 Set & Map

今天在一个需求里边遇到一个使用 MAP 数据结构的场景,就去解了一下 ES6 的新数据结构

ECMAScript 6 内提供了 4种 新结构 Set, WeakSet, Map, WeakMap,虽然已经是5年前的知识了,但是对于我来说还是新🤣

本来想先聊 Map 的,但是仔细看了阮一峰老师的文章之后发现,确实是要从 Set 开始讲

阅读全文

VueJS中 v-bind 的一些修饰符

今天洗澡的时候在听 饥人谷的模拟面试 (五) 的时候,一直觉得这次面试的学生有点差,如果是我来面话可能已经让他回家了,但是 方方老师 很有耐心,在中间问道 .sync 的时候我 ???? 完全没有印象了。

正好自暴自弃了2个月没有更新了,所以复习一下 v-bind 的三个修饰符 [ .prop, .camel, .sync ]

阅读全文

Vue 使用 ref 注册组件的特性

一直以来,我对于 VueJS 中对于使用 ref 注册的组件,在使用 $refs 调用时,为什么有时候是一个 DOM元素/组件实例,是时候会是一个实例数组

所以在很长一段时间内我觉得 ref 注册的的组件在使用 $refs 调用时有很大的不确定性,虽然我的弹窗组件一直都是用的 $refs.modal.open() 来打开的。

直到前一段时间,我在一个场景下想在 v-for 循环渲染的组件下 slot 模板中想使用 ref 注册成一个实例集合来调用时,发现怎么样重写返回的都只是一个组件实例,而不是一个组件实例集合。

所以有了这样一篇笔记。

阅读全文

JavaScript 中的 this 指向问题

今天在群里看到大家在讨论一个问题,就是 this 的指向,并且牵扯到了 letconst 的变量提升,比如说在全局顶部声明的 let 变量能否挂载到 window 下之类的。
还是老流程,先讨论第一个问题,然后再开始牵扯到后续的展开。

this 指向大概分为两种,普通函数内的 this 和 箭头函数内的 this,箭头函数内的 this 其实挺好理解的,主要是因为各种 call()apply()bind()new 影响下的 this 指向问题。

阅读全文

JS 中的各种 for 循环

真是一坑未填又开一坑….现在阶段,for循环有4种,我们先把所有的 for 循环列出,一个一个的聊。

从MDN上边,找到了 四种 for 循环,分别是:forfor...infor...offor await...of

阅读全文

Js数组中的 find/findIndex/some 以及 every

今天写 Demo 的时候突然在想 find()some() 的区别是什么? 都是为了找到数组中的内容啊?他们的区别在哪里呢

其实我在打这行字的时候就突然想起来区别是什么了😂,所以我把标题改了

相对于 some() 方法, 我知道 find() 方法会更加早一些,不知道为何,🤔明明 find() 方法才是更加新的特性( 也许因为子龙提到的因为jQuery?)

所以今天我们来聊一聊 find/findIndex/some 以及 every 这4个使用起来感觉差不多的方法。

阅读全文

ES6 中 Array 的 fill() 方法

fill 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

最近遇到的一个坑,其实也不算是坑,只是自己没有了解清楚就在用了。

以前在业务中声明数组变量时我都是使用的 var arr = [] 来声明,
这次兴起用了一次 var arr = new Array(8).fill([]) 声明并且填充内容时居然翻车了….

阅读全文

NVM 的安装和使用

今天后端同学那边遇到了一个问题,那边跑一个react项目,npm install 直接报错,但是在我这边并没有报异常,后来发现他的 NPM 版本为 3.10.10, 我猜测是 NPM 版本太低的缘故,就顺便看了下 Node 的版本,版本是 v6.10.0, 所以直接给他更新了 NodeJS,正当我以为问题解决了的时候,后端同学又和我说,现在的项目可以跑起来了,但是之前的项目他跑不起来了。

emmmm…..我又过去看了下报错信息,这会问题是 Node 给我更新掉了,版本太高项目跑不起来了….
所以,有了这篇关于 Node Version Manager (NVM) for Windows 的文章

阅读全文

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

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

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

阅读全文