Web APIs-07：本地儲存 + 移動端開發框架 + classList屬性

落花流雨發表於2020-10-19

WebAPI框架

1.1.3 移動端拖動元素

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

拖動元素三步曲：

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

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

（3）離開手指 touchend:

注意：手指移動也會觸發滾動螢幕所以這裡要阻止預設的螢幕滾動 e.preventDefault();

1.2. 移動端常見特效

1.2.1 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');

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .bg {
      background-color: black;
    }
  </style>
</head>

<body>
  <div class="one two"></div>
  <button> 開關燈</button>
  <script>
    // classList 返回元素的類名
    var div = document.querySelector('div');
    // console.log(div.classList[1]);
    // 1. 新增類名  是在後面追加類名不會覆蓋以前的類名 注意前面不需要加.
    div.classList.add('three');
    // 2. 刪除類名
    div.classList.remove('one');
    // 3. 切換類
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      document.body.classList.toggle('bg');
    })
  </script>
</body>

</html>

1.3.1. 案例：返回頂部

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

點選可以返回頂部

1.3.2.案例分析

滾動某個地方顯示
事件：scroll頁面滾動事件
如果被捲去的頭部（window.pageYOffset ）大於某個數值
點選，window.scroll(0,0) 返回頂部

// 返回頂部模組製作
  var goBack = document.querySelector('.goBack');
  var nav = document.querySelector('nav');
  window.addEventListener('scroll', function () {
    if (window.pageYOffset >= nav.offsetTop) {
      goBack.style.display = 'block';
    } else {
      goBack.style.display = 'none';
    }
  });
  goBack.addEventListener('click', function () {
    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 延遲。

原理就是：

當我們手指觸控螢幕，記錄當前觸控時間
當我們手指離開螢幕，用離開的時間減去觸控的時間
如果時間小於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) {
            // 如果手指觸控和離開時間小於150ms 算點選
            if (!isMove && (Date.now() - startTime) < 150) {  
                callback && callback(); // 執行回撥函式
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}

//呼叫  
tap(div, function(){   // 執行程式碼  });

使用外掛。fastclick 外掛解決300ms 延遲。

1.5. 移動端常用開發外掛

1.5.1. 什麼是外掛

移動端要求的是快速開發，所以我們經常會藉助於一些外掛來幫我完成操作，那麼什麼是外掛呢？

JS 外掛是 js 檔案，它遵循一定規範編寫，方便程式展示效果，擁有特定功能且方便呼叫。如輪播圖和瀑布流外掛。

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

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

fastclick 外掛解決 300ms 延遲。使用延時

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

1.5.2. 外掛的使用

引入 js 外掛檔案。
按照規定語法使用。
fastclick 外掛解決 300ms 延遲。使用延時

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.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

1.6. 移動端常用開發框架

1.6.1. 移動端視訊外掛 zy.media.js

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

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

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

前端常用的移動端外掛有 swiper、superslide、iscroll等。

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

外掛：小而專一，某個功能的解決方案

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

宣告週期永久生效，除非手動刪除否則關閉頁面也會存在
可以多視窗（頁面）共享（同一瀏覽器可以共享）
以鍵值對的形式儲存使用