6月记

Author : lovecicy

2015年的6月,忙碌,结婚、换工作、生水痘……所有的事情都碰到一起了,感觉这短短的20来天,生活进入了永夜,仿佛开车置身无尽的戈壁滩,你不能停下车来,两边一样的风景一直在重复,一直开,却开不到戈壁的尽头。如果这样的日子一直下去,我觉得人会绝望的,所以也许这也就是为什么我们会有春节这样的节日:在忙碌了365个日子以后,不管是多么的忙碌,劳累,昏天暗地,孤独,伤心,我们会背起行囊,坐上火车,经历几十个小时的站立,回到那个破旧,落后的老家,在那里,我们可以放下这些烦心事,去开心地享受空闲,去感受有人陪伴的简单的快乐,给每个人一些喘息的机会,停下来思考,去总结,去下定决心,去重新开始下一个365天。即使这过去的365天是无尽的忙碌,不停的遭难,这个喘息的机会,给了我们时间去重拾希望,去结束这糟糕的过去,去开启新的、未知的下一个循环。 说回这个6月换工作的事,其实这件事拖了很久,断断续续得一直在找机会,终于找到一个不错的机会,可以进入大公司学习,感受下大公司的节奏,或者去感受创业公司的拼搏精神,梦想我们能创造下一个阿里巴巴。但是这个过程从面试到入职,经历了两个多月。在出差前得知拿到offer,[Read More]

standard

万恶的Skype

Author : lovecicy

Skype的发家史咱就不扯了,这个能用互联网打电话的网络真是方便了像我们这样的“国际化”外包公司,和客户沟通啥的都不用出钱,想客户的话,你还可以跟人视频聊天呢。 最近碰上个事,实在不爽,不吐不快啊。 前段时间出差美国,时间不长,就两周,因此也没买当地的电话卡,因此只能在Wi-Fi网络下发发微信联系。后来因为需要白天联系某卖表网站客服退货,想想要不买个skype套餐打打,于是上了skype官网,居然有免费试用一个月,美帝人民真幸福啊,赶紧登陆,准备试用。 登陆以后,继续选择免费试用一个月,跳转到skype.gmw.cn,然后页面都变中文啦。 选择国家/地区,有个世界通套餐,10000分钟,能打中国,86RMB包月,还有这好事,赶紧选了这个套餐。然后填写信用卡信息,确认订单,支付完成。在美帝呆了几天,习惯了人家自动划走,人与人之间的信任就在这里,赞一个。 支付完成后,打了两个电话。之后,琢磨着怎么退款,一个月到期自动退?恩,应该是这样的,相信美国人办事还是讲信用的,安心上班吧,到时候钱自然会划回来的。 等到回到国内,一个月时间快到了,想了想当时有没有选到期自动续套餐啊,想不起来了,到网站看[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

iPhone 6/Plus 的适配

Author : luckyGirl

最近用上高大上的iPhone6了,可是体验并不怎么理想,尤其是常用的APP:新浪微博和微信,字体大、图片模糊,与iPhone精致的调调一点不相配,归根结底就是一个问题 — 适配!今天Cicy就来初探下如何进行适配。 一、基本概念 首先我们先来了解下一些术语的基本概念: px:像素,屏幕上显示数据的最基本点 pt:point,印刷单位,1/72英寸,是个绝对单位 ppi:密度单位,图像分辨率,每英寸所包含的像素数目 dpi:密度单位,打印分辨率,每英寸能打印的点数 Retina:超高分辨率屏幕技术,iPhone从4就已开始应用 二、iPhone的复杂尺寸 之前基本按照宽度为640px为基准的视觉稿,基本连iPhone6都不能很好满足(怪不得在我手机上显示的图片好糊T_T) 三、手机淘宝的适配协作 看一下手机淘宝团队是如何协作的吧 第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。 第二步,[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

jQuery源码阅读(六):Deferred API(上)

Author : lovecicy

聊完了Callback API,接下来我们来聊聊Deferred API吧。 一、什么是Deferred API? 按个人的理解,Deferred API是用来实现一下功能的:某个事件的执行过程是异步的,需要等待一段时间,这时我们可以把这个事件称作延迟事件,我们用一个Deferred对象来表示它,为它添加成功、失败以及正在处理中的事件处理方法,当事件成功或者失败后,调用对应的处理方法。比如要通过AJAX获取一段内容,这个过程需要一定时间,在这段时间内我们不应该阻塞后面代码的执行,而是返回一个Deferred对象,为它添加成功与失败的回调函数,然后让代码继续执行。如果AJAX调用成功,则执行成功的回调函数,比如改变界面显示;如果AJAX调用失败,则调用失败的回调函数,比如提示用户获取内容失败。 二、谁在用Deferred API? 在jQuery内部,有以下功能使用到了Deferred API: AJAX 动画 DOM Ready $.fn.promise() 三、拆解Deferred API Deferred API的代码量还是比较少的,总共才80多行,但是信息量还是挺大的,这里我们分[Read More]

standard