# websocket

websocket 是一种网络协议，允许客户端 服务端 全双工进行网络通讯，客户端服务端可以互相发消息。 一旦建立连接就不会中断，性能高、比 ajax 轮询效率高且实时

# mustache

# Mustache 基础语法

let domString = Mustache.render(tempalte, data)

domString 是把 data 和 tempalte 整合而成的 HTML 字符串。

# 移动端Web页面适配方案

# 概述

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 web 页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用静态布局，通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备，即 <meta name = 'applicable-device' content = 'mobile'>，在 <meta> 标签中的 viewport 标签中设置 width，通过 js 动态修改标签的 initial-scale 使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。

后面出现流式布局，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了弹性布局。这种布局方案下，包裹文字的元素的尺寸采用em/rem为单位，页面主要划分区域的尺寸依据情况使用 px、百分数或者 em/rem。如一些高校的网站 jlu，页面的主要划分区域使用 px 和百分比，包裹文字的元素和文字采用 em。

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于响应式web设计，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。

# 百度网盘网页版倍速播放方法

在调试代码中输入如下代码。number 为播放的倍速数值。

videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(number:string)

# 如何创建一个前端 React 组件并发布到 NPM

造轮子是非常有效的学习方法。在熟练掌握 API 的搬运方法之后，我们可以通过自己造轮子来进一步掌握和理解更底层的知识。自己完成一个组件的开发之后，我们可以打包上传到 NPM 来分享自己的成果。在后面的步骤中，将会实现以下几个小目标：

1. 配置开发环境
2. 开发组件
3. 打包组件，并在测试项目中引入打包组件模块，验证组件功能
4. 发布到 NPM