jacky-jiang / blog Goto Github PK

0、背景

在前端web应用开发中，无论是面向桌面浏览器的PC应用，还是面向移动端的H5应用，基本上都需要使用JavaScript语言实现相关的业务逻辑功能或者交互效果。

无论前端技术或者框架如何发展，目前来说，JavaScript的底层实现都是基于一些基本的JavaScript Web API接口，从本篇文章开始，将会对JavaScript Web API中的常用接口进行系列介绍和探究。

1、客户端JavaScript API

在客户端中的JavaScript API可以分为两个大的类别：

• 浏览器内置API 常通过一些BOM对象接口暴露给开发者进行调用，例如，Geolocation API来获取用户地理位置相关信息，在浏览器的实现中，对底层代码（C++）进行了调用，来获取硬件设备的支持。

• 第三方库或框架 通过社区或者一些公司开源出来的库或者项目，为特定的问题或者领域提供解决方案，例如，ReactJS，Vue，Angular等等。

2、常用的客户端API

不管是桌面浏览器、移动端浏览器还是在移动端app中基于某个内核(-webkit-)webview，都会按照标准规范提供一些通用的API接口。

• DOM API，通过DOM API能够对加载到浏览器中的document进行相关操作，例如，对html或者css进行删除，修改，动态添加。

• 从服务端或者数据，例如XMLHttpRequest，Fetch接口，使用异步的方式，从服务端获取数据，来达到页面局部刷新的效果，以提升用户体验。

• 绘图和图像操作，目前，已经在绝大部分浏览器中得到支持的两个接口，Canvas API和WebGL，能够实现创建2D和3D图像，并且结合window.requestAnimationFrame能实现平滑的动画效果。

• 类似于HTMLMediaElement的多媒体接口，例如，Web Audio API和WebRTC

• 设备API，在某些场景下，通过调用某些设备接口，能够获得硬件相关的的功能或者支持，例如，之前的Geolocation API专门获取地理位置信息，以及Notification API和Vibration API

• 客户端存储API，在某些性能优化的场景中，通常需要结合客户端储存的能力，实现客户端缓存，达到性能优化的目的，例如，Web Storage API和IndexedDB_API

以上都是浏览器内置接口中，比较常用到的一些。

3、Web API的基本使用方式

之前提到的这些浏览器内置接口中，基本上都会通过某个__BOM__对象的其中一个属性值当作访问的入口，另外，一些接口也提供了事件机制，来对某个状态的变化进行业务逻辑处理或者回调。

在这些接口的使用中，需要遵循相关的浏览器安全策略，在某些情况下，需要得到用户的授权，例如，在调用Geolocation API获取用户地理位置时候，浏览器会提示用户进行明确的授权。

概述

在前端开发中，很多时候需要对用户的某种行为作出响应，以实现特定的交互效果或者业务逻辑，事件就是实现监听用户行为的一种方式。

我个人喜欢将事件分为：原生事件 和 自定义事件

原生事件 ，就是浏览器中预先定义和支持的事件，例如，DOM Event中的click和XMLHttpRequest Event中的readystatechange。

自定义事件 ，又叫做synthetic events，通过浏览器提供的一些创建事件和分发事件等接口，开发者可以根据自己的业务需求，自定义事件，并通过绑定事件接口进行监听。

Event接口

在DOM规范文档中，大部分的事件类型都继承自Event接口，其中，前端开发同学比较熟悉的，Event.preventDefault() ，Event.stopPropagation() 这两个方法就是在此接口中定义的。

EventTarget接口

用户的某种交互行为通常会触发某个类型的事件，而响应用户触发的事件 ，需要有一个接收的对象，在web标准中，接收事件的对象，都会继承EventTarget接口。

Element ，document和window都是一些常见的实现了EventTarget接口的对象。

EventTarget接口定义了三个非常通用的方法：

EventTarget.addEventListener() ，在一个对象上注册某种事件类型的响应方法

EventTarget.removeEventListener() ，删除对象中正在监听的某种事件类型的响应方法

EventTarget.dispatchEvent() ，在当前对象中分发某种类型事件

如何实现自定义事件

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

如果需要在自定义事件中传递数据

var event = new CustomEvent('build', { detail: 'custom event data' });

参考资料

• EventTarget
• Creating and Triggering Events
• Comparison of EventTarget

最近找时间，重新把【代码大全】这本读了一遍，对于其中有关项目开发和工程管理的内容，结合自己的一些实践经历，又有了不一样的体会。

构建管理

说到构建管理，我的理解，其实就是编码管理。编码标准，并不适用于所有情况。与标准相比，一些好的编码实践也有助于帮助改进构建流程：

• 结对遍程
• 收集一些好的示例。不仅要知道哪些地方是不好的，更重要的是应该知道哪些方面是好的。失败的经验再多，有时候还不如一次成功的经验带来的启示更有价值。
• 适当的奖惩机制。对破坏代码仓库完整性，可用性的行为要给予小惩罚

配置管理

配置管理，换一种说法就是需求管理和控制，其中包括，代码发布窗口期机制，需求截止机制，变更审批，紧急发布审批流程，保证所有变更可追溯。

代码变更，目前通过使用版本控制工具，能将不同版本的代码进行方便的比对，但同时需要注意一个问题，在代码比对的时候，有些情况下，单纯从代码上的差异很难弄清楚修改时候的上下文背景，因此，最好是能在代码提交的时候，提供详尽的commit信息，在commit信息的书写时，最好能约定一个统一的模板，以便于分类和查找。

工作量评估

开发工作量评估，预估值往往比实际值乐观20% ~ 30%

• 评估项目的每一部分，做叠加
• 让成员评估各自的任务，做叠加
• 参考以往项目经验，查看以往项目的准确度，用来调整新的评估

在大型项目中，评估开发工作量，本身就是一个“小项目”，需要预留时间，做好规划。

提供评估准确性的两个措施：

• 了解业务需求，了解开发需求
• 尽量在底层细节层面进行评估

最近工作中需要进行H5的视频和音频开发，借此机会总结一下其中涉及到的知识

<video>标签

在使用视频的时候，需要在H5页面中加入

关于使用<video>的主要属性

src

指定视频的播放源，类似于<img>的src属性，在使用的时候，从性能优化的角度考虑，尽可能的使用相对路径，这样能减少浏览器DNS解析时间。

controls

使用此属性(attribute)来展示浏览器内置的默认播放器控件，例如，播放按钮，暂停，进度条等。如果需要实现自定义样式的播放器控件，则需要通过JavaScript API来完成。

autoplay

实现自动播放功能，目前，此属性在真实的手机环境中，存在比较大的兼容性问题。

poster

当视频处于初始状态下，用此属性可以指定视频的封面。

<audio>标签

<audio>标签的属性与<video>基本一致，除了不支持width和height两个属性。

使用视频和音频可能会遇到的坑

iOS

早期的系统中，必须要通过用户手势(user gesture)才可以播放，从版本10开始，修改了自动播放的策略，具体内容是：

• 无音频源的video元素，允许自动播放
• 禁音的video元素，允许自动播放
• 如果video元素在没有用户手势下，有了音频源或者变成禁音，将暂停播放
• video元素屏幕可见才开始播放

Android

早期同样需要通过用户手势才可以播放，安卓的chrome 53后放宽了自动播放策略，策略与iOS有些不同，需要同时设置autoplay和muted，才允许自动播放。

History，接口用来操作浏览器的会话历史记录，所谓会话，就是在浏览器的tab中加载的当前页面。

History的属性值

History.length

返回表示当前tab容器中会话历史元素的数量。

History.state

返回当前tab容器中加载页面历史堆栈顶部的state对象。

History的方法

History.back()

回退到上一个tab容器中的页面，类似于点击了浏览器中的【回退】按键。

History.forward()

前进到下一个tab容器中的页面，类似于点击了浏览器中的【前进】按键。

History.pushState()

将state对象数据与特定的url作为一组映射，放入到历史会话数据堆栈中。放入的state对象数据，对于DOM来说是透明的。

History.replaceState()

更新当前页面的state对象数据。

【添加】和【修改】历史记录实体

通过 History.pushState() 和 History.replaceState() 方法，能添加和修改历史记录实体，并且触发window.onpopstate事件。

在使用XMLHttpRequest接口对象的时候，referrer请求头的值，是由当前document对像所在window下的URL决定的，使用 History.pushState() 和 History.replaceState() 方法，能修改URL的值。

JavaScript Runtime

Stack

所有function call组成了一个a stack of frames，每个function call就是一个frame，每个frame包含了function内定义的变量作用域scope，当一个function的body内包含了对其他方法的调用，此时，又会继续创建一个frame，并被压入stack中

Queue

一个JavaScript Runtime都包含有一个message queue，每个message都会对应着一个function，当Stack为空的情况下，就会有一个message从message queue中被取出，成为一个initial frame.

run-to-completion 每个正在被processed的message都不会被其他message中断，直到正在被执行的message对应的Stack为空，此时，才会再从message queue中提取出一个message来执行。这种机制会引发一个问题，那就是如果某段代码需要运行很长的时间，你的应用程序将会停止响应其他事件操作，例如用户点击事件或者滚动，在这种情况下，浏览器通常都会弹出一个对话窗口，让你能够中止该段代码的执行。

adding message 在浏览器中，当有事件触发时，message就会被添加到message queue当中，前提是该事件必须有对应处理函数handler

执行setTimeout方法，会在设置的时间之后，添加一个message到message queue当中，但这并不保证是在设置的时间之后，马上添加一个message，而是最快在这个设置时间后添加一个message