移动端开发-Day1

什么是Node?

它是一个基于Chrome v8引擎的js运行环境,采用高效轻量级的事件驱动,非阻塞式的I/O模型。

非阻塞I/O?

例如,当程序运行到某一函数时,调用后立即返回,不需要等待函数执行完成,便不会阻塞于此。

npm?

node package manager

facebook 2016发布了yarn

Web代理工具?

NProxy,优势:多端使用

http服务器?

http-server,优势:零配置

HTML5:

新标签元素,语义化标签,优势:比传统的纯div实现,增加了可读性。举例:Header、Nav(导航)、Article(章)、Section(节)、Aside(相关链接)、Footer

input元素的type扩充,不仅仅用于输入文本。新type举例:search、tel、url、email、date(日期选择框)、color、number、range(数字大小滑块输入)

input用属性进行表单验证。required(输入框必填),pattern(用正则验证)、title(校验提示信息)

input其他有用属性。autofocus、from、placeholder

新实用元素,progress(进度条)、Meter(标尺)、特殊元素:contentditable(编辑器)

音频(Audio)与视频(Video)元素

定位API:Geolocation

Geolocation通过navigator.geolocation全局对象进行访问

判断是否存在navigator.geolocation得知浏览器是否支持此API:if (navigator.geolocation)

调用navigator.geolocation.GetCurrentPosition获取用户位置。

 拍照API:getUserMedia
判断浏览器是否支持getUserMedia:if  ( navigator.mediaDevices.getUserMedia||navigator.getUserMedia||navigator.webkitgetUserMedia||navigator.getUserMedia)

getUserMedia函数语法:

指定分辨率:

指定移动平台前置或者后置摄像头:

实现手机摇一摇:

离线和存储:

离线web应用实战:

比普通的web应用多了一个描述文件:用来列出需要缓存与不需要缓存的资源。

描述文件的扩展名为:.mainfest或.appache

文件第一行以CACHE MANIFEST开头

"CACHE:"之后的都将被离线存储

“NETWORK:”之后的不会被离线存储

将HTML中关联一个离线描述文件,便可将web离线化:<html mainfest="./offline.appache">

但同时要将用户产生的数据离线化,这需要修改js代码:

// 获取记录内容的文本域
var el = document.querySelector('#content');
// 页面载入时,从本地获取存储的数据
el.value = localStorage.getItem('data') || '';
// 为文本域DOM节点添加blur事件
el.addEventListener('blur', function(){
    // 获取文本域的内容
    var data = el.value;
    // 保存到本地
    localStorage.setItem('data', data);
});
</script>
原文地址:https://www.cnblogs.com/carry-2017/p/11083220.html