背景

对开发移动端时遇到的问题进行收集、记录和总结，对于已经有解决方案，附上解决方案。

tap击穿问题

问题描述

绑定tap方法的dom元素，触发该方法时，该dom元素下方同一位置的dom元素会触发click事件或者有浏览器认为可以被点击交互的dom元素（input的focus事件），称为tap击穿现象。

产生原因

1、click事件在移动端会有300ms的延迟，因为需要检测双击事件。移动端300ms延迟原因

2、zepto的tap事件是绑定在document.body上的，tap事件执行（冒泡之后）之前，click事件已经被”执行”，只是被延迟了而已，所以在tap事件用preventDefault也没用

问题知识小记&备忘
author: @Tiffanysbear

event.target 和 event.currentTarget 的区别

event.target 和 event.currentTarget 的区别

冒泡和捕获： 当addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定；当第三个参数为false或者为空的时候，代表在冒泡阶段绑定

结论：event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。

line-heiht

line-height有5个值

1. normal
   　　浏览器默认属性值为纯数值1.2（不同浏览器或有差异） 　　

2. inherit
   　　继承父元素的值，默认值 　　

3. 百分比值
   　　如果一个元素的font-size是16像素 那么如果设置150%的行高 最后的实际行高会是16像素*150% = 24像素 并且其子孙元素会继承这个像素值

4. 长度值
   　　一个元素如果设置了长度值为line-height 那么这个长度值就会被继承

5. 纯数值
   　　一个元素如果设置了纯数值为line-height，那么这个纯数值会被继承。例如一个元素行高为1.5 其font-size为16像素 那么它的实际行高为16 * 1.5 = 24像素 而它的子元素font-size为12像素 那么它的实际行高为12*1.5 = 18像素

页面埋点和统计
author: @TiffanysBear

需求背景

前端页面的展示和点击经常需要统计数据，所以在前端页面中就需要记录用户点击、浏览等的数据，通过请求的方式，上传到服务器，服务器再通过计算，统计出数据。还有些需求是需要用户操作页面，滑动到某一位置时，再进行打点统计。

实现

通过对图片的加载，将需要上报的参数通过image的src进行请求，绑定图片onload事件，发出请求。

js判断空对象的方法
判断一个js对象是否是空对象isEmptyObject
author: @TiffanysBear

方法一：使用for…in遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var isEmptyObject = function () {
	for (var i in this) {
		return false;
	}
	return true;
}
// 尽量不要使用object.prototype直接进行修改
// 否则会为继承时生成的对象新增不必要的可枚举属性
// 同时可被for-in枚举到
Object.defineProperty(Object.prototype, 'isEmptyObject', {
	writable: false,
	configurable: false,
	enumerable: false,
	value: isEmptyObject
});

移动端1px的实现
author: @TiffanysBear

背景

在移动端，css中的1px并等于移动设备的1px，因为手机屏幕有不同的像素密度。window中的devicePixelRatio就是反应css中像素与真实像素的比例，也就是设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。所以造成了通过css设置1px，在移动端屏幕上会变粗。

解决方案一：使用伪类缩放

使用伪类缩放需要主要的是：

1. 设置全边框的时候，box-sizing要设置为border-box，否则伪元素上下左右各会多1px
2. 需要将父元素设置为relative
3. 注意 transform 的起点，上边距要用左上角，下边距用左下角

百度小程序之间的页面通信
author: @TiffanysBear

背景

主要是针对小程序开发中页面之间进行通信的问题，在涉及支付的场景中，用户从页面支付入口进行跳转进行支付之后，回到原来页面，在原来的页面需要进行相应的状态刷新，比如用户身份状态、支付状态、文档或商品情况。

遇到的问题

在使用百度小程序的 swan.navigateBack 进行回跳页面时，API中的方法参数不支持携带参数，只支持number参数。

所以就涉及了几个单独页面之间的通信问题。如下主要列出了几个方法，供参考。

H5多媒体能力
author: @TiffanysBear

H5多媒体能力

多媒体能力顾名思义就是H5提供的播放视频、音频能力。
在HTML5中通过HTML标签<audio>和<video>来支持嵌入式的媒体，是开发者能够方便的将媒体嵌入。

##例子
###音频

1
2
3

<audio src="XXX">
你的浏览器不支持audio标签
</audio>

###视频

1
2
3
4
5

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  你的浏览器不支持video标签
</video>

audio和video元素支持的媒体格式浏览器兼容性情况

##<audio>标签

如果元素包含 src 属性：零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。
或者：零个或多个 <source> 元素，其后紧跟零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。

属性

• autoplay [Boolean] 音频自动播放。

• buffered 通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。

• controls 如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

• loop [Boolean] 循环播放音频。

• muted [Boolean] 表示是否静音的布尔值。默认值为false，表示有声音。

• played 一个TimeRanges 对象，表示所有已播放的音频片段。

• preload 枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

  • none 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
  • metadata 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
  • auto 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
  • 空字符串 等效于auto属性。
  • 假如不设置，默认值就是浏览器定义的了（不同浏览器会选择自己的默认值）， 即使规范建议设置为 metadata.

  • autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。
  • 规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。

• src 嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用 <source> 元素来替代该属性指定嵌入的音频。

• volume 音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).

###事件
| 事件 | 描述 |
| —- | —- |
| abort | 在播放被终止时触发。|
| canplay | 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。|
| canplaythrough |在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。|
| durationchange |元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。|
| emptied |媒体被清空（初始化）时触发。|
| ended |播放结束时触发。|
|error|在发生错误时触发。元素的error属性会包含更多信息|
| loadeddata | 媒体的第一帧已经加载完毕|
| loadedmetadata | 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。|
| loadstart | 在媒体开始加载时触发。|
| mozaudioavailable |当音频数据缓存并交给音频层处理时|
| pause |播放暂停时触发。|
| play | 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。|
| playing |在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。|
| progress | 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。|
| ratechange | 在回放速率变化时触发。|
| seeked |在跳跃操作完成时触发。|
| seeking |在跳跃操作开始时触发。|
| stalled | 在尝试获取媒体数据，但数据不可用时触发。|
| suspend |在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。|
| timeupdate |元素的currentTime属性表示的时间已经改变。|
| volumechange |在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）|
| waiting | 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。|

###业内实例

##<vedio>标签

<video> 元素 用于在HTML或者XHTML文档中嵌入视频内容。包含任一 src 属性或是一个或多个 <source> 元素，其后紧跟流式内容 或 段落内容 ， 不包括<video> 或者 <audio> 元素。

属性

• autoplay [Boolean] 视频会马上自动开始播放，不会停下来等着数据载入结束。
• buffered 这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
• controls Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
• crossorigin 该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。不加这个属性时，抓取资源不会走CORS请求(即，不会发送 Origin: HTTP 头)，保证其在 <canvas> 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。
  • anonymous 跨域请求（即，使用 Origin: 的HTTP头）会被执行。但是不发送凭证（即，不发送cookie， X.509 证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 Access-Control-Allow-Origin: HTTP头)，图片会被 污染 并且它的使用会受限。
  • use-credentials 跨域请求A cross-origin request (i.e. with Origin: HTTP header) 会被执行，且凭证会被发送 (即， 发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。如果服务器不提供证书给源站点 (通过Access-Control-Allow-Credentials: HTTP 头)，图像会被 污染 且它的使用会受限。
• height 视频展示区域的高度，单位是CSS像素。
• loop [Boolean] 指定后，会在视频结尾的地方，自动返回视频开始的地方。
• muted [Boolean] 指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。
• played 一个 TimeRanges 对象，指明了视频已经播放的所有范围。
• preload 该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：
  • none 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
  • metadata 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
  • auto 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
  • 空字符串：也就代指 auto 值。
  • autoplay 属性优先于 preload 假如用户想自动播放视频。
• poster 一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。
• src 要嵌到页面的视频的URL。可选；你也可以使用video块内的 元素来指定需要嵌到页面的视频。
• width 视频显示区域的宽度，单位是CSS像素。

时间偏移量目前是指定为float类型的值，表示偏移的秒数

###事件
同之前内容。

###业内实例
####爱奇艺、腾讯视频、优酷
三大视频网站都是使用的是<video>元素来播放视频。
####哔哩哔哩
哔哩哔哩使用的是自己开源的播放器flv.js
不过基本上也是用的<video>元素

####现在github上star最多的视频播放器一个是videojs/video.js,另一个是哔哩哔哩的flv.js,还有sampotts/plyr。音频视频播放器mediaelement/mediaelement

《CSS世界》第六章 流的破坏与保护总结
author: @TiffanysBear

float属性

float的本质与特性

1.包裹性（包含包裹和自适应）

2.块状化并格式化上下文

3.破坏文档流

4.没有任何margin合并

float的作用机制

float属性使父元素高度塌陷，为了实现文字环绕效果。高度塌陷是为了让跟随的内容可以和浮动元素在一个水平线上。（行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠）

clear属性

clear属性让自身不能和前面的浮动元素相邻。clear属性只有块级元素才有效。

如果clear: both;元素前面的元素就是float元素，则margin-top负值即使设置成-9999px，也没有任何效果；

clear: both; 后面的元素依旧可能会发生文字环绕现象。