<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[tianmd_Eric的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/tianmd_Eric</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; tianmd_Eric]]></copyright><item><title><![CDATA[记录一个水波特效动画的js]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/114596448</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/114596448</guid><author>tianmd_Eric</author><pubDate>Tue, 09 Mar 2021 19:27:32 +0800</pubDate><description><![CDATA[记录一个水波特效动画的js
this.slide = new DookaySlide(this.$refs.canvas, {
     displacementImage: require('../images/p3/dmaps.jpg'),
     autoPlay: true,
   //   centerSprites:true,
     autoPlaySpeed: [4, 3],
     displaceScale: [400, 800],
     displacementCenter:]]></description><category></category></item><item><title><![CDATA[Vue的异步加载组件（按需加载）与路由懒加载]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/109247737</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/109247737</guid><author>tianmd_Eric</author><pubDate>Fri, 23 Oct 2020 19:52:36 +0800</pubDate><description><![CDATA[异步组件&amp;路由懒加载异步组件介绍异步组件声明路由懒加载介绍路由懒加载方法
异步组件介绍
在开发大型项目的时候，我们会把大型项目根据组件分割为小块代码，然后异步加载代码块，这样可以让首屏部分代码块优先加载，加快首屏渲染速度，其他代码块在需要的时候再加载，加载过的代码块会被缓存起来，以便复用重新渲染。
参考Vue官方文档异步加载.
异步组件声明
异步组件声明主要通过将  Vue.component()  方法的第二个声明为工厂函数，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器]]></description><category></category></item><item><title><![CDATA[移动端H5 audio/video 标签遇到的一些问题总结]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/106543009</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/106543009</guid><author>tianmd_Eric</author><pubDate>Thu, 04 Jun 2020 14:07:16 +0800</pubDate><description><![CDATA[写在开头
  由于需求的不断完善，最近着手的 移动端 代码中需要加入音效和背景视频，第一反应就是audio，做完demo之后测试发现在 safari 浏览器中没有得到想要的效果，经过查阅资料发现很多前辈都遇见过这个坑，为了总结在这里做个笔记，也说一说我自己的代码中实际的问题和解决办法~
audio标签的问题
主要是safari浏览器中的一些限制；
1.每次只能播放一个音频。
意思就是说我在播放一个音频的时候，不能同时播放另一个音频，代码中没有这种需求，真实性有待考证。
2.不支持 preload 和 aut]]></description><category></category></item><item><title><![CDATA[js 防抖与节流（setTimeout的应用）]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/100524999</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/100524999</guid><author>tianmd_Eric</author><pubDate>Tue, 03 Sep 2019 20:11:08 +0800</pubDate><description><![CDATA[1.防抖（debounce）
  防抖的作用是：当用户多次触发回调函数时，只触发最后一次操作的，其余的全部忽略掉；

  在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms

如果在200ms内没有再次触发滚动事件，那么就执行函数
	如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
效果：如果短时间内大量触发同一事件，只会执行一次函数。

...]]></description><category></category></item><item><title><![CDATA[ES6系列之Iterator 和 for...of 循环]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88720586</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88720586</guid><author>tianmd_Eric</author><pubDate>Thu, 21 Mar 2019 18:23:47 +0800</pubDate><description><![CDATA[1.Iterator（遍历器）的概念

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。

遍历器（Iterator）就是这样一种机制。它是一种接...]]></description><category></category></item><item><title><![CDATA[ES6系列之 Promise 对象]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88422928</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88422928</guid><author>tianmd_Eric</author><pubDate>Tue, 12 Mar 2019 17:32:16 +0800</pubDate><description><![CDATA[1.Promise 的含义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Pro...]]></description><category></category></item><item><title><![CDATA[ES6系列之Symbol类型]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88315028</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88315028</guid><author>tianmd_Eric</author><pubDate>Thu, 07 Mar 2019 17:46:23 +0800</pubDate><description><![CDATA[1.概述

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 Ja...]]></description><category></category></item><item><title><![CDATA[ES6系列之变量的解构赋值]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88034685</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/88034685</guid><author>tianmd_Eric</author><pubDate>Thu, 28 Feb 2019 17:44:45 +0800</pubDate><description><![CDATA[1.数组的解构赋值

 基本用法

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。ES6 允许写成下面这样。


let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。...]]></description><category></category></item><item><title><![CDATA[ES6系列之 Set 和 Map 数据结构]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/87094478</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/87094478</guid><author>tianmd_Eric</author><pubDate>Tue, 12 Feb 2019 17:46:38 +0800</pubDate><description><![CDATA[1.Set

基本用法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构。


const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x =&amp;gt; s.add(x));

for (let i of s) {
  console.log(i);
}
...]]></description><category></category></item><item><title><![CDATA[ES6系列之 let 和 const 命令]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/87079692</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/87079692</guid><author>tianmd_Eric</author><pubDate>Tue, 12 Feb 2019 14:59:14 +0800</pubDate><description><![CDATA[1.let命令

基本用法

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。


{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结...]]></description><category></category></item><item><title><![CDATA[前端响应式排版和布局的一种方式：基于vw等viewport视区单位和rem]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86706467</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86706467</guid><author>tianmd_Eric</author><pubDate>Wed, 30 Jan 2019 18:35:21 +0800</pubDate><description><![CDATA[一、什么是视区相对单位？

就是相对于浏览器viewport尺寸的单位，具体包括下面4个：

vw – 视区宽度百分值
	vh – 视区高度百分值
	vmin – vw或vh，取小的那个
	vmax – vw或vh，取大的那个
这里100vw就是浏览器窗口的全部宽度，100vh是浏览器窗口的全部高度。

即100vw=window.innerWidth，100vh=window.innerHeig...]]></description><category></category></item><item><title><![CDATA[CSS3 filter:drop-shadow滤镜与box-shadow区别与应用]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86613416</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86613416</guid><author>tianmd_Eric</author><pubDate>Wed, 23 Jan 2019 17:53:39 +0800</pubDate><description><![CDATA[要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？

一、兼容性不一

CSS3 box-shadow从IE9浏览器开始就支持了，兼容性如下截图：



而filter中的drop-shadowIE13才开始支持，移动端Android4.4才开始支...]]></description><category></category></item><item><title><![CDATA[CSSOM视图模式(CSSOM View Module)相关整理]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86528626</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86528626</guid><author>tianmd_Eric</author><pubDate>Thu, 17 Jan 2019 19:49:09 +0800</pubDate><description><![CDATA[CSSOM视图模式(CSSOM View Module)定义了一些 API，Web 开发人员使用这些 API 可以进行检查，也可以以编程方式更改文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动。

以下就是一些API属性的相关内容，包括兼容性，使用，测试等。

一、Window视图属性

这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”。包括...]]></description><category></category></item><item><title><![CDATA[CSS3 backgroud 新增加的属性]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86289603</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/86289603</guid><author>tianmd_Eric</author><pubDate>Fri, 11 Jan 2019 10:55:52 +0800</pubDate><description><![CDATA[一、CSS3背景background新增加的属性

 

background-size     背景图片大小

background-origin  背景起始位置

background-clip      背景范围

1、background-size背景大小

用background-size可以控制背景图片的大小，单位可以是固定像素值，也可以是百分比。如果是百分比，则相对于父元素的尺寸，还...]]></description><category></category></item><item><title><![CDATA[深入理解css盒模型]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/85691963</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/85691963</guid><author>tianmd_Eric</author><pubDate>Thu, 03 Jan 2019 15:40:13 +0800</pubDate><description><![CDATA[基本概念

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.

盒模型是有两种标准的，一个是标准模型，一个是IE模型。





从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，

而在IE模型中盒模型的宽高是内容(content)+内边距(padding)+边框(border)的总宽高。

css如何设置两种模型

这里...]]></description><category></category></item><item><title><![CDATA[CSS的Flex布局]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/85298885</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/85298885</guid><author>tianmd_Eric</author><pubDate>Thu, 27 Dec 2018 18:54:47 +0800</pubDate><description><![CDATA[一、Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。


.box{
  display: flex;
}

行内元素也可以使用Flex布局。


.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。


.box{
  ...]]></description><category></category></item><item><title><![CDATA[深入js原型与继承]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/85109570</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/85109570</guid><author>tianmd_Eric</author><pubDate>Thu, 20 Dec 2018 00:13:36 +0800</pubDate><description><![CDATA[在JS中，函数也是一种对象，他也是属性的集合，你也可以对函数进行自定义属性，每个函数都有一个属性叫做prototype。这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。



prototype既然作为对象，属性的集合，不可能就只弄个constructor来玩玩，肯定可以自定义的增加许多属性。例如这位Object...]]></description><category></category></item><item><title><![CDATA[CSS动画 animation与transition]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/84988155</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/84988155</guid><author>tianmd_Eric</author><pubDate>Thu, 13 Dec 2018 15:10:04 +0800</pubDate><description><![CDATA[一、容易混淆的概念

css中有几个&quot;长相&quot;类似的动画属性。分别是

animation（动画）、transition（过渡）、transform（变形）、translate（移动）

CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix...]]></description><category></category></item><item><title><![CDATA[CSS选择器的权重与优先规则]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/84861577</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/84861577</guid><author>tianmd_Eric</author><pubDate>Thu, 06 Dec 2018 17:35:27 +0800</pubDate><description><![CDATA[一般而言，大多数前端工程师对css样式优先级的概念停留在如下所示：



注:&amp;gt;表示优先级的一个高低,|表示优先级一样

!important&amp;gt;行间样式&amp;gt;id&amp;gt;class|属性&amp;gt;标签选择器&amp;gt;通配符

但实际上，css是有一个权重的。且是可也计算的，

我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。...]]></description><category></category></item><item><title><![CDATA[Java float和double精度范围大小]]></title><link>https://blog.youkuaiyun.com/tianmd_Eric/article/details/79729827</link><guid>https://blog.youkuaiyun.com/tianmd_Eric/article/details/79729827</guid><author>tianmd_Eric</author><pubDate>Wed, 28 Mar 2018 16:37:46 +0800</pubDate><description><![CDATA[要想理解float和double的取值范围和计算精度，必须先了解小数是如何在计算机中存储的：

举个例子：78.375，是一个正小数。要在计算机中存储这个数，需要把它表示为浮点数的格式，先执行二进制转换：

 

一 小数的二进制转换(浮点数)

78.375的整数部分：



小数部分：



 

所以，78.375的二进制形式就是1001110.011

然后，使用二进制科学记数法，有


...]]></description><category></category></item></channel></rss>