TIP
不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。

这段时间总算是得空可以把早些时候快速开发时期挖的坑填一下了，所以准备着手改造一下前人遗留下来的 useTable 这个组合式函数。
期望可以在使用 useTable 的时候可以正确推导出来 tableData 和 queryParams 对应的数据类型。

一开始的改造非常顺利，使用泛型可以正确的推导出来我需求的属性类型，直到我遇到了下面这两个TS告警：

Cannot assign type 'T[]' to type 'UnwrapRefSimple<T>[]'. ts(2322) 
不能将类型“T[]”分配给类型“UnwrapRefSimple<T>[]”。ts(2322)

Argument of type 'T' is not assignable to parameter of type 'UnwrapRefSimple<T>'.ts(2345)
类型“T”的参数不能赋给类型“UnwrapRefSimple<T>”的参数。ts(2345)

当然可以选择简单暴力的使用 as 来解决这个问题，但是我总觉得是不是有一些其他更好的方式来解决。

因为长者的逝世，最近不断有同学在问：应该怎么做站点置灰(去色)的需求。一般来说我都会转发张鑫旭大佬的 《小tip: 使用CSS将图片转换成黑白(灰色、置灰)》 这篇文章给对方，文章内详细的描述了应该如何处理。
虽然 filter 属性还是草案阶段，但是几乎所有的现代浏览器都有很好支持，所以可以直接使用 html{filter: grayscale(100%)} 来实现这个需求。

但是今天在社区里面看到有人提到了这样的一个问题请教css网站置灰，排除图片的问题？，需求是使用 filter: grayscale(100%) 使全站置灰之后，如何排除网站中的图片的置灰。

一开始我认为这个需求有一些点不合理，随即答复了可以按照区块去实现置灰，如果要实现这样的需求需要通过遍历来实现，并让他去和PM沟通，具体为什么要实现这样的方式。
但是后来有人补充了通过 :not() + :has() 伪类选择器实现的方式，但是还是有一定兼容性问题的。_{（FireFox 还未支持 :has() 伪类选择器_2022年12月）}

前几天写 flex 容器宽度被内容撑开的问题 查文章的时候，看到了一篇 flex:1 到底代表什么?，确实很多时候只是知道 flex:1 的作用，并不清楚他具体代表了什么。
和那篇帖子一样，我原先理解的也是 flex:1 应该是 flex:1 1 auto 的简写。因为设置了 flex:1 之后就可以让容器扩张了。既然 flex 的默认值是 0 1 auto 那么理所当然的就这样认为了。

看完了这个帖子之后发现其实并不是这样。
简写的 flex:1 其实是 flex:1 1 0%，其中的 flex-basis 的值从默认值变成了 0% ，但是文章并没有说明为什么会这样。

确实这个东西不值得深入研究为什么，只需要知道和理解就可以了。
但，正好昨天在翻《CSS新世界》的时候看到了这部分内容！

最近大屏又开始火了，群里好多人又开始捡起来了数据可视化，我也一样遇到了新得是数据可视化项目，但是这次不是说 ECharts，而是数据大屏上的所谓 “科技感” 容器，比如下图：

可以看到很多的边框，虽然说可以直接让 UI 小姐姐 切给我们出来所有不同规格的背景图片来解决问题，但是就需要 UI 一份一份切给我们，就很麻烦，而且占用首屏加载的资源。
我就想是否可以用一些精灵图来完成，或者一些简单的边框可以直接使用一些 CSS 的奇技淫巧来完成。

我从花瓣上找了一些示例，然后通过CSS复现，接下来上实例

去年就开始说要更新博客主题了，拖到现在终于有点空闲时间和动力了，相信大家已经使用过 Hexo 了，安装之类的我都不多废话了，直接开始。

想要自定义一个 Hexo 主题大概需要了解一个 模板引擎，Hexo 内置了 Swig，我所用的是默认安装的 EJS，反正都差不多，都提供了一些模板语法，书写还是按照Js的方法来的。
然后先按照文档创建完主体目录结构和模板组件，就可以开始开发了，我比较偷懒没有使用 yeoman + generator-hexo-theme 来创建，直接复制了原先的 landscape 主题。

哦，对了！还要选择一个CSS预编译器，我还是没有选择适用了默认安装的 Stylus，你也可以按照习惯去安装，并且 install 对应的 Hexo 插件。

在小程序中发送网络请求，需要使用微信提供的API，提供了5种：

• 普通 HTTPS 请求（wx.request）
• 上传文件（wx.uploadFile）
• 下载文件（wx.downloadFile)
• WebSocket 通信（wx.connectSocket）
• UDP 通信（wx.createUDPSocket）

一般项目中使用频率最高的是 wx.request 和 wx.uploadFile

需要注意的是，小程序只可以跟指定的域名进行网络通信，需要事先设置通讯域名（服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置）。

可以查看 配置流程 了解一下具体注意项。

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

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

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

该来的一天还是来了，两年前立的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 被提上来，这就很头疼了。

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