原文地址：http://lifesinger.wordpress.com/2011/07/07/guide-to-fed/

也许这些文章您也感兴趣:

• TWO IT-Services Web Design
• 玩玩Flash
• 开发流程中的可用性之三
• jQuery UI组件开发
• [转]UE学习笔记：Facebook如何利用数据指导设计

但是在IE8以前的版本中，在DOM加载完成后，使用该方法会返回当前元素的物理位置，即没有CSS样式渲染时的位置。

而IE8以后会返回一个渲染后的位置，这样的差异就导致了一些问题的产生。

比如说当页面上面有几个选卡，但是当没有CSS渲染时，是不会重叠的，所以非常高。

这种情况下想要获取下面元素的高度时，误差非常大！

也许这些文章您也感兴趣:

• ie6 javascript:void(0);
• javascript 函数备忘 – indexOf
• javascript 函数备忘 – unique
• 消失的神族
• PCRE Partterns – Assertions

if (!Array.prototype.unique){
	Array.prototype.unique = function(){
		var self = this,
		    _a = self.concat().sort();

		_a.sort(function(a, b){
			if(a === b){
				var n = self.indexOf(b);
				self.splice(n,1);
			}

			return -1;
		});	

	};
}

其中值得注意的是sort函数如果是使用函数做为参数的话，一定要有返回值，并且一定是数字！

相关问题与讨论:

http://www.zachleat.com/web/array-sort/

http://stackoverflow.com/questions/2956432/js-sort-works-in-firefox-but-not-ie-cant-work-out-why

也许这些文章您也感兴趣:

• javascript 函数备忘 – indexOf
• javascript教程-数组
• ie6 javascript:void(0);
• javascript-函数
• getBoundingClientRect方法在IE8以上版本需要注意

但是对于你来说，代码就是你的一张脸，当别人读的时候，你总不希望别人说：“天阿！怎么这么丑！！！”如果正好你这时在旁边，那将会是一件多么悲催的事~~

那么让我们简单的为这张脸美容一下，代表自己嘛，肯定不要太悲催了，哈哈。

让代码自己说明白为什么这样，大家肯定想到了写注释。

写注释也有好多种写法，比如说能直接生成javaDoc的注释风格等

但是即使生成了，这文档又会有多少人去看呢？又有多少人能看懂呢？

所以，还是让我们来简单点吧，只会占用你一点点时间，就让你的代码看起来更加的漂亮。

CSS

对于CSS，也许经常会使用到缩写，但是过一段时间，自己也许都已经已经不记得了~囧！

写一些必要的注释，解释缩写的意义。对于其他人来看，这让他们更快的明白；对于自己过一段时间后再看，可以迅速的回想起当时的思路，易于修改。

jQuery ui theme的风格，这种命名方法，个人感觉是非常不错的方法，即易于记忆，同时也易于理解。

命名空间，虽然CSS里面这个概念很弱，或者说因为权重的问题不存在命名空间这个概念。但是如果把页面上每一块都分割开的话，那么每一块应该是相对独立，在独立的范畴内应该使用同一父级的class做为命名空间。这不仅仅是权重的问题，也增强代码的可读性。

多使用换行，对于不同的区块，应该使用换行让代码上的逻辑也更清晰。

javascript

javascript有很多不同的注释写法，我这里绝对不是标准的，大家请仅仅做为参考。

写注释的目的就是为了让代码自己可以解释自己，并且说明自己的用法等。

在注释段里面放些简单的实例，让新人更容易理解已经公司现有的Base类库。

遵循着某总风格。因为javascript的灵活性，使得使用这门语言的人可以用各种写法来达到目的，但是实事让，如果在团队里每个人的代码风格都相差很大，不但看起来不爽，读起来更不爽。

所以我们一定要遵循某种结构。

噢，对了，在组件的前面，或者段落前要写上自己的名字，这点很重要，因为其他人要修改的话，至少要知道这东西是谁做的，可以找谁商议。

以上一些步骤其实都不复杂，但是你的代码会因此清晰点。

输入的指令是要让编译器明白，如果它不明白，OK没商量直接给你抛Error~

写注释，是为了给人看的，如果只是机器能看懂，那还不如不写了。

也许这些文章您也感兴趣:

• Adobe Air的CSS样式支持（1.5*）
• 伪类与伪元素
• ie z-index bug
• 符合XHTML Strict 1.0 W3C组织标准的标签与结构
• PCRE Partterns – Assertions

ECMA-262 standard

http://www.tutorialspoint.com/javascript/array_indexof.htm

也许这些文章您也感兴趣:

• javascript 函数备忘 – unique
• ie6 javascript:void(0);
• getBoundingClientRect方法在IE8以上版本需要注意
• 消失的神族
• PCRE Partterns – Assertions

代码：

 <a onclick="window.location.href='http://www.google.com'" href="javascript:void(0);">google</a>

这段代码在主流的浏览器里面都没问题，但是在IE6下就会出现不能跳转的现象。

经过一翻排查，发现绑定的事件都会执行，是由于DOM本身的冒泡事件所以会最后执行href属性内的javascript:void(0);导致的。

a标签

a标签本来就是用来进行页面跳转的标签，其运行机制是告诉浏览器URL地址并且跳转。当然，我们可以在href属中直接执行javascript。

代码：

<a href="javascript:alert('Hello!');">Say Hello</a>

Say Hello

这里由于javascript执行了alert函数，但是其返回的是null。所以a标签没有执行任何动作。

javascript:void(0);

void(arg);可以理解为永远返回null的函数，但是其参数不能为空。其参数可以为任意的表达式甚至是函数。

代码：

<a href="javascript:void(name = 'will'); alert('Hello ' + name);">Say Hello</a>

Say Hello

对IE6运行的猜想

IE6会先运行DOM本身绑定的事件，如onclick；如果没有阻止冒泡，则会顺序执行href属性。而void(0);正是不需要执行任何事件，则IE6告诉浏览器不执行任何事件（覆盖之前的动作），并且终止冒泡相当于return false;于是浏览器没有执行任何动作。

这样只要在onclick事件内阻止冒泡事件即可。

经过改进的代码为：

 <a onclick="window.location.href='http://www.google.com' return false;" href="javascript:void(0);">google</a>

这样在IE6下就可以正常运行了。

其他方法

当然可以不使用javascript:void(0);而改使用#也可以避免，href属性内的#本来的意思就是锚点#name所以当不指定任何锚时自然会到页面顶端并在URL后加入Hash symbol。

这里对于锚还有一个比较特殊的用法

当href属性的值是锚点时，但是又找不到该锚点，则相当于返回null，所以可以使用##来代替javascript:void(0);

当然前提是你的页面不要有锚点的名字是#的哟~

基于Widget Factory的组件模式

从1.8版本开始jQuery UI把核心分为widget与core并且widget不依赖于core。

这样来讲，所有的组件都是基于Widget Factory所构建的，并且都继承于Widget Factory。

对于开发前端组件来说，需要更多的是一种规范，这种规范是可以让多人来合作的，并且对产出的组件有统一的编码风格与相同的基础方法。

Widget Bridge

如何实现把组件（Widget）与jQuery API相关联呢？

jQuery UI提供了$.widget.bridge方法。

其实如果了解设计模式的话，应该会想到Bridge Pattern 中文详解

概念：【GOF95】在提出桥梁模式的时候指出，桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦，使得二者可以独立地变化"。这句话有三个关键词，也就是抽象化、实现化和脱耦。

如果细心的话，你可能会发现，$.widget.bridge的源码在处理event其实就是jQuery Plugin的编写建议。

所以jQuery UI就是规范化的jQuery Plugin组合。

详细介绍见其开发指导见 Developer Guide

jQuery其实只是冰山一角，在你使用中，会发现有更多东西可以去挖掘也非常值得去深入的挖掘。

也许这些文章您也感兴趣:

• 理解jQuery $.extend与$.fn.extend
• 互动对于新的互联网至关重要
• Study jQuery in a Simplified Way [转载]
• 记录 – 三年间为公司做了哪些事
• 关于jQuery 不同选择器的性能比较[翻译][转载]

构造jQuery时会实例化一个对象

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
},

对于$.extend相当于对jQuery Object自身进行扩展。查看源码

...
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
...

而$.fn.extend相当于对jQuery prototype进行扩展。查看源码

jQuery.fn = jQuery.prototype = {
...

所以这样就很清晰了，对jQuery添加全局函数时使用$.extend，而对于插件侧使用$.fn.extend

也许这些文章您也感兴趣:

• Study jQuery in a Simplified Way [转载]
• wordpress 插件 images lazyload
• 关于jQuery 不同选择器的性能比较[翻译][转载]
• jQuery UI组件开发
• 互动对于新的互联网至关重要

如何提高Sizzle选择器的性能?

不同的选择器引擎解析是不同的

测试地址：http://alexsexton.com/selectors/

我们看到Sizzle的方法与querySelectorAll的方法是一至的

关于querySelectorAll请到MDC查看

下面是我们平常写jQuery时需要注意的：

左轻右重

bad

div.grid2col .column

better

.grid2col td.column

尽量让左边只放一个选择器tag或者Class

如果需要tag.class这种选择器，最好放在右边

ID优先

bad

$(‘#item div.column’)

better

$(‘#item’).find(‘div.column’)

能简则简

bad

div.grid2col .content .column

better

.grid2col .column

DOM操作优化

尽量减少DOM操作

bad

$.each(array, function(){

   var li = ‘<li>’ + item + ‘</li>’;

   $(‘#ballers’).append(li);

});

better

var frag = document.createDocumentFragment();

$.each(array, function(){

   var li = ‘<li>’ + item + ‘</li>’;

   frag.appendChild(li);

});

$(‘#ballers’)[0].appendChild(frag);

jQuery自身HTML的方法就很多地方用到createDocumentFragment()

or

var tmphtml = ”;

$.each(array, function(){

   tmphtml += ‘<li>’ + item + ‘</li>’;

});

$(‘#ballers’).html(tmphtml);

哪里变化封装哪里

bad

if(t1.data(‘active’) === ‘show’){

   t1.hide();

}

if(t2.data(‘active’) === ‘show’){

   t2.hide();

}

better

var elems = [t1, t2];

$.each(elems, function(i, n){

   if(n.data(‘active’) === ‘show’){

       n.hide();

   }

});

注意其中的“===”一般情况下都应该使用“===”而不是“==”。

链式操作

bad

$(‘body’).append(‘<div class=’button’></div>’);

$(‘div.button’).click(function(){…});

better

$(‘div.button’)

   .appendTo(‘body’)

   .click(function(){…});

当需要大量操作DOM时需要先把它卸载

var ul = $("#ul"),

ulparent = ul.parent();

ul.detach();  //1.4新方法

ul.addLotsLi();

ulparent.append(ul);

对条件判断的新方法

通常

if( type === ‘foo’ || type === ‘bar’){}

高效

if(  /^(foo||bar)$/.test(type) ){}

if( ({foo:1,bar:1})[type] ){}

也许这些文章您也感兴趣:

• 理解jQuery $.extend与$.fn.extend
• Study jQuery in a Simplified Way [转载]
• 关于jQuery 不同选择器的性能比较[翻译][转载]
• jQuery UI组件开发
• 互动对于新的互联网至关重要

Javascript和swf在网页中交互一般可有以下几种情况：

1.swf和这些调用的javascript在同域

2.swf和这些调用的javascript在不同域，比如加载远程的swf然后call别地方的服务

对于swf跨域call服务的问题，可同过crossdomain.xml配置解决。

但对于加载远程的swf，默认情况下，根本不能将里面的方法成功注册为向javascript公开的方法，一般会报此类错误：

a) SecurityError: Error #2060: 安全沙箱冲突:ExternalInterface ,调用者 remote.com/test.swf(所加载的远程swf) 不能访问 127.0.0.1(本机的一个服务)

at flash.external::ExternalInterface$/_initJS()
at flash.external::ExternalInterface$/addCallback()

…

b) 错误： uncaught exception: Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.]

解决办法

对于a错误，是因为远程的swf加载到本地后没有权限去访问当前html文档，对于这个我们只需要在输出swf的时候设置 allowScriptAccess 属性，一般设置为always.即可解决。

对于b错误，是因为默认actionscript中不允许向将方法注册到不同域的 html文档中， 对于这个我们只需要在as中加一下代码即可解决：

import flash.system.Security;

Security.allowDomain(“*”);
Security.allowInsecureDomain(“*”);