《JS原理、方法与实践》- HTML5简介

HTML5是近几年很是热门的话题，它提供了不少使用功能，例如：前端

• 本地存储
• canvas做图
• WebSocket
• 多线程
• 获取地理位置
• 富文本编辑器
• 公式编辑器

本地存储

本地存储主要包含Cookie、Storage和IndexedDB数据库三种方式。
不一样数据库存储上限：
Cookie: 4k
Storage: 5M（chrome），不一样浏览器上限大小不一样
IndexedDB: 无上限
web

canvas做图

canvas做图是经过canvas标签来完成的，可是该标签及其所对应的HTMLCanvasElement对象自己并无太多的操做，它主要是经过getContext方法获取的环境对象进行操做的。context分为2D和3D两种，要使用哪一种就将参数传入getContext来获取相应的context,可是，对于一个canvas来讲，只能够做为2D或3D中的一种来使用，当第一次调用getContext方法时，其类型就肯定下来了，以后不能够再使用不一样的参数来获取另外一种。chrome

WebSocket

WebSocket是一种新的与服务端通讯的方式，它是一种长链接的通讯方式，也就是说链接成功后若不主动断开，则会一直保持链接状态，而不像HTTP（s）协议那样会自动断开链接，使用WebSocket能够很容易实现服务端推送相关的业务。数据库

多线程

JS中的多线程是使用Worker对象来实现的，是基于事件的模式进行处理的。这里须要注意线程之间传递的数据不是引用而是数据的副本，这样不一样线程之间进行数据处理时就不会形成相互干扰，可是这并不表示就不存在线程同步的问题，线程同步问题还须要手动解决。canvas

HTML5获取位置信息

HTML5中获取位置信息是经过navigator的geolocation属性对象来操做的，能够获取一次也能够连续获取，在获取位置信息前须要征得用户的赞成。获取成功后会返回Position对象，其中包含经度、维度、运动速度等信息；若是获取失败，则会返回PositionError对象，其中包含获取失败的缘由。若是要将获取的信息显示到地图上，则可使用已有的地图API来实现。浏览器

富文本编辑器

富文本编辑器能够直接经过contenteditable属性制做。虽然理论上可使用任何标签来作编辑器，可是为了安全建议你们最好使用iframe，这样能够避免对页面内的其余内容形成影响。对样式的修改可使用getSelection获取到选区，而后手工修改，也能够经过document的execCommand方法使用命令来修改。插入图片时三个不一样的地址要区分清除，一个用于上传图片，一个用于在编辑器中显示图片，一个用于在文章中显示图片，后两个地址是同一个地址，若是在编辑器中能够正常显示图片而在文章中没法正常显示就要考虑这两个地址所处的环境。安全

公式编辑器

公式编辑器主要使用的是MathML标准。这是一个独立的、基于XML的标准，其核心是各类标签和属性。编辑公式就是编辑其所包含的各类标签。微信

若是文章可以对您有所帮助，我便感到十分荣幸。如若文章能被您点赞，那即是万分荣幸。多线程

我的微信：iotzzh
公众号：前端微说
我的网站：www.iotzzh.com编辑器