我真的不会用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

JavaScript 严格模式(use strict)

Author : luckyGirl

“use strict”在一些插件中是常见的,是ECMAScript 5的另一种运行模式 —— “严格模式”,即在这种模式下,对于JavaScript代码则更加严格,可以更好的检查代码的错误或是不严谨,因此同样的代码在“严格模式”下可能会有不同的运行效果。ECMAScript引入这一模式主要是对于以下几个因素的考虑: 安全性,消除JS代码运行的不安全之处 改善代码质量,避免易发的错误 改善代码的错误检测 一、声明严格模式 使用”use strict”语句,代码将进入“严格模式”,使用的场合有文件,模块或是一个函数,无论哪种,这个声明必须放在第一行,否则无效。 整个文件处于严格模式 针对单个函数采用严格模式 模块或是库,常常采用匿名函数自执行,则自执行函数内部采用严格模式 二、严格模式下的语法限制 在严格模式下,JS的语法以及运行结果产生了一些改变,之前在正常模式下能运行的函数或仅是执行失败的语法,在严格模式下会报错 变量使用前必须声明 Error: SCRIPT5042: Variable undefined in strict mode[Read More]

standard

文字溢出 text-overflow:ellipsis

Author : luckyGirl

文字溢出是常碰到的情境,div(或其他标签)太长多余的文字被截掉然后用…替代,最简单的办法是使用CSS属性text-overflow:ellipsis,之前碍于Firefox不支持此属性,不得不用其他办法来兼容,如今所有浏览器已经支持此属性,在此Mark一下。 示例: CSS方法就可以实现所有主流浏览器对于文字溢出用省略号表示 .textOverflowExample{   width:20em;   overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap;}

standard

jQuery源码阅读(五):Callback API

Author : lovecicy

上一篇讲述了jQuery Callback API的一个bug,这一篇我们言归正传,来介绍一下Callback API。 Callback API于1.7版本引入,它提供了一种强大的方式来管理一系列的回调函数,可以添加,删除,触发或者停用回调函数。 可能我们在平时使用中不太会用到Callback API,但是在jQuery内部,Callback API可是发挥了很大的作用的。在jQuery的Ajax API和Deferred API中都有用到,而我们的$(calback)方法,依赖于Deferred API,其实也是依赖Callback API的。而且,在平时我们自己写代码的过程中,我们同样可以用Callback API来管理我们的回调函数。 交代完了它的背景,让我们来看看真实的代码吧。 其实在写这篇文章前,我已经看过了前端狮子对于Callback API的解读,虽然我们解读的并非同一个版本的jQuery,但是狮子的文章在一定程度上帮我理解了这部分代码,并且狮子的解读与文章或多或少对我的解读产生了影响,所以,在写这篇文章时,我的内心也在纠结,如果写出类似的文章,那写的意义何在;而如果不[Read More]

standard

jQuery源码阅读(四):jQuery Callback的bug

Author : lovecicy

这两天在看jQuery Callback API的代码,无意中发现了一个jQuery的bug,这个bug存在在目前所有的主流版本中,除了最初引进Callback API的1.7版本,从1.8到2.1,都存在。 先来说说这是一个怎么样的bug,看下面的代码: 在jQuery的文档中是这么描述disable()方法的: Disable a callback list from doing anything more 因此,执行disable()方法后,对这个Callback对象的所有操作都应该被禁止了。但是如果在调用disable()之前,没有调用fire(),那么通过调用empty()方法,我们可以重新添加callback函数,然后成功调用fire()方法。之后,虽然add方法可以再次被调用,但是无法再成功调用fire()方法。 我们可以直接从代码入手,看看这个问题的原因: 当我们调用fire()的时候,在内部实际上是在调用fireWith()方法。而fireWith()能被成功调用的前提是list存在,并且fired为false或stack存在。而disable()被调用以后,list[Read More]

standard

jQuery源码阅读(三):jQuery DOM Ready

Author : lovecicy

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后。而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了。 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理那些老旧的浏览器,于是DOM Ready事件就成了各个JS框架的必备功能啦。 先来看看jQuery DOM Ready事件的用法吧,jQuery的DOM Ready事件用法很简单,大家都用过,下面的三种语法都是可用的: $( document ).ready( handler ) $().ready( handler )(不推荐) $( handler ) 还有一种方式:$(document).on(‘ready’, handler);,已经在1.8版本里被废弃了,但是你还可以这么用。[Read More]

standard