zepto | 易学教程

读Zepto源码之样式操作

阅读更多关于读Zepto源码之样式操作

这篇依然是跟 dom 相关的方法，侧重点是操作样式的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto1.2.0 内部方法 classRE classCache = {} function classRE(name) { return name in classCache ? classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name + '(\\s|$)')) } 这个函数是用来返回一个正则表达式，这个正则表达式是用来匹配元素的 class 名的，匹配的是如 className1 className2 className3 这样的字符串。 calssCache 初始化时是一个空对象，用 name 用为 key ，如果正则已经生成过，则直接从 classCache 中取出对应的正则表达式。否则，生成一个正则表达式，存储到 classCache 中，并返回。来看一下这个生成的正则， '(^|\\s)' 匹配的是开头或者空白（包括空格、换行、tab缩进等），然后连接指定的 name ，再紧跟着空白或者结束。 maybeAddPx cssNumber = { 'column-count': 1, 'columns': 1,

jquery/zepto 圣诞节雪花飞扬

阅读更多关于 jquery/zepto 圣诞节雪花飞扬

下载地址： http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 个人的demo：新建并且引用以下js文件： (function($){ $.snowfall = function(element, options){ var defaults = { flakeCount : 35, flakeColor : '#ffffff', flakeIndex: 999999, minSize : 1, maxSize : 2, minSpeed : 1, maxSpeed : 5, round : false, shadow : false, collection : false, collectionHeight : 40, deviceorientation : false }, options = $.extend(defaults, options), random = function random(min, max){ return Math.round(min + Math.random()*(max-min)); }; $(element).data("snowfall", this)

mobile web曾经的踩过坑

阅读更多关于 mobile web曾经的踩过坑

兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些. 但是手机端,虽然出了很多工具,但是调试依然比PC端麻烦很多.而且很多坑是因为手机浏览器本身的bug,一旦出现,相应的解决方案很难根据以前的经验进行推测.只能寄希望于谷歌 + 猜. 这里记录一下我做手机端浏览器曾经踩过的坑.之所以用”曾经”,随着版本的更新,有些问题没了. 另外我(我司)没有足够的人力和物力对很多手机浏览器进行测试,我也只需要兼容iPhone 4s(老大有一个4s的玩物,不然可以从5开始!-!)以上系列和很新的安卓手机.这点和大公司没法比,群里有个百度的朋友,低版本的安卓和 windows phone都要兼容…所以这篇文章当抛砖引玉了 (1)position:fixed position:fixed 应该是反映最多的问题.但是手机屏幕很小,对于一些要重点突出的地方,还特别需要fixed在视口的某个位置, 我遇到的问题包括: 呼出系统输入法后,fixed元素位置乱飘. fixed的元素是后弹出的,点击发生击穿现象(会触发弹层下面元素的click) 涉及整页动画时,元素位置乱飘如果祖先元素使用了 transform 相关的样式,fixed元素的不按照视口来定位. 解决的思路用代码,触发一下滚动

Backbone.js Memory Management, Rising DOM Node Count

阅读更多关于 Backbone.js Memory Management, Rising DOM Node Count

Situation : I'm working on a pretty decently complex single page Backbone app that could potentially be running for 8-12+ hours straight. Because of this, there's a need to ensure that the application won't leak and have a reputation for crashing after X hours or slow down dramatically. The Application : The app is built on Backbone (mv*), Zepto (similar to jquery), Curl (amd loader) & Mustache (templating). Problem : I've just conquered the event listeners. The garbage collector seems to be doing a fine job cleaning these guys up, but the DOM Node Count won't stop climbing. Questions : Is

Zepto fallback to jQuery

阅读更多关于 Zepto fallback to jQuery

问题 I'm using ZeptoJS for my web app, but I'd like to fall back to jQuery if the browser doesn't support Zepto. Since IE is the only major browser not supported at the moment, I'm tempted to detect IE: if(navigator.appName == 'Microsoft Internet Explorer'){ // load jquery } else { // load zepto } but I'd prefer to specificly detect Zepto support and use jQuery in other cases. Is there a feature detection way to do this? 回答1: This might be a crazy idea (I'm not sure if Zepto will even load on an

'Access-Control-Allow-Origin' error in Spring MVC + Zepto POST

阅读更多关于 'Access-Control-Allow-Origin' error in Spring MVC + Zepto POST

问题 I'm trying to POST a JSON object to my Spring MVC controller, but I only receive an Access-Control-Allow-Origin error. My controller: @RequestMapping(value= "/add", method = RequestMethod.POST, headers = {"content-type=application/json"}) public @ResponseBody Reponse addUser(Model model, @RequestBody @Valid @ModelAttribute("user") User user, BindingResult result) { if (result.hasErrors()) { Reponse error = new Reponse(); // etc...... return error; } else { return service.addUser(user); } } My

Backbone.js Memory Management, Rising DOM Node Count

阅读更多关于 Backbone.js Memory Management, Rising DOM Node Count

问题 Situation : I'm working on a pretty decently complex single page Backbone app that could potentially be running for 8-12+ hours straight. Because of this, there's a need to ensure that the application won't leak and have a reputation for crashing after X hours or slow down dramatically. The Application : The app is built on Backbone (mv*), Zepto (similar to jquery), Curl (amd loader) & Mustache (templating). Problem : I've just conquered the event listeners. The garbage collector seems to be

How do I POST an array of objects with $.ajax (jQuery or Zepto)

阅读更多关于 How do I POST an array of objects with $.ajax (jQuery or Zepto)

I'd like to POST an array of objects with $.ajax in Zepto or Jquery. Both exhibit the same odd error, but I can't find what I'm doing wrong. The data saves to the server when sent using a test client like 'RestEasy', and I can see the request getting mangled in the browser's net panel, so I believe JS is the culprit. If I send an array of objects as the data property of a POST, they are not properly sent. Data object: var postData = [ { "id":"1", "name":"bob"} , { "id":"2", "name":"jonas"} ] Request: $.ajax({ url: _saveDeviceUrl , type: 'POST' , contentType: 'application/json' , dataType:

zepto轮播图

阅读更多关于 zepto轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"> <title>Title</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } .clearFix:after, .clearFix:before{ clear: both; height: 0; line-height: 0; visibility: hidden; display: block; content: ""; } .container{ max-width: 640px; min-width: 320px; margin: 0 auto; position: relative; overflow: hidden; } .container>ul:first-child{ width: 1000%; transform: translateX(-10%); } .container>ul:first-child>li{ width: 10%;

How do I POST an array of objects with $.ajax (jQuery or Zepto)

阅读更多关于 How do I POST an array of objects with $.ajax (jQuery or Zepto)

问题 I'd like to POST an array of objects with $.ajax in Zepto or Jquery. Both exhibit the same odd error, but I can't find what I'm doing wrong. The data saves to the server when sent using a test client like 'RestEasy', and I can see the request getting mangled in the browser's net panel, so I believe JS is the culprit. If I send an array of objects as the data property of a POST, they are not properly sent. Data object: var postData = [ { "id":"1", "name":"bob"} , { "id":"2", "name":"jonas"} ]