<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wantingtr的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wantingtr</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wantingtr]]></copyright><item><title><![CDATA[浏览器的存储与缓存机制]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/100559520</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/100559520</guid><author>wantingtr</author><pubDate>Thu, 05 Sep 2019 15:45:33 +0800</pubDate><description><![CDATA[文章目录浏览器存储与缓存机制浏览器存储cookie原理及生成方式cookie的缺陷cookie与session的区别与联系手写cookielocalStoragesessionStoragesessionStorage 、localStorage 之间的区别IndexedDBcache总结区分浏览器缓存机制缓存过程强缓存Expires(HTTP/1.0)Cache-Control (HTTP/1...]]></description><category></category></item><item><title><![CDATA[小程序实现单个卡片左滑显示按钮，并防止上下滑动干扰]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/98221401</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/98221401</guid><author>wantingtr</author><pubDate>Fri, 02 Aug 2019 18:19:29 +0800</pubDate><description><![CDATA[实现类似ios端微信的左滑显示置顶、删除按钮的功能，首先需将按钮部分设为绝对定位，并且right设为负值溢出屏幕。利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。
这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动，需要将整个卡片分为两部分。
&lt;View style={`${positionStyle[index]}`}&g...]]></description><category></category></item><item><title><![CDATA[利用flex布局实现仿微信群的多头像九宫格自适应布局]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/96601275</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/96601275</guid><author>wantingtr</author><pubDate>Sat, 20 Jul 2019 17:11:48 +0800</pubDate><description><![CDATA[利用flex布局实现微信群的多头像自适应布局
微信群聊的头像是多个成员的组合，例如下图。

可以看到根据单个小头像的大小可以分为三类，分别可以看做是整个大头像的98%，47%和31%。所以可以根据单个数组的长度，分别匹配不同的样式。而为了模拟后台返回的多头像接口，需要额外做一个判断，即最多只能显示9张头像。
&lt;div id="app"&gt;
    &lt;div class="avata...]]></description><category></category></item><item><title><![CDATA[利用Canvas实现小程序分享海报的生成与本地保存]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/95361575</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/95361575</guid><author>wantingtr</author><pubDate>Wed, 10 Jul 2019 18:13:31 +0800</pubDate><description><![CDATA[利用Canvas实现小程序分享海报的生成与本地保存
文章目录利用Canvas实现小程序分享海报的生成与本地保存实现过程在组件中渲染canvas使用`getImageInfo`获取canvas的图片资源根据机型适配尺寸将canvas保存成图片其他一些坑canvas在安卓机上的绘制问题canvas的层级问题
虽然说这是个很常见的需求了，但真正实现起来才发现其中的坑是如此之多。尤其是微信小程序对于Can...]]></description><category></category></item><item><title><![CDATA[微信小程序添加插屏广告并设置显示频率（一天一次）]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/94594952</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/94594952</guid><author>wantingtr</author><pubDate>Thu, 04 Jul 2019 09:45:23 +0800</pubDate><description><![CDATA[微信小程序今年新上线了插屏广告，设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。
大体的流程就是在小程序后台新建广告位，获取到广告位的adUnitId并嵌入到源代码，因为插屏广告的单页面性，在页面的onload处添加即可。
let interstitialAd = null;
if (wx.createInterstitialAd) {
    interstitialAd = wx....]]></description><category></category></item><item><title><![CDATA[剑指offer里的递归与循环]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/94445231</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/94445231</guid><author>wantingtr</author><pubDate>Tue, 02 Jul 2019 15:16:55 +0800</pubDate><description><![CDATA[文章目录递归怎么解根据前序中序序列重建二叉树从尾到头打印链表递归产生的问题Fibonacci数列跳台阶变态跳台阶总结
其实这是第二遍刷剑指offer，发现已经忘得差不多了…虽然说有印象，但该不会写还是不会写。果然纯粹为刷题而刷题，完全不总结还是没啥用啊。所以这次根据题号顺序对里面的算法思想做个总结。
递归怎么解
对于算法ruo ji来说真的很不愿意用递归…因为绕来绕去一定会把自己绕进去。在平时写...]]></description><category></category></item><item><title><![CDATA[JavaScript的执行机制——同步与异步、事件循环、微任务与宏任务]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/90750390</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/90750390</guid><author>wantingtr</author><pubDate>Mon, 03 Jun 2019 13:09:07 +0800</pubDate><description><![CDATA[文章目录@[toc]JS执行机制同步任务异步任务为什么要异步？常见的异步任务/模式setTimeoutsetIntervalPromisegeneratorasync/awaitajaxjs如何实现异步？-&gt; eventLoop事件循环微任务与宏任务延伸到vue例子12
部分参考：这一次，彻底弄懂 JavaScript 执行机制
JS执行机制

javascript是一门单线程语言
Eve...]]></description><category></category></item><item><title><![CDATA[仿微软Video Indexer——视频断点播放与智能解析时间线的前端可视化实现]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/90704697</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/90704697</guid><author>wantingtr</author><pubDate>Thu, 30 May 2019 20:13:17 +0800</pubDate><description><![CDATA[先放一个实现效果，具体的功能可以参照Microsoft Video Indexer。


其中关键词这一部分的功能可以参考之前的博文视频时间点在时间轴上的动态可视化

最核心的就是视频的定点播放和可视化，其他的样式和tab栏都蛮简单的所以这里就不写了。
对于视频的定点播放，用到HTML5中video标签的currentTime这个属性，即在用户点击每个时间点的时候，需要根据函数传入时间参数来改变视...]]></description><category></category></item><item><title><![CDATA[JS的数据类型与事件类]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/90488349</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/90488349</guid><author>wantingtr</author><pubDate>Thu, 23 May 2019 21:28:05 +0800</pubDate><description><![CDATA[很久没有写博客了…因为这段时间都没有做新的项目，一直在复习前端的基础知识，大部分的（面试）知识点都归类为体系放入了印象笔记里。但因为还是有些繁杂，所以刚好再整理一次发到博客上来。
注：部分图片来自网络
知识点是仅个人根据面经以及自己的面试经历整理，仅供参考


文章目录数据类型分类基本数据类型（存放在栈中）引用数据类型（存放在堆内存中）引用数据类型的深拷贝与浅拷贝如何实现深拷贝数据类型判断`1....]]></description><category></category></item><item><title><![CDATA[CSS中的伪类，应用场景？遮罩层与超链接样式]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/89740997</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/89740997</guid><author>wantingtr</author><pubDate>Wed, 01 May 2019 21:56:33 +0800</pubDate><description><![CDATA[很久没写博客了…这段时间一直在准备各种面试，把知识点和体系全都总结在印象笔记里，有机会的话再把那些分享出来吧。
伪类
伪类是同一个标签，根据其不同的种状态，有不同的样式。通俗的可以理解成在页面上多加了一层，这个层就是伪类，具体长什么样，在这个层的CSS里定义即可。
应用场景
伪类一个很大的应用场景就是在超链接里：

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连...]]></description><category></category></item><item><title><![CDATA[Vue2.5仿去哪儿——vuex 公共画廊组件 导航栏的渐变出现]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/83614852</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/83614852</guid><author>wantingtr</author><pubDate>Wed, 17 Apr 2019 19:52:29 +0800</pubDate><description><![CDATA[Vue2.5仿去哪儿app 实战项目笔记
利用vuex实现跨页面数据共享 公共画廊组件 导航栏的渐变出现
&amp;nbsp;
利用vuex实现跨页面数据共享
要同时改变两个页面的数据，但city.vue和home.vue之间没有一个共同的父级组件，所以无法通过类似前面的父级组件进行数据中转。所以可以用vuex来进行数据管理。
vuex就是通过把所有的公用数据放到一个公共的数据空间去存储，某一个组件改变了...]]></description><category></category></item><item><title><![CDATA[JS中的作用域链，闭包，this指向全解析]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/88581653</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/88581653</guid><author>wantingtr</author><pubDate>Fri, 15 Mar 2019 19:10:24 +0800</pubDate><description><![CDATA[文章目录执行环境与作用域作用域链对比一下原型链与作用域链：闭包什么是闭包？闭包会引起的问题引用的变量发生变化内存泄露问题this指向问题闭包的其他用途利用闭包约束块级作用域
在不久之前，将网上总结的关于闭包的博文大概看了一下，却仍然是云里雾里。事实证明还是自己直接啃书比较好，对照着红宝书，从作用域到闭包在到this，把闭包的原理和应用以及各种坑通过知识点和网上的博文串起来，才总算弄懂闭包的大概。...]]></description><category></category></item><item><title><![CDATA[JavaScript中几种对象继承的方式对比]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/88197516</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/88197516</guid><author>wantingtr</author><pubDate>Tue, 05 Mar 2019 19:14:29 +0800</pubDate><description><![CDATA[文章目录继承方式1. 借助构造函数实现继承2. 借助原型链实现继承（原型式继承）3. 组合方式继承4. 组合方式继承（优化）5. 寄生组合式继承（最优）
继承方式
1. 借助构造函数实现继承
function parent() {
    this.name = 'parent'
}
parent.prototype.say = function () {}
function child() {...]]></description><category></category></item><item><title><![CDATA[JavaScript中的原型与原型链全解析]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/88123199</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/88123199</guid><author>wantingtr</author><pubDate>Mon, 04 Mar 2019 16:33:32 +0800</pubDate><description><![CDATA[文章目录prototype原型对象有什么好处？让所有的对象实例共享属性和方法__proto__JS中创建对象的三种方式字面量方式使用显式构造函数（构造器方式）使用Object.create原型链加上JS默认对象Object确定原型和实例之间的关系instanceofisPrototypeOf()
prototype
只要创建一个函数，就会自动的为这个函数创建一个prototype属性，这个属性是...]]></description><category></category></item><item><title><![CDATA[Vue + 原生JS + 原生CSS3 实现视频时间点在时间轴上的动态可视化]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/87934823</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/87934823</guid><author>wantingtr</author><pubDate>Tue, 26 Feb 2019 14:44:33 +0800</pubDate><description><![CDATA[文章目录需求实现效果模拟后台数据实现方法数据结构htmlJS功能实现初始化点击切换关键词实现时间点可视化遇到的问题v-show 用布尔类型的数组绑定无法监听生命周期造成的对象undefined问题总结
需求

根据关键字在视频中的出现时间，在模拟的视频时间轴中显示对应的位置
用户点击，选择不同的关键字，显示对应关键词时间
点击进度条中的关键词时间点，视频对应跳转到该时间播放

实现效果

完整源...]]></description><category></category></item><item><title><![CDATA[利用Element-UI的upload组件实现文件的上传以及样式变化]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/87803700</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/87803700</guid><author>wantingtr</author><pubDate>Wed, 20 Feb 2019 16:18:16 +0800</pubDate><description><![CDATA[最近在做项目的时候遇到在浏览器中上传视频的需求，使用Element-UI的upload组件。具体效果如下

总的来说是很简单的，但一定要仔细对照官方文档，并且因为我使用了typescript，其中也遇到了一个坑。
对照了一下官方文档，所需要注意的部分：

只能上传一个视频并且禁止多选 :limit=&quot;1&quot;，accept=&quot;video/*&quot;， :multiple=&quot;false&quot;，
当重复上传时弹出错...]]></description><category></category></item><item><title><![CDATA[TCP/IP协议族]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/86548086</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/86548086</guid><author>wantingtr</author><pubDate>Sat, 19 Jan 2019 00:02:46 +0800</pubDate><description><![CDATA[TCP/IP协议族
文章目录TCP/IP协议族网际层/网络层IPNAT（网络地址转换）ICMP（Internet控制报文协议）IGMP（Internet 组管理协议）ARP（地址解析协议）RARP（反向地址转换协议）BOOTP（自举协议/引导程序协议）DHCP（动态主机设置协议）OSPF（开放式最短路径优先协议）运输层/传输层TCPUDP应用层HTTP（超文本传输协议）HTTPS（超文本传输安全协...]]></description><category></category></item><item><title><![CDATA[响应式网站的实现过程及rem的动态计算]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/85009383</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/85009383</guid><author>wantingtr</author><pubDate>Fri, 14 Dec 2018 20:47:17 +0800</pubDate><description><![CDATA[关于设计稿，px与rem以及响应式网站的开发思路与流程
文章目录关于设计稿，px与rem以及响应式网站的开发思路与流程关于px，rem，vw响应式网站的实现思路开发流程使用rem实现自适应利用media实现web端与移动端的布局自动响应多份设计稿，如何设定根元素font-size？
上周做了小型的一个响应式网站，主要负责前端部分。使用Vue+CSS+ts实现，第一次写响应式网站，加上对px，vw，...]]></description><category></category></item><item><title><![CDATA[前端网站连接MySQL数据库]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/84482736</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/84482736</guid><author>wantingtr</author><pubDate>Sun, 25 Nov 2018 12:24:09 +0800</pubDate><description><![CDATA[前端(Vue.js)连接MySQL数据库
实现本地web服务器与MySQL数据库连接删改，查找。
文章目录前端(Vue.js)连接MySQL数据库实现本地web服务器与MySQL数据库连接删改，查找。目录结构整体逻辑监听后端服务器连接数据库配置与数据库表连接入口sql语句入口启动在`/server`目录下在项目根目录下
要实现本地web服务器与MySQL的连接，即实现在页面中对数据库的访问。整体逻...]]></description><category></category></item><item><title><![CDATA[JS的变量 原型与原型链 作用域 闭包]]></title><link>https://blog.youkuaiyun.com/wantingtr/article/details/84099470</link><guid>https://blog.youkuaiyun.com/wantingtr/article/details/84099470</guid><author>wantingtr</author><pubDate>Thu, 15 Nov 2018 10:11:55 +0800</pubDate><description><![CDATA[js中的变量类型（按存储方式区分)

值类型
引用类型（指针）：数组、函数、对象
//共享内存，数据改变存在联动性。
//可以随意的扩展属性

在javascript中，判断数据类型主要依赖下面两种方式：

如果值应为一个引用类型，使用 instanceof 操作符检查其构造函数；
如果值应为一个基本类型，使用 typeof 检查其类型

type of 函数
typeof只能区分值类型的详细类型...]]></description><category></category></item></channel></rss>