transparent background for IE6

<!–[if IE]> <style type=”text/css”> .color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); zoom: 1; } </style> <![endif]–>

浅谈ECMAScript 5 严格模式(Strict Mode)

自ECMAScript 5开始,增加了一个严格模式(Strict Mode)的新特性。 ECMAScript 5虽然可以跟前一版的ECMAScript 3相容(ECMAScript 4已废弃) , 但是,当我们宣告为”Strict Mode”后,那些ECMAScript 5不再建议使用的ECMAScript 3的旧语法会被全面禁止。一旦出现,便会出现错误或抛出异常(Exception)。 Strict Mode 的宣告方式有两种: 若要在全域范围内宣告使用Strict Mode,只需在程式码的第一行加上下面叙述,如: “use strict” 也可以在指定的函数内宣告使用Strict Mode,在函数的第一行加上下面叙述,如: // Non-strict code… function func_UseStrictMode() {   ”use strict” ;   // … your code … }

提高web应用性能之JavaScript性能调优

JavaScript 性能调优 JavaScript 语言由于它的单线程和解释执行的两个特点,决定了它本身有很多地方有性能问题,所以可改进的地方有不少。 eval 的问题: 比较下述代码: 清单 1. eval 的问题 var reference = {}, props = “p1”; eval(“reference.” + props + “=5”) var reference = {}, props = “p1”; reference[props] = 5 有“eval”的代码比没有“eval”的代码要慢上 100 倍以上。 主要原因是:JavaScript 代码在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用 var 申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是 undefined,并将那些以 function 定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。但是,如果你使用了“eval”,则“eval”中的代码(实际上为字符串)无法预先识 别其上下文,无法被提前解析和优化,即无法进行预编译的操作。所以,其性能也会大幅度降低。 Function 的用法: 比较下述代码: 清单 2. function 的用法 var func1 = new [...]

XMLHttpRequest对象详解

一直用习惯了Jquery的$.Ajax,之前面试时有一笔试题要求用原生Javascript写一个AJax请求,特做一个整理。 什么是Ajax? Ajax代表异步JavaScript和XML。简言之,它是使用XMLHttpRequest对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息,包括JSON,XML,HTML和甚至文本文件。然而,AJAX的最有吸引力的的特征是它的“异步”的性质,这意味着它可以做这一切,而无需刷新页面。这使您可以更新部分基于用户事件页面。 AJax的两个特点是,你可以: 无需重新加载页面对服务器的请求 接收和处理来自服务器的数据 如何创建一个XMLHttpRequest对象? 最简单的方法是: //创建xhr对象 var httpRequest; if (window.XMLHttpRequest) { // Mozilla, Safari, … httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 8 and older httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”); } //事件响应 httpRequest.onreadystatechange = nameOfTheFunction; <pre>httpRequest.onreadystatechange = function(){ // process the server response }; <pre>//发送请求 httpRequest.open(‘GET’, ‘http://www.example.org/some.file’, true); httpRequest.send(null); [...]

YSlow使用指南[中文版]

YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“,发现都是旧版本Yslow的使用介绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助,希望给初次使用Yslow的朋友一些帮助。 注:英文不是很好,对着翻译软件翻译的,有不对的地方,大家指正。 安装 YSlow 先安装 Firebug  https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug 帮助文档 http://www.getfirebug.com/docs.html. 再下载安装  http://developer.yahoo.com/yslow 使用Yslow Yslow是运行在Firebug窗口下,所有要运行Yslow,必须安装Firebug。 有两种方法启动Yslow 1、打开Firebug窗口,选择Yslow选项。 2、直接点击浏览器右下角的Yslow启动按钮。 你第一次打开Yslow时,以下图像作为Firebug的一部分被显示在的浏览器窗口。 点击 Run Test 运行Yslow,也可以点击 Grade, Components, 或Statistics选项开始对页面的分析。 你可以选择 Autorun YSlow each time a web page is loaded 它将自动对以后打开页面进行分析,您也可以右击YSlow状态栏,然后选择或取消自动运行。 Yslow视图 YSlow显示测试结果的分析,分为等级、组件、统计信息。你可以浏览这些观点之间选择标签以观的名字在YSlow标签的Firebug控制台。 以下是说明的等级、组件、统计信息。 一、等级视图   查看一个分析,选择页面的性能等级标签或点击网页的字母等级在状态栏这页纸的底部。 视图显示了等级为网页的成绩单。整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则(见性能规则)。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级,A 级为最高。 下面是一个等级的例子: 如果页面与某一个规则无关,则显示 N/A ,表示不适用。 点击每一规则,都给出了改进建议。要查看更全面的改进方法进入前端性能优化指南 二、组件视图 分组显示页面组件,表格列出组件的信息,点击 Expand [...]

jQuery的deferred对象详解

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能—-deferred对象。 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax。为了实现它,jQuery的全部ajax代码都被改写了。 但是,它比较抽象,初学者很难掌握,网上的教程也不多。所以,我把自己的学习笔记整理出来了,希望对大家有用。 本文不是初级教程,针对的读者是那些已经具备jQuery使用经验的开发者。如果你想了解jQuery的基本用法,请阅读我编写的《jQuery设计思想》和《jQuery最佳实践》。 ====================================== jQuery的deferred对象详解 作者:阮一峰 一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。 通常的解决方法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。 但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。 简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是”延迟”,所以deferred对象的含义就是”延迟”到未来某个点再执行。 它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。它的主要功能,可以归结为四点。下面我们通过示例代码,一步步来学习。 二、ajax操作的链式写法 jQuery的ajax操作,传统写法是这样的:   $.ajax({     url: “test.html”,     success: function(){       alert(“哈哈,成功了!”);     },     error:function(){       alert(“出错啦!”);     }   }); (运行代码示例1) 在上面的代码中,$.ajax()接受一个对象参数,这个对象包含两个方法:success方法指定操作成功后的回调函数,error方法指定操作失败后的回调函数。 $.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。 现在,新的写法是这样的:   $.ajax(“test.html”)   .done(function(){ alert(“哈哈,成功了!”); })   .fail(function(){ alert(“出错啦!”); }); (运行代码示例2) 可以看到,done()相当于success方法,fail()相当于error方法。采用链式写法以后,代码的可读性大大提高。 三、指定同一操作的多个回调函数 deferred对象的一大好处,就是它允许你自由添加多个回调函数。 还是以上面的代码为例,如果ajax操作成功后,除了原来的回调函数,我还想再运行一个回调函数,怎么办? 很简单,直接把它加在后面就行了。   $.ajax(“test.html”)   .done(function(){ alert(“哈哈,成功了!”);} )   .fail(function(){ alert(“出错啦!”); } )   .done(function(){ alert(“第二个回调函数!”);} [...]

jQuery最佳实践

jQuery最佳实践 阮一峰 整理 1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。 下面就来看看,不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句:   $(‘.elem’)   $(‘.elem’, context)   context.find(‘.elem’) 我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次。结果如下: 可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。 其他语句的测试,比如.attr(“value”)和.val(),也是新版本的jQuery表现好于老版本。 2. 用对选择器 在jQuery中,你可以用多种选择器,选择同一个网页元素。每种选择器的性能是不一样的,你应该了解它们的性能差异。 (1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性能最佳:   $(‘#id’)   $(‘form’)   $(‘input’) 遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。 (2)较慢的选择器:class选择器 $(‘.className’)的性能,取决于不同的浏览器。 Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都没有部署这个方法,所以这个选择器在IE中会相当慢。 (3)最慢的选择器:伪类选择器和属性选择器 先来看例子。找出网页中所有的隐藏元素,就要用到伪类选择器:   $(‘:hidden’) 属性选择器的例子则是:   $(‘[attribute=value]‘) 这两种语句是最慢的,因为浏览器没有针对它们的原生方法。但是,一些浏览器的新版本,增加了querySelector()和querySelectorAll()方法,因此会使这类选择器的性能有大幅提高。 最后是不同选择器的性能比较图。 可以看到,ID选择器遥遥领先,然后是标签选择器,第三是Class选择器,其他选择器都非常慢。 3. 理解子元素和父元素的关系 下面六个选择器,都是从父元素中选择子元素。你知道哪个速度最快,哪个速度最慢吗?   $(‘.child’, $parent)   $parent.find(‘.child’)   $parent.children(‘.child’)   $(‘#parent > .child’)   $(‘#parent .child’)   $(‘.child’, $(‘#parent’)) 我们一句句来看。 (1) $(‘.child’, $parent) 这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find(‘child’),这会导致一定的性能损失。它比最快的形式慢了5%-10%。 (2) $parent.find(‘.child’) [...]

Javascript对象冒充——call与apply

构想原始的 ECMAScript 时,根本没打算设计对象冒充(object masquerading)。它是在开发者开始理解函数的工作方式,尤其是如何在函数环境中使用 this 关键字后才发展出来。 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使 ClassA 构造函数成为 ClassB 的方法,然后调用它。ClassB 就会收到 ClassA 的构造函数中定义的属性和方法。例如,用下面的方式定义 ClassA 和 ClassB: function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor) { } 还记得吗?关键字 this 引用的是构造函数当前创建的对象。不过在这个方法中,this 指向的所属的对象。这个原理是把 ClassA 作为常规函数来建立继承机制,而不是作为构造函数。如下使用构造函数 ClassB 可以实现继承机制: function ClassB(sColor) { this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; } [...]

Javascript的this用法

作者: 阮一峰 日期: 2010年4月30日 this是Javascript语言的一个关键字。 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,   function test(){     this.x = 1;   } 随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。 下面分四种情况,详细讨论this的用法。 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。 请看下面这段代码,它的运行结果是1。   function test(){     this.x = 1;     alert(this.x);   }   test(); // 1 为了证明this就是全局对象,我对代码做一些改变:   var x = 1;   function test(){     alert(this.x);   }   test(); // 1 运行结果还是1。再变一下:   var x = 1;   function test(){     this.x = 0;   }   test();   alert(x); //0 情况二:作为对象方法的调用 函数还可以作为某个对象的方法调用,这时this就指这个上级对象。 [...]

Javascript面向对象编程(三):非构造函数的继承

作者: 阮一峰 日期: 2010年5月24日 这个系列的第一部分介绍了”封装”,第二部分介绍了使用构造函数实现”继承”。 今天是最后一个部分,介绍不使用构造函数实现”继承”。 一、什么是”非构造函数”的继承? 比如,现在有一个对象,叫做”中国人”。   var Chinese = {     nation:’中国’   }; 还有一个对象,叫做”医生”。   var Doctor ={     career:’医生’   } 请问怎样才能让”医生”去继承”中国人”,也就是说,我怎样才能生成一个”中国医生”的对象? 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现”继承”。 二、object()方法 json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点。   function object(o) {     function F() {}     F.prototype = o;     return new F();   } 这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。 使用的时候,第一步先在父对象的基础上,生成子对象:   var Doctor = object(Chinese); 然后,再加上子对象本身的属性:   Doctor.career = ‘医生’; 这时,子对象已经继承了父对象的属性了。   alert(Doctor.nation); //中国 三、浅拷贝 除了使用”prototype链”以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。 下面这个函数,就是在做拷贝:   function [...]