「 设计模式学习 」 L00 开坑贴 & 设计模式概览

设计模式是我在2018年在成都工作的时候听 肉山老师 的直播JavaScript 设计模式 导言的时候就想学习的一个东西,但是一直拖拖拖,买了肉老师的 Chat 从 jQuery 里学习设计模式,但是看了一头雾水,也同样买了肉老师推荐的书《设计模式:可复用面向对象软件的基础》,但是在家里吃灰了半年。
一直想把整个设计模式都了解一下啊,不用吃透,吃个大概明了就可,但是每次都提不起开坑的念头,如果再写成学习笔记的话,学习周期会大大拉长。

但是这在当前项目中的不断迭代中,我遇到了一个问题,就是 项目中的类型和状态管理,所以就想着是否有一个合适的设计模式来解决问题,所以就被逼迫着捡起来了……

阅读全文

项目中的类型和状态管理

这段时间项目迭代比较快,所以很多时候对于记录的状态和类型判断我都是使用的 魔术字符串 的形式,但是这样很 不利于后期的维护,特别是最近一整个分类的类型和状态的都变更了,所以在业务逻辑内的魔术字符串也需要一个一个去同步修改,大部分的都被替换了,但还有一些零碎的地方没有被修改到,导致不断有 BUG 被提上来,这就很头疼了。

所以我就想者怎么把业务逻辑内的魔术字符串使用一种方式替换掉,最开始我想法是使用 链式(变量属性)的方式去使用。

例如在用户下的客户类别中的付费用户那就是使用 user.customer.member.key 去判断是否展示操作内容,但是这样的话,在管理端的用户列表中,去替换用户类型的 keylabel 就比较麻烦(后端只返回用户类型key值,在前端替换为中文名称),因为层级会比较深比如之前的例子 key 就是处于三层,如果一个一个拿出来手动放到一个数组里边有会显得很呆。

就想着是否可以使用一种设计模式来解决这样的问题,但是在快下班的时候怎么样的找不到一个好的方式来描述我遇到的问题。所以只能等回家之后翻一直在书架吃灰的《设计模式:可复用面向对象软件的基础》这本书,想找到一个合适的设计模式……

阅读全文

Symbol() 是个什么东西?

最近在一些 Demo 中经常会看到 Symbol() 这个东西,例如:

1
2
3
4
5
var race = {
protoss: Symbol(),
terran: Symbol(),
zerg: Symbol()
}

就只能记得大概了,就是赋值一个独特的值,但是这个值具体是什么我想不起来了。
所以还是记个笔记加深下印象,省的看了又忘。

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型

阅读全文

📟 树莓派 4B(2GB RAM) 开箱记录

自从我爸妈他们屋子重新装修好了之后,我爸就嚷嚷着要把他的旧电脑搬上楼装起来,但是家里没有多少地方能摆电脑桌了(怕他又和以前一样在书房看着小说抽一整天的烟)。所以趁着双十一,就入手了一个树莓派 4 Model B,准备给他放客厅连到电视上,通过家里人时不时打断他投入看小说的状态。

今天到货了,开始折腾一下….

阅读全文

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 注册成一个实例集合来调用时,发现怎么样重写返回的都只是一个组件实例,而不是一个组件实例集合。

所以有了这样一篇笔记。

阅读全文

JS 中的各种 for 循环

一坑未填又开一坑….

先把所有的 for 循环列出吧

阅读全文

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

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

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

阅读全文

关于 ES6 Class 继承中 Constructor 的整理

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

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

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

阅读全文