<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Thinking anywhere anytime.]]></title><description><![CDATA[Keep leaning!]]></description><link>https://blog.youkuaiyun.com/cookcyq__</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; cookcyq__]]></copyright><item><title><![CDATA[Vue3 & pinia 的使用]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/138238170</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/138238170</guid><author>cookcyq__</author><pubDate>Mon, 21 Oct 2024 11:46:44 +0800</pubDate><description><![CDATA[随意建个文件并以 use 开头作为文件名，例如：useCounter.js，示例代码如下：useXXX 仅作为一种声明规范，看你心情定义。count: 0,}),getters: {},actions: {})state当作声明 Vue2dataor  Vue3里的响应式数据。getters当作 Vue2/3 里的computed属性。actions当作 Vue2/3 定义methods函数。]]></description><category></category></item><item><title><![CDATA[Telegram——Bot 机器人/小程序入门指南]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/140783565</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/140783565</guid><author>cookcyq__</author><pubDate>Thu, 10 Oct 2024 21:41:45 +0800</pubDate><description><![CDATA[BotFather是所有 TG Bot 的“爸爸”，只能通过它提供的指令来创建与管理 Bot。Telegram 小程序其实就是挂载一个 H5 网站，通过 Bot 关联该网站，我们就可以叫它“小程序(TMA)”了。下面我将会详细介绍如何把一个 H5 网站挂载到到 Bot 中，完成小程序的接入。]]></description><category></category></item><item><title><![CDATA[React & 解释常见的 hooks: useState / useRef / useContext / useReducer]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/132384796</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/132384796</guid><author>cookcyq__</author><pubDate>Mon, 30 Sep 2024 10:42:39 +0800</pubDate><description><![CDATA[React & 解释常见的 hooks: useState / useRef / useContext / useReducer]]></description><category></category></item><item><title><![CDATA[React & 理解 re-render 的作用、概念，并提供详细的例子解释]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/142488099</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/142488099</guid><author>cookcyq__</author><pubDate>Tue, 24 Sep 2024 14:02:08 +0800</pubDate><description><![CDATA[React & 理解 re-render 的作用、概念，并提供详细的例子解释]]></description><category></category></item><item><title><![CDATA[Webpack & 理解 input & output 概念]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/132571646</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/132571646</guid><author>cookcyq__</author><pubDate>Sat, 21 Oct 2023 08:38:58 +0800</pubDate><description><![CDATA[如果还没用过 Webpack 请先阅读再回头看本文。Webpack 的核心只做两件事，输入管理（Input Management）和输出管理（Output Management），什么花里胡哨的插件和配置都离不开这俩概念，带着俩概念去看文档我相信你会有所收获，而不再被密密麻麻的配置搞得云里雾里。]]></description><category></category></item><item><title><![CDATA[Webpack & 基础入门以及接入 CSS、Typescript、Babel]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/133432896</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/133432896</guid><author>cookcyq__</author><pubDate>Sat, 30 Sep 2023 14:00:53 +0800</pubDate><description><![CDATA[Webpack 是一款 JS 模块化开发的技术框架，其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。Webpack 拥有丰富的 plugins / loaders 插件生态圈，可以让 js 识别不同的语言如  .css, .scss, .sass, .json, .xml, .ts, .vue, .tsx 等等，这也让 Webpack 至今仍然在许多项目中仍有一席之地。尽管现在的构建工具百花齐放，如 vite, vue-cli, craco, esbuild, glup, rollup。]]></description><category></category></item><item><title><![CDATA[JS & Lottie web 动画的使用]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131350389</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131350389</guid><author>cookcyq__</author><pubDate>Fri, 22 Sep 2023 07:15:55 +0800</pubDate><description><![CDATA[Lottie 是一款兼容跨平台 Android/IOS/Web 的动画操作库，只需引入一份 JSON 文件便可播放动画。JSON 文件是由一款叫做俗称AE的设计软件通过BodyMovin插件导出的。作为前端人员来说，我们不用关心如何制造这份 JSON 动画文件，是由设计师来提供的。]]></description><category></category></item><item><title><![CDATA[CSS & 实现让最后一排元素向左对齐并且整体要居中的几种方式]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/132382129</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/132382129</guid><author>cookcyq__</author><pubDate>Sat, 09 Sep 2023 23:46:00 +0800</pubDate><description><![CDATA[关于 grid 布局的更多用法可参考文档，这里我们只要了解  grid-tempelate-columns（设定列宽）、 gap（每个组件的外边距） 即可。整体不居中的其实是”容器宽度“与每排组件的宽度总和没有形成等量关系导致的，我们可以给容器设定。然而这种方案的缺陷是，若产品要求每排组件数量从 4个 改为 8 个时，我们又得重新计算。来完成，但带来的问题就是上述所说的，最后一排组件不会向左居中。以下所指的”组件“ = ”子元素“，”容器“ = ”父元素“。本文就到这里，若有更好的方案欢迎指出。]]></description><category></category></item><item><title><![CDATA[CSS & 滚动容器与固定 Tabbar 自适应的几种方式]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/132390014</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/132390014</guid><author>cookcyq__</author><pubDate>Tue, 29 Aug 2023 22:42:18 +0800</pubDate><description><![CDATA[其实，header 不用 fixied 也能达到吸顶效果，其原理是，给容器定高 + overflow 实现自己的滚动容器，但如果使用了错误的单位，比如本文一开始说的。这类动态计算 px 的单位在 IE9 前是不支持的，这里可以考虑借助 JS 提供的 getBoundingClientRect 函数来实现。即保留了原生滚动（不用设置 overflow），也实现了自适应，解决了底部留白的问题。而导致的，下面我将会介绍如何使用其它方案来解决。本文就到这里，若有问题或其它更好的方案欢迎指出。]]></description><category></category></item><item><title><![CDATA[Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131491895</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131491895</guid><author>cookcyq__</author><pubDate>Sun, 16 Jul 2023 22:04:56 +0800</pubDate><description><![CDATA[Rollup工具可以将代码转成不同模块，实现一套代码多端（浏览器/Node）引入。浏览器（代码通过 Script 标签引入）AMD（兼容 requirejs.js 框架）CommonJS（Node.js 代码通过 CJS 方式引入）UMD （浏览器、AMD、CJS 均支持，是目前最常见的模块选择方式）后面会提到每个命令的作用，这里了解即可。]]></description><category></category></item><item><title><![CDATA[JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131497598</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131497598</guid><author>cookcyq__</author><pubDate>Sat, 08 Jul 2023 22:22:59 +0800</pubDate><description><![CDATA[AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。]]></description><category></category></item><item><title><![CDATA[Vue3 & JSX 插槽、v-model 的用法以及 React JSX 的区别]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131440253</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131440253</guid><author>cookcyq__</author><pubDate>Sat, 01 Jul 2023 14:42:49 +0800</pubDate><description><![CDATA[Vue3 JSX 插槽、v-model 的用法以及与 React JSX 的区别。]]></description><category></category></item><item><title><![CDATA[JS & setTimeout/setInterval、requestAnimationFrame 的关系以及回调函数、Promise、async/await 异步操作]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131034411</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131034411</guid><author>cookcyq__</author><pubDate>Wed, 21 Jun 2023 08:34:02 +0800</pubDate><description><![CDATA[掌握 setTimeout、回调函数、Promise/async 异步操作含义]]></description><category></category></item><item><title><![CDATA[JS & 介绍 Babel 的使用及 presets & plugins 的概念]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131256924</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131256924</guid><author>cookcyq__</author><pubDate>Sat, 17 Jun 2023 17:43:08 +0800</pubDate><description><![CDATA[Babel 给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。]]></description><category></category></item><item><title><![CDATA[JS & 原型、原型链，继承，类之间的关系]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131022659</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131022659</guid><author>cookcyq__</author><pubDate>Sat, 10 Jun 2023 10:32:58 +0800</pubDate><description><![CDATA[原型 so easy]]></description><category></category></item><item><title><![CDATA[JS & 事件循环机制、调用栈、堆、主线程、宏任务队列、微任务队列、缓存管理之间的关系]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131034431</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131034431</guid><author>cookcyq__</author><pubDate>Tue, 06 Jun 2023 11:51:36 +0800</pubDate><description><![CDATA[JS 事件循环、异步任务的概念。]]></description><category></category></item><item><title><![CDATA[JS & 闭包、作用域的关系]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131022631</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131022631</guid><author>cookcyq__</author><pubDate>Mon, 05 Jun 2023 22:26:11 +0800</pubDate><description><![CDATA[闭包这词看起来虽高大上，但理解起来却跟纸老虎一样，非常容易理解，闭包指的是一组函数带有引用关系的，换句话说，函数内部访问外部的函数变量或属性就会构成闭包。所以，闭包在 JS 中无处不在。]]></description><category></category></item><item><title><![CDATA[JS & 改变 this 的三大利器：call / apply / bind]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/131022550</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/131022550</guid><author>cookcyq__</author><pubDate>Sat, 03 Jun 2023 20:28:38 +0800</pubDate><description><![CDATA[改变 this 如此简单]]></description><category></category></item><item><title><![CDATA[JS & CSS 关于 Shadow dom 的用法]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/129339230</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/129339230</guid><author>cookcyq__</author><pubDate>Fri, 26 May 2023 09:34:31 +0800</pubDate><description><![CDATA[你是否好奇过，浏览器自带的元素的样式是如何实现的，例如videoinput，又或者在某些网站中看到一些非浏览器自带且没见过的元素？如果你打开 F12 查看定位该元素的信息，你会发现啥都没看到！其实它只是默认情况下被设置隐藏了，这里可以打开控制面板，按住 F1，将勾选即可：这便是 Shadow DOM 技术，如果你看到了一些非原生标签，它也是用到了 Shadown DOM ，下面我将简单介绍它的用法。]]></description><category></category></item><item><title><![CDATA[数学算法&组合与排序]]></title><link>https://blog.youkuaiyun.com/cookcyq__/article/details/128908167</link><guid>https://blog.youkuaiyun.com/cookcyq__/article/details/128908167</guid><author>cookcyq__</author><pubDate>Tue, 23 May 2023 21:17:08 +0800</pubDate><description><![CDATA[组合可以是现实的一切事物、例如 [衣服，鞋子，眼镜...] 等等，也可以表示一组数字 [1, 2, 3, 4, 5] ，从个人的使用角度来说，更多的意义代表的是数字，因此下面都会以数字作为案例。排序是组合的一部分，只是在数学中需要根据’次序‘来区分开称呼。]]></description><category></category></item></channel></rss>