工作笔记（四）

工作笔记四

第四个工作笔记

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')