zepto

【推荐阅读】微服务还能火多久？>>> 本文作者总结了这两年 前端 的主流技术，对应技术博客地址： http://ouvens.github.io 一、框架与组件 bootstrap等UI框架设计与实现 伸缩布局：grid网格布局 基础UI样式：元素reset、按钮、图片、菜单、表单 组件UI样式：按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局：布局、结构、样式、媒体、javascript响应式 第三方插件：插件管理 jQuery、zepto使用原理以及插件开发 支持amd、cmd、全局变量的模块化封装 $.fn.method = function(){} mvc/mvvm框架原理设计，vue/angular/avalon等 directive设计：html、text、class、html、attr、repeat、ref，可扩展 filter设计：bool、upperCase、lowerCase，可扩展 表达式设计：if-else等实现 viewmodel结构设计：例如数据，元素，方法的挂载与作用域 数据更变检测：函数触发，脏数据检测、对象hijacking polymer/angular2思想与设计思路 import技术 template和script引入方式 css样式命名空间隔离 简单复用第三方库

Form 模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发 submit 事件，提交表单。 读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook 《 reading-zepto 》 .serializeArray() $.fn.serializeArray = function() { var name, type, result = [], add = function(value) { if (value.forEach) return value.forEach(add) result.push({ name: name, value: value }) } if (this[0]) $.each(this[0].elements, function(_, field){ type = field.type, name = field.name if (name && field.nodeName.toLowerCase() != 'fieldset' && !field.disabled && type != 'submit' && type != 'reset' && type != 'button' && type !=

Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据，和储存跟 DOM 相关的数据。 读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook 《 reading-zepto 》 内部方法 attributeData var data = {}, dataAttr = $.fn.data, camelize = $.camelCase, exp = $.expando = 'Zepto' + (+new Date()), emptyArray = [] function attributeData(node) { var store = {} $.each(node.attributes || emptyArray, function(i, attr){ if (attr.name.indexOf('data-') == 0) store[camelize(attr.name.replace('data-', ''))] = $.zepto.deserializeValue(attr.value) }) return store } 这个方法用来获取给定 node 中所有 data-* 属性的值，并储存到 store 对象中。 node

前言 我们今天直接进入事件相关的学习，因为近期可能会改到里面的代码 就zepto来说，我认为最重要的就是选择器与事件相关了，随着浏览器升级，选择器简单了，而事件相关仍然是核心，今天我们就来学习学习 zepto事件处理部分篇幅不大，不到400行，前面篇幅也很小，所以真的很适合移动开发 变量定义 1 var $$ = $.zepto.qsa,2 handlers = {}, _zid = 1,3 specialEvents = {},4 hover = {5 mouseenter: 'mouseover',6 mouseleave: 'mouseout'7 } 事件部分首先定义了几个变量，$$为zepto选择器的方法，暂时不管他（据观察，好像也没有地方用到了，所以无意义） handlers为一个对象，与_zid息息相关，暂时不知道干什么的（据猜测两个应该是保存函数句柄，为removeEvent做准备） hover应该会同时触发两个事件才会触发，我们这里先不管，继续往下看 这里提供一个zid飞方法，该方法用于保证-zid的唯一性 1 function zid(element) {2 return element._zid || (element._zid = _zid++)3 } 算了，我们这里还是用一个实际点的方法跟进来吧，首先说一个关键的 $.Event(type,

前言 我们移动端基本使用zepto了，而我也从一个小白变成稍微靠谱一点的前端了，最近居然经常要改到zepto源码 但是，我对zepto不太熟悉，其实前端水准还是不够，所以便私下偷偷学习下吧，别被发现了 核心方法$() 我们使用这个方法一般有几个用途（我这里只说我自己用到过的），这里根据使用度排个序： ① 选择器/$(selector) 将返回一个包装过的dom集合对象（有很多选择器） ② html字符串/$(domStr) 仍然返回一个包装过的dom对象，他会将字符串初始化为我们的dom结构 PS：新增了一个方法可以直接赋予dom结构属性，我们这里不关注 ③ 函数/$(function(){}) 我基本没这么用过，他实在文档加载结束后执行 暂时不管这些东西吧。我们这里来一个个看看他们的实现： 1 $('div') 2 //=> all DIV elements on the page 3 $('#foo') 4 //=> element with ID "foo" 5 6 // create element: 7 $("<p>Hello</p>") 8 //=> the new P element 9 // create element with attributes:10 $("<p />",11 {12 text: "Hello",13 id: "greeting",14

前言 在很久之前，我们项目有一个动画功能，功能本身很简单，便是典型的右进左出，并且带动画功能 以当时来说，虽然很简单，但是受限于框架本身的难度，就直接使用了CSS3的方式完成了功能 当时主要使用transform与animation实现功能，并且用了一个settimeout执行回调，然后此事便不了了之了 但是出来混总是要还的，这不，最近相似的东西又提了出来，我们当然可以将原来的那套东西拿来用，但是看着那个settimeout总是不是滋味，因为这样捕捉回调的效果以及可能引起的BUG大家都懂，于是就想使用transitionEnd监控动画结束再执行相关回调，于是便有了一个有趣的想法 当时的心声 嗯，不行，这次我要写一个通用的东西，他至少有这些功能： ① 我可以给他一个CSS变化属性 ② 我可以给他一个时间长度 ③ 我可以给他一个动画曲线参数 有了以上东西我就可以让一个元素触发动画，并且对其注册transitionEnd事件，最后执行我们的回调，于是我基本就陷进去了 但是，我想着想着突然感觉不对，感觉以上东西好像在哪里见过，于是一个叫 animate 的东西冒了出来 突然一刹那，我有一个不妙的感觉，搞出来一看： animate animate(properties, [duration, [easing, [function(){ ... }]]]) ⇒ self animate

注意：用心找自己做的项目中自己感觉最拿出来手的（复杂度最高，用的技术最多的项目），描述的时候尽可能往里面添加一些技术名词 布局我们用html5+css3 我们会用reset.css重置浏览器的默认样式 JS框架的话我们选用的是jQuery(也可能是Zepto) 我们用版本控制工具git来协同开发 我们会基于gulp搭建的前端自动化工程来开发（里面包含有我们的项目结构、我们需要引用的第三方库等一些信息，我们还实现了sass编译、CSS3加前缀等的自动化） 我们的项目中还用到了表单验证validate插件、图片懒加载Lazyload插件 来源： https://www.cnblogs.com/Rivend/p/12642745.html

相关知识点 移动端、 适配（兼容）、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决方案 手机浏览器独有的三个事件？ onTouchmove，ontouchend，ontouchstart，ontouchcancel 为什么要用Zepto? jquery适用于PC端桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其表现在兼容性上面，相对于PC端，移动端的发杂都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只需要1~3秒（90+K），但是移动端就慢了很多，2G网络下你会看到一大片空白网页在加载，相信用户第二次就没打开的欲望了。zepto解决了这个问题，只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。所以移动端开发首选框架，个人推荐zepto.js。 IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页

一、click 和 tap 比较 两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。 singleTap和doubleTap 分别代表单次点击和双次点击。 二、关于tap的点透处理 在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。 处理方式： （1）、 github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick 将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如： 1 2 3 $( function (){ new FastClick(document.body); }) 然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。 当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击 实践开发中发现，当元素绑定fastclick后，click响应速度比tap还要快一点点。哈哈 （2）

移动h5开发资源整理 这2年来，移动h5开发逐渐成为一种主流，也不断趋向于成熟。硬件和浏览器的不断更新，曾经的浏览器兼容也不再是开发者的噩梦。 接触h5开发一年多，从最初的新手到现在，陆陆续续遇到过很多坑。这里把想到的一些经验与资源罗列出来，给刚入h5的同学带来一些帮助。该文章会持续更新。 内容比较多，可以点击下方『悬浮菜单按钮』进行选择需要阅读的章节。 基础知识 新手建议看看下面的在线教程。 html,css,JavaScript,jQuery在线教程： w3school在线教程： http://www.w3school.com.cn/ 菜鸟教程： http://www.runoob.com/ 参考手册： jQuery： http://hemin.cn/jq/ css： http://css.doyoe.com/ h5页面基本组成 meta viewport模板 以上支持响应式布局设计。 有用的js类库 jQuery 这个必须学会的。 在线教程： http://www.w3school.com.cn/jquery/index.asp 在线手册： http://hemin.cn/jq/ Zepto Zepto和jQuery基本是一样的，只是由于其体积更小，适合移动端使用。 如果你会用jquery，那么你也会用zepto。注意，zepto并没有实现jQuery的所有功能