zepto | 易学教程

Zepto事件模块源码分析

阅读更多关于 Zepto事件模块源码分析

Zepto事件模块源码分析一、保存事件数据的handlers 我们知道js原生api中要移除事件，需要传入绑定时的回调函数。而Zepto则可以不传入回调函数，直接移除对应类型的所有事件。原因就在于Zepto在绑定事件时，会把相关的数据都保存到 handlers 对象中，因此就可以在这个变量中查找对应事件的回调函数，来移除事件。 handlers 对象的数据格式如下： { 1: [ // handlers的值为DOM元素的_zid { del: function() {}, // 实现事件代理的函数 e: "click", // 事件名称 fn: function() {}, // 用户传入的回调函数 i: 0, // 该对象在数组里的下标 ns: "", // 事件的命名空间，只用使用$.fn.triggerHandler时可用，$.fn.trigger不能使用。 proxy: function(e) {}, // 真正绑定事件时的回调函数，里面判断调用del或者fn sel: undefined // 要进行事件代理时传入的selector } ] } 二、绑定事件主要流程图流程说明处理参数实现函数重载实现函数重载的重点就是判断参数的类型，处理参数： // 处理参数，实现函数重载 if (!isString(selector) && !isFunction

zepto中的动画+Ajax+touch模块+zepto插件

阅读更多关于 zepto中的动画+Ajax+touch模块+zepto插件

zepto中的动画 zepto中不具备动画模块，需要单独引入 fx.js 和 fx_methods.js https://github.com/madrobby/zepto toggle 元素显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zepto</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> </style> </head> <body> <div>box</div> <button id="btn">点我</button> <script src="js/zepto.min.js"></script> <script src="js/fx.js"></script> <script src="js/fx_methods.js"></script> <script> $("#btn").click(function(){ $("div").toggle(); $("div").toggle("slow"); $("div").toggle(3000); }) </script> </body> <

zepto源码研究 - touch.js

阅读更多关于 zepto源码研究 - touch.js

简要：touch.js 主要提供滑动(swipe)与点击(tap：模拟click)的事件封装，针对手机常用浏览器(touchstart,touchmove,touchend)和IE10(msPointDown)的触摸事件兼容处理以及手势的事件处理。之所以封装touchstart形成tap是因为要解决点透问题，并且模拟click有双击与长按功能。源码分析如下： // Zepto.js // (c) 2010-2016 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture //(x1,y1)为开始点，(x2,y2)为结束点，判断滑动的方向 function swipeDirection(x1, x2, y1, y2) { return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down') } //长按触发事件

zepto源码研究 - callback.js

阅读更多关于 zepto源码研究 - callback.js

简要： $.Callbacks是一个生成回调管家Callback的工厂，Callback提供一系列方法来管理一个回调列表($.Callbacks的一个私有变量list)，包括添加回调函数，删除回调函数等等...,话不多说看正文： var memory, // Last fire value (for non-forgettable lists) fired, // Flag to know if list was already fired //是否回调过 firing, // Flag to know if list is currently firing //回调函数列表是否正在执行中 firingStart, // First callback to fire (used internally by add and fireWith) //第一回调函数的下标，启动回调任务的开始位置 firingLength, // End of the loop when firing //回调函数列表长度？ firingIndex, // Index of currently firing callback (modified by remove if needed),正在执行回调函数的索引 list = [], // Actual callback list //回调数据源：回调列表

zepto源码研究 - event.js（高层api）

阅读更多关于 zepto源码研究 - event.js（高层api）

简要：本文主要介绍event.js中暴露出来的api，包括各种注册，移除事件方法和手动触发事件的方法，这些api都是调用了上一篇所讲到的底层api。 /** * 绑定事件,应直接采用on * 源自1.9版本前jquery的绑定事件的区分： bind()是直接绑定在元素上 .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。 .delegate()则是更精确的小范围使用事件代理，性能优于.live() .on()则是1.9版本整合了之前的三种方式的新事件绑定机制 * @param event * @param data * @param callback * @returns {*} */ $.fn.bind = function(event, data, callback){ return this.on(event, data, callback) } /** * 解绑事件,应直接用off * @param event * @param callback * @returns {*} */ $.fn.unbind = function(event, callback){ return this.off(event, callback) } /** * 绑定一次性事件 * @param

Zepto核心模块源代码分析

阅读更多关于 Zepto核心模块源代码分析

一、Zepto核心模块架构 Zepto核心模块架构图该图展示了Zepto核心模块架构代码的组织方式。主要分为私有变量、函数和暴露给用户的所有api。 Zepto核心模块架构代码该图展示了Zepto的核心模块架构代码，忽略了所有实现的细节。 var Zepto = (function() { // 私有变量($和zepto不是私有变量，它们会被暴露出去) var undefined, emptyArray = [], filter = emptyArray.filter, slice = emptyArray.slice, $, zepto = {}; // 私有函数 function likeArray() {} // Z类 function Z() {} // 构建Z对象的主要函数 zepto.matches = function() {}; zepto.fragment = function() {}; zepto.Z = function() { return new Z(dom, selector) }; zepto.isZ = function() { return object instanceof zepto.Z }; zepto.init = function() {}; zepto.qsa = function() {}; // Z对象的共享方法 $.fn =

zepto返回顶部动画

点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离 var x = Math.max(x1, Math.max(x2, x3)); // 滚动条到页面顶部的垂直距离 var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小,

zepto touch事件

阅读更多关于 zepto touch事件

zepto touch事件击打事件 1、tap() 点击/敲打事件,只要点击就会触发,无论单双击 2、singleTap() 单击事件 3、doubleTap() 双击事件 3、longTap() 长按事件，当按下事件超过750ms时触发,长按过程中只会触发一次滑动事件(以30像素为基准) 4、swipe() 滑动事件,手指滑动默认为翻页，所以要执行滑动事件，要禁止滑动事件的默认行为touch-action:none;默认为auto开启 5、swipeLeft() 左滑动事件 6、swipeRight() 右滑动事件 7、swipeUp() 上滑动事件 8、swipeDown() 下滑动事件代码示例: < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" / > < title > zepto_touch < / title > < style type = "text/css" > * { touch - action : none ; } . box {

Zepto的学习（3）移动端小案例的演练

阅读更多关于 Zepto的学习（3）移动端小案例的演练

这里参考尚硅谷的一个小实战演练，主要用到了css3，Zepto等等，还不错。这里是链接：提取码：2zy8 效果可以实现移动端的各个翻页情况： $ ( function ( ) { //初始化数据 var direction = { up : 1 , right : 2 , down : 3 , left : 4 } //初始化两个坐标 var now = { col : 1 , //纵向坐标 row : 1 //横向坐标 } var last = { col : 0 , //纵向坐标 row : 0 //横向坐标 } //初始化变量，表示页面没有在滑动 var isMoving = false //向上滑动 $ ( '.page' ) . swipeUp ( function ( ) { //判断是否滑动 if ( isMoving ) { return } last . col = now . col last . row = now . row if ( last . col < 5 ) { //计算滑动之后进场也页面的坐标 now . col = last . col + 1 now . row = last . row movePage ( direction . up ) } } ) //向下滑动 $ ( '.page' ) . swipeDown (

这些Zepto中实用的方法集

阅读更多关于这些Zepto中实用的方法集

前言时间过得可真快，转眼间2017年已去大半有余，你就说吓不吓人，这一年你成长了多少，是否荒度了很多时光，亦或者天天向上，收获满满。今天主要写一些看Zepto基础模块时，比较实用的部分内部方法，在我们日常工作或者学习中也会用的到。源码仓库原文链接 1. 将数组铺平(flatten) 面试或者工作中经常遇到要将多维数组铺平成一维数组。例如将 [1, 2, [3], [4], [5]] 最后变成 [1, 2, 3, 4, 5] function flatten(array) { return array.length > 0 ? $.fn.concat.apply([], array) : array } 这里先将 $.fn.concat 理解成原生数组的 concat方法 ,我们会发现，其实他只能铺平一层。例如 [1, 2, [3], [4, [5]]] => [1, 2, 3, 4, [5]] 那怎样才能将多层嵌套的数组完全铺平为一层呢？这里介绍两种方式。方式1 let flatten = (array) => { return array.reduce((result, val) => { return result.concat(Array.isArray(val) ? flatten(val) : val) }, []) } 测试 let testArr1 = [1,

订阅 zepto