Web APIs

本篇學習目標:

?能夠寫出移動端觸屏事件
?能夠寫出常見的移動端特效
?能夠使用移動端開發插件開發移動端特效
?能夠使用移動端開發框架開發移動端特效
?能夠寫出 sessionStorage 數據的存儲以及獲取
?能夠寫出 localStorage 數據的存儲以及獲取
?能夠說出它們兩者的區別

1.1. 觸屏事件

1.1.1 觸屏事件概述

移動端瀏覽器兼容性較好，我們不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有。touch 對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應用戶手指（或觸控筆）對屏幕或者觸控板操作。

常見的觸屏事件如下：

1.1.2 觸摸事件對象（TouchEvent）

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件。這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等

touchstart、touchmove、touchend 三個事件都會各自有事件對象。

觸摸事件對象重點我們看三個常見對象列表：

因為平時我們都是給元素注冊觸摸事件，所以重點記住 targetTocuhes

1.1.3 移動端拖動元素

1. touchstart、touchmove、touchend 可以實現拖動元素
2. 但是拖動元素需要當前手指的坐標值 我們可以使用 targetTouches[0] 里面的pageX 和 pageY
3. 移動端拖動的原理： 手指移動中，計算出手指移動的距離。然后用盒子原來的位置 + 手指移動的距離
4. 手指移動的距離： 手指滑動中的位置 減去 手指剛開始觸摸的位置

拖動元素三步曲：

（1） 觸摸元素 touchstart： 獲取手指初始坐標，同時獲得盒子原來的位置

（2） 移動手指 touchmove： 計算手指的滑動距離，并且移動盒子

（3） 離開手指 touchend:

注意： 手指移動也會觸發滾動屏幕所以這里要阻止默認的屏幕滾動 e.preventDefault();

1.2. 移動端常見特效

1.2.1 案例: 移動輪播圖

移動端輪播圖功能和基本PC端一致。

1. 可以自動播放圖片
2. 手指可以拖動播放輪播圖

1.2.2. 案例分析:

1. 自動播放功能

2. 開啟定時器

3. 移動端移動，可以使用translate 移動

4. 想要圖片優雅的移動，請添加過渡效果
   

5. 自動播放功能-無縫滾動

6. 注意，我們判斷條件是要等到圖片滾動完畢再去判斷，就是過渡完成后判斷

7. 此時需要添加檢測過渡完成事件 transitionend

8. 判斷條件：如果索引號等于 3 說明走到最后一張圖片，此時 索引號要復原為 0

9. 此時圖片，去掉過渡效果，然后移動

10. 如果索引號小于0， 說明是倒著走， 索引號等于2

11. 此時圖片，去掉過渡效果，然后移動

1.2.3 classList 屬性

classList屬性是HTML5新增的一個屬性，返回元素的類名。但是ie10以上版本支持。

該屬性用于在元素中添加，移除及切換 CSS 類。有以下方法

添加類：

element.classList.add（’類名’）；

focus.classList.add('current');

移除類：

element.classList.remove（’類名’）;

focus.classList.remove('current');

切換類：

element.classList.toggle（’類名’）;

focus.classList.toggle('current');

注意:以上方法里面，所有類名都不帶點

1.2.4. 案例分析

1. 小圓點跟隨變化效果

2. 把ol里面li帶有current類名的選出來去掉類名 remove

3. 讓當前索引號的小li 加上 current add

4. 但是，是等著過渡結束之后變化，所以這個寫到 transitionend 事件里面

1. 手指滑動輪播圖
2. 本質就是ul跟隨手指移動，簡單說就是移動端拖動元素
3. 觸摸元素touchstart： 獲取手指初始坐標
4. 移動手指touchmove： 計算手指的滑動距離，并且移動盒子
5. 離開手指touchend: 根據滑動的距離分不同的情況
6. 如果移動距離小于某個像素 就回彈原來位置
7. 如果移動距離大于某個像素就上一張下一張滑動。
8. 滑動也分為左滑動和右滑動判斷的標準是 移動距離正負 如果是負值就是左滑 反之右滑
9. 如果是左滑就播放下一張 （index++）
10. 如果是右滑就播放上一張 (index–)
    

1.3.1. 案例：返回頂部

當頁面滾動某個地方，就顯示，否則隱藏

點擊可以返回頂部

1.3.2.案例分析

1. 滾動某個地方顯示
2. 事件：scroll頁面滾動事件
3. 如果被卷去的頭部（window.pageYOffset ）大于某個數值
4. 點擊，window.scroll(0,0) 返回頂部

1.4. click 延時解決方案

移動端 click 事件會有 300ms 的延時，原因是移動端屏幕雙擊會縮放(double tap to zoom) 頁面。

解決方案：

? 1. 禁用縮放。 瀏覽器禁用默認的雙擊縮放行為并且去掉300ms 的點擊延遲。

  <meta name="viewport" content="user-scalable=no">

? 2.利用touch事件自己封裝這個事件解決300ms 延遲。

? 原理就是：

1. 當我們手指觸摸屏幕，記錄當前觸摸時間
2. 當我們手指離開屏幕， 用離開的時間減去觸摸的時間
3. 如果時間小于150ms，并且沒有滑動過屏幕， 那么我們就定義為點擊

代碼如下:

//封裝tap，解決click 300ms 延時
function tap (obj, callback) {var isMove = false;var startTime = 0; // 記錄觸摸時候的時間變量obj.addEventListener('touchstart', function (e) {startTime = Date.now(); // 記錄觸摸時間});obj.addEventListener('touchmove', function (e) {isMove = true;  // 看看是否有滑動，有滑動算拖拽，不算點擊});obj.addEventListener('touchend', function (e) {if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指觸摸和離開時間小于150ms 算點擊callback && callback(); // 執行回調函數}isMove = false;  //  取反 重置startTime = 0;});
}
//調用  tap(div, function(){   // 執行代碼  });

3. 使用插件。fastclick 插件解決300ms 延遲。

1.5. 移動端常用開發插件

1.5.1. 什么是插件

移動端要求的是快速開發，所以我們經常會借助于一些插件來幫我完成操作，那么什么是插件呢？

JS 插件是 js 文件，它遵循一定規范編寫，方便程序展示效果，擁有特定功能且方便調用。如輪播圖和瀑布流插件。

特點：它一般是為了解決某個問題而專門存在，其功能單一，并且比較小。

我們以前寫的animate.js 也算一個最簡單的插件

fastclick 插件解決 300ms 延遲。 使用延時

GitHub官網地址： https://github.com/ftlabs/fastclick

1.5.2. 插件的使用

1. 引入 js 插件文件。

2. 按照規定語法使用。

3. fastclick 插件解決 300ms 延遲。 使用延時

4. GitHub官網地址： https://github.com/ftlabs/fastclick

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

1.5.3. Swiper 插件的使用

中文官網地址： https://www.swiper.com.cn/

1. 引入插件相關文件。
2. 按照規定語法使用

1.5.4. 其他移動端常見插件

lsuperslide： http://www.superslide2.com/

l iscroll： https://github.com/cubiq/iscroll

1.5.5. 插件的使用總結

1.確認插件實現的功能

2.去官網查看使用說明

3.下載插件

4.打開demo實例文件，查看需要引入的相關文件，并且引入

5.復制demo實例文件中的結構html，樣式css以及js代碼

1.5.6. 移動端視頻插件 zy.media.js

H5 給我們提供了 video 標簽，但是瀏覽器的支持情況不同。

不同的視頻格式文件，我們可以通過source解決。

但是外觀樣式，還有暫停，播放，全屏等功能我們只能自己寫代碼解決。

這個時候我們可以使用插件方式來制作。

我們可以通過 JS 修改元素的大小、顏色、位置等樣式。

1.6. 移動端常用開發框架

1.6.1. 移動端視頻插件 zy.media.js

框架，顧名思義就是一套架構，它會基于自身的特點向用戶提供一套較為完整的解決方案。框架的控制權在框架本身，使用者要按照框架所規定的某種規范進行開發。

插件一般是為了解決某個問題而專門存在，其功能單一，并且比較小。

前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能開發PC端，也能開發移動端

前端常用的移動端插件有 swiper、superslide、iscroll等。

框架： 大而全，一整套解決方案

插件： 小而專一，某個功能的解決方案

1.6.2. Bootstrap

Bootstrap 是一個簡潔、直觀、強悍的前端開發框架，它讓 web 開發更迅速、簡單。

它能開發PC端，也能開發移動端

Bootstrap JS插件使用步驟：

1.引入相關js 文件

2.復制HTML 結構

3.修改對應樣式

4.修改相應JS 參數

1.7. 本地存儲

隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，HTML5規范提出了相關解決方案。

1.7.1.本地存儲特性

1、數據存儲在用戶瀏覽器中

2、設置、讀取方便、甚至頁面刷新不丟失數據

3、容量較大，sessionStorage約5M、localStorage約20M

4、只能存儲字符串，可以將對象JSON.stringify() 編碼后存儲

1.7.2.window.sessionStorage

1、生命周期為關閉瀏覽器窗口

2、在同一個窗口(頁面)下數據可以共享

3、以鍵值對的形式存儲使用

存儲數據：

sessionStorage.setItem(key, value)

獲取數據：

sessionStorage.getItem(key)

刪除數據：

sessionStorage.removeItem(key)

清空數據：(所有都清除掉)

sessionStorage.clear()

1.7.3.window.localStorage

1、聲明周期永久生效，除非手動刪除 否則關閉頁面也會存在

2、可以多窗口（頁面）共享（同一瀏覽器可以共享）

3. 以鍵值對的形式存儲使用

存儲數據：

localStorage.setItem(key, value)

獲取數據：

localStorage.getItem(key)

刪除數據：

localStorage.removeItem(key)

清空數據：(所有都清除掉)

localStorage.clear()

1.7.4.案例：記住用戶名

如果勾選記住用戶名， 下次用戶打開瀏覽器，就在文本框里面自動顯示上次登錄的用戶名

案例分析

1. 把數據存起來，用到本地存儲

2. 關閉頁面，也可以顯示用戶名，所以用到localStorage

3. 打開頁面，先判斷是否有這個用戶名，如果有，就在表單里面顯示用戶名，并且勾選復選框

4. 當復選框發生改變的時候change事件

5. 如果勾選，就存儲，否則就移除
   

?$原創不易，還希望各位大佬支持一下$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$