Javascript高級知識之移動端和本地存盤-有解無憂

移動端觸屏事件

移動端瀏覽器兼容性較好，我們不需要考慮以前JS 的兼容性問題，可以放心的使用原生JS 書寫效果，但是移動端也有自己獨特的地方，比如觸屏事件touch（也稱觸摸事件），Android 和IOS 都有，

touch 物件代表一個觸摸點，觸摸點可能是一根手指，也可能是一根觸摸筆，觸屏事件可回應用戶手指（或觸控筆）對螢屏或者觸控板操作，

在這里插入圖片描述
觸摸事件物件TouchEvent

TouchEvent是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件，這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等touchstart、touchmove、touchend 三個事件都會各自有事件物件，重點關注targetTouches這個屬性

在這里插入圖片描述

    <script>
        // 觸摸事件物件
        // 1. 獲取元素
        // 2. 手指觸摸DOM元素事件
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function(e) {
            // console.log(e);
            // touches 正在觸摸螢屏的所有手指的串列 
            // targetTouches 正在觸摸當前DOM元素的手指串列
            // 如果偵聽的是一個DOM元素，他們兩個是一樣的
            // changedTouches 手指狀態發生了改變的串列 從無到有 或者 從有到無
            // 因為我們一般都是觸摸元素 所以最經常使用的是 targetTouches
            console.log(e.targetTouches[0]);
            // targetTouches[0] 就可以得到正在觸摸dom元素的第一個手指的相關資訊比如 手指的坐標等等


        });
        // 3. 手指在DOM元素身上移動事件
        div.addEventListener('touchmove', function() {


        });
        // 4. 手指離開DOM元素事件
        div.addEventListener('touchend', function(e) {
            // console.log(e);
            // 當我們手指離開螢屏的時候，就沒有了 touches 和 targetTouches 串列
            // 但是會有 changedTouches


        });
    </script>

經典案例1之移動端拖動元素

touchstart、touchmove、touchend 可以實作拖動元素
但是拖動元素需要當前手指的坐標值我們可以使用targetTouches[0] 里面的pageX 和pageY
移動端拖動的原理：手指移動中，計算出手指移動的距離，然后用盒子原來的位置+ 手指移動的距離
手指移動的距離：手指滑動中的位置減去手指剛開始觸摸的位置
拖動元素三步曲：
（1）觸摸元素touchstart：獲取手指初始坐標，同時獲得盒子原來的位置
（2）移動手指touchmove：計算手指的滑動距離，并且移動盒子
（3）離開手指touchend:注意：手指移動也會觸發滾動螢屏所以這里要阻止默認的螢屏滾動e.preventDefault();

<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // （1） 觸摸元素 touchstart：  獲取手指初始坐標，同時獲得盒子原來的位置
        // （2） 移動手指 touchmove：  計算手指的滑動距離，并且移動盒子
        // （3） 離開手指 touchend:
        var div = document.querySelector('div');
        var startX = 0; //獲取手指初始坐標
        var startY = 0;
        var x = 0; //獲得盒子原來的位置
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            //  獲取手指初始坐標
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            //  計算手指的移動距離： 手指移動之后的坐標減去手指初始的坐標
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移動我們的盒子 盒子原來的位置 + 手指移動的距離
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); // 阻止螢屏滾動的默認行為
        });
    </script>
</body>

</html>

移動端常見特效

先來介紹一個屬性把，叫做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’);
注意以上方法里面，所有類名都不帶點

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

經典案例2之移動端回傳頂部，基本業務邏輯是下滑到某個距離時，就出現一個小圖示，如果我們點擊這個小圖示就可以回傳到最頂部啦！所以我們注意這個window.scroll這個方法，很有意思，值得我們留意一下，

    // 回傳頂部模塊制作
    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);
    })

移動端的click事件會有300ms的延時，原因是移動端螢屏雙擊會縮放頁面，因此它會監聽我們到底是單擊還是雙擊，所以之間設了一個延時，當然我們有解決方法，

簡單粗暴，禁用縮放功能

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

利用touch事件，可以封裝函式，當我們手指觸摸螢屏，記錄當前觸摸時間，當我們離開時，用離開的事件減去觸摸的時間，如果小于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(){   // 執行代碼});

當然我們可以使用fastclick插件，來解決這個延遲，fastclick 原理: 在檢測到touchend事件的時候，會通過DOM自定義事件立即出發模擬一個click事件，并把瀏覽器在300ms之后真正的click事件阻止掉，用法如下

<!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>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
    <script src="fastclick.js"></script>
</head>

<body>
    <div></div>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
        var div = document.querySelector('div');
        div.addEventListener('click', function() {
            alert(11);
        })
    </script>
</body>

</html>

參考文章如下

移動端開發插件框架

Swiper插件
Superslide插件
Iscroll插件

1.確認插件實作的功能
2.去官網查看使用說明
3.下載插件
4.打開demo實體檔案，查看需要引入的相關檔案，并且引入
5.復制demo實體檔案中的結構html，樣式css以及js代碼

介紹一下框架的概念把

框架，顧名思義就是一套架構，它會基于自身的特點向用戶提供一套較為完整的解決方案，
框架的控制權在框架本身，使用者要按照框架所規定的某種規范進行開發，
前端常用的框架有Bootstrap、Vue、Angular、React 等，既能開發PC端，也能開發移動端
前端常用的移動端插件有swiper、superslide、iscroll等，插件一般是為了解決某個問題而專門存在，其功能單一，并且比較小，
框架：大而全，一整套解決方案
插件：小而專一，某個功能的解決方案

感興趣的可以去了解Bootstrap 但是作為初學者的話，前期盡量自己搭載頁面，自己寫一些邏輯結構，當然對于輪播圖或者一些復雜動態效果，我們直接拿來用就可以

window.sessionStorage

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

本地存盤特性
1、資料存盤在用戶瀏覽器中
2、設定、讀取方便、甚至頁面重繪不丟失資料
3、容量較大，sessionStorage約5M、localStorage約20M
4、只能存盤字串，可以將物件JSON.stringify()編碼后存盤

然而對于session來說特點如下，代碼如下
1、生命周期為關閉瀏覽器視窗
2、在同一個視窗(頁面)下資料可以共享
3. 以鍵值對的形式存盤使用

<!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>
</head>

<body>
    <input type="text">
    <button class="set">存盤資料</button>
    <button class="get">獲取資料</button>
    <button class="remove">洗掉資料</button>
    <button class="del">清空所有資料</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 當我們點擊了之后，就可以把表單里面的值存盤起來
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 當我們點擊了之后，就可以把表單里面的值獲取過來
            console.log(sessionStorage.getItem('uname'));

        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
            // 當我們點擊了之后，清除所有的
            sessionStorage.clear();

        });
    </script>
</body>

</html>

window.localStorage

1、宣告周期永久生效，除非手動洗掉否則關閉頁面也會存在
2、可以多視窗（頁面）共享（同一瀏覽器可以共享）
3. 以鍵值對的形式存盤使用

<!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>
</head>

<body>
    <input type="text">
    <button class="set">存盤資料</button>
    <button class="get">獲取資料</button>
    <button class="remove">洗掉資料</button>
    <button class="del">清空所有資料</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));

        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');

        })
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/349639.html

標籤：其他

上一篇：(入門級)JavaScript發送驗證碼按鈕，一分鐘內不能重復發送，前端計時器

下一篇：VUE 常用指令