<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[radation的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/radation</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; radation]]></copyright><item><title><![CDATA[缩窄route范围来提速本地打包的尝试]]></title><link>https://blog.youkuaiyun.com/radation/article/details/139683409</link><guid>https://blog.youkuaiyun.com/radation/article/details/139683409</guid><author>radation</author><pubDate>Fri, 14 Jun 2024 16:58:44 +0800</pubDate><description><![CDATA[按预期，笔者使用了同步语句做文件覆盖，webpack的watch不可能会监听到多余的文件变更行为。更具fileChange的判断逻辑，只要x与y的差值小于1000，webpack就能监听到先前的文件变更，触发额外的重新构建。好吧，只能调试webpack的watcher逻辑，看下内部到底干了什么，竟能监听到生命周期之前的文件变更行为。会参与计算，这个buffer变量也就导致了webpack能监听到生命周期之前的文件变更行为。我们假设plugin生效的时间点为x，webpack监听到文件改动的事件点为y。]]></description><category></category></item><item><title><![CDATA[多单页应用的构建优化-按entry拆分构建]]></title><link>https://blog.youkuaiyun.com/radation/article/details/139391841</link><guid>https://blog.youkuaiyun.com/radation/article/details/139391841</guid><author>radation</author><pubDate>Sun, 02 Jun 2024 15:38:52 +0800</pubDate><description><![CDATA[当应用中存在多个单页也就是多个main文件时，排除其中不想打包的main文件，或者指定想打包的main文件，即可实现开发时按enrty拆分构建。运行时构建，可以通过获取变更文件，匹配引用到变更文件的main入口来实现。引用分析，可以通过babel的ast能力去识别import语句去做递归处理，构建引用树，作为变更文件溯源main的依据。多单页应用的仓库体积相对较大，而往往开发分支涉及的改动仅会影响其中的少数页面，因此无论是开发时还是生产时，都有必要去做选择性的前端代码构建。]]></description><category></category></item><item><title><![CDATA[如何代码降重]]></title><link>https://blog.youkuaiyun.com/radation/article/details/133017556</link><guid>https://blog.youkuaiyun.com/radation/article/details/133017556</guid><author>radation</author><pubDate>Tue, 19 Sep 2023 14:05:53 +0800</pubDate><description><![CDATA[本文讨论代码降重策略和长久降重机制角度]]></description><category></category></item><item><title><![CDATA[请求策略库alova小记]]></title><link>https://blog.youkuaiyun.com/radation/article/details/130526881</link><guid>https://blog.youkuaiyun.com/radation/article/details/130526881</guid><author>radation</author><pubDate>Sat, 06 May 2023 14:44:21 +0800</pubDate><description><![CDATA[alova是一个简单编码即可实现特定场景的高效请求的请求策略工具。]]></description><category></category></item><item><title><![CDATA[qiankun用到的沙箱方案小记]]></title><link>https://blog.youkuaiyun.com/radation/article/details/129343996</link><guid>https://blog.youkuaiyun.com/radation/article/details/129343996</guid><author>radation</author><pubDate>Sun, 05 Mar 2023 11:48:17 +0800</pubDate><description><![CDATA[关于qiankun用到的window沙箱方案介绍]]></description><category></category></item><item><title><![CDATA[vue3响应式函数原理分析]]></title><link>https://blog.youkuaiyun.com/radation/article/details/128723535</link><guid>https://blog.youkuaiyun.com/radation/article/details/128723535</guid><author>radation</author><pubDate>Wed, 18 Jan 2023 10:13:52 +0800</pubDate><description><![CDATA[讨论reactive、ref和toRefs/toRef的区别]]></description><category></category></item><item><title><![CDATA[如何用canvas绘制五角星]]></title><link>https://blog.youkuaiyun.com/radation/article/details/128481262</link><guid>https://blog.youkuaiyun.com/radation/article/details/128481262</guid><author>radation</author><pubDate>Thu, 29 Dec 2022 14:19:31 +0800</pubDate><description><![CDATA[canvas绘制五角星]]></description><category></category></item><item><title><![CDATA[如何全局引入js生成的scss代码]]></title><link>https://blog.youkuaiyun.com/radation/article/details/125558817</link><guid>https://blog.youkuaiyun.com/radation/article/details/125558817</guid><author>radation</author><pubDate>Fri, 01 Jul 2022 14:56:50 +0800</pubDate><description><![CDATA[配置option.additionalData，additionalData字符串会转为scss代码，默认插入scss文件顶部。常见场景，某个scss变量需要用js动态生成且在全局scss文件都要用到，此时就可以用该方法实现。]]></description><category></category></item><item><title><![CDATA[递归删除子目录中所有dist和node_modules]]></title><link>https://blog.youkuaiyun.com/radation/article/details/123735368</link><guid>https://blog.youkuaiyun.com/radation/article/details/123735368</guid><author>radation</author><pubDate>Fri, 25 Mar 2022 14:41:47 +0800</pubDate><description><![CDATA[const fs = require("fs")
const path = require("path")
const delDirs = ["node_modules", "dist"]
var shell = require("shelljs")

/** 递归删除当前目录下所有 dist / node_modules */
function del(filePath, root = "") {
  fs.stat(filePath, function (err, stat) {
    if (err]]></description><category></category></item><item><title><![CDATA[yarn unlink 简单使用]]></title><link>https://blog.youkuaiyun.com/radation/article/details/122808321</link><guid>https://blog.youkuaiyun.com/radation/article/details/122808321</guid><author>radation</author><pubDate>Mon, 07 Feb 2022 14:28:11 +0800</pubDate><description><![CDATA[// project 名为 projectA
// package 名为 packageB

// 1. 在packageB 目录下
// 控制台提示 success registered "packageB".
yarn link 

// 2. 在projectA 目录下
// 此时已成功使用本地软链
yarn link "packageB"

// 3. 在projectA 目录下
// 控制台提示 success Removed linked package "packageB".
yarn unl]]></description><category></category></item><item><title><![CDATA[文件去重脚本]]></title><link>https://blog.youkuaiyun.com/radation/article/details/122223988</link><guid>https://blog.youkuaiyun.com/radation/article/details/122223988</guid><author>radation</author><pubDate>Wed, 29 Dec 2021 20:24:30 +0800</pubDate><description><![CDATA[// 使用说明
// 首先在官网下载node http://nodejs.cn/download/ 就可以在命令行使用node命令了
// 然后把这个文件放在在你需要去重文件的目录下 打开命令行到文件所在目录 输入 node fileDeDuplication 即可
const fs = require("fs")
const crypto = require("crypto")
const readline = require("readline")
const path = require("path"]]></description><category></category></item><item><title><![CDATA[diff简述]]></title><link>https://blog.youkuaiyun.com/radation/article/details/122221322</link><guid>https://blog.youkuaiyun.com/radation/article/details/122221322</guid><author>radation</author><pubDate>Wed, 29 Dec 2021 17:50:17 +0800</pubDate><description><![CDATA[while(新前 &lt;= 新后 &amp;&amp; 旧前 &lt;=旧后) {
	四种匹配,不命中就遍历
	和新前匹配的放到旧前之前,把旧node对应位置的项置为undefined
	和新后匹配的放到旧后之后,把旧node对应位置的项置为undefined
}
addFrom(新前, 新后)
removeFrom(旧前, 旧后)


...]]></description><category></category></item><item><title><![CDATA[如何实现手风琴组件高度自适应 + 高度动画]]></title><link>https://blog.youkuaiyun.com/radation/article/details/122048590</link><guid>https://blog.youkuaiyun.com/radation/article/details/122048590</guid><author>radation</author><pubDate>Wed, 22 Dec 2021 15:13:03 +0800</pubDate><description><![CDATA[·

]]></description><category></category></item><item><title><![CDATA[取消请求方法]]></title><link>https://blog.youkuaiyun.com/radation/article/details/121745617</link><guid>https://blog.youkuaiyun.com/radation/article/details/121745617</guid><author>radation</author><pubDate>Mon, 06 Dec 2021 14:10:10 +0800</pubDate><description><![CDATA[rxjs实践解决请求竞态问题
解决请求竞态问题
// 然而rxjs只能解决请求竞态的问题，如果在请求期间修改了listdata数据源(如下所示读取了缓存)，那么页面结果展示依然是错误的
// 最好的方法是对页面操作施加锁，一旦在请求，不能切tab

getList$ = new Subject();

@Watch('filters', { deep: true, immediate: true })
async resetFilters(filter: any) {
  const { startDate]]></description><category></category></item><item><title><![CDATA[敏捷学习-敏捷笔记]]></title><link>https://blog.youkuaiyun.com/radation/article/details/121069633</link><guid>https://blog.youkuaiyun.com/radation/article/details/121069633</guid><author>radation</author><pubDate>Sun, 07 Nov 2021 18:36:09 +0800</pubDate><description><![CDATA[敏捷笔记一、传统项目管理特点1.所有的工作按照计划2.周期长，严格按需求，设计，开发，测试等流程3.变更管理严格，避免变更二、什么是敏捷1.投资回报率，回收期2.满足当前客户的需要3.满足未来客户的需要4.产品适应性，前提是保证人员构成合理5.支持盈利，看重价值三、敏捷宣言1.个体和互动高于流程和工具2.工作的软件高于详尽的文档3.客户合作高于合同谈判4.响应变化高于
一、传统项目管理特点
1.所有的工作按照计划
2.周期长，严格按需求，设计，开发，测试等流程
3.变更管理严格，避免变更
二、什么是敏捷
1]]></description><category></category></item><item><title><![CDATA[如何在单页应用中，不改变路由实现层级下钻功能]]></title><link>https://blog.youkuaiyun.com/radation/article/details/120660175</link><guid>https://blog.youkuaiyun.com/radation/article/details/120660175</guid><author>radation</author><pubDate>Fri, 08 Oct 2021 21:55:36 +0800</pubDate><description><![CDATA[目录背景方案问题
背景
这几天项目遇到一个需求，需要在路由固定的前提下实现层级下钻功能。举个简单的例子，层级A的页面为root/test?title=testA，通过该页面可以跳转到A层级的子层级B页面root/test?title=testB，页面需要根据这个title分别查询各自的数据。
问题在于，此时复用的是同一个router，因此并不会触发生命周期钩子，那么对于刷新的行为，该放在哪里实现呢？
方案
简单粗暴的方法，监听$route.query。同时当下钻行为时，改变query。
除此之外，为了及时更]]></description><category></category></item><item><title><![CDATA[react学习手册]]></title><link>https://blog.youkuaiyun.com/radation/article/details/109491455</link><guid>https://blog.youkuaiyun.com/radation/article/details/109491455</guid><author>radation</author><pubDate>Wed, 04 Nov 2020 18:20:15 +0800</pubDate><description><![CDATA[0.warning

不要修改props
不要直接修改this.state(而是应该使用 setState())
state的更新是异步的，所以state的状态更新时不要同时相互依赖,但是可以通过传入函数延迟更新，这样就解决了

this.setState((state, props) =&gt; ({
  counter: state.counter + props.increment
}));

1.生命周期

componentDidMount()
应该相当于mounted
componentWill]]></description><category></category></item><item><title><![CDATA[css学习2]]></title><link>https://blog.youkuaiyun.com/radation/article/details/108871496</link><guid>https://blog.youkuaiyun.com/radation/article/details/108871496</guid><author>radation</author><pubDate>Tue, 29 Sep 2020 19:34:01 +0800</pubDate><description><![CDATA[1.不常见伪类选择器

:default
指向单选多选框中checked的元素（相当于默认选中）
:empty
指标签内无任何字符串的元素
:placeholer-shown
input提示内容出现时的元素，可以用于修改label选中时的位置（所以为什么不用focus呢？）
:default
指向单选多选框中checked的元素（相当于默认选中）


...]]></description><category></category></item><item><title><![CDATA[快捷键骚操作]]></title><link>https://blog.youkuaiyun.com/radation/article/details/108693444</link><guid>https://blog.youkuaiyun.com/radation/article/details/108693444</guid><author>radation</author><pubDate>Sun, 20 Sep 2020 15:02:16 +0800</pubDate><description><![CDATA[1.选中光标左侧或者右侧的整词匹配
ctrl + shift 按住 按左右
2.光标选中多行
ctrl + alt 按住 按上下或者使用鼠标左键可以让光标选中多行
选中多行后可以使用操作1来选中多个长度不一的单词

]]></description><category></category></item><item><title><![CDATA[爱彼迎js规范学习（仅针对个人进行记录）]]></title><link>https://blog.youkuaiyun.com/radation/article/details/108562564</link><guid>https://blog.youkuaiyun.com/radation/article/details/108562564</guid><author>radation</author><pubDate>Sun, 13 Sep 2020 16:46:13 +0800</pubDate><description><![CDATA[1.简写对象方法
const atom = {
  addValue(value) {
    return atom.value + value;
  },
};

2.简写对象属性
const lukeSkywalker = 'Luke Skywalker';
const obj = {
  lukeSkywalker,
};

3.能不用var尽量不用var
4.不要直接调用Object.prototype方法(因为怕被自身带有的函数所覆盖)
// 更好
const has = Object.prot]]></description><category></category></item></channel></rss>