<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sanstu的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sanstu</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sanstu]]></copyright><item><title><![CDATA[低代码平台组件间事件交互]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/130514334</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/130514334</guid><author>sanstu</author><pubDate>Fri, 05 May 2023 20:10:54 +0800</pubDate><description><![CDATA[系统动作和API调用的定义相对比较简单，我们可以在vue组件的methods中进行方法的定义，例如我们可以定义一个request方法用于api的调用，request中调用了我们使用axios封装好的统一的请求方法，request方法支持传入api的urlmethodapi参数等信息。这两类事件为全局事件，我们可以将这些方法放到mixins中，然后在各个组件中进行引用。而对于组件方法，我们需要将组件暴露的方法定义在各个组件的methods中，并在组件加载时进行方法的监听。// TODO})]]></description><category></category></item><item><title><![CDATA[总结低代码海报平台编辑器难点]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/129357959</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/129357959</guid><author>sanstu</author><pubDate>Thu, 16 Mar 2023 14:08:12 +0800</pubDate><description><![CDATA[上篇总结了基础的架构，本篇总结下细节方面的难点。这是目前编辑器页面的原型图。不难看出和市面上大部分低代码平台一样，由三部分组成：左侧组件列表、中间画布区域、右侧属性区域。大致操作流程就是拖动左侧的组件到中间的画布，选中组件，右侧属性面板就会展示与该组件关联的属性。编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成。从中看出组件串联其中，在前面一篇文章中，我们大致分析了整体页面和组件的数据结构，但没有细化。]]></description><category></category></item><item><title><![CDATA[总结如何设计一款营销低代码可视化海报平台]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/128903984</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/128903984</guid><author>sanstu</author><pubDate>Mon, 13 Feb 2023 10:26:30 +0800</pubDate><description><![CDATA[前端低代码]]></description><category></category></item><item><title><![CDATA[裁剪图片原理]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/128377246</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/128377246</guid><author>sanstu</author><pubDate>Thu, 12 Jan 2023 15:36:49 +0800</pubDate><description><![CDATA[前端]]></description><category></category></item><item><title><![CDATA[DOM生成图片原理]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/128377667</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/128377667</guid><author>sanstu</author><pubDate>Fri, 23 Dec 2022 09:09:52 +0800</pubDate><description><![CDATA[前端]]></description><category></category></item><item><title><![CDATA[Vue3组件库项目基础搭建]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/128037762</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/128037762</guid><author>sanstu</author><pubDate>Tue, 06 Dec 2022 11:29:25 +0800</pubDate><description><![CDATA[前端组件库]]></description><category></category></item><item><title><![CDATA[脚手架开发流程]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/127509770</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/127509770</guid><author>sanstu</author><pubDate>Sat, 12 Nov 2022 18:57:55 +0800</pubDate><description><![CDATA[脚手架]]></description><category></category></item><item><title><![CDATA[自研前端监控系统总结(SDK篇)-上报方式]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/127503850</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/127503850</guid><author>sanstu</author><pubDate>Thu, 03 Nov 2022 09:30:51 +0800</pubDate><description><![CDATA[前端监控]]></description><category></category></item><item><title><![CDATA[自研前端监控系统总结(SDK篇)-接口监控]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/127503658</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/127503658</guid><author>sanstu</author><pubDate>Mon, 31 Oct 2022 18:36:23 +0800</pubDate><description><![CDATA[前端监控]]></description><category></category></item><item><title><![CDATA[自研前端监控系统总结(SDK篇)-行为监控]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/127503092</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/127503092</guid><author>sanstu</author><pubDate>Sat, 29 Oct 2022 10:10:23 +0800</pubDate><description><![CDATA[前端监控]]></description><category></category></item><item><title><![CDATA[自研前端监控系统总结(SDK篇)-性能监控]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/127502379</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/127502379</guid><author>sanstu</author><pubDate>Wed, 26 Oct 2022 08:54:03 +0800</pubDate><description><![CDATA[前端监控]]></description><category></category></item><item><title><![CDATA[自研前端监控系统总结(SDK篇)-错误监控]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/127492472</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/127492472</guid><author>sanstu</author><pubDate>Mon, 24 Oct 2022 22:44:57 +0800</pubDate><description><![CDATA[前端监控]]></description><category></category></item><item><title><![CDATA[vue3+vite+ts+koa2构建vue3 SSR项目]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/127408628</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/127408628</guid><author>sanstu</author><pubDate>Thu, 20 Oct 2022 11:32:49 +0800</pubDate><description><![CDATA[vue3 ssr]]></description><category></category></item><item><title><![CDATA[拿起Typescript做一个轮子（五）]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/96719756</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/96719756</guid><author>sanstu</author><pubDate>Sun, 21 Jul 2019 16:11:49 +0800</pubDate><description><![CDATA[扩展接口

需求分析

为了更加方便的使用axios发送请求，我们可以为所有支持请求方法扩展一级接口：

axios.request(config)
	axios.get(url，[，config])
	axios.delete(url，[，config])
	axios.header(url，[，config])
	axios.options(url，[，config])
	axios....]]></description><category></category></item><item><title><![CDATA[拿起Typescript做一个轮子（四）]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/95340371</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/95340371</guid><author>sanstu</author><pubDate>Mon, 15 Jul 2019 20:51:53 +0800</pubDate><description><![CDATA[处理网络异常错误

当网络出现异常的时候发送请求会触发XMLHttpRequest对象实例的error事件，于是我们可以在onerror的事件回调函数中捕获此类错误。

我们在xhr函数中添加以下代码：



处理超时错误

我们可以设置某个请求的超时时间timeout，也就是当请求发送超过某个时间后仍然没收到响应，则请求自动终止，并触发timeout事件。

请求默认的超时时间是0，所以我们首先...]]></description><category></category></item><item><title><![CDATA[拿起Typescript做一个轮子（三）]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/94553129</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/94553129</guid><author>sanstu</author><pubDate>Thu, 11 Jul 2019 11:44:09 +0800</pubDate><description><![CDATA[Url处理

需求分析

把params参数拼接到url上，参数值支持对对象、数组、Date、特殊字符串的处理，丢弃url中的哈希标记，保留url中已存在的参数
我们在src下新建helpers文件夹作为我们之后存放公共辅助函数的地方，在该文件夹下新建url.ts和util.ts文件，url.ts编写对url进行处理的相关逻辑，util.ts编写对数据类型进行判断的相关逻辑。

因为在处理url时...]]></description><category></category></item><item><title><![CDATA[拿起Typescript做一个轮子（二）]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/94398057</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/94398057</guid><author>sanstu</author><pubDate>Fri, 05 Jul 2019 14:10:19 +0800</pubDate><description><![CDATA[编写基础请求代码

我们现在开始编写源码，我们的目标是实现简单的发送请求功能，即客户端通过XMLHttpRequest对象把请求发送到Server端，Server端能收到请求并响应即可。

我们实现axios最基本的操作，通过传入一个对象发送请求，如下：



创建入口文件

先把初始化src下的文件删除掉，然后创建个index.ts文件，作为整个库的入口文件，然后先定义个axios方法并导出，如...]]></description><category></category></item><item><title><![CDATA[拿起Typescript做一个轮子（一）]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/94392129</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/94392129</guid><author>sanstu</author><pubDate>Mon, 01 Jul 2019 16:50:23 +0800</pubDate><description><![CDATA[从今天起我将从零用Typescript重构Axios，不仅可以让我从真实的项目中掌握Typescript，也能让我对一个库的实现有更深刻的掌握

为什么学习Typescript?

最近TypeScript 的火爆程度大有成为下一代前端开发语言的趋势，TypeScript 作为 JavaScript 语言的超集，它为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。...]]></description><category></category></item><item><title><![CDATA[微信小程序生成带二维码图片]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/91048084</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/91048084</guid><author>sanstu</author><pubDate>Thu, 06 Jun 2019 19:01:03 +0800</pubDate><description><![CDATA[一、如何生成小程序分享页面的二维码？

通过后台接口可以获取小程序任意页面的二维码，具体可以参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

通过该接口生成的小程序码，永久有效，数量暂无限制。用户扫描该码进入小程序后，开发者需在对应页面获取的码中 scene 字段的值，再做...]]></description><category></category></item><item><title><![CDATA[在 JS 循环中正确使用 async 与 await]]></title><link>https://blog.youkuaiyun.com/sanstu/article/details/90904852</link><guid>https://blog.youkuaiyun.com/sanstu/article/details/90904852</guid><author>sanstu</author><pubDate>Wed, 05 Jun 2019 17:05:52 +0800</pubDate><description><![CDATA[记录下工作中碰到的问题

准备一个例子

假设你需要在循环中进行请求，在请求返回结果后再进行下一个循环的请求，这里我们使用setTimeout来模拟。



在 forEach 循环中使用 await



一开始我使用的是forEach循环

我期望打印以下内容：


"start"
"10"
"20”
"30”
"end”

但实际打印以下内容:


"start"
"end"
"10"
...]]></description><category></category></item></channel></rss>