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

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

jQuery源码阅读(一):jQuery对象

Author : lovecicy

开篇先来讲述一下平时使用最多的jQuery对象到底是什么。(这里的jQuery对象指的是$(selector)返回的对象) jQuery最擅长的就是DOM操作,也是其流行的原因之一,用$()方法选择要操作的DOM元素,然后进行各种操作。 以下面的代码为例: 无论是通过标签名选择多个元素还是通过ID选择唯一的元素,只要元素存在,上面的代码总能正确得输出’li’,而且length也是正确的。 这么看来,jQuery似乎返回了一个数组,到底是不是,我们可可以通过下面的方法检验: 所以,jQuery其实返回了一个对象,而非数组。 让我们再来看下这个对象的结构: q.fn.q.init[3] |- 0: li#test |- 1: li |- 2: li |- context: document |- length: 3 |- prevObject: q.fn.q.init[1] |- selector: ‘li’ 原来就是一个拥有length属性,并且属性名为数字的对象,而非数组,大家都亲切的称它为类数组对象 -_-! 。 好了,知道了这个对象的[Read More]

standard

JavaScript 自执行函数笔记

Author : lovecicy

什么是自执行的匿名函数? 它是指形如这样的函数: (function {// code})(); 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错? 分析 (1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明. (2). 其次, js”预编译”的特点: js在”预编译”阶段, 会解释函数声明, 但却会忽略表式. (3). 当js执行到function() {//code}();时, 由于function() {//code}在”预编译”阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错; 当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

standard