JavaScript框架篇—

什么是zepto?

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto。

Query更多是在PC端被应用，Zepto更多是在移动端被应用；也正是因为jQuery用在PC端,
jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大；也正是因为Zepto用在移动端,
Zepto则是直接抛弃了低级浏览器的适配问题 , 所以代码更少体积更小；综上所述:
Zepto其实就是专门用于移动端的轻量级的jQuery

Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中,在使用的过程中我们可以按需导入, 也就是需要什么功能就导入什么模块
zepto选择器：
Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能如类名和id选择器，如果想使用高级的选择器必须引入高级选择器模块。
zepto动画
1.使用zepto动画要导入相关的模块，其他动画的使用如jQuery中的动画类似。Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能。如果想使用动画必须引入动画模块
2.zepto动画注意点：由于zepto是一个轻量级的针对现代高级浏览器的 JavaScript库，不需要兼容低级浏览器, 所以zepto中的动画是通过CSS3属性来实现动画的，而jQuery中是通过DOM来实现动画的。二者的语法类似。

zepto的tap事件

1.无论PC端还是移动端都支持click事件，而且不仅仅是jQuery和Zepto支持, 原生的JS也支持

2.移动端click事件注意点：在企业开发中如果需要在移动端监听点击事件, 一般不会使用click来监听，因为移动端的事件很多(单击/双击/轻扫/捏合/拖拽等等)，所以如果通过click来监听,系统需要花费100~300毫秒判断到底是什么事件。而移动端对事件的响应速度要求很高, 事件响应越快用户体验就越好。所以如果需要在移动端监听点击事件, 那么请使用tap事件。

3.tap事件：tap事件是Zepto自己封装的一个事件, 解决了原生click事件100~300毫秒的延迟问题

touch事件

1.Zepto是如何实现tap事件的?虽然tap事件是Zepto自己封装的事件, 但是无论如何封装肯定都是通过原生JS来实现的，在原生的JS中专门为移动端新增了几个事件：

touchstart: 手指按下
touchmove: 手指在元素上移动
touchend : 手指抬起

2.注意点:这几个事件只支持移动端, 不支持PC端

 let oDiv = document.querySelector("div");oDiv.ontouchstart = function () {console.log("手指按下");}oDiv.ontouchend = function () {console.log("手指抬起");}oDiv.ontouchmove = function () {console.log("手指移动");

touch事件对象

1.Touch事件对象
移动端的touch事件也是一个事件, 所以被触发的时候系统也会自动传递一个事件对象给我们

2.移动端touch事件对象中比较重要的三个子对象
touches: 当前屏幕上所有手指的列表
targetTouches: 保存了元素上所有的手指里列表
changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指

注意：如果都是将手指按到了同一个元素上, 那么这两个对象中保存的内容是一样的；如果是将手指按到了不同的元素上,
那么这个两个对象中保存的内容不一样。touches保存的是所有元素中的手指, 而targetTouches保存的是当前元素中的手指

手指的位置

1.screenX/screenY是相对于屏幕左上角的偏移位
2.clientX/clientY是相对于可视区域左上角的偏移位
3.pageX/pageY是相对于内容左上角的偏移位

let oDiv = document.querySelector("div");oDiv.ontouchstart = function (event) {// console.log(event.targetTouches[0]);       //返回的是一个手指数组// console.log(event.targetTouches[0].screenX);// console.log(event.targetTouches[0].screenY);console.log(event.targetTouches[0].clientX); // 11console.log(event.targetTouches[0].clientY); // 63console.log(event.targetTouches[0].pageX);  // 686console.log(event.targetTouches[0].pageY);  // 63}

tap事件的实现原理
单击事件特点：
只有一根手指
按下和离开时间不能太久 100ms
按下和离开距离不能太远 5px

         oDiv.ontouchstart = function (event) {// 1.判断当前元素中有几根手指if(event.targetTouches.length > 1){return;}// 2.拿到手指按下的位置startX = event.targetTouches[0].clientX;startY = event.targetTouches[0].clientY;// 3.拿到手指按下的时间startTime = Date.now();}oDiv.ontouchend = function (event) {// 1.判断有几根手指离开了if(event.changedTouches.length > 1){return;}// 2.拿到离开手指的位置let endX = event.changedTouches[0].clientX;let endY = event.changedTouches[0].clientY;// 3.判断手指离开的位置和按下位置的距离if(Math.abs(endX - startX) > 5 ||Math.abs(endY - startY) > 5){return;}// 4.拿到手指离开的时间let endTime = Date.now();// 5.判断手指离开的时间和按下的时间if(endTime - startTime > 100){return;}console.log("单击事件");}

移动的的点透问题
当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件,而下面的元素监听click事件，并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题。
移动端点透问题出现的原因：当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch事件先执行,执行完后从文档上消失，click事件有100~300ms延迟, 所以后执行，但click事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件。
移动端点透问题解决方案：在touch事件中添加event.preverDefault(); 阻止事件扩散。

oTap.ontouchstart = function (event) {this.style.display = "none";event.preventDefault(); //  阻止事件扩散}

解决方案
利用zepto的touch模块进行tap事件即可不产生点透。

zepto的轻扫事件（swipe）
什么是轻扫事件?
手指快速的往左边滑动/或者右边滑动/或者上边滑动/或者下边滑动

 $("div").swipeLeft(function () {// console.log("向左边轻扫");$(this).animate({marginLeft: "0"}, 2000);});$("div").swipeRight(function () {// console.log("向右边轻扫");$(this).animate({marginLeft: "100px"}, 2000);});$("div").swipeUp(function () {// console.log("向上边轻扫");$(this).animate({marginTop: "0"}, 2000);});$("div").swipeDown(function () {// console.log("向下边轻扫");$(this).animate({marginTop: "100px"}, 2000);});

JavaScript框架篇——zepto相关推荐

轻量级的移动开发JavaScript框架-zepto.js
Zepto.js 是移动端轻量级的JavaScript框架,实现JQuery的大部分API,针对手机上web开发,轻量级的是相对性的减少用户访问流量 Zepto官网地址可以到 github上下载 ...
6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
Vue -渐进式JavaScript框架
介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别? Library 库,本质上是一些函 ...
2017年 JavaScript 框架回顾 -- 前端框架
2019独角兽企业重金招聘Python工程师标准>>> 概述: 对于 JavaScript 社区来说,npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库 ...
为什么 Web 开发人员需要学习一个 JavaScript 框架？
原文链接可能当我们结束本文时,一个新的 Javascript 框架已经在某处启动了.但这确实不在我们的控制范围内.因此,我们应该简单地继续我们所拥有的.至少,由于免责声明,我们可以确定我们不是在发明 ...
javascript 框架_我们仍然需要JavaScript框架吗？
javascript 框架 by Luke Joliat 卢克·乔里亚特(Luke Joliat) 我们仍然需要JavaScript框架吗? (Do we still need JavaScript ...
javascript 框架_每个JavaScript框架教程写的时间都超过5分钟
javascript 框架 Roger opened the Medium app on his phone and looked for something interesting to read. ...
2021 年最佳 JavaScript 框架
据 Stackoverflow 的 2021 年开发者调查,JavaScript 已连续第八年成为使用最多的语言,有 67.7% 的受访者选择它.之所以如此受欢迎,主要是因为 JavaScript 是 ...
JavaScript 框架之战结束：React 是最终赢家？
编译 | 张仕影出品 | CSDN(ID:CSDNnews) 框架之间的论战一直以来都是 JavaScript 社区的热门话题,也是业内的圣战之一.从刚开始的 jQuery,到后来的 Angular ...

JavaScript框架篇——zepto

什么是zepto?

zepto的tap事件

JavaScript框架篇——zepto相关推荐

最新文章

热门文章