工作笔记四
第四个工作笔记
1、JS的错误处理
未被处理的Error会导致JS程序终止运行。如果想终止程序运行，可以 `throw new Error()`来实现。
2、移动端300ms点击延迟
产生原因：浏览器需要进行一次缩放判断。
| 解决方案 | 优劣 |
|---|---|
content = "user-scalable=no" |
阻止双击缩放 |
content= "width=device-width, inittial-scale = 1" |
可能不兼容低版本浏览器 |
| 使用fastclick库 | 偶尔有bug |
3、横竖屏切换函数-orientationonchange事件
$(window).on("orientationchange",function(){
alert("方向已改变!");
});
4、常用手势事件
| 事件 | 含义 |
|---|---|
| gesturestart | 手势开始，一只手已经在屏幕上另一只手又触摸屏幕 |
| gesturechange | 任何一只手指发生变化 |
| gestureend | 任何一只手离开屏幕 |
事件传入的event属性：
rotation： 手势变化引起的旋转角度
scale： 手指间距离的变化情况
5、浏览器同源
浏览器同源：协议相同、域名相同、端口相同。
6、屏幕大小划分
| 屏幕尺寸 | 屏幕大小 |
|---|---|
| <768px | 超小屏幕 |
| 768px ~ 992px | 小屏幕 |
| 992px ~ 1200px | 中等屏幕 |
| >1200px | 超大屏幕 |
7、简单实现环形进度条
.app-logo{
animation: app-logo-spin infinite 20s linear;
height:80px;
}
@keyframes app-logo-spin {
form {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
8、HLS（HTTP Live Streaming）
由苹果公司提出的基于HTTP的流媒体网络传输协议，工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只能下载一些。客户端可以选择从许多个备用源中以不同的速度下载同样的资源。
9、video元素支持的三种视频格式
| 视频格式 | 简介 |
|---|---|
| ogg | theora视频编码和vorbis音频编码的ogg文件 |
| MPEG4 | 带有H.264视频编码和ACC音频编码的MPEG4文件 |
| WebM | 带有VP8视频编码和vorbis音频编码的WebM文件 |
10、视频H5编码最佳实践
<video
id = "video"
src= "video.mp4"
controls = "controls" 允许用户控制视频播放
poster = "image.ipg" 视频封面
preload = "auto" 自动播放
webkit-playsinline = "true" 在IOS10中视频可小窗口播放
playsinline = "true" IOS微信浏览器中支持小窗口播放
x-webkit-airplay = "allow"
x5-video-player-type = "h5" 启动h5播放器，是wechat安卓特性
x5-video-player-fullscreen = "true" 设置为true防止横屏
x5-video-orientaiton = "poraint" 播放器支持的方向
style = "object-fit: fill">
</video>
11、nodejs常用文件路径
| 路径 | 含义 |
|---|---|
| _dirname | 总是返回被执行的js所在文件夹的绝对路径 |
| _filename | 总是返回被执行的js文件的绝对路径 |
| process.cwd() | 总是返回运行node命令时所在的文件夹的绝对路径 |
| ./ | 在require()中使用是跟_dirname的效果相同，不会因为启动脚本的目录不一样而改变，在其他情况下跟process.ced()相同，是相对于启动脚本所在目录的路径 |
总结：
只有在require()时才能使用相对路径的写法，其他地方一律使用绝对路径。
当前目录：
path.dirname(_dirname)+'test.js'相邻目录：
path.dirname(_dirname, '../lib/test.js')
