cookcyq__的博客

随意建个文件并以 use 开头作为文件名，例如：useCounter.js，示例代码如下：useXXX 仅作为一种声明规范，看你心情定义。count: 0,}),getters: {},actions: {})state当作声明 Vue2dataor Vue3里的响应式数据。getters当作 Vue2/3 里的computed属性。actions当作 Vue2/3 定义methods函数。

BotFather是所有 TG Bot 的“爸爸”，只能通过它提供的指令来创建与管理 Bot。Telegram 小程序其实就是挂载一个 H5 网站，通过 Bot 关联该网站，我们就可以叫它“小程序(TMA)”了。下面我将会详细介绍如何把一个 H5 网站挂载到到 Bot 中，完成小程序的接入。

React & 解释常见的 hooks: useState / useRef / useContext / useReducer

React & 理解 re-render 的作用、概念，并提供详细的例子解释

如果还没用过 Webpack 请先阅读再回头看本文。Webpack 的核心只做两件事，输入管理（Input Management）和输出管理（Output Management），什么花里胡哨的插件和配置都离不开这俩概念，带着俩概念去看文档我相信你会有所收获，而不再被密密麻麻的配置搞得云里雾里。

Webpack 是一款 JS 模块化开发的技术框架，其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。Webpack 拥有丰富的 plugins / loaders 插件生态圈，可以让 js 识别不同的语言如 .css, .scss, .sass, .json, .xml, .ts, .vue, .tsx 等等，这也让 Webpack 至今仍然在许多项目中仍有一席之地。尽管现在的构建工具百花齐放，如 vite, vue-cli, craco, esbuild, glup, rollup。

Lottie 是一款兼容跨平台 Android/IOS/Web 的动画操作库，只需引入一份 JSON 文件便可播放动画。JSON 文件是由一款叫做俗称AE的设计软件通过BodyMovin插件导出的。作为前端人员来说，我们不用关心如何制造这份 JSON 动画文件，是由设计师来提供的。

关于 grid 布局的更多用法可参考文档，这里我们只要了解 grid-tempelate-columns（设定列宽）、 gap（每个组件的外边距） 即可。整体不居中的其实是”容器宽度“与每排组件的宽度总和没有形成等量关系导致的，我们可以给容器设定。然而这种方案的缺陷是，若产品要求每排组件数量从 4个 改为 8 个时，我们又得重新计算。来完成，但带来的问题就是上述所说的，最后一排组件不会向左居中。以下所指的”组件“ = ”子元素“，”容器“ = ”父元素“。本文就到这里，若有更好的方案欢迎指出。

其实，header 不用 fixied 也能达到吸顶效果，其原理是，给容器定高 + overflow 实现自己的滚动容器，但如果使用了错误的单位，比如本文一开始说的。这类动态计算 px 的单位在 IE9 前是不支持的，这里可以考虑借助 JS 提供的 getBoundingClientRect 函数来实现。即保留了原生滚动（不用设置 overflow），也实现了自适应，解决了底部留白的问题。而导致的，下面我将会介绍如何使用其它方案来解决。本文就到这里，若有问题或其它更好的方案欢迎指出。

Rollup工具可以将代码转成不同模块，实现一套代码多端（浏览器/Node）引入。浏览器（代码通过 Script 标签引入）AMD（兼容 requirejs.js 框架）CommonJS（Node.js 代码通过 CJS 方式引入）UMD （浏览器、AMD、CJS 均支持，是目前最常见的模块选择方式）后面会提到每个命令的作用，这里了解即可。

AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。

Vue3 JSX 插槽、v-model 的用法以及与 React JSX 的区别。

掌握 setTimeout、回调函数、Promise/async 异步操作含义

Babel 给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。

原型 so easy

JS 事件循环、异步任务的概念。

闭包这词看起来虽高大上，但理解起来却跟纸老虎一样，非常容易理解，闭包指的是一组函数带有引用关系的，换句话说，函数内部访问外部的函数变量或属性就会构成闭包。所以，闭包在 JS 中无处不在。

改变 this 如此简单

你是否好奇过，浏览器自带的元素的样式是如何实现的，例如videoinput，又或者在某些网站中看到一些非浏览器自带且没见过的元素？如果你打开 F12 查看定位该元素的信息，你会发现啥都没看到！其实它只是默认情况下被设置隐藏了，这里可以打开控制面板，按住 F1，将勾选即可：这便是 Shadow DOM 技术，如果你看到了一些非原生标签，它也是用到了 Shadown DOM ，下面我将简单介绍它的用法。