让开发也懂前端 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

在开发中，说实话，一般的公司可能都不会有写文档的时间，并且个人也不一定都有这习惯。 但是对于你来说，代码就是你的一张脸，当别人读的时候，你总不希望别人说：“天阿！怎么这么丑！！！”如果正好你这时在旁边，那将会是一件多么悲催的事~~ 那么让我们简单的为这张脸美容一下，代表自己嘛，肯定不要太悲催了，哈哈。 让代码自己说明白为什么这样，大家肯定想到了写注释。 写注释也有好多种写法，比如说能直接生成javaDoc的注释风格等 但是即使生成了，这文档又会有多少人去看呢？又有多少人能看懂呢？ 所以，还是让我们来简单点吧，只会占用你一点点时间，就让你的代码看起来更加的漂亮。 CSS 对于CSS，也许经常会使用到缩写，但是过一段时间，自己也许都已经已经不记得了~囧！ 写一些必要的注释，解释缩写的意义。对于其他人来看，这让他们更快的明白；对于自己过一段时间后再看，可以迅速的回想起当时的思路，易于修改。 jQuery ui theme的风格，这种命名方法，个人感觉是非常不错的方法，即易于记忆，同时也易于理解。 命名空间，虽然CSS里面这个概念很弱，或者说因为权重的问题不存在命名空间这个概念。但是如果把页面上每一块都分割开的话，那么每一块应该是相对独立，在独立的范畴内应该使用同一父级的class做为命名空间。这不仅仅是权重的问题，也增强代码的可读性。 多使用换行，对于不同的区块，应该使用换行让代码上的逻辑也更清晰。 javascript javascript有很多不同的注释写法，我这里绝对不是标准的，大家请仅仅做为参考。 写注释的目的就是为了让代码自己可以解释自己，并且说明自己的用法等。 在注释段里面放些简单的实例，让新人更容易理解已经公司现有的Base类库。 遵循着某总风格。因为javascript的灵活性，使得使用这门语言的人可以用各种写法来达到目的，但是实事让，如果在团队里每个人的代码风格都相差很大，不但看起来不爽，读起来更不爽。 所以我们一定要遵循某种结构。 噢，对了，在组件的前面，或者段落前要写上自己的名字，这点很重要，因为其他人要修改的话，至少要知道这东西是谁做的，可以找谁商议。   以上一些步骤其实都不复杂，但是你的代码会因此清晰点。 输入的指令是要让编译器明白，如果它不明白，OK没商量直接给你抛Error~ 写注释，是为了给人看的，如果只是机器能看懂，那还不如不写了。

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(“*”);