让开发也懂前端 View more presentations from lifesinger 原文地址：http://lifesinger.wordpress.com/2011/07/07/guide-to-fed/

getBoundingClientRect方法可以获得当前元素相对于浏览器的位置。 但是在IE8以前的版本中，在DOM加载完成后，使用该方法会返回当前元素的物理位置，即没有CSS样式渲染时的位置。 而IE8以后会返回一个渲染后的位置，这样的差异就导致了一些问题的产生。 比如说当页面上面有几个选卡，但是当没有CSS渲染时，是不会重叠的，所以非常高。 这种情况下想要获取下面元素的高度时，误差非常大！

这并不是一标准的函数，而是利用Array的方法来自定义而以。 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

if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt /*, from*/) { var len = this.length; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len; for (; from < len; from++) { if (from in this && this[from] === elt) return from; } return -1; [...]

遇到过几次这种问题，现在总结一下。 代码： <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); 当然前提是你的页面不要有锚点的名字是#的哟~

对于jQuery大家都非常熟悉了，也许大家也早早就认识了jQuery UI，但是因为其可用的控件非常少所以放弃了，但是jQuery UI的设计与构造却是非常不错的。 基于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其实只是冰山一角，在你使用中，会发现有更多东西可以去挖掘也非常值得去深入的挖掘。

这两个方法一直都觉得挺难理解的，但是今天写程序时发现这两个方法的区别就在于$.extend是作用于一个object的静态方法（static method），而$.fn.extend是在作用于prototype的一个实例方法（instance method）。 构造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; } [...]

选择器的优化 如何提高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(){    [...]

最近在做Flash与Javascript上传控件，但是发现Flash还真是问题多多，现在总结一下，留备忘，有些是网上找来的，已经不知道作者是谁了… … 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(“*”);

document：属性 document.title                 //设置文档标题等价于HTML的<title>标签 document.bgColor               //设置页面背景色 document.fgColor               //设置前景色(文本颜色) document.linkColor             //未点击过的链接颜色 document.alinkColor            //激活链接(焦点在此链接上)的颜色 document.vlinkColor            //已点击过的链接颜色 document.URL                   //设置URL属性从而在同一窗口打开另一网页 document.fileCreatedDate       //文件建立日期，只读属性 document.fileModifiedDate      //文件修改日期，只读属性 document.fileSize              //文件大小，只读属性 document.cookie                //设置和读出cookie document.charset               //设置字符集 简体中文:gb2312 document：方法 document.write()                      //动态向页面写入内容 document.createElement(Tag)           //创建一个html标签对象 document.getElementById(ID)           //获得指定ID值的对象 document.getElementsByName(Name)      //获得指定Name值的对象 document.body.appendChild(oTag) body：子对象 document.body                   //指定文档主体的开始和结束等价于<body></body> document.body.bgColor           //设置或获取对象后面的背景颜色 document.body.link              //未点击过的链接颜色 document.body.alink             //激活链接(焦点在此链接上)的颜色 document.body.vlink             //已点击过的链接颜色 document.body.text              //文本色 document.body.innerText         //设置<body>…</body>之间的文本 document.body.innerHTML         //设置<body>…</body>之间的HTML代码 document.body.topMargin         //页面上边距 [...]