发现我安装小程序开发者工具是18年的事情了，那个时候还没有开始学 vue，算是开始填早几年立的一个 📌Flag 吧。

当时是想给我们的烘焙工作室的公众号做一个配套的营销工具，所以在18年底有去了解，只不过后来只做了一个展示型网站 岁礼气球派对，后来又改版了好几次现在主营是派对布置，好了有点扯远了。

填坑的动力主要是业务驱动，因为现在正好有这个任务安排，在回顾2020也大概提到了。所以今天先开始概括一下没有开发过小程序的前端，对于小程序的一些疑问。

在思否上遇到一个问位运算符的问题 字符串的位运算，是怎么执行的，我也挺好奇的，就是为啥字符串进行位运算的时候返回的结果是 0，索性在解答这个问题的同时把位运算符都整理一遍。

那么先来整理一下位运算符，最后再说明为什么字符串的处理结果为 0

该来的一天还是来了，两年前立的Flag还是到了，现在在跟进项目配套的小程序开发，但对于写惯了 Stylus 的我，真的是太煎熬了，每次都忘记写冒号和分号…
所以就想着翻翻开发文档看 .wxss 支持不支持CSS预处理器的写法，比如 SCSS。明显这是不可能的，官方也没有计划支持，所以还是得自己动手。

大概看了一下大家的解决方案，和我想的一样，使用 Gulp 来自动化构建成 .wxss 文件。

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

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

这段时间项目迭代比较快，所以很多时候对于记录的状态和类型判断我都是使用的 魔术字符串 的形式，但是这样就与代码形成了 “强耦合”， 不利于后期的维护。

例如这样的代码结构：

<!-- 用vue template来举例 -->
<template>
    <table>
        <!-- 其它结构 -->
        <td>
            <!-- 直接使用状态值判断 -->
            <a @click='xxx' v-if='record.status === 0'>操作A</a>
            <!-- 使用数组下标判断 -->
            <a @click='xxx' v-eles-if='record.status === status[1].key'>操作B</a>
            <a @click='xxx' v-else'>其他操作</a>
        </td>
        <!-- 其它结构 -->
    </table>
</template>

特别是最近一整个分类的类型和状态的都变更了，所以在业务逻辑内的魔术字符串也需要一个一个文件去同步修改，大部分的都被替换了，但还有一些零碎的地方没有被修改到，导致不断有 BUG 被提上来，这就很头疼了。

所以我就想者怎么把业务逻辑内的魔术字符串使用一种方式替换掉，最开始我想法是把状态集中起来进行管理

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

var race = {
  protoss: Symbol(),
  terran: Symbol(),
  zerg: Symbol()
}

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

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

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

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

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

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

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

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

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

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

所以有了这样一篇笔记。

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

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