1.安装Xcode

因为已安装过Xcode所以不知道这一步是不是必要，目前Xcode4是最新版需要在App store中购买。

2.安装git

详细的安装步骤可以看这里：http://help.github.com/mac-set-up-git/
注意的地方：你需要一个github.com的账号。

3.安装node.js

UglifyJS需要在node.js环境下运行。
详细步骤在这里：https://github.com/joyent/node/wiki/Installation
安装好后可以通过hello_node.js来验证安装是否正确：

var http = require(‘http’);
http.createServer(function (request, response) {
response.writeHead(200, {‘Content-Type’: ‘text/html’});
response.end(‘Hello World‘);
}).listen(8124);
console.log(‘Server running at http://127.0.0.1:8124/’);

在终端中运行这段代码：

node hello_node.js

然后用浏览器打开 http://127.0.0.1:8124/ ， 成功的话可以看到Hello World页面。

4.安装UglifyJS

安装步骤：https://github.com/mishoo/UglifyJS
安装好后进入UglifyJS的目錄

cd UglifyJS/

測試執行

./bin/uglifyfs

通常情况下会发生错误： Cannot find module ‘ulify-js’
最简单的解决方法：
将UglifyJS文件夹下的所有文件复制一份到.node_libraries文件夹下，然后将UglifyJS/bin下的uglifyjs复制一份到usr/local/bin文件夹下。
这是UglifyJS就安装完毕了。
可以通过命令来压缩js了

uglifyjs example.js > example.min.js

测试了下，一个6.09kb的js用yui compressor压缩后大小为4.26kb，而uglifyjs压缩后为3.68k，很给力。

参考文章：
如何在 node.js 執行 UglifyJS 對 JavaScript 進行壓縮或美化
如何在 Windows 作業系統安裝 Node.js 執行環境 (Cygwin)

WebKit 正式版已经正式支持HTML5中<script>标签的 async 和 defer 属性了。如此一来，我们就能在不阻塞网页中其它元素下载的情况下，以异步方式下载JavaScript，从而大大提高了网页加载速度。

正常情况下，网页分析器检测到有外部脚本时，会暂停解析，并发起一个请求去下载该脚本，一直到这个脚本完全下载并执行之后解析才会继续进行。

<script src="myBlockingScript.js"></script>

在下载脚本时，浏览器会被阻塞，不做其它任何事情（比如解析HTML，执行其它脚本以及渲染网页布局等）。尽管通过WebKit的预加载扫描器能够利用网页显示的空闲时间预先下载资源，在一定程度上改善了浏览器的阻塞状况，但是网络延迟依然会导致网页加载缓慢。

虽然围绕性能优化的问题已经有了很多不错的技术（参见：延迟加载，异步加载），但是他们都无法避免地引入了额外的代码，或是针对浏览器的Hacks写法。作为更好的办法，现在我们可以把不需要以同步方式执行的脚本标记为 async 或者 defer。以下是具体的做法：

<script async src="myAsyncScript.js" onload="myInit()"></script>

<script defer src="myDeferScript.js" onload="myInit()"></script>

标记为 async 或者 defer 的脚本都会立刻开始下载，不阻塞浏览器的其它解析工作，而且它们都支持可选的 onload 事件，这样就能在脚本加载完成时开始执行依赖于该脚本的代码。async 和 defer 之间的不同之处在于执行的时机。async 脚本会在自身被下载完、window.load 事件执行前立刻被执行，这意味着 async 脚本有可能（应该说很可能）不会按照它们在页面中出现的顺序被执行；而 defer 脚本则一定是按照它们在页面中出现的先后顺序执行，准确地说，是在整个页面被解析完成之后，文档的DOMContentLoaded事件之前执行。

这里有个例子，在这个例子中一个外部脚本下载需要1秒钟，紧跟在这个外部脚本后面是一段执行需要1秒钟的内嵌脚本。我们可以看到这个页面加载花费了2秒钟时间。

还是同一个例子，只是是其中的外部脚本被标记为 defer。由于签入的脚本可以在外部脚本被下载的同时执行，因此我们看到这个页面加载的速度大约比之前快两倍。

除了WebKit核心的浏览器以外，Firefox早就支持 defer 和 onload 属性，async 属性从 3.6 版本开始支持。 IE浏览器也很早就支持 defer 属性，IE9 增加了对 onload 属性的支持，但是 async 属性依然还不支持。

如果说jQuery也有缺点，那就是它太容易上手了，所以吸引了大量没有任何JavaScript的新手来使用。一方面来说，这真的很神奇。另一方面，这也导致了一大堆糟糕的代码诞生（有一些是出自我手！）

但是没关系，糟糕的代码是你的成年礼，关键是要越过这道坎，这就是今天要讨论的内容。

1.一些方法会返回jQuery对象

大多数方法会返回jQuery对象。这是很棒的特性，使得我们的代码可以像锁链一样从头到尾链起来。

$someDiv
.attr('class', 'someClass')
.hide()
.html('new stuff');

这样做的好处是：1.代码更加简洁 2.减少了我们必须遍历整个DOM来寻找这个元素的时间

2.The Find Selector

只要你的选择符不要烂的跟屎一样，jQuery都能帮你方便地找到需要的元素，你不需要操心细节。但是有一些细节你可以注意一下，以此来提高你的JavaScript执行性能。

其中之一就是，只要有可能，就使用.find()方法。主要原因就是：如果不是必不得已，那就不要让jQuery使用它的Sizzle引擎。当然，也会有些情况不能用find()方法，那也没有关系，只要知道有这个区别就好。

// 在现代浏览器上都可以正常运行，但是却是通过Sizzle引擎来完成的
$('#someDiv p.someClass').hide();

// 一样正常运行，原生浏览器支持，效率更高
$('#someDiv').find('p.someClass').hide();

除IE6/7的现代浏览器都有QuerySelectorAll支持，能允许你传递一个像一样的CSS选择器，而不需要用到jQuery的内部代码。jQuery会在使用自己的引擎之前检查是否存在这个函数。

但对于IE6/IE7而言，就会需要jQuery使用Sizzle引擎，这是一套十分强大的引擎，但非常复杂。简单的说，jQuery会把你的选择器转化成一个数组，并且通过从后往前的方法来迭代匹配。

// 数组
 ['#someDiv, 'p'];

它会从右到左，通过正则表达式匹配页面每一个元素，也就是说，你的选择器最右边一定要尽可能的明确，比如ID或者标签名。

底线是：

1.保持代码简单

2.使用find()方法，这样的话，我们就能够使用浏览器的原生查找函数

3.当使用Sizzle的时候，尽可能地把最右边的部分指明，比如ID或者标签名

3.不要滥用$(this)

如果不了解基本的DOM属性和方法的话，很容易滥用jQuery对象。例如

$('#someAnchor').click(function() {
	// 又生成了一次jQuery对象
	alert( $(this).attr('href') );
});

如果只是为了获取某a的href属性可以简单地用以下代码：

$('#someAnchor').click(function() {
	// 没有jQuery对象
	alert( this.href );
});

4.jQuery的快速ready方法

原生的ready方法是这样的

$(document).ready(function() {
	// let's get up in heeya
});

而jQuery的方法是这样的：

$(function() {
	// let's get up in heeya
});

看上去有点困扰+不放心？别担心，看看jQuery的源码：

// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
	return rootjQuery.ready( selector );
}

完全一样的哦

5.代码安全

如果希望代码能和其他人协同工作的话，一定要确保不要命名冲突。万一在你的脚本之后导入了其他人的代码，对方用到了$变量，那该怎么办呢？

第一种方法，noConflict()方法：

var j = jQuery.noConflict();
// Now, instead of $, we use j.
j('#someDiv').hide();

// The line below will reference some other library's $ function.
$('someDiv').style.display = 'none';

第二种方法，把你的代码放在一个匿名函数里面，然后把jQuery作为参数传递给它，那么在这个函数体中的$是不会影响外面或者被外面影响的。

(function($) {
	// Within this function, $ will always refer to jQuery
})(jQuery);

第三种方法，

jQuery(document).ready(function($) {
 // $ refers to jQuery
});

// $ is either undefined, or refers to some other library's function.

6.写聪明的代码

someDivs.each(function() {
	$('#anotherDiv')[0].innerHTML += $(this).text();
});

以上代码的糟糕之处在于：
1.在每一次遍历循环中都会搜寻anotherDiv 这个ID的元素
2.两次获取innerHTML属性
3.创建了一个jQuery对象，只是为了获取元素的text属性

var someDivs = $('#container').find('.someDivs'),
      contents = [];

someDivs.each(function() {
	contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

这样，在每一个遍历循环中所做的操作仅仅是把元素放进一个数组中。这一条tip更适用于所有的JavaScript代码，而不仅仅是jQuery。

说到这儿，就不得不提一下Document编程（Document Fragments），基本上也是说，用原生的js对象，而不是jQuery对象，更有效率。

var someDivs = $('#container').find('.someDivs'),
      contents = [];

someDivs.each(function() {
	contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

越久使用jQuery和JavaScript，你就会发现你更喜欢用js完成某些简单任务，多好！

jQuery提供了一个很高的抽象程度，但这不意味着我们应该停止学习如何使用原生的js方法，例如上面的代码中我们就用了jQuery的each方法。

7.Ajax方法

一个新手开始学习jQuery和Ajax的时候，它提供的诸多接口可能让你困扰。其实很多方法都是helper method（译者注：我专门查了下helper method和jQuery UI里helper的区别，下一篇post详细地说一下）。我们经常用到的方法不过以下几种：

• get
• getJSON
• post
• ajax

以下是getJSON的调用语法

$.getJSON('path/to/json', function(results) {
	// callback
	// results contains the returned data object
});

这是实现代码：

getJSON: function( url, data, callback ) {
	return jQuery.get(url, data, callback, "json");
}

进入下一层梦境：

get: function( url, data, callback, type ) {
	// shift arguments if data argument was omited
	if ( jQuery.isFunction( data ) ) {
		type = type || callback;
		callback = data;
		data = null;
	}

	return jQuery.ajax({
		type: "GET",
		url: url,
		data: data,
		success: callback,
		dataType: type
	});
}

最终，还是通过ajax()方法来执行这么多的操作，它是保证跨浏览器操作的基础。

也就是说你可以直接使用ajax()方法来完成所有的ajax操作，而不是一大堆的helper method。

原来是这样的代码：

$.getJSON('path/to/json', function(results) {
	// callback
	// results contains the returned data object
});

更高效（并且接口统一）的代码：

$.ajax({
	type: 'GET',
	url : 'path/to/json',
	data : yourData,
	dataType : 'json',
	success : function( results ) {
		console.log('success');
	})
});

8.获取原生js属性和方法

从之前的例子中我们学到我们可以直接取得元素比如a标签的属性：

var anchor = document.getElementById('someAnchor');
//anchor.id
// anchor.href
// anchor.title
// .etc

但是当你想通过jQuery取得DOM元素的时候，是不能通过这种方法来取得属性的：

// Fails
var id = $('#someAnchor').id;

所以，当你需要获取href属性或者其他属性的是，你需要使用其他方法，方法很多：

// OPTION 1 - Use jQuery
var id = $('#someAnchor').attr('id');

// OPTION 2 - 取到DOM元素再取值
var id = $('#someAnchor')[0].id;

// OPTION 3 - 用jQuery的get方法
var id = $('#someAnchor').get(0).id;

// OPTION 3b - 用不带参数的get
anchorsArray = $('.someAnchors').get();
var thirdId = anchorsArray[2].id;

get()方法十分有效，它能把jQuery对象集合转化成一个数组。

9.用PHP检测Ajax请求

事实是，在我们的大多数项目中不能依赖js来完成所有工作比如验证或者Ajax，假如js被禁用了怎么办呢？一个通用的解决办法是使用服务器端程序验证Ajax请求是否被发起。

jQuery使得这一做法变得很简单，可以通过$.ajax方法很方便地设置请求的头部。

// 设置头部，这样接受请求的服务器端语言知道这是一个XMLHttpRequest
// Only send the header if it's not a remote XHR
if ( !remote ) {
	xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}

设置了这个头部之后，我们可以用PHP（或者其他服务器编程语言）来检查这个头部，然后相应地做出反应。用PHP的话，可以通过$_SERVER['HTTP_X_REQUESTED_WITH']来判断。

function isXhr() {
  return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}

10.jQuery和$

知道为什么jQuery和$可以互换么？看看jQuery的源码：

window.jQuery = window.$ = jQuery;

由于jQuery本身运行在一个很大 的function中，这样做的好处是能最大程度地避免全局变量的出现。但也因为如此$在外面是undefined的，为了解决这个问题，把jQuery裸露给全局变量window，同时还给它一个别名$。

11.根据条件载入jQuery

我们都喜欢CDN，特别是Google的免费CDN，可是让我们不使用googleapi提供的CDN的一个阻挠就是大陆功夫墙的不可预知性。但是可以这么写，是HTML5 Boilerplate提供的方法：

<!-- Grab Google CDN jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

相当直观，如果window.jQuery是未定义的，那就是说下载js文件出了问题，这时候&&右边的句子就会为ture，所以就会插入一个本地版本的jQuery。Really brillant, isn’t it?

12.jQuery Filters

<scrip>
	$('p:first').data('info', 'value'); // 填充 $的data对象，下文展示用 

	$.extend(
		jQuery.expr[":"], {
			block: function(elem) {
				return $(elem).css("display") === "block";
			},

			hasData : function(elem) {
				return !$.isEmptyObject( $(elem).data() );
			}
		}
	);

	$("p:hasData").text("has data"); // 可以获取所有有data属性的元素
	$("p:block").text("are block level"); // 获取所有拥有display:block属性的元素
</scrip>

jQuery.expr[':']是jQuery.expr.filters的别名，上面的代码用$.extend扩展了jQuery的:也就是filter。

13.单参数的hover方法

在jQuery1.4之前，hover必须接受两个参数，分别显示in和out时候的handler function，而现在hover可以只接受一个参数了，每当产生mouseenter和mouseout事件的时候就会用这个function参数（一般是匿名的）来处理，如果处理得当的话，可以用一个function就完成两个function的效果，可以节省字符。

官方APIhttp://api.jquery.com/hover/上有很好的例子。

14.属性对象作参数

之前

$('')
  .attr({
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
  });

现在

$('', {
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
});

jQuery1.4以后，可以在新建DOM元素的时候给它传递一个（通常是匿名的）对象作为第二个参数，这样代码更加清晰简单，我们设置可以给这个对象里面传递一些jQuery特有的属性和事件，比如click和text。

原文地址：http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

本文地址：http://yuguo.us/weblog/14-jquery-notes-2/

一、少用图片

一开始，为了做出用来表示各个城市的每一天的那种渐变效果，我们用了一套相当复杂的 -webkit-gradient，结果发现这会令转译速度变得非常非常慢。-webkit-gradient 的工作方法是构建位图，对于浏览器的转译引擎来说，这和从外部加载图片（例如一张 PNG）是完全一样的。MobileSafari 显示图片速度之慢是出了名的（希望 4.0 对此有所改进），要解决这个问题，基本上只能不用图片和 -webkit-gradient。

我们最终把那些色彩条快用背景上的一个很大的 canvas 元素替代了。当你拖动游标线时，那些条块的颜色会发生变化，只有正在变化的部分才会被重新绘制。用 canvas 时可以在某种程度上复用 -webkit-gradient，比如这样：

// WebKit CSS gradient

-webkit-gradient(linear, left top, right top,

from(#4b4c4d),

color-stop(0.249, #4b4c4d),

color-stop(0.25, #575b5c),

color-stop(0.329, #575b5c),

color-stop(0.33, #6b7071),

color-stop(0.749, #6b7071),

color-stop(0.75, #575b5c),

color-stop(0.909, #575b5c),

color-stop(0.91, #4b4c4d),

to(#4b4c4d)

);

// canvas gradient

var gradient = $(‘canvas’).getContext(“2d”).createLinearGradient(0,0,230,0);

gradient.addColorStop(0,’#4b4c4d’);

gradient.addColorStop(0.249,’#4b4c4d’);

gradient.addColorStop(0.25,’#575b5c’);

gradient.addColorStop(0.329,’#575b5c’);

gradient.addColorStop(0.33,’#6b7071′);

gradient.addColorStop(0.749,’#6b7071′);

gradient.addColorStop(0.75,’#575b5c’);

gradient.addColorStop(0.909,’#575b5c’);

gradient.addColorStop(0.91,’#4b4c4d’);

gradient.addColorStop(1,’#4b4c4d’);

二、不要用 text-shadow 和 box-shadow

这是速度变慢的另外一个重要因素。最好不要用这些 CSS 属性。

三、硬件加速是很新的功能……而且也很多BUG

在 Safari 上，只要使用 -webkit-transform 这个 CSS 属性就可以启用硬件加速了。（opacity 也行，不过缺点上面说过了。）

硬件加速有其局限，例如同时运行的动画数量是有限制的，如果超过了这个限制，动画就会闪烁，有时还会出错。不过如果轻度使用的话，效果会非常棒。

四、尽可能地使用触控事件

触控事件是个好选择，因为传统的 onClick 事件在 iPad 上用来会有点延迟。在 everytimezone.com 的源代码里有些小窍门，教你如何在使用触控事件的同时，也能够支持非触控设备上的浏览器：

var supportsTouch = ‘createTouch’ in document;
element[supportsTouch ? 'ontouchmove' : 'onmousemove'] = function(event){
var pageX = event.pageX;
if (event.touches) pageX = event.touches[0].pageX;
// …
}

五、不要用 opacity

因为某些原因，使用 opacity 这个 CSS 属性有时会干扰硬件加速。如果你感到速度变慢，但又看不出哪里出了问题的话，就检查一下有没有用到 opacity 吧。

六、万事无捷径，请手写 JavaScript 和 CSS

不要依赖框架或是网页标准狂热分子推荐给你的东西。我们这个例子里只有一个高度精简的 HTML 页面，CSS 都写在页面里，没用任何 JavaScript 框架，并尽量利用了目标平台（iPad）的特性，最终的结果就是一个几乎能够瞬间加载的苗条网页，而且缓存做得很好，离线使用也毫不失礼。没错，我们也可以选择用 JavaScript 和 CSS 框架，但有的时候少即多。（记住，各类框架所提供的那些对跨浏览器的支持你并非全都需要。）

// mini-pico-tiny convenience micro-framework, ymmv
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ‘;’+style; }
function anim(id, transform, opacity, dur){
css(id, ‘-webkit-transition:-webkit-transform’+',opacity ‘+(dur||0.5)+’s,’+(dur||0.5)+’s;-webkit-transform:’+transform+’;opacity:’+(1||opacity));
}

七、别用 translate，用 translate3d

使用 -webkit-transform 时，记得用 translate3d(x,y,z) 语法，而不是 translate(x,y)。因为某种原因，后者无法支持硬件加速，至少在 iOS 3.x 上不行（不过在桌面版 Safari 里似乎没问题）。谢谢马提奥·斯宾内利指出这点。（也推荐大家看看他做的 iScroll，里面有很多很棒的代码，也是演示如何为页面在移动版 WebKit 上的速度进行优化的好例子。）

转自apple4.us

分享一个jquery的图片放大预览插件:cloud-zoom.

cloud-zoom DEMO

部署步骤:

1.加载jquery-1.4.js 和 cloud-zoom.1.0.2.min.js

2.加入样式表(DEMO中<style>部分)

3.为需要放大预览效果的缩略图添加超链接<a>并将类命名为”cloud-zoom” class=”cloud-zoom”

4.在超链接<a>的rel属性中加入需要的参数实现不同的效果

实例:

<a href=”images/大图.jpg” class=”cloud-zoom” rel=”position:’inside’ ,showTitle:false, adjustX:-2, adjustY:-2″><img src=”images/缩略图.jpg” title=”iinterest” /></a>

cloud-zoom参数说明: