随笔分类 - zepto源码研究
摘要：简要：touch.js 主要提供滑动(swipe)与点击(tap：模拟click)的事件封装，针对手机常用浏览器(touchstart,touchmove,touchend)和IE10(msPointDown)的触摸事件兼容处理以及手势的事件处理。之所以封装touchstart形成tap是因为要解决
阅读全文
摘要：简要：依赖fx.js，主要是针对show，hide，fadeIn，fadeOut的封装。 源码如下： $.fn.show: 先调用原方法显示出来，如果参数有speed，callback则先让元素变透明调用anim逐步将元素显示出来，最后调用callback回调方法。 $.fn.hide: 和$.fn
阅读全文
摘要：简要：zepto 提供了一个基础方法animate来方便我们运用css动画。主要针对transform，animate以及普通属性(例如left，right，height，width等等)的transition过渡。 在js中能方便的，灵活的调用animate方法来操作元素动画。 源码如下： 整个f
阅读全文
摘要：简要：$.fn.data存储的时候会将value转化为字符串然后存储起来，取出后还得JOSN.parse(),对于dom而言不仅增加了自定义属性，读取也不方便，不适合为dom关联大量数据，这里的data.js 会在内存中开辟一块地方专门存放数据，然后在dom上关联一个可以指示存放位置的标识。 源码如
阅读全文
摘要：简要：$.ajax是zepto发送请求的核心方法，$.get,$.post,$.jsonp都是封装了$.ajax方法。$.ajax将jsonp与异步请求的代码格式统一起来，内部主要是先处理url，数据和请求头部然后新建XMLHttpRequest对象发送请求。 代码如下： 大致流程如下： 1：根据$
阅读全文
摘要：简要：jsonp是一种服务器和客户端信息传递方式，一般是利用script元素赋值src来发起请求。一般凡是带有src属性的元素发起的请求都是可以跨域的。 那么jsonp是如何获取服务器的数据的呢？ jsonp先将指定的一个函数名作为url后面的参数传递到服务器，服务器取得函数名并将要传递的数据形成j
阅读全文
摘要：简要：ajax请求具有能够触发各类事件的功能，包括：触发全局事件，请求发送前事件，请求开始事件，请求结束事件等等，贯穿整个ajax请求过程，这是非常有用的，我们可以利用这些事件来做一些非常有意思的事情比如：拦截器，权限管理等等，另外$.ajax()貌似会返回一个异步请求对象xhr，这个xhr也是继承
阅读全文
摘要：简要：本文主要介绍event.js中暴露出来的api，包括各种注册，移除事件方法和手动触发事件的方法，这些api都是调用了上一篇所讲到的底层api。 on: 首先是针对不同的参数输入情况做出对应的重新赋值，这里是一个小的技巧：一般对于不同的参数做出判断是这样的： input(arg1,null,ar
阅读全文
摘要：简要 : event.js主要用于提供注册自定义事件和手动触发事件的功能。大概的实现方式是：首先开辟一个存放自定义事件的响应池并关联到元素的zId属性上。定义底层api来存取并执行响应池里面的方法。最后封装底层api，提供便捷的方法显式调用。包括注册(on,bind),移除(off,unbind)，
阅读全文
摘要：简要：form.js的主要功能是序列化form表单里面字段和注册submit事件以及触发表单提交事件。如下源码： serializeArray： 1：add = function(value) { if (value.forEach) return value.forEach(add) result
阅读全文
摘要：width height 模板方法 读写width/height /./ 是匹配除换行(\n)以外所有的字符，不加/g，只会匹配一个字符，这里匹配的是h或w var name = "height".replace(/./,function(m){ console.log(m); return m[0
阅读全文
摘要：index: obj.index(element) : 如果element有，则obj作为一个数组，取element在这个obj中的索引。如果element没有，则此函数的意思是取dom节点所在父类中的索引。 hasClass： array.some(function(curentValue,ind
阅读全文
摘要：$.each: 这里的elements可以是数组或者对象，如果是对象，则会将其原型里面的属性也遍历出来，最后返回elments本身，如果回调函数返回了false，则终止循环 remove： 这里的重点是parentNode.removeChild(this); 如果是没有父节点的这里不会执行。 is
阅读全文
摘要：pluck： 获取zepto对象的父节点时用到 filtered: parent： $.map: parents: 这里的$.map还有过滤功能，callback若返回null或undefined，则映射值不会写入nodes数组中。这里的parents的调用者只能是单个dom的zepto集合，先是遍
阅读全文
摘要：简要：当我们用$()时，便会直接调用zepto.init 生成zepto对象，那zepto.init是如何根据不同类型的参数来生产指定对象呢？ 1：这里首先判断如果没有传入参数，则返回新建的zepto对象 2：如果传入的是函数，$(function(){}) ,则执行$(document).read
阅读全文
摘要：简要：网上已经有很多人已经将zepto的源码研究得很细致了，但我还是想写下zepto源码系列，将别人的东西和自己的想法写下来以加深印象也是自娱自乐，文章中可能有许多错误，望有人不吝指出，烦请赐教。 首先是整个大致流程： zepto开头就是变量的初始化： concat = emptyArray.con
阅读全文
摘要：简要：zepto的deferred.js 并不遵守promise/A+ 规范，而在jquery v3.0.0中的defer在一定程度上实现了promise/A+ ，因此本文主要研究jquery v3.0.0中的defer。 首先 在上源码前，本人觉得有必要认识一下promise/A+ 规范：http
阅读全文
摘要：简要：$.Callbacks是一个生成回调管家Callback的工厂，Callback提供一系列方法来管理一个回调列表($.Callbacks的一个私有变量list)，包括添加回调函数， 删除回调函数等等...,话不多说看正文： memory的值由传入$.Callbacks的形参对象决定，具有状态记
阅读全文
浙公网安备 33010602011771号