H5图片上传应用开发中的那些坑……

Author : lovecicy

图片上传是web应用开发中非常常见的功能,在桌面应用开发中,我们有很多插件,比如jQuery File Upload、uploadify,但是在移动端,jQuery太重,而且我们又有许多HTML5的API可以使用,所以,在新的项目里,选择了使用HTML5的file API来实现图片上传的功能。但是,坑也不少啊/(ㄒoㄒ)/~~ 1. 项目介绍 项目中需要上传图片,作为头像或者作为文章的图片。因为没有使用jQuery,也没有使用zepto,而且使用场景只是在移动端,因此选择了不使用插件,使用HTML5的file API。 2. 使用方法 file API的使用方法很简单,可以拆解为以下几步: 在HTML中添加一个input组件,type类型设置为file。 监听input的change事件。 在事件处理函数中,用FileReader api读取图片内容。 监听FileReader对象的onloadend事件,当读取文件完成时,上传图片。 3. 坑们 1. ios下alert弹框会挂 在选择图片后,首先判断图片的类型是否在限定的类型内、图片大小是否超出限定大小,如果超出,则弹出弹框提示用户[Read More]

standard

浅谈 cookie, sessionStorage和localStorage

Author : luckyGirl

HTML5刚出来时,把HTML5的特性翻了一遍,日子一久,不用几乎都忘光了, 最近项目中跟后台在讨论数据本地存储的问题,想到了除了cookie还有这个HTML5的新特性 — Web Storage,Web Storage又分为sessionStorage和localStorage。接下来来探探这三种的区别与用法。 一. 三者的优劣势 cookie: 优势:所有浏览器都支持,同源但不同目录下也可共享 劣势:同源的http请求都会携带cookie,即使不需要,增加了流量;个数有限制、存储数据比较小,对于这个限制各浏览器稍有不同,一般是50个,大小在4k以内 Web Storage: 优势:存储大小比起cookie大很多,一般限制是5M-10M;App可以在线或离线情况下使用;没有额外的请求头部数据;API简单易用; 劣势:数据以字符串格式存储,其他类型的对象需要在存储前转义使用时再编译;复杂数据集合存储时间可能很慢;存在浏览器兼容性问题,尤其IE只有IE8+才支持。 但两者还存在着共同的安全性问题,如关键攻击载体的CSRF,XSS,Session Hijacking等,因此一些[Read More]

standard

Mobile Web开发奇淫巧计

Author : luckyGirl

做了一段时间的Mobile Web开发,遇到一些坑,总结一下: HTML <meta> HTML5 开发一个页面适配所有设备,先从配置<meta>各种标签属性开始。 viewport: 对文档的视图进行配置,示例有强制文档宽度为设备宽度;初始化缩放比例是1:1;最大缩放比例是1;不允许用户进行屏幕缩放;其他属性如minimum-scale,height等 apple-mobile-web-app-capable:IOS特有标签,是否允许全屏模式浏览 apple-mobile-web-app-status-bar-style:Safari顶端状态条颜色 format-detetion:格式检测,是否把数字识别为电话号码,是否识别邮箱 http-equiv=”x-dns-prefetch-control”:DNS Prefetch 是一种DNS预解析技术,对网页中的域名进行解析缓存,减少用户等待时间,提高用户体验  CSS 1px边框 由于Retina屏幕的出现,设置1px的边框,实际上却显示2px,有时就会略显粗壮,用JS可以进行处理,但兼[Read More]

standard

浅谈 PhoneGap

Author : luckyGirl

目前,混合应用 (Hybird App) 风生水起,一说到Hybird App最常被提起的应该就是PhoneGap了吧。PhoneGap是用基于HTML, CSS, Javascript来创建移动跨平台应用的开发平台,拥有丰富的插件,便于app使用智能手机的核心功能。而Cordova是贡献给Apache后免费开源项目是从PhoneGap中抽出的核心代码是驱动PhoneGap的核心引擎。 一、Cordova简介 Cordova适用于单个页面的应用程序(SPA),即取代页面跳转,而是运行时请求一个web页面,加载初始资源(HTML, CSS, Javascript),并通过ajax为页面更新。优势: 一套代码可跨多个平台,无需重新实现与每个平台的语言和工具集 拥有多种插件,便于web视图访问手机设备级API,如条码扫描器、NFC通信,麦克风等,如仍不能满足需要可按照Cordova插件结构自行开发 有许多前端库,方便开发,更加美观,如 AngularJS Ionic EmberJS Backbone Kendo UI Monaca ReactJS Sencha Touch jQuery Mo[Read More]

standard

HTML5 History API

Author : luckyGirl

HTML5 history API 出来已久,一直没用到就没仔细看,最近为了满足个蹩脚的需求,非hisotry不可,趁机就回顾并学习了下。 History API的属性以及方法: window.history.length: 返回会话历史集中的项目数量 window.history.state: 返回当前的状态对象 window.history.go([delta]): 在会话历史集中向后或向前步进指定的量;如果delta为0则重新加载当前页面;如果delta超过了允许的范围,什么也不做 window.history.back(): 在会话历史集中向后步进1;如果没有前一页,则什么也不做 window.history.forward(): 在会话历史集中向前步进1;如果没有下一页,则什么也不做 window.history.pushState(data,title,[,url]): 将给定的数据,按指定的标题及可选的URL压入会话历史中 window.history.replaceState(data,title,[,url]): 更新会话历史中的当前项,使之持有给定的数据、标题和可选[Read More]

standard

理解JS中的new

Author : lovecicy

上个月居然一篇文章都没发,罪过罪过,先补上一篇。 先来两句玩笑话: JavaScript和Java的关系就好像雷锋和雷峰塔的关系 我对JavaScript既爱又恨,它的优秀之处并非原创,它的原创之处并不优秀…… Brendan Eich 先来理解下第一句话:JS不是一门面向对象的语言,它是一种弱类型的脚本语言。但是它却采用了面向对象的思想,使用了new这个关键字。 第二句话,纯属好玩 ~(≧▽≦)/~ 好吧,言归正传,我们来聊一聊new的时候,到底发生了什么。先来看看下面这段代码: 总结来说,可以分为三个步奏,如下所示: 1. 创建一个空对象 首先,JS会创建一个空对象,将我们的变量指向这个空对象。这一步很简单,也很容易理解。 2. 修改proto属性 接着,将新对象的__proto__属性指向构造方法的prototype属性。这样,就可以通过原型链的方式访问原型对象中的属性和方法了。如果构造方法的prototype属性不是对象,那么就用Object.prototype对象替代。 3. 执行构造函数 最后一步,执行构造函数即Base()方法,并通过.call()方法,将新的对象传入,作[Read More]

standard

我真的不会用cookie

Author : lovecicy

说来惭愧,作为一个拥有三年工作经验的前端,我没用过cookie,尽管在许多面试题集中都会有描述cookie和localStorage的区别的题目。印象中的cookie,是个古老的,丑陋的,不安全的WEB 1.0时代的产物,它早就应该被淘汰,所以我从来没觉得我需要花时间在它上面。但是最近项目要做优化,需要用到cookie,这才开始了我的cookie初探。 项目中要做的优化是,当用户登陆以后,记住用户信息,包括用户名,用户等级等信息。这样,在用户登陆后,其他的页面就不需要每次都发送一个请求获取这些信息。 很简单的需求,但是在实现的过程中,还是发现了一些问题,比如cookie串了,cookie只在某些页面有效等,接下来,我将介绍cookie的参数,和cookie的操作方法以及一些坑。没有什么高深的内容,高手请绕道。 一、cookie的参数 cookie是document对象的一个属性,并且行为和普通的JS对象不同,我给它的行为命名是:零存整取。 1. 读取cookie信息 要获取cookie的信息,只有一种方式,通过document.cookie读取所有的cookie,返回的值为所有cook[Read More]

standard

jQuery源码阅读(八):事件-基础

Author : lovecicy

JavaScript是一种事件驱动型的语言,事件是JavaScript的基础,jQuery的事件无疑也是jQuery的核心之一。jQuery是强大的,jQuery源码是复杂的。一直觉得看jQuery源码是要勇气的,而要看事件处理的源码,更是需要勇气,都已经解读到这里了,就让我们硬着头皮上吧。jQuery中关于事件的代码有多少呢?从2650行一直到3669行,整整1000多行的代码,慢慢来吧。 这一篇,将不会涉及到太多源码的东西,更多的是对jQuery事件的一些基础介绍。关于事件,我之前写过一篇JavaScript事件的文章,里面简单介绍了JavaScript的事件基础知识,有兴趣的可以先看看这篇文章。而关于jQuery的事件处理方法的总结,也有之前的一篇文章——jQuery事件处理方法小记。 关于事件基础,看完上面两篇,其实应该对事件的使用没什么问题了,但是这样以来,这篇文章的篇幅就……所以,让我们再来看看另一个话题吧:jQuery是如何处理事件的。 我最熟悉的看代码方式就是,从我们平时用的接口入手,一步步剖析代码,这次也不例外,由于所有的事件绑定最终都是通过.on()和.off()两[Read More]

standard

深入setTimeout和setInterval

Author : lovecicy

在JS中,我们经常需要使用到延时执行的情况,能实现这个功能的JS方法有两个,分别是setTimeout和setInterval。相信这两个方法大家一定经常用到,那么今天我们就来八一八这两个方法吧,可不要觉得这两个方法很简单哦,看完以后相信你一定有所收获。 一、定义 虽然这里我们只放了setTimeout和setInterval两个方法,其实还有两个与之对应的清除延时执行的方法:clearTimeout和clearInterval,它们两个接收一个ID,分别由setTimtout和setInterval方法返回。 接下来我们来看看Mozilla开发者网站给出的定义: setTimeout: Calls a function or executes a code snippet after a specified delay. setInterval: Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function. Retu[Read More]

standard

jQuery源码阅读(七):Deferred API(下)

Author : lovecicy

上一篇,我们讲到了Deferred对象,让我们来看看如何使用它吧。 好了,最简单的用法就是这样。但是在现实中,这么干完全没意义。那么,来点有意义的代码吧。 这是Deferred对象(准确的说应该是promise对象)最常用的用法,非常实用,而且方便,能够为AJAX请求绑定多个回调函数。 再来看看复杂一点的情况,如果我们需要通过多个请求获取数据,然后同时对这些数据做一些操作呢?很自然得,我们会想到可以这么干: 我们可以尽情的嵌套AJAX请求,jQuery都能正常执行。但是这么干有个缺陷,就是浪费时间,这两个请求之间是没有依赖的,这样写仿佛第二个请求依赖第一个请求的结果了,本来可以并行的请求,现在只能通过串行的方式了。 这个时候,我们的$.when()闪亮登场了。先来看看jQuery的文档怎么说: Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events. 所以上面的例子可以改为:[Read More]

standard