Bootstrap响应式Web开发（二）

2024-02-06 13:44:40

Bootstrap响应式Web开发（二）

一、HTML5 常用API

1、监测网络连接
在HTML5之前，我们可以通过window.navigator.onLine来检查用户当前的网络状态，它会返回一个布尔值，false表示没有连接网络，true表示已连接网络。
HTML5提供了online和offline两个事件，它们监听的都是window对象。其中，online在用户网络连接时调用，offline在用户网络断开时调用。需要注意的是，这种方式在不同浏览器会存在差异
示例：检测网络连接状态

<style>
  body { padding:0; margin:0; background-color:#f7f7f7; }
  p {
    width: 200px;height: 40px;text-align: center;line-height: 40px; margin: 100px auto; 
    color: #fff;font-size: 24px; background-color: #000; display: none;
}
</style>
<body>
  <p class="tips"></p>
 <script src="jquery.min.js"></script>
<script>
    window.addEventListener('online', function() {
      $('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();
    })
    window.addEventListener('offline', function() {
      $('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
    })
</script>
</body>

2、全屏操作
HTML5提供了requestFullScreen()方法允许用户自定义网页上任一元素的全屏显示，并提供了cancelFullScreen()方法关闭全屏显示。
这两个方法存在兼容性问题，IE 9+才会支持，即使高版本浏览器也有兼容性问题。因此不同浏览器需要添加不同的私有前缀
各类浏览器的全屏方法
①Chrome浏览器
基于WebKit内核的浏览器需要添加webkit前缀，使用webkitRequestFullScreen()和webkitCancelFullScreen()来实现
②Opera浏览器
Opera浏览器需要添加o前缀，使用oRequestFullScreen()和oCancelFullScreen()来实现
③火狐浏览器
基于Gecko内核的浏览器需要添加moz前缀，使用mozRequestFullScreen()和mozCancelFullScreen()来实现
④IE浏览器
基于Trident内核的浏览器需要添加ms前缀，使用msRequestFullscreen()和msCancelFullscreen()来实现，注意方法里的screen的s为小写形式
示例：全屏操作

<body>
  <div>
    <img src="pic1.png" height="300"  alt="">
    <button id="full">全屏显示</button>
    <button id="cancelFull">取消全屏</button>
    <button id="isFull">是否全屏</button>
  </div>
<script>
  var div = document.querySelector('div');
  document.querySelector('#full').onclick = function() { 
    if(div.requestFullScreen) { div.requestFullScreen();                                 // 正常浏览器 } 
    else if (div.webkitRequestFullScreen) { div.webkitRequestFullScreen(); // webkit }
    else if (…) { … } 
    else { alert('暂不支持在您的浏览器中全屏');}
  };
</script>

// 取消全屏
document.querySelector('#cancelFull').onclick = function() {
  if(document.cancelFullScreen) { div.cancelFullScreen();                                          // 正常浏览器 }
  else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); // webkit }
  else if (…) { … } 
  else { alert('暂不支持在您的浏览器中全屏'); }
};

</body>

3、文件读取
如果想要把图片的缩略图显示到页面中，这就需要用到HTML5给我们提供的文件读取接口来实现。该接口通过FileReader对象来读取本地存储的文件，然后使用File对象来指定读取的文件或数据。
File对象可以是来自用户在一个元素上（如）选择文件后返回的FileList对象，也可以是*拖放操作生成的DataTransfer对象。dataTransfer对象只能访问文件的一些基本的信息
由于Web环境的特殊性，为了考虑文件安全问题，浏览器不允许JavaSctipt直接访问文件系统，使用表单元素的文件域来实现文件的上传。
input元素还有一个multiple属性（HTML 5新增），可以实现一次上传多个文件。在用户选择文件以后，可以得到一个FileList对象，它代表所选的文件列表

<input type="file" multiple>

4、地理定位
地理定位在日常生活中应用比较广泛，例如，互联网打车、在线地图等。在HTML 5的规范中，增加了获取用户地理位置信息的接口Geolocation，开发者可以通过经纬度来获取用户的地理位置信息，Geolocation接口的特点如下

Geolocation接口封装了获取位置信息的技术细节
开发者不需要关心信息的来源，只需关注如何使用即可，这极大地简化了开发的难度
目前，该接口已经得到了大部分浏览器的支持，如Firefox、IE 9、Opera、Safari和Chrome等
对于拥有GPS的设备，定位会更加准确，如iPhone和Android手机等
navigator.geolocation对象提供了getCurrentPosition()方法来获取当前地理位置。其中，navigator是浏览器的内置对象。
当getCurrentPosition()方法被调用时，会发起一个异步请求，浏览器会去调用底层的硬件来更新当前的位置信息
当getCurrentPosition(successCallback, errorCallback)方法成功获取地理信息后，会在successCallback回调函数中传入position对象，position对象属性如表所示
position对象中的coords属性包含的信息如表所示
5、拖曳
拖曳操作需要借助于鼠标来实现，如文件或图片的移动操作等。在开发中，我们经常使用原生的JavaScript来实现拖曳效果，实现起来比较复杂。因此，HTML5为我们提供了更好用的接口或者事件，在很大程度上简化了页面中拖曳交互的实现难度
图片和链接默认是可以拖动的，它们不用添加draggable属性。一个完整的拖曳效果由拖曳（Drag）和释放（Drop）组成的。在拖曳操作中，被拖动的元素称之为源对象，它指的是页面中设置了draggable="true"属性的元素；源对象进入的元素称之为目标元素，目标元素可以是页面中的任一元素。
在HTML5中提供了拖曳元素的事件，如表所示
在HTML5中提供了目标元素相关的事件，如表所示
注：只有当源对象上的鼠标点进入目标元素时，才会触发ondragenter事件。默认情况下，浏览器会默认阻止ondrop事件，如果想要触发该事件。则需要在ondragover事件中使用“return false;”（或者e.preventDefault()）来阻止其默认行为

6、Web存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂。为了满足各种各样的需求，会经常在本地设备上存储大量的数据。例如，记录历史活动信息。传统的方式是使用document.cookie来进行存储，但是由于其存储空间有限（大约4KB），并且需要复杂的操作来解析，给开发者带来了诸多不便。为此，HTML 5规范提出了网络存储的相关解决的方案，即Web Storage（Web存储）和本地数据库Web SQL Database
Web Storage API中包含两个关键的对象，分别是window. sessionStorage对象和window. localStorage对象。前者用于区域存储，后者用于本地存储。Web Storage具有以下特点

数据的设置和读取比较方便
容量较大，sessionStorage大约为5MB，localStorage大约为20MB
只能存储字符串，若想要存储JSON对象，则可以使用window.JSON.stringify() 或者parse()进行序列化和反序列化编码
Web Storage除了在移动平台上具有良好的兼容性外，它还具有以下优势
减少网络流量的使用
使用Web
Storage，一旦数据保存在本地后，就可以避免再次向服务器请求数据。因此减少了不必要的数据请求，同时也减少了数据在浏览器和服务器间不必要地来回传递
能够快速显示数据
使用Web Storage性能好，因为从本地读数据比通过网络从服务器获得数据速度要快很多，可以即时获得本地数据。再加上网页本身也可以有缓存，因此如果整个页面和数据都在本地，则可以立即显示
可以临时存储数据
由于sessionStroage对象和localStorage对象都是Storage的实例，所以都可以使用Storage接口提供的方法和属性。Web Storage接口中提供了一些方法和属性，如表所示
sessionStorage主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。session就是会话的意思，比如现实生活中，打电话时从拿起话筒拨号到挂断电话之间的一系列过程可以称为一次会话。在Web开发中，一次会话是指一个浏览器窗口从打开到关闭的过程。如果关闭浏览器，那么会话就将结束。sessionStorage的数据是保存在浏览器的内存中的。当浏览器关闭后，内存将被自动清除
注：localStorage与sessionStorage唯一的区别就是存储数据的生命周期不同。locaStorage 是永久性存储，而sessionStorage的生命周期与会话保持一致，会话结束时数据消失。从硬件方面理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取。而sessionStorage的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除。 localStorage在使用中也有一些局限，具体如下
IE浏览器在IE 8以上版本才支持localStorage这个属性
不同浏览器可以保存的数据量大小不统一
目前所有的浏览器中都会把localStorage的值类型限定为String类型，对于日常比较常见的JSON对象类型需要做一些转换
localStorage在浏览器的隐私模式下是不可读取的
localStorage本质上是对字符串的读取。如果存储的内容过多会消耗内存空间，导致页面下载速度变慢
localStorage不能被网络爬虫抓取到
7、播放视频和音频
标签用来定义视频播放器，它不仅是一个播放视频的标签，其控制栏还实现了包括播放、暂停、进度和音量控制、全屏等功能，更重要的是用户可以自定义这些功能和控制栏的样式
src和controls是标签的两个基本属性，此外还包括width和height属性
src属性用于设置视频文件的路径
width属性表示设置视频窗口的宽度
height属性表示设置视频窗口的高度
controls属性用于为视频提供播放控件
标签支持以下3种视频格式
Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG 4：带有H.264视频编码和AAC音频编码的MPEG 4文件
WebM：带有VP8视频编码和Vorbis音频编码的WebM文件
注：HTML 5 DOM为和元素提供了类似的方法、属性和事件，它们都需要使用JavaScript来操作和元素。如果使用的是jQuery库，则需要进行相应的转换
不同浏览器对视频文件类型的支持情况
HTML 5中提供了标签，用于指定多个备用的不同格式的文件路径，基本语法如下

<video controls>
  <source src="视频文件地址" type="video/格式">
  <source src="视频文件地址" type="video/格式"/>
</video>

二、移动端常用事件

1、Touch事件：是移动端常用事件中最为典型的事件，其含义为“触摸”。Touch 事件是一组事件，也是多数触屏操作事件的总称。大部分主流的移动端浏览器支持的4种最基本的Touch触屏事件，如表所示
在PC端中，当一个事件发生后，与事件相关的一系列信息数据的集合都会放到这个对象里面，这个对象称为event事件对象。和PC端一样，移动端也有自己的事件对象，Touch触摸事件发生后也会产生TouchEvent对象，该对象包含了3个用于跟踪触摸的属性，用于返回不同的触摸点集合，如表所示
注：touches和targetTouches只存储接触屏幕的触点，而想要获取触点最后离开的状态要使用changedTouches。另外，touches和targetTouches在Chrome浏览器测试和真机测试中是没有区别的，推荐使用targetTouches
触摸点集合中每个Touch对象代表一个触点，它包含一些用于获取触摸信息的常用属性，如位置，大小，形状，压力大小和目标element属性等，如表所示
示例： Touch事件实现轮播图效果

<script>
  var banner = document.querySelector('.banner');
  var imgBox = banner.querySelector('.bannerImg');
  var lis = imgBox.querySelectorAll('li');
  var count = lis.length;
  var bannerWidth = banner.offsetWidth;
  imgBox.style.width = count * bannerWidth + 'px';
  for (var i = 0; i < lis.length; i++) {
    lis[i].style.width = bannerWidth + 'px';
  }
var index = 1;
imgBox.style.left = -bannerWidth + 'px';
var startX, moveX, distanceX;
imgBox.addEventListener('touchstart', function(e) {
  startX = e.targetTouches[0].clientX;
});
imgBox.addEventListener('touchmove', function(e) {
  moveX = e.targetTouches[0].clientX;
  distanceX = moveX - startX;
  imgBox.style.transition = 'none';
  imgBox.style.left = (-index * bannerWidth + distanceX) + 'px';
});
imgBox.addEventListener('touchend', function(e) { 
  // 判断distanceX
 });
if (Math.abs(distanceX) > 80) {
    if (distanceX > 0) {index--;  // 上一张} 
    else {index++;                     // 下一张}
    imgBox.style.transition = 'left 0.5s ease-in-out';
    imgBox.style.left = (-index * bannerWidth) + 'px';
  } else if (Math.abs(distanceX) > 0) {
    imgBox.style.transition = 'left 0.5s ease-in-out;
    imgBox.style.left = -index * bannerWidth + 'px';
}
imgBox.addEventListener('webkitTransitionEnd', function() {
  imgBox.style.transition = 'none'; 		  // 清除过渡
  imgBox.style.left = -index * bannerWidth + 'px';    // 设置偏移
});
imgBox.addEventListener('webkitTransitionEnd', function() {
  if (index == count - 1) {
    index = 1;
  } else if (index == 0) {
    index = count - 2;
  }
});
var first = imgBox.querySelector('li:first-of-type');
var last = imgBox.querySelector('li:last-of-type');
imgBox.appendChild(first.cloneNode(true));
imgBox.insertBefore(last.cloneNode(true), imgBox.firstChild)
</script>

2、模拟移动端单击事件
随着移动端网页的流行与普及，用户对网页性能有了更高的要求，而在移动端使用click会出现延迟，这会影响用户的体验。基于原生的touch事件本身是没有tap单击事件的，根据移动端操作优先的原则，为了提高移动端单击事件的响应速度，一般使用Touch事件来模拟移动端tap单击事件。该单击事件必须满足以下要求

单击事件只有一个手指去触发屏幕
触发屏幕的时间差异必须小于某一个值，并且不能有长距离的活动
确保没有滑动操作，如果有抖动必须保证抖动的距离在指定范围内

三、移动端常用插件

1、 Fastclick插件的使用
Fastclick插件是由 FT Labs 开发的JavaScript库，它简单易用，上手比较快，解决了click事件在移动端触发时有大约300ms延时的问题。另外，Fastclick在PC端也能响应解决延时问题，这大大提高了用户浏览体验的效果，使得操作反应更加灵敏。通过官网下载fastclick.js至本地，然后在HTML网页中使用

<script src="fastclick.js"></script>

FastClick.attach()方法的参数可以是任意的DOM元素，在这里使用document.body表示会将document.body下面的所有元素都绑定为Fastclick。通过JavaScript方式对Fastclick进行实例化

if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);}

通过jQuery方式对Fastclick进行实例化，具体代码如下

$(function() {FastClick.attach(document.body);});

2、利用Fastclick处理点透事件
点透事件即点击穿透事件，其发生的原因是，当用户在点击屏幕的时候，系统会触发touch事件和click事件。因为touch事件是移动端事件，所以会优先处理立刻去响应，touch事件经过一系列流程处理完成后，才会去触发click事件
3、iScroll插件的使用
通过网站下载iScroll.js至本地，当iScroll.js下载完成后，会在本地创建一个iscroll-master文件，打开该文件找到bulid目录，在目录中提供了不同版本的iScroll库。然后在HTML网页中使用

<script src="iscroll.js"></script>

定义div元素为父容器，我们需要给父容器设置固定的宽度和高度，并且子元素ul的高度或者宽度必须大于父元素，这样才能进行垂直滚动或者水平滚动。注意只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略，具体代码如下

<div id="wrapper">
  <ul>
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

接下来进行脚本的初始化，使用new调用一个构造函数，用来创建对象。IScroll（首字母大写）是插件提供的构造方法，它的第一个参数可以是滚动容器元素DOM选择器字符串，也可以是滚动容器元素的引用对象，具体代码如下

<script> 
  var myScroll = new IScroll('#wrapper');
  var wrapper = document.getElementById('wrapper');
  var myScroll = new IScroll(wrapper);
</script>

4、 Swipe插件的使用
Swipe是一个轻量级的触摸滑动插件，它能够实现图片的无缝轮播，可以控制图片的自动轮播和轮播间隔，支持响应式页面。将swipe.js文件通过官方网站下载至本地，然后在HTML网页中使用

<script src="swipe.js"></script>

Swiper是一个强大的触摸滑动插件，主要面向手机和平板电脑等移动端设备，它能够实现触屏轮播图、触屏Tab切换和触屏多图切换等常用效果，还可以制作3D切换效果和动画效果。它具有开源、免费、稳定和功能强大的特点，备受开发者的青睐。通过官网下载swiper.min.js文件至本地，然后在HTML网页中使用

<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>

码农公寓